su_nan_guan_wang/src/views/services/characteristic/index.vue

<template>
  <div style="background: #f0f0f0;padding-bottom:50px">
    <div class="banner">
      <img src="~@/assets/images/zyfb.png" alt="">
    </div>
    <div class="bread">
      <div>
        <span>当前位置:首页-<span style="color: rgba(75, 175, 227, 1)">资源发布</span></span>
        <div>
          <ul class="area-nav">
            <li class="tabs"><router-link :to="{path: '/service/characteristic'}">资源发布</router-link></li>
<!--            <li><router-link :to="{path: '/zhaoshang/list'}">政策服务</router-link></li>-->
            <li><router-link :to="{path: '/service/activities'}">园区活动</router-link></li>
            <li><router-link :to="{path: '/service/educate'}">园区培训</router-link></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="smart-device">
      <div class="smart-title">
        <span><span>资源发布</span>PARK Training</span>
      </div>
      <div class="smart-title" style="display: flex;flex-direction: column;">
        <span>请扫描二维码登录小程序后发布资源</span>
        <img src="~@/assets/images/xiaochengxzheshi.png" alt="" style="width: 150px;height: 150px;margin: 20px 50px 0 50px">
      </div>
      <div class="smart-device-content">
        <ul>
<!--          <li>-->
<!--            <div class="wrap-device-detail">-->
<!--              <div class="zs-titles">-->
<!--                <span><i>01</i>物业服务</span>-->
<!--              </div>-->
<!--              <div class="zs-wrap">-->
<!--                <ul>-->
<!--                  <li>-->
<!--                    <div>-->
<!--                      <img src="~@/assets/images/ts1.png" alt="">-->
<!--                      <p>公共服务</p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <div>-->
<!--                      <img src="~@/assets/images/ts2.png" alt="">-->
<!--                      <p>设备维护</p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <div>-->
<!--                      <img src="~@/assets/images/ts3.png" alt="">-->
<!--                      <p>清洁管理</p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <div>-->
<!--                      <img src="~@/assets/images/ts4.png" alt="">-->
<!--                      <p>安全管理</p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <div>-->
<!--                      <img src="~@/assets/images/ts5.png" alt="">-->
<!--                      <p>停车服务</p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                </ul>-->
<!--                <div class="wyfw">-->
<!--                  <p>{{ detail.briefIntroduction }}</p>-->
<!--                  <div class="wy-addr">-->
<!--                    <div>-->
<!--                      <div>-->
<!--                        <span>办公地址</span>-->
<!--                        <span>{{ detail.officeAddress }}</span>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                      <div>-->
<!--                        <span>办公时间</span>-->
<!--                        <span>{{ detail.officeTime }}</span>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                      <div>-->
<!--                        <span>联系方式</span>-->
<!--                        <span>{{ detail.contactNumber }}</span>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </li>-->
<!--          <li>-->
<!--            <div class="wrap-device-detail">-->
<!--              <div class="zs-titles">-->
<!--                <span><i>02</i>增值服务</span>-->
<!--              </div>-->
<!--              <div class="zs-wrap">-->
<!--                <div class="zzfw" style="margin-bottom: 1rem;">-->
<!--                  <p>{{ detail.incrementService }}</p>-->
<!--                  <p>园区提供一下服务</p>-->
<!--                </div>-->
<!--                <ul>-->
<!--                  <li>-->
<!--                    <div>-->
<!--                      <img src="~@/assets/images/ts6.png" alt="">-->
<!--                      <p>餐饮服务</p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <div>-->
<!--                      <img src="~@/assets/images/ts7.png" alt="">-->
<!--                      <p>配送服务</p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <div>-->
<!--                      <img src="~@/assets/images/ts8.png" alt="">-->
<!--                      <p>资源共享</p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <div>-->
<!--                      <img src="~@/assets/images/ts9.png" alt="">-->
<!--                      <p>便民服务</p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <div>-->
<!--                      <img src="~@/assets/images/ts10.png" alt="">-->
<!--                      <p>路演中心</p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                </ul>-->
<!--              </div>-->
<!--            </div>-->
<!--          </li>-->
<!--          <li>-->
<!--            <div class="wrap-device-detail">-->
<!--              <div class="zz-titles">-->
<!--                <span>专业服务</span>-->
<!--              </div>-->
<!--              <div class="zs-wrap">-->
<!--                <ul class="zz-wrap">-->
<!--                  <li v-for="item in seList" key="Math.random()" class="zyfw-img">-->
<!--                    <div>-->
<!--                      <img :src="item.img" alt="">-->
<!--                      <p>{{ item.name }}</p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                  &lt;!&ndash;                                    <li>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                        <div>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                            <img src="~@/assets/images/zy2.png" alt="">&ndash;&gt;-->
<!--                  &lt;!&ndash;                                            <p>配送服务</p>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                        </div>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                    </li>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                    <li>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                        <div>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                            <img src="~@/assets/images/zy3.png" alt="">&ndash;&gt;-->
<!--                  &lt;!&ndash;                                            <p>资源共享</p>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                        </div>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                    </li>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                    <li>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                        <div>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                            <img src="~@/assets/images/zy4.png" alt="">&ndash;&gt;-->
<!--                  &lt;!&ndash;                                            <p>便民服务</p>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                        </div>&ndash;&gt;-->
<!--                  &lt;!&ndash;                                    </li>&ndash;&gt;-->
<!--                  <li @click="detail2()">-->
<!--                    <div>-->
<!--                      <img src="~@/assets/images/more.jpg" alt="">-->
<!--                    </div>-->
<!--                  </li>-->
<!--                </ul>-->
<!--              </div>-->
<!--            </div>-->
<!--          </li>-->
          <li>
            <div class="wrap-device-detail">
