【Vue】模仿b站网站-----使用vue实现

1、引言

设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

模仿bilibili视频网站采用vue相关技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面 

模仿bilibili视频网站采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

vue作品技术方面：使用vue技术开发的网站，涉及常见的vue指令，如v-for，v-if，v-show，v-html等的使用，包含watch，计算属性等常见功能的开发，以及组件的使用，使用vue相关全家桶的使用，运用了v-router来作为路由，完全符合常见的网站开发技术。同时也会使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。

3、作品演示

【coding加油站】vue网站设计---大致模仿b站

3.1、首页

 相关代码：

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import NavHead from '@/components/NavHead.vue'
import Carousel from '@/components/Carousel.vue'
import NavBar from '@/components/NavBar.vue'
import UpdateTable from '@/components/UpdateTable.vue'
import FooterBar from '@/components/FooterBar.vue'
import Recommond from '@/components/Recommond.vue'
export default {
  name: 'home',
  components: {
    HelloWorld,
    NavHead,
    Carousel,
    NavBar,
    UpdateTable,
    FooterBar,
    Recommond
  },
  data: function () {
    return {
      visible: false,
      user: null,
      // 由后台传入cards不需要require，后期修改
      carousels: [
        require('../assets/img/carousel1.png'),
        require('../assets/img/carousel2.png'),
        require('../assets/img/carousel3.png'),
        require('../assets/img/carousel4.png')
      ],
      recommondItems: [
        { name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~', img: require('../assets/img/card.png'), type: '恋爱，搞笑，校园，日常' },
        { name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~', img: require('../assets/img/card.png'), type: '恋爱，搞笑，校园，日常' },
        { name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~', img: require('../assets/img/card.png'), type: '恋爱，搞笑，校园，日常' },
        { name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~', img: require('../assets/img/card.png'), type: '恋爱，搞笑，校园，日常' },
        { name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~', img: require('../assets/img/card.png'), type: '恋爱，搞笑，校园，日常' },
        { name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~', img: require('../assets/img/card.png'), type: '恋爱，搞笑，校园，日常' },
        { name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~', img: require('../assets/img/card.png'), type: '恋爱，搞笑，校园，日常' },
        { name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~', img: require('../assets/img/card.png'), type: '恋爱，搞笑，校园，日常' },
        { name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~', img: require('../assets/img/card.png'), type: '恋爱，搞笑，校园，日常' }

      ],
      rankinglist: [
        { id: 1, name: 'html page cover', createTime: '2019-11-08', author: '秋天书店', type: '冒险，奇幻', img: require('../assets/img/html_cover.png'), showWord: false },
        { id: 2, name: 'html page cover', createTime: '2019-11-08', author: '秋天书店', type: '冒险，奇幻', img: require('../assets/img/html_cover.png'), showWord: true },
        { id: 3, name: 'html page cover', createTime: '2019-11-08', author: '秋天书店', type: '冒险，奇幻', img: require('../assets/img/html_cover.png'), showWord: true },
        { id: 4, name: 'html page cover', createTime: '2019-11-08', author: '秋天书店', type: '冒险，奇幻', img: require('../assets/img/html_cover.png'), showWord: true },
        { id: 5, name: 'html page cover', createTime: '2019-11-08', author: '秋天书店', type: '冒险，奇幻', img: require('../assets/img/html_cover.png'), showWord: true },
        { id: 6, name: 'html page cover', createTime: '2019-11-08', author: '秋天书店', type: '冒险，奇幻', img: require('../assets/img/html_cover.png'), showWord: true },
        { id: 7, name: 'html page cover', createTime: '2019-11-08', author: '秋天书店', type: '冒险，奇幻', img: require('../assets/img/html_cover.png'), showWord: true },
        { id: 8, name: 'html page cover', createTime: '2019-11-08', author: '秋天书店', type: '冒险，奇幻', img: require('../assets/img/html_cover.png'), showWord: true },
        { id: 9, name: 'html page cover', createTime: '2019-11-08', author: '秋天书店', type: '冒险，奇幻', img: require('../assets/img/html_cover.png'), showWord: true },
        { id: 10, name: 'html page cover', createTime: '2019-11-08', author: '秋天书店', type: '冒险，奇幻', img: require('../assets/img/html_cover.png'), showWord: true }
      ],
      updateItems: [
        { updateDate: '今天',
          isShow: true,
          updateCards: [
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' }
          ]
        },
        { updateDate: '昨天',
          isShow: false,
          updateCards: [
            { name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~', img: require('../assets/img/card.png'), type: '恋爱，搞笑，校园，日常' }
          ]
        },
        { updateDate: '周三',
          isShow: false,
          updateCards: [
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' }
          ]
        },
        { updateDate: '周二',
          isShow: false,
          updateCards: [
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' }
          ]
        },
        { updateDate: '周一',
          isShow: false,
          updateCards: [
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' }
          ]
        },
        { updateDate: '周日',
          isShow: false,
          updateCards: [
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' }
          ]
        },
        { updateDate: '周六',
          isShow: false,
          updateCards: [
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' },
            { name: '抱歉，我要毁灭一下这个地球', img: require('../assets/img/card2.png'), type: '奇幻，校园，智斗' }
          ]
        }

      ]
    }
  }
}
</script>

<template>
  <el-container>
    <!-- header -->
    <el-header style="height:auto">
      <nav-head :user="user"></nav-head>
      <carousel :carousels="carousels"></carousel>
      <nav-bar></nav-bar>
    </el-header>
    <!-- main -->
    <el-main>
      <el-row class="common-content-row">
        <el-col>
          <div>
            <p></p>
          </div>
        </el-col>
        <el-col>
          <div class="common-content">
            <!-- 漫画推荐 -->
            <recommond :recommondItems="recommondItems"
                       :rankinglist="rankinglist"></recommond>
            <!-- 更新表 -->
            <update-table :updateItems="updateItems"></update-table>
          </div>
        </el-col>
        <el-col>
          <div>
            <p></p>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <!-- footer -->
    <el-footer style="height:auto">
      <footer-bar></footer-bar>
    </el-footer>
  </el-container>

</template>

<style scoped>
@import "../assets/css/common.css";
</style>

3.2、个人界面

<script>
// @ is an alias to /src
import NavHead from '@/components/NavHead.vue'
import FooterBar from '@/components/FooterBar.vue'
import PersonFirstPage from '@/components/PersonFirstPage.vue'
import PersonMyInfo from '@/components/PersonMyInfo.vue'
import PersonHeadPicture from '@/components/PersonHeadPicture.vue'
import PersonSecure from '@/components/PersonSecure.vue'
import PersonBlackList from '@/components/PersonBlackList.vue'
import PersonMySmoney from '@/components/PersonMySmoney.vue'
import PersonMyRecord from '@/components/PersonMyRecord.vue'
export default {
  name: 'home',
  components: {
    NavHead,
    FooterBar,
    PersonFirstPage,
    PersonMyInfo,
    PersonHeadPicture,
    PersonSecure,
    PersonBlackList,
    PersonMySmoney,
    PersonMyRecord
  },
  data: function () {
    return {
      pageName: '个人中心',
      visible: false,
      user: null,
      isCollapse: true,
      pages: [
        { title: '首页', components: 'PersonFirstPage', iconClass: 'el-icon-s-home' },
        { title: '我的信息', components: 'PersonMyInfo', iconClass: 'el-icon-tickets' },
        { title: '我的头像', components: 'PersonHeadPicture', iconClass: 'el-icon-s-custom' },
        { title: '账号安全', components: 'PersonSecure', iconClass: 'el-icon-lock' },
        { title: '黑名单管理', components: 'PersonBlackList', iconClass: 'el-icon-close-notification' },
        { title: '我的硬币', components: 'PersonMySmoney', iconClass: 'el-icon-coin' },
        { title: '我的记录', components: 'PersonMyRecord', iconClass: 'el-icon-notebook-1' },
        { title: '实名认证', components: 'PersonFirstPage', iconClass: 'el-icon-bank-card' },
        { title: '个人空间   >', components: 'PersonFirstPage', iconClass: 'el-icon-menu' },
        { title: '我的钱包   >', components: 'PersonFirstPage', iconClass: 'el-icon-s-finance' },
        { title: '后台管理   >', components: 'PersonFirstPage', iconClass: 'el-icon-setting' }

      ],
      currentTabComponent: 'PersonFirstPage',
      subTitle: '首页'
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    changePage (index) {
      // console.log(this.pages[index].title)
      // this.subTitle = this.pages[index].title
      // this.pages.forEach(element => {
      //   element.isShow = false
      // })
      // this.pages[index].isShow = true
      this.currentTabComponent = this.pages[index].components
    }

  }
}
</script>

<template>
  <el-container class="home">
    <!-- header -->
    <el-header style="height:auto">
      <nav-head :user="user"></nav-head>
    </el-header>
    <!-- main -->
    <el-main>
      <el-row class="common-content-row">
        <el-col>
          <div class="grid-content">
            <p></p>
          </div>
        </el-col>
        <el-col>
          <div class="grid-content person-center common-content">
            <el-container class="person-center-container">
              <div class="menu">
                <el-menu default-active="1-11-1"
                         class="el-menu-vertical-demo"
                         @open="handleOpen"
                         @close="handleClose">
                  <div class="main-title">{{pageName}}</div>
                  <!-- <el-menu-item v-for="(page,idx) in pages"
                                :key="idx"
                                @click="changePage(idx)">
                    <div class="left-item">
                      <i :class="page.iconClass"></i>
                      <span slot="title">{{page.title}}</span>
                    </div>
                  </el-menu-item> -->
                  <el-menu-item index="0"
                                @click="changePage(0)">
                    <div class="left-item">
                      <i :class="pages[0].iconClass"></i>
                      <span slot="title">{{pages[0].title}}</span>
                    </div>
                  </el-menu-item>
                  <el-menu-item index="1"
                                @click="changePage(1)">
                    <div class="left-item">
                      <i :class="pages[1].iconClass"></i>
                      <span slot="title">{{pages[1].title}}</span>
                    </div>
                  </el-menu-item>
                  <el-menu-item index="2"
                                @click="changePage(2)">
                    <div class="left-item">
                      <i :class="pages[2].iconClass"></i>
                      <span slot="title">{{pages[2].title}}</span>
                    </div>
                  </el-menu-item>
                  <el-menu-item index="3"
                                @click="changePage(3)">
                    <div class="left-item">
                      <i :class="pages[3].iconClass"></i>
                      <span slot="title">{{pages[3].title}}</span>
                    </div>
                  </el-menu-item>
                  <el-menu-item index="4"
                                @click="changePage(4)">
                    <div class="left-item">
                      <i :class="pages[4].iconClass"></i>
                      <span slot="title">{{pages[4].title}}</span>
                    </div>
                  </el-menu-item>
                  <el-menu-item index="5"
                                @click="changePage(5)">
                    <div class="left-item">
                      <i :class="pages[5].iconClass"></i>
                      <span slot="title">{{pages[5].title}}</span>
                    </div>
                  </el-menu-item>
                  <el-menu-item index="6"
                                @click="changePage(6)">
                    <div class="left-item">
                      <i :class="pages[6].iconClass"></i>
                      <span slot="title">{{pages[6].title}}</span>
                    </div>
                  </el-menu-item>
                  <el-menu-item index="7"
                                @click="changePage(7)">
                    <div class="left-item">
                      <i :class="pages[7].iconClass"></i>
                      <span slot="title">{{pages[7].title}}</span>
                    </div>
                  </el-menu-item>
                  <el-menu-item index="8"
                                @click="changePage(8)">
                    <div class="left-item">
                      <i :class="pages[8].iconClass"></i>
                      <span slot="title">{{pages[8].title}}</span>
                    </div>
                  </el-menu-item>
                  <el-menu-item index="9"
                                @click="changePage(9)">
                    <div class="left-item">
                      <i :class="pages[9].iconClass"></i>
                      <span slot="title">{{pages[9].title}}</span>
                    </div>
                  </el-menu-item>
                  <el-menu-item index="10"
                                @click="changePage(10)">
                    <div class="left-item">
                      <i :class="pages[10].iconClass"></i>
                      <span slot="title">{{pages[10].title}}</span>
                    </div>
                  </el-menu-item>

                </el-menu>
              </div>
              <el-main>
                <div class="sub-title">{{subTitle}}</div>
                <div>
                  <keep-alive>
                    <component v-bind:is="currentTabComponent"></component>
                  </keep-alive>
                  <!-- 首页 -->
                  <!-- <div v-show="pages[0].isShow">
                    <person-first-page></person-first-page>
                  </div> -->
                  <!-- 我的信息 -->
                  <!-- <div v-show="pages[1].isShow">
                    <person-my-info></person-my-info>
                  </div> -->
                  <!-- 我的头像 -->
                  <!-- <div v-show="pages[2].isShow">
                    <person-head-picture></person-head-picture>
                  </div> -->
                  <!-- 账号安全 -->
                  <!-- <div v-show="pages[3].isShow">
                    <person-secure></person-secure>
                  </div> -->
                  <!-- 黑名单管理 -->
                  <!-- <div v-show="pages[4].isShow">
                    <person-black-list></person-black-list>
                  </div> -->
                  <!-- 我的硬币 -->
                  <!-- <div v-show="pages[5].isShow">
                    <person-my-smoney></person-my-smoney>
                  </div> -->
                  <!-- 我的记录 -->
                  <!-- <div v-show="pages[6].isShow">
                    <person-my-record></person-my-record>
                  </div> -->
                  <!-- 实名认证 -->
                  <!-- <div v-show="pages[7].isShow">实名认证还没做，敬请期待</div> -->
                  <!-- 个人空间 -->
                  <!-- <div v-show="pages[8].isShow">个人空间</div> -->
                  <!-- 我的钱包 -->
                  <!-- <div v-show="pages[9].isShow">我的钱包</div> -->
                  <!-- 后台管理 -->
                  <!-- <div v-show="pages[10].isShow">后台管理</div> -->

                </div>
              </el-main>
            </el-container>
          </div>
        </el-col>
        <el-col>
          <div class="grid-content">
            <p></p>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <!-- footer -->
    <el-footer style="height:auto">
      <footer-bar></footer-bar>
    </el-footer>
  </el-container>

</template>

<style scoped>
@import "../assets/css/common.css";
.el-main {
  padding: 20px;
}
.el-header {
  padding: 0;
  height: auto;
}
.menu {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: baseline;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}
.left-item {
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
}
.person-center-container {
  box-shadow: 0 0 5px 1px rgba(158, 179, 193, 0.5);
  height: 100%;
}
.person-center {
  height: auto;
  min-height: 750px;
}
.main-title {
  font-size: 20px;
  padding-left: 20px;
  /* padding-top: 20px; */
  height: 56px;
  width: 200px;
  text-align: left;
  border-bottom: 1px #e6e6e6 solid;
  line-height: 56px;
}
.sub-title {
  font-size: 14px;
  width: 100%;
  height: 36px;
  color: #409eff;
  border-bottom: 1px #e6e6e6 solid;
  line-height: 16px;
}
</style>

总结

以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站，获取