su_nan_guan_wang/src/views/common/homepage.vue

<template xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
  <div>
    <div class="header">
      <!--            pc端 menu-->
      <div class="pc">
        <div class="header_content">
          <div class="logo">
            <img src="~@/assets/images/logoSunan.png" alt="" style="margin-right: 20px">
            苏南快递产业园
          </div>
          <div class="shortcut">
            <ul class="app-menu">
              <li class="cur" @click="changeMenu('首页')">
                <router-link :to="{ path: '/' }" :class="menuPlace==='首页'?'selMenu':''">首页</router-link>
              </li>
              <li @click="changeMenu('园区介绍')">
                <router-link :to="{ path: '/serviceLocator' }" :class="menuPlace==='园区介绍'?'selMenu':''">园区介绍</router-link>
              </li>
              <li class="ser" @click="changeMenu('企业服务')">
                <a href="javascript:void(0)" :class="menuPlace==='企业服务'?'selMenu':''">企业服务</a>
                <div class="second-menu">
                  <div class="select_detail">
                    <div class="area-nav">
                      <p>
                        <router-link
                          :to="{ path: '/service/characteristic' }"
                        >资源发布</router-link>
                      </p>
                      <!--                      <p>-->
                      <!--                        <router-link-->
                      <!--                          :to="{ path: '/zhaoshang/list' }"-->
                      <!--                        >政策服务</router-link>-->
                      <!--                      </p>-->
                      <p>
                        <router-link
                          :to="{ path: '/service/activities' }"
                        >园区活动</router-link>
                      </p>
                      <p>
                        <router-link
                          :to="{ path: '/service/educate' }"
                        >园区培训</router-link>
                      </p>
                    </div>
                  </div>
                </div>
              </li>
              <li @click="changeMenu('政策服务')">
                <router-link
                  :to="{ path: '/zhaoshang/list' }"
                  :class="menuPlace==='政策服务'?'selMenu':''"
                >政策服务</router-link>
              </li>
              <li @click="changeMenu('优质人才')">
                <router-link :to="{ path: '/jobs/list' }" :class="menuPlace==='优质人才'?'selMenu':''">优质人才</router-link>
              </li>
              <!--              <li>-->
              <!--                <router-link :to="{ path: '/finance/list' }"-->
              <!--                  >快递圈</router-link-->
              <!--                >-->
              <!--              </li>-->
              <li @click="changeMenu('知名企业')">
                <router-link
                  :to="{ path: '/company/list' }"
                  :class="menuPlace==='知名企业'?'selMenu':''"
                >知名企业</router-link>
              </li>
              <li @click="changeMenu('园区通知')">
                <router-link
                  :to="{ path: '/notice/list' }"
                  :class="menuPlace==='园区通知'?'selMenu':''"
                >园区通知</router-link>
              </li>
              <li @click="changeMenu('联系我们')">
                <router-link :to="{ path: '/contact' }" :class="menuPlace==='联系我们'?'selMenu':''">联系我们</router-link>
              </li>
            </ul>
            <div class="menu" style="display: none" @click="menuBtn()">
              <img src="~@/assets/images/menu.png" alt="">
              <img src="~@/assets/images/menu-close.png" alt="">
            </div>
          </div>
          <div class="lang"><span>EN</span></div>
          <div style="clear: both" />
        </div>
      </div>
      <!--            app端-menu-->
      <div class="apps">
        <div class="header_content">
          <div class="logo">
            <img src="~@/assets/images/logo.png" alt="">
            <span>尚贤湖基金Park</span>
          </div>
          <div class="shortcut">
            <ul v-if="menu" class="app-menu">
              <li class="cur" @click="menuBtn()">
                <router-link
                  exact-active-class="nav-active"
                  :to="{ path: '/' }"
                >首页</router-link>
              </li>
              <li @click="menuBtn()">
                <router-link
                  exact-active-class="nav-active"
                  :to="{ path: '/about' }"
                >园区介绍</router-link>
              </li>
              <li class="ser" @click="menu2Btn(true)">
                <a href="javascript:void(0)">园区服务</a>
                <div v-if="show" class="second-menu">
                  <div class="select_detail">
                    <i @click.stop="menu2Btn(false)">&lt;返回</i>
                    <div class="area-nav">
                      <p @click="menuBtn()">
                        <router-link
                          exact-active-class="nav-active"
                          :to="{ path: '/service/characteristic' }"
                        >资源发布</router-link>
                      </p>
                      <p @click="menuBtn()">
                        <router-link
                          exact-active-class="nav-active"
                          :to="{ path: '/service/periphery' }"
                        >政策服务</router-link>
                      </p>
                      <p @click="menuBtn()">
                        <router-link
                          exact-active-class="nav-active"
                          :to="{ path: '/service/activities' }"
                        >园区活动</router-link>
                      </p>
                      <p @click="menuBtn()">
                        <router-link
                          exact-active-class="nav-active"
                          :to="{ path: '/service/educate' }"
                        >园区培训</router-link>
                      </p>
                    </div>
                  </div>
                </div>
              </li>
              <li @click="menuBtn()">
                <router-link
                  exact-active-class="nav-active"
                  :to="{ path: '/zhaoshang/list' }"
                >政策服务</router-link>
              </li>
              <li @click="menuBtn()">
                <router-link
                  exact-active-class="nav-active"
                  :to="{ path: '/jobs/list' }"
                >优质人才</router-link>
              </li>
              <!--              <li @click="menuBtn()">-->
              <!--                <router-link-->
              <!--                  exact-active-class="nav-active"-->
              <!--                  :to="{ path: '/finance/list' }"-->
              <!--                  >快递圈</router-link-->
              <!--                >-->
              <!--              </li>-->
              <li @click="menuBtn()">
                <router-link
                  exact-active-class="nav-active"
                  :to="{ path: '/company/list' }"
                >知名企业</router-link>
              </li>
              <li @click="menuBtn()">
                <router-link
                  exact-active-class="nav-active"
                  :to="{ path: '/notice/list' }"
                >园区通知</router-link>
              </li>
              <li @click="menuBtn()">
                <router-link
                  exact-active-class="nav-active"
                  :to="{ path: '/contact' }"
                >联系我们</router-link>
              </li>
            </ul>
            <div class="menu" style="display: none" @click="menuBtn()">
              <img
                v-if="menu == false"
                src="~@/assets/images/menu.png"
                alt=""
              >
              <img v-if="menu" src="~@/assets/images/menu-close.png" alt="">
            </div>
          </div>
          <div class="lang"><span>EN</span></div>
          <div style="clear: both" />
        </div>
      </div>
    </div>
    <div><router-view /></div>
    <div class="footer">
      <div class="mod_content">
        <div class="con_del">
          <h3 class="tip">快速导航</h3>
          <div class="con_del_help">
            <ul>
              <li>
                <router-link :to="{ path: '/serviceLocator' }">园区介绍</router-link>
              </li>
              <li>
                <router-link
                  :to="{ path: '/service/characteristic' }"
                >企业服务</router-link>
              </li>
              <li>
                <router-link
                  :to="{ path: '/zhaoshang/list' }"
                >政策服务</router-link>
              </li>
              <li>
                <router-link :to="{ path: '/jobs/list' }">优质人才</router-link>
              </li>
              <!--              <li>-->
              <!--                <router-link-->
              <!--                  :to="{ path: '/finance/list' }"-->
              <!--                >快递圈</router-link>-->
              <!--              </li>-->
              <li>
                <router-link
                  :to="{ path: '/company/list' }"
                >知名企业</router-link>
              </li>
              <li>
                <router-link
                  :to="{ path: '/notice/list' }"
                >园区通知</router-link>
              </li>
              <li>
                <router-link :to="{ path: '/contact' }">联系我们</router-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="con_addr">
          <div class="con_del_address">
            <h3 class="tip">联系方式</h3>
            <p style="">
              招商咨询：<br>13898900982<br>
              0512-890892333
              <br>地址：<br>江苏省无锡市梁溪区天安大厦
            </p>
          </div>
        </div>
        <div class="content_scan">
          <div>
            <h3 class="tip">关注我们</h3>
            <img src="~@/assets/images/xiaochengxuxiao.jpg" alt="">
          </div>
        </div>
      </div>
      <div class="mod_copyright">
        <div class="mod_copyright_con">
          <div class="copyright_con_num">
            <span
              class="copyright"
            >COPYRIGHT ©2010-2020无锡苏南快递园<i
              style="display: inline-block; margin: 0 10px"
            />
              <a
                href="https://beian.miit.gov.cn/"
                target="_blank"
              >苏ICP备11010502000501号</a>
            </span>
            <!--            <router-link :to="{ name: 'qtwo', query: { index: 3 } }">-->
            <!--              关于我们</router-link>-->
            <!--            <a href="#">移动版</a>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBridf } from '@/service/api_service'
