marking
/
WGShare.Client.Electron
18
0
Fork 0
Code Pull Requests 1 Actions Releases 4 Activity

样式优化

This commit is contained in:
yj 2024-07-19 10:19:37 +08:00
parent c770acc067
commit 2f23f0a337
11 changed files with 102 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Operation/index.module.scss
View File

@ -4,8 +4,8 @@
flex-shrink: 0;
>div {
width: 50px;
height: 50px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;

2
src/components/SpeakerModeModal/index.module.scss
View File

@ -21,7 +21,7 @@
>span {
color: white;
font-size: 20px;
font-size: 16px;
margin-top: 10px;
}
}

2
src/components/SpeakerModeModal/index.tsx
View File

@ -31,7 +31,7 @@ const SpeakerModeModal = forwardRef((props: any, ref: any) => {
footer={null}
onCancel={() => setIsSpeakerModeModal(false)}
centered
width={'30vw'}
width={'560px'}
>
<div className={styles.speakerModeModal}>
<FreedomMode onClick={() => setMode('FreedomMode')} />

12
src/page/Home/Index/index.module.scss
View File

@ -10,7 +10,7 @@
}
.indexBtns {
padding: 10px 0 30px;
padding: 10px 0 20px;
margin: 0 30px;
box-sizing: border-box;
border-bottom: 1px solid #2C2C2C;
@ -36,13 +36,13 @@
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 30px;
padding: 20px 30px;
box-sizing: border-box;
.indexContentTitle {
flex-shrink: 0;
color: white;
font-size: 24px;
font-size: 18px;
font-weight: bold;
}
@ -71,7 +71,7 @@
align-items: center;
>div:nth-child(1) {
font-size: 18px;
font-size: 16px;
color: white;
flex-grow: 1;
text-overflow: ellipsis;
@ -88,12 +88,13 @@
>span {
color: #767676;
margin-left: 4px;
font-size: 14px;
}
}
}
>div:nth-child(2) {
margin-top: 22px;
margin-top: 16px;
display: flex;
align-items: center;
justify-content: space-between;
@ -106,6 +107,7 @@
>span {
color: #767676;
margin-right: 4px;
font-size: 14px;
}
}

4
src/page/Home/Index/index.tsx
View File

@ -156,7 +156,7 @@ const Index: React.FC = () => {
</div>
</div>
</div>
<Modal title="新建会议室" open={createRoomModal} footer={null} closable={false} centered width={'30vw'}>
<Modal title="新建会议室" open={createRoomModal} footer={null} closable={false} centered width={'400px'}>
<div>
<div>
<Input
@ -227,7 +227,7 @@ const Index: React.FC = () => {
</div>
</div>
</Modal>
<Modal title="加入会议室" open={joinRoomModal} footer={null} closable={false} centered width={'30vw'}>
<Modal title="加入会议室" open={joinRoomModal} footer={null} closable={false} centered width={'400px'}>
<div>
<div>
<Input

20
src/page/Home/User/index.module.scss
View File

@ -10,7 +10,7 @@
}
.userBtns {
padding: 10px 0 30px;
padding: 10px 0 20px;
margin: 0 30px;
box-sizing: border-box;
display: flex;
@ -50,12 +50,24 @@
.userContent {
flex-grow: 1;
padding: 30px 20px 30px 30px;
box-sizing: border-box;
display: flex;
flex-direction: column;
position: relative;
align-items: center;
.userContentTable {
position: absolute;
width: calc(100% - 40px);
flex-grow: 1;
top: 20px;
height: 76vh;
}
.userContentPagination {
position: absolute;
bottom: 20px;
width: calc(100% - 40px);
display: flex;
align-items: center;
justify-content: space-between;
@ -63,7 +75,7 @@
>span {
color: #8B8787;
font-size: 20px;
font-size: 16px;
}
}
}
@ -78,7 +90,7 @@
>span {
flex-shrink: 0;
color: #EEEEEE;
width: 120px;
width: 70px;
text-align: right;
}
}

16
src/page/Home/User/index.tsx
View File

@ -15,7 +15,7 @@ const User: React.FC = () => {
searchKeywod: '',
total: 0,
pageIndex: 1,
pageSize: 6,
pageSize: 14,
})
const [roleList, setRoleList] = useState([])
const [addUserModal, setAddUserModal] = useState(false)
@ -104,7 +104,11 @@ const User: React.FC = () => {
icon={<img src={ImageUrl.icon21} alt="" />}
className={styles.userBtnsDel}
onClick={() => {
setDeleteUserPawModal(true)
if (selectedRowKeys.length) {
setDeleteUserPawModal(true)
} else {
message.error('请选择要删除的用户')
}
}}
>
删除用户
@ -145,7 +149,7 @@ const User: React.FC = () => {
dataSource={list.data}
pagination={false}
scroll={{ y: '70vh' }}
style={{ width: '81.4vw', flexGrow: 1 }}
className={styles.userContentTable}
>
<Column title="姓名" dataIndex="userName" key="userName" />
<Column title="账号" dataIndex="account" key="account" />
@ -208,7 +212,7 @@ const User: React.FC = () => {
</div>
</div>
</div>
<Modal title={isCreateUser ? '添加用户' : '编辑用户'} open={addUserModal} footer={null} closable={false} centered width={'40vw'}>
<Modal title={isCreateUser ? '添加用户' : '编辑用户'} open={addUserModal} footer={null} closable={false} centered width={'500px'}>
<div>
<div className={styles.addUserModal}>
<div>
@ -314,7 +318,7 @@ const User: React.FC = () => {
</div>
</div>
</Modal>
<Modal title='更改密码' open={changeUserPawModal} footer={null} closable={false} centered width={'40vw'}>
<Modal title='更改密码' open={changeUserPawModal} footer={null} closable={false} centered width={'500px'}>
<div>
<div className={styles.addUserModal}>
<div>
@ -369,7 +373,7 @@ const User: React.FC = () => {
</div>
</div>
</Modal>
<Modal title='' open={deleteUserPawModal} footer={null} centered width={'24vw'}>
<Modal title='' open={deleteUserPawModal} footer={null} centered width={'300px'} closable={false}>
<div>
<div style={{ color: 'white', fontSize: '18px', textAlign: 'center', marginBottom: '20px' }}>
是否确认删除该用户？

26
src/page/Home/index.module.scss
View File

@ -4,7 +4,7 @@
display: flex;
.homeLeft {
width: 300px;
width: 220px;
background-color: rgb(31, 33, 37);
flex-shrink: 0;
padding: 20px 20px;
@ -21,11 +21,11 @@
cursor: pointer;
>div {
height: 50px;
width: 50px;
height: 40px;
width: 40px;
border-radius: 50%;
overflow: hidden;
margin-right: 16px;
margin-right: 14px;
flex-shrink: 0;
>img {
@ -48,7 +48,7 @@
flex-shrink: 0;
>img {
width: 82px;
width: 62px;
margin-right: 12px;
}
@ -62,12 +62,12 @@
align-items: center;
>span:nth-child(1) {
font-size: 36px;
font-size: 30px;
color: white;
}
>span:nth-child(2) {
font-size: 16px;
font-size: 14px;
color: #979797;
width: 16px;
margin-left: 10px;
@ -75,7 +75,7 @@
}
>div:nth-child(2) {
font-size: 16px;
font-size: 14px;
color: #979797;
}
}
@ -89,7 +89,7 @@
>div:nth-child(#{$i}) {
display: flex;
align-items: center;
height: 48px;
height: 38px;
cursor: pointer;
padding: 0px 10px;
box-sizing: border-box;
@ -98,7 +98,7 @@
>div {
>img {
width: 24px;
width: 16px;
}
}
@ -137,14 +137,14 @@
>div:nth-child(#{$i}) {
display: flex;
align-items: center;
height: 48px;
height: 38px;
cursor: pointer;
padding: 0px 10px;
box-sizing: border-box;
>div {
width: 24px;
height: 24px;
width: 16px;
height: 16px;
@if $i ==1 {
background: url('/src/assets/icon16.png') no-repeat center/cover;

92
src/page/Meeting/index.module.scss
View File

@ -2,7 +2,7 @@
.meetingContentUser {
position: absolute;
left: 20px;
bottom: 20px;
bottom: 16px;
display: flex;
align-items: center;
z-index: 2;
@ -10,15 +10,15 @@
.meetingContentUserRole {
background: #FDC229;
border-radius: 6px;
width: 44px;
height: 34px;
width: 34px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 6px;
>img {
width: 20px;
width: 14px;
}
}
@ -27,15 +27,16 @@
align-items: center;
background-color: #0000009E;
border-radius: 6px;
height: 34px;
height: 24px;
padding: 0 4px;
box-sizing: border-box;
>img {
width: 28px;
width: 18px;
}
>span {
font-size: 18px;
font-size: 16px;
color: #EEEEEE;
margin-left: 4px;
}
@ -70,7 +71,7 @@
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #2C2C2C;
padding: 10px 0 10px 52px;
padding: 4px 0 4px 52px;
box-sizing: border-box;
flex-shrink: 0;
@ -97,14 +98,14 @@
}
>div:nth-child(2) {
font-size: 20px;
font-size: 16px;
color: #EEEEEE;
}
}
>div:nth-child(2) {
color: #EEEEEE;
font-size: 20px;
font-size: 16px;
}
>div:nth-child(3) {
@ -115,12 +116,13 @@
cursor: pointer;
background-color: #31353A;
color: #EEEEEE;
width: 154px;
height: 40px;
line-height: 40px;
width: 140px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 5px;
margin-right: 20px;
font-size: 16px;
&:hover {
background-color: lighten(#31353A, 4%);
@ -273,13 +275,13 @@
}
.meetingContentBodyRight {
width: 374px;
width: 300px;
flex-shrink: 0;
height: 100%;
.meetingUserList {
height: 100%;
padding: 20px 0;
padding: 10px 0 20px;
box-sizing: border-box;
background-color: #16191E;
display: flex;
@ -290,13 +292,13 @@
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-bottom: 10px;
padding: 0 20px;
box-sizing: border-box;
>span {
color: #EEEEEE;
font-size: 24px;
font-size: 18px;
}
>img {
@ -324,15 +326,15 @@
align-items: center;
>span {
font-size: 20px;
font-size: 14px;
color: #F3F3F5;
margin-left: 4px;
}
>div {
flex-shrink: 0;
width: 40px;
height: 40px;
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
@ -349,7 +351,7 @@
align-items: center;
>img {
width: 28px;
width: 20px;
margin-left: 4px;
}
}
@ -359,7 +361,7 @@
top: 60px;
left: 50%;
transform: translate(-50%, 0);
width: 200px;
width: 160px;
z-index: 1;
display: flex;
align-items: center;
@ -404,13 +406,13 @@
box-sizing: border-box;
>div {
font-size: 20px;
font-size: 14px;
cursor: pointer;
background-color: #31353A;
color: #EEEEEE;
width: 154px;
height: 40px;
line-height: 40px;
width: 104px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 5px;
@ -436,13 +438,13 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
padding: 10px 20px;
box-sizing: border-box;
border-bottom: 1px solid #23272E;
>span {
color: #EEEEEE;
font-size: 24px;
font-size: 18px;
}
>img {
@ -468,14 +470,14 @@
align-items: center;
>span {
font-size: 20px;
font-size: 14px;
color: #F3F3F5;
margin-left: 4px;
}
>div {
width: 40px;
height: 40px;
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
@ -495,7 +497,7 @@
box-sizing: border-box;
border-radius: 0 25px 25px 25px;
margin: 10px 0 10px 40px;
font-size: 20px;
font-size: 14px;
}
}
@ -510,14 +512,14 @@
flex-direction: row-reverse;
>span {
font-size: 20px;
font-size: 14px;
color: #F3F3F5;
}
>div {
margin-left: 4px;
width: 40px;
height: 40px;
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
@ -537,7 +539,7 @@
box-sizing: border-box;
border-radius: 25px 0 25px 25px;
margin: 10px 40px 10px 0;
font-size: 20px;
font-size: 14px;
}
}
@ -545,9 +547,9 @@
.meetingUserChatInput {
flex-shrink: 0;
padding: 20px;
padding: 10px 20px;
box-sizing: border-box;
height: 220px;
height: 160px;
display: flex;
flex-direction: column;
align-items: flex-end;
@ -581,7 +583,7 @@
}
>img {
height: 50px;
height: 30px;
}
>span {
@ -598,13 +600,13 @@
:global {
.meetingContentFooterPopover {
>div {
width: 220px;
height: 40px;
line-height: 40px;
width: 140px;
height: 30px;
line-height: 30px;
border-radius: 5px;
color: #EEEEEE;
text-align: center;
margin-bottom: 16px;
margin-bottom: 8px;
cursor: pointer;
&:last-child {
@ -731,7 +733,7 @@
>span {
color: #EEEEEE;
font-size: 20px;
font-size: 16px;
}
>div {
@ -741,7 +743,7 @@
>span {
margin-right: 20px;
cursor: pointer;
font-size: 26px;
font-size: 16px;
}
}
}

4
src/page/Meeting/index.tsx
View File

@ -686,7 +686,7 @@ const Meeting: React.FC = () => {
</div>
</div>
</div>
<Modal title="共享屏幕" open={isSharedScreenModal} footer={null} closable={false} centered width={'40vw'}>
<Modal title="共享屏幕" open={isSharedScreenModal} footer={null} closable={false} centered width={'800px'}>
<div className={styles.sharedScreenModal}>
<div>
{sharedScreenList.map((item: any, index: number) => {
@ -720,7 +720,7 @@ const Meeting: React.FC = () => {
open={isSharedFilesModel}
footer={null}
centered
width={'60vw'}
width={'800px'}
onCancel={() => setIsSharedFilesModel(false)}
maskClosable
>

2
vite.config.ts
View File

@ -12,7 +12,7 @@ const loder_pxtovw = pxtovw({
export default defineConfig({
css: {
postcss: {
plugins: [loder_pxtovw],
// plugins: [loder_pxtovw],
},
},
server: {