Skip to content

Commit 50b524f

Browse files
author
piexlMax
committed
通用css 替换为tailwindcss模式，剔除无用css。
1 parent aee26bc commit 50b524f

File tree

15 files changed

+37
-362
lines changed

15 files changed

+37
-362
lines changed

‎web/src/style/basics.scss‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎web/src/style/element_visiable.scss‎

Lines changed: 6 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@import '@/style/main.scss';
2-
@import '@/style/mobile.scss';
32

43
#app {
54
.el-button {
@@ -8,105 +7,30 @@
87
}
98
}
109

11-
::-webkit-scrollbar-track-piece {
12-
background-color: #f8f8f8;
13-
}
14-
1510
::-webkit-scrollbar {
16-
width: 9px;
17-
height: 9px;
18-
}
19-
20-
::-webkit-scrollbar-thumb {
21-
background-color: #dddddd;
22-
background-clip: padding-box;
23-
min-height: 28px;
24-
border-radius: 4px;
25-
}
26-
27-
::-webkit-scrollbar-thumb:hover {
28-
background-color: #bbb;
11+
@apply hidden;
2912
}
3013

3114

3215
.gva-search-box {
33-
padding: 24px;
34-
padding-bottom: 2px;
35-
background-color: #fff;
36-
border-radius: 2px;
37-
margin-bottom: 12px;
16+
@apply p-6 pb-0.5 bg-white rounded mb-3;
3817
}
3918

4019
.gva-form-box {
41-
padding: 24px;
42-
background-color: #fff;
43-
border-radius: 2px;
44-
}
45-
46-
.multiple-img-box{
47-
display: flex;
48-
gap:8px;
49-
flex-wrap: wrap;
20+
@apply p-6 bg-white rounded;
5021
}
5122

5223
.gva-pagination {
53-
display: flex;
54-
justify-content: flex-end;
24+
@apply flex justify-end;
5525
.el-pagination__editor {
5626
.el-input__inner {
57-
height: 32px;
58-
}
59-
}
60-
.el-pagination__total {
61-
line-height: 32px !important;
62-
}
63-
//小屏幕不显示
64-
@media (max-width: 750px) {
65-
.el-pagination__sizes{
66-
display: none !important;
27+
@apply h-8;
6728
}
6829
}
69-
.btn-prev {
70-
padding-right: 6px;
71-
display: inline-flex;
72-
justify-content: center;
73-
align-items: center;
74-
width: 32px;
75-
height: 32px;
76-
}
77-
.number {
78-
display: inline-flex;
79-
justify-content: center;
80-
align-items: center;
81-
width: 32px;
82-
height: 32px;
83-
}
84-
.btn-quicknext {
85-
display: inline-flex;
86-
justify-content: center;
87-
align-items: center;
88-
width: 32px;
89-
height: 32px;
90-
}
91-
.btn-next {
92-
padding-left: 6px;
93-
width: 32px;
94-
height: 32px;
95-
display: inline-flex;
96-
justify-content: center;
97-
align-items: center;
98-
}
99-
// 兼容久版用户升级
100-
.active {
101-
background: var(--el-color-primary);
102-
border-radius: 2px;
103-
color: #ffffff !important;
104-
}
105-
// end
10630

10731
.is-active {
32+
@apply rounded text-white;
10833
background: var(--el-color-primary);
109-
border-radius: 2px;
11034
color: #ffffff !important;
11135
}
11236
}

‎web/src/style/main.scss‎

Lines changed: 5 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
* 2. Prevent adjustments of font size after orientation changes in iOS.
88
*/
99

10-
@import '@/style/basics.scss';
1110
@import '@/style/iconfont.css';
1211
html {
1312
line-height: 1.15;
@@ -517,31 +516,9 @@ li {
517516
@apply fixed top-0;
518517
}
519518
.gva-aside {
520-
position: fixed;
521-
font-size: 0;
522-
top: 0;
523-
bottom: 0;
524-
left: 0;
525-
z-index: 1001;
526-
overflow: hidden;
519+
@apply fixed top-0 left-0 z-[1001] overflow-hidden;
527520
.el-menu {
528-
border-right: none;
529-
}
530-
.tilte {
531-
@apply min-h-[60px];
532-
text-align: center;
533-
transition: all 0.3s;
534-
display: flex;
535-
align-items: center;
536-
justify-content: center;
537-
538-
.tit-text {
539-
display: inline-block;
540-
color: #fff;
541-
font-weight: 600;
542-
font-size: 20px;
543-
padding-left: 10px;
544-
}
521+
@apply border-r-0;
545522
}
546523
}
547524
.aside {
@@ -576,30 +553,18 @@ li {
576553

577554
.mobile {
578555
.gva-aside {
579-
width: $width-hideside-aside;
556+
@apply w-[54px];
580557
}
581558
}
582559

583560
.hideside {
584561
.main-cont.el-main {
585-
margin-left: 54px;
562+
@apply ml-[54px];
586563
}
587564
}
588565
.mobile {
589566
.main-cont.el-main {
590-
margin-left: 0px;
591-
}
592-
}
593-
.openside.mobile {
594-
.shadowBg {
595-
background: #000;
596-
opacity: .3;
597-
width: 100%;
598-
top: 0;
599-
height: 100%;
600-
position: absolute;
601-
z-index: 1001;
602-
left: 0;
567+
@apply ml-0;
603568
}
604569
}
605570
}
@@ -703,21 +668,6 @@ li {
703668
}
704669
}
705670
}
706-
707-
&.main-right {
708-
.admin-title {
709-
float: left;
710-
font-size: 16px;
711-
vertical-align: middle;
712-
margin-left: 20px;
713-
img {
714-
vertical-align: middle;
715-
}
716-
&.collapse {
717-
width: 53px;
718-
}
719-
}
720-
}
721671
}
722672
}
723673

