优化css

xhrgbczc · Jan 16, 2021 · a002268 · a002268
1 parent 7b9a5b5
commit a002268
Show file tree

Hide file tree

Showing 32 changed files with 1,915 additions and 2,230 deletions.
diff --git a/public/index.html b/public/index.html
@@ -11,7 +11,7 @@
     <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
     <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
     <% } %>
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_1425251_s834q5qvbz.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_1425251_clwbhpfien7.css">
     <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css">
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" class="theme-red">
     <router-view v-if="showView" />
   </div>
 </template>

diff --git a/src/assets/css/global.less b/src/assets/css/global.less
@@ -0,0 +1,222 @@
+@import "./reset.css";
+
+.no-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.padding0 {
+  padding: 0;
+}
+
+.border0 {
+  border: 0;
+}
+
+.border-radius0 {
+  border-radius: 0;
+}
+
+.hv100 {
+  height: 100%;
+}
+
+.ov-hidden {
+  overflow: hidden;
+}
+
+.base-mask {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  background-color: rgba(31, 35, 41, .3);
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+// 滚动条样式
+.lm-scrollbar {
+  &::-webkit-scrollbar {
+    width: 3px;
+    background-color: #E4E4E5;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background-color: #C0BEBC;
+  }
+}
+
+.lm-icon-spin {
+  -webkit-animation: loading-spinner 2s infinite linear;
+  -moz-animation: loading-spinner 2s infinite linear;
+  -o-animation: loading-spinner 2s infinite linear;
+  animation: loading-spinner 2s infinite linear;
+  display: inline-block;
+}
+
+@-webkit-keyframes loading-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+@-moz-keyframes loading-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+@-o-keyframes loading-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+@keyframes loading-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+.larkc-tag {
+  font-size: 12px;
+  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  height: 20px;
+  border-radius: 2px;
+  cursor: default;
+  user-select: none;
+  background-color: #dee0e3;
+  transform: scale(.83);
+  transform-origin: left;
+  flex-shrink: 0;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 自定义 dialog 样式
+.lum-dialog-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999999999 !important;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(31, 35, 41, .3);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .lum-dialog-box {
+    min-width: 200px;
+    min-height: 200px;
+    background-color: white;
+    border-radius: 3px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px 0 rgba(31, 35, 41, 0.2);
+    margin: 0 10px;
+
+    .container {
+      height: 100%;
+    }
+
+    .header {
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #f5eeee;
+      text-indent: 20px;
+
+      .tools {
+        height: 100%;
+        width: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-right: 20px;
+
+        i {
+          font-size: 20px;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .main {
+      /deep/.el-input__inner {
+        border-radius: 1px !important;
+      }
+
+      .submit-btn {
+        border-radius: 2px;
+        font-weight: 400;
+      }
+    }
+  }
+}