From c8c79de0e71630625d9588bf8f8dafe3c32b1dbb Mon Sep 17 00:00:00 2001 From: eericxu <2681350846@qq.com> Date: Thu, 31 Oct 2024 10:45:21 +0800 Subject: [PATCH] fix home card ui on change window size --- pages/home.tsx | 385 ++++++++++++++++++++++++------------------------- 1 file changed, 188 insertions(+), 197 deletions(-) diff --git a/pages/home.tsx b/pages/home.tsx index 110bca26..f7eb4542 100644 --- a/pages/home.tsx +++ b/pages/home.tsx @@ -1,241 +1,232 @@ -import { useRouter } from 'next/router'; -import React from 'react'; -import styled from 'styled-components'; -import PageUserSideLayout from '../components/PageUserSideLayout'; -import { BaseProps } from '../components/types'; -import { useGetDepost } from '../lib/hooks/useGetDeposit'; +import { useRouter } from "next/router"; +import React from "react"; +import styled from "styled-components"; +import PageUserSideLayout from "../components/PageUserSideLayout"; +import { BaseProps } from "../components/types"; +import { useGetDepost } from "../lib/hooks/useGetDeposit"; function home(p: BaseProps) { - const r = useRouter() - const { isPremiumUser } = useGetDepost() - // const _onClickPublick = () => r.push('/files') - const _onClickShareAndEarn = () => r.push('/share-earn') - const _onClickVault = () => isPremiumUser && r.push('/files/vault') - const _onClickUser = () => r.push('/user') - const _onClickPay2Download = () => { window.location.href = 'https://p2d.crustapps.net/' } - - return -
- Upload and store your file to IPFS
- via Crust’s decentralized storage network. -
-
- - Share-and-Earn + const r = useRouter(); + const { isPremiumUser } = useGetDepost(); + // const _onClickPublick = () => r.push('/files') + const _onClickShareAndEarn = () => r.push("/share-earn"); + const _onClickVault = () => isPremiumUser && r.push("/files/vault"); + const _onClickUser = () => r.push("/user"); + const _onClickPay2Download = () => { + window.location.href = "https://p2d.crustapps.net/"; + }; + + return ( + +
+ Upload and store your file to IPFS
+ via{" "} + + Crust + + ’s decentralized storage network. +
+
+ + Share-and-Earn +
+
+
+
+ +
File Sharing
+

Share your files with the public or totally in secret

+
+
+
FILE SHARING
+

Share your files with friends, family and colleagues via direct link or with your personalized Twitter link.

+
-
-
-
-
- -
File Sharing
-

Share your files with the public or totally in secret

-
-
-
FILE SHARING
-

Share your files with friends, family and colleagues via direct link or with your personalized Twitter link.

-
-
-
-
-
-
- -
Vault
-

100% secured and client side encrypted file storage

-
-
-
VAULT
-

Encrypted cloud storage with the highest security possible. Nobody else but you is holding the keys to your most sensitive and private data.

- {/* Learn more */} -
-
-
-
-
-
- -
Pay2Download
-

Monetize your data in the easiest way possible

-
-
-
PAY 2 DOWNLOAD
-

Upload your files, set a price and offer your data to potential buyers via payment links. Enjoy P2P data sales in a totally private and trustless environment.

- {/* Learn more */} -
-
-
+
+
+ +
Vault
+

100% secured and client side encrypted file storage

+
+
+
VAULT
+

Encrypted cloud storage with the highest security possible. Nobody else but you is holding the keys to your most sensitive and private data.

+ {/* Learn more */} +
-
- Become a Premium User and get more storage space +
+
+ +
Pay2Download
+

Monetize your data in the easiest way possible

+
+
+
PAY 2 DOWNLOAD
+

Upload your files, set a price and offer your data to potential buyers via payment links. Enjoy P2P data sales in a totally private and trustless environment.

+ {/* Learn more */} +
+
+ + ); } -export const Home = React.memo(styled(home)` +export const Home = React.memo( + styled(home)` color: var(--main-color); .pusl_center_flex_content { - // width: 76.24rem; - min-width: unset; + // width: 76.24rem; + min-width: unset; } .home--slog { - display: inline-block; - font-size: 3.428571rem; - font-weight: 600; - line-height: 4.642857rem; - margin-top: 5rem; - a{ - color: var(--primary-color); - } + display: inline-block; + font-size: 3.428571rem; + font-weight: 600; + line-height: 4.642857rem; + margin-top: 5rem; + a { + color: var(--primary-color); + } } .home--activity { - cursor: pointer; - position: absolute; - display: flex; - align-items: end; - right: 20rem; - top: 4rem; + cursor: pointer; + position: absolute; + display: flex; + align-items: end; + right: 20rem; + top: 4rem; } .home--user-link { - cursor: pointer; - display: flex; - text-align: center; - margin-top: 10rem; + cursor: pointer; + display: flex; + text-align: center; + margin-top: 10rem; } .home--user-link a { - font-size: 2rem; - margin: 0 auto; + font-size: 2rem; + margin: 0 auto; } .home--activity a { - font-size: 24px; + font-size: 24px; } .hot-sale { - width: 2rem; - height: 2rem; - color: red; - margin-right: 4px; - } - - .home--card:hover .home--card--inner { - transform: rotateY(180deg); - } - - .home--card--inner { - /* background: #FFFBF9; */ - box-shadow: 4px 4px 25px rgb(0 0 0 / 20%); - border-radius: 20px; - text-align: center; - padding-top: 63%; - transition: transform 0.6s; - transform-style: preserve-3d; + width: 2rem; + height: 2rem; + color: red; + margin-right: 4px; } .home--card--back { - background-color: #202020; - color: white; - transform: rotateY(180deg); - flex-direction: column; - align-items: center; - justify-content: center; + background-color: #202020; + color: white; + transform: rotateY(180deg); + flex-direction: column; + align-items: center; + justify-content: center; } .home--card h5 { - font-size: 22px; + font-size: 22px; } .home--card p { - font-size: 18px; + font-size: 18px; } .home--cards { + display: grid; + width: 100%; + margin: 2rem auto; + height: max-content; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + .home--card { + overflow: hidden; + cursor: pointer; display: flex; - justify-content: space-between; - - .home--card{ - cursor: pointer; - // overflow: hidden; - position: relative; - // background-color: white; - margin-top: 2.57rem; - width: 40rem; - // height: 21.43rem; - display: inline-block; - // border-radius: 3.571429rem; - // border: solid 2px #000000; - // padding: 2.285714rem; - &:nth-child(n + 2){ - margin-left: 2.57rem; - } - &:hover{ - filter: drop-shadow(0px 10px 25px rgba(0, 0, 0, 0.2)); - .home--CommingSoon{ - display: flex; - } - } - } - .home--card-Title { - display: inline-block; - font-size: 2.285714rem; - line-height: 4.285714rem; - } - - .home--card--front, .home--card--back { - position: absolute; - border-radius: 20px; - width: 100%; - height: 100%; - left: 0; - top: 0; - padding: 40px; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; + flex-direction: row; + box-shadow: 4px 4px 25px rgb(0 0 0 / 20%); + border-radius: 20px; + text-align: center; + transition: all 0.6s; + transform-style: preserve-3d; + height: 100%; + min-height: max-content; + &:hover { + filter: drop-shadow(0px 10px 25px rgba(0, 0, 0, 0.2)); + transform: rotateY(180deg); + .home--card--front { + display: none; + } + .home--CommingSoon { display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } - - .home--borderBottom1 { - border-bottom: 5px solid #92D8F7; - } - .home--borderBottom2 { - border-bottom: 5px solid #A7ECC9; - } - .home--borderBottom3 { - border-bottom: 5px solid #FFD7A6; - } - - .home--card-Content { - font-size: 1.142857rem; - line-height: 1.571429rem; - white-space: pre-wrap; - margin-top: 1.857143rem; + } } + } + .home--card-Title { + display: inline-block; + font-size: 2.285714rem; + line-height: 4.285714rem; + } - .home--CommingSoon { - display: none; - position: absolute; - left: 0; - top: 0; - line-height: 2.6rem; - background-color: white; - width: 100%; - height: 100%; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - font-size: 2.285714rem; - white-space: nowrap; - span { - color: var(--primary-color); - text-decoration: underline; - } + .home--card--front, + .home--card--back { + border-radius: 20px; + width: 100%; + flex-shrink: 0; + padding: 2.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 100%; + } + + .home--borderBottom1 { + border-bottom: 5px solid #92d8f7; + } + .home--borderBottom2 { + border-bottom: 5px solid #a7ecc9; + } + .home--borderBottom3 { + border-bottom: 5px solid #ffd7a6; + } + + .home--card-Content { + font-size: 1.142857rem; + line-height: 1.571429rem; + white-space: pre-wrap; + margin-top: 1.857143rem; + } + + .home--CommingSoon { + display: none; + position: absolute; + left: 0; + top: 0; + line-height: 2.6rem; + background-color: white; + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + font-size: 2.285714rem; + white-space: nowrap; + span { + color: var(--primary-color); + text-decoration: underline; } + } } -` as any) + ` as any +); -export default Home \ No newline at end of file +export default Home;