Merge remote-tracking branch 'origin/master'

src/modules/home/components/Brand.vue

@@ -3,12 +3,14 @@ import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Navigation } from 'swiper'
 import 'swiper/css'
 import 'swiper/css/navigation'
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
 
 const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png' }]
 </script>
 
 <template>
-  <section class="section">
+  <section class="section" v-if="!mobile">
     <div class="section-title">
       <div class="tit_img">
         <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
@@ -24,6 +26,12 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png
       </SwiperSlide>
     </Swiper>
   </section>
+  <div class="h5-brand" v-else>
+    <h1>合作机构</h1>
+    <div class="content">
+      <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/cooperate.png" />
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -60,4 +68,23 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png
   margin: 0 auto;
   max-width: 1200px;
 }
+.h5-brand {
+  padding: 0 0.3rem;
+  h1 {
+    font-size: 0.32rem;
+    font-weight: bold;
+    line-height: 100%;
+    color: #333333;
+    padding: 0.3rem 0;
+  }
+  .content {
+    background: #ffffff;
+    border-radius: 0.12rem;
+    padding: 0.2rem;
+    img {
+      width: 100%;
+      display: block;
+    }
+  }
+}
 </style>

src/modules/home/components/Contact.vue

+<script lang="ts" setup>
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
+</script>
 <template>
-  <div class="main" id="contact">
+  <div class="main" id="contact" v-if="!mobile">
     <div class="con_tit">
       <div class="tit_img">
         <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
@@ -24,6 +28,27 @@
       </div>
     </div>
   </div>
+  <div class="h5-main" v-else>
+    <h1>预约报名</h1>
+    <div class="content">
+      <div class="item">
+        <div class="n">PRP秘书处：</div>
+        <div class="v">13263110117(同微信)</div>
+      </div>
+      <div class="item">
+        <div class="n">标准产品委员会:  </div>
+        <div class="v">13269964629(同微信)</div>
+      </div>
+      <div class="item">
+        <div class="n">PAA秘书处：</div>
+        <div class="v">13263110169(同微信)</div>
+      </div>
+      <div class="item">
+        <div class="n">定制专属产品办公室：</div>
+        <div class="v">010_62799539</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -62,4 +87,37 @@
     }
   }
 }
+.h5-main {
+  padding: .3rem;
+  h1 {
+    font-size: 0.32rem;
+    font-weight: bold;
+    line-height: 100%;
+    color: #333333;
+    padding-bottom: .3rem;
+  }
+  .content {
+    padding: 0.56rem 0.48rem .26rem;
+    box-sizing: border-box;
+    background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/contact-bg.png);
+    background-size: cover;
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
+    border-radius: 0.12rem;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .item{
+      margin-bottom: .3rem;
+      .n{
+        font-size: .24rem;
+        color: rgba(102, 102, 102, 1);
+      }
+      .v{
+        font-size: .24rem;
+        color: rgba(51, 51, 51, 1);
+        margin-top: .1rem;
+      }
+    }
+  }
+}
 </style>

