parent
308578ae62
commit
fc5d6cc0c3
@ -1,69 +0,0 @@ |
|||||||
$sign:sign; |
|
||||||
|
|
||||||
.App { |
|
||||||
position: relative; |
|
||||||
height: 100vh; |
|
||||||
width: 100vw; |
|
||||||
overflow: hidden; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
|
|
||||||
.title_container { |
|
||||||
position: relative; |
|
||||||
font-size: 4rem; |
|
||||||
line-height: 1.5em; |
|
||||||
|
|
||||||
.title { |
|
||||||
position: relative; |
|
||||||
display: flex; |
|
||||||
letter-spacing: 0.3em; |
|
||||||
font-weight: bold; |
|
||||||
|
|
||||||
.space { |
|
||||||
position: relative; |
|
||||||
width: 1em; |
|
||||||
} |
|
||||||
|
|
||||||
.reversal { |
|
||||||
position: relative; |
|
||||||
|
|
||||||
.base { |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
.face { |
|
||||||
position: absolute; |
|
||||||
width: 0; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
color: #fefefe; |
|
||||||
background-color: #333; |
|
||||||
overflow: hidden; |
|
||||||
// animation: sign linear 600ms forwards; |
|
||||||
animation:{ |
|
||||||
name:sign; |
|
||||||
timing-function: linear; |
|
||||||
duration: 400ms; |
|
||||||
delay:1000ms; |
|
||||||
fill-mode: forwards; |
|
||||||
// iteration-count: infinite; |
|
||||||
} |
|
||||||
// animation-name 规定需要绑定到选择器的 keyframe 名称。。 |
|
||||||
// animation-duration 规定完成动画所花费的时间,以秒或毫秒计。 |
|
||||||
// animation-timing-function 规定动画的速度曲线。 |
|
||||||
// animation-delay 规定在动画开始之前的延迟。 |
|
||||||
// animation-iteration-count 规定动画应该播放的次数。 |
|
||||||
// animation-direction 规定是否应该轮流反向播放动画。 |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@keyframes sign { |
|
||||||
from{ |
|
||||||
width: 0; |
|
||||||
} |
|
||||||
to{ |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
@ -0,0 +1,15 @@ |
|||||||
|
@mixin widthAuto{ |
||||||
|
/*div宽度适应文字*/ |
||||||
|
width:fit-content; |
||||||
|
width:-webkit-fit-content; |
||||||
|
width:-moz-fit-content; |
||||||
|
} |
||||||
|
@mixin noSelect{ |
||||||
|
/*无法选中*/ |
||||||
|
-webkit-touch-callout:none; |
||||||
|
-webkit-user-select:none; |
||||||
|
-khtml-user-select:none; |
||||||
|
-moz-user-select:none; |
||||||
|
-ms-user-select:none; |
||||||
|
user-select:none; |
||||||
|
} |
After Width: | Height: | Size: 2.9 MiB |
@ -0,0 +1,15 @@ |
|||||||
|
import {useNavigate, useLocation} from "react-router-dom"; |
||||||
|
import {useEffect} from "react"; |
||||||
|
|
||||||
|
export default function RouterAuth(props){ |
||||||
|
const navigate = useNavigate(); |
||||||
|
const location = useLocation(); |
||||||
|
useEffect(() => { |
||||||
|
const path = window.location.pathname |
||||||
|
// console.log(location) |
||||||
|
if(path == '/homes'){ |
||||||
|
navigate('/home') |
||||||
|
} |
||||||
|
}) |
||||||
|
return props.children |
||||||
|
} |
@ -1,10 +1,16 @@ |
|||||||
import React from 'react' |
import React from 'react' |
||||||
import ReactDOM from 'react-dom/client' |
import ReactDOM from 'react-dom/client' |
||||||
|
import {BrowserRouter} from "react-router-dom"; |
||||||
import App from './App' |
import App from './App' |
||||||
import './assets/default.css' |
import './assets/default.css' |
||||||
|
import RouterAuth from "./components/RouterAuth"; |
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')).render( |
ReactDOM.createRoot(document.getElementById('root')).render( |
||||||
<React.StrictMode> |
<React.StrictMode> |
||||||
|
<BrowserRouter> |
||||||
|
<RouterAuth> |
||||||
<App/> |
<App/> |
||||||
</React.StrictMode>, |
</RouterAuth> |
||||||
|
</BrowserRouter> |
||||||
|
</React.StrictMode> |
||||||
) |
) |
||||||
|
@ -0,0 +1,34 @@ |
|||||||
|
import { Navigate } from 'react-router-dom' |
||||||
|
|
||||||
|
import Index from '../view/Index' |
||||||
|
import Home from '../view/Home' |
||||||
|
|
||||||
|
export default [ |
||||||
|
// 路由表 |
||||||
|
{ |
||||||
|
path:'/', |
||||||
|
element: <Index /> |
||||||
|
}, |
||||||
|
// { |
||||||
|
// path:'/signIn', |
||||||
|
// element: <SignIn /> |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// path:'/signUp', |
||||||
|
// element: <SignUp /> |
||||||
|
// }, |
||||||
|
{ |
||||||
|
path: '/home', |
||||||
|
element: <Home />, |
||||||
|
// children:[ |
||||||
|
// { |
||||||
|
// path:'setting', |
||||||
|
// element: <Setting /> |
||||||
|
// } |
||||||
|
// ] |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: "", |
||||||
|
element: <Navigate to="/" replace /> |
||||||
|
} |
||||||
|
] |
@ -0,0 +1,58 @@ |
|||||||
|
import { observable, action, computed, makeObservable} from "mobx"; |
||||||
|
|
||||||
|
class DefaultStore { |
||||||
|
// Token
|
||||||
|
token = null; |
||||||
|
// 登陆时的注册名称
|
||||||
|
signInUsername = null; |
||||||
|
// home页跳转状态
|
||||||
|
homePageGotoStatus = true; |
||||||
|
// 用户信息
|
||||||
|
userInfo = null; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
name = 'kangkang000'; |
||||||
|
sex = '男'; |
||||||
|
userObj = { |
||||||
|
name: 'kangkang000', |
||||||
|
age: 23, |
||||||
|
token: '12345689' |
||||||
|
} |
||||||
|
|
||||||
|
constructor() { |
||||||
|
// mobx6 和以前版本这是最大的区别
|
||||||
|
makeObservable(this, { |
||||||
|
token:observable, |
||||||
|
signInUsername:observable, |
||||||
|
homePageGotoStatus:observable, |
||||||
|
userInfo:observable, |
||||||
|
|
||||||
|
name: observable, |
||||||
|
sex: observable, |
||||||
|
userObj: observable, |
||||||
|
setName: action, |
||||||
|
titleName: computed |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
setName(v) { |
||||||
|
console.log('触发action'); |
||||||
|
this.name = v; |
||||||
|
} |
||||||
|
setUserObj(obj) { |
||||||
|
this.userObj = obj; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
get titleName(){ |
||||||
|
return this.name+'___111'; |
||||||
|
} |
||||||
|
get userObject() { |
||||||
|
return this.userObj; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default DefaultStore |
@ -0,0 +1,3 @@ |
|||||||
|
import DefaultStore from './default' |
||||||
|
|
||||||
|
export const defaultStore = new DefaultStore() |
@ -0,0 +1,23 @@ |
|||||||
|
import {defaultStore} from "../../store"; |
||||||
|
import css from './index.module.scss' |
||||||
|
|
||||||
|
export default function Home() { |
||||||
|
|
||||||
|
console.log(defaultStore.titleName) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={css.Home}> |
||||||
|
<header> |
||||||
|
<div className={css.container}> |
||||||
|
<nav> |
||||||
|
<div className={css.content}> |
||||||
|
<div className={css.sub}></div> |
||||||
|
{/* <div className={css.sup}></div> */} |
||||||
|
<div className={css.text}>词海</div> |
||||||
|
</div> |
||||||
|
</nav> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
@ -0,0 +1,59 @@ |
|||||||
|
@import '../../assets/default.scss'; |
||||||
|
|
||||||
|
.Home { |
||||||
|
position: relative; |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&>header { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
&>.container { |
||||||
|
position: relative; |
||||||
|
width: 80%; |
||||||
|
max-width: 1200px; |
||||||
|
margin: 0 auto; |
||||||
|
|
||||||
|
&>nav { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
margin: 1rem; |
||||||
|
|
||||||
|
&>div.content { |
||||||
|
@include widthAuto; |
||||||
|
position: relative; |
||||||
|
border: 1px solid #33333399; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 1rem 1.5rem; |
||||||
|
cursor: pointer; |
||||||
|
letter-spacing: 0.5rem; |
||||||
|
|
||||||
|
&>div.sub { |
||||||
|
position: absolute; |
||||||
|
left: -0.8rem; |
||||||
|
bottom: -0.5rem; |
||||||
|
background-color: #99999999; |
||||||
|
width: calc(100% + 0.6rem); |
||||||
|
height: calc(100% + 0.3rem); |
||||||
|
} |
||||||
|
|
||||||
|
&>div.sup { |
||||||
|
position: absolute; |
||||||
|
right: -0.8rem; |
||||||
|
top: -0.4rem; |
||||||
|
background-color: #aaaaaa99; |
||||||
|
width: calc(100% + 0.5rem); |
||||||
|
height: calc(100% + 0.7rem); |
||||||
|
} |
||||||
|
&>div.text{ |
||||||
|
position: relative; |
||||||
|
font-size: 1.4rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,27 @@ |
|||||||
|
import { useState } from 'react' |
||||||
|
import css from './index.module.scss'; |
||||||
|
|
||||||
|
import {useNavigate} from 'react-router-dom' |
||||||
|
|
||||||
|
function App() { |
||||||
|
const [count, setCount] = useState(0) |
||||||
|
const navigate = useNavigate() |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={css.index} onClick={() => navigate('/home')}> |
||||||
|
<div className={css.title_container}> |
||||||
|
<div className={css.title}> |
||||||
|
<div>HELLO </div> |
||||||
|
<div className={css.space}></div> |
||||||
|
<div className={css.reversal}> |
||||||
|
<div className={css.base}> WORL<span style={{letterSPace:'0'}}>D </span></div> |
||||||
|
<div className={css.face}> WORL<span style={{letterSPace:'0'}}>D </span></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={css.describe}>死生契阔,与子成说。执子之手,与子偕老。</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default App |
@ -0,0 +1,107 @@ |
|||||||
|
@import '../../assets/default.scss'; |
||||||
|
$sign: sign; |
||||||
|
|
||||||
|
.index { |
||||||
|
@include noSelect; |
||||||
|
position: relative; |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
background: { |
||||||
|
image: url('../../assets/index.png'); |
||||||
|
position: center 100%; |
||||||
|
repeat: no-repeat; |
||||||
|
size: cover; |
||||||
|
} |
||||||
|
|
||||||
|
; |
||||||
|
|
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
background-color: #cccccc33; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
backdrop-filter: blur(20px); |
||||||
|
} |
||||||
|
|
||||||
|
.title_container { |
||||||
|
position: relative; |
||||||
|
font-size: 4rem; |
||||||
|
line-height: 1.6em; |
||||||
|
|
||||||
|
.title { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
letter-spacing: 0.1em; |
||||||
|
font-weight: bold; |
||||||
|
|
||||||
|
.space { |
||||||
|
position: relative; |
||||||
|
width: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
.reversal { |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.base { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.face { |
||||||
|
position: absolute; |
||||||
|
width: 0; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
color: #fefefe; |
||||||
|
background-color: #333; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
// animation: sign linear 600ms forwards; |
||||||
|
animation: { |
||||||
|
name: sign; |
||||||
|
timing-function: linear; |
||||||
|
duration: 400ms; |
||||||
|
delay: 1000ms; |
||||||
|
fill-mode: forwards; |
||||||
|
// iteration-count: infinite; |
||||||
|
} |
||||||
|
|
||||||
|
; |
||||||
|
// animation-name 规定需要绑定到选择器的 keyframe 名称。。 |
||||||
|
// animation-duration 规定完成动画所花费的时间,以秒或毫秒计。 |
||||||
|
// animation-timing-function 规定动画的速度曲线。 |
||||||
|
// animation-delay 规定在动画开始之前的延迟。 |
||||||
|
// animation-iteration-count 规定动画应该播放的次数。 |
||||||
|
// animation-direction 规定是否应该轮流反向播放动画。 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.describe { |
||||||
|
position: relative; |
||||||
|
font-family: serif; |
||||||
|
font-size: 1.3rem; |
||||||
|
letter-spacing: 0.5rem; |
||||||
|
text-align: center; |
||||||
|
text-align-last:justify; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes sign { |
||||||
|
from { |
||||||
|
width: 0; |
||||||
|
} |
||||||
|
|
||||||
|
to { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue