活动详情，旅游、营地、新闻、活动列表

assets/styles/base.scss

@@ -139,7 +139,7 @@ input[disabled] {
   border-bottom: 1px solid #DFDFDF;
 }
 .mint-second-menu li:last-child{
-  border-bottom: none;
+  border-bottom: none !important;
 }
 .mint-second-menu li.active {
   color:#34C1A8;

components/goTop.vue

@@ -73,6 +73,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 9;
+    z-index: 99;
   }
 </style>

components/secondBanner.vue

@@ -10,7 +10,7 @@
           <img
             :src= "item.cover"
             :alt="item.title"
-            style="height: 80px;width:auto;">
+            style="height: 80px;width:auto;margin: 0 auto;">
         </li>
       </ul>
     </div>

pages/activity.vue

@@ -172,7 +172,7 @@
       margin: 10px 0;
     }
     #scroll-area li{
-      box-shadow: 2px 3px 13px #999;
+      box-shadow: 2px 3px 13px rgba(153,153,153,0.2);
       margin: 17px 0;
       border-radius: 3px;
     }

pages/activityDetail/index.vue

 <template>
-  <div class="shop-page">
-    <Header :seller="seller" />
-    <mt-navbar v-model="selected">
-      <mt-tab-item id="goods">点餐</mt-tab-item>
-      <mt-tab-item id="ratings">评价</mt-tab-item>
-      <mt-tab-item id="seller">商家</mt-tab-item>
-    </mt-navbar>
-    <mt-tab-container v-model="selected">
-      <mt-tab-container-item id="goods">
-        <Goods :seller="seller" />
-      </mt-tab-container-item>
-      <mt-tab-container-item id="ratings">
-        <Ratings :seller="seller" />
-      </mt-tab-container-item>
-      <mt-tab-container-item id="seller">
-        <Seller :seller="seller" />
-      </mt-tab-container-item>
-    </mt-tab-container>
+  <div
+    class="activity-detail-page"
+    style="margin-top:1.87733rem;">
+    <Head/>
+    <img
+      :src="detail.banner"
+      style="width: 100%;height:249px;object-fit: cover;">
+    <div class="detail-main-container">
+      <div>
+        <h1 class="activity-detail-name">{{ detail.title }}</h1>
+        <div class="activity-detail-info">
+          <div
+            class="flex-aic">
+            <span style="color: #666;font-size: 14px;">活动人数</span>
+            <div>{{ detail.limitNum }}</div>
+          </div>
+          <div
+            class="flex-aic"
+            style="margin: 13px 0;">
+            <span style="color: #666;font-size: 14px;">活动时间</span>
+            <div>{{ detail.startTime | formatDate('yyyy-MM-dd hh:mm') }}~{{ detail.endTime | formatDate('yyyy-MM-dd hh:mm') }} </div>
+          </div>
+          <div class="flex-aic">
+            <span style="color: #666;font-size: 14px;">活动地点</span>
+            <div>{{ detail.province }}{{ detail.city }}{{ detail.town }}{{ detail.address }}</div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div style="height: 10px;background: #eee;"/>
+      </div>
+      <div class="flex-jcb activity-detail">
+        <div style="background: #fff;margin: 20px 0;">
+          <h3
+            class="content-t"
+            style="text-align: left;">活动详情</h3>
+          <div
+            class="models-details"
+            v-html="detail.content"/>
+        </div>
+      </div>
+    </div>
+    <go-top/>
   </div>
 </template>
 
 <script>
