From 777fa3e38fea6bca24f67890b791aaf60f0100c1 Mon Sep 17 00:00:00 2001 From: hbrwang Date: Fri, 4 Dec 2020 10:39:46 +0800 Subject: [PATCH] disposal style --- web/frps/src/main.js | 1 - web/frps/src/styles/index.scss | 37 +- web/frps/src/styles/layout.scss | 525 ---------------------------- web/frps/src/utils/less/custom.less | 22 -- 4 files changed, 28 insertions(+), 557 deletions(-) delete mode 100644 web/frps/src/styles/layout.scss delete mode 100644 web/frps/src/utils/less/custom.less diff --git a/web/frps/src/main.js b/web/frps/src/main.js index 010a6cd3..05773bac 100644 --- a/web/frps/src/main.js +++ b/web/frps/src/main.js @@ -3,7 +3,6 @@ import ElementUI from 'element-ui' import lang from 'element-ui/lib/locale/lang/en' import locale from 'element-ui/lib/locale' import 'element-ui/lib/theme-chalk/index.css' -import './utils/less/custom.less' import '@/icons' import '@/styles/index.scss' diff --git a/web/frps/src/styles/index.scss b/web/frps/src/styles/index.scss index 3619ecf3..46cca208 100644 --- a/web/frps/src/styles/index.scss +++ b/web/frps/src/styles/index.scss @@ -1,9 +1,8 @@ -@import "./variables.scss"; -@import "./mixin.scss"; -@import "./transition.scss"; -@import "./element-ui.scss"; -@import "./sidebar.scss"; -@import "./layout.scss"; +@import './variables.scss'; +@import './mixin.scss'; +@import './transition.scss'; +@import './element-ui.scss'; +@import './sidebar.scss'; body { height: 100%; @@ -11,8 +10,7 @@ body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; - font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, - Microsoft YaHei, Arial, sans-serif; + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; } label { @@ -56,7 +54,7 @@ div:focus { visibility: hidden; display: block; font-size: 0; - content: " "; + content: ' '; clear: both; height: 0; } @@ -66,3 +64,24 @@ div:focus { .app-container { padding: 20px; } + +.el-form-item { + span { + margin-left: 15px; + } +} + +.demo-table-expand { + font-size: 0; + + label { + width: 90px; + color: #99a9bf; + } + + .el-form-item { + margin-right: 0; + margin-bottom: 0; + width: 50%; + } +} diff --git a/web/frps/src/styles/layout.scss b/web/frps/src/styles/layout.scss deleted file mode 100644 index 9a2a6cc1..00000000 --- a/web/frps/src/styles/layout.scss +++ /dev/null @@ -1,525 +0,0 @@ -/* - * @Description: 布局(来源:ColorUI) - * @Author: wwh - * @Date: 2020-07-12 22:36:59 - * @LastEditTime: 2020-07-12 23:04:49 - * @LastEditors: wwh - * @FilePath: \web\src\styles\layout.scss - */ - -/* -- flex弹性布局 -- */ - -.flex { - display: flex; -} - -.basis-xs { - flex-basis: 20%; -} - -.basis-sm { - flex-basis: 40%; -} - -.basis-df { - flex-basis: 50%; -} - -.basis-lg { - flex-basis: 60%; -} - -.basis-xl { - flex-basis: 80%; -} - -.flex-sub { - flex: 1; -} - -.flex-twice { - flex: 2; -} - -.flex-treble { - flex: 3; -} - -.flex-direction { - flex-direction: column; -} - -.flex-wrap { - flex-wrap: wrap; -} - -.align-start { - align-items: flex-start; -} - -.align-end { - align-items: flex-end; -} - -.align-center { - align-items: center; -} - -.align-stretch { - align-items: stretch; -} - -.self-start { - align-self: flex-start; -} - -.self-center { - align-self: flex-center; -} - -.self-end { - align-self: flex-end; -} - -.self-stretch { - align-self: stretch; -} - -.align-stretch { - align-items: stretch; -} - -.justify-start { - justify-content: flex-start; -} - -.justify-end { - justify-content: flex-end; -} - -.justify-center { - justify-content: center; -} - -.justify-between { - justify-content: space-between; -} - -.justify-around { - justify-content: space-around; -} - -/* grid布局 */ - -.grid { - display: flex; - flex-wrap: wrap; -} - -.grid.grid-square { - overflow: hidden; -} - -.grid.grid-square .cu-tag { - position: absolute; - right: 0; - top: 0; - border-bottom-left-radius: 6px; - padding: 6px 12px; - height: auto; - background-color: rgba(0, 0, 0, 0.5); -} - -.grid.grid-square > view > text[class*="cuIcon-"] { - font-size: 52px; - position: absolute; - color: #8799a3; - margin: auto; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} - -.grid.grid-square > view { - margin-right: 20px; - margin-bottom: 20px; - border-radius: 6px; - position: relative; - overflow: hidden; -} -.grid.grid-square > view.bg-img image { - width: 100%; - height: 100%; - position: absolute; -} -.grid.col-1.grid-square > view { - padding-bottom: 100%; - height: 0; - margin-right: 0; -} - -.grid.col-2.grid-square > view { - padding-bottom: calc((100% - 20px) / 2); - height: 0; - width: calc((100% - 20px) / 2); -} - -.grid.col-3.grid-square > view { - padding-bottom: calc((100% - 40px) / 3); - height: 0; - width: calc((100% - 40px) / 3); -} - -.grid.col-4.grid-square > view { - padding-bottom: calc((100% - 60px) / 4); - height: 0; - width: calc((100% - 60px) / 4); -} - -.grid.col-5.grid-square > view { - padding-bottom: calc((100% - 80px) / 5); - height: 0; - width: calc((100% - 80px) / 5); -} - -.grid.col-2.grid-square > view:nth-child(2n), -.grid.col-3.grid-square > view:nth-child(3n), -.grid.col-4.grid-square > view:nth-child(4n), -.grid.col-5.grid-square > view:nth-child(5n) { - margin-right: 0; -} - -.grid.col-1 > view { - width: 100%; -} - -.grid.col-2 > view { - width: 50%; -} - -.grid.col-3 > view { - width: 33.33%; -} - -.grid.col-4 > view { - width: 25%; -} - -.grid.col-5 > view { - width: 20%; -} - -/* -- 内外边距 -- */ - -.margin-0 { - margin: 0; -} - -.margin-xs { - margin: 10px; -} - -.margin-sm { - margin: 20px; -} - -.margin { - margin: 30px; -} - -.margin-lg { - margin: 40px; -} - -.margin-xl { - margin: 50px; -} - -.margin-top-xs { - margin-top: 10px; -} - -.margin-top-sm { - margin-top: 20px; -} - -.margin-top { - margin-top: 30px; -} - -.margin-top-lg { - margin-top: 40px; -} - -.margin-top-xl { - margin-top: 50px; -} - -.margin-right-xs { - margin-right: 10px; -} - -.margin-right-sm { - margin-right: 20px; -} - -.margin-right { - margin-right: 30px; -} - -.margin-right-lg { - margin-right: 40px; -} - -.margin-right-xl { - margin-right: 50px; -} - -.margin-bottom-xs { - margin-bottom: 10px; -} - -.margin-bottom-sm { - margin-bottom: 20px; -} - -.margin-bottom { - margin-bottom: 30px; -} - -.margin-bottom-lg { - margin-bottom: 40px; -} - -.margin-bottom-xl { - margin-bottom: 50px; -} - -.margin-left-xs { - margin-left: 10px; -} - -.margin-left-sm { - margin-left: 20px; -} - -.margin-left { - margin-left: 30px; -} - -.margin-left-lg { - margin-left: 40px; -} - -.margin-left-xl { - margin-left: 50px; -} - -.margin-lr-xs { - margin-left: 10px; - margin-right: 10px; -} - -.margin-lr-sm { - margin-left: 20px; - margin-right: 20px; -} - -.margin-lr { - margin-left: 30px; - margin-right: 30px; -} - -.margin-lr-lg { - margin-left: 40px; - margin-right: 40px; -} - -.margin-lr-xl { - margin-left: 50px; - margin-right: 50px; -} - -.margin-tb-xs { - margin-top: 10px; - margin-bottom: 10px; -} - -.margin-tb-sm { - margin-top: 20px; - margin-bottom: 20px; -} - -.margin-tb { - margin-top: 30px; - margin-bottom: 30px; -} - -.margin-tb-lg { - margin-top: 40px; - margin-bottom: 40px; -} - -.margin-tb-xl { - margin-top: 50px; - margin-bottom: 50px; -} - -.padding-0 { - padding: 0; -} - -.padding-xs { - padding: 10px; -} - -.padding-sm { - padding: 20px; -} - -.padding { - padding: 30px; -} - -.padding-lg { - padding: 40px; -} - -.padding-xl { - padding: 50px; -} - -.padding-top-xs { - padding-top: 10px; -} - -.padding-top-sm { - padding-top: 20px; -} - -.padding-top { - padding-top: 30px; -} - -.padding-top-lg { - padding-top: 40px; -} - -.padding-top-xl { - padding-top: 50px; -} - -.padding-right-xs { - padding-right: 10px; -} - -.padding-right-sm { - padding-right: 20px; -} - -.padding-right { - padding-right: 30px; -} - -.padding-right-lg { - padding-right: 40px; -} - -.padding-right-xl { - padding-right: 50px; -} - -.padding-bottom-xs { - padding-bottom: 10px; -} - -.padding-bottom-sm { - padding-bottom: 20px; -} - -.padding-bottom { - padding-bottom: 30px; -} - -.padding-bottom-lg { - padding-bottom: 40px; -} - -.padding-bottom-xl { - padding-bottom: 50px; -} - -.padding-left-xs { - padding-left: 10px; -} - -.padding-left-sm { - padding-left: 20px; -} - -.padding-left { - padding-left: 30px; -} - -.padding-left-lg { - padding-left: 40px; -} - -.padding-left-xl { - padding-left: 50px; -} - -.padding-lr-xs { - padding-left: 10px; - padding-right: 10px; -} - -.padding-lr-sm { - padding-left: 20px; - padding-right: 20px; -} - -.padding-lr { - padding-left: 30px; - padding-right: 30px; -} - -.padding-lr-lg { - padding-left: 40px; - padding-right: 40px; -} - -.padding-lr-xl { - padding-left: 50px; - padding-right: 50px; -} - -.padding-tb-xs { - padding-top: 10px; - padding-bottom: 10px; -} - -.padding-tb-sm { - padding-top: 20px; - padding-bottom: 20px; -} - -.padding-tb { - padding-top: 30px; - padding-bottom: 30px; -} - -.padding-tb-lg { - padding-top: 40px; - padding-bottom: 40px; -} - -.padding-tb-xl { - padding-top: 50px; - padding-bottom: 50px; -} diff --git a/web/frps/src/utils/less/custom.less b/web/frps/src/utils/less/custom.less deleted file mode 100644 index b83a4007..00000000 --- a/web/frps/src/utils/less/custom.less +++ /dev/null @@ -1,22 +0,0 @@ -@color: red; - -.el-form-item { - span { - margin-left: 15px; - } -} - -.demo-table-expand { - font-size: 0; - - label { - width: 90px; - color: #99a9bf; - } - - .el-form-item { - margin-right: 0; - margin-bottom: 0; - width: 50%; - } -}