'校区详情'

pages/campus/_type/index.vue

@@ -6,7 +6,7 @@
     <!-- 校区 -->
     <div class="town one w1200">
       <div class="title-content">
-        <div class="t-title title-zh">襄阳校区</div>
+        <div class="t-title title-zh">{{ getCity(type) }}校区</div>
       </div>
       <div class="town-content">
         <h3 class="town-title">逻辑狗·搜索小镇</h3>
@@ -49,6 +49,44 @@
         <div class="title-content">
           <div class="title-zh">校区环境</div>
         </div>
+        <div class="main-wrap w1200">
+          <div class="e-content">
+            <div class="e-content-left">
+              <img src="~/assets/images/campus/campus_img.jpg" alt="" srcset="">
+            </div>
+            <div class="e-content-right">
+              <div class="e-right-top">
+                <div class="right-top-1"><img src="~/assets/images/campus/campus_img.jpg" alt="" srcset=""></div>
+                <div class="right-top-2"><img src="~/assets/images/campus/campus_img.jpg" alt="" srcset=""></div>
+              </div>
+              <div class="e-right-bottom">
+                <div class="right-bottom-1"><img src="~/assets/images/campus/campus_img.jpg" alt="" srcset=""></div>
+                <div class="right-bottom-2"><img src="~/assets/images/campus/campus_img.jpg" alt="" srcset=""></div>
+              </div>
+            </div>
+            <div class="circle">
+              <img src="~/assets/images/campus/circle_active.png" alt="" srcset="">
+            </div>
+          </div>
+
+          <!-- 精彩活动 -->
+          <div class="active">
+            <div class="title-content">
+              <div class="title-zh">精彩活动</div>
+            </div>
+            <div class="active-content">
+              <ul class="list">
+                <li class="active-item" v-for="(item, index) in activeList" :key="index">
+                  <img :src="item.imgUrl" alt="" srcset="">
+                  <div class="info">
+                    <p class="title">{{ item.title }}</p>
+                    <p class="desc">{{ item.desc }}</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -58,18 +96,82 @@
 export default {
   data() {
     return {
-
+      activeList: [
+        {
+          title: '见过超大只的逻辑狗吗？',
+          desc: '想跟他一起合影吗，他们可以变成自己 喜欢的样子',
+          imgUrl: 'http://zaojiao.net/public/static/index/images/xq/hc-1.jpg'
+        },
+        {
+          title: '见过超大只的逻辑狗吗？',
+          desc: '想跟他一起合影吗，他们可以变成自己 喜欢的样子',
+          imgUrl: 'http://zaojiao.net/public/static/index/images/xq/hc-1.jpg'
+        },
+        {
+          title: '见过超大只的逻辑狗吗？',
+          desc: '想跟他一起合影吗，他们可以变成自己 喜欢的样子',
+          imgUrl: 'http://zaojiao.net/public/static/index/images/xq/hc-1.jpg'
+        },
+        {
+          title: '见过超大只的逻辑狗吗？',
+          desc: '想跟他一起合影吗，他们可以变成自己 喜欢的样子',
+          imgUrl: 'http://zaojiao.net/public/static/index/images/xq/hc-1.jpg'
+        },
+        {
+          title: '见过超大只的逻辑狗吗？',
+          desc: '想跟他一起合影吗，他们可以变成自己 喜欢的样子',
+          imgUrl: 'http://zaojiao.net/public/static/index/images/xq/hc-1.jpg'
+        },
+        {
+          title: '见过超大只的逻辑狗吗？',
+          desc: '想跟他一起合影吗，他们可以变成自己 喜欢的样子',
+          imgUrl: 'http://zaojiao.net/public/static/index/images/xq/hc-1.jpg'
+        }
+      ]
     }
   },
   asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
+    return {
+      type: params.type
+    }
     console.log(params);
   },
