feat: 下拉框

src/sites/assets/styles/variables.scss

@@ -10,11 +10,14 @@ $doc-default-primary-bg: linear-gradient(
 
 // clolr
 // 红色
-
+$theme-red: #fa2c19;
 $theme-red-word: #fff;
 $theme-red-border: #fff;
 $theme-red-input: #fff;
 $theme-red-actice: #fff;
+$theme-red-select-border: #f0f2f5;
+$theme-red-select-word: #666;
+$theme-red-select-bg: #fff;
 $theme-red-header-bg: url('../../assets/images/header-bg.png') no-repeat;
 $theme-red-footer-word1: #1a1a1a;
 $theme-red-footer-word2: #666;
@@ -29,6 +32,7 @@ $theme-white-border: #d8d8d8;
 $theme-white-actice: #fa2c19;
 $theme-white-select-border: #f0f2f5;
 $theme-white-select-word: #666;
+$theme-white-select-bg: #fff;
 $theme-white-box-border: #f5f5f5;
 $theme-white-footer-word1: #1a1a1a;
 $theme-white-footer-word2: #666;
@@ -42,7 +46,7 @@ $theme-black-input: #ccc;
 $theme-black-border: #d8d8d8;
 $theme-black-actice: #fff;
 $theme-black-select-bg: #797a7b;
-$theme-black-select-border: #797a7b;
+$theme-black-select-border: #636366;
 $theme-black-select-word: #fff;
 $theme-black-box-border: #6b5554;
 $theme-black-footer-word1: #fff;

src/sites/doc/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="doc-footer" :class="`doc-footer-${theme}`">
+  <div class="doc-footer" :class="`doc-footer-${data.theme}`">
     <div class="doc-footer-content">
       <div class="doc-footer-list">
         <h4 class="doc-footer-title">相关资源</h4>
@@ -21,14 +21,17 @@
         <div class="doc-footer-item">JDW智能构建平台</div>
         <div class="doc-footer-item">JDW智能构建平台</div>
       </div>
-      <div class="doc-footer-list">
+      <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-bd">
-          <div class="doc-footer-select-item">
-            热情红
-          </div>
-          <div class="doc-footer-select-item">
-            暗黑风
+        <div class="doc-footer-select-bd" v-show="data.isShowSelect">
+          <div
+            class="doc-footer-select-item"
+            v-for="(item, index) in data.themeList"
+            :key="index"
+            @click.stop="checkTheme(index)"
+            :class="{ active: data.activeIndex === index }"
+          >
+            {{ item.name }}
           </div>
         </div>
       </div>
@@ -43,9 +46,43 @@ export default defineComponent({
   setup() {
     const data = reactive({
       theme: 'black',
-      activeIndex: 0
+      themeList: [
+        {
+          name: '热情红'
+        },
+        {
+          name: '暗黑风'
+        },
+        {
+          name: '纯净白'
+        }
+      ],
+      activeIndex: 0,
+      isShowSelect: false
     });
-    return data;
+    const clickOut = () => {
+      //点击组件以外的地方，收起
+      document.addEventListener(
+        'click',
+        e => {
+          console.log('e.target', e.target);
+          // if (!this.$el.contains(e.target)){
+          //   data.isShowSelect = false;
+          // }
+        },
+        false
+      );
+    };
+    const checkTheme = (index: number) => {
+      data.isShowSelect = false;
+      data.activeIndex = index;
+      console.log('data.isShowSelect', data.isShowSelect);
+    };
+    return {
+      data,
+      clickOut,
+      checkTheme
+    };
   }
 });
 </script>
@@ -139,10 +176,12 @@ export default defineComponent({
         //   border-top: none;
         // }
         &:hover {
-          color: $theme-black-footer-hover;
+          // color: $theme-black-footer-hover;
           // border-color: $theme-black-footer-hover;
         }
         &.active {
+          border-color: $theme-black-footer-hover;
+          background-color: $theme-black-footer-hover;
         }
       }
     }

src/sites/doc/components/Header.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="doc-header" :style="{ background: themeColor === 'red' ? headerBg : themeColor }" :class="`doc-header-${theme}`">
+  <div class="doc-header" :style="{ background: themeColor === 'red' ? headerBg : themeColor }" :class="`doc-header-${data.theme}`">
     <div class="header-logo">
       <a class="logo-link" href="#">
-        <template v-if="theme === 'red'">
+        <template v-if="data.theme === 'red'">
           <img src="../../assets/images/logo-header-white.png" />
         </template>
         <template v-else>
@@ -22,10 +22,24 @@
           <li class="nav-item">示例</li>
           <li class="nav-item">资源</li>
           <li class="nav-item">
-            <select class="nutui-select">
-              <option value="1.x">1.x</option>
-              <option value="2.x">2.x</option>
-            </select>
+            <div
+              class="header-select-box"
+              @click.stop="data.isShowSelect = !data.isShowSelect"
+              :class="[data.isShowSelect == true ? 'select-up' : 'select-down']"
+            >
+              <div class="header-select-hd">{{ data.verson }}<i class=""></i></div>
+              <div class="header-select-bd" v-show="data.isShowSelect">
+                <div
+                  class="header-select-item"
+                  v-for="(item, index) in data.versonList"
+                  :key="index"
+                  @click.stop="checkTheme(item, index)"
+                  :class="{ active: data.activeIndex === index }"
+                >
+                  {{ item.name }}
+                </div>
+              </div>
+            </div>
           </li>
           <li class="nav-item">
             <a class="user-link" href="#"> </a>
@@ -41,11 +55,33 @@ export default defineComponent({
   name: 'doc-header',
   setup() {
     const data = reactive({
-      theme: 'red',
-      themeColor: 'red',
-      headerBg: 'url(' + require('../../assets/images/header-bg.png') + ')'
+      theme: 'black',
+      themeColor: 'black',
+      headerBg: 'url(' + require('../../assets/images/header-bg.png') + ')',
+      versonList: [
+        {
+          name: '1.x'
+        },
+        {
+          name: '2.x'
+        },
+        {
+          name: '3.x'
+        }
+      ],
+      verson: '3.x',
+      activeIndex: 0,
+      isShowSelect: false
     });
-    return data;
+    const checkTheme = (item: any, index: number) => {
+      data.isShowSelect = false;
+      data.activeIndex = index;
+      data.verson = item.name;
+    };
+    return {
+      data,
+      checkTheme
+    };
   }
 });
 </script>
@@ -126,7 +162,7 @@ export default defineComponent({
         line-height: 63px;
         text-align: center;
         cursor: pointer;
-        overflow: hidden;
+        // overflow: hidden;
         &.nav-item-actie {
           font-weight: bold;
           &:after {
@@ -144,19 +180,6 @@ export default defineComponent({
         &:last-of-type {
           margin-right: 0;
         }
-        .nutui-select {
-          min-width: 77px;
-          height: 28px;
-          padding: 0 15px;
-          font-size: 14px;
-          color: $theme-red-word;
-          background: url('../../assets/images/icon-select-white-down.png') no-repeat;
-          background-position: right 15px top 12px;
-          background-size: 8px 5px;
-          border-radius: 14px;
-          outline: none;
-          appearance: none;
-        }
       }
       .user-link {
         display: inline-block;
@@ -169,6 +192,44 @@ export default defineComponent({
     }
   }
 }
+.header-select {
+  &-box {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  &-hd {
+    min-width: 77px;
+    height: 28px;
+    padding: 0 30px 0 15px;
+    line-height: 26px;
+    font-size: 14px;
+    color: $theme-red-word;
+    background-position: right 15px top 12px;
+    background-size: 8px 5px;
+    background-repeat: no-repeat;
+    border-radius: 14px;
+  }
+  &-bd {
+    position: absolute;
+    top: 30px;
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  &-item {
+    width: 77px;
+    height: 28px;
+    padding: 0 12px;
+    line-height: 26px;
+    font-size: 14px;
+    border-width: 0px 1px 1px;
+    border-style: solid;
+    cursor: pointer;
+    &:first-of-type {
+      border-top-width: 1px;
+    }
+  }
+}
 // 颜色
 .doc-header {
   // 红色
@@ -211,6 +272,34 @@ export default defineComponent({
         }
       }
     }
+    .header-select {
+      &-box {
+        &.select-down {
+          .header-select-hd {
+            background-image: url('../../assets/images/icon-select-white-down.png');
+          }
+        }
+        &.select-up {
+          .header-select-hd {
+            background-image: url('../../assets/images/icon-select-white-up.png');
+          }
+        }
+      }
+      &-hd {
+        color: $theme-red-word;
+        border: 1px solid $theme-white-select-border;
+      }
+      &-bd {
+        color: $theme-white-select-word;
+      }
+      &-item {
+        border-color: $theme-red-select-border;
+        background-color: $theme-red-select-bg;
+        &:hover {
+          color: $theme-red;
+        }
+      }
+    }
   }
   // 白色
   &-white {
@@ -255,6 +344,34 @@ export default defineComponent({
         }
       }
     }
+    .header-select {
+      &-box {
+        &.select-down {
+          .header-select-hd {
+            background-image: url('../../assets/images/icon-select-gray-down.png');
+          }
+        }
+        &.select-up {
+          .header-select-hd {
+            background-image: url('../../assets/images/icon-select-gray-up.png');
+          }
+        }
+      }
+      &-hd {
+        color: $theme-white-select-word;
+        border: 1px solid $theme-white-select-border;
+      }
+      &-bd {
+        color: $theme-white-select-word;
+      }
+      &-item {
+        border-color: $theme-white-select-border;
+        background-color: $theme-white-select-bg;
+        &:hover {
+          color: $theme-white-actice;
+        }
+      }
+    }
   }
   // 黑色
   &-black {
@@ -298,6 +415,35 @@ export default defineComponent({
         }
       }
     }
+    .header-select {
+      &-box {
+        &.select-down {
+          .header-select-hd {
+            background-image: url('../../assets/images/icon-select-white-down.png');
+          }
+        }
+        &.select-up {
+          .header-select-hd {
+            background-image: url('../../assets/images/icon-select-white-up.png');
+          }
+        }
+      }
+      &-hd {
+        color: $theme-black-select-word;
+        background-color: $theme-black-select-bg;
+        border: 1px solid $theme-black-select-bg;
+      }
+      &-bd {
+        color: $theme-black-select-word;
+      }
+      &-item {
+        border-color: $theme-black-select-border;
+        background-color: $theme-black-select-bg;
+        &:hover {
+          color: $theme-black-actice;
+        }
+      }
+    }
   }
 }
 </style>