chore : use css module conduct style isolation
This commit is contained in:
任帅
parent
9432cd793f
commit
1f8b17810a
|
|
@ -1,50 +0,0 @@
|
|||
.up-modal-bg{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.up-modal {
|
||||
position: absolute;
|
||||
top: 20vh;
|
||||
left: 30vw;
|
||||
z-index: 10000;
|
||||
.up-modal-panel {
|
||||
border: 1px solid #000000;
|
||||
border-radius: 5px;
|
||||
.up-modal-header {
|
||||
$titleheight: 38px;
|
||||
width: 530px;
|
||||
height: $titleheight;
|
||||
line-height: $titleheight;
|
||||
background-color: rgb(99, 153, 255);
|
||||
display: flex;
|
||||
.up-modal-header-text {
|
||||
text-align: center;
|
||||
width: 480px;
|
||||
}
|
||||
}
|
||||
.up-modal-body{
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.up-modal-footer {
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
button{
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
padding: 0 15px;
|
||||
width: 20px;
|
||||
fill: currentColor;
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +1,43 @@
|
|||
import { createPortal } from 'react-dom';
|
||||
import { ModalChildType, ModalPropsType } from './type';
|
||||
import './index.scss';
|
||||
import modalScss from './modal.module.scss'
|
||||
const ModalTemplate = (child: ModalChildType) => {
|
||||
return (
|
||||
<>
|
||||
<div className="up-modal-bg" onClick={child.onCanCel} />
|
||||
<div className="up-modal">
|
||||
<div className="up-modal-panel">
|
||||
<div className={modalScss.modal}>
|
||||
<div className='modal-bg' onClick={child.onCanCel} />
|
||||
<div className='modal-outboard'>
|
||||
<div className='modal-panel'>
|
||||
{child.isHeaderShow ? (
|
||||
<div className="up-modal-header">
|
||||
<div className="up-modal-header-text">{child.titleText}</div>
|
||||
<div className='modal-header'>
|
||||
<div className='modal-header-text'>{child.titleText}</div>
|
||||
<svg
|
||||
onClick={child.onCanCel}
|
||||
className="icon"
|
||||
viewBox="0 0 1026 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className='icon'
|
||||
viewBox='0 0 1026 1024'
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
>
|
||||
<path
|
||||
d="M585.781589 510.748226l423.38657-423.38657A51.071963
|
||||
d='M585.781589 510.748226l423.38657-423.38657A51.071963
|
||||
51.071963 0 0 0 937.156692 14.839469L513.770122 438.736759
|
||||
90.383552 14.839469A51.071963 51.071963 0 0 0 17.861365 87.361656L441.758655
|
||||
510.748226l-423.89729 423.38657A51.071963 51.071963 0 1 0 89.872832 1006.146263l423.89729-423.38657
|
||||
423.38657 423.38657a51.071963 51.071963 0 0 0 72.011467-72.011467z"
|
||||
423.38657 423.38657a51.071963 51.071963 0 0 0 72.011467-72.011467z'
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="up-modal-body">{child.body}</div>
|
||||
<div className='modal-body'>{child.body}</div>
|
||||
{child.isFooterShow ? (
|
||||
<div className="up-modal-footer">
|
||||
<div className='modal-footer'>
|
||||
{(child.isSubmitShow ?? true) ?<button onClick={child.onSubmit}>{child.submitText ?? '确认'}</button> : null}
|
||||
{(child.isCanCelShow ?? true) ? <button onClick={child.onCanCel}>{child.canCelText ?? '取消'}</button> : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
.modal{
|
||||
:global{
|
||||
.modal-bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal-outboard {
|
||||
position: absolute;
|
||||
top: 20vh;
|
||||
left: 30vw;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.modal-panel {
|
||||
border: 1px solid #000000;
|
||||
border-radius: 5px;
|
||||
|
||||
.modal-header {
|
||||
$titleheight: 38px;
|
||||
width: 530px;
|
||||
height: $titleheight;
|
||||
line-height: $titleheight;
|
||||
background-color: rgb(99, 153, 255);
|
||||
display: flex;
|
||||
|
||||
.modal-header-text {
|
||||
text-align: center;
|
||||
width: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
|
||||
button {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 0 15px;
|
||||
width: 20px;
|
||||
fill: currentColor;
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.up-progress{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.up-progress-pr{
|
||||
border: 1px solid #000000;
|
||||
border-radius: 3px;
|
||||
height: 6px;
|
||||
}
|
||||
.up-progress-rate{
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.up-progress-num{
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
import { RsProgressType } from './type'
|
||||
import './index.scss'
|
||||
import progressScss from './progress.module.scss'
|
||||
|
||||
const Progress = (props: RsProgressType) => {
|
||||
|
||||
return (
|
||||
<div className="up-progress">
|
||||
<div className="up-progress-pr" style={{ width: props.rateWidth ?? 250 }}>
|
||||
<div className={progressScss.progress}>
|
||||
<div className='progress-pr' style={{ width: props.rateWidth ?? 250 }}>
|
||||
<div
|
||||
className="up-progress-rate"
|
||||
className='progress-rate'
|
||||
style={{
|
||||
width: (props.percent ?? 0) * ((props.rateWidth ?? 250) / 100),
|
||||
backgroundColor: props.rateColor ?? 'blue',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className='up-progress-num'>{props.percent > 100 ? 100 :(props.percent.toString().substring(0,4) ?? 0) }%</span>
|
||||
<span className='progress-num'>{props.percent > 100 ? 100 :(props.percent.toString().substring(0,4) ?? 0) }%</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:global {
|
||||
.progress-pr {
|
||||
border: 1px solid #000000;
|
||||
border-radius: 3px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.progress-rate {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.progress-num {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
.up-modal-body{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
.progress-title{
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.update-progress{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import Modal from '@/components/update/Modal'
|
|||
import Progress from '@/components/update/Progress'
|
||||
import { ipcRenderer } from 'electron'
|
||||
import { useEffect, useState } from 'react'
|
||||
import './index.scss'
|
||||
import updateScss from './update.module.scss'
|
||||
import { checkUpdateType, isUpdateAvailable, ModalBtnText, VersionInfo } from './type'
|
||||
|
||||
|
||||
|
|
@ -89,11 +89,11 @@ const Update = () => {
|
|||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Modal isOpenModal={isOpenModal} onCanCel={onModalCanCel} onSubmit={onModalSubmit}
|
||||
canCelText={modalBtnText.canCelText} submitText={modalBtnText.submitText}
|
||||
isFooterShow={checkType && isNeedUpdate}>
|
||||
<div className='up-modal-body'>
|
||||
<div className={updateScss.modalslot}>
|
||||
{updateError ?
|
||||
<div className='update-error'>Error downloading the latest version, please contact the developer</div> :
|
||||
checkType ? (
|
||||
|
|
@ -116,7 +116,7 @@ const Update = () => {
|
|||
<button disabled={checkLoading} onClick={checkUpdate}>
|
||||
{checkBtnText}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
.modalslot{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
|
||||
:global {
|
||||
.progress-title {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.update-progress {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.a{
|
||||
color: red;
|
||||
}
|
||||
Loading…
Reference in New Issue