feat: 优化

src/packages/price/demo.vue

@@ -19,9 +19,7 @@
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('price');
 export default createDemo({
-  props: {
-    text: String
-  }
+  props: {}
 });
 </script>
 

src/packages/price/doc.md

@@ -15,34 +15,31 @@ app.use(Price);
 
 ```
 
+## 代码示例
+
 ### 基本用法
 
-:::demo
-``` javascript
+``` html
 <nut-price 
     :price="1010" 
     :needSymbol="false" 
     :thousands="true"
 />
 ```
-:::
 
 ### 无人民币符号，有千位分隔
 
-:::demo
-``` javascript
+``` html
 <nut-price  
     :price="10010.01" 
     :needSymbol="true" 
     :thousands="false"
 />
 ```
-:::
 
 ### 带人民币符号，有千位分隔，保留小数点后三位
 
-:::demo
-``` javascript
+``` html
 <nut-price  
     :price="15213.122" 
     :decimalDigits="3" 
@@ -50,11 +47,10 @@ app.use(Price);
     :thousands="true"
 />
 ```
-:::
 
 |字段|说明|类型|默认值|
 |--|--|--|--|
 |price|价格数量|Number|0|
-|needSymbol|是否需要加上人民币符号|Boolean|true|
-|decimalDigits|小数位位数|Number|2|
+|need-symbol|是否需要加上人民币符号|Boolean|true|
+|decimal-digits|小数位位数|Number|2|
 |thousands|是否按照千分号形式显示|Boolean|false|

src/sites/assets/styles/variables.scss

@@ -25,7 +25,9 @@ $theme-red-footer-word3: #1d1d21;
 $theme-red-footer-word4: #808080;
 $theme-red-footer-bg: #fff;
 $theme-red-footer-border: #eaf0fb;
+$theme-red-gradient: linear-gradient(135deg, rgba(250, 44, 25, 1) 0%, rgba(250, 63, 25, 1) 45%, rgba(250, 89, 25, 1) 83%, rgba(250, 100, 25, 1) 100%);
 // 白色
+$theme-white: #fff;
 $theme-white-word: #1a1a1a;
 $theme-white-input: #ccc;
 $theme-white-border: #d8d8d8;
@@ -38,15 +40,21 @@ $theme-white-footer-word1: #1a1a1a;
 $theme-white-footer-word2: #666;
 $theme-white-footer-word3: #1d1d21;
 $theme-white-footer-word4: #808080;
+$theme-white-footer-hover: #fa2c19;
 $theme-white-footer-bg: #fff;
 $theme-white-footer-border: #eaf0fb;
+$theme-white-theme-border: #f5f6f7;
+$theme-white-circle: #fff;
+$theme-white-circle-border: #e5e5e5;
+
 // 黑色
 $theme-black-word: #ccc;
 $theme-black-input: #ccc;
 $theme-black-border: #d8d8d8;
 $theme-black-actice: #fff;
-$theme-black-select-bg: #797a7b;
-$theme-black-select-border: #636366;
+$theme-black-select-bg: #1d1d1d;
+$theme-black-select-border: #c1c1c3;
+$theme-black-select-hover: #797a7b;
 $theme-black-select-word: #fff;
 $theme-black-box-border: #6b5554;
 $theme-black-footer-word1: #fff;
@@ -56,6 +64,8 @@ $theme-black-footer-word4: #808080;
 $theme-black-footer-hover: #fa2c19;
 $theme-black-footer-bg: #1d1d21;
 $theme-black-footer-border: transparent;
+$theme-black-theme-border: #666;
+$theme-black-circle: #1a1a1a;
 // header
 $doc-default-header-color: $white;
 $doc-header-height: 64px;

src/sites/doc/components/Footer.vue

@@ -22,7 +22,7 @@
         <div class="doc-footer-item">JDW智能构建平台</div>
       </div>
       <div class="doc-footer-list" @click.stop="data.isShowSelect = !data.isShowSelect">
-        <div class="doc-footer-select-hd"><i class=""></i>主题换肤</div>
+        <div class="doc-footer-select-hd"><i class="icon-color"></i>主题换肤</div>
         <div class="doc-footer-select-bd" v-show="data.isShowSelect">
           <div
             class="doc-footer-select-item"
@@ -31,7 +31,7 @@
             @click.stop="checkTheme(index)"
             :class="{ active: data.activeIndex === index }"
           >
-            {{ item.name }}
+            <i :class="`circle-${item.color}`"></i>{{ item.name }}
           </div>
         </div>
       </div>
