updates

components/ProjectCard.vue

@@ -50,7 +50,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .project-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -73,6 +73,7 @@ export default {
   .tools {
     position: absolute;
     bottom: 23px;
+    left: 0;
     display: flex;
     justify-content: center;
     width: 100%;

components/ProjectCard1.vue

+<template>
+  <AppCard :title="title" style="margin-top:50px;">
+    <template #header-aside><nuxt-link :to="baseUrl" v-if="baseUrl">查看更多+</nuxt-link></template>
+    <div class="project-list">
+      <div class="project-item" v-for="(item, index) in list" :key="index">
+        <!-- <AppLink :data="item"><img :src="item.imgUrl"/></AppLink> -->
+        <div class="project-item-pic">
+          <img :src="item.imgUrl" />
+        </div>
+        <ul class="tools">
+          <li @click="handleSubmit(item)">我要报名</li>
+          <li><AppLink :data="item">了解详情</AppLink></li>
+        </ul>
+        <!-- <div class="tools">
+          <el-button type="primary" @click="handleSubmit(item)">我要报名</el-button>
+          <AppLink :data="item" style="margin-left:20px;">
+            <el-button plain type="primary">了解详情</el-button>
+          </AppLink>
+        </div> -->
+      </div>
+    </div>
+  </AppCard>
+</template>
+<script>
+import AppCard from '@/components/AppCard.vue'
+import AppLink from '@/components/Link.vue'
+
+export default {
+  name: 'ProjectCard',
+  props: { list: { type: Array, default: () => [] }, title: String, baseUrl: String },
+  components: { AppCard, AppLink },
+  data() {
+    return {}
+  },
+  methods: {
+    handleSubmit(data) {
+      if (data.onClick) {
+        data.onClick()
+      } else {
+        const formEl = document.querySelector('#form')
+        if (!formEl) return
+        window.scrollTo(0, formEl.offsetTop)
+        if (this.$parent.$refs.formSubmit) {
+          this.$parent.$refs.formSubmit.form.project_id = data.project_id
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.project-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  row-gap: 20px;
+  column-gap: 20px;
+}
+.project-item {
+  background-color: #fff;
+  .project-item-pic {
+    height: 345px;
+    overflow: hidden;
+  }
+  img {
+    width: 100%;
+  }
+  &:hover {
+    box-shadow: 0px 1px 24px rgba(0, 0, 0, 0.11);
+  }
+}
+.tools {
+  position: relative;
+  // margin-top: -20px;
+  padding: 25px 0;
+  display: flex;
+  justify-content: center;
+  border-top: 1px dashed #e1e1e1;
+  z-index: 1;
+
+  li {
+    flex: 1;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 25px;
+    color: #777;
+    text-align: center;
+    cursor: pointer;
+    &:hover {
+      font-weight: 500;
+      color: #333333;
+    }
+  }
+  li:first-child {
+    color: #a81840;
+  }
+  li + li {
+    border-left: 1px solid #e1e1e1;
+  }
+}
+</style>

components/TeacherCard1.vue

+<template>
+  <AppCard title="优秀师资">
+    <swiper ref="mySwiper" :options="swiperOptions" class="teacher-list">
+      <swiper-slide v-for="(item, index) in list" :key="index" class="teacher-item">
+        <div class="teacher-item-inner">
+          <img :src="item.imgUrl" />
+          <p>{{ item.name }}</p>
+        </div>
+        <div class="teacher-item-cover">
+          <h3>{{ item.name }}</h3>
+          <p>{{ item.project }} | {{ item.title }}</p>
+          <div v-html="item.desc"></div>
+        </div>
+      </swiper-slide>
+    </swiper>
+  </AppCard>
+</template>
+<script>
+import AppCard from '@/components/AppCard.vue'
+export default {
+  name: 'TeacherCard',
+  props: { list: { type: Array, default: () => [] } },
+  components: { AppCard },
+  data() {
+    return {
+      swiperOptions: {
+        autoplay: true,
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 20
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.teacher-list {
+  margin-bottom: 60px;
+}
+.teacher-item {
+  position: relative;
+  width: 286px;
+  height: 258px;
+  &:hover {
+    .teacher-item-cover {
+      transform: translateY(0);
+    }
+  }
+}
+.teacher-item-inner {
+  position: relative;
+  height: 100%;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  p {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0 20px;
+    height: 34px;
+    font-size: 16px;
+    line-height: 34px;
+    color: #ffffff;
+    background: rgba(0, 0, 0, 0.39);
+  }
+}
+.teacher-item-cover {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: #a81840;
+  color: #fff;
+  padding: 10px;
+  transform: translateY(100%);
+  transition: all 0.3s;
+  h3 {
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+    text-align: center;
+  }
+  p {
+    margin-top: 8px;
+    margin-bottom: 20px;
+    text-align: center;
+  }
+}
+</style>

pages/internationalDegree/index.vue

@@ -38,9 +38,9 @@
 
 <script>
 import AppCard from '@/components/AppCard.vue'
-import ProjectCard from '@/components/ProjectCard.vue'
+import ProjectCard from '@/components/ProjectCard1.vue'
 import NewsCard from '@/components/NewsCard.vue'
-import TeacherCard from '@/components/TeacherCard.vue'
+import TeacherCard from '@/components/TeacherCard1.vue'
 import FormSubmit from '@/components/FormSubmit.vue'
 import qaList from '@/assets/internationalDegreeQA.js'
 

pages/studyAbroad/index.vue

@@ -7,7 +7,7 @@
           <img :src="item.web_img_uri" />
         </swiper-slide>
       </swiper>
-      <template v-if="!isMobile">
+      <template>
         <div class="prev-button"></div>
         <div class="next-button"></div>
       </template>