update

components/Card.vue

+<template>
+  <div :class="isMobile ? 'is-h5' : 'is-pc'">
+    <div class="card">
+      <div class="card-hd">
+        <div class="card-hd__title">{{ title }}</div>
+        <div class="card-hd__aside"><slot name="header-aside"></slot></div>
+      </div>
+      <div class="card-bd"><slot /></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { title: String },
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.is-pc{
+  .card {
+    // margin: 0.2rem 0.15rem;
+  }
+  .card-hd {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // margin-bottom: 0.15rem;
+  }
+  .card-hd__title {
+    flex: 1;
+    border-left: 7px solid #aa1941;
+    padding-left: 20px;
+    font-size: 32px;
+    font-weight: bold;
+    line-height: 1;
+  }
+  .card-hd__aside {
+    font-size: 16px;
+    color: #9b9b9b;
+    cursor: pointer;
+  }
+  .card-bd {
+  }
+}
+.is-h5{
+  .card {
+    margin: 0.2rem 0.15rem;
+  }
+  .card-hd {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.15rem;
+  }
+  .card-hd__title {
+    flex: 1;
+    border-left: 0.03rem solid #aa1941;
+    padding-left: 0.05rem;
+    font-size: 0.17rem;
+    font-weight: bold;
+    line-height: 1;
+  }
+  .card-hd__aside {
+    font-size: 0.1rem;
+    color: #9b9b9b;
+  }
+  .card-bd {
+  }
+}
+</style>

components/home/projectFeatures.vue

 <template>
   <div class="service-content max-width-center">
-    <m-title :data="titleParams"/>
-    <ul class="nav-content">
-      <li v-for="(item, index) in data" :key="index" @click="goPage(item.path)">
-        <img :src="item.icon" alt="" class="icon">
-        <img :src="item.iconActive" alt="" class="icon-active">
-        <div class="text" v-html="item.text"></div>
-      </li>
-    </ul>
+    <div :class="isMobile ? 'is-h5' : 'is-pc'">
+      <card :title="$t('home.project.title')">
+        <ul class="nav-content">
+          <li v-for="(item, index) in data" :key="index">
+            <img :src="item.icon" class="icon">
+            <img v-if="!isMobile" :src="item.iconActive" class="icon-active">
+            <div class="text" v-html="item.text"></div>
+          </li>
+        </ul>
+      </card>
+    </div>
   </div>
 </template>
 <script>
