FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Change css to scss

Browse Source
This commit is contained in:
Fat Snake
2023-09-05 21:35:27 +08:00
parent 9bab2d5c0b
commit 75e872127c
13 changed files with 260 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
package-lock.json generated
View File

@@ -41,6 +41,7 @@
"eslint-plugin-react-refresh": "^0.4.3",
"jsdom": "^22.1.0",
"prettier": "^3.0.3",
"sass": "^1.66.1",
"stylelint-config-prettier": "^9.0.5",
"typescript": "^5.2.2",
"unplugin-auto-import": "^0.16.6",
@@ -4049,6 +4050,12 @@
"resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
},
"node_modules/immutable": {
"version": "4.3.4",
"resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.4.tgz",
"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
"dev": true
},
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -6475,6 +6482,23 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
"node_modules/sass": {
"version": "1.66.1",
"resolved": "https://registry.npmmirror.com/sass/-/sass-1.66.1.tgz",
"integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
"dev": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/saxes": {
"version": "6.0.0",
"resolved": "https://registry.npmmirror.com/saxes/-/saxes-6.0.0.tgz",

1
package.json
View File

@@ -46,6 +46,7 @@
"eslint-plugin-react-refresh": "^0.4.3",
"jsdom": "^22.1.0",
"prettier": "^3.0.3",
"sass": "^1.66.1",
"stylelint-config-prettier": "^9.0.5",
"typescript": "^5.2.2",
"unplugin-auto-import": "^0.16.6",

63
src/assets/css/base.css
View File

@@ -1,63 +0,0 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
em,
i {
font-style: normal
}
li {
list-style: none
}
img {
border: 0;
vertical-align: middle
}
button {
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
border: 0;
outline: none;
}
body {
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}

63
src/assets/css/base.scss Normal file
View File

@@ -0,0 +1,63 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
em,
i {
font-style: normal
}
li {
list-style: none
}
img {
border: 0;
vertical-align: middle
}
button {
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
border: 0;
outline: none;
}
body {
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}

106
src/assets/css/common.css
View File

@@ -1,106 +0,0 @@
:root {
--main-color: #00D4FF;
--background-color: #F5F5F5;
--font-main-color: #4D4D4D;
--font-secondary-color: #9E9E9E;
}
.body {
color: var(--font-main-color);
user-select: none;
min-width: 1800px;
min-height: 400px;
}
.fill {
height: 100%;
width: 100%;
}
.fill-with {
width: 100%;
}
.fill-height {
height: 100%;
}
.background-white {
background-color: white;
}
.center-box {
display: flex;
justify-content: center;
align-items: center;
}
.vertical-center-box {
display: flex;
align-items: center;
}
.horizontal-center-box {
display: flex;
justify-content: center;
}
.icon-size-xs {
width: 16px;
height: 16px;
}
.icon-size-xs > use {
width: 16px;
height: 16px;
}
.icon-size-sm {
width: 20px;
height: 20px;
}
.icon-size-sm > use {
width: 20px;
height: 20px;
}
.icon-size-md {
width: 24px;
height: 24px;
}
.icon-size-md > use {
width: 24px;
height: 24px;
}
.icon-size-lg {
width: 32px;
height: 32px;
}
.icon-size-lg > use {
width: 32px;
height: 32px;
}
.icon-size-xl {
width: 64px;
height: 64px;
}
.icon-size-xl > use {
width: 64px;
height: 64px;
}
.icon-size-menu {
width: 23px;
height: 23px;
}
.icon-size-menu > use {
width: 23px;
height: 23px;
}

105
src/assets/css/common.scss Normal file
View File

@@ -0,0 +1,105 @@
$main-color: #00D4FF;
$background-color: #F5F5F5;
$font-main-color: #4D4D4D;
$font-secondary-color: #9E9E9E;
.body {
color: $font-main-color;
user-select: none;
min-width: 1800px;
min-height: 400px;
}
.fill {
height: 100%;
width: 100%;
}
.fill-with {
width: 100%;
}
.fill-height {
height: 100%;
}
.background-white {
background-color: white;
}
.center-box {
display: flex;
justify-content: center;
align-items: center;
}
.vertical-center-box {
display: flex;
align-items: center;
}
.horizontal-center-box {
display: flex;
justify-content: center;
}
.icon-size-xs {
width: 16px;
height: 16px;
> use {
width: 16px;
height: 16px;
}
}
.icon-size-sm {
width: 20px;
height: 20px;
> use {
width: 20px;
height: 20px;
}
}
.icon-size-md {
width: 24px;
height: 24px;
> use {
width: 24px;
height: 24px;
}
}
.icon-size-lg {
width: 32px;
height: 32px;
> use {
width: 32px;
height: 32px;
}
}
.icon-size-xl {
width: 64px;
height: 64px;
> use {
width: 64px;
height: 64px;
}
}
.icon-size-menu {
width: 23px;
height: 23px;
> use {
width: 23px;
height: 23px;
}
}

63
src/assets/css/login.css
View File

@@ -1,63 +0,0 @@
.login-background {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
background-color: #B3E5FC;
}
.login-box {
display: flex;
width: 800px;
height: 450px;
background-color: #448AFF;
}
.login-box-left {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
flex: 2;
}
.login-box-left-text {
font-size: 3rem;
color: white;
font-weight: bold;
}
.login-box-left-text>div:last-child {
font-size: 1.8rem;
font-weight: normal;
}
.login-box-right {
position: relative;
height: 100%;
flex: 3;
background-color: white;
}
.login-from-text {
position: absolute;
top: 60px;
left: 40px;
font-weight: bold;
font-size: 2rem;
}
.login-from {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30px;
width: 100%;
height: 100%;
}
.login-from-item {
width: 80%;
}

63
src/assets/css/login.scss Normal file
View File

@@ -0,0 +1,63 @@
.login-background {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
background-color: #B3E5FC;
}
.login-box {
display: flex;
width: 800px;
height: 450px;
background-color: #448AFF;
}
.login-box-left {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
flex: 2;
}
.login-box-left-text {
font-size: 3rem;
color: white;
font-weight: bold;
> div:last-child {
font-size: 1.8rem;
font-weight: normal;
}
}
.login-box-right {
position: relative;
height: 100%;
flex: 3;
background-color: white;
}
.login-from-text {
position: absolute;
top: 60px;
left: 40px;
font-weight: bold;
font-size: 2rem;
}
.login-from {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30px;
width: 100%;
height: 100%;
}
.login-from-item {
width: 80%;
}

35
src/assets/css/manager.css
View File

@@ -1,35 +0,0 @@
.top-bar {
display: flex;
justify-content: right;
background-color: #317ece;
padding: 10px 20px;
}
.top-bar > button:hover {
color: #F5F5F5;
border-color: #F5F5F5;
}
.search-row {
display: flex;
gap: 20px;
margin: 10px 10px;
}
.search-row > * {
display: flex;
gap: 5px;
align-items: center;
flex: 1;
font-size: 1rem;
}
.search-row > *:not(.operation-buttons) > *:last-child {
flex: 1;
}
.operation-buttons {
display: flex;
justify-content: right;
gap: 10px;
}

69
src/index.css
View File

@@ -1,69 +0,0 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

4
src/main.tsx
View File

@@ -1,8 +1,8 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import '@/assets/css/base.css'
import '@/assets/css/common.css'
import '@/assets/css/base.scss'
import '@/assets/css/common.scss'
import zh_CN from 'antd/locale/zh_CN'
ReactDOM.createRoot(document.getElementById('root')!).render(

2
src/pages/Login.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react'
import { login } from '@/utils/auth.ts'
import { LOGIN_SUCCESS, LOGIN_USERNAME_PASSWORD_ERROR } from '@/constants/Common.constants.ts'
import { setToken } from '@/utils/common.ts'
import '@/assets/css/login.css'
import '@/assets/css/login.scss'
const Login: React.FC = () => {
const [messageApi, contextHolder] = message.useMessage()

9
src/router/index.tsx
View File

@@ -12,15 +12,8 @@ const routes: RouteObject[] = [
},
{
path: '',
id: 'manager',
id: 'home',
Component: React.lazy(() => import('@/pages/Home')),
children: [
{
id: 'manager-sub',
path: 'sub',
Component: React.lazy(() => import('@/pages/Home'))
}
],
handle: {
auth: false
}