su_nan_guan_wang/src/views/common/home.vue

<template>
  <div style="background: #f7f7f7">
    <div class="swiper-wrap">
      <ul>
        <li v-for="(item,index) in actionList" :key="index" :class="action === index ? 'act-tab' : ''">
          <div class="">
            <div class="bgimg">
              <img :src="item.url" alt="" class="bigImg">
            </div>
            <div class="arrowBox">
              <img src="~@/assets/images/home/leftArrow.png" alt="" class="arrow" @click="reduceAction">
              <img src="~@/assets/images/home/rightArrow.png" alt="" class="arrow" @click="addAction">
            </div>
          </div>
        </li>
      </ul>
      <div class="navi-tab">
        <ul>
          <li :class="action == 0 ? 'act-tab-index' : ''" @click="action = 0">
            <span />
          </li>
          <li :class="action == 1 ? 'act-tab-index' : ''" @click="action = 1">
            <span />
          </li>
          <li :class="action == 2 ? 'act-tab-index' : ''" @click="action = 2">
            <span />
          </li>
          <li :class="action == 3 ? 'act-tab-index' : ''" @click="action = 3">
            <span />
          </li>
          <li :class="action == 4 ? 'act-tab-index' : ''" @click="action = 4">
            <span />
          </li>
        </ul>
      </div>
    </div>
    <div class="about-wrap">
      <div class="title-item">
        <div class="unMidTitle" @click="toServiceLocator('/serviceLocator')">
          <h3>服务定位</h3>
          <p>SERVICE LOCATION</p>
        </div>
        <div class="midTitle" @click="toServiceLocator('/surroundings')">
          <h3 class="midTitleName">园区简介</h3>
          <p>PARK PROFILE</p>
        </div>
        <div class="unMidTitle" @click="toServiceLocator('industry')">
          <h3>产业集群</h3>
          <p>INDUSTRIAL CLUSTERS</p>
        </div>
      </div>
      <div class="park-content-wrap">
        <div class="park-content">
          <div class="about-text">
            <h3>苏南快递产业园区</h3>
            <p>
              苏南快递产业园区规划面积2平方公里，依托机场的航空货运优势，建立产业园区，通过规模化、标准化的运营，满足区域经济发展对快递服务的需求，将无锡打造成为快递服务的国内重要基地和国际快递服务的重要门户。园区已进驻顺丰、中通、韵达等快递企业的区域总公司或大型分拨中心，国内前10强快递品牌企业已有6家在园区内经营。</p>
            <button @click="jumb(1)">了解更多</button>
          </div>
          <div class="ahout-img">
            <img src="~@/assets/images/chuanBg.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="service-wrap">
      <div class="title-item">
        <div class="midTitle">
          <h3>企业服务</h3>
          <p>PARK SERVICE</p>
        </div>
      </div>
      <div class="qyfwBody">
        <div v-for="item in yqfwList" class="qyfwItem" >
          <img :src="item.url" class="qyfwImg">
          <div class="msgBox">
            <div class="msgTit">{{ item.name }}</div>
            <button class="msgBtn" @click="toServiceLocator(item.path)">了解详情</button>
          </div>
        </div>
      </div>
      <!--      <div class="service-nav">-->
      <!--        <ul>-->
      <!--          <li-->
      <!--            :class="serviceActive == 1 ? 'service-active' : ''"-->
      <!--            @click="jumb(2, 1)"-->
      <!--          >-->
      <!--            <span>最新活动</span>-->
      <!--          </li>-->
      <!--          <li-->
      <!--            :class="serviceActive == 2 ? 'service-active' : ''"-->
      <!--            @click="jumb(2, 2)"-->
      <!--          >-->
      <!--            <span>园区培训</span>-->
      <!--          </li>-->
      <!--          <li-->
      <!--            :class="serviceActive == 3 ? 'service-active' : ''"-->
      <!--            @click="jumb(2, 3)"-->
      <!--          >-->
      <!--            <span>园区周边</span>-->
      <!--          </li>-->
      <!--          <li-->
      <!--            :class="serviceActive == 4 ? 'service-active' : ''"-->
      <!--            @click="jumb(2, 4)"-->
      <!--          >-->
      <!--            <span>服务特色</span>-->
      <!--          </li>-->
      <!--        </ul>-->
      <!--      </div>-->
      <!--      <div class="service-content-wrap">-->
      <!--        <div class="service-park-content">-->
      <!--          <div class="service-img">-->
      <!--            <img src="~@/assets/images/fuwu.png" alt="">-->
      <!--          </div>-->
      <!--          <div class="service-text">-->
      <!--            <h3>税收优惠政策</h3>-->
      <!--            <span>欢迎快递企业考察、入驻园区，享地方税收优惠政策，专项产业发展扶持政策。</span><br>-->
      <!--            <h3>营商环境优质</h3>-->
      <!--            <span>园区支持力度大，政策长期稳定，多年企业服务经验，申报流程快捷。园区招商顾问一对一陪同落户，服务团队全程代办，方案售后风控跟进。已建成CPA、税务师、审计师专业风控团队，全流程保障企业安全落户。</span><br>-->
      <!--            <h3>园区服务优质</h3>-->
      <!--            <span>入园流程一步到位，为企业提供“保姆式”落户服务，线上企业操作+线下园区代办，免费提供注册地址，办公场地，企业落户无忧。</span><br>-->
      <!--            <h3>协调优惠政策</h3>-->
      <!--            <span>入驻企业，园区将会协助申请高新技术企业认证奖励，总部经济、上市奖励、产业扶持等优惠政策。</span><br>-->
      <!--            &lt;!&ndash;						<button>了解更多</button>&ndash;&gt;-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--    </div>-->
      <div class="notice-wrap">
        <div class="title-item">
          <div class="midTitle">
            <h3 style="text-align: center">园区通知</h3>
            <p>PARK NOTICE</p>
          </div>
        </div>
        <div class="notice-content-wrap">
          <!--PC端显示-->
          <div class="notice-park-content">
            <div class="notice-parks">
              <div class="notice-park-img">
                <div>
                  <img src="~@/assets/images/yqtz.png" alt="">
                  <h3>园区通知</h3>
                </div>
              </div>
              <div class="notice-park-list">
                <ul>
                  <li v-for="(item, index) in notices.park" :key="index">
                    <div>
                      <h3>{{ item.name }}</h3>
                      <p>{{ item.content }}</p>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="notice-park-more" @click="jumb(3, 1)">
                <span>更多&gt;</span>
              </div>
            </div>
            <!--            <div class="notice-parks">-->
            <!--              <div class="notice-park-img">-->
            <!--                <div>-->
            <!--                  <img src="~@/assets/images/shn2.png" alt="">-->
            <!--                  <h3>物业通知</h3>-->
            <!--                </div>-->
            <!--              </div>-->
            <!--              <div class="notice-park-list">-->
            <!--                <ul>-->
            <!--                  <li-->
            <!--                    v-for="(item, index) in notices.parkManagement"-->
            <!--                    :key="index"-->
            <!--                  >-->
            <!--                    <div>-->
            <!--                      <h3>{{ item.name }}</h3>-->
            <!--                      <p>{{ item.content }}</p>-->
            <!--                    </div>-->
            <!--                  </li>-->
            <!--                </ul>-->
            <!--              </div>-->
            <!--              <div class="notice-park-more" @click="jumb(3, 2)">-->
            <!--                <span>更多&gt;</span>-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
          <!--APP端-->
          <div class="notice-app-content">
            <div class="notice-app-nav">
              <div class="service-nav">
                <ul>
                  <li
                    :class="noticeActive == 1 ? 'service-active' : ''"
                    @click="noticeActive = 1"
                  >
                    <span>园区通知</span>
                  </li>
                  <li
                    :class="noticeActive == 2 ? 'service-active' : ''"
                    @click="noticeActive = 2"
                  >
                    <span>物业通知</span>
                  </li>
                </ul>
              </div>
              <div v-if="noticeActive === 1" class="notice-item-app">
                <ul>
                  <li v-for="(item, index) in notices.park" :key="index">
                    <div>
                      <h3 style="text-align: left">{{ item.name }}</h3>
                      <p style="text-align: left">{{ item.content }}</p>
                      <div class="more-info" @click="noticeDetail(item)">
                        <button>了解详情</button>
                      </div>
                    </div>
                  </li>
                </ul>
                <button class="notice-all" @click="jumb(3, 1)">查看全部</button>
              </div>
              <div v-if="noticeActive === 2" class="notice-item-app">
                <ul>
                  <li
                    v-for="(item, index) in notices.parkManagement"
                    :key="index"
                  >
                    <div>
                      <h3 style="text-align: left">{{ item.name }}</h3>
                      <p style="text-align: left">{{ item.content }}</p>
                      <div class="more-info" @click="noticeDetail(item)">
                        <button>了解详情</button>
                      </div>
                    </div>
                  </li>
                </ul>
                <button class="notice-all" @click="jumb(3, 2)">查看全部</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="money-wrap">
			<div class="title-item">
				<div>
					<h3>投融圈</h3>
					<p>INVESTMENT CIRCLE</p>
				</div>
			</div>
			<div class="money-content-wrap">
				<div class="money-park-content">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="(item,index) in casebox" :key="index"  @click="financeDetail(item)">
								<div class="case-wrap">
									<div class="case-content">
										<span>案例展示</span>
										<p class="case-title">{{item.title}}</p>
										<p class="case-text">{{item.content}}</p>
										<button @click="jumb(4)">了解更多</button>
									</div>
									<div class="case-img">
										<img :src="item.img" alt="">
									</div>
								</div>
							</div>
						</div>
						如果需要分页器
						<div class="swiper-pagination"></div>
						如果需要导航按钮
						<div class="swiper-button-prev"></div>
						<div class="swiper-button-next"></div>
					</div>

				</div>
				<div class="money-app-content">
					<div class="money-app-content-wrap" v-for="(item,index) in casebox" @click="financeDetail(item)">
						<div class="m-app-img">
							<img :src="item.img" alt="" />
						</div>
						<div class="m-app-content">
							<h3>{{item.title}}</h3>
							<p>{{item.content}}</p>
						</div>
					</div>
				</div>
			</div>
		</div> -->
      <div class="jobs-wrap">
        <div class="title-item">
          <div class="midTitle">
            <h3>优质人才</h3>
            <p>HIGH QUELITY TALENT</p>
          </div>
        </div>
        <div class="jobs-content-wrap">
          <div class="jobs-park-content">
            <div class="jobs-title">
              <div>
                <img src="~@/assets/images/job11.png" alt="">
                <div>企业招聘</div>
                <button @click="jumb(5)">了解更多</button>
              </div>
            </div>
            <div class="jobs-list">
              <div class="jobs-item">
                <ul>
                  <li
                    v-for="(item, index) in jobs"
                    :key="index"
                    @click="jobDetail(item)"
                  >
                    <div>
                      <div class="jobs-time">
                        <span>{{ item.createTime }}</span>
                      </div>
                      <div class="jobs-name">
                        <h3>{{ item.name }}</h3>
                        <p>{{ item.company }}</p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="join-wrap">
        <div class="title-item">
          <div class="midTitle">
            <h3>政策服务</h3>
            <p>INVESTMENT POLICY</p>
          </div>
        </div>
        <div class="join-content-wrap">
          <div class="join-park-content">
            <div>
              <ul>
                <li
                  v-for="(item, index) in zhaoshang"
                  :key="index"
                  @click="jumb(6)"
                >
                  <div class="zs-pc">
                    <img
                      :src="require('../../assets/images/' + item.img)"
                      alt=""
                    >
                    <span>{{ item.title }}</span>
                  </div>
                  <div class="zs-app">
                    <img
                      :src="require('../../assets/images/' + item.img)"
                      alt=""
                    >
                    <span>{{ item.title }}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="company-wrap">
        <div class="title-item">
          <div class="midTitle">
            <h3>知名企业</h3>
            <p>well-known enterprise</p>
          </div>
        </div>
        <div class="company-content-wrap">
          <div class="company-park-content">
            <div class="company-swiper-container">
              <div class="swiper-wrapper">
                <div
                  v-for="(item, index) in companyList"
                  :key="index"
                  class="swiper-slide"
                >
                  <div class="wrap-device-detail">
                    <div class="c-logo">
                      <img :src="item.img" alt="">
                    </div>
                    <div class="c-content">
                      <h3>{{ item.name }}</h3>
                      <p style="height: 5rem">{{ item.detail }}</p>
                    </div>
                    <div class="detail-btn" @click="jumb(7, item)">
                      <span>查看详情</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 如果需要分页器 -->
              <!--						<div class="swiper-pagination"></div>-->
              <!-- 如果需要导航按钮 -->
              <div class="swiper-button-prev" />
              <div class="swiper-button-next" />
            </div>
          </div>
          <div class="company-app-content">
            <div class="c-app-wrap">
              <ul>
                <li
                  v-for="(item, index) in companyList"
                  :key="index"
                  @click="companyDetail(item)"
                >
                  <div class="wrap-device-detail">
                    <div class="c-logo">
                      <img :src="item.img" alt="">
                    </div>
                    <div class="c-content">
                      <h3>{{ item.name }}</h3>
                      <p>{{ item.detail }}</p>
                    </div>
                    <div class="detail-btn">
                      <span>查看详情</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <button class="follow-me" @click="show = true">关注我们</button>
      <div class="qrcode-list">
        <span>扫一扫</span>
        <div>
          <span>园区小程序</span>
          <img
            style="width: 82%"
            src="~@/assets/images/xiaochengxuxiao.jpg"
            alt=""
          >
        </div>
      <!--			<div>-->
      <!--				<span>园区安卓App</span>-->
      <!--				<img src="~@/assets/images/android5GPark.png" alt="" />-->
      <!--			</div>-->
      <!--      <div>-->
      <!--        <span>园区苹果App</span>-->
      <!--        <img src="~@/assets/images/ios5GPark.png" alt="" />-->
      <!--      </div>-->
      </div>
      <van-popup v-model="show" class="qrcode-app-box">
        <div class="qrcode-app-list">
          <span>扫一扫<i @click.stop="show = false">×</i></span>
          <div>
            <span>园区小程序</span>
            <img src="~@/assets/images/xiaochengxzheshi.jpg" alt="">
          </div>
        <!--				<div>-->
        <!--					<span>园区安卓App</span>-->
        <!--					<img src="~@/assets/images/android5GPark.png" alt="" />-->
        <!--				</div>-->
        <!--        <div>-->
        <!--          <span>园区苹果App</span>-->
        <!--          <img src="~@/assets/images/ios5GPark.png" alt="" />-->
        <!--        </div>-->
        </div>
      </van-popup>
    </div>
  </div></template>
