完成首页布局和部分接口调用

package.json

@@ -9,13 +9,16 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@xunlei/vue-lazy-component": "^1.1.3",
     "animejs": "^3.2.1",
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.9",
     "js-cookie": "^3.0.1",
     "mockjs": "^1.1.0",
+    "node-sass": "^7.0.1",
     "qrcodejs2": "^0.0.2",
+    "sass-loader": "^13.0.2",
     "svgo": "^2.8.0",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
@@ -37,7 +40,6 @@
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-vue": "^8.0.3",
     "sass": "^1.32.7",
-    "sass-loader": "^12.0.0",
     "svg-sprite-loader": "^6.0.11",
     "vue-template-compiler": "^2.6.14"
   },

src/api/culturalRelic.js

@@ -24,3 +24,10 @@ export function crRecommendByPage(data) {
   })
 } 
 
+export function getRecommendCr(params){
+  return request({
+    url: '/bizCrRecommend/list',
+    method: 'get',
+    params
+  })
+}

src/api/display.js

@@ -15,3 +15,11 @@ export function getDisplayById(params) {
     params
   })
 }
+
+export function getRecommendDisplay(params){
+  return request({
+    url: '/bizERecommend/list',
+    method: 'get',
+    params
+  })
+}
\ No newline at end of file

src/assets/fonts/font.css

+@font-face {
+    font-family: 'Alibaba-PuHuiTi';
+    src: url('./Alibaba-PuHuiTi-Regular.ttf');
+}
\ No newline at end of file

src/assets/styles/index.scss

+@import url('@/assets/fonts/font.css');
 #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -15,4 +16,7 @@
   ul,
   li {
     box-sizing: border-box;
+  }
+  ul,li{
+    list-style: none;
   }
\ No newline at end of file

src/components/Footer/index.vue

