'全国校区'

components/about/header.vue → components/about/banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header" :style="{backgroundImage: 'url(' + bgImage + ')' }" >
+  <div class="banner" :style="{backgroundImage: 'url(' + bgImage + ')' }" >
     {{ title }}
   </div>
 </template>
@@ -33,7 +33,7 @@ export default {
 
 <style lang="scss" scoped>
 @import "~static/common/style.sass";
-.header {
+.banner {
   display: flex;
   justify-content: center;
   align-items: center;

components/home/header.vue

@@ -32,7 +32,7 @@
 							<nuxt-link to="/experice">网校中心</nuxt-link>
 						</li>
 						<li>
-							<nuxt-link target="_blank" to="/prod">全国校区</nuxt-link>
+							<nuxt-link target="_blank" to="/campus">全国校区</nuxt-link>
 						</li>
 						<li>
 							<nuxt-link target="_blank" to="/news">加盟合作</nuxt-link>

pages/about/contact.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="container">
     <abount-header :title="title" :bgImage="bgImage"></abount-header>
+
     <!-- 优质输出平台 -->
     <div class="quality">
       <div class="q-title title-zh">全球优质教育内容输出平台</div>
@@ -105,7 +106,7 @@
 </template>
 
 <script>
-import AbountHeader from '~/components/about/header';
+import AbountHeader from '~/components/about/banner';
 
 export default {
   data() {

pages/about/team.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import AbountHeader from "~/components/about/header";
+import AbountHeader from "~/components/about/banner";
 
 export default {
   data() {

pages/campus/_type/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="container">
+    校区详情
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
+    console.log(params);
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

pages/campus/index.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="container">
+    <div class="header">
+      <span>中德全国校区</span>
+      <div class="form channel">
+        <div class="text control">加盟申请</div>
+        <div class="info control">
+          <img src="~assets/images/campus/phone.png" alt="">
+          <div class="phone">400-6807300</div>
+        </div>
+        <div class="control-input">
+          <input type="text" placeholder="姓名">
+        </div>
+        <div class="control-input">
+          <input type="text" placeholder="手机号">
+        </div>
+        <div class="control-input">
+          <input type="text" placeholder="邮箱地址">
+        </div>
+        <div class="control-input">
+          <input type="text" placeholder="加盟城市">
+        </div>
+        <div class="submit">提交申请</div>
+      </div>
+    </div>
+
+    <!-- 全国校区 -->
+    <div class="campus">
+      <div class="q-title title-zh">全国校区</div>
+      <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>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      campusList: [
+        {
+          id: 1,
+          imgUrl: require('~/assets/images/campus/campus_img.jpg'),
+          address: '盈港东路8300弄佳乐苑社区商铺',
+          phone: '4007288000',
+          name: '襄阳校区',
+          area: '上海市·上海市市辖区·青浦区'
+        },
+        {
+          id: 2,
+          imgUrl: require('~/assets/images/campus/campus_img.jpg'),
+          address: '盈港东路8300弄佳乐苑社区商铺',
+          phone: '4007288000',
+          name: '武汉校区',
+          area: '上海市·上海市市辖区·青浦区'
+        },
+        {
+          id: 3,
+          imgUrl: require('~/assets/images/campus/campus_img.jpg'),
+          address: '盈港东路8300弄佳乐苑社区商铺',
+          phone: '4007288000',
+          name: '唐山校区',
+          area: '上海市·上海市市辖区·青浦区'
+        },
+        {
+          id: 4,
+          imgUrl: require('~/assets/images/campus/campus_img.jpg'),
+          address: '盈港东路8300弄佳乐苑社区商铺',
+          phone: '4007288000',
+          name: '莆田校区',
+          area: '上海市·上海市市辖区·青浦区'
+        }
+      ]
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~static/common/style.sass";
+
+.title-zh {
+  height: 81px;
+  line-height: 81px;
+  font-size: 58px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #000000;
+  letter-spacing: 1px;
+  text-align: center;
+}
+
+.header {
+  position: relative;
+  background: url('~assets/images/campus/header.png') 100% 100% no-repeat;
+  height: 882px;
+  // padding: 446px 0 0 302px;
+  padding: 446px 0 0 15%;
+  span {
+    font-size: 80px;
+    font-family: PingFangSC-Semibold,PingFang SC;
+    font-weight: 600;
+    color:#ffffff;
+    line-height: 112px;
+  }
+  .form {
+    font-size: 16px;
+    position: absolute;
+    right: 13.8%;
+    // right: 266px;
+    bottom: 124px;
+    width: 327px;
+    height: 450px;
+    background:#FFFFFF;
+    border-radius: 3px;
+    padding: 34px 0 12px;
+    div.text {
+      font-size:14px;
+      line-height:20px;
+      font-family:PingFangSC-Regular,PingFang SC;
+      font-weight:400;
+      color: #5B5F5D;
+      margin-bottom: 7px;
+    }
+    div.info {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+      .phone {
+        font-size: 26px;
+        font-family: PingFangSC-Medium,PingFang SC;
+        font-weight: 500;
+        margin-left: 15px;
+      }
+    }
+    .control {
+      width:250px;
+      margin: 0 auto;
+    }
+    .control-input {
+      margin: 0 auto;
+      width:250px;
+      border-radius: 3px;
+      border: 1px solid rgba(151,151,151,1);
+      margin-bottom: 23px;
+      input {
+        width: 100%;
+        height:44px;
+        line-height: 44px;
+        padding: 0 13px ;
+        background: none;
+        outline: none;  
+        border: 0px;
+        &::-webkit-input-placeholder {
+          color: #A4A6A5;
+        }
+      }
+    }
+    .submit {
+      margin: 0 auto;
+      text-align: center;
+      font-size:14px;
+      width: 148px;
+      height: 27px;
+      line-height: 27px;
+      background: linear-gradient(180deg,rgba(88,144,251,1) 0%,rgba(51,117,252,1) 100%);
+      box-shadow: 0px 7px 14px 0px rgba(136,176,254,0.79);
+      border-radius: 3px;
+      color: #ffffff;
+    }
+  }
+}
+
+.campus {
+  padding: 192px 0 206px;
+  .c-content {
+    margin-top: 130px;
+    ul {
+      li.campus-item {
+        display: inline-block;
+        width: 374px;
+        background:#FFFFFF;
+        box-shadow: 0px 9px 13px 0px rgba(123,166,252,0.13);
+        border-radius: 10px;
+        margin: 0 38px 42px 0;
+        transition: transform .3s ease-in-out;
+        &:nth-child(3n) {
+          margin-right: 0;
+        }
+        &:hover {
+          transform: translate3d(0,-8px,0);
+        }
+        img {
+          width: 100%;
+          border-radius: 18px 18px 0 0;
+        }
+        .info {
+          height: 175px;
+          color: #898A8C;
+          padding: 15px 20px 15px;
+          .icon {
+            margin-right: 8px;
+          }
+        }
+        .area {
+          font-size:14px;
+          font-family: PingFangSC-Regular,PingFang SC;
+          font-weight: 400;
+          color:#898A8C;
+          line-height: 20px;
+        }
+        .name {
+          font-size:22px;
+          font-family: PingFangSC-Medium,PingFang SC;
+          font-weight:500;
+          color:#1F241E;
+          line-height:30px;
+          margin-top: 5px;
+        }
+        .address {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          font-family: PingFangSC-Regular,PingFang SC;
+          font-weight: 400;
+          line-height: 17px;
+          margin-top: 9px;
+        }
+        .phone {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          font-family: PingFangSC-Regular,PingFang SC;
+          font-weight: 400;
+          line-height: 17px;
+          margin-top: 2px;
+        }
+        .detail {
+          width: 85px;
+          height: 26px;
+          line-height: 26px;
+          border-radius: 4px;
+          border: 1px solid #4B86FB;
+          font-size: 10px;
+          text-align: center;
+          color: #1B1616;
+          margin: 17px auto 0;
+        }
+      }
+    }
+  }
+}
+
+</style>