Schisandra-Cloud-Storage/schisandra-cloud-storage-front-react
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 解决css污染bug

Browse Source
This commit is contained in:
landaiqing
2024-04-17 17:16:32 +08:00
parent 2656b6a6f7
commit 5889fe1b2f
12 changed files with 74 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/fonts/YA9dr0Wd4kDdMthQOCfzsw.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/YA9dr0Wd4kDdMthROCc.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/YA9dr0Wd4kDdMthfOCfzsw.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/images/photo-1531685250784-7569952593d2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
src/assets/images/photo-1629968417850-3505f5180761.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

11
src/components/Footer/index.tsx
View File

@@ -1,11 +1,10 @@
import React from 'react'; import React from 'react'
const FooterComponent: React.FC = () => { const FooterComponent: React.FC = () => {
return ( return (
<div style={{textAlign: 'center',color: 'black'}}> <div style={{ textAlign: 'center', color: 'black' }}>
schisandra ©{new Date().getFullYear()} Created by schisandra schisandra ©{new Date().getFullYear()} Created by schisandra
</div> </div>
); )
}; }
export default FooterComponent; export default FooterComponent

8
src/views/404/404.tsx
View File

@@ -146,7 +146,13 @@ export default () => {
<div className='number'>4</div> <div className='number'>4</div>
</div> </div>
<div className='subtitle'>Oops. Looks like you took a wrong turn.</div> <div className='subtitle'>Oops. Looks like you took a wrong turn.</div>
<button onClick={goBack}>Go back</button> <button
style={{
marginTop: '1.5em',
}}
onClick={goBack}>
Go back
</button>
</div> </div>
</div> </div>
</body> </body>

3
src/views/Home/index.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default () => {
return <div></div>
}

18
src/views/User/Register/index.less → src/views/User/Login/index.module.less
View File

@@ -4,21 +4,27 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh; height: 100vh;
width: 100vw; overflow: hidden;
overflow: auto; }
.content_content{
border-radius: 20px;
} }
.login_content { .login_content {
// margin-top: 40px; // margin-top: 40px;
// position: relative; position: relative;
width: 782px; width: 790px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
// height: 100%; // height: 100%;
overflow: hidden; overflow: hidden;
box-shadow: rgb(0 0 0 / 15%) 0px 2px 15px; box-shadow: rgb(0 0 0 / 15%) 0px 2px 15px;
//float: right; //float: right;
//height: 538px; height: 550px;
position: relative; position: relative;
padding: 30px 0 30px 0; padding: 30px 0 30px 0;
@@ -101,7 +107,7 @@
.mp_code { .mp_code {
padding: 0px 60px; padding: 0px 60px;
width: 361px; //width: 361px;
height: 490px; height: 490px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
border-right: 0.5px solid rgb(196, 203, 215); border-right: 0.5px solid rgb(196, 203, 215);

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

@@ -14,9 +14,9 @@ import { CSSProperties } from 'react'
import { useState } from 'react' import { useState } from 'react'
import logo from '@/assets/icons/schisandra.svg' import logo from '@/assets/icons/schisandra.svg'
import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg' import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
import './index.less' import styles from './index.module.less'
import { observer } from 'mobx-react' import { observer } from 'mobx-react'
import FooterComponent from "@/components/Footer"; import FooterComponent from '@/components/Footer'
// import useStore from '@/utils/store/useStore.tsx' // import useStore from '@/utils/store/useStore.tsx'
type LoginType = 'account' | 'phone' type LoginType = 'account' | 'phone'
@@ -72,18 +72,18 @@ export default observer(() => {
console.log(formData) console.log(formData)
} }
return ( return (
<div className={'container'}> <div className={styles.container}>
<div className={'content'}> <div className={styles.content}>
<Space> <Space className={styles.content_content}>
<Space className={'login_content'}> <Space className={styles.login_content}>
<Space align='center' className={'mp_code'}> <Space align='center' className={styles.mp_code}>
<Space direction='vertical' align='center'> <Space direction='vertical' align='center'>
<span className={'mp_code_title'}>微信扫码登录</span> <span className={styles.mp_code_title}>微信扫码登录</span>
<Image <Image
preview={false} preview={false}
height={210} height={210}
width={200} width={200}
className={'mp_code_img'} className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl} // src={generateMpRegCodeData.data?.qrCodeUrl}
src={qrCode} src={qrCode}
/> />
@@ -93,7 +93,7 @@ export default observer(() => {
<div> <div>
<span> <span>
微信扫码 微信扫码
<span className={'mp_tips'}>关注公众号</span> <span className={styles.mp_tips}>关注公众号</span>
</span> </span>
<br /> <br />
登录更快更安全 登录更快更安全
@@ -101,19 +101,19 @@ export default observer(() => {
} }
// type="success" // type="success"
showIcon={true} showIcon={true}
className={'alert'} className={styles.alert}
icon={<WechatOutlined />} icon={<WechatOutlined />}
/> />
</Space> </Space>
</Space> </Space>
<Form <Form
form={form} form={form}
className={'login_form'} className={styles.login_form}
initialValues={{ initialValues={{
autoLogin: true, autoLogin: true,
}}> }}>
<Space direction='vertical' align='center'> <Space direction='vertical' align='center'>
<Space className={'logo'}> <Space className={styles.logo}>
<img <img
alt='logo' alt='logo'
src={logo} src={logo}
@@ -121,7 +121,7 @@ export default observer(() => {
/> />
<span>五味子云相册</span> <span>五味子云相册</span>
</Space> </Space>
<div className={'subTitle'}>随时随地分享你的美好瞬间</div> <div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
</Space> </Space>
<Tabs <Tabs
@@ -369,7 +369,7 @@ export default observer(() => {
</Space> </Space>
</div> </div>
</Form> </Form>
<a href='/register' className={'go_to_register'}> <a href='/register' className={styles.go_to_register}>
<span>注册</span> <span>注册</span>
</a> </a>
</Space> </Space>

13
src/views/User/Login/index.less → src/views/User/Register/index.module.less
View File

@@ -4,21 +4,24 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh; height: 100vh;
width: 100vw; overflow: hidden;
overflow: auto;
} }
.login_content { .login_content {
// margin-top: 40px; // margin-top: 40px;
// position: relative; // position: relative;
width: 782px; width: 790px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
// height: 100%; // height: 100%;
overflow: hidden; overflow: hidden;
box-shadow: rgb(0 0 0 / 15%) 0px 2px 15px; box-shadow: rgb(0 0 0 / 15%) 0px 2px 15px;
//float: right; //float: right;
//height: 538px; height: 550px;
position: relative; position: relative;
padding: 30px 0 30px 0; padding: 30px 0 30px 0;
@@ -101,7 +104,7 @@
.mp_code { .mp_code {
padding: 0px 60px; padding: 0px 60px;
width: 361px; //width: 361px;
height: 490px; height: 490px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
border-right: 0.5px solid rgb(196, 203, 215); border-right: 0.5px solid rgb(196, 203, 215);

32
src/views/User/Register/index.tsx
View File

@@ -5,14 +5,14 @@ import { useState } from 'react'
import logo from '@/assets/icons/schisandra.svg' import logo from '@/assets/icons/schisandra.svg'
// import background from '@/assets/images/background.png' // import background from '@/assets/images/background.png'
import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg' import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
import './index.less' import styles from './index.module.less'
import { observer } from 'mobx-react' import { observer } from 'mobx-react'
import FooterComponent from "@/components/Footer"; import FooterComponent from '@/components/Footer'
// import useStore from '@/utils/store/useStore.tsx' // import useStore from '@/utils/store/useStore.tsx'
type LoginType = 'phone' type LoginType = 'phone'
export default observer(() => { export default observer(() => {
// @ts-ignore // @ts-expect-error
const [generateMpRegCodeData, setGenerateMpRegCodeData] = useState<API.GenerateMpRegCode>({}) const [generateMpRegCodeData, setGenerateMpRegCodeData] = useState<API.GenerateMpRegCode>({})
const [form] = Form.useForm() const [form] = Form.useForm()
// @ts-ignore // @ts-ignore
@@ -47,18 +47,18 @@ export default observer(() => {
console.log(formData) console.log(formData)
} }
return ( return (
<div className={'container'}> <div className={styles.container}>
<div className={'content'}> <div className={styles.content}>
<Space> <Space>
<Space className={'login_content'}> <Space className={styles.login_content}>
<Space align='center' className={'mp_code'}> <Space align='center' className={styles.mp_code}>
<Space direction='vertical' align='center'> <Space direction='vertical' align='center'>
<span className={'mp_code_title'}>微信扫码登录</span> <span className={styles.mp_code_title}>微信扫码登录</span>
<Image <Image
preview={false} preview={false}
height={210} height={210}
width={200} width={200}
className={'mp_code_img'} className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl} // src={generateMpRegCodeData.data?.qrCodeUrl}
src={qrCode} src={qrCode}
/> />
@@ -68,7 +68,7 @@ export default observer(() => {
<div> <div>
<span> <span>
微信扫码 微信扫码
<span className={'mp_tips'}>关注公众号</span> <span className={styles.mp_tips}>关注公众号</span>
</span> </span>
<br /> <br />
登录更快更安全 登录更快更安全
@@ -76,19 +76,19 @@ export default observer(() => {
} }
// type="success" // type="success"
showIcon={true} showIcon={true}
className={'alert'} className={styles.alert}
icon={<WechatOutlined />} icon={<WechatOutlined />}
/> />
</Space> </Space>
</Space> </Space>
<Form <Form
form={form} form={form}
className={'login_form'} className={styles.login_form}
initialValues={{ initialValues={{
autoLogin: true, autoLogin: true,
}}> }}>
<Space direction='vertical' align='center'> <Space direction='vertical' align='center'>
<Space className={'logo'}> <Space className={styles.logo}>
<img <img
alt='logo' alt='logo'
src={logo} src={logo}
@@ -96,7 +96,7 @@ export default observer(() => {
/> />
<span>五味子云相册</span> <span>五味子云相册</span>
</Space> </Space>
<div className={'subTitle'}>随时随地分享你的美好瞬间</div> <div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
</Space> </Space>
<Tabs <Tabs
@@ -248,13 +248,13 @@ export default observer(() => {
注册 注册
</Button> </Button>
</Form> </Form>
<a href='/' className={'go_to_register'}> <a href='/' className={styles.go_to_register}>
<span>登录</span> <span>登录</span>
</a> </a>
</Space> </Space>
</Space> </Space>
</div> </div>
<FooterComponent/> <FooterComponent />
</div> </div>
) )
}) })