<script>
import Swiper from 'swiper'
import {
    parkNotice,
    propertyNotice,
    getInvestmentCase,
    getRecruit,
    getPropaganda
} from '@/service/api_service'
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
export default {
    name: 'Homepage',
    mixins: [Base, BaseData],
    data() {
        return {
            action: 0, // 控制轮播图锚点
            serviceActive: 0, // 控制园区服务tab切换锚点
            noticeActive: 1, // 控制园区通知tab切换锚点
            actionList: [
                { url: require('@/assets/images/home/homebg.png') },
                { url: require('@/assets/images/home/1(1).jpg') },
                { url: require('@/assets/images/home/5(1).jpg') },
                { url: require('@/assets/images/home/3(1).jpg') },
                { url: require('@/assets/images/home/4(1).jpg') }
            ],
            showCode: 0,
            show: false,
            showimg: false,
            preImgUrl: 'zss1.png',
            yqfwList: [
                { url: require('@/assets/images/zyfb.png'), name: '资源发布', path: '/service/characteristic' },
                { url: require('@/assets/images/zcfw.png'), name: '政策服务', path: '/zhaoshang/list' },
                { url: require('@/assets/images/yqpx.png'), name: '园区培训', path: '/service/activities' },
                { url: require('@/assets/images/qyhd.png'), name: '园区活动', path: '/service/educate' }
            ],
            notices: {
                park: [
                    // {
                    // 	title:'走进年轻创业团队——对话完美村，探索创业新思维',
                    // 	detail:'新冠疫情改变了原本习惯线下消费人群的习惯，令此类消费者深度线上化。对实体商业连连做出改变实体商业连连做出改变此，实体商业连连做出改变，实体商业连连做出改变，实体商业连连做出改变，为的是寻找更… 在线上时代刚刚启幕之时，一度有观点认为线上消费将会颠覆线下商业。而在5G时代的在线新经济蓬勃发展之时，不断涌现的成功创新企业正在用事实证明，以短视频内容制作等为代表的线上新平台正成为推动线下消费增长新力量，线上线下并非你死我活的对立，而是在融合中迸发出新的经济增长活力。'
                    // },
                    // {
                    // 	title:'走进年轻创业团队——对话完美村，探索创业新思维',
                    // 	detail:'新冠疫情改变了原本习惯线下消费人群的习惯，令此类消费者深度线上化。对实体商业连连做出改变实体商业连连做出改变此，实体商业连连做出改变，实体商业连连做出改变，实体商业连连做出改变，为的是寻找更… 在线上时代刚刚启幕之时，一度有观点认为线上消费将会颠覆线下商业。而在5G时代的在线新经济蓬勃发展之时，不断涌现的成功创新企业正在用事实证明，以短视频内容制作等为代表的线上新平台正成为推动线下消费增长新力量，线上线下并非你死我活的对立，而是在融合中迸发出新的经济增长活力。'
                    // }
                ],
                parkManagement: [
                    // {
                    // 	title:'走进年轻创业团队——对话完美村，探索创业新思维',
                    // 	detail:'新冠疫情改变了原本习惯线下消费人群的习惯，令此类消费者深度线上化。对实体商业连连做出改变实体商业连连做出改变此，实体商业连连做出改变，实体商业连连做出改变，实体商业连连做出改变，为的是寻找更… 在线上时代刚刚启幕之时，一度有观点认为线上消费将会颠覆线下商业。而在5G时代的在线新经济蓬勃发展之时，不断涌现的成功创新企业正在用事实证明，以短视频内容制作等为代表的线上新平台正成为推动线下消费增长新力量，线上线下并非你死我活的对立，而是在融合中迸发出新的经济增长活力。'
                    // },
                    // {
                    // 	title:'走进年轻创业团队——对话完美村，探索创业新思维',
                    // 	detail:'新冠疫情改变了原本习惯线下消费人群的习惯，令此类消费者深度线上化。对实体商业连连做出改变实体商业连连做出改变此，实体商业连连做出改变，实体商业连连做出改变，实体商业连连做出改变，为的是寻找更… 在线上时代刚刚启幕之时，一度有观点认为线上消费将会颠覆线下商业。而在5G时代的在线新经济蓬勃发展之时，不断涌现的成功创新企业正在用事实证明，以短视频内容制作等为代表的线上新平台正成为推动线下消费增长新力量，线上线下并非你死我活的对立，而是在融合中迸发出新的经济增长活力。'
                    // }
                ]
            },
            casebox: [
                // {
                // 	title:'基金优秀教育平台1',
                // 	content:'在同类型平台中，基金教育平台专注于成为知识变现技术服务商，为各位自媒体人、教育者、培训传播机构等提供更加稳固的技术支撑与更加精细的运营解决方案。容承载、用户管理、付费转化、社群运营、数据分析五大核心需求，形成品牌闭环，快速完成用户沉淀，实现体系内变。',
                // 	img:'001.png'
                // },
                // {
                // 	title:'基金优秀教育平台2',
                // 	content:'在同类型平台中，基金教育平台专注于成为知识变现技术服务商，为各位自媒体人、教育者、培训传播机构等提供更加稳固的技术支撑与更加精细的运营解决方案。容承载、用户管理、付费转化、社群运营、数据分析五大核心需求，形成品牌闭环，快速完成用户沉淀，实现体系内变。',
                // 	img:'c1.png'
                // },
                // {
                // 	title:'基金优秀教育平台3',
                // 	content:'在同类型平台中，基金教育平台专注于成为知识变现技术服务商，为各位自媒体人、教育者、培训传播机构等提供更加稳固的技术支撑与更加精细的运营解决方案。容承载、用户管理、付费转化、社群运营、数据分析五大核心需求，形成品牌闭环，快速完成用户沉淀，实现体系内变。',
                // 	img:'c1.png'
                // }
            ],
            jobs: [],
            zhaoshang: [
                {
                    img: 'zjbt.png',
                    title: '我要入驻'
                },
                {
                    img: 'zss1.png',
                    title: '装修补贴'
                },
                {
                    img: 'zss2.png',
                    title: '创新创优奖励'
                },
                {
                    img: 'zss3.png',
                    title: '物业补贴'
                }
            ],
            companyList: [
                {
                    img: require('@/assets/images/com11.png'),
                    name: '北京磁擎科技有限公司',
                    eventIndex: 1,
                    detail: '北京磁擎科技有限公司成立于2018年11月14日，经营范围包括技术开发、技术服务；产品设计；软件开发；合同能源管理；机械设备租赁（不含汽车租赁）；委托加工机械设备（限分支机构经营）；销售自行开发的产品、机械设备、电气设备、电子产品、计算机、软件及辅助设备；货物进出口…'
                },
                {
                    img: require('@/assets/images/com11.png'),
                    name: '北京磁擎科技有限公司',
                    eventIndex: 1,
                    detail: '北京磁擎科技有限公司成立于2018年11月14日，经营范围包括技术开发、技术服务；产品设计；软件开发；合同能源管理；机械设备租赁（不含汽车租赁）；委托加工机械设备（限分支机构经营）；销售自行开发的产品、机械设备、电气设备、电子产品、计算机、软件及辅助设备；货物进出口…'
                },
                {
                    img: require('@/assets/images/com11.png'),
                    name: '北京磁擎科技有限公司',
                    eventIndex: 1,
                    detail: '北京磁擎科技有限公司成立于2018年11月14日，经营范围包括技术开发、技术服务；产品设计；软件开发；合同能源管理；机械设备租赁（不含汽车租赁）；委托加工机械设备（限分支机构经营）；销售自行开发的产品、机械设备、电气设备、电子产品、计算机、软件及辅助设备；货物进出口…'
                },
                {
                    img: require('@/assets/images/com11.png'),
                    name: '北京磁擎科技有限公司',
                    eventIndex: 1,
                    detail: '北京磁擎科技有限公司成立于2018年11月14日，经营范围包括技术开发、技术服务；产品设计；软件开发；合同能源管理；机械设备租赁（不含汽车租赁）；委托加工机械设备（限分支机构经营）；销售自行开发的产品、机械设备、电气设备、电子产品、计算机、软件及辅助设备；货物进出口…'
                }
                // {
                // 	img: 'clogo.png',
                // 	name: '深圳腾讯计算机有限公司',
                // 	eventIndex: 2,
                // 	detail: '深圳腾讯计算机有限公司深圳腾讯计算机有限公司'
                // },
                // {
                // 	img: 'clogo.png',
                // 	name: '华为技术有限公司',
                // 	eventIndex: 3,
                // 	detail: '华为技术有限公司华为技术有限公司华为技术有限公司华为技术有限公司'
                // },
                // {
                // 	img: 'clogo.png',
                // 	name: '小艾科技',
                // 	eventIndex: 3,
                // 	detail: '小艾科技小艾科技小艾科技小艾科技小艾科技'
                // }
            ]
        }
    },
    mounted() {
        this.initBiz().then((res) => {
            this.getRecruit()
        })
        this.initParkNotice()
        this.initPropertyNotice()
        this.getInvestmentCase()

        this.getPropaganda()
        // Swiper是轮播图插件
        new Swiper('.swiper-container', {
            loop: true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            observer: true,
            observeParents: true
            // slidesPerView : 2,
            // centeredSlides : true,
            // 如果需要滚动条
            // scrollbar: '.swiper-scrollbar',
            // 如果需要自动切换海报
            // autoplay: {
            //   delay: 100000,//时间 毫秒
            //   disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
            // },
        })
        new Swiper('.company-swiper-container', {
            loop: true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 3,
            centeredSlides: false,
            observer: true,
            observeParents: true
            // 如果需要滚动条
            // scrollbar: '.swiper-scrollbar',
            // 如果需要自动切换海报
            // autoplay: {
            //   delay: 100000,//时间 毫秒
            //   disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
            // },
        })
        if (window.history && window.history.pushState) {
            // 向历史记录中插入了当前页
            history.pushState(null, null, document.URL)
            window.addEventListener('popstate', this.goBack, false)
        }
    },
    destroyed() {
        window.removeEventListener('popstate', this.goBack, false)
    },
    methods: {
        toServiceLocator(e) {
            this.$router.push(e)
        },
        reduceAction() {
            if (this.action == 0) {
                this.action = this.actionList.length - 1
            } else {
                this.action--
            }
        },
        addAction() {
            if (this.action >= this.actionList.length - 1) {
                this.action = 0
            } else {
                this.action++
            }
            console.log(this.action)
        },
        goBack() {
            // window.location.href = 'https://smartpark.idea-sf.com/smartParkH5';
           location.reload()
        },
        jumb(index, ac) {
            switch (index) {
                case 1:
                    this.$router.push({ path: '/about' })
                    break
                case 2:
                    switch (ac) {
                        case 1:
                            this.$router.push({ path: '/service/activities' })
                            break
                        case 2:
                            this.$router.push({ path: '/service/educate' })
                            break
                        case 3:
                            this.$router.push({ path: '/service/periphery' })
                            break
                        case 4:
                            this.$router.push({ path: '/service/characteristic' })
                            break
                    }
                    break
                case 3:
                    switch (ac) {
                        case 1:
                            this.$router.push({ path: '/notice/list', query: { active: 1 }})
                            break
                        case 2:
                            this.$router.push({ path: '/notice/list', query: { active: 2 }})
                            break
                    }
                    break
                case 4:
                    this.$router.push({ path: '/finance/list' })
                    break
                case 5:
                    this.$router.push({ path: '/jobs/list' })
                    break
                case 6:
                    this.$router.push({ path: '/zhaoshang/list' })
                    break
                case 7:
                    this.$router.push({ name: 'companyDetail', params: ac })
                    break
            }
        },
        getPropaganda() {
            const _this = this
            const params = {
                pageNum: 1,
                pageSize: 5,
                type: '1',
                status: 'published'
            }
        // getPropaganda(params).then((res) => {
        //     if (res.rows) {
        //         _this.companyList = []
        //         res.rows.forEach((item) => {
        //             let url = ''
        //             if (item.logo && item.logo.length > 2) {
        //                 const annex = _this.$common.castEval(item.logo)
        //                 url = annex[0].url
        //             }
        //             const i = {
        //                 id: item.id,
        //                 img: _this.$common.replaceWxDownload(url),
        //                 name: item.companyName,
        //                 content: item.content,
        //                 detail: item.introduction
        //             }
        //             _this.companyList.push(i)
        //         })
        //     }
        // })
        },
        getRecruit() {
            const _this = this
            const params = {
                pageNum: 1,
                pageSize: 10,
                type: '1',
                status: 'published'
            }
            getRecruit(params).then((res) => {
                if (res.rows) {
                    this.jobs = []
                    res.rows.forEach((item) => {
                        const i = {
                            name: item.position,
                            eventIndex: 3,
                            num: item.peopleNumber,
                            company: _this.BizMap[item.enterpriseId],
                            createTime: item.createdAt.substring(5),
                            workRequire: item.workRequire,
                            recruitRecruit: item.recruitRecruit,
                            peopleNumber: item.peopleNumber
                        }
                        this.jobs.push(i)
                    })
                }
            })
        },
        getInvestmentCase() {
            getInvestmentCase({ status: 'published' }).then((res) => {
                if (res) {
                    this.casebox = []
                    res.forEach((item) => {
                        const i = {
                            img: this.$common.castEval(item.themeMap)[0].url,
                            title: item.title,
                            content: this.$common.delHtmlTag(item.content)
                        }
                        this.casebox.push(i)
                    })
                }
            })
        },
        initParkNotice() {
            const _this = this
            const params = {
                pageNum: 1,
                pageSize: 2,
                type: '1',
                status: 'published'
            }
            parkNotice(params).then((res) => {
                console.log(res)
                this.total = res.total
                if (res.rows) {
                    _this.noticeList = []
                    res.rows.forEach((item) => {
                        const i = {
                            name: item.title,
                            detail: item.content,
                            source: item.source,
                            content: this.$common.delHtmlTag(item.content)
                        }
                        _this.notices.park.push(i)
                    })
                }
            })
        },
        noticeDetail(index) {
            index.active = this.noticeActive
            this.$router.push({ name: 'noticeDetail', params: index })
        },
        jobDetail(index) {
            this.$router.push({ name: 'jobsDetail', params: index })
        },
        companyDetail(index) {
            this.$router.push({ name: 'companyDetail', params: index })
        },
        financeDetail(index) {
            this.$router.push({ name: 'financeDetail', params: index })
        },
        initPropertyNotice() {
            const _this = this
            // _this.params.parks = '' //绑定园区
            const params = {
                pageNum: 1,
                pageSize: 2,
                type: '2',
                status: 'published'
            }
            propertyNotice(params).then((res) => {
                console.log(res)
                this.total = res.total
                if (res.rows) {
                    _this.noticeList = []
                    res.rows.forEach((item) => {
                        const i = {
                            name: item.title,
                            detail: item.content,
                            source: item.source,
                            content: this.$common.delHtmlTag(item.content)
                        }
                        _this.notices.parkManagement.push(i)
                    })
                }
            })
        },
        // 大图预览招商四张图片
        preview(img) {
            this.showimg = true
            this.preImgUrl = img
        }
    }
}
</script>

