su_nan_guan_wang/src/views/contact/index.vue

<template>
    <div style="background: #f0f0f0;">
        <div class="banner">
            <img src="~@/assets/images/lxwm.jpg" alt="">
        </div>
        <div class="bread">
            <div>
                <span>当前位置:首页-联系我们</span>
            </div>
        </div>
        <div class="smart-device">
            <div class="smart-title">
                <span><span>联系我们</span>CONATACT US</span>
            </div>
            <div class="smart-device-content">
                <div class="app-addr">
                    <div class="addr-list">
                        <h3>数字园区</h3>
                        <ul>
                            <li>
                                <div>
                                    <img src="~@/assets/images/add1-1.png" alt="">
                                    <p>电话：{{briefDetail.attractPhone}} {{briefDetail.operatePhone}}</p>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <img src="~@/assets/images/add2-2.png" alt="">
                                    <p>传真：0612-12121212</p>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <img src="~@/assets/images/add3-3.png" alt="">
                                    <p>邮箱：123123123123@qq.com</p>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <img src="~@/assets/images/add4-4.png" alt="">
                                    <p>网址：https://smartpark.idea-sf.com/smartPark</p>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <img src="~@/assets/images/add5-5.png" alt="">
                                    <p>地址：{{briefDetail.address}}</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                   <div  >
                     <baidu-map class="addr-map" style="height: 400px"  @ready="mapReadyPh">
                     </baidu-map>
                   </div>
                </div>
                <div class="pc-addr">
                    <div class="addr-list">
                        <h3>数字园区</h3>
                       <ul>
                           <li>
                               <div>
                                   <img src="~@/assets/images/add1.png" alt="">
                                   <p>电话：{{briefDetail.attractPhone}} {{briefDetail.operatePhone}}</p>
                               </div>
                           </li>
                           <li>
                               <div>
                                   <img src="~@/assets/images/add2.png" alt="">
                                   <p>传真：0612-12121212</p>
                               </div>
                           </li>
                           <li>
                               <div>
                                   <img src="~@/assets/images/add3.png" alt="">
                                   <p>邮箱：123123123123@qq.com</p>
                               </div>
                           </li>
                           <li>
                               <div>
                                   <img src="~@/assets/images/add4.png" alt="">
                                   <p>网址：https://smartpark.idea-sf.com/smartPark</p>
                               </div>
                           </li>
                           <li>
                               <div>
                                   <img src="~@/assets/images/add5.png" alt="">
                                   <p>地址：{{briefDetail.address}}</p>
                               </div>
                           </li>
                       </ul>
                    </div>
                    <div style="margin: 0 auto;width: 100% " >
                      <baidu-map class="addr-map" style="height: 600px" id="allmap" @ready="mapReady">
                      </baidu-map>
                    </div>
                </div>
            </div>
        </div>
      <!--弹窗组件展示区 ------start----->
<!--        此处使用vant框架的popup组件-->
        <van-popup v-model="showDialog">
            <div class="dialog-two">
                <div class="close-btn" @click="showDialog=false">
                    <span>×</span>
                </div>
                <div class="qrcode-btn">
                    <span>了解更多，欢迎关注</span>
                    <span>数字园区服务小程序</span>
                    <img src="~@/assets/images/xiaochengxuxiao.jpg" alt="">
                    <h3>扫一扫</h3>
                </div>
            </div>
        </van-popup>
        <div class="alerts">
            <div class="dialog-one" v-show="show==1">
                <div class="close-btn" @click="show=1">
                    <img src="~@/assets/images/close.png" alt="">
                </div>
                <div class="qrcode-btn">
                    <span>了解更多，欢迎关注</span>
                    <span>数字园区小程序</span>
                    <img src="~@/assets/images/xiaochengxuxiao.jpg" alt="">
                </div>
            </div>

        </div>
      <!--弹窗组件展示区 ------end----->
    </div>
</template>

<script>
    import {getBridf} from "@/service/api_service";
    import BaiduMap from 'vue-baidu-map'
    export default {
        data () {
            return {
                active:1,
                show:0, //关闭弹窗
                showDialog:false,
                zsList:[
                    {
                        img:'zs1.png',
                        name:'专项扶持政策',
                        eventIndex:1,
                        detail:''
                    },
                    {
                        img:'zs2.png',
                        name:'税收优惠',
                        eventIndex:2,
                        detail:''
                    },
                    {
                        img:'zs3.png',
                        name:'奖励措施',
                        eventIndex:3,
                        detail:''
                    },
                ],
                briefDetail:{}
            }
        },
        mounted() {
            document.documentElement.scrollTop = document.body.scrollTop =0; //回到顶部
          this.getData()
        },
        methods: {
          mapReadyPh({ BMap, map }) {
            // 选择一个经纬度作为中心点
            this.point = new BMap.Point(120.327258,31.48935);
            map.centerAndZoom(this.point, 18);
            map.enableScrollWheelZoom(true);
            var marker1 = new BMap.Marker(this.point);
            var opts = {
              position: this.point, // 指定文本标注所在的地理位置
              offset: new BMap.Size(-110, -80) // 设置文本偏移量
            };
            // 创建文本标注对象
            var label =  new BMap.Label('数字园区', opts);
            // 自定义文本标注样式
            label.setStyle({
              color: 'black',
              borderRadius: '5px',
              borderColor: '#ccc',
              padding: '10px',
              fontSize: '16px',
              height: '30px',
              lineHeight: '30px',
              fontFamily: '微软雅黑'
            });
            map.addOverlay(label);
            map.addOverlay(marker1);
          },
          mapReady({ BMap, map }) {
            // 选择一个经纬度作为中心点
            this.point = new BMap.Point(120.327258,31.48935);
            this.points = new BMap.Point(120.324658,31.48935);
            map.centerAndZoom(this.points, 18);
            map.enableScrollWheelZoom(true);
            var marker1 = new BMap.Marker(this.point);
            var opts = {
              position: this.point, // 指定文本标注所在的地理位置
              offset: new BMap.Size(-110, -80) // 设置文本偏移量
            };
            // 创建文本标注对象
            var label =  new BMap.Label('数字园区', opts);
            // 自定义文本标注样式
            label.setStyle({
              color: 'black',
              borderRadius: '5px',
              borderColor: '#ccc',
              padding: '10px',
              fontSize: '16px',
              height: '30px',
              lineHeight: '30px',
              fontFamily: '微软雅黑'
            });
            map.addOverlay(label);
            map.addOverlay(marker1);
          },
            getData() {
              getBridf({groupId:'870261874875170816'}).then((res)=>{
                if(res.data){
                  const det = res.data
                  if(det.briefImg!==null&&det.briefImg.length>2){
                    det.brief = this.$common.castEval(det.briefImg)[0].url
                  }
                  if(det.environmentImg!==null&&det.environmentImg.length>2){
                    const environmentImgs = this.$common.castEval(det.environmentImg)
                    this.environmentImgList=[]
                    environmentImgs.forEach(i=>{
                      this.environmentImgList.push(i.url)
                    })
                  }
                  this.briefDetail=det
                }

              })
            },
            detail(index){
                switch(index) {
                    case 1:
                        this.$router.push({path:'/company/detail'})
                        break;
                }

            }
        },
    };
