Browse Source

排行榜

pull/2/head
pengda 3 months ago
parent
commit
9fb8efb937
  1. 131
      src/views/super/Ranking/RankBatchList.vue
  2. 65
      src/views/super/Ranking/RankDetail.vue
  3. 135
      src/views/super/Ranking/RankList.vue
  4. 141
      src/views/super/Ranking/Ranking.vue

131
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>

65
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>

135
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>

141
src/views/super/Ranking/Ranking.vue

@ -11,6 +11,7 @@
<script>
import Footer from '@/components/Footer.vue';
import RankingLeftMenu from '@/components/super/RankingLeftMenu.vue'
export default {
//
name: '',
@ -27,10 +28,146 @@ export default {
mounted() {
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;

Loading…
Cancel
Save