排行榜

src/views/super/Ranking/RankBatchList.vue

@@ -28,7 +28,7 @@
                             :label="type_select[selectedType]">
 
                         <template slot="header">
-                            <el-select class="custom-select" v-model="selectedType" @change="changeRankType">
+                            <el-select class="custom-select" popper-class="custom-select-dropdown" v-model="selectedType" @change="changeRankType">
                                 <el-option v-for="(item,type) in type_select"
                                            :key="type"
                                            :label="item"
@@ -509,133 +509,4 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.growth-up {
-  padding: 0 5px;
-  color: #22C55E;
-}
-
-.growth-down {
-  padding: 0 5px;
-  color: #EF4444;
-}
-
-.growth-text {
-  color: #9CA3AF;
-  padding-left: 5px;
-}
-
-.edit_icon {
-  padding: 0 5px;
-  vertical-align: middle;
-}
-
-.demo-wrap {
-  width: 100%;
-  letter-spacing: 0.08em;
-}
-
-.custom-select {
-  width: 210px;
-  border: none;
-  border-radius: 0;
-  font-size: 14px;
-  line-height: 18px;
-  height: 30px;
-}
-
-.custom-select ::v-deep(.el-input__inner) {
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 0;
-  box-shadow: none;
-  font-size: 14px;
-  color: #1e2226;
-  font-weight: bold;
-  padding: 0;
-}
-
-.custom-select ::v-deep(.el-input:focus-within) {
-  background: none;
-  border-color: #F5F7FA !important;
-  border-radius: 0;
-  box-shadow: none;
-  outline: none;
-}
-
-.el-select-dropdown__item {
-  color: #1E2226;
-  margin: 0 12px;
-  padding: 0 12px;
-}
-
-.el-select-dropdown__item:first-child {
-  margin-top: 6px;
-}
-
-.el-select-dropdown__item:last-child {
-  margin-bottom: 6px;
-}
-
-.el-select-dropdown__item:hover {
-  background: #F6F7FA;
-}
-
-.el-select-dropdown__item.selected {
-  font-weight: normal;
-}
-
-.el-select-dropdown__item.selected::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  right: 10px;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  background-image: url('../../../assets/super/select-active.svg');
-  background-size: contain;
-  background-repeat: no-repeat;
-  opacity: 1;
-}
-
-.detail_icon {
-  vertical-align: text-top;
-  padding-left: 5px;
-}
-
-::v-deep .el-popover.el-popper {
-  padding: 20px;
-}
-
-.pop-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  box-sizing: border-box;
-
-  .pop-top {
-    h3 {
-      font-family: Microsoft YaHei UI;
-      font-size: 16px;
-      font-weight: bold;
-      line-height: 18px;
-      letter-spacing: 0.08em;
-      color: #1D2129;
-      margin: 0;
-
-      span {
-        display: inline-block;
-        margin-left: 12px;
-        font-size: 14px;
-        line-height: 18px;
-        color: #006AFF;
-      }
-    }
-
-    img {
-      width: 20px;
-      height: 20px;
-    }
-  }
-}
 </style>

src/views/super/Ranking/RankDetail.vue

@@ -464,69 +464,4 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.growth-up {
-  padding: 0 5px;
-  color: #22C55E;
-}
-
-.growth-down {
-  padding: 0 5px;
-  color: #EF4444;
-}
-
-.growth-text {
-  color: #9CA3AF;
-  padding-left: 5px;
-}
-
-.edit_icon {
-  padding: 0 5px;
-  vertical-align: middle;
-}
-
-.demo-wrap {
-  width: 100%;
-  letter-spacing: 0.08em;
-}
-
-.detail_icon {
-  vertical-align: text-top;
-  padding-left: 5px;
-}
-
-::v-deep .el-popover.el-popper {
-  padding: 20px;
-}
-
-.pop-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  box-sizing: border-box;
-
-  .pop-top {
-    h3 {
-      font-family: Microsoft YaHei UI;
-      font-size: 16px;
-      font-weight: bold;
-      line-height: 18px;
-      letter-spacing: 0.08em;
-      color: #1D2129;
-      margin: 0;
-
-      span {
-        display: inline-block;
-        margin-left: 12px;
-        font-size: 14px;
-        line-height: 18px;
-        color: #006AFF;
-      }
-    }
-
-    img {
-      width: 20px;
-      height: 20px;
-    }
-  }
-}
 </style>

src/views/super/Ranking/RankList.vue

@@ -27,7 +27,7 @@
                                      :key="selectedType"
                                      :label="type_select[selectedType]">
                         <template slot="header">
-                            <el-select class="custom-select" v-model="selectedType" @change="changeRankType">
+                            <el-select class="custom-select" popper-class="custom-select-dropdown" v-model="selectedType" @change="changeRankType">
                                 <el-option v-for="(item,type) in type_select"
                                            :key="type"
                                            :label="item"
