vue實(shí)現(xiàn)卡片翻轉(zhuǎn)輪播展示
vue卡片翻轉(zhuǎn)輪播展示,同時(shí)在翻轉(zhuǎn)時(shí)切換數(shù)據(jù),供大家參考,具體內(nèi)容如下
效果及代碼
代碼:
<template> <div class="list-container"> <div class="reason" v-if="list1.length > 0 || list2.length > 0"> <div class="logo"> <svg-icon class="center-svg" icon-class="centerLogo"></svg-icon> <div class="echart"> <echart :option="option" echartId="roadP" /> </div> </div> <RoadComponent :list="list1[0]" :style="{ display: show1 }"></RoadComponent> <RoadComponent :list="list2[0]" :style="{ display: show2 }"></RoadComponent> <RoadComponent :list="list1[1]" :style="{ display: show3 }"></RoadComponent> <RoadComponent :list="list2[1]" :style="{ display: show4 }"></RoadComponent> <RoadComponent :list="list1[2]" :style="{ display: show5 }"></RoadComponent> <RoadComponent :list="list2[2]" :style="{ display: show6 }"></RoadComponent> </div> </div> </template> <script> import { defineComponent, inject, onMounted, reactive, onUnmounted, toRefs } from 'vue'; import { congestionPredict } from '@/apis/fullView'; import echart from '@/components/common/echart'; import '@/assets/icons/fullView/westToEast.svg'; import '@/assets/icons/fullView/eastToWest.svg'; import '@/assets/icons/fullView/northToSouth.svg'; import '@/assets/icons/fullView/southToNorth.svg'; import '@/assets/icons/fullView/centerLogo.svg'; import RoadComponent from '@/views/fullView/left/RoadComponent'; export default defineComponent({ name: 'RoadP', components: { echart, RoadComponent }, setup() { let echarts = inject('ec'); const dataMap = reactive({ interval: null, interval1: null, list1: [], list2: [], list: [], option: {}, timeout: 10, show1: 'block', show2: 'none', show3: 'block', show4: 'none', show5: 'block', show6: 'none', }); onMounted(() => { getData(); dataMap.interval = setInterval(() => { getData(); }, 60 * 1000); dataMap.interval1 = setInterval(() => { if (dataMap.timeout > 8 && dataMap.timeout < 11) { dataMap.timeout = dataMap.timeout - 1; dataMap.show1 = 'block'; dataMap.show3 = 'block'; dataMap.show5 = 'block'; dataMap.show2 = 'none'; dataMap.show4 = 'none'; dataMap.show6 = 'none'; } else if (dataMap.timeout === 8) { dataMap.timeout = dataMap.timeout - 1; dataMap.show1 = 'none'; dataMap.show3 = 'block'; dataMap.show5 = 'block'; dataMap.show2 = 'block'; dataMap.show4 = 'none'; dataMap.show6 = 'none'; } else if (dataMap.timeout === 7) { dataMap.timeout = dataMap.timeout - 1; dataMap.show1 = 'none'; dataMap.show3 = 'none'; dataMap.show5 = 'block'; dataMap.show2 = 'block'; dataMap.show4 = 'block'; dataMap.show6 = 'none'; } else if (dataMap.timeout < 7 && dataMap.timeout > 3) { dataMap.timeout = dataMap.timeout - 1; dataMap.show1 = 'none'; dataMap.show3 = 'none'; dataMap.show5 = 'none'; dataMap.show2 = 'block'; dataMap.show4 = 'block'; dataMap.show6 = 'block'; } else if (dataMap.timeout === 3) { dataMap.timeout = dataMap.timeout - 1; dataMap.show1 = 'block'; dataMap.show3 = 'none'; dataMap.show5 = 'none'; dataMap.show2 = 'none'; dataMap.show4 = 'block'; dataMap.show6 = 'block'; } else if (dataMap.timeout === 2) { dataMap.timeout = dataMap.timeout - 1; dataMap.show1 = 'block'; dataMap.show3 = 'block'; dataMap.show5 = 'none'; dataMap.show2 = 'none'; dataMap.show4 = 'none'; dataMap.show6 = 'block'; } else if (dataMap.timeout === 1) { dataMap.timeout = dataMap.timeout - 1; dataMap.show1 = 'block'; dataMap.show3 = 'block'; dataMap.show5 = 'block'; dataMap.show2 = 'none'; dataMap.show4 = 'none'; dataMap.show6 = 'none'; } else { dataMap.timeout = 10; } }, 1000); }); onUnmounted(() => { clearInterval(dataMap.interval); clearInterval(dataMap.interval1); }); const getData = () => { congestionPredict() .then((res) => { if (res && res.code === 0 && res.data) { dataMap.list1 = []; dataMap.list2 = []; for (let i = 0; i < 6; i = i + 2) { dataMap.list1.push([ { name: res.data[i].name, direction: res.data[i].direction, value: res.data[i].index.toFixed(1), icon: res.data[i].englishDirection, }, { name: res.data[i + 1].name, direction: res.data[i + 1].direction, value: res.data[i + 1].index.toFixed(1), icon: res.data[i + 1].englishDirection, }, ]); } for (let j = res.data.length - 1; j > res.data.length - 6; j = j - 2) { dataMap.list2.push([ { name: res.data[j].name, direction: res.data[j].direction, value: res.data[j].index.toFixed(1), icon: res.data[j].englishDirection, }, { name: res.data[j - 1].name, direction: res.data[j - 1].direction, value: res.data[j - 1].index.toFixed(1), icon: res.data[j - 1].englishDirection, }, ]); } } }) .catch((err) => { console.log(err); }) .finally(() => { dataMap.option = getOption(); }); }; const getOption = () => { return { series: [ { type: 'liquidFill', name: '', radius: '85%', center: ['50%', '45%'], data: [0.55, 0.5, 0.5], color: ['rgba(0,118,255,0.5)', 'rgba(0,102,255,0.5)', 'rgba(0,185,255,0.6)'], outline: { show: false, }, backgroundStyle: { color: 'transparent', borderColor: 'transparent', borderWidth: 1, shadowColor: 'transparent', shadowBlur: 0, }, label: { show: false, }, }, ], }; }; return { ...toRefs(dataMap), }; }, }); </script> <style scoped lang="less"> .list-container { width: 100%; height: 280px; } .reason { width: 696px; margin: 16px auto; height: 228px; position: relative; list-style: none; .logo { width: 150px; height: 150px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: url('~@/assets/img/fullView/centerGround.dynamic.png'); background-size: 100% 100%; } .echart { width: 158px; height: 158px; position: absolute; left: -4px; top: 4px; } } .center-svg { width: 90px; height: 100px; position: absolute; left: 30px; top: 25px; z-index: 15; } </style>
卡片組件
<template> <div class="goBack" v-if="list.length > 0"> <div class="top"> <svg-icon class="svg" :icon-class="list[0].icon"></svg-icon> <div> <div> <p class="span-container text-overflow">{{ list[0].name }}</p> <p class="index" :style="{ color: switchColor(list[0].value) }">{{ list[0].value }}</p> </div> <div> <p class="span-container text-overflow">{{ list[1].name }}</p> <p class="index" :style="{ color: switchColor(list[1].value) }">{{ list[1].value }}</p> </div> </div> <svg-icon class="svg" :icon-class="list[1].icon"></svg-icon> </div> </div> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ name: 'RoadComponent', props: { list: {}, }, setup() { const switchColor = (value) => { if (value > 0 && value <= 2) { return '#00DBEB'; } else if (value > 2 && value <= 3) { return '#FFD200'; } else if (value > 3 && value <= 4) { return '#FF7309'; } else if (value > 4 && value <= 5) { return '#FF0000'; } }; return { switchColor, }; }, }); </script> <style lang="less" scoped> .goBack { transform-style: preserve-3d; animation: back 0.5s linear 1; } .back:hover { animation-play-state: paused; } @keyframes back { 0% { transform: rotateZ(0deg) rotateY(0deg) rotateX(-90deg); } 100% { transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg); } } .span-container { width: 150px; margin: 0 0 5px 5px; color: var(--text-blue); font-size: var(--font-traffic-size); } .svg { width: 41px; height: 41px; } .top { display: flex; flex-wrap: nowrap; padding: 0 20px; margin: 0 0 14px 0; justify-content: space-between; align-items: center; height: 68px; border-radius: 10px; opacity: 0.9; background: linear-gradient( 89deg, rgba(0, 76, 169, 0.5) 0%, rgba(0, 76, 169, 0) 46%, rgba(0, 76, 169, 0) 49%, rgba(0, 76, 169, 0) 52%, rgba(0, 76, 169, 0.5) 100% ); } .top > div { width: 640px; display: flex; text-align: center; align-items: center; flex-wrap: nowrap; justify-content: space-between; & > div { width: 160px; span { margin-left: 15px; } } .index { width: 155px; height: 28px; font-size: var(--font-size-chart-title); text-align: center; margin: 0; line-height: 28px; } } </style>
關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
精彩專題分享:jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用html2canvas和jspdf將html轉(zhuǎn)成pdf
在前端開發(fā)中, html轉(zhuǎn)pdf是最常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue如何使用html2canvas和jspdf將html轉(zhuǎn)成pdf的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03解決vue中使用proxy配置不同端口和ip接口問(wèn)題
這篇文章主要介紹了解決vue中使用proxy配置不同端口和ip接口問(wèn)題 ,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08在vue里面設(shè)置全局變量或數(shù)據(jù)的方法
下面小編就為大家分享一篇在vue里面設(shè)置全局變量或數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Vue Element前端應(yīng)用開發(fā)之菜單資源管理
在權(quán)限管理系統(tǒng)中,菜單也屬于權(quán)限控制的一個(gè)資源,屬于角色控制的一環(huán)。不同角色用戶,登錄系統(tǒng)后,出現(xiàn)的系統(tǒng)菜單是不同的。菜單結(jié)合路由集合,實(shí)現(xiàn)可訪問(wèn)路由的過(guò)濾,也就實(shí)現(xiàn)了對(duì)應(yīng)角色菜單的展示和可訪問(wèn)路由的控制。2021-05-05Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09ElementUI 詳細(xì)分析DatePicker 日期選擇器實(shí)戰(zhàn)
這篇文章主要介紹了ElementUI詳細(xì)分析DatePicker 日期選擇器實(shí)戰(zhàn)教程,本文通過(guò)實(shí)例代碼圖文介紹給大家講解的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08