pc，h5合并

components/appFrame.vue

@@ -91,8 +91,9 @@ export default {
   }
   .main-page-banner {
     display: block;
-    height: 1.2rem;
-    object-fit: cover;
+    width: 100%;
+    // height: 1.2rem;
+    // object-fit: cover;
   }
   .main-page-content {
     background-color: #fff;

pages/apply/support.vue

@@ -42,6 +42,11 @@ export default {
         ]
       }
     }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile
+    }
   }
 }
 </script>

pages/project-intro/bg.vue

 <template>
+  <div :class="isMobile ? 'is-h5' : 'is-pc'">
     <app-frame :data="frameParams">
-    <div class="project-bg-main">
+      <div class="content-mian" v-if="isMobile">
+        <tab-content @tabChange="tabChange"></tab-content>
+        <div class="content-mod1" v-if="showIndex === 0">
+          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-banner.png" class="main-banner">
+          <div class="content-txt">
+            <div class="tit">{{ $t('bg.brief') }}</div>
+            <div class="text">
+              <div class="p" v-html="$t('bg.con1Txt')"></div>
+            </div>
+            <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-img.png" alt="">
+          </div>
+        </div>
+        <div class="content-mod2" v-if="showIndex === 1">
+          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod2-banner.png" class="main-banner">
+          <div class="content-txt">
+            <div class="p" v-html="$t('bg.con2Txt')"></div>
+          </div>
+        </div>
+        <div class="content-mod2" v-if="showIndex === 2">
+          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod3-banner.png" class="main-banner">
+          <div class="content-txt">
+            <div class="p" v-html="$t('bg.con3Txt')"></div>
+          </div>
+        </div>
+      </div>
+      <div class="project-bg-main" v-else>
         <ul class="tabs">
           <li
             v-for="item in list"
@@ -43,12 +69,20 @@
         </div>
       </div>
     </app-frame>
+  </div>
 </template>
 <script>
