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 ReactDOM from 'react-dom/client' |
||||
import {BrowserRouter} from "react-router-dom"; |
||||
import App from './App' |
||||
import './assets/default.css' |
||||
import RouterAuth from "./components/RouterAuth"; |
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render( |
||||
<React.StrictMode> |
||||
<App /> |
||||
</React.StrictMode>, |
||||
<BrowserRouter> |
||||
<RouterAuth> |
||||
<App/> |
||||
</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