<!--              <div class="zz-titles">-->
<!--                <span>运营服务</span>-->
<!--              </div>-->
              <div class="zs-wrap">
                <div class="zzfw" v-html="detail.content" />
                <!--                                <ul class="qrcode">-->
                <!--                                    <li>-->
                <!--                                        <div>-->
                <!--                                            <img src="~@/assets/images/qrcode.png" alt="">-->
                <!--                                            <p>园区公众号</p>-->
                <!--                                        </div>-->
                <!--                                    </li>-->
                <!--                                    <li>-->
                <!--                                        <div>-->
                <!--                                            <img src="~@/assets/images/qrcode.png" alt="">-->
                <!--                                            <p>园区小程序</p>-->
                <!--                                        </div>-->
                <!--                                    </li>-->
                <!--                                </ul>-->
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <Message :show-dialog="showInfo" @closePop="closeMessage" />
  </div>
</template>

<script>
import { findFeaturesService, professionalList } from '@/service/api_service'
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import Message from '@/views/message/index'
export default {
    components: {
        Message
    },
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: ['serviceType'],
            seList: [
                {
                    img: 'zs1.png',
                    name: '专项扶持政策'
                },
                {
                    img: 'zs1.png',
                    name: '专项扶持政策'
                },
                {
                    img: 'zs1.png',
                    name: '专项扶持政策'
                }
            ],
            detail: {},
            showInfo: false
        }
    },
    mounted() {
        document.documentElement.scrollTop = document.body.scrollTop = 0 // 回到顶部
        this.initDict(this.dc_key).then((res) => {
            this.findFeatures()
            this.professionalList()
        })
    },
    methods: {
        closeMessage() {
            this.showInfo = false
        },
        findFeatures() {
            const _this = this
            findFeaturesService().then((res) => {
                if (res) {
                    _this.detail = res
                    if (_this.detail.content.indexOf('width') !== -1 && _this.detail.content.indexOf('height') !== -1) {
                        _this.detail.content = _this.detail.content.replace(/width="(\S*)"/, 'width="100%"').replace(/height="(\S*)"/, 'height="100%"')
                    }
                }
            })
        },
        getItemJson: function(item) {
            item.img = eval(item.annex)
            item.serviceType = this.dc_map.serviceType[item.serviceType]
            return item
        },
        professionalList() {
            const _this = this
            professionalList().then((res) => {
                if (res && res.length > 0) {
                    _this.seList = []
                    res.forEach(pg => {
                        const json = _this.getItemJson(pg)
                        const i = {
                            img: json.img[0].url,
                            name: json.serviceType
                        }
                        _this.seList.push(i)
                    })
                }
            })
        },
        detail(index) {
            switch (index) {
                case 1:
                    this.$router.push({ path: '/service/periphery-detail1' })
                    break
            }
        },
        detail2() {
            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;
            position: relative;
        }
        .area-nav{
            position:absolute;
            right: 0;
            top: 0.8rem;
            width: 40%;
            text-align: right;
        }
        .area-nav{
            display: flex;
            justify-content: center;
            flex-wrap: nowrap;
        }
        .area-nav li{
            flex: 1;
            text-align: center;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom:0.7rem;
        }
        .area-nav a{
            color: #333;
        }
        .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;
        }
        .wrap-device-detail{
            overflow: hidden;
        }
        .zs-wrap{
            overflow: hidden;
        }
        .device-title,.zc-content{
            float: left;
        }
        .device-title{
            width: 50%;
        }
        .zc-content{
            width: 50%;
        }
        .device-title img{
            width: 80%;
        }
        .zs-titles{
            margin: 2rem 0;
        }
        .zs-titles span{
            font-weight: 700;
            font-size: 1.5rem;
            color: #333;
        }
        .zs-titles span i{
            font-size: 2rem;
            color: #9472e4;
            font-weight: 900;
            font-style: normal;
            font-family: 'SimHei Microsoft yahei';
            margin-right: 1rem;
            position: relative;
            top: 2px;
        }
        .detail-btn{
            margin-top: 1rem;
            background:#9472e4 ;
            display: inline-block;
            padding: 2px 8px;
            font-size: 1rem;
            color: #fff;
        }
        .zc-content p{
            font-size: 0.8rem;
            color: #333;
            margin-top: 0.8rem;
        }
        .zc-content h3{
            font-size: 0.8rem;
            color: #333;
            margin-top: 0.8rem;
            font-weight: 400;
        }
        .tabs{
            border-bottom:2px solid rgba(75, 175, 227, 1)!important;
        }
        .zs-wrap ul{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .zs-wrap ul li{
            width: 20%;
            text-align: center;
            margin-bottom: 2rem;
        }
        .zx-wrap li{
            width:25%!important;
        }
        .zs-wrap ul li div{
            background: #fff;
            height: 10rem;
            width: 98%;
            margin: 0 auto;
            padding-top: 3rem;
            font-size: 1rem;
        }
        .zs-wrap ul li div p{
            margin-top: 1rem;
        }
        .zs-wrap ul li div img{
            width: 20%;
        }
        .zs-tabs div{
            background: rgba(75, 175, 227, 1)!important;
            color: #fff;
        }
        .wyfw{
            margin: 2rem 0;
        }
        .wyfw>div{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 3rem 0;
        }
        .wyfw p{
            line-height: 2rem;
            margin: 1rem 0;
        }
        .wyfw>div>div{
            width: 33.33%;
        }
        .wyfw>div>div span:nth-child(1){
            display: inline-block;
            background: rgba(75, 175, 227, 1);
            padding: 0.1rem 1rem;
            color: #fff;
            margin-right: 3rem;
        }
        .zzfw{
            margin: 2rem 0;
            line-height: 2rem;
        }
        .zz-titles{
            text-align: center;
            font-size: 1.5rem;
            margin-bottom: 2rem;
        }
        .zz-wrap li div img{
            width: 100%!important;
        }
        .zz-wrap li div{
            padding: 0!important;
            height: auto!important;
            position: relative;
        }
        .zz-wrap li div p{
            margin: 0!important;
            position: absolute;
            bottom: 0px;
            background: rgba(75, 175, 227, 1);
            width: 100%;
            color: #fff;
            padding: 1.5rem 0;
            font-size:1.3rem;
        }
        .zz-wrap li div img{
            height: 400px;
        }
        .zz-wrap li:last-child div{
            background: rgba(75, 175, 227, 1);
            height: 100%;
        }
        .zz-wrap li:last-child p{
            transform: translateY(50%);
            height: 100%;
        }
        .qrcode li div{
            background: none!important;
            height: auto!important;
        }
        .qrcode li div img{
            width: 80%!important;
        }
        .qrcode li div span{
            color: #333!important;
        }
    }
    @media screen and (max-width: 1000px){
        .banner{
            display: none;
        }
        .zc-content{
            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%;
        }
        .zs-titles{
            margin: 1rem auto;
            text-align: center;
            width: 100%;
        }
        .zz-titles{
            margin-bottom: 1rem;
        }
        .zs-titles i{
            display: none;
        }
        .zs-titles span,.zz-titles span{
            font-weight: 700;
            font-size: 0.8rem;
            color: #333;
            display: inline-block;
            border-bottom: 2px solid rgba(75, 175, 227, 1);
            padding-bottom: 0.5rem;
        }
        .zs-titles span i{
            font-size: 1.5rem;
            color: #9472e4;
            font-weight: 900;
            font-style: normal;
            font-family: 'SimHei Microsoft yahei';
            margin-right: 1rem;
            position: relative;
            top: 2px;
        }
        .zs-wrap ul{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .zs-wrap ul li{
            width: 50%;
            text-align: center;
            margin-bottom: 1rem;
        }
        .zs-wrap ul li:last-child{
            width: 100%;
        }
        .zx-wrap li{
            width:25%!important;
        }
        .zs-wrap ul li div{
            background: #fff;
            height: 5rem;
            width: 95%;
            margin: 0 auto;
            padding-top: 2rem;
            font-size: 1rem;
        }
        .zs-wrap ul li:last-child div{
            width: 97%;
        }
        .zs-wrap ul li div p{
            margin-top: 0.5rem;
        }
        .zs-wrap ul li div img{
            width: 20%;
        }
        .zyfw-img div img{
            height: 10rem!important;
        }
        .zs-wrap ul li:last-child div img{
            width: 10%;
        }
        .zs-tabs div{
            background: rgba(75, 175, 227, 1)!important;
            color: #fff;
        }
        .wyfw{
            background: #fff;
            border-radius: 2px;
            padding: 1rem 0;
            width: 97%;
            margin: 0 auto;
            line-height: 1.5rem
        }
        .wyfw>p{
            width: 90%;
            margin: 0 auto;
        }
        .wy-addr{
            width: 80%;
            margin: 0 auto;
        }
        .wy-addr>div{
            margin-top: 1rem;
        }
        .zzfw{
            background: #fff;
            border-radius: 2px;
            padding: 1rem 0;
            width: 97%;
            margin: 0 auto;
            line-height: 1.5rem;
            text-indent: 1rem;
            /*margin-bottom: 1rem;*/
        }
        .zzfw /deep/ p{
            width: 90%!important;
            margin: 0 auto;
        }
        .zz-wrap li{
            width: 25% !important;
        }
        .zz-wrap li div img{
            width: 100%!important;
        }
        .zz-wrap li:last-child{
            display: none;
        }
        .zz-wrap li div{
            padding: 0!important;
            height: auto!important;
            position: relative;
        }
        .zz-wrap li div p{
            margin: 0!important;
            position: absolute;
            bottom: 0px;
            background: rgba(75, 175, 227, 1);
            width: 100%;
            color: #fff;
            padding: 0.6rem 0;
            font-size:0.8rem;
        }
        .zz-wrap li:last-child div{
            background: rgba(75, 175, 227, 1);
            height: 100%;
        }
        .zz-wrap li:last-child p{
            transform: translateY(50%);
            height: 100%;
        }
        .qrcode{
            background: #fff;
            display: flex;
            justify-content: center;
            flex-wrap: nowrap;
            padding-bottom: 1rem;
        }
        .qrcode li,.qrcode li img{
            width: 50%!important;
        }
    }

</style>