'招商体验'

pages/merchants/campus/_id.vue

@@ -14,16 +14,16 @@
     </common-banner>
 
     <!-- 校区 -->
-    <div class="town one w1200">
-      <div class="title-content">
-        <h2 class="title">{{ getCity(type).name || '' }}校区</h2>
-        <div class="title-sub">{{ getCity(type).pingy || '' }}</div>
+    <div class="town one">
+      <div class="title-content w1200">
+        <h2 class="title">{{ getCity(type).name || '' }}</h2>
+        <div class="title-sub">{{ getCity(type).pingy || '' }} CAMPUS</div>
       </div>
-      <div class="town-content">
+      <div class="town-content w1200">
         <h3 class="town-title">逻辑狗·搜索小镇</h3>
         <div class="town-content-info">
           <div class="content-left">
-            <img src="~/assets/images/campus/icon_adderss@2x.png" alt="" srcset="">
+            <img src="~/assets/images/campus/icon_adderss_new@2x.png" alt="" srcset="">
             <div class="content-left-info">
               <div class="info-address">
                 <p class="area">{{ town.area }}</p>
@@ -43,63 +43,54 @@
             <div class="town-img">
               <img :src="town.imgUrl" alt="">
             </div>
-            <div class="circle_top_r">
-              <img src="~/assets/images/campus/circle_big.png" alt="">
-            </div>
-            <div class="circle_bottom_l">
-              <img src="~/assets/images/campus/circle_small.png" alt="">
-            </div>
           </div>
         </div>
       </div>
     </div>
 
     <!-- 校区环境/精彩活动 -->
-    <div class="main">
-      <div class="environment">
-        <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="environment[0].imgUrl" alt="" srcset="">
-            </div>
-            <div class="e-content-right">
-              <div class="e-right-top">
-                <div class="right-top-1"><img :src="environment[1].imgUrl" alt="" srcset=""></div>
-                <div class="right-top-2"><img :src="environment[2].imgUrl" alt="" srcset=""></div>
-              </div>
-              <div class="e-right-bottom">
-                <div class="right-bottom-1"><img :src="environment[3].imgUrl" alt="" srcset=""></div>
-                <div class="right-bottom-2"><img :src="environment[4].imgUrl" alt="" srcset=""></div>
-              </div>
-            </div>
-            <div class="circle">
-              <img src="~/assets/images/campus/circle_active.png" alt="" srcset="">
-            </div>
+    <div class="environment">
+      <div class="title-content w1200">
+        <h2 class="title">校区环境</h2>
+        <div class="title-sub">WONDERFUL ACTIVITY</div>
+      </div>
+      <div class="main-wrap w1200">
+        <div class="e-content">
+          <div class="e-content-left">
+            <img :src="environment[0].imgUrl" alt="" srcset="">
           </div>
-
-          <!-- 精彩活动 -->
-          <div class="active">
-            <div class="title-content">
-              <div class="title-zh">精彩活动</div>
+          <div class="e-content-right">
+            <div class="e-right-top">
+              <div class="right-top-1"><img :src="environment[1].imgUrl" alt="" srcset=""></div>
+              <div class="right-top-2"><img :src="environment[2].imgUrl" alt="" srcset=""></div>
             </div>
-            <div class="active-content">
-              <ul class="list">
-                <li class="active-item" v-for="(item, index) in activeData" :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 class="e-right-bottom">
+              <div class="right-bottom-1"><img :src="environment[3].imgUrl" alt="" srcset=""></div>
+              <div class="right-bottom-2"><img :src="environment[4].imgUrl" alt="" srcset=""></div>
             </div>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- 精彩活动 -->
+    <div class="active w1200">
+      <div class="title-content">
+        <h2 class="title">精彩活动</h2>
+        <div class="title-sub">WONDERFUL ACTIVITY</div>
+      </div>
+      <div class="active-content">
+        <ul class="list">
+          <li class="active-item" v-for="(item, index) in activeData" :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>
 </template>
 
@@ -489,6 +480,24 @@ export default {
   // background: #f0f2f5;
 }
 
+.title-content {
+  .title {
+    font-size: 34px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #262626;
+  }
+  .title-sub {
+    text-align: center;
+    margin-top: 10px;
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #646A7E;
+    line-height: 26px;
+  }
+}
+
 .title-zh {
   font-size: 46px;
   font-family: PingFangSC-Semibold, sans-serif;
@@ -515,30 +524,16 @@ export default {
 }
 
 .town {
-  // padding: 190px 0 142px;
-  margin-top: 100px;
+  padding: 100px 0 100px;
+  background: url('~assets/images/campus/bg_active.png') no-repeat center;
+  background-size: 100% 100%;
+  // margin-top: 100px;
   .title-en {
     top: -38px;
     left: 50%;
     transform: translateX(-50%);
   }
-  .title-content {
-    .title {
-      font-size: 34px;
-      font-family: PingFangSC-Semibold, PingFang SC;
-      font-weight: 600;
-      color: #262626;
-    }
-    .title-sub {
-      text-align: center;
-      margin-top: 10px;
-      font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #646A7E;
-      line-height: 26px;
-    }
-  }
+
   .town-content {
     margin-top: 38px;
     .town-title {
@@ -605,8 +600,8 @@ export default {
           }
         }
         img {
-          width: 20px;
-          height: 23px;
+          width: 23px;
+          height: 28px;
         }
       }
     }
@@ -629,27 +624,42 @@ export default {
         top: -62px;
         right: 0px;
       }
-      .circle_bottom_l {
-        position: absolute;
-        bottom: -52px;
-        left: 56px;
-      }
     }
   }
 }
 
 .main {
-  padding-bottom: 172px;
   .main-wrap {
     background: url('~assets/images/campus/content_bg.png') no-repeat;
   }
 }
 
 .environment {
+  padding: 100px 0;
+  background: url('~assets/images/campus/bg_env.png') no-repeat bottom 33px center;
+  background-size: 1338px 375px;
+  background-color: #004DE7;
+  .title-content {
+    .title {
+      font-size: 34px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #FFFFFF;
+    }
+    .title-sub {
+      text-align: center;
+      margin-top: 10px;
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #B6BDD4;
+      line-height: 26px;
+    }
+  }
   .e-content {
     position: relative;
     display: flex;
-    margin-top: 146px;
+    margin-top: 68px;
     // background: url('~assets/images/campus/circle_active.png') no-repeat bottom -120px left -14px;
     img {
       object-fit: cover;
@@ -662,7 +672,6 @@ export default {
       height: 433px;
       margin-right: 9px;
       z-index: 10;
-      box-shadow: 0px 5px 21px 0px #E8F3F3;
     }
     .e-content-right {
       display: flex;
@@ -676,12 +685,10 @@ export default {
           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 {
@@ -692,12 +699,10 @@ export default {
           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;
         }
       }
     }
@@ -710,9 +715,12 @@ export default {
 }
 
 .active {
-  margin-top: 192px;
+  margin-bottom: 95px;
+  padding: 100px 0 25px;
+  background: url('~assets/images/campus/bg_campus.png') no-repeat center;
+  background-size: 555px 1238px;
   .active-content {
-    margin-top: 160px;
+    margin-top: 58px;
   }
   .list {
     .active-item {
@@ -735,10 +743,10 @@ export default {
       }
       .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;
+        // 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;
         height: 174px;