<template>     <div class="wrapper">         <div class="Header_Screen">             <ul class="Tabs">                 <li                     v-for="(item, index) in Tabs_List"                     :key="index"                     :class="{ choose: Tabs_active == index }"                     @click="Tabs_Chlik(index)"                 >                     {{ item }}                 </li>             </ul>             <ul class="FixedTabs">                 <li                     v-for="(item, index) in Fixed_List"                     :key="index"                     :class="{ choose: Fixed_active == index }"                     @click="Fixed_Chlik(index)"                 >                     {{ item }}                 </li>                 <div class="tiancho"></div>                 <div class="tiancho1"></div>                 <div class="leftline"></div>                 <div class="rightline"></div>             </ul>         </div>         <div class="Main">             <transition                 :enter-active-class="Tabs_active > oldTabs_active ? 'animate__fadeInUp' : 'animate__fadeInDown'"                 :leave-active-class="Tabs_active > oldTabs_active ? 'animate__fadeOutUp' : 'animate__fadeOutDown'"                 duration="860"                 mode="out-in"             >                 <Return-Status class="animate__animated" v-if="Tabs_active == 0"></Return-Status>                 <Return-Analysis                     class="animate__animated"                     :isFullscreenForNoScroll="isFullscreenForNoScroll"                     v-else-if="Tabs_active == 1"                 ></Return-Analysis>                 <Top20-ProblemAnalysis class="animate__animated" v-else-if="Tabs_active == 2"></Top20-ProblemAnalysis>                 <Top20-ParagraphAnalysis                     class="animate__animated"                     v-else-if="Tabs_active == 3"                 ></Top20-ParagraphAnalysis>                 <Top20-SupplierAnalysis class="animate__animated" v-else-if="Tabs_active == 4"></Top20-SupplierAnalysis>                 <Top20-BranchCompanies class="animate__animated" v-else-if="Tabs_active == 5"></Top20-BranchCompanies>                 <Terminal-Problem class="animate__animated" v-else></Terminal-Problem>             </transition>         </div>     </div> </template>
<script> import ReturnStatus from './components/ReturnStatus'; //退货状况 import ReturnAnalysis from './components/ReturnAnalysis'; //退货分析 import Top20ProblemAnalysis from './components/Top20_ProblemAnalysis'; //退货TOP20问题分析 import Top20ParagraphAnalysis from './components/Top20_ParagraphAnalysis'; //退货TOP20款分析 import Top20SupplierAnalysis from './components/Top20_SupplierAnalysis'; //退货TOP20供应商分析 import Top20BranchCompanies from './components/Top20_BranchCompanies'; //退货TOP20分公司分析 import TerminalProblem from './components/TerminalProblem'; //终端问题登记实时 export default {     components: {         ReturnStatus,         ReturnAnalysis,         Top20ProblemAnalysis,         Top20ParagraphAnalysis,         Top20SupplierAnalysis,         Top20BranchCompanies,         TerminalProblem,     },     props: {},     data() {         return {             Tabs_List: [                 '退货状况',                 '退货分析',                 '退货TOP20问题分析',                 '退货TOP20款分析',                 '退货TOP20供应商分析',                 '退货TOP20分公司分析',                 '终端问题登记实时',             ],             Fixed_List: ['全部', '电商', '主标'],             Tabs_active: '0',             Fixed_active: '0',             oldTabs_active: '0', //记录旧值             IS_OPEN_Popup: true,             reloadTimer: null, //间隔刷新定时器         };     },     watch: {},     computed: {         // 是否全屏         isFullscreenForNoScroll() {             var explorer = window.navigator.userAgent.toLowerCase();             if (explorer.indexOf('chrome') > 0) {                 //webkit                 if (                     document.body.scrollHeight === window.screen.height &&                     document.body.scrollWidth === window.screen.width                 ) {                     return '全屏';                 } else {                     return '不全屏';                 }             } else {                 //IE 9+  fireFox                 if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {                     return '全屏';                 } else {                     return '不全屏';                 }             }         },     },     methods: {         Tabs_Chlik(index) {             this.oldTabs_active = this.Tabs_active;             this.Tabs_active = index;             sessionStorage.setItem('TAB_ACTIVE', this.Tabs_active);         },         Fixed_Chlik(index) {             this.Fixed_active = index;         },         //禁止滚动         stop() {             let mo = function(e) {                 e.preventDefault();             };             document.body.style.overflow = 'hidden';             document.addEventListener('touchmove', mo, false); //禁止页面滑动         },         /***取消滑动限制***/         move() {             let mo = function(e) {                 e.preventDefault();             };             document.body.style.overflow = ''; //出现滚动条             document.removeEventListener('touchmove', mo, false);         },         // 窗口发生大小变化就刷新         temp() {             window.onresize = (temp) => {                 window.location.reload();             };         },         // 子通父,查询子组件返回的值         Response(data) {             console.log(data);         },         // 监听是否全屏 --- https://blog.csdn.net/k358971707/article/details/60465689?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param     },     created() {},     mounted() {         const senu = sessionStorage.getItem('TAB_ACTIVE');         if (senu != null || senu != undefined) {             this.Tabs_active = sessionStorage.getItem('TAB_ACTIVE');         }
        this.stop();         this.$once('hook:beforeDestroy', () => {             this.move();         });         this.temp();
        // 五分钟刷新一次         // this.reloadTimer = setInterval(() => {         //  window.location.reload();         // }, 300000);                  // setInterval(() => {         //  if (this.Tabs_active <= this.Tabs_List.length) {         //      this.Tabs_active++;         //      this.Tabs_Chlik(this.Tabs_active);         //  } else {         //      this.Tabs_active = 0;         //  }         // }, 3000);     },     destroyed() {         clearInterval(this.reloadTimer);     }, }; </script> <style lang="scss" scoped> $theme_color: '#C4F7FE'; .wrapper {     width: 100%;     min-height: 100vh;     // CSS-禁止文本被选中代码     -moz-user-select: none; /*火狐*/     -webkit-user-select: none; /*webkit浏览器*/     -ms-user-select: none; /*IE10*/     -khtml-user-select: none; /*早期浏览器*/     user-select: none;     .Header_Screen {         width: 100%;         height: 80px;         background: #000c13;         position: relative;         .Tabs {             position: absolute;             left: 40px;             bottom: 0;             display: flex;             li {                 transition: all 0.2s ease;                 font-size: 20px;                 color: #6c93a2;                 margin-right: 18px;                 padding: 20px 18px;                 cursor: pointer;                 display: flex;                 flex-direction: column;                 align-items: center;                 position: relative;                 &:last-of-type {                     margin-right: 0;                 }                 &::before {                     content: '';                     position: absolute;                     left: 0;                     bottom: 0;                     right: 0;                     margin: auto;                     width: 90%;                     height: 6px;                     background-color: #fff;                     transform: scale3d(0, 1, 1);                     transform-origin: center;                     transition: all 0.3s ease-in-out;                     box-shadow: 3px 0px 12px rgba(255, 255, 255, 0.72);                 }                 &.choose {                     color: #c4f7fe;                     &::before {                         transform: scale3d(1, 1, 1);                         background-color: #c4f7fe;                     }                 }             }             li:hover {                 color: #c4f7fe;             }         }         .FixedTabs {             position: absolute;             right: 20px;             bottom: 0;             display: flex;             background: rgba(85, 85, 85, 0.8);             li {                 transition: all 0.2s ease;                 font-size: 20px;                 color: #6c93a2;                 margin-right: 22px;                 padding: 14px 18px;                 cursor: pointer;                 display: flex;                 flex-direction: column;                 align-items: center;                 position: relative;                 &:last-of-type {                     margin-right: 0;                 }                 &::before {                     content: '';                     position: absolute;                     left: 0;                     bottom: 0;                     right: 0;                     margin: auto;                     width: 75%;                     height: 6px;                     background-color: #fff;                     transform: scale3d(0, 1, 1);                     transform-origin: center;                     transition: all 0.3s ease-in-out;                     box-shadow: 3px 0px 12px rgba(255, 255, 255, 0.72);                 }                 &.choose {                     color: #c4f7fe;                     &::before {                         transform: scale3d(1, 1, 1);                         background-color: #c4f7fe;                     }                 }             }             li:hover {                 color: #c4f7fe;             }             .tiancho {                 position: absolute;                 left: -51px;                 bottom: 0;                 width: 0;                 height: 0;                 border-top: 51px solid transparent;                 border-bottom: 0px;                 border-right: 51px solid rgba(85, 85, 85, 0.8);                 border-left: 0px;             }             .tiancho1 {                 position: absolute;                 right: -20px;                 bottom: 0;                 width: 20px;                 height: 51px;                 background-color: rgba(85, 85, 85, 0.8);             }             .leftline {                 width: 1.4px;                 height: 30px;                 background: #08151d;                 position: absolute;                 top: 50%;                 left: 86px;                 transform: translateY(-50%);             }             .rightline {                 width: 1.4px;                 height: 30px;                 background: #08151d;                 position: absolute;                 top: 50%;                 left: 184px;                 transform: translateY(-50%);             }         }     }     .Main {         width: 100%;         height: calc(100vh - 80px);         background-image: url(../../assets/Big_Screnn1.png);         background-size: 100% 100%;     } } </style>