chore: 学习安排页面新增国际游学模块

pages/degree/index.vue

@@ -18,7 +18,7 @@ export default {
   layout: 'normal'
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .is-pc {
   .main_content {
     padding: 70px 64px 80px 48px;

pages/plan/index.vue

@@ -17,13 +17,74 @@
         ·顶配师资，国内外一流专家学者及代表性企业家担任授课老师<br />·论文导师匹配将在第二学年开启。我们在第二学年设计了丰富的必修、学位课和更多的专题实践，帮助学生深入了解不同教授的研究领域,为大家确定研究方向和匹配导师提供平台。
       </p>
     </section>
+    <section class="section">
+      <h2 class="title">国际游学</h2>
+      <p>
+        数字领导力DBA游学为中国最具变革精神的企业家打造精品线路，以亦学创新无与伦比的政、商、学资源让学员在一周至十天的学习行程中，打下塑造企业未来发展、提升格局的基础。开拓企业发展的国际视野及国际投资机遇。
+      </p>
+    </section>
+    <div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
+      <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
+            <img :src="item.web_img_uri" />
+            <p>{{ item.title }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 export default {
   layout: 'normal',
   data() {
-    return {}
+    const _this = this
+    return {
+      listData: [
+        { web_img_uri: 'https://webapp-pub.ezijing.com/project/cbu-enterprise/youxue/1.png', title: '参访PayPal' },
+        { web_img_uri: 'https://webapp-pub.ezijing.com/project/cbu-enterprise/youxue/2.png', title: '参访加州伯克利' },
+        { web_img_uri: 'https://webapp-pub.ezijing.com/project/cbu-enterprise/youxue/3.png', title: 'DBA学员北美游学' },
+        {
+          web_img_uri: 'https://webapp-pub.ezijing.com/project/cbu-enterprise/youxue/4.png',
+          title: '清华企业家校友之夜'
+        },
+        {
+          web_img_uri: 'https://webapp-pub.ezijing.com/project/cbu-enterprise/youxue/5.png',
+          title: '参访加州浸会大学'
+        },
+        { web_img_uri: 'https://webapp-pub.ezijing.com/project/cbu-enterprise/youxue/6.png', title: '参访斯坦福' }
+      ],
+      swiperOption: {
+        observer: true,
+        observeParents: true,
+        speed: 400,
+        autoplay: true,
+        delay: 3000,
+        loop: true,
+        slidesPerView: 'auto',
+        centeredSlides: true,
+        spaceBetween: 18,
+        on: {
+          init() {
+            _this.swiper.slideNext()
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper
+    }
+  },
+  methods: {
+    swiperStop() {
+      this.swiper.autoplay.stop()
+    },
+    swiperStart() {
+      this.swiper.autoplay.start()
+    }
   }
 }
 </script>
@@ -56,6 +117,40 @@ export default {
       max-width: 100%;
     }
   }
+  .swiper-content {
+    margin-top: -40px;
+    padding-bottom: 40px;
+
+    .swiper-slide {
+      position: relative;
+      width: 388px;
+      height: 244px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        line-height: 100%;
+      }
+      p {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+        padding: 10px;
+        background: rgba(0, 0, 0, 0.5);
+      }
+    }
+    .swiper-wrapper {
+      padding: 40px 0;
+      align-items: center;
+    }
+    .swiper-slide-active {
+      width: 424px;
+      height: 266px;
+      box-shadow: 0px 0px 43px 1px rgba(0, 0, 0, 0.33);
+    }
+  }
 }
 .is-h5 {
   .section {
@@ -87,5 +182,39 @@ export default {
       max-width: 100%;
     }
   }
+
+  .swiper-content {
+    margin-top: -0.2rem;
+    padding-bottom: 0.2rem;
+    .swiper-slide {
+      position: relative;
+      width: 2.02rem;
+      height: 1.22rem;
+
+      img {
+        width: 100%;
+        height: 100%;
+        line-height: 100%;
+      }
+      p {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+        padding: 5px;
+        background: rgba(0, 0, 0, 0.5);
+      }
+    }
+    .swiper-wrapper {
+      padding: 0.2rem 0;
+      align-items: center;
+    }
+    .swiper-slide-active {
+      width: 2.12rem;
+      height: 1.33rem;
+      box-shadow: 0px 0px 0.2rem 1px rgba(0, 0, 0, 0.33);
+    }
+  }
 }
 </style>