选择器样式修改

src/App.vue

@@ -44,6 +44,14 @@ const store = useStore()
   font-family: 'JingHuaLaoSong';
   src: url('@/assets/style/jing-hua-lao-song-ti.ttf');
 }
+@font-face {
+  font-family: 'SourceHanSansCN-Medium';
+  src: url('@/assets/style/SourceHanSansCN-Medium.otf');
+}
+@font-face {
+  font-family: 'SourceHanSerifCN-Heavy';
+  src: url('@/assets/style/SourceHanSerifCN-Heavy.otf');
+}
 // i {
 //   font-style: italic;
 // }

src/assets/style/my-reset.css

@@ -56,4 +56,66 @@ input {
 
 td {
   vertical-align: inherit;
-}
+}
+.el-popper {
+  /* padding: 10px !important; */
+}
+.el-popper.is-light {
+  border: none !important;
+  margin-top: -20px;
+  background: none !important;
+  /* width: 200px; */
+}
+.el-popper > .el-popper__arrow {
+  display: none !important;
+}
+.el-popper > .el-scrollbar{
+  overflow-y:hidden !important;
+}
+.el-cascader-node {
+  color: #fff7d9;
+  font-family: "SourceHanSerifCN-Heavy";
+  border-bottom: 1px solid rgba(255, 255, 255, 0.53);
+  font-size: 24px;
+  height: 48px;
+  text-align: center;
+  margin-bottom: 10px;
+}
+.el-cascader-node:nth-last-child(2) {
+  border-bottom: 1px solid rgba(255, 255, 255, 0) !important;
+}
+.el-cascader-node__label {
+  text-align: center !important;
+  margin-bottom: 8px !important;
+}
+.el-cascader-menu__list {
+  margin: 10px 20px  !important;
+}
+.el-cascader-node .isActive {
+  color: #ffe88b;
+}
+.el-cascader-node__prefix {
+  display: none !important;
+}
+.arrow-right {
+  display: none !important;
+}
+
+.el-cascader-panel {
+  --el-cascader-menu-selected-text-color: #ffe88b !important;
+  --el-cascader-menu-text-color: #fff7d9 !important;
+  --el-cascader-menu-font-size: 24px !important;
+  --el-cascader-menu-borde: none !important;
+  --el-cascader-node-background-hover: none !important;
+  --el-cascader-menu-border: none !important;
+}
+
+.el-cascader-menu:first-child {
+  background: url(@/assets/images/dropdown-menu.png) !important;
+  background-size: 100% 100% !important;
+}
+
+.el-cascader-menu:last-child {
+  background: url(@/assets/images/dropdown-menu2.png) !important;
+  background-size: 100% 100% !important;
+}

src/assets/style/reset.css

@@ -45,4 +45,5 @@ q:before, q:after {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
-}
+}
+

src/views/RelicList.vue

@@ -35,9 +35,7 @@
         @click="onSearch"
       />
     </div>
-    <div
-      class="the-list"
-    >
+    <div class="the-list">
       <div
         ref="listEl"
         class="content-wrap"
@@ -237,13 +235,15 @@ function onClickItem(idx) {
 
 <style lang="less" scoped>
 @page-height-design-px: 970;
-.relic-list{
+
+.relic-list {
   height: 100%;
   background-image: url(@/assets/images/relic-list-bg.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
-  >button.return{
+
+  >button.return {
     position: absolute;
     width: 58px;
     height: 58px;
@@ -254,6 +254,51 @@ function onClickItem(idx) {
     background-repeat: no-repeat;
     background-position: center center;
   }
+
+  ::v-deep {
+    .el-cascader {
+      position: absolute;
+      width: 200px;
+      height: 58px;
+      left: 160px;
+      top: 68px;
+
+      .el-input {
+        height: 100%;
+        background-image: url(@/assets/images/cascader-bg.png);
+        background-size: 100% 100%;
+        border: 0;
+
+        .el-input__wrapper {
+          background: none;
+          border: 0;
+          box-shadow: none;
+
+          .el-input__inner {
+            height: 100%;
+            font-size: 30px;
+            text-align: center;
+            font-family: 'SourceHanSerifCN-Heavy';
+            color: #6A3906;
+          }
+          .el-input__suffix {
+            color: #6A3906;
+          }
+
+        }
+        .icon-arrow-down {
+          font-size: 24px;
+          margin-top: 10px;
+        }
+
+      }
+    }
+    .el-popper .is-light {
+      background: red;
+    }
+
+  }
+
   // >menu{
   //   position: absolute;
   //   width: 524px;
@@ -308,7 +353,7 @@ function onClickItem(idx) {
   //     letter-spacing: 5px;
   //   }
   // }
-  >.search-ui{
+  >.search-ui {
     position: absolute;
     top: 65px;
     right: 27px;
@@ -318,7 +363,8 @@ function onClickItem(idx) {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
-    >input{
+
+    >input {
       position: absolute;
       left: 50px;
       top: 50%;
@@ -328,17 +374,19 @@ function onClickItem(idx) {
       font-size: 24px;
       font-family: Source Han Sans CN, Source Han Sans CN;
       font-weight: 400;
-      color: rgba(255,255,255,0.7);
+      color: rgba(255, 255, 255, 0.7);
       line-height: 28px;
-      &::placeholder{
+
+      &::placeholder {
         font-size: 24px;
         font-family: Source Han Sans CN, Source Han Sans CN;
         font-weight: 400;
-        color: rgba(255,255,255,0.3);
+        color: rgba(255, 255, 255, 0.3);
         line-height: 28px;
       }
     }
-    >button.search{
+
+    >button.search {
       position: absolute;
       width: 31px;
       height: 31px;
@@ -352,7 +400,8 @@ function onClickItem(idx) {
       background-position: center center;
     }
   }
-  >.the-list{
+
+  >.the-list {
     position: absolute;
     left: 0;
     top: 150px;
@@ -364,8 +413,12 @@ function onClickItem(idx) {
     background-position: left center;
     padding-left: calc(56 / @page-height-design-px * 100vh);
     box-sizing: border-box;
-    >.content-wrap{
-      &::-webkit-scrollbar { height: 0; }
+
+    >.content-wrap {
+      &::-webkit-scrollbar {
+        height: 0;
+      }
+
       box-sizing: border-box;
       height: 100%;
       width: 100%;
@@ -379,7 +432,8 @@ function onClickItem(idx) {
       background-position: left 44%;
       background-attachment: local;
       padding-top: calc(50 / @page-height-design-px * 100vh);
-      >.relic-item{
+
+      >.relic-item {
         flex: 0 0 auto;
         width: calc(290 / @page-height-design-px * 100vh);
         height: 80%;
@@ -390,14 +444,16 @@ function onClickItem(idx) {
         justify-content: center;
         align-items: center;
         cursor: pointer;
-        >img{
+
+        >img {
           flex: 0 0 auto;
           width: 100%;
           height: calc(150 / @page-height-design-px * 100vh);
           object-fit: contain;
           margin-bottom: calc(10 / @page-height-design-px * 100vh);
         }
-        >.name{
+
+        >.name {
           text-align: center;
           flex: 0 0 auto;
           height: 4em;
@@ -413,7 +469,8 @@ function onClickItem(idx) {
           overflow: hidden;
         }
       }
-      >.relic-item.hide{
+
+      >.relic-item.hide {
         display: none;
       }
     }