Vue implements card flip carousel display
|
Vue card flip carousel display, while switching data when flipping, for your reference, the specific content is as follows Effects and codes
Code:
<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>Card Components
<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(
89 degrees,
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>For tutorials on vue.js components, please click on the special vue.js component learning tutorial to learn. Wonderful topic sharing: jQuery image carousel JavaScript image carousel Bootstrap image carousel The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: mysql 5.7.17 winx64.zip installation and configuration method graphic tutorial
>>: How to control the startup order of docker compose services
Recommend
Vant Uploader implements the component of uploading one or more pictures
This article shares the Vant Uploader component f...
How to configure wordpress with nginx
Before, I had built WordPress myself, but at that...
MySQL 5.7.20 free installation version configuration method graphic tutorial
I have seen many relevant tutorials on the Intern...
Steps for Vue to use Ref to get components across levels
Vue uses Ref to get component instances across le...
Example of how to achieve ceiling effect using WeChat applet
Table of contents 1. Implementation 2. Problems 3...
Count the list tags in HTML
1. <dl> defines a list, <dt> defines ...
Vue uses echart to customize labels and colors
This article example shares the specific code of ...
HTML form value transfer example through get method
The google.html interface is as shown in the figur...
Native js implements custom scroll bar component
This article example shares the specific code of ...
Steps to purchase a cloud server and install the Pagoda Panel on Alibaba Cloud
Alibaba Cloud purchases servers Purchase a cloud ...
jQuery implements navigation bar effect with expansion animation
I designed and customized a navigation bar with a...
Design Association: Why did you look in the wrong place?
I took the bus to work a few days ago. Based on m...
How to connect JDBC to MySQL 5.7
1. First prepare the MySQL and Eclipse environmen...
26 Commonly Forgotten CSS Tips
This is a collection of commonly used but easily ...
Detailed explanation of the process of installing msf on Linux system
Or write down the installation process yourself! ...