@@ -45,16 +45,19 @@ export default defineComponent({
   name: 'doc-footer',
   setup() {
     const data = reactive({
-      theme: 'black',
+      theme: 'red',
       themeList: [
         {
-          name: '热情红'
+          name: '热情红',
+          color: 'red'
         },
         {
-          name: '暗黑风'
+          name: '暗黑风',
+          color: 'black'
         },
         {
-          name: '纯净白'
+          name: '纯净白',
+          color: 'white'
         }
       ],
       activeIndex: 0,
@@ -115,33 +118,52 @@ export default defineComponent({
       font-size: 12px;
     }
     &-select-hd {
-      width: 110px;
+      width: 92px;
       height: 32px;
-      padding: 0 12px;
-      line-height: 30px;
-      font-size: 14px;
+      padding: 0 10px;
+      line-height: 32px;
+      font-size: 12px;
+      text-align: left;
       border-width: 1px;
       border-style: solid;
       border-radius: 2px;
       cursor: pointer;
-      &:hover {
-      }
     }
     &-select-bd {
       position: absolute;
       border-radius: 2px;
+      text-align: left;
     }
     &-select-item {
-      width: 110px;
+      width: 92px;
       height: 32px;
-      padding: 0 12px;
-      line-height: 30px;
-      font-size: 14px;
+      padding: 0 10px;
+      line-height: 32px;
+      font-size: 12px;
       border-width: 0px 1px 1px;
       border-style: solid;
       border-radius: 2px;
       cursor: pointer;
     }
+    .icon-color {
+      display: inline-block;
+      width: 12px;
+      height: 10px;
+      margin-right: 10px;
+      background: url('../../assets/images/icon-color.png') no-repeat center/100%;
+    }
+    .circle-red,
+    .circle-black,
+    .circle-white {
+      position: relative;
+      top: -1px;
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      margin-right: 10px;
+      border-radius: 50%;
+      vertical-align: middle;
+    }
   }
 }
 // 颜色
@@ -162,26 +184,103 @@ export default defineComponent({
       }
       &-select-hd {
         color: $theme-black-footer-word2;
-        background: rgba(29, 29, 33, 1);
-        border-color: $theme-black-border;
+        // background: rgba(29, 29, 33, 1);
+        border-color: $theme-black-theme-border;
         &:hover {
-          border-color: $theme-black-footer-hover;
+          color: $theme-black-footer-hover;
         }
       }
       &-select-item {
         color: $theme-black-footer-word2;
-        background: rgba(29, 29, 33, 1);
-        border-color: $theme-black-border;
-        // &:first-of-type {
-        //   border-top: none;
-        // }
+        // background: rgba(29, 29, 33, 1);
+        border-color: $theme-black-theme-border;
+        .circle-red {
+          background: $theme-red-gradient;
+        }
+        .circle-black {
+          background: $theme-black-circle;
+          border: 1px solid $theme-black-theme-border;
+        }
+        .circle-white {
+          background: $theme-white-circle;
+        }
         &:hover {
-          // color: $theme-black-footer-hover;
-          // border-color: $theme-black-footer-hover;
+          background-color: $theme-black-theme-border;
+          .circle-black {
+            border-color: $theme-black-circle;
+          }
         }
         &.active {
-          border-color: $theme-black-footer-hover;
           background-color: $theme-black-footer-hover;
+          border-color: $theme-black-footer-hover;
+          .circle-red {
+            border: 1px solid $theme-red-border;
+          }
+          .circle-black {
+            border-color: $theme-black-footer-bg;
+          }
+        }
+      }
+    }
+  }
+  // 白色、红色
+  &-white,
+  &-red {
+    background: $theme-white-footer-bg;
+    border-top: 1px solid $theme-white-footer-border;
+    .doc-footer {
+      &-title {
+        color: $theme-white-footer-word1;
+      }
+      &-item {
+        color: $theme-white-footer-word2;
+      }
+      &-desc {
+        color: $theme-white-footer-word4;
+      }
+      &-select-hd {
+        color: $theme-white-footer-word2;
+        // background: rgba(29, 29, 33, 1);
+        border-color: $theme-white-theme-border;
+        &:hover {
+          color: $theme-white-footer-hover;
+        }
+      }
+      &-select-item {
+        color: $theme-white-footer-word2;
+        // background: rgba(29, 29, 33, 1);
+        border-color: $theme-white-theme-border;
+        .circle-red {
+          background: $theme-red-gradient;
+        }
+        .circle-black {
+          background: $theme-black-circle;
+          border: 1px solid $theme-black-circle;
+        }
+        .circle-white {
+          background: $theme-white-circle;
+          border: 1px solid $theme-white-circle-border;
+        }
+        &:hover {
+          color: $theme-white-footer-word3;
+          background-color: $theme-white-theme-border;
+          .circle-black {
+            border-color: $theme-black-circle;
+          }
+        }
+        &.active {
+          color: $theme-white;
+          background-color: $theme-white-footer-hover;
+          border-color: $theme-white-footer-hover;
+          .circle-red {
+            border: 1px solid $theme-red-border;
+          }
+          .circle-black {
+            border-color: $theme-black-circle;
+          }
+          .circle-white {
+            border-color: $theme-white-circle;
+          }
         }
       }
     }

src/sites/doc/components/Header.vue

@@ -261,10 +261,6 @@ export default defineComponent({
                 background-position: 0 0;
               }
             }
-            .nutui-select {
-              color: $theme-red-word;
-              border: 1px solid $theme-red-border;
-            }
           }
           .user-link {
             background-position: 0 0;
@@ -331,12 +327,6 @@ export default defineComponent({
                 background-position: 0 -13px;
               }
             }
-            .nutui-select {
-              background-image: url('../../assets/images/icon-select-gray-down.png');
-              background-position: right 15px top 12px;
-              color: $theme-white-select-word;
-              border: 1px solid $theme-white-select-border;
-            }
           }
           .user-link {
             background-position: 0 -26px;
@@ -403,11 +393,6 @@ export default defineComponent({
                 background-position: 0 -13px;
               }
             }
-            .nutui-select {
-              color: $theme-black-select-word;
-              background-color: $theme-black-select-bg;
-              border: 1px solid $theme-black-select-border;
-            }
           }
           .user-link {
             background-position: 0 -52px;
@@ -431,16 +416,17 @@ export default defineComponent({
       &-hd {
         color: $theme-black-select-word;
         background-color: $theme-black-select-bg;
-        border: 1px solid $theme-black-select-bg;
+        border: 1px solid $theme-black-select-border;
       }
       &-bd {
         color: $theme-black-select-word;
       }
       &-item {
-        border-color: $theme-black-select-border;
         background-color: $theme-black-select-bg;
+        border-color: $theme-black-select-bg;
         &:hover {
-          color: $theme-black-actice;
+          background-color: $theme-black-select-hover;
+          border-color: $theme-black-select-hover;
         }
       }
     }