+import Card from '@/components/Card'
 import mTitle from '@/components/home/moduleTitle'
 import AppLink from '@/components/Link'
 export default {
   name: 'projectFeatures',
   components: {
     mTitle,
-    AppLink
+    AppLink,
+    Card
   },
   data() {
     return {
@@ -28,27 +33,27 @@ export default {
         {
           icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon1.png', 
           iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon-s1.png',
-          text: this.$t('home.project.itemT1'), path: '', pathType: 0
+          text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT1') : this.$t('home.project.pc.itemT1')
         },
         {
           icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon2.png',
           iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon-s2.png',
-          text: this.$t('home.project.itemT2'), path: '', pathType: 0
+          text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT2') : this.$t('home.project.pc.itemT2')
         },
         {
           icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon3.png',
           iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon-s3.png',
-          text: this.$t('home.project.itemT3'), path: '', pathType: 0
+          text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT3') : this.$t('home.project.pc.itemT3')
         },
         {
           icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon4.png',
           iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon-s4.png',
-          text: this.$t('home.project.itemT4'), path: '', pathType: 0
+          text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT4') : this.$t('home.project.pc.itemT4')
         },
         {
           icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon5.png',
           iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-icon-s5.png',
-          text: this.$t('home.project.itemT5'), path: '', pathType: 0
+          text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT5') : this.$t('home.project.pc.itemT5')
         }
       ]
     }
@@ -61,61 +66,100 @@ export default {
       }
       window.open(path)
     }
+  },
+  mounted() {
+    console.log(this.isMobile)
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.service-content{
-  padding-top: 68px;
-  .nav-content{
-    display: flex;
-    justify-content: space-between;
-    padding-top: 15px;
-    li{
-      width: 224px;
-      height: 230px;
-      padding-top: 53px;
-      box-sizing: border-box;
-      background: #F9F8F8;
-      // background: #fff;
-      // box-shadow: 0px 4px 38px rgba(142, 30, 34, 0.41);
-      cursor: pointer;
-      transition: all .3s;
-      img{
-        width: 80px;
-        height: 80px;
-        display: block;
-        margin: 0 auto;
-      }
-      .icon-active{
-        display: none;
-      }
-      &:hover{
-        background: #AA1941;
-        box-shadow: 0px 4px 20px rgba(142, 30, 34, 0.41);
-        .text{
-          color: #fff;
+.is-pc{
+  .service-content{
+    padding-top: 68px;
+    .nav-content{
+      display: flex;
+      justify-content: space-between;
+      padding-top: 15px;
+      li{
+        width: 224px;
+        height: 230px;
+        padding-top: 53px;
+        box-sizing: border-box;
+        background: #F9F8F8;
+        // background: #fff;
+        // box-shadow: 0px 4px 38px rgba(142, 30, 34, 0.41);
+        cursor: pointer;
+        transition: all .3s;
+        img{
+          width: 80px;
+          height: 80px;
+          display: block;
+          margin: 0 auto;
         }
-        .icon{
+        .icon-active{
           display: none;
         }
-        .icon-active{
-          display: block;
+        &:hover{
+          background: #AA1941;
+          box-shadow: 0px 4px 20px rgba(142, 30, 34, 0.41);
+          .text{
+            color: #fff;
+          }
+          .icon{
+            display: none;
+          }
+          .icon-active{
+            display: block;
+          }
+        }
+        .text{
+          font-size: 14px;
+          line-height: 18px;
+          color: #666666;
+          margin-top: 20px;
+          text-align: center;
         }
       }
+    }
+  }
+  .max-width-center{
+    width: 1212px;
+    margin: 0 auto;
+  }
+}
+.is-h5{
+  .service-content{
+    ul{
+      display: flex;
+      overflow-x: scroll;
+      -webkit-overflow-scrolling: touch;
+    }
+    li{
+      min-width: .78rem;
+      background: #FFFFFF;
+      margin-right: .10rem;
+      padding-top: .11rem;
+      img{
+        width: .4rem;
+        height: .4rem;
+        display: block;
+        margin: 0 auto;
+      }
       .text{
-        font-size: 14px;
-        line-height: 18px;
+        font-size: .1rem;
+        line-height: .16rem;
         color: #666666;
-        margin-top: 20px;
+        padding-top: .05rem;
         text-align: center;
+        padding-bottom: .1rem;
       }
     }
   }
 }
-.max-width-center{
-  width: 1212px;
-  margin: 0 auto;
-}
 </style>

langs/en-US.js

@@ -37,11 +37,20 @@ export default {
   home: {
     project: {
       title: '项目特色',
-      itemT1: '全方位的金融职业<br />教育课程体系',
-      itemT2: '专业金融<br />在线教育品牌',
-      itemT3: '科学成熟的<br />在线教育模式',
-      itemT4: '无需联考、快速入门<br />的学习体验',
-      itemT5: '聚焦中国实践和国际前沿<br />的最新课程',
+      h5: {
+        itemT1: '全方位的<br />金融职业<br />教育课程体系',
+        itemT2: '专业金融<br />在线<br />教育品牌',
+        itemT3: '科学成熟的<br />在线<br />教育模式',
+        itemT4: '无需联考<br />快速入门<br />的学习体验',
+        itemT5: '聚焦中国实践<br />和国际前沿<br />的最新课程'
+      },
+      pc: {
+        itemT1: '全方位的金融职业<br />教育课程体系',
+        itemT2: '专业金融<br />在线教育品牌',
+        itemT3: '科学成熟的<br />在线教育模式',
+        itemT4: '无需联考、快速入门<br />的学习体验',
+        itemT5: '聚焦中国实践和国际前沿<br />的最新课程'
+      }
     },
     ranking: {
       title: '学校排名',

langs/zh-CN.js

@@ -37,11 +37,20 @@ export default {
   home: {
     project: {
       title: '项目特色',
-      itemT1: '全方位的金融职业<br />教育课程体系',
-      itemT2: '专业金融<br />在线教育品牌',
-      itemT3: '科学成熟的<br />在线教育模式',
-      itemT4: '无需联考、快速入门<br />的学习体验',
-      itemT5: '聚焦中国实践和国际前沿<br />的最新课程',
+      h5: {
+        itemT1: '全方位的<br />金融职业<br />教育课程体系',
+        itemT2: '专业金融<br />在线<br />教育品牌',
+        itemT3: '科学成熟的<br />在线<br />教育模式',
+        itemT4: '无需联考<br />快速入门<br />的学习体验',
+        itemT5: '聚焦中国实践<br />和国际前沿<br />的最新课程'
+      },
+      pc: {
+        itemT1: '全方位的金融职业<br />教育课程体系',
+        itemT2: '专业金融<br />在线教育品牌',
+        itemT3: '科学成熟的<br />在线教育模式',
+        itemT4: '无需联考、快速入门<br />的学习体验',
+        itemT5: '聚焦中国实践和国际前沿<br />的最新课程'
+      }
     },
     ranking: {
       title: '学校排名',