-  import Header from "./components/header";
-  import Goods from "./components/goods";
-  import Ratings from "./components/ratings";
-  import Seller from "./components/seller";
-  import * as shoppingApi from "~/assets/services/shopping";
+  import axios from '../../plugins/axios'
+  import Head from "~/components/head";
+  import DetailBanner from '~/components/detailBanner'
+  import GoTop from "~/components/goTop";
 
   export default {
     components: {
-      Header,
-      Goods,
-      Ratings,
-      Seller
+      Head,
+      DetailBanner,
+      GoTop
     },
     data() {
-      return {
-        selected: "goods",
-        seller: {}
-      };
+      return {};
     },
-    async asyncData() {
-      const {
-        data
-      } = await shoppingApi.seller();
-      return {
-        seller: data
-      };
-    },
-    created() {
-      // vue resource
-      // this.$http.get('api/seller').then((res) => {
-      //   res = res.body;
-      //   if(res.errno === ERR_OK){
-      //     this.seller = res.data;
-      //     console.log(this.seller);
-      //   }
-      // })
+    async asyncData({ route}) {
+      const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/'+route.query.id);
+      let detail = data.data;
+      detail.content =detail.content.replace(/<img/g,"<img style='width:90%'");
+      return {detail: detail}
     },
+    created() {},
+    methods: {},
   };
 
 </script>
@@ -65,8 +75,101 @@
 <style lang="scss">
   @import "../../assets/styles/mixin";
 
-  .shop-page {
+  .activity-detail-page {
     font-size: px2rem(24px);
+    .content-t{
+      font-size: 15px;
+      font-weight: bold;
+      margin-bottom: 13px;
+    }
+  }
+  .detail-main-container{
+    border-radius: 7px 7px 0 0;
+    box-shadow: 0px 0px 13px #666;
+    margin-top: -10px;
+    z-index: 99;
+    position: relative;
+    background: #fff;
+    .activity-detail-name{
+      padding: 15px px2rem(20px);
+      font-size: px2rem(34px);
+      font-weight: bold;
+      border-bottom: 1px solid #dfdfdf;
+    }
+    .activity-detail{
+      padding: 0 px2rem(20px);
+    }
+    .activity-detail-info{
+      padding: 13px px2rem(20px);
+      font-size: 14px;
+      span{
+        color: #666;
+        min-width: 60px;
+        margin-right: 13px;
+      }
+    }
+    .vehicle-lower{
+      padding: 0 px2rem(20px);
+      font-size: px2rem(30px);
+      margin-top: px2rem(20px);
+      margin-bottom: px2rem(20px);
+      span{
+        color: #F25B5B;
+        font-size: px2rem(36px);
+        font-weight: bold;
+        margin-left: px2rem(30px);
+        margin-right: px2rem(4px);
+      }
+    }
+    .member-list{
+      padding: 0 px2rem(20px);
+    }
+    .member-list-c img{
+      width: 20px;
+      height: 20px;
+      margin-right: px2rem(20px);
+    }
+    .member-list-name{
+      color: #666;
+      font-size:px2rem(26px);
+      margin-bottom: px2rem(20px);
+    }
+    .market-price{
+      font-size: px2rem(30px);
+      margin: px2rem(34px) 0;
+      padding: 0 px2rem(20px);
+    }
+    .detail-list{
+      height: px2rem(100px);
+    }
+    .select-tab{
+      width: 100%;
+      .select-tab-li-l{
+        font-size:16px;
+        color: #999;
+        padding: 0 px2rem(20px);
+      }
+      .select-tab-li-l.active{
+        color: #333;
+        font-weight: bold;
+        height: px2rem(100px);
+        line-height: px2rem(100px);
+        border-bottom: 2px solid #1bbb9f;
+      }
+    }
+    .scroll0, .scroll1, .scroll2, .scroll3{
+      padding: 0 px2rem(20px);
+      .base-set{
+        margin: 17px 0;
+        font-size: 15px;
+        font-weight: bold;
+      }
+      .base-set-name{
+        font-size: 13px;
+        color: #666;
+        padding: 0 10px 6px 0;
+      }
+    }
 
     .mint-navbar {
       position: sticky;
@@ -98,6 +201,27 @@
         }
       }
     }
+    .left-item{
+      width: 30%;
+      border-left: 1px solid #c1c1c1;
+      border-right: 1px solid #c1c1c1;
+      height: 34px;
+      padding-left: 10px;
+      line-height: 34px;
+    }
+    .right-item{
+      width:70%;
+      border-right: 1px solid #ccc;
+      height: 34px;
+      line-height: 34px;
+      padding-left: 10px;
+    }
+    .modal-item{
+      border-top:1px solid #ccc;
+    }
+    .kr-article-article .modal-item:last-child{
+      border-bottom: 1px solid #ccc;
+    }
   }
 
 </style>

pages/campsite.vue

 <template>
-  <div class="order-page">
+  <div class="campsite-container">
     <Head/>
     <second-banner
       :list = "bannerList"
@@ -19,19 +19,21 @@
       id="scroll-area"
       type="1"
       style="padding-top: 0;"
-      class="main-padding">
-      <router-link
+      class="main-padding campsite-ul">
+      <li
         v-for="item in dataDetail"
-        :to="{ path: 'campsiteDetail', query:{id: item.id }}"
         :key="item.id"
-        class="flex-jcb news-item">
-        <img
-          :src="item.logo"
-          class="tour-img-home">
-        <div class="tour-home-r">
-          <div class="ellipsis2">{{ item.name }}</div>
-        </div>
-      </router-link>
+        class="campsite-li">
+        <router-link
+          :to="{ path: 'campsiteDetail', query:{id: item.id }}"
+          class="campsite-item">
+          <img
+            :src="item.logo"
+            class="campsite-logo">
+          <div class="ellipsis2 campsite-name">{{ item.name }}</div>
+        </router-link>
+      </li>
+
     </ul>
     <p
       v-if="preventRepeatReuqest"
@@ -171,6 +173,32 @@
 
 <style lang="scss">
   @import "../assets/styles/mixin";
