cwg样式表同步

src/styles/color.scss

@@ -0,0 +1,322 @@
+/**
+  所有的颜色变量
+  方便后期修改
+  命名规则 $font-color-1/$background-color-1
+**/
+
+
+//主色调
+$theme_1_main_color1: #368FEC;
+//字体色
+$theme_1_font_white:#ffffff;
+$theme_1_font_gray_1:#979797;
+$theme_1_font_gray_2:#C5C5C9;
+$theme_1_font_gray_3:#D5D5D5;
+$theme_1_font_gray_content_1:#505050;
+$theme_1_font_gray_content_2:#949494;
+$theme_1_font_blue_btn_1:#407BB9;
+$theme_1_font_red_icon_1:#368FEC;
+$theme_1_font_green_icon_1:#4CB01A;
+$theme_1_font_red_1:#EB3F57;
+//背景色
+$theme_1_bg_white:#ffffff;
+$theme_1_bg_gray_1:#C5C5C9;
+$theme_1_bg_gray_2:#F6F6F6;  //个人信息，验证
+$theme_1_bg_gray_3:#505050;  //验证页标题
+$theme_1_bg_gray_4:#F8F8F8;  //新闻，图表
+$theme_1_bg_gray_5:#F9F9F9;  //白底表格移入时，
+$theme_1_bg_gray_6:#323232;  //按钮
+$theme_1_bg_gray_7:#F2F2F2;
+$theme_1_bg_gray_opacity_1:rgba(248, 248, 248, 0.8);  //图表
+//$theme_1_bg_red_1:#EB3F57;
+$theme_1_bg_blue_1:#3490CE;
+$theme_1_bg_blue_2:#407BB9;
+$theme_1_bg_red_1:#EB3F57;
+//边框色
+$theme_1_bd_white:#ffffff;  //三角形
+$theme_1_bd_gray_1:#979797;
+$theme_1_bd_gray_2:#9C9C9C;
+$theme_1_bd_gray_3:#DADADA;
+$theme_1_bd_gray_4:#EAEAEA;
+$theme_1_bd_gray_5:#C5C5C9;
+$theme_1_bd_gray_6:#C4C4C4;
+$theme_1_bd_gray_7:#DCDCDC;
+$theme_1_bd_gray_8:#D5D5D5;
+$theme_1_bd_gray_9:#323232;
+$theme_1_bd_red_1:#EB3F57;
+$theme_1_bd_blue_1:#368FEC;
+
+
+
+// 主色调
+@mixin font_main() {
+  color: $theme_1_main_color1;
+
+  [data-theme="theme1"] & {
+    color: $theme_1_main_color1;
+  }
+}
+
+@mixin bg_main() {
+  background-color: $theme_1_main_color1;
+
+  [data-theme="theme1"] & {
+    background-color: $theme_1_main_color1;
+  }
+}
+
+// 字体色
+@mixin font_white() {
+  color: $theme_1_font_white;
+  [data-theme="theme1"] & {
+    color: $theme_1_font_white;
+  }
+}
+
+@mixin font_gray_1() {
+  color: $theme_1_font_gray_1;
+  [data-theme="theme1"] & {
+    color: $theme_1_font_gray_1;
+  }
+}
+
+@mixin font_gray_2() {
+  color: $theme_1_font_gray_2;
+  [data-theme="theme1"] & {
+    color: $theme_1_font_gray_2;
+  }
+}
+
+@mixin font_gray_3() {
+  color: $theme_1_font_gray_3;
+  [data-theme="theme1"] & {
+    color: $theme_1_font_gray_3;
+  }
+}
+
+@mixin font_gray_content_1() {
+  color: $theme_1_font_gray_content_1;
+  [data-theme="theme1"] & {
+    color: $theme_1_font_gray_content_1;
+  }
+}
+
+@mixin font_gray_content_2() {
+  color: $theme_1_font_gray_content_2;
+  [data-theme="theme1"] & {
+    color: $theme_1_font_gray_content_2;
+  }
+}
+
+@mixin font_blue_btn_1() {
+  color: $theme_1_font_blue_btn_1;
+  [data-theme="theme1"] & {
+    color: $theme_1_font_blue_btn_1;
+  }
+}
+
+@mixin font_red_icon_1() {
+  color: $theme_1_font_red_icon_1;
+  [data-theme="theme1"] & {
+    color: $theme_1_font_red_icon_1;
+  }
+}
+
+@mixin font_green_icon_1() {
+  color: $theme_1_font_green_icon_1;
+  [data-theme="theme1"] & {
+    color: $theme_1_font_green_icon_1;
+  }
+}
+
+@mixin font_red_1() {
+  color: $theme_1_font_red_1;
+  [data-theme="theme1"] & {
+    color: $theme_1_font_red_1;
+  }
+}
+
+// 背景色
+@mixin bg_white() {
+  background-color: $theme_1_bg_white;
+  [data-theme="theme1"] & {
+    background-color: $theme_1_bg_white;
+  }
+}
+
+@mixin bg_gray_1() {
+  background-color: $theme_1_bg_gray_1;
+  [data-theme="theme1"] & {
+    background-color: $theme_1_bg_gray_1;
+  }
+}
+
+@mixin bg_gray_2() {
+  background-color: $theme_1_bg_gray_2;
+  [data-theme="theme1"] & {
+    background-color: $theme_1_bg_gray_2;
+  }
+}
+
+@mixin bg_gray_3() {
+  background-color: $theme_1_bg_gray_3;
+  [data-theme="theme1"] & {
+    background-color: $theme_1_bg_gray_3;
+  }
+}
+
+@mixin bg_gray_4() {
+  background-color: $theme_1_bg_gray_4;
+  [data-theme="theme1"] & {
+    background-color: $theme_1_bg_gray_4;
+  }
+}
+
+@mixin bg_gray_5() {
+  background-color: $theme_1_bg_gray_5;
+  [data-theme="theme1"] & {
+    background-color: $theme_1_bg_gray_5;
+  }
+}
+
+@mixin bg_gray_6() {
+  background-color: $theme_1_bg_gray_6;
+  [data-theme="theme1"] & {
+    background-color: $theme_1_bg_gray_6;
+  }
+}
+
+@mixin bg_gray_7() {
+  background-color: $theme_1_bg_gray_7;
+  [data-theme="theme1"] & {
+    background-color: $theme_1_bg_gray_7;
+  }
+}
+
+@mixin bg_gray_opacity_1() {
+  background-color: $theme_1_bg_gray_opacity_1;
+  [data-theme="theme1"] & {
+    background-color: $theme_1_bg_gray_opacity_1;
+  }
+}
+
+@mixin bg_blue_1() {
+  background-color: $theme_1_bg_blue_1;
+  [data-theme="theme1"] & {
+    background-color: $theme_1_bg_blue_1;
+  }
+}
+
+@mixin bg_blue_2() {
+  background-color: $theme_1_bg_blue_2;
+  [data-theme="theme1"] & {
+    background-color: $theme_1_bg_blue_2;
+  }
+}
+
+@mixin bg_red_1() {
+  background-color: $theme_1_bg_red_1;
+  [data-theme="theme1"] & {
+    background-color: $theme_1_bg_red_1;
+  }
+}
+
+//边框色
+@mixin border_white() {
+  border-color: $theme_1_bd_white;
+  [data-theme="theme1"] & {
+    border-color: $theme_1_bd_white;
+  }
+}
+
+@mixin border_gray_1() {
+  border-color: $theme_1_bd_gray_1;
+  [data-theme="theme1"] & {
+    border-color: $theme_1_bd_gray_1;
+  }
+}
+
+@mixin border_gray_2() {
+  border-color: $theme_1_bd_gray_2;
+  [data-theme="theme1"] & {
+    border-color: $theme_1_bd_gray_2;
+  }
+}
+
+@mixin border_gray_3() {
+  border-color: $theme_1_bd_gray_3;
+  [data-theme="theme1"] & {
+    border-color: $theme_1_bd_gray_3;
+  }
+}
+
+@mixin border_gray_4() {
+  border-color: $theme_1_bd_gray_4;
+  [data-theme="theme1"] & {
+    border-color: $theme_1_bd_gray_4;
+  }
+}
+
+@mixin border_gray_5() {
+  border-color: $theme_1_bd_gray_5;
+  [data-theme="theme1"] & {
+    border-color: $theme_1_bd_gray_5;
+  }
+}
+
+@mixin border_gray_6() {
+  border-color: $theme_1_bd_gray_6;
+  [data-theme="theme1"] & {
+    border-color: $theme_1_bd_gray_6;
+  }
+}
+
+@mixin border_gray_7() {
+  border-color: $theme_1_bd_gray_7;
+  [data-theme="theme1"] & {
+    border-color: $theme_1_bd_gray_7;
+  }
+}
+
+@mixin border_gray_8() {
+  border-color: $theme_1_bd_gray_8;
+  [data-theme="theme1"] & {
+    border-color: $theme_1_bd_gray_8;
+  }
+}
+
+@mixin border_gray_9() {
+  border-color: $theme_1_bd_gray_9;
+  [data-theme="theme1"] & {
+    border-color: $theme_1_bd_gray_9;
+  }
+}
+
+@mixin border_red_1() {
+  border-color: $theme_1_bd_red_1;
+  [data-theme="theme1"] & {
+    border-color: $theme_1_bd_red_1;
+  }
+}
+
+@mixin border_bottom_red_1() {
+  border-bottom-color: $theme_1_bd_red_1;
+  [data-theme="theme1"] & {
+    border-bottom-color: $theme_1_bd_red_1;
+  }
+}
+@mixin border_bottom_white_1() {
+  border-bottom-color: $theme_1_bd_white;
+  [data-theme="theme1"] & {
+    border-bottom-color: $theme_1_bd_white;
+  }
+}
+@mixin border_bottom_blue_1() {
+  border-bottom-color: $theme_1_bd_blue_1;
+  [data-theme="theme1"] & {
+    border-bottom-color: $theme_1_bd_blue_1;
+  }
+}
+
+
+

