update

components/Card.vue

@@ -22,6 +22,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 0.15rem;
 }
 .card-hd__title {
   flex: 1;

components/Header.vue

 <template>
+  <div>
     <header class="main-header">
       <nuxt-link to="/" class="logo"></nuxt-link>
       <div class="search"></div>
       <div class="menu"></div>
     </header>
+    <app-menu></app-menu>
+  </div>
 </template>
+
+<script>
+import AppMenu from '@/components/Menu'
+export default {
+  components: { AppMenu }
+}
+</script>
+
 <style lang="scss">
 .main-header {
+  position: relative;
   display: flex;
   align-items: center;
   padding: 0.16rem 0.15rem 0.2rem;
   background-color: #fff;
   border-top: 10px solid #aa1941;
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.14);
   .logo {
     flex: 1;
     background: url('~/assets/images/logo.png') no-repeat;

components/Menu.vue

+<template>
+  <nav class="app-menu">
+    <ul>
+      <tree-item :item="item" v-for="(item, index) in list" :key="index" class="first"></tree-item>
+    </ul>
+  </nav>
+</template>
+
+<script>
+import TreeItem from '@/components/TreeItem'
+export default {
+  components: { TreeItem },
+  data() {
+    return {
+      list: [
+        {
+          name: '关于紫荆',
+          path: '/about/introduce',
+          children: [
+            {
+              name: '紫荆简介',
+              path: '/about/introduce'
+            },
+            {
+              name: '文化理念',
+              path: '/about/culture'
+            },
+            {
+              name: '新闻中心',
+              path: '/about/news'
+            },
+            {
+              name: '联系我们',
+              path: '/about/contact'
+            }
+          ]
+        },
+        {
+          name: '学位教育',
+          children: [
+            {
+              name: '本科',
+              children: [
+                {
+                  name: '海外留学SHMS',
+                  path: '',
+                  pathType: 3
+                }
+              ]
+            },
+            {
+              name: '硕士',
+              children: [
+                {
+                  name: '金融硕士MSF',
+                  path: 'https://kelley.ezijing.com',
+                  pathType: 1
+                },
+                {
+                  name: '教育学硕士Med（早教-蒙台梭利）',
+                  path: 'https://cu.ezijing.com',
+                  pathType: 1
+                },
+                {
+                  name: '应用心理学MAP',
+                  path: 'https://ciis.ezijing.com',
+                  pathType: 1
+                },
+                {
+                  name: '未来金融领袖计划',
+                  path: 'https://cfflp.ezijing.com',
+                  pathType: 1
+                }
+              ]
+            },
+            {
+              name: 'MBA',
+              children: [
+                {
+                  name: '通用MBA',
+                  pathType: 3
+                },
+                {
+                  name: '金融MBA',
+                  path: 'https://sofia.ezijing.com',
+                  pathType: 1
+                },
+                {
+                  name: '酒店与旅游工商管理MBA',
+                  path: 'https://shms.ezijing.com',
+                  pathType: 1
+                }
+              ]
+            },
+            {
+              name: '博士',
+              children: [
+                {
+                  name: '心理学博士DBA（即将推出）',
+                  pathType: 3
+                },
+                {
+                  name: '工商管理学博士EDD（即将推出）',
+                  pathType: 3
+                }
+              ]
+            }
+          ]
+        },
+        {
+          name: '教育服务',
+          children: [
+            {
+              name: '1+x',
+              children: [
+                {
+                  name: '金融产品数字化营销证书',
+                  path: 'http://x.ezijing.com',
+                  pathType: 1
+                },
+                {
+                  name: '数字金融客户服务证书',
+                  pathType: 3
+                },
+                {
+                  name: '酒店及旅游业的数字化营销证书',
+                  pathType: 3
+                },
+                {
+                  name: '青少年儿童心理以及行为指导证书',
+                  pathType: 3
+                }
+              ]
+            },
+            {
+              name: '专业共建',
+              pathType: 3
+            },
+            {
+              name: '校企合作',
+              pathType: 3
+            },
+            {
+              name: '产业学院',
+              pathType: 3
+            },
+            {
+              name: '双高建设',
+              pathType: 3
+            },
+            {
+              name: '在线教育解决方案',
+              children: [
+                {
+                  name: '产品技术',
+                  pathType: 3
+                },
+                {
+                  name: '技术支持',
+                  pathType: 3
+                },
+                {
+                  name: '联合运营',
+                  pathType: 3
+                }
+              ]
+            }
+          ]
+        },
+        {
+          name: '校友会',
+          path: '/alumnus',
+          children: [
+            {
+              name: '校友会',
+              path: '/alumnus'
+            }
+          ]
+        },
+        {
+          name: '我要报名'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.app-menu {
+  // position: fixed;
+  // left: 0;
+  // right: 0;
+  // top: 0.62rem;
+  // bottom: 0;
+  background-color: #fff;
+  // z-index: 100;
+  padding: 0 0.15rem;
+  .first > .cell .cell-title {
+    font-size: 0.14rem;
+    font-weight: bold;
+  }
+  .first > .tree-item-group {
+    padding: 0;
+  }
+}
+</style>

components/Search.vue

+<template>
+  <div></div>
+</template>
+
+<script>
+export default {}
+</script>

components/TreeItem.vue

+<template>
+  <li class="tree-item">
+    <div class="cell" :class="{ bold: isFolder }" @click="toggle">
+      <div class="cell-title">
+        {{ item.name }}
+      </div>
+      <div class="cell-icon" v-if="isFolder">
+        <van-icon name="arrow-up" v-if="isOpen" />
+        <van-icon name="arrow-down" v-else />
+      </div>
+    </div>
+    <ul v-show="isOpen" v-if="isFolder" class="tree-item-group">
+      <tree-item v-for="(child, index) in item.children" :key="index" :item="child"></tree-item>
+    </ul>
+  </li>
+</template>
+
+
+<script>
+export default {
+  props: {
+    item: Object
+  },
+  data: function () {
+    return {
+      isOpen: false
+    }
+  },
+  computed: {
+    isFolder: function () {
+      return this.item.children && this.item.children.length
+    }
+  },
+  methods: {
+    toggle: function () {
+      if (this.isFolder) {
+        this.isOpen = !this.isOpen
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.tree-item {
+  .cell {
+    display: flex;
+    align-items: center;
+    height: 0.52rem;
+    border-bottom: 1px solid #999;
+  }
+  .cell-title {
+    flex: 1;
+    font-size: 0.13rem;
+    font-weight: 400;
+    color: #333;
+  }
+  .cell-icon {
+    font-size: 0.14rem;
+  }
+  .tree-item-group {
+    padding-left: 0.1rem;
+  }
+}
+</style>

components/home/Banner.vue

@@ -22,9 +22,11 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .banner-img {
   display: block;
+  width: 100%;
   height: 1.51rem;
+  object-fit: cover;
 }
 </style>

components/home/Case.vue

 <template>
-  <card title="教育服务案例"></card>
+  <card title="教育服务案例">
+    <div class="case">
+      <img src="/images/home_case_banner.png" class="case-pic" />
+      <p class="case-title">“数字化实训系统新实践”—走进深职院智慧教室现场</p>
+    </div>
+  </card>
 </template>
 
 <script>
@@ -8,3 +13,27 @@ export default {
   components: { Card }
 }
 </script>
+
+<style lang="scss" scoped>
+.case {
+  position: relative;
+}
+.case-pic {
+  display: block;
+  width: 100%;
+  height: 1.17rem;
+  object-fit: cover;
+}
+.case-title {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 0.24rem;
+  padding: 0 0.1rem;
+  font-size: 0.1rem;
+  line-height: 0.24rem;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+</style>

components/home/Class.vue

 <template>
   <card title="公开课">
     <template #header-aside><nuxt-link to="">查看更多+</nuxt-link></template>
+    <img src="/images/home_class_banner.png" class="class-banner" />
+    <div class="list">
+      <div class="list-item" v-for="(item, index) in list" :key="index">
+        <div class="list-item-hd">
+          <h3 class="list-item__title">{{ item.title }}</h3>
+        </div>
+        <div class="list-item-bd">
+          <p class="list-item__content">{{ item.descriptio }}</p>
+        </div>
+        <div class="list-item-ft">
+          <span class="list-item__date">{{ formatDate(item.created_time) }}</span>
+          <span class="list-item__view">{{ item.count }}</span>
+          <span class="list-item__btn">免费学习</span>
+        </div>
+      </div>
+    </div>
   </card>
 </template>
 
 <script>
 import Card from '@/components/Card'
 export default {
-  components: { Card }
+  components: { Card },
+  data() {
+    return {
+      list: []
+    }
+  },
+  fetch() {
+    this.list = [
+      {
+        title: '发现注意力的秘密—儿童心理发展系列课第一课',
+        descriptio: '孩子为什么那么粗心？ 为什么玩游戏就聚精会神？ 为什么学习却三心二意？ 孩子为什么那么粗心？......',
+        created_time: '2020-01-22 14:41:08',
+        count: 36023
+      },
+      {
+        title: '发现注意力的秘密—儿童心理发展系列课第一课',
+        descriptio: '孩子为什么那么粗心？ 为什么玩游戏就聚精会神？ 为什么学习却三心二意？ 孩子为什么那么粗心？......',
+        created_time: '2020-01-22 14:41:08',
+        count: 36023
+      }
+    ]
+  },
+  methods: {
+    // 2020-01-22
+    formatDate(value) {
+      const date = new Date(value)
+      return date.getFullYear() + '-' + date.getMonth() + 1 + '-' + date.getDate()
+    }
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+.class-banner {
+  display: block;
+  width: 100%;
+  height: 1.17rem;
+  margin-bottom: 0.09rem;
+  object-fit: cover;
+}
+
+.list-item {
+  padding: 0.14rem 0.1rem;
+  margin-bottom: 0.09rem;
+  background-color: #fff;
+}
+.list-item-hd {
+}
+.list-item__title {
+  font-size: 0.14rem;
+  color: #333;
+}
+.list-item-bd {
+  padding: 0.1rem 0;
+}
+.list-item__content {
+  font-size: 0.11rem;
+  color: #666;
+  line-height: 0.2rem;
+}
+.list-item-ft {
+  display: flex;
+  color: #a8a8a8;
+}
+.list-item__date {
+  font-size: 0.1rem;
+}
+.list-item__view {
+  flex: 1;
+  font-size: 0.1rem;
+  padding-left: 0.14rem;
+}
+.list-item__btn {
+  min-width: 0.56rem;
+  height: 0.16rem;
+  padding: 0 0.08rem;
+  font-size: 0.1rem;
+  line-height: 0.16rem;
+  color: #fff;
+  background-color: #aa1941;
+  text-align: center;
+  border-radius: 0.03rem;
+  cursor: pointer;
+}
+</style>

components/home/Degree.vue

@@ -120,7 +120,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .degree {
   margin: 0.2rem 0.16rem;
 }

components/home/Post.vue

@@ -11,10 +11,10 @@
       </div>
     </div>
     <div class="list">
-      <div class="list-item" v-for="(item, index) in futureList" :key="index">
+      <div class="list-item" v-for="(item, index) in list" :key="index">
         <div class="list-item__date">
-          <p>{{ formatMD(item.created_time) }}</p>
-          <p>{{ formatYY(item.created_time) }}</p>
+          <p class="t1">{{ formatMD(item.created_time) }}</p>
+          <p class="t2">{{ formatYY(item.created_time) }}</p>
         </div>
         <div class="list-item__title">{{ item.title }}</div>
       </div>
@@ -47,7 +47,7 @@ export default {
     // 2021
     formatYY(value) {
       const date = new Date(value)
-      return date.getMonth() + 1 + '月' + date.getDate() + '日'
+      return date.getFullYear()
     },
     // 2/14
     formatMD(value) {
@@ -58,3 +58,73 @@ export default {
   fetch() {}
 }
 </script>
+
+<style lang="scss" scoped>
+.future {
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  padding: 0.15rem 0.22rem;
+}
+.future-left {
+  width: 0.75rem;
+  font-size: 0.15rem;
+  color: #424242;
+  text-align: center;
+}
+.future-right {
+  flex: 1;
+  padding-left: 0.28rem;
+}
+.future-item {
+  display: flex;
+  align-items: center;
+  padding: 0.15rem 0;
+}
+.future-item + .future-item {
+  border-top: 1px solid #999;
+}
+.future-item__title {
+  flex: 1;
+  font-size: 0.1rem;
+  text-align: center;
+}
+.future-item__date {
+  width: 0.8rem;
+  font-size: 0.15rem;
+  color: #aa1941;
+  text-align: center;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 0.13rem 0;
+  border-bottom: 1px solid #e3e3e3;
+}
+.list-item__date {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  flex: 0 0 0.7rem;
+  height: 0.54rem;
+  color: #fff;
+  background-color: #aa1941;
+  border-radius: 0.04rem;
+  .t1 {
+    font-size: 0.16rem;
+    opacity: 0.8;
+  }
+  .t2 {
+    font-size: 0.13rem;
+    opacity: 0.8;
+  }
+}
+.list-item__title {
+  margin-left: 0.13rem;
+  font-size: 0.13rem;
+  color: #424242;
+  line-height: 0.26rem;
+}
+</style>

components/home/Publish.vue

 <template>
   <card title="校长寄语">
     <template #header-aside><nuxt-link to="">查看更多+</nuxt-link></template>
-    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+    <van-swipe class="my-swipe" :autoplay="3000" :vertical="true" indicator-color="white">
       <template v-for="(item, index) in list">
         <van-swipe-item :key="index"><img :src="item.src" class="banner-img" /></van-swipe-item>
       </template>
-    </van-swipe> -->
+    </van-swipe>
   </card>
 </template>
 
 <script>
 import Card from '@/components/Card'
 export default {
-  components: { Card }
+  components: { Card },
+  data() {
+    return {
+      list: []
+    }
+  },
+  fetch() {
+    this.list = [
+      { src: '/images/home_publish_banner.png', href: '' },
+      { src: '/images/home_publish_banner.png', href: '' }
+    ]
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+.my-swipe {
+  height: 1.36rem;
+}
+.banner-img {
+  display: block;
+  width: 100%;
+  height: 1.36rem;
+  object-fit: cover;
+}
+::v-deep .van-swipe__indicators--vertical {
+  left: auto;
+  right: 0;
+}
+</style>

components/home/Service.vue

@@ -40,7 +40,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .service {
   margin: 0.2rem 0.16rem;
 }

components/home/Story.vue

 <template>
   <card title="校友故事">
     <template #header-aside><nuxt-link to="">查看更多+</nuxt-link></template>
+    <p class="tips">You are What you together， 结识5000+ 同样优秀的人！</p>
+    <van-swipe class="my-swipe" :loop="false" :show-indicators="false">
+      <template v-for="(item, index) in list">
+        <van-swipe-item :key="index"><img :src="item.src" class="banner-img" /></van-swipe-item>
+      </template>
+    </van-swipe>
   </card>
 </template>
 
 <script>
 import Card from '@/components/Card'
 export default {
-  components: { Card }
+  components: { Card },
+  data() {
+    return {
+      list: []
+    }
+  },
+  fetch() {
+    this.list = [
+      { src: '/images/banner.png', href: '' },
+      { src: '/images/banner.png', href: '' }
+    ]
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+.tips {
+  font-size: 0.1rem;
+  font-weight: 500;
+  color: #424242;
+  margin-bottom: 0.1rem;
+}
+.banner-img {
+  display: block;
+  width: 100%;
+  height: 1.51rem;
+  object-fit: cover;
+}
+</style>

layouts/default.vue

@@ -21,11 +21,13 @@ export default {
 }
 body {
   font-size: 14px;
+  color: #424242;
   background-color: #f9f8f8;
 }
 .main-layout {
   max-width: 750px;
   margin: 0 auto;
+  overflow: hidden;
 }
 a {
   color: currentColor;

nuxt.config.js

+let config = {}
+if (process.env.NODE_ENV === 'production') {
+  config = {
+    server: { port: 2048, host: '0.0.0.0', timing: false }
+  }
+}
 export default {
-  server: {
-    port: 2048, // default: 3000
-    host: '0.0.0.0', // default: localhost,
-    timing: false
-  },
+  ...config,
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
     title: '紫荆教育-在线MBA课程-MBA在线课程-专业金融在线教育品牌',

pages/index.vue

 <template>
-  <div>
+  <div class="home">
     <banner />
     <degree />
     <service />