update

components/home/banner.vue

 <template>
-  <div>
+  <div :class="isMobile ? 'is-h5' : 'is-pc'">
     <div class="banner-content">
-      <img class="img" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/home-banner.png" />
+      <img
+        v-if="!isMobile"
+        class="img"
+        src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/home-banner.png"
+      />
+      <img v-else class="img" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/h5/banner.png" />
     </div>
   </div>
 </template>
@@ -11,98 +16,112 @@ export default {
   data() {
     return {}
   },
-  computed: {},
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile
+    }
+  },
   methods: {}
 }
 </script>
 
 <style lang="scss" scoped>
-.banner-content {
-  position: relative;
-  width: 100%;
-  .img {
+.is-pc {
+  .banner-content {
+    position: relative;
     width: 100%;
-    height: 100%;
-    min-height: 650px;
-    object-fit: cover;
-    z-index: 1000;
-  }
-  .content_desc {
-    position: absolute;
-    top: 255px;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    .desc_cn {
-      font-size: 60px;
-      font-weight: 500;
-      color: #ffffff;
-      text-shadow: -1.8369701465288538e-16px 3px 6px rgba(0, 0, 0, 0.3);
-      white-space: nowrap;
-      letter-spacing: 5.5px;
+    .img {
+      width: 100%;
+      height: 100%;
+      min-height: 650px;
+      object-fit: cover;
+      z-index: 1000;
     }
-    .desc_en {
-      font-size: 30px;
-      font-weight: 400;
-      color: #ffffff;
-      text-shadow: -1.8369701465288538e-1 3px 6px rgba(0, 0, 0, 0.3);
-      white-space: nowrap;
-      margin-top: 5px;
+    .content_desc {
+      position: absolute;
+      top: 255px;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      .desc_cn {
+        font-size: 60px;
+        font-weight: 500;
+        color: #ffffff;
+        text-shadow: -1.8369701465288538e-16px 3px 6px rgba(0, 0, 0, 0.3);
+        white-space: nowrap;
+        letter-spacing: 5.5px;
+      }
+      .desc_en {
+        font-size: 30px;
+        font-weight: 400;
+        color: #ffffff;
+        text-shadow: -1.8369701465288538e-1 3px 6px rgba(0, 0, 0, 0.3);
+        white-space: nowrap;
+        margin-top: 5px;
+      }
     }
-  }
-  .banner_navList {
-    position: absolute;
-    bottom: -59px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    align-items: flex-end;
-    margin: 0;
-    padding: 0;
-    .banner_nav {
-      width: 239px;
-      height: 144px;
+    .banner_navList {
+      position: absolute;
+      bottom: -59px;
+      left: 50%;
+      transform: translateX(-50%);
       display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      background-color: #be0927;
-      // border-right: 1px solid #e64b77;
-      padding-right: 0;
-      opacity: 0.71;
-
-      .nav_top {
-        width: 100%;
-        height: 87px;
+      align-items: flex-end;
+      margin: 0;
+      padding: 0;
+      .banner_nav {
+        width: 239px;
+        height: 144px;
         display: flex;
         justify-content: center;
         align-items: center;
-        border-right: 0.5px solid rgba(255, 255, 255, 0.30196078431372547);
-      }
-      .banner_nav:last-child {
-        border: none;
-      }
-      .nav_tit {
-        width: 100%;
-        height: 57px;
-        font-size: 14px;
-        line-height: 57px;
-        text-align: center;
-        color: #fefffe;
-        padding-bottom: 15px;
-        border-right: 1px solid #be0927;
-        font-size: 20px;
-      }
-      &:hover {
-        height: 160px;
-        background-color: #aa1941;
-        border-right: 1px solid #be0927;
-        opacity: 0.78;
-      }
-      &:hover .nav_top {
-        border-right: none;
+        flex-direction: column;
+        background-color: #be0927;
+        // border-right: 1px solid #e64b77;
+        padding-right: 0;
+        opacity: 0.71;
+
+        .nav_top {
+          width: 100%;
+          height: 87px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-right: 0.5px solid rgba(255, 255, 255, 0.30196078431372547);
+        }
+        .banner_nav:last-child {
+          border: none;
+        }
+        .nav_tit {
+          width: 100%;
+          height: 57px;
+          font-size: 14px;
+          line-height: 57px;
+          text-align: center;
+          color: #fefffe;
+          padding-bottom: 15px;
+          border-right: 1px solid #be0927;
+          font-size: 20px;
+        }
+        &:hover {
+          height: 160px;
+          background-color: #aa1941;
+          border-right: 1px solid #be0927;
+          opacity: 0.78;
+        }
+        &:hover .nav_top {
+          border-right: none;
+        }
       }
     }
   }
 }
+.is-h5 {
+  .banner-content {
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+}
 </style>

pages/course/index.vue

@@ -18,16 +18,36 @@
           </div>
         </div>
       </card>
-      <card title="学分课程模块" style="margin-top: 103px">
+      <card title="国内专业研究课程" style="margin-top: 103px">
         <div>
           <img
             class="chart"
-            src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-img1.png"
+            src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-img1-new.png"
             style="width: 100%"
           />
         </div>
       </card>
-      <card title="中国经济新质生产力前沿创新学术论坛" style="margin-top: 103px">
+      <card title="海外国际商学院学习模块" style="margin-top: 103px">
+        <div style="background-color: #fff; padding-bottom: 32px">
+          <img
+            class="chart2"
+            src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-img3-new.png"
+            style="width: 100%"
+          />
+          <div class="t-g2">注：每学年校方会组织两次 以上活动，学生每年至少参加一次活动，即可获得学分</div>
+        </div>
+      </card>
+      <card title="前沿创新论坛" style="margin-top: 103px">
+        <div style="background-color: #fff; padding-bottom: 32px">
+          <img
+            class="chart2"
+            src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-img2-new.png"
+            style="width: 100%"
+          />
+          <div class="t-g2">注：每学年校方会组织四次 以上活动，学生每年至少参加二次活动，即可获得学分</div>
+        </div>
+      </card>
+      <!-- <card title="中国经济新质生产力前沿创新学术论坛" style="margin-top: 103px">
         <div class="t-g">
           每年在清华定期举办《新质生产力与产业创新论坛》，邀请来自清华、中国科学院等研究机构数十位国内专家学者，分享来自各个领域科技创新成果和产业创新转型的实践经验。结合论坛，组织DBA博士生到清华系研究机构走访，探索科技成果转化的成功路径，到科技创新知名企业进行标杆学习。<br />
           ·商业分析和数字经济&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·数字营销战略前沿课题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·人工智能与中国经济&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·中国前沿金融管理问题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·新经济时代的财务报告<br />
@@ -39,7 +59,7 @@
           与全球创新面对面，全球访学能够让参与者接触不同国家和地区的商业实践和文化，更好地理解全球商业这种跨文化的经验，激发创新思维，培养国际化的视野。与来自不同国家和地区的企业家交流，分享经验和意见，促进合作和创新，为企业发展带来新的机遇和可能性。<br />
           ·美国-科技创新之旅&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·日本-极致服务创新之旅&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·东南亚-新兴市场洞察与产业创新之旅
         </div>
-      </card>
+      </card> -->
     </div>
   </div>
 </template>
@@ -95,7 +115,13 @@ export default {
   padding: 62px 49px;
   box-sizing: border-box;
   background-color: #fff;
-  margin-top: 36px;
+  // margin-top: 36px;
+}
+.chart2 {
+  padding: 62px 49px 0;
+  box-sizing: border-box;
+  background-color: #fff;
+  // margin-top: 36px;
 }
 .t-g {
   font-weight: 400;
@@ -105,4 +131,13 @@ export default {
   text-align: left;
   margin-top: 52px;
 }
+.t-g2 {
+  font-weight: 400;
+  font-size: 18px;
+  color: #666666;
+  // line-height: 36px;
+  text-align: left;
+  margin-top: 10px;
+  padding-left: 49px;
+}
 </style>