</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:3rem 0;
        }
        .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;
        }
        .app-addr{
            display: none;
        }
        .pc-addr{
            position: relative;

        }
        .addr-list{
            position: absolute;
            left: 10%;
            background: #00000080;
            color: #fff;
            width: 40%;
            overflow: hidden;
            padding-bottom: 1rem;
            transform: translateY(15%);
            z-index: 999;
        }
        .addr-list h3{
            text-align: center;
            width: 90%;
            margin: 2rem auto;
            border-bottom: 2px solid #fff;
            padding: 1rem 0;
        }
        .addr-list ul{
            width: 80%;
            margin: 3rem auto;
            overflow: hidden;
        }
        .addr-list ul li{
            margin-bottom: 0.8rem;
            overflow: hidden;
        }
        .addr-list ul li img{
            width: 24px;
            height: 24px;
            float: left;
        }
        .addr-list ul li p{
            float: left;
            width: 88%;
            margin-left:10px;
            line-height: 1.6rem;
            font-size: 1rem;
        }
    }
    @media screen and (max-width: 1000px){
        .banner{
            display: none;
        }
        .bread{
            display: none;
        }
        .smart-title{
            width:90%;
            margin: 2rem auto;
        }
        .smart-device{
            width:100%;
            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;
        }
        .pc-addr{
            display: none;
        }
        .app-addr{
            background: #fff;
            padding-bottom: 1rem;
            overflow: hidden;
        }
        .addr-list{
            width: 90%;
            margin: 0 auto;
            /*position: absolute;*/
            /*left: 10%;*/
            /*background: #00000080;*/
            /*color: #fff;*/
            /*width: 40%;*/
            /*overflow: hidden;*/
            /*padding-bottom: 1rem;*/
            /*transform: translateY(15%);*/
        }
        .addr-list h3{
            text-align: center;
            width: 90%;
            margin: 2rem auto;
            padding: 1rem 0;
        }
        .addr-list ul{
            width: 80%;
            margin: 3rem auto;
            overflow: hidden;
        }
        .addr-list ul li{
            margin-bottom: 1.5rem;
            overflow: hidden;
        }
        .addr-list ul li img{
            width: 24px;
            height: 24px;
            float: left;
        }
        .addr-list ul li p{
            float: left;
            width: 80%;
            margin-left:10px;
            line-height: 1.5rem;
            font-size: 1rem;
        }
    }
    .smart-device-content img{
        width: 100%;
    }
    /*弹窗 *************start*********/
    /*第一个弹窗*/
    .dialog-one{
        width:15rem;
        position: relative;
        top: 0rem;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .dialog-one .close-btn{
        text-align: center;
    }
    .dialog-one .close-btn img{
        width: 2rem;
        display: block;
        margin: 0 auto;
    }
    .dialog-one .qrcode-btn{
        padding: 1.5rem 0;
        background-image: linear-gradient(#AC82FF, #E0D0FF);
    }
    .dialog-one .qrcode-btn span{
        display: block;
        color: #fff;
        font-size: 0.8rem;
        margin-bottom: 5px;
    }
    .dialog-one .qrcode-btn img{
        width: 40%;
        margin-top: 2rem;
    }
    /*第二个弹窗*/
    .dialog-two{
        width:15rem;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding-bottom: 1rem;
        background-image: linear-gradient(#AC82FF, #FFFFFF);
    }
    .dialog-two .close-btn{
        overflow: hidden;
    }
    .dialog-two .close-btn span{
        display: block;
        width: 90%;
        margin: 0.6rem auto;
        text-align: right;
        color: #fff;
        font-size: 1.5rem;
        cursor: pointer;
    }
    .dialog-two .qrcode-btn span{
        display: block;
        color: #fff;
        font-size: 0.8rem;
        margin-bottom: 5px;

    }
    .dialog-two .qrcode-btn img{
        width: 40%;
        margin-top: 2rem;
    }
    .dialog-two .qrcode-btn h3{
        color: #333;
        font-size: 1rem;
    }
</style>