【vue】大屏导航跳转

最新推荐文章于 2023-04-27 00:30:00 发布

顾鸟

最新推荐文章于 2023-04-27 00:30:00 发布

阅读量909

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40881695/article/details/123189018

版权

vue 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

效果图
在这里插入图片描述

1. html

因为 html 结构使用了 el-col，所以外层不能再使用 margin 了，否则会把内容挤下来，才有了现在的 html 结构。
外层控制鼠标移入样式，内层控制本身和内容样式。

 <div class="home__content">
    <el-row>
      <router-link v-for="(item, i) in navList"
                  :key="i"
                  :to="item.path">
          <el-col :span="6"
                  class="nav-item">
              <div class="nav-wrapper"
                  :style="item.styleBg">
                  <i :class="[item.icon]"></i>
                  <p>
                      {{item.name}}
                  </p>
              </div>
          </el-col>
      </router-link>
    </el-row>
</div>

2. script

navList: [
           {
               name: '首页',
               path: 'index',
               icon: 'el-icon-s-home',
               styleBg: "background: linear-gradient(137deg, #5f50f2,#bc9feb)"
           },
           {
               name: '视频监控',
               path: 'video/play',
               icon: 'el-icon-view',
               styleBg: "background: linear-gradient(137deg, #5abef8,#2f8ff2) "
           },
           {
               name: '地理编码子系统',
               path: 'geocoding/gridManage',
               icon: 'el-icon-map-location',
               styleBg: "background: linear-gradient(137deg, #f88f88,#e73b7b)"
           },
           {
               name: '监督受理子系统',
               path: 'superaccpte/newcase',
               icon: 'el-icon-notebook-1',
               styleBg: "background: linear-gradient(137deg, #fdc687,#fa7c4f)"
           },
           {
               name: '协同工作子系统',
               path: 'test/synergismtodocase',
               icon: 'el-icon-notebook-2',
               styleBg: "background:  linear-gradient(137deg, #5f77e0,#2d41c8)"
           },
           {
               name: '执法车辆子系统',
               path: 'player',
               icon: 'el-icon-camera',
               styleBg: "background: linear-gradient(137deg, #b7e7a5, #53b299) "
           },
           {
               name: '专项案件',
               path: 'meeting',
               icon: 'el-icon-document',
               styleBg: "background: linear-gradient(137deg, #b7e7a5, #53b209)"
           },
           {
               name: '综合评价子系统',
               path: 'audiocall',
               icon: 'el-icon-chat-line-square',
               styleBg: "background: linear-gradient(137deg, #5f50f2,#bc9feb)"
           },
           {
               name: '指挥监督子系统',
               path: 'colony',
               icon: 'el-icon-s-flag',
               styleBg: "background: linear-gradient(137deg, #53b209,#53b259)"
           },
           {
               name: '全名城管子系统',
               path: 'videocall',
               icon: 'el-icon-user',
               styleBg: "background: linear-gradient(137deg, #f88f88,#e73b7b)"
           },
           {
               name: '智慧执法子系统',
               path: 'videocall',
               icon: 'el-icon-thumb',
               styleBg: "background: linear-gradient(137deg, #5abef8,#2f8ff2) "
           },
           {
               name: '户外广告子系统',
               path: 'videocall',
               icon: 'el-icon-data-analysis',
               styleBg: "background: linear-gradient(137deg, #fdc687,#fa7c4f)"
           },
           {
               name: '预报警子系统',
               path: 'videocall',
               icon: 'el-icon-warning',
               styleBg: "background:  linear-gradient(137deg, #5f77e0,#2d41c8)"
           },
           {
               name: '应用维护子系统',
               path: 'buildMaintenance/division',
               icon: 'el-icon-set-up',
               styleBg: "background: linear-gradient(137deg, #b7e7a5, #53b299) "
           }
       ],

3. css

&__content{
        margin: 0 auto;
        width: 60%;
        .nav-item {
            padding: 10px;
            &:hover {
                transform: scale(1.2);
            }
        }
        .nav-wrapper {
            padding: 20px 10px;
            max-height: 160px;
            border-radius: 5px;
            box-shadow: 0 4px 6px 0 rgba(167, 135, 135, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
            i {
                font-size: 80px;
            }
            p {
                font-size: 18px;
                margin: 10px 0;
            }
        }
    }