src/styles/cwg_common.scss

@@ -0,0 +1,918 @@
+$--color-primary: #368FEC;
+
+html, body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+  word-break: break-word!important;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+.iconfont {
+  font-weight: 500;
+}
+
+//去左边框
+.crm-border-left-no{
+  border-left: none!important;
+  .el-input__inner, .el-button{
+    border-left: none;
+  }
+}
+
+//去圆角
+.crm-border-radius-no{
+  border-radius: 0!important;
+  .el-input__inner, .el-button{
+    border-radius: 0;
+  }
+}
+
+//下划线
+.crm-text-underline{
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+//小手
+.crm-cursor {
+  cursor: pointer;
+  user-select: none;
+}
+
+//字体按钮
+.crm-font-btn {
+  cursor: pointer;
+  user-select: none;
+  color: rgba(64, 123, 158, 1);
+}
+
+.crm-font-btn:hover {
+  color: rgba(64, 123, 158, 0.8);
+}
+
+//一行，...
+.crm-one-font {
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+//2行，...(多行)
+.crm-tow-font {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+//滚动条
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 3px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 6px;
+  @include bg_main();
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
+}
+
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  /*border-radius: 10px;*/
+  background: #ededed;
+}
+
+//滑动
+.slide-right-enter-active,
+.slide-right-leave-active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(0, 0);
+  transition: all .35s .1s linear;
+}
+
+.slide-right-enter {
+  position: absolute;
+  transform: translate(-100%, 0);
+}
+
+.slide-right-leave-active {
+  position: absolute;
+  transform: translate(100%, 0);
+}
+
+.slideinup-enter-active,
+.slideinup-leave-active {
+  opacity: .5;
+  position: absolute;
+  transform: translate(0, 0);
+  transition: all .35s .1s linear;
+}
+
+.slideinup-enter {
+  opacity: 0;
+  position: absolute;
+  transform: translate(0, -100%);
+}
+
+.slideinup-leave-active {
+  opacity: 0;
+  position: absolute;
+  transform: translate(0, 100%);
+}
+
+//dialog
+.dialog_header_w.el-dialog {
+  width: 650px;
+  .el-dialog__header {
+    border-bottom: 1px solid;
+    @include border_gray_3();
+    font-weight: bold;
+    font-size: 14px;
+  }
+  .dialog-footer {
+    margin-top: 20px;
+    text-align: center;
+  }
+}
+
+.dialog_header_b.el-dialog {
+  width: 500px;
+  .el-dialog__header {
+    @include bg_gray_6();
+    @include font_white();
+    font-weight: bold;
+    font-size: 14px;
+    .el-dialog__title {
+      @include font_white();
+    }
+  }
+  .dialog-footer {
+    margin-top: 20px;
+    text-align: center;
+  }
+}
+
+//消息提示框样式
+.el-message.crm_message {
+  padding: 0;
+  border: none;
+  height: 40px;
+  line-height: 40px;
+
+  .el-message__icon {
+    width: 40px;
+    height: 40px;
+    font-size: 24px;
+    line-height: 40px;
+    text-align: center;
+    color: #ffffff;
+  }
+
+  .el-message__content {
+    margin-right: 10px;
+    width: calc(100% - 40px);
+    text-align: center;
+  }
+}
+
+//成功
+.el-message.crm_message.crm_msg_suc {
+  .el-message__icon {
+    background-color: #45CE61;
+  }
+
+  .el-message__content {
+    color: #45CE61;
+  }
+}
+
+//失败
+.el-message.crm_message.crm_msg_err {
+  .el-message__icon {
+    background-color: #EB3F57;
+  }
+
+  .el-message__content {
+    color: #EB3F57;
+  }
+}
+
+//警告
+.el-message.crm_message.crm_msg_war {
+  .el-message__icon {
+    background-color: #EB3F57;
+  }
+
+  .el-message__content {
+    color: #EB3F57;
+  }
+}
+
+.el-table th {
+  background-color: #f5f5f5;
+  color: #333333;
+  font-weight: 700;
+}
+
+.el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #f5f5f5;
+}
+
+@media only screen and (max-width: 767px) {
+  .hidden-xs-only {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .hidden-sm-and-up {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .hidden-sm-only {
+    display: none !important
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .hidden-sm-and-down {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .hidden-md-and-up {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .hidden-md-only {
+    display: none !important
+  }
+}
+
+@media only screen and (max-width: 1199px) {
+  .hidden-md-and-down {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .hidden-lg-and-up {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: 1200px) and (max-width: 1919px) {
+  .hidden-lg-only {
+    display: none !important
+  }
+}
+
+@media only screen and (max-width: 1919px) {
+  .hidden-lg-and-down {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: 1920px) {
+  .hidden-xl-only {
+    display: none !important
+  }
+}
+
+.view {
+  padding: 10px;
+  border-radius: 8px;
+  background-color: #ffffff;
+  height: calc(100% - 20px);
+  position: relative;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+//选中时边框
+.el-input.is-active .el-input__inner,
+.el-input__inner:focus,
+.el-button:active,
+.el-range-editor.is-active,
+.el-range-editor.is-active:hover {
+  border-color: #DCDFE6!important;
+}
+
+//分页
+.crm_pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  .crm_page_total {
+    line-height: 32px;
+    span {
+      margin: 0 3px;
+      font-size: 14px;
+      color: #929292;
+    }
+  }
+}
+
+//tab显示
+.crm-chooseTab{
+  text-align: left;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #DCDFE6;
+  .chooseLang{
+    margin-top: 2px;
+    margin-right: 10px;
+    >span{
+      border: 1px solid #DCDFE6;
+      border-bottom: none;
+      padding: 0 8px;
+      min-width: 100px;
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      box-sizing: border-box;
+      text-align: center;
+      font-size: 14px;
+    }
+    span.active{
+      @include border_bottom_blue_1();
+      @include bg_main();
+      @include font_white();
+    }
+  }
+}
+
+//搜索块
+.crm_search {
+  .el-form {
+    display: flex;
+    .el-row {
+      flex: 1;
+      .el-col {
+        display: flex;
+        flex-wrap: wrap;
+        .el-date-editor {
+          top: 1px;
+        }
+      }
+    }
+    .crm_search_down {
+      width: 120px;
+      .el-input__inner{
+        background-color: #F5F5F5;
+      }
+    }
+    .crm_search_down_special {
+      width: 120px;
+      .el-input__inner{
+        background-color: #368FEC;
+        color: #ffffff;
+        border: transparent;
+      }
+    }
+    .el-form-item {
+      margin-bottom: 10px;
+      //margin-right: 15px;
+      .search_action_btn > span {
+        margin-left: 20px;
+        font-weight: bold;
+        white-space: nowrap;
+        padding: 6px 10px;
+        background-color: #368FEC;
+        color: #FFFFFF;
+        border-radius: 2px;
+        min-width: 90px;
+        display: inline-block;
+        line-height: 20px;
+        box-sizing: border-box;
+        i {
+          margin-right: 4px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+//表格操作块
+.crm_table_btn {
+  white-space: nowrap;
+  > span {
+    margin: 4px 8px;
+    font-size: 16px;
+    i {
+      font-weight: bold;
+    }
+  }
+}
+
+//底部按钮
+.dialog-footer{
+  .el-button{
+    min-width: 100px;
+  }
+}
+
+//大图展示关闭
+.el-image{
+  .el-icon-circle-close{
+    @include font_white();
+  }
+}
+
+// 消息提示框
+.crm_message_box.el-message-box {
+  width: 480px;
+  height: 200px;
+  text-align: center;
+  box-shadow: 0 6px 20px 0 rgba(201, 193, 193, .5);
+  border-radius: 4px;
+  .el-message-box__header {
+    border-bottom: 1px solid rgba(226, 226, 226, 1);
+    .el-message-box__title {
+      line-height: 20px;
+      color: rgba(0, 0, 0, 1);
+      font-size: 16px;
+    }
+    .el-message-box__headerbtn {
+      display: none;
+    }
+  }
+  .el-message-box__content {
+    padding-top: 30px;
+    padding-bottom: 30px;
+    font-size: 18px;
+    color: rgba(102, 102, 102, 1);
+  }
+  .el-message-box__btns {
+    margin-bottom: 10px;
+    text-align: center;
+    .el-button {
+      width: 100px;
+      height: 36px;
+      font-size: 14px;
+    }
+  }
+}
+
+//遮罩
+.crm_verified_info_mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(43, 48, 67, 0.65);
+  z-index: 89;
+}
+//折叠
+.crm_collapse_info.el-collapse{
+  border: none;
+  .el-collapse-item__header, .el-collapse-item__wrap{
+    border: none;
+  }
+  .el-collapse-item__header{
+    background: #F5F5F5;
+    padding: 0 20px;
+    height: 40px;
+    line-height: 40px;
+    color: #2B3043;
+    font-weight: bold;
+    i{
+      color: #2B3043;
+      font-weight: bold;
+    }
+  }
+  .el-collapse-item__wrap{
+    padding: 0 20px;
+  }
+  .el-collapse-item__content{
+    padding-bottom: 5px;
+    .el-form-item{
+      margin-bottom: 0;
+      .el-form-item__content{
+        text-align: left;
+      }
+    }
+  }
+}
+
+//开关
+.crm_switch .el-switch__label {
+  position: absolute;
+  display: none;
+  max-width: 25px;
+  overflow: hidden;
+  color: #FFFFFF!important;
+}
+.crm_switch.crm_switch_width .el-switch__label {
+  position: absolute;
+  display: none;
+  max-width: 50px;
+  overflow: hidden;
+  color: #FFFFFF!important;
+}
+/*打开时文字位置设置*/
+.crm_switch .el-switch__label--right {
+  z-index: 1;
+  left: -3px;
+}
+/*关闭时文字位置设置*/
+.crm_switch .el-switch__label--left {
+  z-index: 1;
+  right: 0;
+}
+/*显示文字*/
+.crm_switch .el-switch__label.is-active {
+  display: block;
+}
+.crm_switch.el-switch .el-switch__core {
+  width: 50px !important;
+  overflow: hidden;
+}
+.crm_switch.crm_switch_width.el-switch .el-switch__core {
+  width: 75px !important;
+  overflow: hidden;
+}
+.crm_switch.el-switch.is-checked .el-switch__core::after{
+  z-index: 2;
+}
+
+//状态颜色
+.crm_state_blue {
+  text-align: center;
+  background-color: #368FEC;
+}
+.crm_state_green {
+  text-align: center;
+  background-color: #87D068;
+}
+.crm_state_gray {
+  text-align: center;
+  background-color: #A1A1A1;
+}
+.crm_state_red {
+  text-align: center;
+  background-color: #EB3F57;
+}
+.crm_state_yellow {
+  text-align: center;
+  background-color: rgb(231, 211, 31);
+}
+.crm_state_orange {
+  text-align: center;
+  background-color: #FF9800;
+}
+.crm_state_violet {
+  text-align: center;
+  background-color: #a492be;
+}
+
+//表格颜色
+.el-table th.is-leaf {
+  background-color: #F2F2F2;
+}
+
+//label样式
+#TradingDetailedInfo .el-form-item__label{
+  border-radius: 2px;
+  @include bg_gray_7();
+  font-weight: bold;
+  text-align: center!important;
+  min-height: 40px!important;
+  box-sizing: border-box;
+}
+#TradingDetailedInfo .el-form-item__content{
+  min-height: 40px!important;
+  line-height: 1.5;
+  box-sizing: border-box;
+  border: 1px solid;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  @include border_gray_4();
+  @include bg_white();
+  text-align: center!important;
+  .el-input__inner,.el-input{
+    height: 34px;
+    border: none;
+    text-align: center;
+  }
+}
+#TradingDetailedInfo .el-form-item{
+  margin-bottom: 20px!important;
+}
+
+
+//input前置后置背景色
+.el-input-group__append, .el-input-group__prepend{
+  background-color: #F2F2F2!important;
+}
+
+//富文本层级
+.tox-silver-sink{
+  z-index: 9999!important;
+}
+//表格加载
+.el-loading-mask {
+  .el-icon-loading{
+    font-size: 28px;
+  }
+}
+
+//
+.el-popper.el-dropdown-menu{
+  width: max-content;
+}
+
+.el-popper.el-cascader__dropdown{
+  max-width: 1200px;
+  width: auto;
+  .el-cascader-panel{
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .el-cascader-menu,.el-cascader-menu__wrap{
+    width: 300px;
+    height: 300px;
+  }
+}
+//表头英文时按单词换行
+.el-table thead th > .cell{
+  word-break: break-word!important;
+}
+
+
+
+//新增弹出样式
+#TradingDetailedInfoAdd.InfoBox {
+  width: 450px;
+  height: 100%;
+  padding: 15px 0;
+  border-radius: 2px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  box-shadow: 0px 3px 5px 0px rgba(49, 49, 49, 0.35);
+  position: fixed;
+  background-color: #FFFFFF;
+  z-index: 100;
+  overflow: hidden;
+  overflow-y: auto;
+  top: 0;
+  right: -455px;
+  -webkit-transition: all 0.6s;
+  -moz-transition: all 0.6s;
+  -o-transition: all 0.6s;
+  transition: all 0.6s;
+
+  .header {
+    text-align: left;
+    height: 25px;
+    line-height: 25px;
+    margin: 0 20px 10px;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      font-weight: bold;
+    }
+    i.el-icon-close {
+      text-align: right !important;
+      font-weight: bold;
+      margin-right: 7px;
+    }
+  }
+  .btn {
+    display: inline-block;
+    padding: 10px;
+    background-color: #368FEC;
+    color: #FFFFFF;
+    border-radius: 2px;
+    text-align: center;
+    min-width: 120px;
+    margin: 25px 0;
+  }
+  .deleteBtn{
+    display: inline-block;
+    min-width: 100px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    background-color: #EB3F57;
+    color: #FFFFFF;
+  }
+  .avatar-uploader{
+    display: inline-block;
+    .updateBtn{
+      display: inline-block;
+      text-align: left;
+      i{
+        font-weight: bold;
+        font-size: 20px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .channelBanks{
+    padding-top: 10px;
+    border-bottom: 1px solid #DCDFE6;
+  }
+  .channel{
+    text-align: left!important;
+    .btn {
+      display: inline;
+      padding: 10px;
+      background-color: #368FEC;
+      color: #FFFFFF;
+      border-radius: 2px;
+      text-align: center;
+      min-width: 120px;
+      margin: 25px 0;
+    }
+  }
+  .channel-tit{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 40px;
+    background-color: #F2F2F2;
+    padding: 0 15px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    .add{
+      border: 1px dashed #368FEC;
+      color: #368FEC;
+      line-height: 20px;
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      font-weight: bold;
+      i{
+        font-weight: bold;
+        font-size: 12px;
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 4px;
+    i{
+      margin-left: 4px;
+      /*font-weight: bold;*/
+    }
+  }
+
+  .dialog_header_w{
+    width: 850px!important;
+    .code{
+      padding: 6px 12px;
+      background-color: #368FEC;
+      color: #FFFFFF;
+      border-radius: 2px;
+      margin-left: 10px;
+    }
+    .chooseLang{
+      >span{
+        border: 1px solid #DCDFE6;
+        padding: 0 8px;
+        min-width: 100px;
+        display: inline-block;
+        height: 40px;
+        line-height: 40px;
+        box-sizing: border-box;
+        text-align: center;
+      }
+      span.active{
+        @include border_red_1();
+        @include font_main();
+      }
+    }
+  }
+
+  .el-form {
+    border-top: 1px solid #E4E4E4;
+    padding: 10px 0;
+    text-align: left;
+    position: relative;
+    .el-form-item {
+      margin-bottom: 20px;
+      padding: 0 20px;
+    }
+    .authorityBox.el-form-item .el-form-item__content{
+      display: contents;
+    }
+  }
+  .el-select {
+    width: 100%;
+  }
+  .el-date-editor.el-input {
+    width: 100%;
+  }
+  .el-upload {
+    width: 100%;
+  }
+  .channel{
+    .el-input__inner {
+      text-align: left;
+    }
+  }
+  .online-editing.el-form-item{
+    .el-form-item__content-item{
+      border: none!important;
+    }
+  }
+}
+
+#TradingDetailedInfoAdd.InfoBox.active {
+  right: 0;
+}
+
+// 统一 select 和 input 的宽度
+.el-select,
+.el-input,
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+  width: 100%;
+}
+
+.el-select .el-input {
+  width: 100%;
+}
+
+.el-input__inner {
+  width: 100%;
+}

src/styles/default.scss

@@ -0,0 +1,124 @@
+/* component style */
+.vue-slider-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* rail style */
+.vue-slider-rail {
+  background-color: #ccc;
+  border-radius: 15px;
+}
+
+/* process style */
+.vue-slider-process {
+  background-color: #3498db;
+  border-radius: 15px;
+}
+
+/* mark style */
+.vue-slider-mark {
+  z-index: 4;
+}
+.vue-slider-mark:first-child .vue-slider-mark-step, .vue-slider-mark:last-child .vue-slider-mark-step {
+  display: none;
+}
+.vue-slider-mark-step {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.16);
+}
+.vue-slider-mark-label {
+  font-size: 14px;
+  white-space: nowrap;
+}
+/* dot style */
+.vue-slider-dot-handle {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #fff;
+  box-sizing: border-box;
+  box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
+}
+.vue-slider-dot-handle-focus {
+  box-shadow: 0px 0px 1px 2px rgba(52, 152, 219, 0.36);
+}
+
+.vue-slider-dot-handle-disabled {
+  cursor: not-allowed;
+  background-color: #ccc;
+}
+
+.vue-slider-dot-tooltip-inner {
+  font-size: 14px;
+  white-space: nowrap;
+  padding: 2px 5px;
+  min-width: 20px;
+  text-align: center;
+  color: #fff;
+  border-radius: 5px;
+  border-color: #3498db;
+  background-color: #3498db;
+  box-sizing: content-box;
+}
+.vue-slider-dot-tooltip-inner::after {
+  content: "";
+  position: absolute;
+}
+.vue-slider-dot-tooltip-inner-top::after {
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  height: 0;
+  width: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px;
+  border-top-color: inherit;
+}
+.vue-slider-dot-tooltip-inner-bottom::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  height: 0;
+  width: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px;
+  border-bottom-color: inherit;
+}
+.vue-slider-dot-tooltip-inner-left::after {
+  left: 100%;
+  top: 50%;
+  transform: translate(0, -50%);
+  height: 0;
+  width: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px;
+  border-left-color: inherit;
+}
+.vue-slider-dot-tooltip-inner-right::after {
+  right: 100%;
+  top: 50%;
+  transform: translate(0, -50%);
+  height: 0;
+  width: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px;
+  border-right-color: inherit;
+}
+
+.vue-slider-dot-tooltip-wrapper {
+  opacity: 0;
+  transition: all 0.3s;
+}
+.vue-slider-dot-tooltip-wrapper-show {
+  opacity: 1;
+}
+
+/*# sourceMappingURL=default.css.map */

src/styles/index.scss

@@ -1,5 +1,8 @@
 @import './variables.scss';
+@import './color.scss';
 @import './sidebar.scss';
 @import './transition.scss';
 @import './common.scss';
+@import './cwg_common.scss';
+@import './default.scss';
 @import './element.scss';