Commit ca022326 authored by rocosen's avatar rocosen

feat:部分样式

parent eaa08510
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 10</title>
<defs>
<polyline id="path-1" points="2.31172354 9.13262023 5.98559527 12.3841839 14.2635346 3.60504792"></polyline>
</defs>
<g id="最新版本" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="消息与设置备份-2" transform="translate(-738.000000, -2193.000000)">
<g id="编组-65备份" transform="translate(714.000000, 1798.000000)">
<g id="编组-12" transform="translate(0.000000, 380.500000)">
<g id="编组-10" transform="translate(24.000000, 14.500000)">
<g id="编组-7备份-3">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<polyline id="路径-8" stroke="#208F40" stroke-width="1.6" points="2.31172354 9.13262023 5.98559527 12.3841839 14.2635346 3.60504792"></polyline>
</g>
<g id="编组-7备份-4" transform="translate(4.000000, 0.000000)">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="路径-8">
<use stroke="#FFFFFF" stroke-width="3.68" xlink:href="#path-1"></use>
<use stroke="#208F40" stroke-width="1.6" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="25px" height="33px" viewBox="0 0 25 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 6</title>
<defs>
<linearGradient x1="-29.9370433%" y1="20.7762066%" x2="93.5116704%" y2="63.8685987%" id="linearGradient-1">
<stop stop-color="#1660FF" offset="0.0491695804%"></stop>
<stop stop-color="#6C95F7" offset="100%"></stop>
</linearGradient>
</defs>
<g id="最新版本" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="传输备份" transform="translate(-562.000000, -203.000000)">
<g id="编组-31备份-3" transform="translate(538.000000, 89.000000)">
<g id="编组-6" transform="translate(24.000000, 110.750000)">
<g id="编组-8备份-6" transform="translate(0.000000, 4.150000)">
<rect id="矩形" x="0" y="0" width="25" height="31.2"></rect>
<g id="编组-5" transform="translate(0.000000, 0.709091)">
<g id="编组-3" transform="translate(3.289474, 0.000000)">
<path d="M1.30909091,0 L14.5889944,0 L14.5889944,0 L21.7105263,6.50727755 L21.7105263,25.3704545 C21.7105263,26.0934455 21.1244264,26.6795455 20.4014354,26.6795455 L1.30909091,26.6795455 C0.586099964,26.6795455 9.76719274e-16,26.0934455 0,25.3704545 L0,1.30909091 C-8.85408547e-17,0.586099964 0.586099964,-8.92333229e-17 1.30909091,0 Z" id="矩形" fill="#E8EAF0"></path>
<path d="M14.5889944,4.43378667e-13 L14.5889944,5.19818664 C14.5889944,5.92117758 15.1750944,6.50727755 15.8980853,6.50727755 L21.7105263,6.50727755 L21.7105263,6.50727755 L14.5889944,4.43378667e-13 Z" id="路径-4" fill="#A7AEBC"></path>
<polygon id="路径-5" fill="#D3D8DF" points="17.4256221 6.50727755 21.7105263 10.4123947 21.7105263 6.50727755"></polygon>
</g>
<rect id="矩形" fill="url(#linearGradient-1)" x="0" y="11.4340909" width="21.7105263" height="11.4340909" rx="1.30909091"></rect>
<g id="data" transform="translate(3.138158, 14.702970)" fill="#FFFFFF" fill-rule="nonzero">
<path d="M0,0 L0,4.989075 L1.86710526,4.989075 C2.69934211,4.989075 3.32894737,4.765475 3.76315789,4.318275 C4.17565789,3.88505 4.38552632,3.2771375 4.38552632,2.4945375 C4.38552632,1.70495 4.18289474,1.0970375 3.77763158,0.6777875 C3.34342105,0.2236 2.71381579,0 1.88157895,0 L0,0 Z M0.788815789,0.6498375 L1.73684211,0.6498375 C2.38815789,0.6498375 2.86578947,0.796575 3.16973684,1.0970375 C3.45921053,1.3905125 3.61118421,1.8516875 3.61118421,2.4945375 C3.61118421,3.1234125 3.45921053,3.5845875 3.1625,3.88505 C2.85855263,4.1855125 2.37368421,4.3392375 1.72236842,4.3392375 L0.788815789,4.3392375 L0.788815789,0.6498375 Z" id="形状"></path>
<path d="M6.80263158,1.2787125 C6.33947368,1.2787125 5.96315789,1.355575 5.68815789,1.523275 C5.36973684,1.70495 5.16710526,1.998425 5.0875,2.389725 L5.84736842,2.4526125 C5.89078947,2.249975 5.99934211,2.1032375 6.17302632,2.0054125 C6.31776316,1.9215625 6.51315789,1.8796375 6.75197368,1.8796375 C7.31644737,1.8796375 7.59868421,2.1311875 7.59868421,2.6342875 L7.59868421,2.781025 L6.75921053,2.8019875 C6.20921053,2.8159625 5.775,2.920775 5.47105263,3.1304 C5.13815789,3.3470125 4.97171053,3.66145 4.97171053,4.066725 C4.97171053,4.3671875 5.0875,4.61175 5.32631579,4.8004125 C5.54342105,4.989075 5.84736842,5.0869 6.23815789,5.0869 C6.57105263,5.0869 6.86052632,5.0240125 7.10657895,4.9122125 C7.32368421,4.8074 7.50460526,4.6606625 7.64934211,4.4789875 L7.64934211,4.989075 L8.35855263,4.989075 L8.35855263,2.6832 C8.35855263,2.2429875 8.24276316,1.9075875 8.01842105,1.677 C7.75789474,1.411475 7.35263158,1.2787125 6.80263158,1.2787125 Z M7.59868421,3.3190625 L7.59868421,3.5286875 C7.59868421,3.8081875 7.47565789,4.0457625 7.24407895,4.234425 C7.0125,4.4230875 6.7375,4.5209125 6.41184211,4.5209125 C6.21644737,4.5209125 6.05723684,4.472 5.94144737,4.3811625 C5.81842105,4.290325 5.76052632,4.178525 5.76052632,4.038775 C5.76052632,3.591575 6.10789474,3.354 6.80986842,3.340025 L7.59868421,3.3190625 Z" id="形状"></path>
<path d="M10.3703947,0.209625 L9.60328947,0.517075 L9.60328947,1.3765375 L8.90855263,1.3765375 L8.90855263,1.9914375 L9.60328947,1.9914375 L9.60328947,4.0876875 C9.60328947,4.374175 9.66842105,4.5907875 9.81315789,4.7445125 C9.95789474,4.905225 10.1967105,4.989075 10.5151316,4.989075 L11.1302632,4.989075 L11.1302632,4.374175 L10.6381579,4.374175 C10.5440789,4.374175 10.4789474,4.346225 10.4355263,4.3043 C10.3921053,4.2553875 10.3703947,4.1855125 10.3703947,4.0876875 L10.3703947,1.9914375 L11.2243421,1.9914375 L11.2243421,1.3765375 L10.3703947,1.3765375 L10.3703947,0.209625 Z" id="路径"></path>
<path d="M13.5256579,1.2787125 C13.0625,1.2787125 12.6861842,1.355575 12.4111842,1.523275 C12.0927632,1.70495 11.8901316,1.998425 11.8105263,2.389725 L12.5703947,2.4526125 C12.6138158,2.249975 12.7223684,2.1032375 12.8960526,2.0054125 C13.0407895,1.9215625 13.2361842,1.8796375 13.475,1.8796375 C14.0394737,1.8796375 14.3217105,2.1311875 14.3217105,2.6342875 L14.3217105,2.781025 L13.4822368,2.8019875 C12.9322368,2.8159625 12.4980263,2.920775 12.1940789,3.1304 C11.8611842,3.3470125 11.6947368,3.66145 11.6947368,4.066725 C11.6947368,4.3671875 11.8105263,4.61175 12.0493421,4.8004125 C12.2664474,4.989075 12.5703947,5.0869 12.9611842,5.0869 C13.2940789,5.0869 13.5835526,5.0240125 13.8296053,4.9122125 C14.0467105,4.8074 14.2276316,4.6606625 14.3723684,4.4789875 L14.3723684,4.989075 L15.0815789,4.989075 L15.0815789,2.6832 C15.0815789,2.2429875 14.9657895,1.9075875 14.7414474,1.677 C14.4809211,1.411475 14.0756579,1.2787125 13.5256579,1.2787125 Z M14.3217105,3.3190625 L14.3217105,3.5286875 C14.3217105,3.8081875 14.1986842,4.0457625 13.9671053,4.234425 C13.7355263,4.4230875 13.4605263,4.5209125 13.1348684,4.5209125 C12.9394737,4.5209125 12.7802632,4.472 12.6644737,4.3811625 C12.5414474,4.290325 12.4835526,4.178525 12.4835526,4.038775 C12.4835526,3.591575 12.8309211,3.354 13.5328947,3.340025 L14.3217105,3.3190625 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 7备份</title>
<g id="最新版本" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="传输备份" transform="translate(-844.000000, -260.000000)">
<g id="编组-31备份-3" transform="translate(538.000000, 89.000000)">
<g id="编组-7备份" transform="translate(306.000000, 171.000000)">
<rect id="矩形" x="0" y="0" width="20" height="19"></rect>
<polyline id="路径-8" stroke="#208F40" stroke-width="2" points="2.88965442 10.8449865 7.48199409 14.7062184 17.8294182 4.2809944"></polyline>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="192px" height="120px" viewBox="0 0 192 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 4</title>
<defs>
<linearGradient x1="4.14246223%" y1="50.7022018%" x2="100%" y2="50%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#E1E4EB" offset="100%"></stop>
</linearGradient>
<linearGradient x1="81.5371017%" y1="45.668127%" x2="12.3149931%" y2="55.5036963%" id="linearGradient-2">
<stop stop-color="#F3F4F6" offset="0%"></stop>
<stop stop-color="#E1E5EE" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
<stop stop-color="#E8EBF5" offset="0%"></stop>
<stop stop-color="#E3E6ED" offset="100%"></stop>
</linearGradient>
<linearGradient x1="89.2765811%" y1="49.1536614%" x2="1.69393633%" y2="51.1048509%" id="linearGradient-4">
<stop stop-color="#F5F7FA" offset="0%"></stop>
<stop stop-color="#F2F3F5" offset="100%"></stop>
</linearGradient>
<linearGradient x1="98.3245421%" y1="-10.6552489%" x2="-32.0634654%" y2="161.063163%" id="linearGradient-5">
<stop stop-color="#F2F6FA" offset="0%"></stop>
<stop stop-color="#E8EAED" stop-opacity="0.946978802" offset="29.7382561%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="最新版本" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="传输备份" transform="translate(-196.000000, -232.000000)">
<g id="编组-31备份-2" transform="translate(117.000000, 89.000000)">
<g id="编组-4" transform="translate(79.000000, 143.000000)">
<rect id="矩形" x="0" y="0" width="192" height="120"></rect>
<g id="编组-3" transform="translate(32.400000, 12.684411)">
<g id="编组-77" transform="translate(0.000000, 40.315589)">
<polygon id="路径-28" fill="url(#linearGradient-1)" points="109.675487 45.5543123 8.32442588 59 1.21084329e-15 34.3245048 66.5227448 24.6122388"></polygon>
<g id="编组-75" transform="translate(16.135099, 0.000000)">
<path d="M0,17.6315477 L94.8649012,17.6315477 L94.8649012,44.1543123 C94.8649012,44.927511 94.2380999,45.5543123 93.4649012,45.5543123 L1.4,45.5543123 C0.62680135,45.5543123 -1.2375781e-15,44.927511 0,44.1543123 L0,17.6315477 L0,17.6315477 Z" id="矩形" fill="url(#linearGradient-2)"></path>
<polygon id="路径-24" fill="url(#linearGradient-3)" points="0 17.6315477 14.5949617 9.09370612e-13 81.6808065 9.09494702e-13 94.8649012 17.6315477"></polygon>
<polygon id="路径-25" fill="#D8DCE6" points="81.6808065 9.09494702e-13 81.6808065 17.6315477 94.8649012 17.6315477"></polygon>
<polygon id="路径-26" fill="#EAEEF5" points="14.5949617 9.09494702e-13 2.9918383e-16 17.6315477 14.5949617 17.6315477"></polygon>
<path d="M14.8419121,0.525 L81.4178346,0.525 L93.8167856,17.1065477 L1.11611463,17.1065477 L14.8419121,0.525 Z" id="路径-27" stroke="url(#linearGradient-4)" stroke-width="1.05"></path>
</g>
<path d="M32.1784277,24.6122388 L38.456252,31.8964383 L34.5246033,31.8962388 L34.5246852,38.5736212 L29.5966384,38.5736212 L29.5966033,31.8962388 L25.9006033,31.8964383 L32.1784277,24.6122388 Z" id="形状结合" fill="#CDD3E1"></path>
<g id="编组-76" transform="translate(77.518270, 28.800654)" fill="#CDD3E1" stroke="#CDD3E1" stroke-width="2.8">
<ellipse id="椭圆形" cx="22.3211532" cy="2.79227647" rx="1.39014415" ry="1.39227647"></ellipse>
<ellipse id="椭圆形备份-6" cx="12.5556487" cy="2.79227647" rx="1.39014415" ry="1.39227647"></ellipse>
<ellipse id="椭圆形备份-7" cx="2.79014415" cy="2.79227647" rx="1.39014415" ry="1.39227647"></ellipse>
</g>
<path d="M16.1350988,44.1581741 L111,44.1581741 C111,44.92924 110.374928,45.5543123 109.603862,45.5543123 L17.531237,45.5543123 C16.7601711,45.5543123 16.1350988,44.92924 16.1350988,44.1581741 L16.1350988,44.1581741 L16.1350988,44.1581741 Z" id="矩形" fill="#CDD3E1" opacity="0.196730841"></path>
</g>
<path d="M105.879028,4.54835376 C97.185475,19.5398293 89.7972513,28.0555447 83.7143571,30.0954999 C80.5164735,31.315572 75.2241549,29.5590717 78.5618645,25.1351381 C80.29996,22.72975 83.7144135,24.0333683 83.7143836,27.2411981 C83.7143538,30.4490279 84.046593,36.4906044 75.1457029,38.4601746" id="路径-22备份" stroke="url(#linearGradient-5)" stroke-width="1.06" stroke-linecap="round" transform="translate(90.512366, 21.504264) scale(-1, 1) rotate(20.000000) translate(-90.512366, -21.504264) "></path>
<path d="M96.2820131,0.803750554 C95.4628098,2.89041303 95.0532049,4.64162207 95.0531986,6.05737768 C95.0531891,8.1810111 92.4860876,12.5231821 85.1491555,11.759165 C84.9669987,12.071112 86.8711586,9.98481166 87.3388602,8.02111088 C87.8065619,6.05741009 91.0520194,4.9649473 92.6133156,4.59346213 C93.6541797,4.34580535 94.8770789,3.08256816 96.2820131,0.803750554 Z" id="路径-23备份" fill="#EBECED" transform="translate(90.709465, 6.325999) scale(-1, 1) rotate(9.000000) translate(-90.709465, -6.325999) "></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
......@@ -3,60 +3,83 @@
* See https://github.com/webpack-contrib/sass-loader#imports
*/
body {
position: relative;
color: #1E2633;
height: 100vh;
/* background: linear-gradient(
position: relative;
color: #1e2633;
height: 100vh;
/* background: linear-gradient(
200.96deg,
#fedc2a -29.09%,
#dd5789 51.77%,
#7a2c9e 129.35%
); */
font-family: sans-serif;
overflow-y: hidden;
/* display: flex;
font-family: sans-serif;
overflow-y: hidden;
/* display: flex;
justify-content: center;
align-items: center; */
}
button {
background-color: white;
padding: 10px 20px;
border-radius: 10px;
border: none;
appearance: none;
font-size: 1.3rem;
box-shadow: 0px 8px 28px -6px rgba(24, 39, 75, 0.12),
0px 18px 88px -4px rgba(24, 39, 75, 0.14);
transition: all ease-in 0.1s;
cursor: pointer;
opacity: 0.9;
background-color: white;
padding: 10px 20px;
border-radius: 10px;
border: none;
appearance: none;
font-size: 1.3rem;
box-shadow: 0px 8px 28px -6px rgba(24, 39, 75, 0.12),
0px 18px 88px -4px rgba(24, 39, 75, 0.14);
transition: all ease-in 0.1s;
cursor: pointer;
opacity: 0.9;
}
button:hover {
transform: scale(1.05);
opacity: 1;
transform: scale(1.05);
opacity: 1;
}
li {
list-style: none;
list-style: none;
}
a {
text-decoration: none;
height: fit-content;
width: fit-content;
margin: 10px;
text-decoration: none;
height: fit-content;
width: fit-content;
margin: 10px;
}
a:hover {
opacity: 1;
text-decoration: none;
opacity: 1;
text-decoration: none;
}
.Hello {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
div::-webkit-scrollbar,
main::-webkit-scrollbar {
width: 8px;
height: 5px !important;
}
div::-webkit-scrollbar-track,
main::-webkit-scrollbar-track {
background-color: #fff;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
div::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb {
background-color: #d8d8d8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height: 5px !important;
}
import React, { useState } from 'react';
//ui
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import { Grid } from '@mui/material';
import { makeStyles } from 'tss-react/mui';
import allDown from '../../commons/assets/img/allDown.svg';
import fileIcon from '../../commons/assets/img/fileData.svg';
import suc from '../../commons/assets/img/suc.svg';
const useStyles = makeStyles()((theme) => {
return {
bottomBox: {
width: '350px',
height: '44px',
borderTop: '1px solid #EDEFF2',
display: 'flex',
alignItems: 'center',
paddingLeft: '25px',
bottom: '0',
position: 'fixed',
},
};
});
export default (props) => {
const { classes } = useStyles();
return (
<Grid className={classes.bottomBox}>
<img src={allDown} alt="" />
<Grid
sx={{ fontSize: '12px', color: '#1E2633', marginLeft: '8px' }}
>
所有文件已同步到最新版
</Grid>
</Grid>
);
};
......@@ -31,11 +31,7 @@ const useStyles = makeStyles()((theme) => {
export default (props) => {
const { classes } = useStyles();
const [value, setValue] = useState('one');
const handleChange = (event, newValue) => {
setValue(newValue);
};
const { handleChange, value } = props;
return (
<Grid sx={{ width: '100%', marginTop: '5px' }}>
......
import React, { useState } from 'react';
//ui
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import { Grid } from '@mui/material';
import { makeStyles } from 'tss-react/mui';
import no_trans from '../../commons/assets/img/trans.svg';
import fileIcon from '../../commons/assets/img/fileData.svg';
import suc from '../../commons/assets/img/suc.svg';
const useStyles = makeStyles()((theme) => {
return {
no_data: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: '30px',
},
fileBox: {
height: '40px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: '300px',
marginTop: '12px',
},
};
});
const list = [
{ name: '传输文件更新版.ppt' },
{ name: '1111.ppt' },
{ name: '22222.ppt' },
{ name: '333333.ppt' },
{ name: '444444.ppt' },
{ name: '传输文件更新版.ppt' },
{ name: 'fggggggg.ppt' },
{ name: '传输文件更新版.ppt' },
{ name: 'dddddd.ppt' },
{ name: 'zzzzzzzz.ppt' },
{ name: '传输文件更新版.ppt' },
{ name: '传输文件更新版.ppt' },
{ name: 'ddddd.ppt' },
{ name: '传输文件更新版.ppt' },
{ name: 'fffffff.ppt' },
];
export default (props) => {
const { classes } = useStyles();
return (
<Grid sx={{ width: '100%' }}>
{list.length === 0 && (
<Grid className={classes.no_data}>
<img src={no_trans} alt="" />
<Grid sx={{ fontSize: '14px', color: '#B7B9BD' }}>
暂无传输任务
</Grid>
</Grid>
)}
{list.length > 0 && (
<Grid
sx={{
overflow: 'hidden',
overflowY: 'scroll',
height: '275px',
padding: '0px 18px',
}}
>
{list.map((e, key) => {
return (
<Grid className={classes.fileBox} key={key}>
<Grid
sx={{
display: 'flex',
alignItems: 'center',
}}
>
<img
src={fileIcon}
alt=""
style={{ marginTop: '4px' }}
/>
<Grid sx={{ marginLeft: '16px' }}>
<Grid
sx={{
fontSize: '12px',
color: '#1E2633',
fontWeight: '600',
}}
>
{e.name}
</Grid>
<Grid
sx={{
fontSize: '12px',
color: '#B7B9BD',
}}
>
下载进度:25%
</Grid>
</Grid>
</Grid>
<img src={suc} alt="" />
</Grid>
);
})}
</Grid>
)}
</Grid>
);
};
import React from 'react';
import React, { useState } from 'react';
import public from 'commons/public';
import Head from '../components/head';
import Trans from '../components/trans';
import Tab from '../components/tab';
import BottomTip from '../components/buttomTip.jsx';
import { Button, Grid } from '@mui/material';
import { makeStyles } from 'tss-react/mui';
......@@ -18,12 +20,20 @@ const useStyles = makeStyles()((theme) => {
export default (props) => {
const { classes } = useStyles();
const { render, navigate } = public();
const [value, setValue] = useState('one');
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Grid className={classes.initBody}>
<Head level={false} />
<Tab />
{/* <Grid>11111111111111111</Grid> */}
<Head />
<Tab level={false} value={value} handleChange={handleChange} />
{value === 'one' && <Trans />}
<BottomTip />
</Grid>
);
};
import React, { useEffect, useState } from 'react';
import Head from '../components/head';
import { shell } from 'electron';
//js
import { getUserInfo } from '../../commons/utils/publicMethod';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment