style:修改商品分类品类样式

linktools.vue

@@ -300,7 +300,7 @@ components: {
       <!-- 商品链接 -->
       <div class="goods-links-contian" v-if="goodsLinksVisible">
         <div class="links-tools-row">
-          <!-- 品类 -->
+          <!-- 品类 :always-open="true"-->
           <treeselect
             v-model="category"
             :options="categoryOptions"
@@ -2132,6 +2132,39 @@ export default {
         transform: rotate(360deg);
       }
     }
+
+
+    .vue-treeselect__menu  .vue-treeselect__option {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
+
+    .vue-treeselect__menu .vue-treeselect__option--selected {
+        background: #f0f7ff;
+        font-weight: 600;
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
+
+    .vue-treeselect__menu .vue-treeselect__option--selected:hover {
+        background: #f0f7ff;
+    }
+
+    .vue-treeselect__menu .vue-treeselect__option--highlight {
+        background: #f5f7fa;
+    }
+
+    .vue-treeselect__menu .vue-treeselect__label-container {
+      color: #606266;
+    }
+
+    .link-tools-contain .vue-treeselect__menu .vue-treeselect__option-arrow {
+      color: #c0c4cc;
+    }
+
+    .link-tools-contain .vue-treeselect__option .vue-treeselect--branch-nodes-disabled .vue-treeselect__option:hover .vue-treeselect__option-arrow, .link-tools-contain .vue-treeselect__option .vue-treeselect__option-arrow-container:hover .vue-treeselect__option-arrow {
+        color: #c0c4cc;
+    }
     /**
      * Transitions
      */
@@ -2203,11 +2236,12 @@ export default {
       transition-timing-function: ease-out-cubic;
     }
     .vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) .vue-treeselect__control:hover {
-      border-color: #cfcfcf;
+      border-color: #dcdfe6;
     }
     .vue-treeselect--focused:not(.vue-treeselect--open) .vue-treeselect__control {
-      border-color: #039BE5;
-      box-shadow: 0 0 0 3px rgba(3, 155, 229, 0.1);
+      border-color: #dcdfe6;
+      box-shadow: none;
+      /*box-shadow: 0 0 0 3px rgba(3, 155, 229, 0.1);*/
     }
     .vue-treeselect--disabled .vue-treeselect__control {
       background-color: #f9f9f9;
@@ -2445,7 +2479,7 @@ export default {
       color: #ccc;
     }
     .vue-treeselect:not(.vue-treeselect--disabled) .vue-treeselect__control-arrow-container:hover .vue-treeselect__control-arrow {
-      color: #616161;
+      color: #c0c4cc;
     }
     .vue-treeselect--disabled .vue-treeselect__control-arrow {
       opacity: 0.35;
@@ -2467,7 +2501,7 @@ export default {
       z-index: 999;
       overflow-x: hidden;
       overflow-y: auto;
-      border: 1px solid #cfcfcf;
+      border: 1px solid #dcdfe6;
       background: #fff;
       line-height: 180%;
       -webkit-overflow-scrolling: touch;
@@ -2477,8 +2511,9 @@ export default {
       border-bottom-right-radius: 5px;
       top: 100%;
       margin-top: -1px;
-      border-top-color: #f2f2f2;
-      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+      border-top-color: #dcdfe6;
+      -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
     }
     .vue-treeselect--open-above .vue-treeselect__menu {
       border-top-left-radius: 5px;
@@ -2549,14 +2584,14 @@ export default {
       width: 100%;
     }
     .vue-treeselect__option--highlight {
-      background: #F5F5F5;
+      background: #f5f7fa;
     }
     .vue-treeselect--single .vue-treeselect__option--selected {
-      background: #E3F2FD;
+      background: #f0f7ff;
       font-weight: 600;
     }
     .vue-treeselect--single .vue-treeselect__option--selected:hover {
-      background: #E3F2FD;
+      background: #f0f7ff;
     }
     .vue-treeselect__option--hide {
       display: none;
@@ -2583,7 +2618,7 @@ export default {
     }
     .vue-treeselect__option-arrow-container:hover .vue-treeselect__option-arrow,
     .vue-treeselect--branch-nodes-disabled .vue-treeselect__option:hover .vue-treeselect__option-arrow {
-      color: #616161;
+      color: #c0c4cc;
     }
     .vue-treeselect__option-arrow--rotated {
       transform: rotateZ(0);

linktoolspage.vue

@@ -1850,6 +1850,39 @@ export default {
         transform: rotate(360deg);
       }
     }
+
+
+    .vue-treeselect__menu  .vue-treeselect__option {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
+
+    .vue-treeselect__menu .vue-treeselect__option--selected {
+        background: #f0f7ff;
+        font-weight: 600;
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
+
+    .vue-treeselect__menu .vue-treeselect__option--selected:hover {
+        background: #f0f7ff;
+    }
+
+    .vue-treeselect__menu .vue-treeselect__option--highlight {
+        background: #f5f7fa;
+    }
+
+    .vue-treeselect__menu .vue-treeselect__label-container {
+      color: #606266;
+    }
+
+    .link-tools-contain .vue-treeselect__menu .vue-treeselect__option-arrow {
+      color: #c0c4cc;
+    }
+
+    .link-tools-contain .vue-treeselect__option .vue-treeselect--branch-nodes-disabled .vue-treeselect__option:hover .vue-treeselect__option-arrow, .link-tools-contain .vue-treeselect__option .vue-treeselect__option-arrow-container:hover .vue-treeselect__option-arrow {
+        color: #c0c4cc;
+    }
     /**
      * Transitions
      */
@@ -1921,11 +1954,12 @@ export default {
       transition-timing-function: ease-out-cubic;
     }
     .vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) .vue-treeselect__control:hover {
-      border-color: #cfcfcf;
+      border-color: #dcdfe6;
     }
     .vue-treeselect--focused:not(.vue-treeselect--open) .vue-treeselect__control {
-      border-color: #039BE5;
-      box-shadow: 0 0 0 3px rgba(3, 155, 229, 0.1);
+      border-color: #dcdfe6;
+      box-shadow: none;
+      /*box-shadow: 0 0 0 3px rgba(3, 155, 229, 0.1);*/
     }
     .vue-treeselect--disabled .vue-treeselect__control {
       background-color: #f9f9f9;
@@ -2160,10 +2194,10 @@ export default {
     .vue-treeselect__control-arrow {
       width: 9px;
       height: 9px;
-      color: #ccc;
+      color: #c0c4cc;
     }
     .vue-treeselect:not(.vue-treeselect--disabled) .vue-treeselect__control-arrow-container:hover .vue-treeselect__control-arrow {
-      color: #616161;
+      color: #c0c4cc;
     }
     .vue-treeselect--disabled .vue-treeselect__control-arrow {
       opacity: 0.35;
@@ -2185,7 +2219,7 @@ export default {
       z-index: 999;
       overflow-x: hidden;
       overflow-y: auto;
-      border: 1px solid #cfcfcf;
+      border: 1px solid #dcdfe6;
       background: #fff;
       line-height: 180%;
       -webkit-overflow-scrolling: touch;
@@ -2195,8 +2229,9 @@ export default {
       border-bottom-right-radius: 5px;
       top: 100%;
       margin-top: -1px;
-      border-top-color: #f2f2f2;
-      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+      border-top-color: #dcdfe6;
+      -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
     }
     .vue-treeselect--open-above .vue-treeselect__menu {
       border-top-left-radius: 5px;
@@ -2267,14 +2302,14 @@ export default {
       width: 100%;
     }
     .vue-treeselect__option--highlight {
-      background: #F5F5F5;
+      background: #f5f7fa;
     }
     .vue-treeselect--single .vue-treeselect__option--selected {
-      background: #E3F2FD;
+      background: #f0f7ff;
       font-weight: 600;
     }
     .vue-treeselect--single .vue-treeselect__option--selected:hover {
-      background: #E3F2FD;
+      background: #f0f7ff;
     }
     .vue-treeselect__option--hide {
       display: none;
@@ -2301,7 +2336,7 @@ export default {
     }
     .vue-treeselect__option-arrow-container:hover .vue-treeselect__option-arrow,
     .vue-treeselect--branch-nodes-disabled .vue-treeselect__option:hover .vue-treeselect__option-arrow {
-      color: #616161;
+      color: #c0c4cc;
     }
     .vue-treeselect__option-arrow--rotated {
       transform: rotateZ(0);