update:修改样式

pages/school/school3.vue

@@ -63,8 +63,24 @@
           </div>
         </div>
       </div>
-      <div class="content">
-        <img src="https://webapp-pub.ezijing.com/project/marywood/marywood36.png" />
+      <!-- <div class="content"> -->
+        <!-- <img src="https://webapp-pub.ezijing.com/project/marywood/marywood36.png" /> -->
+      <!-- </div> -->
+      <div class="content_tit">
+        <div class="line"></div>
+        <div class="tit_desc">课程设置</div>
+      </div>
+      <div class="course-set">
+        <div class="head-tab">
+          <div @click="courseTab(0)" :class="!courseSetTab ? 'btn active' : 'btn'">
+            <p>工商管理硕士</p>
+            <p>Master of Business Administration</p>
+          </div>
+          <div @click="courseTab(1)" :class="courseSetTab ? 'btn active' : 'btn'">
+            <p>管理信息系统硕士</p>
+            <p>M.S. in Management Information Systems</p>
+          </div>
+        </div>
       </div>
       <div class="content_tit">
         <div class="line"></div>
@@ -106,7 +122,27 @@
           <img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-nimg4.png" />
         </div>
         <div class="h5-title m-t-10">课程设置</div>
-        <img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img7.png" />
+        <div class="h5-course-set">
+          <div class="h5-head">
+            <div @click="courseTab(0)" :class="!courseSetTab ? 'btn active' : 'btn'" style="margin:0 .42rem 0 .06rem;">
+              <p>工商管理硕士</p>
+              <p>Master of Business Administration</p>
+            </div>
+            <div @click="courseTab(1)" :class="courseSetTab ? 'btn active' : 'btn'">
+              <p>管理信息系统硕士</p>
+              <p>M.S. in Management Information Systems</p>
+            </div>
+          </div>
+        </div>
+        <!-- <div @click="courseTab(0)" :class="!courseSetTab ? 'btn active' : 'btn'">
+            <p>工商管理硕士</p>
+            <p>Master of Business Administration</p>
+          </div>
+          <div @click="courseTab(1)" :class="courseSetTab ? 'btn active' : 'btn'">
+            <p>管理信息系统硕士</p>
+            <p>M.S. in Management Information Systems</p>
+          </div> -->
+        <!-- <img src="https://webapp-pub.ezijing.com/project/marywood/h5/school-img7.png" /> -->
         <div class="h5-title m-t-10">校园风光</div>
         <div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
           <div v-swiper:mySwiper="swiperOption2" ref="mySwiper">
@@ -130,6 +166,7 @@ export default {
     const _this = this
 
     return {
+      courseSetTab: 0,
       popupVisible: false,
       listData: [
         { web_img_uri: 'https://webapp-pub.ezijing.com/project/marywood/school_mary1.png' },
@@ -209,12 +246,45 @@ export default {
     },
     swiperStart() {
       this.swiper.autoplay.start()
+    },
+    courseTab(n) {
+      this.courseSetTab = n
     }
   }
 }
 </script>
 <style lang="scss" scoped>
 .is-pc {
+  .course-set{
+    background: #fff;
+    width: 1200px;
+    margin: 30px auto 0;
+    .head-tab{
+      height: 120px;
+      border-bottom: 1px solid #BEBEBE;
+      display: flex;
+      justify-content: space-evenly;
+      .btn{
+        p{
+          font-size: 26px;
+          font-weight: 400;
+          color: #959595;
+          text-align: center;
+          line-height: 100%;
+          // -webkit-background-clip: text;
+          // -webkit-text-fill-color: transparent;
+        }
+        padding-top: 60px;
+        cursor: pointer;
+        &.active{
+          border-bottom: 1px solid #AA1941;
+          p{
+            color: #AA1941;
+          }
+        }
+      }
+    }
+  }
   .banner {
     position: relative;
     .img_banner {
@@ -403,6 +473,30 @@ export default {
       display: block;
     }
   }
+  .h5-course-set{
+    background: #fff;
+    .h5-head{
+      height: .7rem;
+      border-bottom: 1px solid #BEBEBE;
+      display: flex;
+      overflow-x: scroll;
+      .btn{
+        padding-top: .25rem;
+        p{
+          font-size: .13rem;
+          color:#959595;
+          text-align: center;
+          white-space: nowrap;
+        }
+        &.active{
+          p{
+            color: #AA1941;
+          }
+          border-bottom: 1px solid #AA1941;
+        }
+      }
+    }
+  }
   .h5-content {
     padding: 0 0.15rem;
     img {