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

<template>
  <div style="background: #f0f0f0;padding-bottom:50px">
    <div class="banner">
      <img src="~@/assets/images/yxfw.jpg" alt="">
    </div>
    <div class="bread">
      <div>
        <span>当前位置:首页-园区周边</span>
        <div>
          <ul class="area-nav">
            <li><router-link :to="{path: '/service/characteristic'}">资源发布</router-link></li>
            <li class="tabs"><router-link :to="{path: '/service/periphery'}">政策服务</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 AROUND</span>
      </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 class="zs-tabs">
                    <div @click="detail(1)">
                      <img src="~@/assets/images/zb1.png" alt="">
                      <p>干洗</p>
                    </div>
                  </li>
                  <li>
                    <div @click="detail(1)">
                      <img src="~@/assets/images/zb2.png" alt="">
                      <p>修理</p>
                    </div>
                  </li>
                  <li>
                    <div @click="detail(1)">
                      <img src="~@/assets/images/zb3.png" alt="">
                      <p>保洁</p>
                    </div>
                  </li>
                  <li>
                    <div @click="detail(1)">
                      <img src="~@/assets/images/zb4.png" alt="">
                      <p>桶装水</p>
                    </div>
                  </li>
                  <li>
                    <div @click="detail(1)">
                      <img src="~@/assets/images/zb5.png" alt="">
                      <p>绿植</p>
                    </div>
                  </li>
                  <li>
                    <div @click="detail(1)">
                      <img src="~@/assets/images/zb6.png" alt="">
                      <p>打印</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <div class="wrap-device-detail">
              <div class="zs-titles">
                <span><i>02</i>周边资讯</span>
              </div>
              <div class="zs-wrap">
                <ul class="zx-wrap">
                  <li>
                    <div @click="detail(1)">
                      <img src="~@/assets/images/zx1.png" alt="">
                      <p>商业</p>
                    </div>
                  </li>
                  <li>
                    <div @click="detail(1)">
                      <img src="~@/assets/images/zx2.png" alt="">
                      <p>教育</p>
                    </div>
                  </li>
                  <li>
                    <div @click="detail(1)">
                      <img src="~@/assets/images/zx3.png" alt="">
                      <p>医疗</p>
                    </div>
                  </li>
                  <li>
                    <div @click="detail(1)">
                      <img src="~@/assets/images/zx4.png" alt="">
                      <p>酒店</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <div class="wrap-device-detail">
              <div class="zs-titles">
                <span><i>03</i>便民服务</span>
              </div>
              <div class="zs-wrap">
                <ul class="fw-wrap">
                  <li>
                    <div @click="detail(1)">
                      <img src="~@/assets/images/fw1.png" alt="">
                      <p>便民电话</p>
                    </div>
                  </li>
                  <li>
                    <div @click="detail(1)">
                      <img src="~@/assets/images/fw2.png" alt="">
                      <p>社区服务</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <Message :show-dialog="showInfo" @closePop="closeMessage" />
  </div>
</template>

<script>
import Message from '@/views/message/index'
export default {
    components: {
        Message
    },
    data() {
        return {
            showInfo: false,
            seList: [
                {
                    img: 'zs1.png',
                    name: '专项扶持政策'
                },
                {
                    img: 'zs1.png',
                    name: '专项扶持政策'
                },
                {
                    img: 'zs1.png',
                    name: '专项扶持政策'
                }
            ]
        }
    },
    mounted() {
        document.documentElement.scrollTop = document.body.scrollTop = 0 // 回到顶部
    },
    methods: {
        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;
            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: 33.33%;
            text-align: center;
            margin-bottom: 2rem;
        }
        .zx-wrap li{
            width:25%!important;
        }
        .fw-wrap{
            overflow: hidden;
            display: block!important;
        }
        .fw-wrap li:nth-child(1){
            width:33.33%;
            float: left;
        }
        .fw-wrap li:nth-child(2){
            width:33.33%;
            float: right;
        }
        .zs-wrap ul li div{
            background: #fff;
            height: 10rem;
            width: 90%;
            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;
        }
    }
    @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 0;
        }
        .zs-titles span{
            font-weight: 700;
            font-size: 0.8rem;
            color: #333;
        }
        .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: 33.33%;
            text-align: center;
            margin-bottom: 2rem;
        }
        .zx-wrap li{
            width:25%!important;
        }
        .fw-wrap{
            overflow: hidden;
            display: block!important;
        }
        .fw-wrap li:nth-child(1){
            width:33.33%;
            float: left;
        }
        .fw-wrap li:nth-child(2){
            width:33.33%;
            float: right;
        }
        .zs-wrap ul li div{
            background: #fff;
            height: 4rem;
            width: 90%;
            margin: 0 auto;
            padding: 1rem 0;
            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;
        }
    }

</style>