topuser
/
vite-react
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

bug fixed

master
npmrun 4 years ago
parent
5cebd98f2a
commit
9f1ce9197d
14 changed files with 469 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/AppRouter.tsx
  2. 112
      src/assets/style/_font.scss
  3. 1
      src/assets/style/common.scss
  4. 120
      src/components/Loading/Bubbles.module.scss
  5. 18
      src/components/Loading/Bubbles.tsx
  6. 36
      src/components/Loading/Rainbow.module.scss
  7. 14
      src/components/Loading/Rainbow.tsx
  8. 8
      src/route.tsx
  9. 2
      src/views/About/index.tsx
  10. 4
      src/views/Auth/Page404.tsx
  11. 2
      src/views/Home/Header.tsx
  12. 2
      src/views/Home/index.tsx
  13. 133
      src/views/Login/index.module.scss
  14. 30
      src/views/Login/index.tsx

4
src/AppRouter.tsx
View File

@ -8,10 +8,6 @@ import Layout from "@/views/Layout"
import Auth from "@/ui/Auth" import Auth from "@/ui/Auth"
import routes, { Loading } from "./route" import routes, { Loading } from "./route"
function NormalLoading() {
return <Loading color="#ff0000"></Loading>
}
function LoadWrapper(props: any) { function LoadWrapper(props: any) {
if (props.isLazy) { if (props.isLazy) {
const LoadingComp=props.loading?props.loading: ()=><Loading color="#ff0000"></Loading> //NormalLoading; const LoadingComp=props.loading?props.loading: ()=><Loading color="#ff0000"></Loading> //NormalLoading;

112
src/assets/style/_font.scss
View File

@ -0,0 +1,112 @@
/* cyrillic-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmhduz8A.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wkxduz8A.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmxduz8A.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlBduz8A.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmBduz8A.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmRduz8A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdu.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmhduz8A.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwkxduz8A.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmxduz8A.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlBduz8A.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmBduz8A.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmRduz8A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdu.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

1
src/assets/style/common.scss
View File

@ -1,4 +1,5 @@
@import "./reset.scss"; @import "./reset.scss";
@import "./_font.scss";
body, body,
button, button,

120
src/components/Loading/Bubbles.module.scss
View File

@ -0,0 +1,120 @@
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
&:nth-child(1) {
left: 10%;
}
&:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
animation-delay: 2s;
animation-duration: 17s;
}
&:nth-child(3) {
left: 25%;
animation-delay: 4s;
}
&:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
&:nth-child(5) {
left: 70%;
}
&:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
&:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
animation-delay: 7s;
}
&:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
animation-delay: 15s;
animation-duration: 40s;
}
&:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
&:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
animation-delay: 11s;
}
}
}
@-webkit-keyframes square {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-700px) rotate(600deg);
}
}
@keyframes square {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-700px) rotate(600deg);
}
}

18
src/components/Loading/Bubbles.tsx
View File

@ -0,0 +1,18 @@
import React from "react"
import style from "./Bubbles.module.scss"
export default function () {
return (
<ul className={style["bg-bubbles"]}>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
)
}

36
src/components/Loading/Rainbow.module.scss
View File

@ -0,0 +1,36 @@
.ring {
position: relative;
width: 45px;
height: 45px;
margin: 0 auto;
border: 4px solid #4b9cdb;
border-radius: 100%;
}
.ball {
position: absolute;
top: -11px;
left: 0;
width: 16px;
height: 16px;
border-radius: 100%;
background: #4282b3;
}
.loading .holder {
position: absolute;
width: 12px;
height: 45px;
left: 17px;
top: 0px;
animation: loadingE 1.3s linear infinite;
}
@keyframes loadingE {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

14
src/components/Loading/Rainbow.tsx
View File

@ -0,0 +1,14 @@
import React from "react"
import style from "./Rainbow.module.scss"
console.log(style)
export default () => (
<div className={style.loading}>
<div className={style.ring}>
<div className={style.holder}>
<div className={style.ball}></div>
</div>
</div>
</div>
)

8
src/route.tsx
View File

@ -1,10 +1,7 @@
import Page404 from "@/views/Auth/Page404" import Page404 from "@/views/Auth/Page404"
import Login from "@/views/Login"
import React, { lazy } from "react" import React, { lazy } from "react"
function Test() {
return <div>TExtas</div>
}
export const Loading = (props: any) => <div style={{ color: props.color }}>Lodeing.22..</div> export const Loading = (props: any) => <div style={{ color: props.color }}>Lodeing.22..</div>
let delay = let delay =
@ -48,6 +45,7 @@ export default [
{ {
path: "/home", path: "/home",
component: lazy(() => import("@/views/Home")), component: lazy(() => import("@/views/Home")),
exact: true,
loading: () => <Loading color="blue"></Loading>, loading: () => <Loading color="blue"></Loading>,
meta: { meta: {
auth: false, auth: false,
@ -61,7 +59,7 @@ export default [
}, },
{ {
path: "/login", path: "/login",
component: lazy(() => import("@/views/Login")), component: Login //lazy(() => import("@/views/Login")),
}, },
{ {
path: "*", path: "*",

2
src/views/About/index.tsx
View File

@ -11,7 +11,7 @@ export default function (props: any) {
console.log(props) console.log(props)
return ( return (
<div className="container mx-auto"> <div className="container mx-auto">
<div>About</div> <div>AboutAAAasda </div>
<div>22{props.children}</div> <div>22{props.children}</div>
<Route path="/about/aa" exact={true}> <Route path="/about/aa" exact={true}>
<Test></Test> <Test></Test>

4
src/views/Auth/Page404.tsx
View File

@ -1,10 +1,10 @@
import React from "react" import React from "react"
import { NavLink } from "react-router-dom" import { NavLink } from "react-router-dom"
export default function () { export default function Page404() {
return ( return (
<div> <div>
<NavLink to="/">404</NavLink> <NavLink to="/">阿松大asddadsa</NavLink>
</div> </div>
) )
} }

2
src/views/Home/Header.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from "react" import React, { useState } from "react"
export default () => { export default () => {
const title = "TEST" const title = "TESAaT"
const [leftMenuList, setLeftMenuList] = useState<any[]>([ const [leftMenuList, setLeftMenuList] = useState<any[]>([
{ title: "首页", path: "/" }, { title: "首页", path: "/" },
{ title: "角色", children: [{ title: "月儿", path: "/about" }] }, { title: "角色", children: [{ title: "月儿", path: "/about" }] },

2
src/views/Home/index.tsx
View File

@ -30,7 +30,7 @@ function Home(props: HomeProps) {
<div className="container clearfix mx-auto h-500px"> <div className="container clearfix mx-auto h-500px">
<form onSubmit={e => addOne(e)}> <form onSubmit={e => addOne(e)}>
<input ref={inputRef} type="text" /> <input ref={inputRef} type="text" />
<button type="submit">添加</button> <button type="submit">添加222aaaasaadd</button>
</form> </form>
{todo.map((v: ITodo) => { {todo.map((v: ITodo) => {
return ( return (

133
src/views/Login/index.module.scss
View File

@ -1,3 +1,134 @@
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
$color: #53e3a6;
.login.page { .login.page {
background-color: red; font-family: "Source Sans Pro", sans-serif;
color: white;
font-weight: 300;
::-webkit-input-placeholder {
/* WebKit browsers */
font-family: "Source Sans Pro", sans-serif;
color: white;
font-weight: 300;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-family: "Source Sans Pro", sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-family: "Source Sans Pro", sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
font-family: "Source Sans Pro", sans-serif;
color: white;
font-weight: 300;
}
.wrapper {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 400px;
margin-top: -200px;
overflow: hidden;
&.form-success {
form {
opacity: 0;
pointer-events: none;
}
.container {
h1 {
transform: translateY(85px);
}
}
}
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
h1 {
font-size: 40px;
transition-duration: 1s;
transition-timing-function: ease-in-put;
font-weight: 200;
}
}
form {
padding: 20px 0;
position: relative;
z-index: 2;
transition: opacity 0.5s linear;
input {
display: block;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
transition-duration: 0.25s;
font-weight: 300;
&:hover {
background-color: rgba(255, 255, 255, 0.4);
}
&:focus {
background-color: white;
width: 300px;
color: $color;
}
}
button {
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: $color;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
transition-duration: 0.25s;
&:hover {
background-color: rgb(245, 247, 249);
}
}
}
} }

30
src/views/Login/index.tsx
View File

@ -2,16 +2,36 @@ import React from "react"
import cn from "classnames" import cn from "classnames"
import style from "./index.module.scss" import style from "./index.module.scss"
import { useLocation, Route, Switch } from "react-router-dom" import { useLocation, Route, Switch } from "react-router-dom"
import { useState } from "react"
import Bubbles from "@/components/Loading/Bubbles"
function Test() { export default function Login(props: any) {
return <div>test</div> const [isSuccess, setIsSuccess] = useState(false)
const [WelcomeText, setWelcomeText] = useState("青铜时代2021")
function clickLogin(event: any) {
event.preventDefault()
setIsSuccess(true)
setTimeout(() => {
setIsSuccess(false)
}, 2000)
} }
export default function (props: any) {
return ( return (
<div className={cn(style.login, style.page)}> <div className={cn(style.login, style.page)}>
<div>Login</div> <div className={cn(style.wrapper, isSuccess ? style["form-success"] : "")}>
<div>22</div> <div className={cn(style.container)}>
<h1>{WelcomeText}</h1>
<form className={cn(style.form)}>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" autoComplete="" />
<button type="submit" id={cn(style["login-login"])} onClick={clickLogin}>
Login
</button>
</form>
</div>
<Bubbles></Bubbles>
</div>
</div> </div>
) )
} }

Write Preview
Loading…
Cancel
Save