|
@@ -1,260 +0,0 @@
|
|
-<template>
|
|
|
|
- <moduleEnclosure title="差评排名">
|
|
|
|
- <div class="dvScrollBoardView">
|
|
|
|
- <dv-scroll-board
|
|
|
|
- :config="config"
|
|
|
|
- :ref="`scrollBoard_1`"
|
|
|
|
- style="width: 100%; height: 100%"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- </moduleEnclosure>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
-import moduleEnclosure from '@/components/moduleEnclosure.vue';
|
|
|
|
-import img0 from '@/assets/xia.png';
|
|
|
|
-import img1 from '@/assets/shang.png';
|
|
|
|
-import img2 from '@/assets/y1.png';
|
|
|
|
-import img3 from '@/assets/y2.png';
|
|
|
|
-import img4 from '@/assets/y3.png';
|
|
|
|
-import { getQuery13, getQuery14 } from '@/api/bigView.js';
|
|
|
|
-var timeling = 5000;
|
|
|
|
-export default {
|
|
|
|
- components: {
|
|
|
|
- moduleEnclosure,
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- config: {
|
|
|
|
- headerBGC: '#0B1C55',
|
|
|
|
- oddRowBGC: '#0B1C55',
|
|
|
|
- evenRowBGC: '#0B1C55',
|
|
|
|
- header: ['排名', '网点', '差评数', '同比'],
|
|
|
|
- data: [],
|
|
|
|
- waitTime: timeling,
|
|
|
|
- },
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- this.timeId = getQuery13((res) => {
|
|
|
|
- let list = res.data.map((item, index) => {
|
|
|
|
- return this.tmp(item, index, true);
|
|
|
|
- });
|
|
|
|
- this.config.data = list;
|
|
|
|
- this.$refs['scrollBoard_1'][0].updateRows(list);
|
|
|
|
- }, 60000 * 60 * 12);
|
|
|
|
- },
|
|
|
|
- beforeUnmount() {
|
|
|
|
- this.timeId();
|
|
|
|
- if (this.timed) {
|
|
|
|
- clearTimeout(this.timed);
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- tmp(item, index, bool) {
|
|
|
|
- return [
|
|
|
|
- `<div class="aitem0"><img src="${
|
|
|
|
- index == 0 ? img2 : index == 1 ? img3 : img4
|
|
|
|
- }"/><span>${index + 1}</span></div>`,
|
|
|
|
- `<div class="aitem1"><div class="${
|
|
|
|
- bool ? 'slide' : 'juzhongxianshi'
|
|
|
|
- }" style="width:${item.name.length * 13}px!important;"><span>${
|
|
|
|
- item.name
|
|
|
|
- }</span>${
|
|
|
|
- bool ? ` <span>${item.name}</span> <span>${item.name}</span>` : ''
|
|
|
|
- }</div></div>`,
|
|
|
|
- `<div class="aitem2">${item.cut}</div>`,
|
|
|
|
- `<div class="aitem3">
|
|
|
|
- <div class="zhanbijs">
|
|
|
|
- <span class="${
|
|
|
|
- item.rate > 0 ? 'c3' : item.rate < 0 ? 'c2' : ''
|
|
|
|
- }">${item.rate}%</span>
|
|
|
|
- ${
|
|
|
|
- item.rate > 0 || item.rate < 0
|
|
|
|
- ? `<img
|
|
|
|
- src="${item.rate > 0 ? img1 : item.rate < 0 ? img0 : ''}"
|
|
|
|
- />`
|
|
|
|
- : ''
|
|
|
|
- }
|
|
|
|
- </div>
|
|
|
|
- </div>`,
|
|
|
|
- ];
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-};
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style scoped lang="scss">
|
|
|
|
-::v-deep .dv-scroll-board {
|
|
|
|
- .header-item {
|
|
|
|
- color: #699be3 !important;
|
|
|
|
- font-size: 18px;
|
|
|
|
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
|
|
|
- font-weight: 400;
|
|
|
|
- text-align: center;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .header,
|
|
|
|
- .row-item {
|
|
|
|
- cursor: pointer;
|
|
|
|
- height: 42px !important;
|
|
|
|
-
|
|
|
|
- &:hover {
|
|
|
|
- background: linear-gradient(to right, #156ccf, #082570) !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- div:nth-child(1) {
|
|
|
|
- width: 60px !important;
|
|
|
|
-
|
|
|
|
- div {
|
|
|
|
- width: 100% !important;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- div:nth-child(2) {
|
|
|
|
- width: 52% !important;
|
|
|
|
- overflow: hidden;
|
|
|
|
- white-space: nowrap;
|
|
|
|
-
|
|
|
|
- div {
|
|
|
|
- min-width: 100% !important;
|
|
|
|
- }
|
|
|
|
- .juzhongxianshi {
|
|
|
|
- text-align: center;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- div:nth-child(3) {
|
|
|
|
- width: 16% !important;
|
|
|
|
-
|
|
|
|
- div {
|
|
|
|
- width: 100% !important;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- div:nth-child(4) {
|
|
|
|
- width: auto !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .slide {
|
|
|
|
- animation: slide 5s linear infinite;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- @keyframes slide {
|
|
|
|
- 0% {
|
|
|
|
- transform: translateX(0);
|
|
|
|
- }
|
|
|
|
- 20% {
|
|
|
|
- transform: translateX(0);
|
|
|
|
- }
|
|
|
|
- 100% {
|
|
|
|
- transform: translateX(-100%);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- // }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-::v-deep .aitem0 {
|
|
|
|
- width: 38px;
|
|
|
|
- height: 38px;
|
|
|
|
- position: relative;
|
|
|
|
-
|
|
|
|
- img {
|
|
|
|
- margin: 0;
|
|
|
|
- padding: 0;
|
|
|
|
- width: 35px;
|
|
|
|
- height: 35px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- img,
|
|
|
|
- span {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 50%;
|
|
|
|
- left: 50%;
|
|
|
|
- transform: translate(-50%, -50%);
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-::v-deep .aitem1,
|
|
|
|
-::v-deep .aitem2 {
|
|
|
|
- height: 38px;
|
|
|
|
- line-height: 38px;
|
|
|
|
- font-size: 16px;
|
|
|
|
- font-weight: 400;
|
|
|
|
- text-align: center;
|
|
|
|
- color: #c8ebff;
|
|
|
|
- // overflow: hidden;
|
|
|
|
- // white-space: nowrap;
|
|
|
|
- // text-overflow: ellipsis;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-::v-deep .aitem3 {
|
|
|
|
- .zhanbijs {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 38px;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: row;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
-
|
|
|
|
- & > span:nth-child(1) {
|
|
|
|
- font-size: 16px;
|
|
|
|
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
|
|
|
- font-weight: 400;
|
|
|
|
- text-align: left;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- img {
|
|
|
|
- width: 16px;
|
|
|
|
- height: 16px;
|
|
|
|
- margin-left: 6px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.dvScrollBoardView {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- padding-top: 16px;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.classbtns {
|
|
|
|
- width: 160px;
|
|
|
|
- height: 28px;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: row;
|
|
|
|
- align-items: center;
|
|
|
|
- border: 2px solid #0e72e6;
|
|
|
|
- cursor: pointer;
|
|
|
|
-
|
|
|
|
- div {
|
|
|
|
- width: 50%;
|
|
|
|
- height: 100%;
|
|
|
|
- text-align: center;
|
|
|
|
- line-height: 28px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- div:nth-child(1) {
|
|
|
|
- border-right: 2px solid #0e72e6;
|
|
|
|
- }
|
|
|
|
- .select {
|
|
|
|
- background: #0e72e6;
|
|
|
|
- color: #bbd4ff;
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-::v-deep .el-carousel__arrow,
|
|
|
|
-::v-deep .el-carousel__indicators {
|
|
|
|
- display: none;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-::v-deep .c2 {
|
|
|
|
- color: #3ce783;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-::v-deep .c3 {
|
|
|
|
- color: #e15960;
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|