<style scoped>
@media screen and (min-width: 1000px) {
  .swiper-wrap {
    position: relative;
    height: 1068px;
  }
  .arrowBox{
    position: absolute;
    top: 0px;
    padding: 0 50px;
    display: flex;
    width: 95%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
  }
  .arrow{
    width: 32px;
    height: 184px;
  }
  .qyfwBody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: black;
  }
  .qyfwItem{
    position: relative;
  }
  .qyfwImg{
    width: 50vw;
  }
  .msgBox{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 129px;
    left: 252px;
    z-index: 10;
  }
  .msgBox > .msgTit{
    color: white;
    font-size: 48px;
    margin-bottom: 50px;
  }
  .msgBox > .msgBtn{
    color: white;
    background: rgba(0,0,0,0);
    border: 1px solid white;
    border-radius: 15px;
    padding: 7px 0;
  }
  .swiper-wrap ul,
  .swiper-wrap li > div {
    height: 100%;
    position: relative;
  }
  .swiper-wrap > ul li {
    width: 100%;
    position: absolute;
    height: 100%;
    background: rgba(225, 219, 219, 1);
    overflow: hidden;
    display: none;
  }
  .bgimg {
    height: 100%;
  }
  .inner-text {
    position: absolute;
    transform: translateY(300%);
    font-size: 4rem;
    top: 0;
    left: 0;
    right: 0;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1rem;
  }
  .swiper-wrap li .bigImg {
    width: 100%;
    height: 100%;
  }
  .act-tab {
    display: block !important;
  }
  .act-tab img {
    animation: 5s effect;
  }

  @keyframes effect {
    0% {
      transform: scale(1.6);
    }
    100% {
      transform: scale(1);
    }
  }
  .navi-tab {
    position: absolute;
    bottom: 4rem;
    left: 0;
    right: 0;
    color: #fff;
    width: 50%;
    margin: 0 auto;
  }
  .navi-tab ul {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .navi-tab ul li {
    width: 10%;
    text-align: center;
    cursor: pointer;
  }
  .navi-tab ul li span {
    display: inline-block;
    position: relative;
    width: 60%;
    height: 3px;
    margin: 0 auto;
    background: rgba(52, 53, 54, 0.5);
  }
  .act-tab-index span {
    background: rgba(41, 107, 169, 1) !important;
  }
  /*简介*/
  .about-wrap {
    /*background: #575274;*/
  }
  .title-item {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 6rem 0 3rem 0;
  }
  .midTitle {
    margin: 0 30px;
  }
  .midTitle h3 {
    color: rgba(41, 107, 169, 1);
    font-size: 1.5rem;
  }
  .unMidTitle h3{

    color: rgba(153, 153, 153, 1);
    font-size: 1.2rem;
  }
  .title-item p {
    color: rgba(153, 153, 153, 1);
    font-size: 1rem;
    margin-top: 0.5rem;
  }
  .park-content-wrap {
    background: white;
    padding: 5rem 0;
  }
  .park-content {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .park-content > div {
    width: 50%;
  }
  .about-text {
    width: 90%;
    color: rgba(51, 51, 51, 1);
    text-align: left;
    position: relative;
  }
  .about-text h3 {
    margin-bottom: 2rem;
  }
  .about-text p {
    line-height: 2rem;
    height: 22rem;
    overflow: hidden;
  }
  .about-text button {
    background: transparent;
    border: 1px solid rgba(41, 107, 169, 1);
    color: rgba(41, 107, 169, 1);
    border-radius: 2px;
    position: absolute;
    bottom: 1rem;
    left: 0;
    cursor: pointer;
  }
  .about-img {
    width: 90%;
    margin: 0 auto;
    text-align: right;
  }
  .ahout-img img {
    width: 90%;
    height: 25rem;
  }
  /*园区服务*/
  .service-content-wrap {
    /*padding: 5rem 0;*/
  }
  .service-nav {
    width: 1000px;
    margin: 2rem auto 3rem auto;
  }
  .service-nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .service-nav ul li {
    width: 25%;
    cursor: pointer;
  }
  .service-nav ul li span {
    display: inline-block;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
  }
  .service-park-content {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .service-active span {
    border-bottom: 2px solid #996eee !important;
    color: #996eee;
  }
  .service-park-content > div {
    width: 50%;
  }
  .service-text {
    width: 90%;
    color: #333;
    text-align: left;
    position: relative;
  }
  .service-text h3 {
    margin: 0.4rem 0;
  }
  .service-text span {
    line-height: 2rem;
  }
  .service-text .service-info {
    font-size: 20px;
    font-weight: 700;
  }
  .service-text p {
    line-height: 2rem;
    height: 22rem;
    overflow: hidden;
  }
  .service-text button {
    background: transparent;
    border: 1px solid #996eee;
    color: #996eee;
    position: absolute;
    bottom: 1rem;
    left: 0;
  }
  .service-img {
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }
  .service-img img {
    width: 90%;
    height: 25rem;
  }
  /*园区通知*/
  .notice-app-content {
    display: none;
  }
  .notice-park-content {
    width: 1200px;
    margin: 0 auto;
  }
  .notice-parks {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    margin-bottom: 3rem;
  }
  .notice-parks > div:nth-child(1) {
    width: 20%;
  }
  .notice-parks > div:nth-child(2) {
    width: 70%;
  }
  .notice-parks > div:nth-child(3) {
    width: 10%;
  }
  .notice-park-img > div {
    width: 90%;
    background: #fff;
    height: 9rem;
    color: rgba(75, 175, 227, 1);
    padding-top: 3rem;
  }
  .notice-park-img > div img {
    width: 20%;
  }
  .notice-park-list ul {
    width: 90%;
    margin: 0 auto;
  }
  .notice-park-list ul li {
    margin-bottom: 1.5rem;
    text-align: left;
  }
  .notice-park-list ul li p {
    height: 3.8rem;
    overflow: hidden;
    line-height: 1.75rem;
    font-size: 0.8rem;
  }
  .notice-park-more span {
    position: relative;
    top: 45%;
    margin-top: -2rem;
    display: inline-block;
    background: rgba(75, 175, 227, 1);
    color: #fff;
    padding: 0.2rem 1rem;
  }
  /*投融资*/
  .case-wrap {
    width: 93%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .money-app-content {
    display: none;
  }
  .case-content {
    width: 40%;
  }
  .case-img {
    width: 60%;
    text-align: right;
  }
  .case-img img {
    width: 90%;
    height: 27rem;
  }
  .money-content-wrap {
    width: 1300px;
    margin: 0 auto;
  }
  .case-content {
    text-align: left;
  }
  .case-content span {
    display: inline-block;
    background: #996eee;
    color: #fff;
    padding: 1rem;
    width: 50%;
    text-align: center;
  }
  .case-title {
    font-size: 1.2rem;
    margin: 2rem 0;
  }
  .case-text {
    font-size: 1rem;
    line-height: 2rem;
    height: 17rem;
    overflow: hidden;
  }
  .case-content button {
    background: transparent;
    color: #996eee;
    border: 1px solid #996eee;
  }
  /*人才招聘*/
  .jobs-content-wrap {
    width: 1200px;
    margin: 0 auto;
  }
  .jobs-park-content {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .jobs-title {
    width: 30%;
    position: relative;
  }
  .jobs-title > div > div {
    margin-top: 3rem;
    height: 22rem;
    z-index: 99;
    position: relative;
    color: #fff;
    font-size: 3rem;
    position: relative;
  }
  .jobs-title > div > div:after {
    content: "";
    width: 2.9rem;
    height: 4px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 5rem;
  }
  .jobs-title > div {
    width: 70%;
    margin: 0 auto;
    text-align: left;
  }
  .jobs-title button {
    position: relative;
    z-index: 99;
    color: #9540ff;
    background: #fffff80;
    font-size: 0.8rem;
  }
  .jobs-title img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .jobs-list {
    width: 70%;
    background: #fff;
  }
  .jobs-item {
    width: 90%;
    margin: 0 auto;
    height: 30rem;
    overflow: hidden;
  }
  .jobs-item ul {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
  }
  .jobs-item ul li {
    width: 50%;
    margin-top: 2rem;
  }
  .jobs-item ul li > div {
    width: 90%;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px solid #dedede;
    padding-bottom: 1rem;
  }
  .jobs-time {
    width: 20%;
  }
  .jobs-time span {
    width: 3rem;
    height: 3rem;
    border-radius: 10rem;
    background: rgba(41, 107, 169, 1);
    display: inline-block;
    color: #fff;
    line-height: 3rem;
    font-size: 0.8rem;
    text-align: center;
  }
  .jobs-name {
    width: 80%;
  }
  /*招商*/
  .zhaoshang-preview {
    display: none;
  }
  .zs-app {
    display: none;
  }
  .join-content-wrap {
    width: 1200px;
    margin: 0 auto;
  }
  .join-park-content ul {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .join-park-content ul li {
    width: 25%;
    position: relative;
    overflow: hidden;
  }
  .join-park-content li:hover div img {
    animation: 1s effectForzs;
  }
  @keyframes effectForzs {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.2);
    }
  }
  .join-park-content ul li img {
    width: 100%;
  }
  .join-park-content ul li span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    text-align: center;
    width: 100%;
    background: #fff;
    padding: 1.5rem 0;
    font-weight: 800;
  }
  .join-park-content ul li span:hover{
    background:  rgba(42, 68, 94, 1);
    color: white;
  }
    /*知名企业*/
  .company-app-content {
    display: none;
  }
  .company-park-content {
    width: 1300px;
    margin: 0rem auto;
    overflow: hidden;
    padding-bottom: 5rem;
    position: relative;
  }
  .company-park-content {
    position: relative;
  }
  .company-swiper-container {
    width: 94%;
    margin: 0 auto;
  }
  .wrap-device-detail {
    background: #fff;
    width:70%;
    height: 300px;
    margin: 0 auto;
    border-bottom: 4px solid rgba(75, 175, 227, 1);
    padding-top: 1rem;
  }
  .c-logo {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  .c-logo img {
    width: 60%;
    height: 5rem;
  }
  .c-content {
    width: 90%;
    margin: 0 auto;
  }
  .c-content h3 {
    text-align: center;
    font-size: 1rem;
    margin: 1rem 0;
  }
  .c-content p {
    font-size: 0.8rem;
    line-height: 1.6rem;
    /*height: 10rem;*/
    margin-bottom: 1rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .detail-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    text-align: center;
  }
  .detail-btn span {
    display: inline-block;
    width: 40%;
    margin: 0 auto;
    text-align: center;
    background: rgba(75, 175, 227, 1);
    color: #fff;
  }
  /*扫码二维码*/
  .van-overlay {
    display: none !important;
  }
  .qrcode-app-box {
    display: none;
  }
  .follow-me {
    display: none;
  }
  .qrcode-list {
    width: 10rem;
    position: fixed;
    right: 0;
    top: 20%;
    text-align: center;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    z-index: 999;
  }
  .qrcode-list > span {
    display: block;
    width: 100%;
    background: #524c66;
    color: #fff;
    height: 2rem;
    line-height: 2rem;
  }
  .qrcode-list > div {
    width: 90%;
    margin: 1rem auto;
    text-align: center;
  }
  .qrcode-list > div span {
    color: #333;
    display: inline-block;
    margin: 1rem 0;
  }
  .qrcode-list > div img {
    width: 60%;
  }
}
/*移动端*/
@media screen and (max-width: 1000px) {
  .arrowBox{
    position: absolute;
    top: 0px;
    padding: 0 5vw;
    display: flex;
    width: 90%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
  }
  .arrow{
    width: 5vw;
    height: 30vw;
  }
  .qyfwBody {
    /*display: grid;*/
    /*grid-template-columns: 1fr 1fr;*/
    background: black;
  }
  .qyfwItem{
    position: relative;
  }
  .qyfwImg{
    width: 100vw;
  }
  .msgBox{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 7vw;
    left: 20vw;
    z-index: 10;
  }
  .msgBox > .msgTit{
    color: white;
    font-size: 7vw;
    margin-bottom: 5vw;
  }
  .msgBox > .msgBtn{
    color: white;
    background: rgba(0,0,0,0);
    border: 1px solid white;
    border-radius: 15px;
    padding: 7px 0;
  }
  .swiper-wrap {
    position: relative;
    height: 28rem;
  }
  .swiper-wrap ul,
  .swiper-wrap li > div {
    height: 100%;
    position: relative;
  }
  .swiper-wrap > ul li {
    width: 100%;
    position: absolute;
    height: 100%;
    background: #333;
    overflow: hidden;
    display: none;
  }
  .bgimg {
    height: 100%;
  }
  .inner-text {
    position: absolute;
    transform: translateY(300%);
    font-size: 2rem;
    top: 0;
    left: 0;
    right: 0;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0rem;
  }
  .swiper-wrap li .bigImg {
    /*width: 100%;*/
    height: 100%;
  }
  .act-tab {
    display: block !important;
  }
  .act-tab img {
    animation: 5s effect;
  }

  @keyframes effect {
    0% {
      transform: scale(1.6);
    }
    100% {
      transform: scale(1);
    }
  }
  .navi-tab {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    color: #fff;
    width: 80%;
    margin: 0 auto;
  }
  .navi-tab ul {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .navi-tab ul li {
    width: 10%;
    text-align: center;
    cursor: pointer;
  }
  .navi-tab ul li span {
    display: inline-block;
    position: relative;
    width: 60%;
    margin: 0 auto;
    height: 2px;
    background: #fff;
  }
  .act-tab-index span {
    background: #9540ff !important;
  }
  /*简介*/
  .park-content-wrap {
    background: white;
    padding-bottom: 10rem;
  }
  .park-content {
    position: relative;
    padding-bottom: 5rem;
  }
  .park-content .about-text {
    position: relative;
    top: 13rem;
    text-align: left;
    width: 90%;
    margin: 0 auto;
    color: rgba(51, 51, 51, 1);
    overflow: hidden;
  }
  .about-text h3 {
    margin: 1rem 0;
  }
  .about-text p {
    font-size: 0.8rem;
    line-height: 1.5rem;
  }
  .ahout-img {
    position: absolute;
    width: 90%;
    margin: 0 auto;
    height: 12rem;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 1rem;
  }
  .ahout-img img {
    width: 100%;
    height: 100%;
  }
  .about-text button {
    display: none;
  }
  .title-item {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 6rem 0 3rem 0;
  }
  .midTitle {
    margin: 0 5vw;
  }
  .midTitle h3 {
    color: rgba(41, 107, 169, 1);
    font-size: 1.3rem;
  }
  .unMidTitle h3{

    color: rgba(153, 153, 153, 1);
    font-size: 1rem;
  }
  .title-item p {
    color: rgba(153, 153, 153, 1);
    font-size: 0.7rem;
    margin-top: 0.5rem;
  }
  /*园区服务*/
  .service-content-wrap {
    /*padding: 5rem 0;*/
  }
  .service-nav {
    width: 100%;
    margin: 2rem auto 1rem auto;
    padding: 0.8rem 0;
    background: #fff;
  }
  .service-nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .service-nav ul li {
    width: 25%;
    cursor: pointer;
  }
  .service-nav ul li span {
    display: inline-block;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
  }
  .service-park-content {
    width: 90%;
    margin: 0 auto;
  }
  .service-active span {
    border-bottom: 2px solid #996eee !important;
    color: #996eee;
  }
  .service-park-content > div {
  }
  .service-text {
    width: 100%;
    color: #333;
    text-align: left;
    position: relative;
  }
  .service-text h3 {
    margin: 0.5rem 0;
  }
  .service-text span {
    font-size: 0.8rem;
    line-height: 1.5rem;
  }
  .service-text p {
    line-height: 2rem;
    height: 10rem;
    overflow: hidden;
  }
  .service-text button {
    background: #996fec;
    color: #fff;
    border: none;
    padding: 0 1rem;
    margin: 1rem auto;
    display: block;
  }
  .service-img {
    width: 100%;
    margin: 0 auto;
    text-align: left;
  }
  .service-img img {
    width: 100%;
    height: 15rem;
  }
  /*园区通知*/
  .notice-park-content {
    display: none;
  }
  .notice-item-app {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
  }
  .notice-item-app li {
    margin-bottom: 1rem;
    border-bottom: 1px solid #ddd;
  }
  .notice-wrap {
    background: #fff;
    padding-top: 1px;
    margin-top: 2rem;
  }
  .notice-wrap h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1rem;
    /*text-align: left;*/
  }
  .notice-item-app p {
    font-size: 0.8rem;
    line-height: 1.5rem;
    color: #999;
    height: 4.3rem;
    overflow: hidden;
    margin-bottom: 1rem;
  }
  .more-info {
    text-align: right;
    margin: 1rem;
  }
  .more-info button {
    background: #996fec;
    border: none;
    color: #fff;
    font-size: 0.9rem;
  }
  .notice-all {
    color: #996fec;
    border: 1px solid #996fec;
    background: transparent;
    padding: 0.2rem 1rem;
    margin: 2rem 0;
  }
  /*投融圈*/
  .money-park-content {
    display: none;
  }
  .money-app-content-wrap {
    width: 90%;
    margin: 0 auto;
    position: relative;
  }
  .m-app-img img {
    width: 100%;
  }
  .m-app-content {
    text-align: left;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #5a517575;
    color: #fff;
  }
  .m-app-content h3 {
    width: 90%;
    margin: 1rem auto;
  }
  .m-app-content p {
    width: 90%;
    margin: 1rem auto;
    line-height: 1rem;
    font-size: 0.8rem;
    height: 2rem;
    overflow: hidden;
  }
  /*人才招聘*/
  .jobs-content-wrap {
  }
  .jobs-park-content {
  }
  .jobs-title {
    display: none;
  }
  .jobs-title > div > div {
    margin-top: 3rem;
    height: 22rem;
    z-index: 99;
    position: relative;
    color: #fff;
    font-size: 3rem;
    position: relative;
  }
  .jobs-title > div > div:after {
    content: "";
    width: 2.9rem;
    height: 4px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 5rem;
  }
  .jobs-title > div {
  }
  .jobs-title button {
    position: relative;
    z-index: 99;
    color: #9540ff;
    background: #fffff80;
    font-size: 0.8rem;
  }
  .jobs-title img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .jobs-list {
  }
  .jobs-item {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
  }
  .jobs-item ul {
  }
  .jobs-item ul li {
    margin-bottom: 2rem;
    background: #fff;
    padding: 1.5rem 0 1rem 0;
  }
  .jobs-item ul li > div {
    width: 90%;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
  }
  .jobs-time {
    width: 24%;
  }
  .jobs-time span {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 10rem;
    background: rgba(41, 107, 169, 1);
    display: inline-block;
    color: #fff;
    line-height: 3.5rem;
    font-size: 1rem;
    text-align: center;
  }
  .jobs-name {
    width: 63%;
    position: relative;
  }
  .jobs-name p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.8rem;
  }
  .jobs-name:after {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid #666;
    border-top: 2px solid #666;
    transform: rotate(45deg);
    position: absolute;
    right: -2rem;
    top: 1.5rem;
  }
  /*招商*/
  .join-content-wrap {
  }
  .zs-pc {
    display: none;
  }
  .join-park-content ul {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .join-park-content ul li {
    width: 25%;
    position: relative;
  }
  .join-park-content ul li img {
    width: 100%;
  }
  .join-park-content ul li span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    text-align: center;
    width: 100%;
    background: rgba(42, 68, 94, 1);
    padding: 0.8rem 0;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.8rem;
  }
  /*知名企业*/
  .company-park-content {
    display: none;
  }
  .wrap-device-detail {
    background: #fff;
    width: 90%;
    margin: 0 auto;
    border: 1px solid #996fec;
    padding-top: 1.5rem;
  }
  .c-logo {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  .c-logo img {
    width: 60%;
    height: 5rem;
  }
  .c-content {
    width: 90%;
    margin: 0 auto;
  }
  .c-content h3 {
    text-align: center;
    font-size: 1rem;
    margin: 1rem 0;
  }
  .c-content p {
    font-size: 0.8rem;
    line-height: 1.6rem;
    height: 4.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
  }
  .detail-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    text-align: center;
  }
  .detail-btn span {
    display: inline-block;
    width: 40%;
    margin: 0 auto;
    text-align: center;
    background: rgba(75, 175, 227, 1);
    color: #fff;
  }
  .c-app-wrap li {
    position: relative;
    margin-bottom: 2rem;
  }
  /*二维码*/
  .qrcode-list {
    display: none;
  }
  .follow-me {
    position: fixed;
    right: 0;
    top: 30%;
    background: #9540ff;
    color: #fff;
    border-radius: 10px;
    padding: 0.1rem 0.8rem;
    font-size: 0.6rem;
    border: none;
  }
  .qrcode-app-list {
    width: 10rem;
    right: 0;
    left: 0;
    top: 30%;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
  }
  .qrcode-app-list > span {
    display: block;
    width: 100%;
    background: #524c66;
    color: #fff;
    height: 2rem;
    line-height: 2rem;
    position: relative;
  }
  .qrcode-app-list > span i {
    font-style: normal;
    font-size: 1.5rem;
    color: #fff;
    position: absolute;
    right: 1rem;
  }
  .qrcode-app-list > div {
    width: 90%;
    margin: 1rem auto;
    text-align: center;
  }
  .qrcode-app-list > div span {
    color: #333;
    display: inline-block;
    margin: 1rem 0;
  }
  .qrcode-app-list > div img {
    width: 60%;
  }
  .van-popup {
    border-radius: 12px !important;
  }
}
.van-popup {
  background: transparent;
}
.showZS {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.showZS img {
  width: 100%;
}
.company-park-content /deep/ .swiper-button-prev,
.money-park-content /deep/ .swiper-button-prev {
  border-top: 2px solid #996eee;
  border-left: 2px solid #996eee;
  height: 1rem !important;
  width: 1rem !important;
  transform: rotate(-45deg);
  background: none;
}
.company-park-content /deep/ .swiper-button-next,
.money-park-content /deep/ .swiper-button-next {
  border-top: 2px solid #996eee;
  border-right: 2px solid #996eee;
  height: 1rem !important;
  width: 1rem !important;
  transform: rotate(45deg);
  background: none;
}
</style>