标签：Vue color transition height width background active position animate
<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>
标签：Vue,color,transition,height,width,background,active,position,animate 来源： https://www.cnblogs.com/NanKe-Studying/p/13696411.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。