vue实现卡片翻转轮播展示

vue卡片翻转轮播展示,同时在翻转时切换数据,供大家参考,具体内容如下

效果及代码

代码:

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

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 vue实现卡片翻转轮播展示 的全部内容, 来源链接: utcz.com/p/219488.html

回到顶部