+import TabNav from './components/TabNav'
+import TabContent from './components/TabContent'
 export default {
+  components: {
+    TabNav,
+    TabContent
+  },
   layout: 'normal',
   data() {
     return {
+      showIndex: 0,
       tabActive: 'zjjy',
       list: [
         { name: 'zjjy', label: this.$t('bg.tabBtn1') },
@@ -83,11 +117,22 @@ export default {
         ]
       }
     }
+  },
+  methods: {
+    tabChange(n) {
+      this.showIndex = n
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
-.project-bg-main {
+.is-pc{
+  .project-bg-main {
     padding: 42px 64px 50px;
     .tabs {
       margin-top: 42px;
@@ -165,5 +210,69 @@ export default {
         width: 240px;
       }
     }
+  }
+}
+::v-deep{
+  // .is-h5{
+    .main-page-content{
+      background-color: #eee !important;
+    // }
+  }
+}
+.is-h5{
+  .content-mian{
+    padding: 0 .16rem;
+    .content-mod1{
+      padding-top: .18rem;
+      img{
+        width: 100%;
+        display: block;
+      }
+      .content-txt{
+        background: #fff;
+        padding: 0 .16rem .42rem;
+        margin-bottom: .36rem;
+        .tit{
+          font-size: 0.14rem;
+          font-weight: bold;
+          line-height: 100%;
+          color: #333333;
+          padding-top: .23rem;
+          padding-bottom: .1rem;
+        }
+        .text{
+          .p{
+            font-size: 0.12rem;
+            line-height: 0.24rem;
+            color: #424242;
+          }
+        }
+        img{
+          width: 2.59rem;
+          margin-left: .08rem;
+          margin-top: .27rem;
+          display: block;
+        }
+      }
+    }
+    .content-mod2{
+      margin-top: .18rem;
+      background: #fff;
+      img{
+        width: 100%;
+      }
+      .content-txt{
+        background: #fff;
+        padding: 0 .16rem .42rem;
+        margin-bottom: .36rem;
+        .p{
+          font-size: 0.12rem;
+          line-height: 0.24rem;
+          color: #424242;
+          margin-top: .35rem;
+        }
+      }
+    }
+  }
 }
 </style>

pages/project-intro/certificate.vue

 <template>
+<div :class="isMobile ? 'is-h5' : 'is-pc'">
   <div class="certificate">
     <app-frame :data="frameParams">
       <div class="certificate-main">
         <img
+          class="cert-img"
           src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood-cert-new2.png"
         />
       </div>
     </app-frame>
   </div>
+</div>
 </template>
 <script>
 export default {
@@ -32,10 +35,31 @@ export default {
         ]
       }
     }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
+.is-pc{
+  .cert-img{
+    display: block;
+    width: 600px;
+    // height: 291px;
+    margin: 40px auto;
+  }
+}
+.is-h5{
+  .cert-img{
+    display: block;
+    width: 100%;
+    // height: 291px;
+    margin: 40px auto;
+  }
+}
 .certificate-main {
   padding: 40px;
   text-align: center;
@@ -71,12 +95,6 @@ export default {
     color: #424242;
     margin-top: 40px;
   }
-  img {
-    display: block;
-    width: 600px;
-    // height: 291px;
-    margin: 40px auto;
-  }
   .certificate-title {
     font-size: 16px;
     font-family: Source Han Sans CN;

pages/project-intro/charac.vue

 <template>
+  <div :class="isMobile ? 'is-h5' : 'is-pc'">
     <app-frame :data="frameParams">
       <ul class="card">
         <li v-for="item in list" :key="item.title">
@@ -12,6 +13,7 @@
         </li>
       </ul>
     </app-frame>
+  </div>
 </template>
 <script>
 export default {
@@ -53,11 +55,17 @@ export default {
         ]
       }
     }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
-.card {
+.is-pc{
+  .card {
     width: 763px;
     margin: 0 auto 0;
     padding: 80px 0 30px;
@@ -94,5 +102,45 @@ export default {
         }
       }
     }
+  }
+}
+.is-h5{
+  .card {
+    background: #fff;
+    padding: .24rem .15rem .56rem;
+    li {
+      background: #f9f8f8;
+      box-shadow: 0 0 0 rgb(0 0 0 / 9%);
+      margin-bottom: .16rem;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      padding: .16rem .14rem .1rem;
+      .left {
+        img {
+          width: .72rem;
+          height: .72rem;
+          display: block;
+        }
+      }
+      .right {
+        margin-left: .23rem;
+        h5 {
+          font-size: .12rem;
+          font-weight: 700;
+          line-height: 100%;
+          color: #333;
+          margin-bottom: .16rem;
+        }
+        p {
+          font-size: .1rem;
+          font-family: Source Han Sans CN;
+          line-height: 100%;
+          color: #424242;
+          margin-bottom: .1rem;
+        }
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file

pages/project-intro/components/TabContent.vue

+<template>
+  <ul class="tab-content">
+    <li
+      v-for="(item, index) in items"
+      :key="index"
+      :class="activeIndex === index && 'active'"
+      @click="tabChange(index)"
+      >
+      {{ item }}
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      items: [this.$t('bg.tabBtn1'), this.$t('bg.tabBtn2'), this.$t('bg.tabBtn3')],
+      activeIndex: 0
+    }
+  },
+  methods: {
+    tabChange(n) {
+      this.activeIndex = n
+      this.$emit('tabChange', n)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.tab-content{
+  padding-top: .2rem;
+  display: flex;
+  justify-content: space-between;
+  li{
+    width: 1.1rem;
+    height: 0.75rem;
+    line-height: .75rem;
+    background: #FFFFFF;
+    text-align: center;
+    font-size: 0.13rem;
+    font-weight: bold;
+    color: #333333;
+    position: relative;
+    &.active{
+      color: #AA1941;
+      &::after{
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 0.04rem;
+        background: #AA1941
+      }
+    }
+  }
+}
+</style>

pages/project-intro/components/TabNav.vue

+<template>
+  <tab-nav :list="list" v-bind="$attrs"></tab-nav>
+</template>
+
+<script>
+import TabNav from '@/components/base/h5/TabNav'
+export default {
+  components: { TabNav },
+  data() {
+    return {
+      list: [
+        { name: this.$t('menu.projectChild.bg'), path: '/project/bg', value: '1' },
+        { name: this.$t('menu.projectChild.feature'), path: '/project/charac', value: '2' },
+        { name: this.$t('menu.projectChild.cert'), path: '/project/certificate', value: '3' }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+</style>