@@ -577,137 +577,4 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.color-red {
-  color: #FF4D4F;
-}
-
-.growth-up {
-  padding: 0 5px;
-  color: #22C55E;
-}
-
-.growth-down {
-  padding: 0 5px;
-  color: #EF4444;
-}
-
-.growth-text {
-  color: #9CA3AF;
-  padding-left: 5px;
-}
-
-.custom-select {
-  width: 210px;
-  border: none;
-  border-radius: 0;
-  font-size: 14px;
-  line-height: 18px;
-  height: 30px;
-}
-
-.custom-select ::v-deep(.el-input__inner) {
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 0;
-  box-shadow: none;
-  font-size: 14px;
-  color: #1e2226;
-  font-weight: bold;
-  padding: 0;
-}
-
-.custom-select ::v-deep(.el-input:focus-within) {
-  background: none;
-  border-color: #F5F7FA !important;
-  border-radius: 0;
-  box-shadow: none;
-  outline: none;
-}
-
-.el-select-dropdown__item {
-  color: #1E2226;
-  margin: 0 12px;
-  padding: 0 12px;
-}
-
-.el-select-dropdown__item:first-child {
-  margin-top: 6px;
-}
-
-.el-select-dropdown__item:last-child {
-  margin-bottom: 6px;
-}
-
-.el-select-dropdown__item:hover {
-  background: #F6F7FA;
-}
-
-.el-select-dropdown__item.selected {
-  font-weight: normal;
-}
-
-.el-select-dropdown__item.selected::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  right: 10px;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  background-image: url('../../../assets/super/select-active.svg');
-  background-size: contain;
-  background-repeat: no-repeat;
-  opacity: 1;
-}
-
-.edit_icon {
-  padding: 0 5px;
-  vertical-align: middle;
-}
-
-.demo-wrap {
-  width: 100%;
-  letter-spacing: 0.08em;
-}
-
-.detail_icon {
-  vertical-align: text-top;
-  padding-left: 5px;
-}
-
-::v-deep .el-popover.el-popper {
-  padding: 20px;
-}
-
-.pop-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  box-sizing: border-box;
-
-  .pop-top {
-    h3 {
-      font-family: Microsoft YaHei UI;
-      font-size: 16px;
-      font-weight: bold;
-      line-height: 18px;
-      letter-spacing: 0.08em;
-      color: #1D2129;
-      margin: 0;
-
-      span {
-        display: inline-block;
-        margin-left: 12px;
-        font-size: 14px;
-        line-height: 18px;
-        color: #006AFF;
-      }
-    }
-
-    img {
-      width: 20px;
-      height: 20px;
-    }
-  }
-}
 </style>

src/views/super/Ranking/Ranking.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="siteSetting-wrap">
-        <RankingLeftMenu />
+        <RankingLeftMenu/>
         <!-- 主内容区域 -->
         <main class="main-content" ref="scrollContainer">
             <router-view></router-view>
@@ -11,6 +11,7 @@
 <script>
 import Footer from '@/components/Footer.vue';
 import RankingLeftMenu from '@/components/super/RankingLeftMenu.vue'
+
 export default {
     // 站点设置
     name: '',
@@ -21,25 +22,161 @@ export default {
     },
     data() {
         return {
-            path:''
+            path: ''
         }
     },
-    mounted(){
+    mounted() {
-        this.path =this.$route.path;
+        this.path = this.$route.path;
     },
-    methods: {
+    methods: {}
-    }
 }
 </script>
+<style lang="scss">
+.demo-wrap {
+  width: 100%;
+  letter-spacing: 0.08em;
+
+  ::v-deep .el-popover.el-popper {
+    padding: 20px;
+  }
+
+  .growth-up {
+    padding: 0 5px;
+    color: #22C55E;
+  }
+
+  .growth-down {
+    padding: 0 5px;
+    color: #EF4444;
+  }
+
+  .growth-text {
+    color: #9CA3AF;
+    padding-left: 5px;
+  }
+
+  .edit_icon {
+    padding: 0 5px;
+    vertical-align: middle;
+  }
+
+  .detail_icon {
+    vertical-align: text-top;
+    padding-left: 5px;
+  }
+
+  .custom-select {
+    width: 110px;
+    border: none;
+    border-radius: 0;
+    font-size: 14px;
+    line-height: 18px;
+    height: 30px;
+  }
+
+  .custom-select .el-input__inner {
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 0;
+    box-shadow: none;
+    font-size: 14px;
+    color: #1e2226;
+    font-weight: bold;
+    padding: 0;
+  }
+
+  .custom-select .el-input:focus-within {
+    background: none;
+    border-color: #F5F7FA !important;
+    border-radius: 0;
+    box-shadow: none;
+    outline: none;
+  }
+}
+
+.pop-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  box-sizing: border-box;
+
+  .pop-top {
+    h3 {
+      font-family: Microsoft YaHei UI;
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 18px;
+      letter-spacing: 0.08em;
+      color: #1D2129;
+      margin: 0;
+
+      span {
+        display: inline-block;
+        margin-left: 12px;
+        font-size: 14px;
+        line-height: 18px;
+        color: #006AFF;
+      }
+    }
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+.custom-select-dropdown {
+  width: 210px;
+  margin-left: -16px;
+}
+
+.custom-select-dropdown .el-select-dropdown__item {
+  color: #1E2226;
+  margin: 0 12px;
+  padding: 0 12px;
+}
+
+.custom-select-dropdown .el-select-dropdown__item:first-child {
+  margin-top: 6px;
+}
+
+.custom-select-dropdown .el-select-dropdown__item:last-child {
+  margin-bottom: 6px;
+}
+
+.custom-select-dropdown .el-select-dropdown__item:hover {
+  background: #F6F7FA;
+}
+
+.custom-select-dropdown .el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+.custom-select-dropdown .el-select-dropdown__item.selected::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  background-image: url('../../../assets/super/select-active.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+  opacity: 1;
+}
+
+</style>
 <style scoped lang="scss">
 .siteSetting-wrap {
-    display: flex;
+  display: flex;
-    height: 100%;
+  height: 100%;
 }
 
 .main-content {
-    flex: 1;
+  flex: 1;
-    padding: 12px;
+  padding: 12px;
-    overflow-y: auto;
+  overflow-y: auto;
 }
 </style>