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

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

@@ -1,11 +1,10 @@
import React from 'react';
import React from 'react'
const FooterComponent: React.FC = () => {
return (
<div style={{ textAlign: 'center', color: 'black' }}>
schisandra ©{new Date().getFullYear()} Created by schisandra
</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>
<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>
</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;
justify-content: center;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
width: 100vw;
overflow: auto;
overflow: hidden;
}
.content_content{
border-radius: 20px;
}
.login_content {
// margin-top: 40px;
// position: relative;
width: 782px;
position: relative;
width: 790px;
background-color: rgb(255, 255, 255);
// height: 100%;
overflow: hidden;
box-shadow: rgb(0 0 0 / 15%) 0px 2px 15px;
//float: right;
//height: 538px;
height: 550px;
position: relative;
padding: 30px 0 30px 0;
@@ -101,7 +107,7 @@
.mp_code {
padding: 0px 60px;
width: 361px;
//width: 361px;
height: 490px;
background-color: rgb(255, 255, 255);
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 logo from '@/assets/icons/schisandra.svg'
import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
import './index.less'
import styles from './index.module.less'
import { observer } from 'mobx-react'
import FooterComponent from "@/components/Footer";
import FooterComponent from '@/components/Footer'
// import useStore from '@/utils/store/useStore.tsx'
type LoginType = 'account' | 'phone'
@@ -72,18 +72,18 @@ export default observer(() => {
console.log(formData)
}
return (
<div className={'container'}>
<div className={'content'}>
<Space>
<Space className={'login_content'}>
<Space align='center' className={'mp_code'}>
<div className={styles.container}>
<div className={styles.content}>
<Space className={styles.content_content}>
<Space className={styles.login_content}>
<Space align='center' className={styles.mp_code}>
<Space direction='vertical' align='center'>
<span className={'mp_code_title'}>微信扫码登录</span>
<span className={styles.mp_code_title}>微信扫码登录</span>
<Image
preview={false}
height={210}
width={200}
className={'mp_code_img'}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={qrCode}
/>
@@ -93,7 +93,7 @@ export default observer(() => {
<div>
<span>
微信扫码
<span className={'mp_tips'}>关注公众号</span>
<span className={styles.mp_tips}>关注公众号</span>
</span>
<br />
登录更快更安全
@@ -101,19 +101,19 @@ export default observer(() => {
}
// type="success"
showIcon={true}
className={'alert'}
className={styles.alert}
icon={<WechatOutlined />}
/>
</Space>
</Space>
<Form
form={form}
className={'login_form'}
className={styles.login_form}
initialValues={{
autoLogin: true,
}}>
<Space direction='vertical' align='center'>
<Space className={'logo'}>
<Space className={styles.logo}>
<img
alt='logo'
src={logo}
@@ -121,7 +121,7 @@ export default observer(() => {
/>
<span>五味子云相册</span>
</Space>
<div className={'subTitle'}>随时随地分享你的美好瞬间</div>
<div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
</Space>
<Tabs
@@ -369,7 +369,7 @@ export default observer(() => {
</Space>
</div>
</Form>
<a href='/register' className={'go_to_register'}>
<a href='/register' className={styles.go_to_register}>
<span>注册</span>
</a>
</Space>

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

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

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

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