commit message

seller/src/styles/common.scss

@@ -0,0 +1,195 @@
+$theme_color: #804ed1;
+
+
+//自动移滚动条样式
+::-webkit-scrollbar{
+  width: 1px;
+  height: 5px;
+}
+::-webkit-scrollbar-thumb{
+  border-radius: 1em;
+  background-color: rgba(50,50,50,.3);
+}
+::-webkit-scrollbar-track{
+  border-radius: 1em;
+  background-color: rgba(50,50,50,.1);
+}
+
+
+.flex{
+  display: flex !important;
+
+}
+.flex_justify_content{
+  justify-content: center;
+}
+.flex_align_item{
+  align-items: center;
+}
+
+.global_text_left {
+  text-align: left;
+}
+.global_text_right {
+  text-align: right;
+}
+.global_float_left {
+  float: left;
+}
+.global_float_right {
+    float: right;
+}
+.clearfix::after{
+    content: '';
+    display: block;
+    clear: both;
+}
+.width_1200{width: 1200px;}
+.width_800{width: 800px;}
+.width_400{width: 400px;}
+.width_300{width: 300px;}
+.width_200{width: 200px;}
+.width_100{width: 100px;}
+
+.fz_12{font-size: 12px;}
+.fz_14{font-size: 14px;}
+.fz_16{font-size: 16px;}
+.fz_18{font-size: 18px;}
+.fw_bold{font-weight: bold;}
+
+.mb_20{margin-bottom: 20px;}
+.mt_20{margin-top: 20px;}
+.ml_20{margin-left: 20px;}
+.mr_20{margin-right: 20px;}
+
+.mb_10{margin-bottom: 10px;}
+.mt_10{margin-top: 10px;}
+.ml_10{margin-left: 10px;}
+.mr_10{margin-right: 10px;}
+
+.pb_20{padding-bottom: 20px;}
+.pt_20{padding-top: 20px;}
+.pl_20{padding-left: 20px;}
+.pr_20{padding-right: 20px;}
+
+.pb_10{padding-bottom: 10px;}
+.pt_10{padding-top: 10px;}
+.pl_10{padding-left: 10px;}
+.pr_10{padding-right: 10px;}
+
+ul,li{
+    list-style: none;
+}
+
+.ellipsis{
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}
+
+/*
+ * @Author: LMR
+ * @Date: 2020-08-14 11:04:12
+ * @Last Modified by: LMR
+ * @Last Modified time: 2020-08-18 14:21:41
+ */
+
+// 主题颜色
+
+// 明亮主题颜色
+$primary_color: #2d8cf0;
+$primary_light_color: #0f1011;
+$primary_dark_color: #2b85e4;
+$success_color: #19be6b;
+$warning_color: #ff9900;
+$error_color: #ed3f14;
+$handle-btn-color: #438cde;
+
+$theme_color: #ed3f14;
+
+$border_color: #dddee1;
+$title_color: #8c8c8c;
+$light_title_color: #1c2438;
+$light_content_color: #495060;
+$light_sub_color: #80848f;
+$light_background_color: #f8f8f9;
+$light_white_background_color: #fff;
+// 暗黑主题颜色
+$dark_background_color: #141414;
+$dark_sub_background_color: #1d1d1d; //稍微浅一点的
+$dark_content_color: #d5d5d5;
+
+/***** 封装一些方法可用于 黑暗主题 ，明亮主题 *****/
+
+// 背景颜色
+@mixin background_color($color) {
+  /*通过该函数设置字体颜色，后期方便统一管理；*/
+  background-color: $color;
+  transition: 0.35s;
+  [data-theme="dark"] & {
+    background-color: $dark_background_color;
+  }
+  [data-theme="light"] & {
+    background-color: $light_background_color;
+  }
+}
+// 辅助背景颜色
+@mixin sub_background_color($color) {
+  /*通过该函数设置字体颜色，后期方便统一管理；*/
+  background-color: $color;
+  transition: 0.35s;
+  [data-theme="dark"] & {
+    background-color: $dark_sub_background_color;
+  }
+  [data-theme="light"] & {
+    background-color: $light_background_color;
+  }
+}
+
+@mixin white_background_color() {
+  /*通过该函数设置字体颜色，后期方便统一管理；*/
+  background-color: $light_white_background_color;
+  transition: 0.35s;
+  [data-theme="dark"] & {
+    background-color: $dark_sub_background_color;
+  }
+  [data-theme="light"] & {
+    background-color: $light_white_background_color;
+  }
+}
+
+// 正文颜色
+@mixin content_color($color) {
+  /*通过该函数设置字体颜色，后期方便统一管理；*/
+  color: $color;
+  [data-theme="dark"] & {
+    color: $dark_content_color;
+  }
+  [data-theme="light"] & {
+    color: $light_content_color;
+  }
+}
+
+// 辅助颜色
+@mixin sub_color($color) {
+  /*通过该函数设置字体颜色，后期方便统一管理；*/
+  color: $color;
+  [data-theme="dark"] & {
+    color: $dark_content_color;
+  }
+  [data-theme="light"] & {
+    color: $light_sub_color;
+  }
+}
+
+// 标题颜色
+@mixin title_color($color) {
+  /*通过该函数设置字体颜色，后期方便统一管理；*/
+  color: $color;
+  [data-theme="dark"] & {
+    color: $dark_content_color;
+  }
+  [data-theme="light"] & {
+    color: $light_title_color;
+  }
+}