+  methods: {
+    getCity(type) {
+      let key = parseInt(type);
+      switch (key) {
+        case 1:
+          return '襄阳'
+          break;
+
+        case 2:
+          return '武汉'
+          break;
+
+        case 3:
+          return '唐山'
+          break;
+
+        case 4:
+          return '莆田'
+          break;
+      
+        default:
+          return '北京'
+          break;
+      }
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import "~static/common/style.sass";
 
+.container {
+  background: #f0f2f5;
+}
+
 .title-zh {
   height: 81px;
   line-height: 81px;
@@ -148,10 +250,10 @@ export default {
     }
     .content-right {
       position: relative;
-      background: url('~assets/images/campus/circle_big.png'),
-                  url('~assets/images/campus/circle_small.png');
-      background-position: top -88px right -28px, bottom -82px left 28px;
-      background-repeat: no-repeat no-repeat;
+      // background: url('~assets/images/campus/circle_big.png'),
+      //             url('~assets/images/campus/circle_small.png');
+      // background-position: top -88px right -28px, bottom -82px left 28px;
+      // background-repeat: no-repeat no-repeat;
       .town-img {
         position: relative;
         z-index: 10;
@@ -173,4 +275,125 @@ export default {
   }
 }
 
+.main {
+  .main-wrap {
+    background: url('~assets/images/campus/content_bg.png') no-repeat;
+  }
+}
+
+.environment {
+  .e-content {
+    position: relative;
+    display: flex;
+    margin-top: 146px;
+    // background: url('~assets/images/campus/circle_active.png') no-repeat bottom -120px left -14px;
+    img {
+      object-fit: cover;
+      height: 100%;
+      width: 100%;
+      border-radius: 10px;
+    }
+    .e-content-left {
+      width: 577px;
+      height: 433px;
+      margin-right: 9px;
+      z-index: 10;
+      box-shadow: 0px 5px 21px 0px #E8F3F3;
+    }
+    .e-content-right {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .e-right-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .right-top-1 {
+          width: 385px;
+          height: 217px;
+          margin-right: 11px;
+          box-shadow: 0px 5px 21px 0px #E8F3F3;
+        }
+        .right-top-2 {
+          width: 217px;
+          height: 225px;
+          box-shadow: 0px 5px 21px 0px #E8F3F3;
+        }
+      }
+      .e-right-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .right-bottom-1 {
+          width: 307px;
+          height: 204px;
+          margin-right: 11px;
+          box-shadow: 0px 5px 21px 0px #E8F3F3;
+        }
+        .right-bottom-2 {
+          width: 293px;
+          height: 204px;
+          box-shadow: 0px 5px 21px 0px #E8F3F3;
+        }
+      }
+    }
+    .circle {
+      position: absolute;
+      bottom: -120px;
+      left: -14px;
+    }
+  }
+}
+
+.active {
+  margin-top: 192px;
+  .active-content {
+    margin-top: 160px;
+  }
+  .list {
+    .active-item {
+      width: 373px;
+      font-size: 0;
+      margin: 0 40px 42px 0;
+      display: inline-block;
+      box-shadow: 0px 5px 21px 0px #E8F3F3;
+      transition: transform .3s ease-in-out;
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+      &:hover {
+        transform: translate3d(0,-8px,0);
+      }
+      img {
+        border-radius: 10px 10px 0px 0px;
+        object-fit: cover;
+        width: 100%;
+      }
+      .info {
+        background-color: #ffffff;
+        background-image: url('~assets/images/campus/active_bg_01.png'),
+                          url('~assets/images/campus/active_bg_02.png');
+        background-repeat: no-repeat no-repeat;
+        background-position: left 34px top 80px, left 210px top 54px;
+        border-radius: 0 0 10px 10px;
+        padding: 33px 36px 64px;
+        .title {
+          font-size: 20px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #1F241E;
+          line-height: 28px;
+        }
+        .desc {
+          margin-top: 10px;
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #1F241E;
+        }
+      }
+    }
+  }
+}
+
 </style>

pages/campus/index.vue

@@ -30,27 +30,27 @@
       <div class="c-content w1200">
         <div class="list-warp">
           <ul class="list">
-              <li class="campus-item" v-for="(item, index) in campusList" :key="index">
-                  <img :src="item.imgUrl" alt="">
-                  <div class="info">
-                    <div class="area">{{ item.area }}</div>
-                    <div class="name">{{ item.name }}</div>
-                    <div class="address">
-                      <div class="icon"><img src="~/assets/images/campus/icon_address.png" alt=""></div>
-                      <p>{{ item.address }}</p>
-                    </div>
-                    <div class="phone">
-                      <div class="icon"><img src="~/assets/images/campus/icon_phone.png" alt=""></div>
-                      <p>{{ item.phone }}</p>
-                    </div>
-                    <div class="detail">
-                      <!-- to="{name:'news-category',params:{category: indexFirstNewsList.articleCategoryId}} -->
-                      <nuxt-link target="_blank" :to="{ name: 'campus-type', params: { type: item.id } }">
-                        查看详情
-                      </nuxt-link>
-                    </div>
-                  </div>
-              </li>
+            <li class="campus-item" v-for="(item, index) in campusList" :key="index">
+              <img :src="item.imgUrl" alt="">
+              <div class="info">
+                <div class="area">{{ item.area }}</div>
+                <div class="name">{{ item.name }}</div>
+                <div class="address">
+                  <div class="icon"><img src="~/assets/images/campus/icon_address.png" alt=""></div>
+                  <p>{{ item.address }}</p>
+                </div>
+                <div class="phone">
+                  <div class="icon"><img src="~/assets/images/campus/icon_phone.png" alt=""></div>
+                  <p>{{ item.phone }}</p>
+                </div>
+                <div class="detail">
+                  <!-- to="{name:'news-category',params:{category: indexFirstNewsList.articleCategoryId}} -->
+                  <nuxt-link :to="{ name: 'campus-type', params: { type: item.id } }">
+                    查看详情
+                  </nuxt-link>
+                </div>
+              </div>
+          </li>
           </ul>
         </div>
       </div>