更新

src/router/index.js

@@ -191,6 +191,15 @@ export default new Router({
                     title: 'LIST',
                     icon: 'document'
                 }
+            }, {
+                path: 'hdfc',
+                name: 'hdfc',
+                component: () =>
+                    import('@/views/services/activities/hdfc'),
+                meta: {
+                    title: 'LIST',
+                    icon: 'document'
+                }
             },
             {
                 path: 'detail',

src/views/services/activities/hdfc.vue

@@ -0,0 +1,274 @@
+<template>
+  <div style="background: #f0f0f0;padding-bottom:50px">
+    <div class="banner">
+      <img src="~@/assets/images/yqhd.jpg" alt="">
+    </div>
+    <div class="bread">
+      <div>
+        <span>当前位置:首页-园区活动-园区活动详情</span>
+      </div>
+    </div>
+    <div class="smart-device">
+      <div class="smart-title">
+        <span><span>活动风采</span>PARK AVTIVITIES</span>
+      </div>
+      <div class="smart-device-content">
+<!--        <div class="titles">-->
+<!--          <h3>{{ activityDetail.activityName }}</h3>-->
+<!--        </div>-->
+        <div class="list-content">
+          <p v-html="activityDetail.styleContent"></p>
+        </div>
+      </div>
+    </div>
+    <Message :show-dialog="showInfo" @closePop="closeMessage" />
+  </div>
+</template>
+
+<script>
+import { getActivityById } from '@/service/api_service'
+
+import Message from '@/views/message/index'
+export default {
+  components: {
+    Message
+  },
+  data() {
+    return {
+      showInfo: false,
+      active: 1,
+      zsList: [
+        {
+          img: 'zs1.png',
+          name: '专项扶持政策',
+          eventIndex: 1,
+          detail: ''
+        },
+        {
+          img: 'zs2.png',
+          name: '税收优惠',
+          eventIndex: 2,
+          detail: ''
+        },
+        {
+          img: 'zs3.png',
+          name: '奖励措施',
+          eventIndex: 3,
+          detail: ''
+        }
+      ],
+      id: '',
+      activityDetail: '',
+      number: 0
+    }
+  },
+  mounted() {
+    document.documentElement.scrollTop = document.body.scrollTop = 0 // 回到顶部
+    this.id = this.$route.query.id
+    this.getActivityById()
+  },
+  methods: {
+    getActivityById() {
+      const _this = this
+      getActivityById(this.id, null).then((res) => {
+        if (res.data) {
+          _this.activityDetail = res.data
+          _this.activityDetail.registrationStartTime = this.$common.transBaseDateTime(
+              _this.activityDetail.registrationStartTime
+          )
+          _this.activityDetail.registrationEndTime = this.$common.transBaseToDateTime(
+              _this.activityDetail.registrationEndTime
+          )
+          _this.activityDetail.activityStartTime = this.$common.transBaseDateTime(
+              _this.activityDetail.activityStartTime
+          )
+          _this.activityDetail.activityEndTime = this.$common.transBaseToDateTime(
+              _this.activityDetail.activityEndTime
+          )
+          if (_this.activityDetail.collectorsStatus === '2') {
+            _this.active = true
+          } else {
+            _this.active = false
+          }
+          _this.number = _this.activityDetail.activityQuota - _this.activityDetail.partakeNumber
+        }
+      })
+    },
+    closeMessage() {
+      this.showInfo = false
+    },
+    detail(index) {
+      // this.$router.push({path:'/zhaoshang/detail1?smallType='+index})
+      this.showInfo = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.banner img{
+  width: 100% !important;
+}
+@media screen and (min-width: 1000px){
+  .bread{
+    background: #fff;
+  }
+  .bread div{
+    width: 1200px;
+    margin: 0 auto;
+    text-align: left;
+    padding: 0.8rem 0;
+    font-size: 1rem;
+  }
+  .smart-title{
+    margin-top:3rem;
+  }
+  .smart-device{
+    width: 1200px;
+    margin: 0 auto;
+    text-align: left;
+    font-size: 1rem;
+  }
+  .smart-device span span{
+    font-size: 2rem;
+    display: inline-block;
+    position: relative;
+    padding-right: 1rem;
+    margin-right: 1rem;
+    font-weight: 900;
+  }
+  .smart-device span span:after{
+    content: '';
+    width: 1px;
+    height: 15px;
+    background: #666;
+    position: absolute;
+    right: 0;
+    bottom: 7px;
+  }
+  .device-title img{
+    width: 80%;
+  }
+  .nav-list{
+    display: flex;
+    justify-content: center;
+    flex-wrap: nowrap;
+    margin: 2rem auto;
+    width: 50%;
+  }
+  .nav-list li{
+    min-width: 33.33%;
+    max-width: 33.33%;
+    text-align: center;
+    color: #666;
+    font-size: 0.8rem;
+    cursor: pointer;
+  }
+  .nav-list li span{
+    border-bottom: 2px solid #f0f0f0;
+    padding-bottom: 0.8rem;
+  }
+  .active span{
+    display: inline-block;
+    border-bottom: 2px solid #FF6A00!important;
+    color: #333;
+  }
+}
+@media screen and (max-width: 1000px){
+  .banner{
+    display: none;
+  }
+  .bread{
+    display: none;
+  }
+  .smart-title{
+    margin-top:2rem;
+  }
+  .smart-device{
+    width: 90%;
+    margin: 0 auto;
+    text-align: left;
+    font-size: 1rem;
+    overflow: hidden;
+  }
+  .smart-device span span{
+    font-size: 1.5rem;
+    display: inline-block;
+    position: relative;
+    padding-right: 1rem;
+    margin-right: 1rem;
+    font-weight: 900;
+  }
+  .smart-device span span:after{
+    content: '';
+    width: 1px;
+    height: 15px;
+    background: #666;
+    position: absolute;
+    right: 0;
+    bottom: 7px;
+  }
+  .device-title img{
+    width: 100%;
+  }
+  .nav-list{
+    display: flex;
+    justify-content: center;
+    flex-wrap: nowrap;
+    margin: 2rem;
+  }
+  .nav-list li{
+    min-width: 33.33%;
+    max-width: 33.33%;
+    text-align: center;
+    color: #666;
+    font-size: 0.8rem;
+    cursor: pointer;
+  }
+  .nav-list li span{
+    border-bottom: 2px solid #f0f0f0;
+    padding-bottom: 0.8rem;
+  }
+  .active span{
+    display: inline-block;
+    border-bottom: 2px solid #FF6A00!important;
+    color: #333;
+    font-weight:800!important;
+  }
+}
+.titles{
+  text-align: center;
+  margin: 2rem 0;
+}
+.list-content{
+  min-height: 10rem;
+}
+.list-content span{
+  display: inline-block;
+  padding: 0.2rem 1rem;
+  background: #996FEC;
+  color: #fff;
+}
+.list-content h3{
+  margin: 1rem 0;
+}
+.list-content p{
+  line-height: 2rem;
+}
+.list-content div{
+  margin-top: 3rem;
+}
+.list-content div img{
+  width: 100%;
+  display: block;
+  margin-top: 3rem;
+}
+.list-content button{
+  width: 10rem;
+  height: 3rem;
+  border: 1px solid #333333;
+  border-radius: 10px;
+  margin: 4rem auto;
+  display: block;
+}
+</style>

src/views/services/activities/index.vue

@@ -9,7 +9,7 @@
         <div>
           <ul class="area-nav">
             <li><router-link :to="{path: '/service/characteristic'}">资源发布</router-link></li>
-<!--            <li><router-link :to="{path: '/zhaoshang/list'}">政策服务</router-link></li>-->
+            <!--            <li><router-link :to="{path: '/zhaoshang/list'}">政策服务</router-link></li>-->
             <li class="tabs"><router-link :to="{path: '/service/activities'}">园区活动</router-link></li>
             <li><router-link :to="{path: '/service/educate'}">园区培训</router-link></li>
           </ul>
@@ -52,7 +52,7 @@
                   <div class="a-status">
                     <span v-if="item.status==2" class="over">已结束</span>
                     <span v-else class="loading">报名中</span>
-<!--                    <span v-if="item.styleStatus==1" class="over">活动风采</span>-->
+                    <span v-if="item.styleStatus==1" class="fengcai" @click.stop="clickFc(item.id)">活动风采</span>
                   </div>
                   <div class="a-option">
                     <span>参与人数:{{ item.num }}</span>
@@ -118,6 +118,10 @@ export default {
         document.documentElement.scrollTop = document.body.scrollTop = 0 // 回到顶部
     },
     methods: {
+        clickFc(index) {
+            console.log('活动风采')
+            this.$router.push({ path: '/service/hdfc?id=' + index })
+        },
         changeType(active) {
             this.search.pageNum = 1
             this.active = active
@@ -323,6 +327,10 @@ export default {
         .a-status .over{
             background: #666;
         }
+      .a-status .fengcai{
+            background: lightseagreen;
+            cursor: pointer;
+        }
         .a-status .loading{
             background: #FF6A00;
         }
@@ -497,6 +505,10 @@ export default {
         .a-status .over{
             background: #666;
         }
+      .a-status .fengcai{
+        background: lightseagreen;
+        cursor: pointer;
+        }
         .a-status .loading{
             background: #FF6A00;
         }