src/modules/home/components/Course.vue

 <script setup>
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
+
 const list = [
   {
     img: 'https://webapp-pub.ezijing.com/project_online/fi/course1.png',
@@ -22,7 +25,7 @@ const list = [
 </script>
 
 <template>
-  <section class="section">
+  <section class="section" v-if="!mobile">
     <div class="section-title">
       <div class="tit_img">
         <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
@@ -46,6 +49,40 @@ const list = [
     </div>
     <!-- <p class="more">查看更多案例</p> -->
   </section>
+  <div class="h5-course" v-else>
+    <h1>定制专属类课程</h1>
+    <div class="content">
+      <div class="top">
+        针对不同人才类型的培养需求，采用“线上+线下”的教学模式，并提供定制化专业服务与个性化的在线学习解决方案，帮助从业者提升工作所需的业务技能，强化综合竞争力。
+      </div>
+      <div class="content-cards">
+        <div class="item">
+          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/course-i1.png" />
+          <div class="line"></div>
+          <div class="t">教学与教务服务</div>
+          <div class="t">技术平台支持</div>
+        </div>
+        <div class="item">
+          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/course-i2.png" />
+          <div class="line"></div>
+          <div class="t">提供业务人才培养性方案</div>
+          <div class="t">提供管理人才突破性培育</div>
+        </div>
+        <div class="item">
+          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/course-i3.png" />
+          <div class="line"></div>
+          <div class="t">内部核心人才金融素养培育</div>
+          <div class="t">全套长期的解决服务方案</div>
+        </div>
+        <div class="item">
+          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/course-i4.png" />
+          <div class="line"></div>
+          <div class="t">教学与教务服务</div>
+          <div class="t">技术平台支持</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -125,4 +162,63 @@ const list = [
   color: #999;
   text-align: center;
 }
+.h5-course {
+  padding: 0 0.3rem;
+  h1 {
+    font-size: 0.32rem;
+    font-weight: bold;
+    line-height: 100%;
+    color: #333333;
+    padding: 0.4rem 0;
+  }
+  .content {
+    background: rgba(255, 255, 255, 1);
+    border-radius: 12px;
+    padding: 0.2rem 0.2rem 0;
+    .top {
+      padding: 0.6rem;
+      box-sizing: border-box;
+      background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/course-t-bg.png) center;
+      background-size: cover;
+      font-size: 0.24rem;
+      line-height: 0.4rem;
+      color: #886426;
+      border-radius: 0.03rem;
+    }
+    .content-cards {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      padding-bottom: 0.2rem;
+      .item {
+        width: 3.15rem;
+        height: 2.5rem;
+        border: 1px solid #dddddd;
+        border-radius: 0.12rem;
+        padding-top: 0.36rem;
+        box-sizing: border-box;
+        margin-top: 0.2rem;
+        img {
+          width: 2.2rem;
+          height: 0.6rem;
+          display: block;
+          margin: 0 auto;
+        }
+        .line {
+          margin: 0.25rem auto 0.24rem;
+          width: 0.78rem;
+          height: 0.02rem;
+          background: rgba(170, 25, 65, 1);
+        }
+        .t {
+          font-size: 0.24rem;
+          line-height: 100%;
+          color: #414141;
+          text-align: center;
+          margin-bottom: 0.15rem;
+        }
+      }
+    }
+  }
+}
 </style>

src/modules/home/components/Knowledge.vue

 <script setup lang="ts">
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
+
 const knowList: Array<{
   img: string
   desc: string
@@ -15,13 +18,36 @@ const knowList: Array<{
     href: 'https://mp.weixin.qq.com/s/hvJlV4BsnUhvJszlCQmIOQ'
   }
 ]
+
+const h5KnowList: Array<{
+  img: string
+  desc: string
+  href: string
+}> = [
+  {
+    img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-knowledge1.png',
+    desc: '世界读书日来临丨PRP紫荆学友会送福利',
+    href: 'https://mp.weixin.qq.com/s/5VCaj9j6ljd1FyVOSG08Cg'
+  },
+  {
+    img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-knowledge2.png',
+    desc: '保罗·蒂芙尼博士：当今世界经济—“全球化”是否已走向终结？',
+    href: 'https://mp.weixin.qq.com/s/VRJFcsleJy1S86dOvRfCsA '
+  },
+  {
+    img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-knowledge3.png',
+    desc: '由一而千 星火散落将聚燃丨<br/>PRP紫荆学友会欢迎您的加入！',
+    href: 'https://mp.weixin.qq.com/s/hvJlV4BsnUhvJszlCQmIOQ'
+  }
+]
+
 const handleOpen = (item: any) => {
   window.open(item.href)
 }
 </script>
 
 <template>
-  <div class="main">
+  <div class="main" v-if="!mobile">
     <div class="main_con">
       <div class="con_top">
         <a href="https://mp.weixin.qq.com/s/5VCaj9j6ljd1FyVOSG08Cg">
@@ -37,6 +63,12 @@ const handleOpen = (item: any) => {
       <!-- <div class="con_more">查看更多</div> -->
     </div>
   </div>
+  <div class="h5-main" v-else>
+    <div class="item" v-for="(item, index) in h5KnowList" :key="index" @click="handleOpen(item)">
+      <img :src="item.img" />
+      <div class="text" v-html="item.desc"></div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -104,4 +136,32 @@ const handleOpen = (item: any) => {
     }
   }
 }
+.h5-main {
+  padding: 0.4rem 0 0 0.3rem;
+  display: flex;
+  overflow-x: scroll;
+  .item {
+    min-width: 3.57rem;
+    height: 4.31rem;
+    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.16);
+    border-radius: 0.12rem;
+    margin-right: .2rem;
+    position: relative;
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    .text {
+      position: absolute;
+      top: 3.2rem;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 3.2rem;
+      font-size: 0.24rem;
+      line-height: 0.34rem;
+      color: #ffffff;
+    }
+  }
+}
 </style>

src/modules/home/components/Teacher.vue

@@ -3,6 +3,8 @@ import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Navigation } from 'swiper'
 import 'swiper/css'
 import 'swiper/css/navigation'
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
 
 const swiper1 = ref(null)
 const list = [
@@ -116,7 +118,7 @@ function next(swiper) {
 </script>
 
 <template>
-  <section class="section" id="teacher">
+  <section class="section" id="teacher" v-if="!mobile">
     <div class="section__inner">
       <div class="section-title">
         <div class="tit_img">
@@ -171,6 +173,32 @@ function next(swiper) {
       </div>
     </div>
   </section>
+  <section class="h5-teacher" v-else>
+    <h1>师资团队</h1>
+    <div class="content">
+      <h2>清华大学知名教授、博士生导师</h2>
+      <div class="group">
+        <div class="item" v-for="(item, index) in list" :key="index">
+          <img :src="item.avatar" />
+          <div class="name">{{ item.name }}</div>
+          <div class="desc" v-for="(cItem, index) in item.children" :key="index">
+            <div class="icon"></div>
+            <div class="t">{{ cItem }}</div>
+          </div>
+        </div>
+      </div>
+      <h2>清控紫荆教育专职名师暨高级实战专家</h2>
+      <div class="group">
+        <div class="item" v-for="(item, index) in list2" :key="index">
+          <div class="name">{{ item.name }}</div>
+          <div class="desc" v-for="(cItem, index) in item.children" :key="index">
+            <div class="icon"></div>
+            <div class="t">{{ cItem }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </template>
 
 <style lang="scss" scoped>
@@ -305,4 +333,69 @@ function next(swiper) {
     margin-top: 11px;
   }
 }
+.h5-teacher {
+  padding: 0 0.3rem;
+  h1 {
+    font-size: 0.32rem;
+    font-weight: bold;
+    line-height: 100%;
+    color: #333333;
+    margin: 0.3rem 0;
+  }
+  .content {
+    background: url('https://webapp-pub.ezijing.com/project_online/fi/teacher_bg.jpg');
+    background-size: cover;
+    height: 10.21rem;
+    overflow: hidden;
+    h2 {
+      font-size: 0.28rem;
+      font-weight: bold;
+      line-height: 100%;
+      color: #ffffff;
+      padding: 0.6rem 0 0.4rem;
+      text-align: center;
+    }
+    .group {
+      display: flex;
+      overflow-x: scroll;
+      padding-right: .2rem;
+      .item {
+        min-width: 4.1rem;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 0.12rem;
+        padding: 0.43rem 0.22rem;
+        margin-left: 0.2rem;
+        img {
+          width: 1.2rem;
+          height: 1.2rem;
+          display: block;
+          margin: 0 auto;
+        }
+        .name {
+          font-size: 0.28rem;
+          line-height: 100%;
+          color: #333333;
+          padding: 0.1rem 0 0.32rem;
+          text-align: center;
+        }
+        .desc {
+          display: flex;
+          .icon {
+            min-width: 0.1rem;
+            height: 0.1rem;
+            background: rgba(193, 171, 133, 1);
+            margin-right: 8px;
+            transform: rotate(45deg);
+            margin-top: 0.1rem;
+          }
+          .t {
+            font-size: 0.24rem;
+            line-height: 0.34rem;
+            color: #535353;
+          }
+        }
+      }
+    }
+  }
+}
 </style>