+  .campsite-container{
+    .campsite-ul{
+      padding-top: 0px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      .campsite-li{
+        box-shadow: 2px 3px 13px rgba(153,153,153,0.2);
+        width: 48%;
+        margin: 10px 0;
+        border-radius: 3px;
+      }
+      .campsite-logo{
+        width: 100%;
+        height: 110px;
+        object-fit: cover;
+        border-radius: 3px 3px 0 0;
+      }
+      .campsite-name{
+        font-size: 14px;
+        font-weight: bold;
+        margin: 13px;
+      }
+    }
+
+  }
   .news-item{
     margin: 10px 0;
   }
@@ -181,32 +209,4 @@
     width: px2rem(300px);
     height: px2rem(150px);
   }
-  .order-page {
-    .no-data {
-      text-align: center;
-
-      .nodata {
-        width: px2rem(400px);
-        height: px2rem(400px);
-        margin: 15vh auto px2rem(10px) auto;
-      }
-
-      p {
-        color: #6a6a6a;
-        font-size: px2rem(32px);
-        margin-bottom: px2rem(15px);
-      }
-
-      .login {
-        width: px2rem(240px);
-        height: px2rem(80px);
-        background: #56d176;
-        border: none;
-        color: #fff;
-        font-size: px2rem(28px);
-        border-radius: 2px;
-      }
-    }
-  }
-
 </style>

pages/news.vue

@@ -33,7 +33,6 @@
             <img
               :src="item.coverImage"
               style="width: 17px;height: 17px;margin-right: 7px;">
-
             {{ item.addTime.substring(0, 10) }}</div>
         </div>
       </router-link>
@@ -169,6 +168,7 @@
     .news-img-list{
       width: 92px;
       height: 75px;
+      border-radius: 3px;
     }
     .news-list {
       border-bottom: 1px solid #dfdfdf;
@@ -198,31 +198,4 @@
     width: px2rem(300px);
     height: px2rem(150px);
   }
-  .order-page {
-    .no-data {
-      text-align: center;
-
-      .nodata {
-        width: px2rem(400px);
-        height: px2rem(400px);
-        margin: 15vh auto px2rem(10px) auto;
-      }
-
-      p {
-        color: #6a6a6a;
-        font-size: px2rem(32px);
-        margin-bottom: px2rem(15px);
-      }
-
-      .login {
-        width: px2rem(240px);
-        height: px2rem(80px);
-        background: #56d176;
-        border: none;
-        color: #fff;
-        font-size: px2rem(28px);
-        border-radius: 2px;
-      }
-    }
-  }
 </style>

pages/tour.vue

 <template>
-  <div class="order-page">
+  <div class="tour-container">
     <Head/>
     <second-banner
       :list = "bannerList"
@@ -24,12 +24,12 @@
         v-for="item in dataDetail"
         :to="{ path: 'tourDetail', query:{id: item.id }}"
         :key="item.id"
-        class="flex-jcb news-item">
+        class="flex-jcb tour-item">
         <img
           :src="item.cover"
-          class="tour-img-home">
-        <div class="tour-home-r">
-          <div class="ellipsis2">{{ item.name }}</div>
+          class="tour-item-img">
+        <div class="tour-list">
+          <div class="ellipsis2 tour-item-name">{{ item.name }}</div>
         </div>
       </router-link>
     </ul>
@@ -172,6 +172,26 @@
 
 <style lang="scss">
   @import "../assets/styles/mixin";
+  .tour-container{
+    .tour-item{
+      margin: 17px 0;
+    }
+    .tour-item-name{
+      font-size: 15px;
+      font-weight: bold;
+    }
+    .tour-item-img{
+      width: 92px;
+      height: 75px;
+      object-fit: cover;
+      border-radius: 3px;
+    }
+    .tour-list{
+      border-bottom: 1px solid #dfdfdf;
+      margin-left: px2rem(20px);
+      width: 100%;
+    }
+  }
   .news-item{
     margin: 10px 0;
   }

pages/vehicle.vue

@@ -196,6 +196,7 @@
   .vehicle-img-list{
     width: px2rem(277px);
     height: px2rem(225px);
+    border-radius: 3px;
   }
   .vehicle-list{
     border-bottom: 1px solid #dfdfdf;

pages/vehicleDetail/index.vue

@@ -337,6 +337,10 @@
     .detail-main-container{
       border-radius: 7px 7px 0 0;
       box-shadow: 0px 0px 13px #666;
+      margin-top: -10px;
+      z-index: 99;
+      position: relative;
+      background: #fff;
       .vehicle-detail-name{
         padding: 14px px2rem(20px) 0 px2rem(20px);
         font-size: px2rem(34px);
@@ -374,8 +378,8 @@
       }
       .member-list-name{
         color: #666;
-        font-size:px2rem(24px);
-        margin-bottom: px2rem(24px);
+        font-size:px2rem(26px);
+        margin-bottom: px2rem(20px);
       }
       .market-price{
         font-size: px2rem(30px);
@@ -408,9 +412,9 @@
           font-weight: bold;
         }
         .base-set-name{
-          font-size: 12px;
+          font-size: 13px;
           color: #666;
-          padding: 0 10px 18px 0;
+          padding: 0 10px 6px 0;
         }
       }