‎web/src/style/mobile.scss‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎web/src/view/dashboard/index.vue‎

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,8 @@
55
<div class="gva-top-card-left">
66
<div class="gva-top-card-left-title">早安，管理员，请开始一天的工作吧</div>
77
<div class="gva-top-card-left-dot">{{ weatherInfo }}</div>
8-
<div class="gva-top-card-left-rows">
9-
<el-row>
8+
<el-row class="my-8 w-[500px]">
109
<el-col :span="8" :xs="24" :sm="8">
11-
1210
<div class="flex items-center">
1311
<el-icon class="dashboard-icon">
1412
<sort />
@@ -33,7 +31,6 @@
3331
</div>
3432
</el-col>
3533
</el-row>
36-
</div>
3734
<div>
3835
<div class="gva-top-card-left-item">
3936
使用教学：
@@ -190,9 +187,6 @@ export default {
190187
&-dot {
191188
@apply mt-4 text-gray-600 text-lg;
192189
}
193-
&-rows {
194-
@apply mt-4 flex flex-col text-gray-600 w-[500px];
195-
}
196190
&-item{
197191
+.gva-top-card-left-item{
198192
margin-top: 24px;
@@ -232,34 +226,4 @@ export default {
232226
@apply flex items-center text-xl mr-2 text-blue-400;
233227
}
234228
235-
236-
//小屏幕不显示右侧，将登录框居中
237-
@media (max-width: 750px) {
238-
.gva-card {
239-
@apply px-5 py-2.5;
240-
.gva-top-card {
241-
@apply h-auto;
242-
&-left {
243-
&-title {
244-
font-size: 20px !important;
245-
}
246-
&-rows {
247-
margin-top: 15px;
248-
align-items: center;
249-
}
250-
}
251-
&-right {
252-
display: none;
253-
}
254-
}
255-
.gva-middle-card {
256-
&-item {
257-
line-height: 20px;
258-
}
259-
}
260-
.dashboard-icon {
261-
font-size: 18px;
262-
}
263-
}
264-
}
265229
</style>

‎web/src/view/layout/index.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
22
<el-container class="layout-cont">
33
<el-container :class="[isSider?'openside':'hideside',isMobile ? 'mobile': '']">
4-
<el-row :class="[isShadowBg?'shadowBg':'']" @click="changeShadow()" />
4+
<el-row :class="[isShadowBg?'bg-black opacity-30 w-full h-full absolute top-0 left-0 z-[1001]':'']" @click="changeShadow()" />
55
<el-aside class="main-cont gva-aside" :style="{width:asideWidth()}">
6-
<div class="tilte" :style="{background: backgroundColor}">
6+
<div class="min-h-[60px] text-center transition-all duration-300 flex items-center justify-center gap-2" :style="{background: backgroundColor}">
77
<img alt class="w-9 h-9 p-1 bg-white rounded-full" :src="$GIN_VUE_ADMIN.appLogo">
8-
<div v-if="isSider" class="tit-text" :style="{color:textColor}">{{ $GIN_VUE_ADMIN.appName }}</div>
8+
<div v-if="isSider" class="inline-flex text-white font-bold text-2xl" :style="{color:textColor}">{{ $GIN_VUE_ADMIN.appName }}</div>
99
</div>
1010
<Aside class="aside" />
1111
</el-aside>
@@ -19,7 +19,7 @@
1919
<el-row>
2020
<el-col>
2121
<el-header class="header-cont">
22-
<el-row class="p-0">
22+
<el-row class="p-0 h-full">
2323
<el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1" class="z-50 flex items-center pl-3">
2424
<div class="text-black cursor-pointer text-lg leading-5" @click="totalCollapse">
2525
<div v-if="isCollapse" class="gvaIcon gvaIcon-arrow-double-right" />
@@ -292,7 +292,6 @@ const changeShadow = () => {
292292
</script>
293293

294294
<style lang="scss">
295-
@import '@/style/mobile.scss';
296295
.button {
297296
font-size: 12px;
298297
color: #666;

0 commit comments

Comments
 (0)