@@ -19,6 +19,8 @@ export default {
     padding: 0 24px;
     justify-content: center;
     align-items: center;
+    background-color: #2069C4;
+    color: #fff;
     span{
         margin-right: 16px;
     }

src/components/NavBar/index.vue

 <template>
   <div class="nav">
     <div class="container">
-      <div class="title">贵州省精品展览展示平台</div>
+      <div class="logo-container">
+        <img src="@/assets/imgs/home/logo.png" />
+      </div>
       <div class="right">
         <div class="tabs">
-          <router-link
-            :to="item.path"
+          <div
+            class="tab-item"
             v-for="(item, index) in pages"
             :key="index"
-            :class="['tab-item', currentTab == item ? 'active' : '']"
             @click="handleClickTab(item)"
-            >{{ item.name }}</router-link
           >
+            <router-link :to="item.path">{{ item.name }} </router-link>
+            <svg-icon
+              icon-class="subscript"
+              v-show="currentTab.name == item.name"
+            ></svg-icon>
+          </div>
         </div>
-        <div class="operation">
-          <span v-if="hasToken && userInfo.username" class="operation-item"
-            >欢迎你，{{ userInfo.username }}</span
-          >
-          <!-- <router-link v-if="!hasToken" to="/login" class="operation-item"
-            >登陆</router-link
-          > -->
-          <span v-if="!hasToken" @click="handleToLogin" class="operation-item"
-            >登陆</span
-          >
-          <router-link v-if="hasToken" to="/personal" class="operation-item"
-            >个人中心</router-link
-          >
-          <span class="logout" v-if="hasToken">
-            <el-popover
-              placement="bottom"
-              width="200"
-              trigger="click"
-              v-model="logoutDialogVisible"
-            >
-              <p>确定退出吗？</p>
-              <div style="text-align: right; margin: 0">
-                <el-button
-                  size="mini"
-                  type="text"
-                  @click="logoutDialogVisible = false"
-                  >取消</el-button
+        <div class="tools">
+          <div class="wrapper">
+            <el-dropdown trigger="click">
+              <el-button round>
+                <i class="el-icon-user"></i>
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  ><span
+                    v-if="!hasToken"
+                    @click="handleToLogin"
+                    class="operation-item"
+                    >登陆</span
+                  ></el-dropdown-item
                 >
-                <el-button type="primary" size="mini" @click="handleLogOut"
-                  >确定</el-button
+                <el-dropdown-item
+                  ><router-link
+                    v-if="hasToken"
+                    to="/personal"
+                    class="operation-item"
+                    >个人中心</router-link
+                  ></el-dropdown-item
                 >
-              </div>
-              <span class="operation-item" slot="reference">退出</span>
-            </el-popover>
-          </span>
+                <el-dropdown-item>
+                  <span v-if="hasToken" @click="handleLogOut">退出</span>
+                  <!-- <span class="logout" v-if="hasToken">
+                    <el-popover
+                      placement="bottom"
+                      width="200"
+                      trigger="click"
+                      v-model="logoutDialogVisible"
+                    >
+                     
+                      <p>确定退出吗？</p>
+                      <div style="text-align: right; margin: 0">
+                        <el-button
+                          size="mini"
+                          type="text"
+                          @click="logoutDialogVisible = false"
+                          >取消</el-button
+                        >
+                        <el-button
+                          type="primary"
+                          size="mini"
+                         
+                          >确定</el-button
+                        >
+                      </div>
+                    </el-popover> -->
+                  <!-- </span> -->
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <!-- 
+          
+           -->
         </div>
       </div>
     </div>
@@ -94,7 +123,10 @@ export default {
       ],
       userName: "",
       logoutDialogVisible: false,
-      currentTab: "",
+      currentTab: {
+        name: "首页",
+        path: "/",
+      },
     };
   },
   methods: {
@@ -120,63 +152,77 @@ export default {
 
 <style lang="scss" scoped>
 a {
-  color: #000;
+  color: #fff;
   text-decoration: none;
 }
 .nav {
-  height: 120px;
+  height: 100px;
   width: 100%;
-  // background-color: #1e5fbb;
-  //  box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
   .container {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 100px;
+    padding: 0 70px 0 100px;
     .title {
-      font-size: 30px;
-      // font-weight: bold;
-      font-family: LiSu;
-      min-width: 330px;
-      // color: #c8945b;
     }
     .right {
       display: flex;
-
+      height: 100%;
+      align-items: center;
       .tabs {
         display: flex;
         margin-right: 100px;
         min-width: 512px;
+        // height: 100%;
+
         .tab-item {
-          margin-right: 40px;
-          // min-width: 64px;
-          // color: #fff;
-        }
-        .router-link-exact-active {
+          margin-right: 90px;
+          color: #fff;
+          // height: 100%;
+          display: flex;
+          align-items: center;
+          font-family: "Alibaba-PuHuiTi";
           position: relative;
-          &::after {
-            content: "";
+          .svg-icon {
             position: absolute;
-            width: 100%;
-            height: 2px;
-            bottom: -4px;
-            left: 0;
-            background-color: #000;
+            bottom: -16px;
+            left: 24%;
+            transform: scale(1.5);
           }
         }
-        // .router-link-active{}
-      }
-      .operation {
-        min-width: 270px;
-        .operation-item {
-          margin: 0 8px;
-          cursor: pointer;
-          // color: #fff;
-        }
       }
     }
   }
 }
+
+::v-deep .tools {
+  .el-button {
+    background: transparent;
+    border-color: #fff;
+    color: #fff;
+    i {
+      font-size: 16px;
+    }
+  }
+}
+
+.el-dropdown-menu {
+  background-color: transparent;
+}
+.el-dropdown-menu__item {
+  background-color: transparent;
+  color: #fff;
+}
+
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
 </style>
\ No newline at end of file

src/icons/svg/subscript.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1658200108478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9665" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M491.224 750.113c-0.33 0-0.661-0.008-0.993-0.024-11.033-0.54-19.539-9.92-19-20.953a461.34 461.34 0 0 0 0.544-22.41c0-44.532-6.428-88.526-19.105-130.76-3.175-10.58 2.827-21.73 13.406-24.906 10.58-3.174 21.73 2.827 24.906 13.406 13.797 45.967 20.793 93.83 20.793 142.26 0 8.13-0.199 16.327-0.592 24.363-0.523 10.7-9.363 19.024-19.959 19.024z" p-id="9666"></path><path d="M293.842 632.146c-14.496 0-29.083-0.852-43.357-2.532-5.485-0.646-9.408-5.616-8.762-11.101 0.646-5.485 5.615-9.406 11.101-8.762a352.021 352.021 0 0 0 41.018 2.396c62.443 0 123.676-16.744 177.078-48.422 4.75-2.818 10.885-1.251 13.703 3.499 2.818 4.75 1.251 10.885-3.499 13.703-56.489 33.508-121.25 51.219-187.282 51.219zM367.527 560.626c-78.965 0-153.237-30.717-209.132-86.492-3.91-3.901-3.916-10.232-0.015-14.142s10.232-3.916 14.142-0.015c52.12 52.007 121.374 80.649 195.005 80.649 5.927 0 11.922-0.19 17.821-0.565 5.513-0.352 10.264 3.834 10.614 9.346s-3.834 10.264-9.346 10.614c-6.318 0.401-12.741 0.605-19.089 0.605z" p-id="9667"></path><path d="M491.015 750.095c-0.362 0-0.725-0.01-1.091-0.029a380.826 380.826 0 0 1-20.371-1.647c-91.996-9.943-176.968-53.397-239.264-122.358-62.758-69.473-97.32-159.336-97.32-253.036 0-28.192 3.121-56.3 9.275-83.543a20 20 0 0 1 39.016-0.002c31.765 140.565 149.348 245.408 292.59 260.89 10.982 1.187 18.922 11.052 17.735 22.033-1.187 10.982-11.05 18.921-22.033 17.735-78.819-8.519-151.782-41.093-211.001-94.2-28.786-25.815-53.358-55.734-73.032-88.926a377.536 377.536 0 0 1-12.362-22.572c5.548 167.702 132.952 306.082 300.693 324.211a341.216 341.216 0 0 0 18.222 1.474c11.03 0.593 19.49 10.016 18.897 21.045-0.573 10.663-9.401 18.925-19.954 18.925zM532.775 750.113c-10.6 0-19.439-8.327-19.96-19.029a503.82 503.82 0 0 1-0.591-24.358c0-48.431 6.996-96.294 20.794-142.26 3.175-10.58 14.328-16.583 24.906-13.406 10.58 3.176 16.582 14.327 13.406 24.906-12.678 42.233-19.106 86.227-19.106 130.76 0 7.456 0.183 14.998 0.544 22.415 0.537 11.033-7.972 20.411-19.005 20.948-0.331 0.016-0.66 0.024-0.988 0.024z" p-id="9668"></path><path d="M730.156 632.146c-66.031 0-130.791-17.712-187.28-51.221-4.75-2.817-6.316-8.953-3.499-13.703 2.817-4.75 8.953-6.316 13.703-3.499 53.402 31.678 114.633 48.422 177.076 48.422 13.717 0 27.518-0.806 41.021-2.396 5.483-0.643 10.455 3.277 11.101 8.763 0.646 5.485-3.278 10.455-8.763 11.101a372.19 372.19 0 0 1-43.359 2.533zM656.473 560.626c-6.347 0-12.77-0.204-19.09-0.605-5.512-0.35-9.696-5.102-9.346-10.614a9.995 9.995 0 0 1 10.614-9.346c5.899 0.375 11.896 0.565 17.822 0.565 73.629 0 142.884-28.642 195.005-80.649 3.91-3.901 10.241-3.895 14.142 0.015s3.894 10.241-0.015 14.142c-55.898 55.775-130.169 86.492-209.132 86.492z" p-id="9669"></path><path d="M532.984 750.095c-10.553 0-19.38-8.262-19.954-18.926-0.593-11.03 7.867-20.452 18.896-21.046a340.843 340.843 0 0 0 18.221-1.474C717.888 690.52 845.293 552.14 850.841 384.437a377.561 377.561 0 0 1-12.362 22.573c-19.674 33.192-44.246 63.111-73.032 88.926-59.219 53.107-132.183 85.682-211.003 94.2-10.985 1.179-20.847-6.754-22.033-17.735-1.187-10.981 6.753-20.846 17.735-22.033 143.243-15.481 260.827-120.325 292.592-260.89a20.001 20.001 0 0 1 19.508-15.591h0.001a20 20 0 0 1 19.507 15.593c6.154 27.244 9.275 55.352 9.275 83.543 0 93.7-34.563 183.563-97.321 253.036-62.296 68.961-147.269 112.415-239.264 122.358a380.5 380.5 0 0 1-20.369 1.647c-0.364 0.021-0.729 0.031-1.091 0.031z" p-id="9670"></path></svg>
\ No newline at end of file

src/icons/svg/user-border.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1658201433212" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11503" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M642.8 531.8c64.3-42.6 106.9-115.4 106.9-198.1C749.7 202.6 643.1 96 512 96S274.3 202.6 274.3 333.7c0 82.7 42.6 155.6 106.9 198.1C215.8 582.9 96 727.7 96 898.3c0 16.4 13.3 29.7 29.7 29.7s29.7-13.3 29.7-29.7c0-180.2 159.9-326.9 356.6-326.9 196.6 0 356.6 146.6 356.6 326.9 0 16.4 13.3 29.7 29.7 29.7s29.7-13.3 29.7-29.7c0-170.6-119.8-315.4-285.2-366.5zM333.7 333.7c0-98.3 80-178.3 178.3-178.3s178.3 80 178.3 178.3S610.3 512 512 512s-178.3-80-178.3-178.3z" fill="#47444F" p-id="11504"></path></svg>
\ No newline at end of file

src/main.js

@@ -7,14 +7,20 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 // import * as echarts from 'echarts'
 import './icons'
+import dict from '@/components/Dict'
+import VueLazyComponent from '@xunlei/vue-lazy-component'
 // import '@/permission' // permission control
 
 Vue.config.productionTip = false
 Vue.use(ElementUI);
 // Vue.prototype.$echarts = echarts
-import dict from '@/components/Dict'
+
+// 全局注册字典组件
 Vue.use(dict);
 
+// 全局注册懒加载方案
+Vue.use(VueLazyComponent)
+
 new Vue({
   router,
   store,

src/views/home/components/Boutique.vue

+<template>
+  <el-carousel height="100vh" style="width: 100%">
+    <el-carousel-item>
+      <div>
+        <img src="@/assets/imgs/boutique/1.jpg" width="100%" />
+      </div>
+    </el-carousel-item>
+    <!-- <el-carousel-item
+      v-for="(item, index) in ['精品展1', '精品展2', '精品展3']"
+      :key="index"
+    >
+      <h3
+        class="small"
+        style="
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+      >
+        {{ item }}
+      </h3>
+    </el-carousel-item> -->
+  </el-carousel>
+</template>
+
+<script>
+export default {
+  name: "Boutique",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-carousel__container{
+  width: 100%;
+}
+</style>>
\ No newline at end of file

src/views/home/components/CulturalRelic.vue

+<!-- -->
+<template>
+  <div class="home-cr">
+    <div class="title">
+      <div class="ch">每日推送</div>
+      <div class="en">Daily Exhibition Push</div>
+    </div>
+    <div class="text">文物</div>
+    <div class="list">
+      <el-carousel indicator-position="outside" :autoplay="false" arrow="never">
+        <el-carousel-item>
+          <el-row :gutter="14">
+            <el-col
+              :span="6"
+              v-for="item in list1"
+              :key="item"
+              class="container"
+            >
+              <img src="@/assets/imgs/test/relic.png" alt="" width="100%" />
+            </el-col>
+          </el-row>
+        </el-carousel-item>
+        <el-carousel-item>
+          <el-row :gutter="14">
+            <el-col
+              :span="6"
+              v-for="item in list2"
+              :key="item"
+              class="container"
+            >
+              <img src="@/assets/imgs/test/relic.png" alt="" width="100%" />
+            </el-col>
+          </el-row>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRecommendCr } from "@/api/culturalRelic";
+export default {
+  data() {
+    return {
+      list1: [1, 2, 3, 4, 5, 6, 7, 8],
+      list2: [1, 2, 3, 4, 5, 6, 7, 8],
+    };
+  },
+  mounted() {
+    // this.loadList();
+  },
+  methods: {
+    async loadList() {
+      const params = {
+        page: 1,
+        limit: 6,
+      };
+      let res = await getRecommendCr();
+      console.log(res);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.home-cr {
+  background-image: url("@/assets/imgs/home/display-bg.png");
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 60px 0 0 0;
+    font-family: "Alibaba PuHuiTi";
+    .ch {
+      font-size: 30px;
+      font-weight: bold;
+      color: #fff;
+      margin-bottom: 12px;
+    }
+    .en {
+      font-size: 14px;
+      color: #fff;
+      margin-bottom: 80px;
+    }
+  }
+  .text {
+    color: #fff;
+    margin-bottom: 36px;
+    font-family: "Alibaba PuHuiTi";
+  }
+  .list {
+    width: 100%;
+    padding: 0 14% 0 14%;
+    height: 492px;
+  }
+
+  .container {
+    // width: 339px;
+    height: 226px;
+    margin-bottom: 40px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+::v-deep .el-carousel__container {
+  height: 492px;
+}
+</style>

src/views/home/components/Display.vue

+<!-- -->
+<template>
+  <div class="home-display">
+    <div class="title">展览</div>
+    <div class="wrapper">
+      <div class="content">
+        <div class="content-name">汉抚琴俑</div>
+        <div class="content-intro">
+          “琴、弦乐也，神农所作”。琴乃中国历代文人雅士所崇尚的传统乐器，至汉代更成为八音之首，并形成了一整套的演奏礼制。所谓“琴者，禁也”，即要求抚琴之人须于演奏之前淋浴净身、焚香礼拜，并且摒弃一切私欲杂念，做到琴人合一，以求天籁之音。可见古人对于琴何其器重！琴，作为极具张力的弹弦乐器，从娱神、娱人到自娱，要么以独奏形式出现，要么同竽、箫、鼓、钹等乐器组合演奏，成为中国古代音乐体系中，特别是汉代“弦歌”中既常见、且十分重要的一种演奏形式。这一点可以从同期汉画或汉墓陶俑中得以充分验证。抚琴俑作为汉俑名品，在海内外极负盛名，影响深远。
+        </div>
+      </div>
+      <div class="img">
+        <img src="@/assets/imgs/test/display1.png" alt="" />
+        <div class="img-name">汉抚琴俑</div>
+      </div>
+      <div class="pagination">
+        <ul>
+          <li
+            v-for="(item, index) in [1, 2, 3, 4]"
+            :key="index"
+            :class="currentPage == item ? 'active' : ''"
+            @click="handleChangePage(item)"
+          >
+            {{ item }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRecommendDisplay } from "@/api/display";
+export default {
+  data() {
+    return {
+      list: [],
+      currentPage:1
+    };
+  },
+  mounted() {
+    this.loadList();
+  },
+  methods: {
+    async loadList() {
+      const params = {
+        page: 1,
+        limit: 6,
+      };
+      let res = await getRecommendDisplay();
+    },
+    handleChangePage(page){
+      this.currentPage =page
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.home-display {
+  background-image: url("@/assets/imgs/home/cr-bg.png");
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  padding: 0 13%;
+  
+  .title {
+    color: #fff;
+    margin-top: 70px;
+    margin-bottom: 90px;
+    font-family: "Alibaba PuHuiTi";
+  }
+  .wrapper {
+    display: flex;
+    width: 100%;
+    .content {
+      width: 800px;
+      .content-name {
+        font-size: 20px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #ffffff;
+        margin-bottom: 40px;
+        font-family: "Alibaba PuHuiTi";
+      }
+      .content-intro {
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 40px;
+        font-family: "Alibaba PuHuiTi";
+      }
+    }
+    .img {
+      position: absolute;
+      top: 45%;
+      // transform: translateY(-50%);
+      right: 13%;
+    }
+    .img-name {
+      display: flex;
+      justify-content: center;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #88754d;
+    }
+    .pagination {
+      position: absolute;
+      bottom: 80px;
+      right: 13%;
+      ul {
+        display: flex;
+        li {
+          width: 22px;
+          height: 22px;
+          margin-right: 25px;
+          color: #999;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+        }
+        .active {
+          background: #2069c4;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/home/components/MuseumMap.vue

 <template>
-  <div class="museum-map">
-    <div class="list">
+  <div class="home-museum-map">
+    <div class="title">
+      <div class="ch">文博地图</div>
+      <div class="en">Museum Map</div>
+    </div>
+    <div class="wrapper">
+      <div class="content">
+        <div class="name">黔西南州博物馆</div>
+        <div class="intro">
+          黔西南州博物馆位于兴义市桔山广场州民族文化中心二楼、三楼和四楼，隶属黔西南州文化广电旅游局，属正科级公益性文化事业单位。馆藏文物3949件（套），其中一级文物32件（套），二级文物15件（套），三级文物60件（套）。其中，抚琴俑、铜车马、摇钱树、连枝灯、提梁壶、一字格剑等已被列入国家精品文物名录。博物馆实际使用面积7240平方米，其中展厅面积2540平方米，文物库房面积858平方米，其他业务用房（临时展厅、文创展区、文物修复室、数据采集室、文物鉴定室、学术报告厅、观众休息区、文物技术保护室等）面积1930平方米，办公用房70平方米。馆内设有陈列展览部、社会教育部、文物保护部、考古发掘部、征集保管部、安全保卫部、文创研发部等部室。现有基本陈列《夜郎的疑问-黔西南州考古成果展》对公众免费开放，展览分道不相通、一州之主、汉之广大三部分。构思取材于司马迁《史记》记载的“夜郎自大”典故。展出文物涵盖前夜郎、夜郎、后夜郎三个时期，共计400余件（套），展览同步有二维、三维等文物数字化推送，日接待观众1000人次以内。
+        </div>
+      </div>
+      <div class="map"></div>
+    </div>
+    <!-- <div class="list">
       <ul class="vertical-text">
         <li v-for="(item, index) in test" :key="index" class="blue">
           {{ item }}
         </li>
       </ul>
     </div>
-    <div class="map" ref="map"></div>
+    <div class="map" ref="map"></div> -->
   </div>
 </template>
 
@@ -23,8 +36,8 @@ export default {
     };
   },
   mounted() {
-    this.init();
-    this.initAnimate();
+    // this.init();
+    // this.initAnimate();
   },
   methods: {
     init() {
@@ -108,18 +121,49 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.museum-map {
-  height: 100%;
-  width: 100%;
+.home-museum-map {
+  background-color: #fff;
   display: flex;
-
-  .map {
-    width: 100%;
-    height: 100%;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  padding: 164px 13% 114px 13%;
+  .title {
+    color: #333;
+    margin-top: 70px;
+    margin-bottom: 90px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .ch {
+      font-size: 30px;
+      font-weight: bold;
+      color: #333333;
+      margin-bottom: 12px;
+    }
+    .en {
+      font-size: 14px;
+      color: #333333;
+    }
+  }
+  .wrapper {
+    display: flex;
+    .content {
+      width: 26%;
+      .name {
+        font-size: 20px;
+        font-family: "Alibaba PuHuiTi";
+        font-weight: 400;
+        color: #333333;
+        margin-bottom: 48px;
+      }
+      .intro {
+        font-size: 14px;
+        font-family: "Alibaba PuHuiTi";
+        font-weight: 300;
+        color: #333333;
+      }
+    }
   }
-}
-.vertical-text {
-  -webkit-writing-mode: vertical-rl;
-  writing-mode: vertical-rl;
 }
 </style>
\ No newline at end of file

src/views/home/components/Virtural.vue

+<!-- -->
+<template>
+  <div class="home-virtural">
+    <div class="title">
+      <div class="ch">虚拟展厅</div>
+      <div class="en">Virtual Exhibition Hall</div>
+    </div>
+    <div class="bar">
+      <img
+        src="@/assets/imgs/home/virtual-bg.png"
+        alt=""
+        class="bg"
+        width="100%"
+      />
+      <div class="intro" v-if="list.records.length > 0">
+        <div class="name">{{ list.records[0].name }}</div>
+        <div class="deptName">{{ list.records[0].deptName }}</div>
+        <div class="entrance" @click="handleClick(list.records[0])">
+          <span style="margin-right: 12px">点击进入</span>
+          <img src="@/assets/imgs/home/entrance.png" alt="" />
+        </div>
+      </div>
+      <div class="virtual-items">
+        <el-row :gutter="10">
+          <el-col
+            :span="8"
+            v-for="(item, index) in list.records"
+            :key="index"
+            class="item"
+            @click.native="handleClick(item)"
+          >
+            <img :src="item.faceImageUrl" alt="" />
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getVirtualList } from "@/api/vitual";
+export default {
+  data() {
+    return {
+      list: {
+        records: [],
+        size: 6,
+        current: 1,
+        total: 0,
+      },
+    };
+  },
+  mounted() {
+    this.loadData();
+  },
+  methods: {
+    // TODO:后面替换成随机推荐
+    async loadData() {
+      var params = {
+        page: this.list.current,
+        limit: this.list.size,
+      };
+      let res = await getVirtualList(params);
+      if (res.code == 0) {
+        this.list = res.data;
+      }
+    },
+
+    handleClick(item) {
+      window.open(item.url);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.home-virtural {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  .title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 60px 0 120px 0;
+    font-family: "Alibaba PuHuiTi";
+    .ch {
+      font-size: 30px;
+      font-weight: bold;
+      color: #333333;
+      margin-bottom: 12px;
+    }
+    .en {
+      font-size: 14px;
+      color: #333333;
+    }
+  }
+  .bar {
+    height: 524px;
+    position: relative;
+    .bg {
+      height: 100%;
+    }
+    .intro {
+      position: absolute;
+      left: 13%;
+      top: 45px;
+      .name {
+        margin-bottom: 27px;
+        font-size: 20px;
+        font-family: "Alibaba PuHuiTi";
+        font-weight: bold;
+        color: #ffffff;
+      }
+      .deptName {
+        font-size: 16px;
+        font-family: "Alibaba PuHuiTi";
+        color: #ffffff;
+        margin-bottom: 85px;
+      }
+      .entrance {
+        color: #fff;
+        font-size: 16px;
+        cursor: pointer;
+        font-family: "Alibaba PuHuiTi";
+      }
+    }
+    .virtual-items {
+      position: absolute;
+      width: 965px;
+      top: -58px;
+      right: 13%;
+      img {
+        width: 316px;
+        height: 238px;
+      }
+      .item {
+        margin-bottom: 5px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/views/home/index.vue

 <template>
+  <!-- <child1 slot="skeleton" /> -->
   <div class="home">
-    <div class="recommend-list">
-      <div class="recommend-item">
-        <div class="recommend-item-container boutique">
-          <!-- <NavBar class="navBar" /> -->
-          <el-carousel height="100vh" style="width: 100%">
-            <el-carousel-item
-              v-for="(item, index) in ['精品展1', '精品展2', '精品展3']"
-              :key="index"
-            >
-              <h3
-                class="small"
-                style="
-                  height: 100%;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                "
-              >
-                {{ item }}
-              </h3>
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-        <div class="recommend-item-container virtural">
-          <div class="img" @click="handleClickVitual()">
-            <img src="@/assets/imgs/virtual/1.png" alt="" />
-            <div class="desc">
-              <span class="name">贵州世居民族展历史篇</span>——
-              <span class="deptName">贵州省民族博物馆</span>
-            </div>
-            <div class="play">
-              <i class="el-icon-caret-right"></i>
-            </div>
-          </div>
-        </div>
-        <div class="recommend-item-container display">每日推送-布展</div>
-        <div class="recommend-item-container culturalRelic">每日推送-文物</div>
-        <div class="recommend-item-container musuem-map">文博地图</div>
-        <!-- <MuseumMap /> -->
-      </div>
-    </div>
+    <vue-lazy-component>
+      <Boutique class="home-item" />
+    </vue-lazy-component>
+    <vue-lazy-component>
+      <Virtural class="home-item" />
+    </vue-lazy-component>
+    <vue-lazy-component>
+      <CulturalRelic class="home-item" />
+    </vue-lazy-component>
+    <vue-lazy-component>
+      <Display class="home-item" />
+    </vue-lazy-component>
+
+      <vue-lazy-component>
+      <MuseumMap class="home-item" />
+    </vue-lazy-component>
     <!-- <Footer /> -->
   </div>
 </template>
@@ -48,46 +24,24 @@
 <script>
 import NavBar from "@/components/NavBar";
 import Footer from "@/components/Footer";
+import Boutique from "./components/Boutique.vue";
 import MuseumMap from "./components/MuseumMap.vue";
+import Virtural from "./components/Virtural.vue";
+import Display from "./components/Display.vue";
+import CulturalRelic from "./components/CulturalRelic.vue";
 export default {
-  components: { NavBar, Footer, MuseumMap },
+  components: {
+    NavBar,
+    Footer,
+    MuseumMap,
+    Boutique,
+    Virtural,
+    Display,
+    CulturalRelic,
+  },
   name: "Home",
   data() {
-    return {
-      dataList: [
-        {
-          id: 0,
-          key: "boutique",
-          label: "精品展推荐",
-          imgs: ["精品展1图片", "精品展2图片"],
-          color: "#869b94",
-        },
-        {
-          id: 2,
-          key: "virtual",
-          label: "虚拟展厅推荐",
-          color: "#f3ecef",
-        },
-        {
-          id: 3,
-          key: "display",
-          label: "布展推荐",
-          color: "#607271",
-        },
-        {
-          id: 4,
-          key: "culturalRelic",
-          label: "文物推荐",
-          color: "#f3ecef",
-        },
-        {
-          id: 5,
-          key: "文博地图",
-          label: "museum",
-          color: "#7c918a",
-        },
-      ],
-    };
+    return {};
   },
   methods: {
     handleClickVitual() {
@@ -101,80 +55,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.virtural {
-  .img {
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    // background-color: #fff;
-    cursor: pointer;
-    &:hover {
-      img {
-        transform: scale(1.1);
-      }
-      // .play {
-      //   width: 56px;
-      //   height: 56px;
-      //   i {
-      //     font-size: 46px;
-      //     color: #fff;
-      //   }
-      // }
-    }
-    img {
-      width: 100%;
-      height: 100%;
-      transition: all 0.5s ease;
-    }
-    .desc {
-      position: absolute;
-      width: 100%;
-      padding: 10px;
-      background-color: #fff;
-      opacity: 0.7;
-      bottom: 0;
-      left: 0;
-    }
-    .play {
-      width: 50px;
-      height: 50px;
-      border-radius: 50%;
-      border: 2px solid #fff;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      i {
-        font-size: 40px;
-        color: #fff;
-      }
-    }
-  }
-}
-.recommend-list {
+.home {
   display: flex;
   flex-direction: column;
-  .recommend-item {
-    .recommend-item-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100vh;
-      width: 100%;
-    }
-    .boutique {
-      position: relative;
-      flex-direction: column;
-      .navBar {
-        position: absolute;
-        top: 0;
-        z-index: 999;
-        // left: 0;
-      }
-    }
+  .home-item {
+    height: 100vh;
+    width: 100%;
   }
 }
 </style>
\ No newline at end of file