yvan/Study
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

替换部分css为tailwindcss 删除某些无用css

Browse Source
This commit is contained in:
piexlMax
2023-08-08 16:05:41 +08:00
parent 22fe4053e9
commit 78de254230
20 changed files with 118 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/style/base.scss
-65
View File
@@ -1,65 +0,0 @@
.clearfix:after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.fl-left {
float: left;
}
.fl-right {
float: right;
}
.mg {
margin: 10px !important;
}
.left-mg-xs {
margin-left: 6px !important;
}
.left-mg-sm {
margin-left: 10px !important;
}
.left-mg-md {
margin-left: 14px !important;
}
.top-mg-lg {
margin-top: 20px !important;
}
.tb-mg-lg {
margin: 20px 0 !important;
}
.bottom-mg-lg {
margin-bottom: 20px !important;
}
.left-mg-lg {
margin-left: 18px !important;
}
.title-1 {
text-align: center;
font-size: 32px;
}
.title-3 {
text-align: center;
}
.keyword{
width: 220px;
margin: 0 0 0 30px;
}
#nprogress .bar {
background: #4D70FF !important; //自定义颜色
}
web/src/style/basics.scss
+1 -18
View File
@@ -1,5 +1,4 @@
// basice
$font-size: 14px;
$icon-size:18px;
$active-color:#1890ff;
$bg-main:#f0f2f5;
@@ -17,20 +16,4 @@ $width-submenu-aside:55px;
$height-aside-tilte:60px;
$height-aside-img:30px;
$width-aside-img:30px;
// header
$height-header: 60px;
// nav-scroll
$height-nav-scroll:40px;
$active-bg-tabs-item-nav-scroll:#409eff;
$bg-tabs-item-nav-scroll:#ddd;
// table
$bg-color-table-thead:#fafafa;
$border-color-table:#ededed;
$height-table-cell:45px;
$color-table-tbody:#595959;
$color-table-thead:#262626;
// dashboard
$height-car:68px;
// mobile
$padding-xs: 5px;
$margin-xs: 5px;
web/src/style/button.scss
-9
View File
@@ -1,9 +0,0 @@
.sticky-button {
position: sticky;
top: 2px;
z-index: 2;
background-color: #fff;
}
.fitler{
width: 60%;
}
web/src/style/element_visiable.scss
-7
View File
@@ -1,5 +1,4 @@
@import '@/style/main.scss';
@import '@/style/base.scss';
@import '@/style/mobile.scss';
#app {
@@ -50,12 +49,6 @@
flex-wrap: wrap;
}
.gva-table-box {
padding: 24px;
background-color: #fff;
border-radius: 2px;
}
.gva-pagination {
display: flex;
justify-content: flex-end;
web/src/style/main.scss
+26 -213
View File
@@ -510,27 +510,6 @@ li {
// 导航
#app {
.pd-lr-15 {
padding: 0 15px;
}
.height-full {
height: 100%;
}
.width-full {
width: 100%;
}
.dp-flex {
display: flex;
}
.justify-content-center {
justify-content: center;
}
.align-items {
align-items: center;
}
.pd-0 {
padding: 0;
}
.el-container {
position: relative;
height: 100%;
@@ -675,7 +654,7 @@ li {
}
.el-table {
thead {
color: $color-table-thead;
@apply text-gray-950;
}
th {
padding: 6px 0;
@@ -834,40 +813,26 @@ li {
.el-container.layout-cont {
.main-cont.el-main {
background-color: $bg-main;
.menu-total {
cursor: pointer;
font-size: 24px;
color: #000000;
margin-top: 16px;
}
}
}
.el-container.layout-cont {
.main-cont {
.router-history {
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
background: #fff;
padding: 0 6px;
border-top: 1px solid $border-color;
padding: 0;
@apply bg-white p-0 border-t border-l-0 border-r-0 border-b-0 border-solid border-gray-100;
.el-tabs__header {
margin: 0px 0 0 0;
.el-tabs__item {
height: $height-nav-scroll;
height: $height-nav-scroll;
border: none;
border-left: 1px solid $border-color;
border-right: 1px solid $border-color;
+.el-tabs__item {
border-left: 0px solid $border-color;
@apply m-0;
.el-tabs__item{
@apply border-solid border-r border-t-0 border-gray-100 border-b-0;
&+.el-tabs__item{
@apply border-l-0;
}
}
.el-tabs__item.is-active {
background-color: rgba(64, 158, 255, .08);
@apply bg-blue-500 bg-opacity-5;
}
.el-tabs__nav {
border: none;
@apply border-0;
}
}
}
@@ -876,17 +841,8 @@ li {
.el-table__row {
.el-button.el-button--text.el-button--small {
position: relative;
@apply relative;
}
// .el-button.el-button--text.el-button--small::after {
// content: '';
// position: absolute;
// width: 1px;
// height: 50%;
// top: 5px;
// margin-left: 15px;
// background-color: #e8e8e8;
// }
.cell {
button:last-child::after {
content: '' !important;
@@ -959,26 +915,20 @@ $mainHight: 100vh;
}
}
.header-cont {
padding: 0 16px;
height: $height-header;
@apply px-4 h-16 bg-white;
background: #fff;
}
.main-cont {
.breadcrumb {
height: $height-header;
line-height: $height-header;
display: inline-block;
padding: 0;
margin-left: 46px;
font-size: 16px;
@apply h-16 flex items-center p-0 ml-12 text-lg;
.el-breadcrumb__item {
.el-breadcrumb__inner {
color: rgba($color: #000000, $alpha: 0.45);
@apply text-gray-600;
}
}
.el-breadcrumb__item:nth-last-child(1) {
.el-breadcrumb__inner {
color: rgba($color: #000000, $alpha: 0.65);
@apply text-gray-600;
}
}
}
@@ -989,16 +939,6 @@ $mainHight: 100vh;
height: $mainHight !important;
overflow: visible;
position: relative;
.menu-total {
margin-left: 6px;
cursor: pointer;
float: left;
margin-top: 10px;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 30px;
}
.aside {
overflow: auto;
// background: #fff;
@@ -1045,162 +985,35 @@ $mainHight: 100vh;
}
}
.header-avatar {
display: flex;
justify-content: center;
align-items: center;
}
.search-component {
display: inline-flex;
overflow: hidden;
text-align: center;
@apply inline-flex overflow-hidden text-center gap-5 mr-5;
div{
@apply cursor-pointer;
}
.el-input__inner {
border: none;
border-bottom: 1px solid #606266;
@apply border-b border-solid border-gray-300;
}
.el-dropdown-link {
cursor: pointer;
}
.search-icon {
font-size: $icon-size;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
color: rgba($color: #000000, $alpha: 0.65);
@apply cursor-pointer;
}
.dropdown-group {
min-width: 100px;
}
.user-box {
cursor: pointer;
margin-right: 24px;
color: rgba($color: #000000, $alpha: 0.65);
}
}
.screenfull {
overflow: hidden;
color: rgba($color: #000000, $alpha: 0.65);
}
.el-dropdown {
overflow: hidden;
}
// dashboard
.card {
background-color: $white-bg;
padding: 20px;
border-radius: 4px;
overflow: hidden;
.car-left {
height: $height-car;
// width: 70%;
// float: left;
}
.car-right {
height: $height-car;
// width: 29%;
// float: left;
.flow,
.user-number,
.feedback {
width: $el-icon-mini;
height: $el-icon-mini;
display: inline-block;
border-radius: 50%;
line-height: $el-icon-mini;
text-align: center;
font-size: 13px;
margin-right: 5px;
}
.flow {
background-color: #fff7e8;
border-color: #feefd0;
color: #faad14;
}
.user-number {
background-color: #ecf5ff;
border-color: #d9ecff;
color: #409eff;
}
.feedback {
background-color: #eef9e8;
border-color: #dcf3d1;
color: #52c41a;
}
.card-item {
padding-right: 20px;
text-align: right;
margin-top: 12px;
b {
margin-top: 6px;
display: block;
}
}
}
.card-img {
width: $height-car;
height: $height-car;
display: inline-block;
float: left;
overflow: hidden;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.text {
height: $height-car;
margin-left: 10px;
float: left;
margin-top: 14px;
h4 {
font-size: 20px;
color: #262626;
font-weight: 500;
white-space: nowrap;
word-break: break-all;
text-overflow: ellipsis;
}
.tips-text {
color: #8c8c8c;
margin-top: 8px;
.el-icon {
margin-right: 8px;
display: inline-block;
}
}
}
}
.shadow {
margin: 4px 0;
.grid-content {
background-color: $white-bg;
border-radius: 4px;
text-align: center;
padding: 10px 0;
cursor: pointer;
.el-icon {
width: $el-icon-small;
height: $el-icon-small;
font-size: $el-icon-small;
margin-bottom: 8px;
}
}
.gva-table-box {
@apply p-6 bg-white rounded;
}
.gva-btn-list {
margin-bottom: 12px;
display: flex;
.el-button+.el-button {
margin-left: 12px;
}
@apply mb-3 flex gap-3 items-center;
}
.justify-content-flex-end {
justify-content: flex-end;
#nprogress .bar {
background: #29d !important;
}
web/src/style/mobile.scss
+5 -6
View File
@@ -1,18 +1,18 @@
@import '@/style/basics.scss';
@media screen and (min-width: 320px)and (max-width: 750px) {
.el-header {
padding: 0 $padding-xs;
@apply px-1.5;
}
.layout-cont {
.main-cont {
.breadcrumb {
padding: 0 $padding-xs;
@apply px-1.5;
}
}
}
.layout-cont {
.right-box {
margin-right: $margin-xs;
@apply mr-1.5;
}
}
.el-main {
@@ -42,8 +42,7 @@
height: 100%;
}
.card {
padding-left: $padding-xs;
padding-right: $padding-xs;
@apply px-1.5;
}
.card {
.text {
@@ -74,4 +73,4 @@
display: inline-block;
}
}
}
}