首页前端开发JavaScriptvue实现卡片翻转轮播展示

vue实现卡片翻转轮播展示

时间2024-01-31 18:58:03发布访客分类JavaScript浏览263
导读：收集整理的这篇文章主要介绍了vue实现卡片翻转轮播展示，觉得挺不错的，现在分享给大家，也给大家做个参考。 vue卡片翻转轮播展示，同时在翻转时切换数据，供大家参考，具体内容如下效果及代码...
收集整理的这篇文章主要介绍了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实现点击翻转效果
  • Vue.js实现大屏数字滚动翻转效果
  • Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
  • vue iview多张图片大图预览、缩放翻转
  • Vue实现牌面翻转效果

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

上一篇: 一文秒懂nodejs中的异步编程下一篇:js实现简单的倒计时猜你在找的JavaScript相关文章 html font标签如何设置字体大小？html font标签属性用法介绍2022-05-16vue3+TypeScript+vue-router的使用方法2022-04-16vue3获取当前路由地址2022-04-16如何利用React实现图片识别App2022-04-16JavaScript展开运算符和剩余运算符的区别详解2022-04-16微信小程序中使用vant框架的具体步骤2022-04-16Vue elementUI表单嵌套表格并对每行进行校验详解2022-04-16如何利用Typescript封装本地存储2022-04-16微信小程序中wxs文件的一些妙用分享2022-04-16JavaScript的Set数据结构详解2022-04-16 其他相关热搜词更多phpjavapython程序员loadpost-format-gallery

若转载请注明出处： vue实现卡片翻转轮播展示
本文地址： https://pptw.com/jishu/594350.html
c语言中%是什么意思 vue使用echarts画组织结构图

游客 回复需填写必要信息
↑