export default {
    name: 'Homepage',
    data() {
        return {
            menu: false, // 控制一级菜单 显示/隐藏
            show: false,
            briefDetail: {}, // 控制二级菜单 显示/隐藏
            menuPlace: '首页'
        }
    },
    mounted() {
        this.getData()
        this.getMenu()
    },
    methods: {
        getMenu() {
            if (this.$route.path === '/') {
                this.menuPlace = '首页'
            } if (this.$route.path === '/serviceLocator' || this.$route.path === '/surroundings' || this.$route.path === '/industry') {
                this.menuPlace = '园区介绍'
            }
            if (this.$route.path === '/service/characteristic' || this.$route.path === '/service/activities' || this.$route.path === '/service/educate') {
                this.menuPlace = '企业服务'
            }
            if (this.$route.path === '/zhaoshang/list') {
                this.menuPlace = '政策服务'
            }
            if (this.$route.path === '/jobs/list' || this.$route.path === '/jobs/detail') {
                this.menuPlace = '优质人才'
            }
            if (this.$route.path === '/company/list' || this.$route.path === '/company/detail') {
                this.menuPlace = '知名企业'
            }
            if (this.$route.path === '/notice/list' || this.$route.path === '/notice/detail') {
                this.menuPlace = '园区通知'
            }
            if (this.$route.path === '/contact') {
                this.menuPlace = '联系我们'
            }
        },
        changeMenu(e) {
            this.menuPlace = e
        },
        getData() {
            getBridf({ groupId: '870261874875170816' }).then((res) => {
                if (res.data) {
                    this.briefDetail = res.data
                }
            })
        },
        menuBtn() {
            if (this.menu == false) {
                this.menu = true
            } else {
                this.menu = false
                this.show = false
            }
        },
        menu2Btn(bo) {
            this.show = bo
        }
    }
}
</script>

