pref:修改皮肤设置取色器

base-manager-ui/admin/package.json

@@ -28,6 +28,7 @@
     "date-fns": "^2.14.0",
     "echarts": "^5.2.2",
     "element-china-area-data": "^5.0.2",
+    "element-ui": "^2.15.13",
     "enquire.js": "^2.1.6",
     "file-saver": "^2.0.5",
     "highlight.js": "^10.2.1",

base-manager-ui/admin/src/main.js

@@ -20,7 +20,10 @@ import VueQuillEditor from "vue-quill-editor";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
-
+// 引入element 取色器组件
+import { ColorPicker } from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+Vue.use(ColorPicker);
 import { VueJsonp } from "vue-jsonp";
 Vue.use(VueJsonp);
 // 公共样式

base-manager-ui/admin/src/pages/basicset/surface/components/RightPreview.vue

@@ -160,12 +160,7 @@ export default {
     display: flex;
     flex-direction: column;
     border-bottom: 1px solid #ccc;
-    overflow-y: scroll;
-    scrollbar-width: none; /* firefox */
-    -ms-overflow-style: none; /* IE 10+ */
-    &::-webkit-scrollbar {
-      display: none;
-    }
+    overflow-y: auto;
     .preview-item {
       margin-bottom: 6px;
       height: 120px;

base-manager-ui/admin/src/pages/basicset/surface/modal/AddSurface.vue

@@ -135,6 +135,7 @@
                     <span class="color-show">{{
                       v.fieldValue ? v.fieldValue : "--"
                     }}</span>
+
                     <a-button
                       type="primary"
                       :class="{ 'select-color-btn': v.fieldValue }"
@@ -145,6 +146,10 @@
                         class="color-ipt"
                         v-model="v.fieldValue"
                       />
+                      <el-color-picker
+                        class="color-ipt"
+                        v-model="v.fieldValue"
+                      ></el-color-picker>
                     </a-button>
                   </a-form-model-item>
                 </a-col>
@@ -536,6 +541,10 @@ export default {
       position: absolute;
       left: 0px;
       top: 0px;
+      /deep/.el-color-picker__trigger {
+        width: 100%;
+        height: 100%;
+      }
     }
     .btn-box {
       height: 50px;

base-manager-ui/admin/yarn.lock

@@ -2502,6 +2502,13 @@ async-validator@^3.0.3:
   resolved "https://registry.npm.taobao.org/async-validator/download/async-validator-3.3.0.tgz"
   integrity sha1-HZIZO75g1tbIskZpLHAF6e0UqO4=
 
+async-validator@~1.8.1:
+  version "1.8.5"
+  resolved "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  integrity sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==
+  dependencies:
+    babel-runtime "6.x"
+
 async@^2.6.1, async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.npm.taobao.org/async/download/async-2.6.3.tgz"
@@ -2573,7 +2580,7 @@ babel-eslint@^10.1.0:
     eslint-visitor-keys "^1.0.0"
     resolve "^1.12.0"
 
-babel-helper-vue-jsx-merge-props@^2.0.3:
+babel-helper-vue-jsx-merge-props@^2.0.0, babel-helper-vue-jsx-merge-props@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz"
   integrity sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY=
@@ -4302,7 +4309,7 @@ deep-is@~0.1.3:
   resolved "https://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
-deepmerge@^1.5.2:
+deepmerge@^1.2.0, deepmerge@^1.5.2:
   version "1.5.2"
   resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
@@ -4682,6 +4689,18 @@ element-china-area-data@^5.0.2:
     china-area-data "^5.0.1"
     lodash-es "^4.17.15"
 
+element-ui@^2.15.13:
+  version "2.15.13"
+  resolved "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.13.tgz#380f019ee7d15b181105587b41fd5914c308a143"
+  integrity sha512-LJoatEYX6WV74FqXBss8Xfho9fh9rjDSzrDrTyREdGb1h1R3uRvmLh5jqp2JU137aj4/BgqA3K06RQpQBX33Bg==
+  dependencies:
+    async-validator "~1.8.1"
+    babel-helper-vue-jsx-merge-props "^2.0.0"
+    deepmerge "^1.2.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.0"
+    throttle-debounce "^1.0.1"
+
 elliptic@^6.0.0, elliptic@^6.5.2:
   version "6.5.3"
   resolved "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz"
@@ -8194,6 +8213,11 @@ normalize-url@^6.0.1:
   resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz"
@@ -9709,7 +9733,7 @@ requires-port@^1.0.0:
   resolved "https://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
-resize-observer-polyfill@^1.5.1:
+resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz"
   integrity sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ=
@@ -10879,6 +10903,11 @@ thread-loader@^2.1.3:
     loader-utils "^1.1.0"
     neo-async "^2.6.0"
 
+throttle-debounce@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  integrity sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==
+
 throttle-debounce@^2.0.1:
   version "2.3.0"
   resolved "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz"