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/logo.png" alt="" />
            <span>数字园区</span>
          </div>
          <div class="shortcut">
            <ul class="app-menu">
              <li class="cur">
                <router-link :to="{ path: '/' }">首页</router-link>
              </li>
              <li>
                <router-link :to="{ path: '/about' }">园区简介</router-link>
              </li>
              <li class="ser">
                <a href="javascript:void(0)">园区服务</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: '/service/periphery' }"
                          >园区周边</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>
                <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 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>
      </div>
      <!--            app端-menu-->
      <div class="apps">
        <div class="header_content">
          <div class="logo">
            <img src="~@/assets/images/logo.png" alt="" />
            <span>数字园区</span>
          </div>
          <div class="shortcut">
            <ul class="app-menu" v-if="menu">
              <li @click="menuBtn()" class="cur">
                <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 @click="menu2Btn(true)" class="ser">
                <a href="javascript:void(0)">园区服务</a>
                <div class="second-menu" v-if="show">
                  <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>
    <div><router-view></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: '/about' }">园区简介</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 />{{ briefDetail.attractPhone }}<br />{{
                briefDetail.operatePhone
              }}<br />地址：<br />{{ briefDetail.address }}
            </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"
              ></i
              >
							<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: {}, //控制二级菜单 显示/隐藏
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    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>
/*屏幕像素大于1000px时的样式*/
@media screen and (min-width: 1000px) {
  /*
        顶部菜单---start
        */
  .apps {
    display: none;
  }
  .header {
    width: 100%;
    position: relative;
    background: #c3c3c3;
  }
  .header_content {
    width: 1200px;
    margin: 0 auto;
    /*overflow: hidden;*/
  }
  .header_content:after {
    clear: both;
  }
  .header .logo {
    float: left;
    width: 25%;
    text-align: left;
    /*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;
    width: 72%;
    /*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: 20px 10px;
    display: block;
    /*position: relative;*/
  }
  .header .app-menu li a,
  .header .app-menu div a {
    color: #333;
    font-size: 14px;
    font-weight: 600;
  }
  .header .app-menu li a:hover {
    color: #996eee !important;
  }
  .lang {
    line-height: 100%;
    /*position: absolute;*/
    float: left;
    width: 3%;
    top: 0;
  }
  .lang span {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 25px;
    background: #674fb0;
    line-height: 30px;
    color: #fff;
    font-size: 14px;
    transform: translateY(50%);
    cursor: pointer;
  }
  .second-menu {
    position: absolute;
    top: 4.1rem;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
    background: #a463fe90;
    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: #5e55bc;
    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: #353676;
  }
  .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: #c3c3c3;
  }
  .header_content {
    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: #674fb0;
    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: #5e55bc;
    overflow: hidden;
  }
  .mod_copyright {
    width: 100%;
    height: 4rem;
    background-color: #353676;
  }
  .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>