<style scoped>
.selMenu{
  color: rgba(75, 175, 227, 1) !important;
}
/*屏幕像素大于1000px时的样式*/
@media screen and (min-width: 1000px) {
  /*
        顶部菜单---start
        */
  .apps {
    display: none;
  }
  .header {
    width: 100%;
    position: relative;
    background: #FFFFFF;
    /*box-shadow: 5px 0px 105px 0px rgba(225, 219, 219, 0.3);*/
  }
  .header_content {
    width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /*overflow: hidden;*/
  }
  .header_content:after {
    clear: both;
  }
  .header .logo {
    display: flex;
    align-items: center;
    /*float: left;*/
    /*width: 25%;*/
    text-align: left;
    font-size: 30px;
    margin: 47px 0;
    color: rgba(51, 51, 51, 1);
    /*padding: 14px 0;*/
    vertical-align: middle;
    position: relative;
  }
  .logo span {
    font-weight: 600;
    font-size: 18px;
    position: absolute;
    margin-left: 2px;
    transform: translateY(75%);
  }
  .header .logo img {
    width: 60px;
  }
  .header .shortcut {
    /*float: left;*/
    /*margin-left: 10%;*/
    width: 62%;
    font-size: 22px;
    /*position: relative;*/
  }
  .header .app-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    /*position: relative;*/
  }
  .header .app-menu li {
    list-style: none;
    /*height: 28px;*/
    flex: 1;
    padding: 24px 10px;
    display: block;
    /*position: relative;*/
  }
  .header .app-menu li a,
  .header .app-menu div a {
    color: rgba(51, 51, 51, 1);
    font-size: 22px;
  }
  .header .app-menu li a:hover {
    color: rgba(75, 175, 227, 1) !important;
  }
  .lang {
    /*line-height: 100%;*/
    /*position: absolute;*/
    /*float: left;*/
    width: 3%;
    top: 0;
  }
  .lang span {
    display: block;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: rgba(75, 175, 227, 1);
    line-height: 43px;
    color: #fff;
    font-size: 18px;
    /*transform: translateY(50%);*/
    cursor: pointer;
  }
  .second-menu {
    position: absolute;
    top: 6.1rem;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
    background: rgba(52, 53, 54, 0.6);
    z-index: 9999;
    overflow: hidden;
    display: none;
  }
  .second-menu a {
    color: #fff;
  }
  .second-menu > div {
    /*float: right;*/
    /*width: 72%;*/
  }
  .area-nav {
    float: right;
    width: 72%;
  }
  .select_detail {
    width: 1200px;
    margin: 1rem auto;
    overflow: hidden;
  }
  .select_detail div {
    display: flex;
    justify-content: left;
    flex-wrap: nowrap;
  }
  .select_detail div p {
    margin-right: 1rem;
  }
  .select_detail div p a {
    color: #fff !important;
  }
  .ser:hover .second-menu {
    display: block !important;
  }
  /*
       顶部菜单---end
       */
  .footer {
    width: 100%;
    background-color: rgba(75, 175, 227, 1);
    overflow: hidden;
  }
  .mod_content {
    width: 1200px;
    margin: 120px auto;
    transform: translateY(0%);
    overflow: hidden;
    /*height: 450px;*/
  }
  .mod_content > div {
    float: left;
    height: 200px;
    width: 33.33%;
  }
  .tip {
    font-size: 24px !important;
    color: #fff !important;
  }
  .con_del {
    text-align: left;
    display: block;
  }
  .con_addr {
    position: relative;
  }
  .con_del_help ul {
    width: 50%;
    color: #fff;
    font-size: 16px;
    display: flex;
    /*justify-content: center;*/
    flex-wrap: wrap;
  }
  .con_del_help ul li {
    min-width: 50%;
    max-width: 50%;
    color: #fff;
    font-size: 14px;
    text-align: left;
    margin-top: 18px;
  }
  .con_del_help ul li a {
    color: #fff;
    font-size: 1.1rem;
  }
  .con_del_address {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    text-align: left;
    margin-left: 40px;
  }
  .con_del_address {
  }
  .con_del_address p {
    color: #fff;
    font-size: 1.1rem;
    margin-top: 10px;
    line-height: 2rem;
  }
  .mod_copyright {
    width: 100%;
    height: 55px;
    background-color: rgba(41, 69, 93, 1);
  }
  .content_scan {
    width: 555px;
    overflow: hidden;
    display: flex;
    text-align: left;
    position: relative;
  }
  .content_scan:before,
  .con_addr:before {
    content: "";
    height: 100%;
    width: 1px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
  }
  .content_scan div {
    margin-left: 40px;
  }
  .content_scan p {
    color: #fff;
    font-size: 12px;
  }
  .content_scan img {
    margin-top: 10px;
    width: 150px;
  }
  .mod_copyright {
    width: 100%;
    overflow: hidden;
  }
  .mod_copyright_con {
    width: 80%;
    height: 40px;
    line-height: 40px;
    margin: 5px auto;
    text-align: center;
  }
  .copyright_con_num {
    color: #fff;
    font-size: 12px;
  }
  .copyright_con_num a:hover {
    color: #ff6a00;
  }
  .company-addr-tip,
  .company-addr {
    float: left;
  }
  .company-addr-tip {
    width: 70px;
  }
  .company-addr {
    width: 80%;
  }
  .company-addr span {
    display: block;
    margin-bottom: 18px;
    text-align: left;
  }
  .copyright_con_num a {
    color: #fff;
    font-size: 12px;
    margin-left: 10px;
  }
  .copyright_con_num span {
    margin-left: 10px;
  }
  .copyright_con_num .copyright {
    margin-right: 70px;
  }
}
/*屏幕像素小于1000px时的样式*/
@media screen and (max-width: 1000px) {
  .pc {
    display: none;
  }
  /*头部菜单*/
  .header {
    width: 100%;
    background: white;
  }
  .header_content {
    display: flex;
    /*align-items: center;*/
    /*justify-content: space-around;*/
    overflow: hidden;
    padding: 0 1rem;
  }
  .logo {
    /*float: left;*/
  }
  .logo span {
    display: none;
  }
  .logo img {
    width: 4rem;
  }
  .shortcut {
    /*position: relative;*/
  }
  .shortcut ul {
    display: block;
    width: 100%;
    position: absolute;
    top: 4.3rem;
    left: 0;
    background: #fff;
    height: 100%;
    text-align: left;
    z-index: 999;
  }
  .shortcut ul li {
    width: 90%;
    margin: 0.8rem auto 0 auto;
    color: #333;
    /*position: relative;*/
  }
  .shortcut ul li a {
    color: #333;
    font-size: 1.1rem;
    display: inline-block;
    position: relative;
    width: 100%;
  }
  /*.shortcut ul li:nth-child(3) > a:after{*/
  /*    content: '';*/
  /*    width: 0.6rem;*/
  /*    height: 0.6rem;*/
  /*    border-right: 1px solid #333;*/
  /*    border-top: 1px solid #333;*/
  /*    transform:rotate(45deg);*/
  /*    position: absolute;*/
  /*    right: 0rem;*/
  /*    top: 0.8rem;*/
  /*}*/
  .shortcut ul li > a:after {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-right: 1px solid #333;
    border-top: 1px solid #333;
    transform: rotate(45deg);
    position: absolute;
    right: 0rem;
    top: 0.8rem;
  }
  .menu {
    display: block !important;
  }
  .menu img {
    width: 2rem;
    float: right;
    top: 1.1rem;
    position: relative;
  }
  .nav-active {
    color: #996eee !important;
  }
  .nav-active:after {
    border-right: 1px solid #996eee !important;
    border-top: 1px solid #996eee !important;
  }
  .lang {
    line-height: 100%;
    position: absolute;
    right: 4rem;
    top: 0.3rem;
  }
  .lang span {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 25px;
    line-height: 30px;
    color: rgba(75, 175, 227, 1);
    font-size: 1.3rem;
    font-weight: 600;
    transform: translateY(50%);
    cursor: pointer;
  }
  .second-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
    z-index: 999;
    height: 100%;
  }
  .select_detail {
    width: 90%;
    margin: 1rem auto;
  }
  .select_detail p {
    margin-top: 1rem;
  }
  .select_detail i {
    font-style: normal;
    font-size: 1.1rem;
  }
  /*底部菜单*/
  .footer {
    width: 100%;
    background-color: rgba(75, 175, 227, 1);
    overflow: hidden;
  }
  .mod_copyright {
    width: 100%;
    height: 4rem;
    background-color: rgba(41, 69, 93, 1);
  }
  .con_del {
    display: none;
  }
  .con_del_address p {
    display: inline-block;
    margin-bottom: 1rem;
    text-align: left;
    width: 95%;
    line-height: 1.6rem;
  }
  .con_addr {
    border-bottom: 1px solid #fff;
    width: 90%;
    margin: 1rem auto;
    color: #fff;
    font-size: 1rem;
  }
  .copyright_con_num > a {
    display: none;
    color: #fff;
  }
  .content_scan {
    color: #fff;
    font-size: 1rem;
    padding-bottom: 1rem;
  }
  .content_scan img {
    width: 5rem;
  }
  .tip {
    margin: 1rem 0;
  }
  .copyright_con_num {
    font-size: 0.8rem;
    color: #dedede;
    padding-top: 1rem;
  }
  .copyright_con_num i {
    margin-top: 1rem;
    display: block !important;
    color: #dedede;
  }
  .copyright_con_num span a {
    color: #dedede;
    font-size: 0.8rem;
    display: block;
  }
}
</style>