zm_website/src/App.vue

<template>
  <div>
    <div id="index-banner">
      <!-- 顶部导航栏 -->
      <!-- 分辨率大于1200页面 -->
      <div class="nav-lg visible-lg">
        <!--          <nav class="nav-padding"></nav>-->
        <nav class="navbar navbar-default nav-lg navbar-fixed-top visible-lg">
          <div class="container text-center">
            <!-- Brand and toggle get grouped for better mobile display -->
            <!-- 大屏幕下的样式  width>=1200px -->
            <div class="visible-lg">
              <!--  菜单栏 -->

              <div class="col-lg-12 nav-link flex-row">
                <img src="./assets/image/img/logo.png" alt="" class="navbar-brand logo">
                <div style="min-width: 1400px;justify-content: flex-end" class="flex-row">
                  <router-link class="navbar-brand" to="/index" tag="a">
                    <span>首</span>
                    <span>页</span>
                  </router-link>
                  <router-link class="navbar-brand" to="/food" tag="a">

                    <span>醉</span>
                    <span>面</span>
                    <span>美</span>
                    <span>食</span>
                  </router-link>
                  <router-link class="navbar-brand" to="/news" tag="a">
                    <span>品</span>
                    <span>牌</span>
                    <span>新</span>
                    <span>闻</span>
                  </router-link>
                  <router-link class="navbar-brand" to="/contact" tag="a">
                    <span>联</span>
                    <span>系</span>
                    <span>我</span>
                    <span>们</span>
                  </router-link>
                  <router-link class="navbar-brand" to="/recruit" tag="a">
                    <span>人</span>
                    <span>才</span>
                    <span>招</span>
                    <span>聘</span>
                  </router-link>
                  <span class="navbar-brand" style="margin-right: 100px">

                   <a :href="'tel:400-878-124'">
                     <img src="./assets/image/img/tel.png" alt style="height: 30px;width: 34px"/>
                   </a>
                    <span style="margin-left: 14px;width: 160px;text-align: center;color: #E84E47;font-size: 24px">400-878-124</span>

                  </span>
                </div>
              </div>

            </div>

          </div>
        </nav>
      </div>

<!--      页面小的时候的显示-->
      <div class="nav-sm visible-sm visible-xs" >
<!--        <nav class="nav-smpadding"></nav>-->
        <!-- 分辨率小于990 页面-->
        <nav class="nav-sm navbar-fixed-top visible-sm visible-xs">
          <div class="contain text-center">
            <!-- Brand and toggle get grouped for better mobile display -->
            <!-- 小屏幕下的样式  width<=990px -->
            <div class="nav-xsdiv">
              <div class="col-lg-12 nav-link flex-row" style="height: 50px;">
                <img src="./assets/image/img/logo.png" alt="" class="navbar-brand">
<!--                <div style="justify-content: flex-end" class="flex-row">-->
<!--                  <router-link class="navbar-brand-sm"  to="/index" tag="a">-->
<!--                    <span>首</span>-->
<!--                    <span>页</span>-->
<!--                  </router-link>-->
<!--                  <router-link class="navbar-brand-sm" to="/food" tag="a" style="margin-left: 10px">-->
<!--                    <span>美</span>-->
<!--                    <span>食</span>-->
<!--                  </router-link>-->
<!--                  <router-link class="navbar-brand-sm" to="/news" tag="a" style="margin-left: 10px">-->
<!--                    <span>新</span>-->
<!--                    <span>闻</span>-->
<!--                  </router-link>-->
<!--                  <router-link class="navbar-brand-sm" to="/contact" tag="a" style="margin-left: 10px">-->
<!--                    <span>联</span>-->
<!--                    <span>系</span>-->
<!--                  </router-link>-->
<!--                  <router-link class="navbar-brand-sm" to="/recruit" tag="a" style="margin-left: 10px;margin-right: 20px">-->
<!--                    <span>招</span>-->
<!--                    <span>聘</span>-->
<!--                  </router-link>-->
<!--                  <span class="navbar-brand-sm" style="margin-left: 10px">-->

<!--                   <a :href="'tel:400-878-124'">-->
<!--                     <img src="./assets/image/img/tel.png" alt style="height: 16px;width: 20px;margin-right: 14px"/>-->
<!--                   </a>-->
<!--&lt;!&ndash;                    <span style="width: 60px;text-align: center;color: #E84E47;font-size: 8px">400-878-124</span>&ndash;&gt;-->

<!--                  </span>-->
<!--                </div>-->
              </div>
            </div>

          </div>
        </nav>
      </div>




    </div>


    <router-view></router-view>
    <div class="phone-show">
      <div class="food-bg">
        <div class="flex-column content">
          <div class="content-top flex-row">
            <img src="../src/assets/image/img/food-left.png" alt="" class="c-top-left">
            <img src="../src/assets/image/img/food-right.png" alt="" class="c-top-right">
          </div>

          <div class="flex-row content-bottom">
            <div class="flex-column food-view-left" style="width: 230px">
              <div class="food_type " :class="{'choose_food_type':index==1}" @click="chooseType(1)">三大招牌</div>
              <div class="food_type"  :class="{'choose_food_type':index==2}" @click="chooseType(2)">风味小食</div>
              <div class="food_type"  :class="{'choose_food_type':index==3}" @click="chooseType(3)">拌饭类</div>
            </div>
            <div class="flex-row food-view-right" style="margin-left: 100px;justify-content: space-between">
              <div class="flex-column food-pre" style="margin-right: 80px">
                <img src="../src/assets/image/img/food1.png" alt="" style="width: 60px">
                <div class="food-title">豌杂肉酱面</div>
                <div class="food-desc">豌豆肉酱</div>
              </div>
              <div class="flex-column food-pre" style="margin-right: 80px">
                <img src="../src/assets/image/img/food2.png" alt="" style="width: 60px">
                <div class="food-title">葱油面</div>
                <div class="food-desc">小香葱煸出来</div>
              </div>
              <div class="flex-column food-pre">
                <img src="../src/assets/image/img/food3.png" alt="" style="width: 60px">
                <div class="food-title">麻酱凉面</div>
                <div class="food-desc">纯芝麻酱拌面</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="news-bg">
        <img src="../src/assets/image/img/news.png" alt="" style="width: 100%">
        <div class="news-bottom flex-column" style="align-items: center">

          <div class="news-type flex-row">
            <div class="type-img" :class="{'choose-type':newsIndex==1}" @click="chooseTypeNews(1)">企业新闻</div>
            <div class="type-video" :class="{'choose-type':newsIndex==2}" @click="chooseTypeNews(2)">精彩视频</div>
          </div>

          <div class="title">{{title}}</div>
          <div class="title-red"></div>
          <div class="titleEn">{{titleEn}}</div>


          <div class="flex-column img-list"  v-if="showImg">

            <div class="img-info flex-row">
              <img src="../src/assets/image/img/desc_2.png" alt="" class="img-info-left">
              <div class="img-info-right flex-column">
                <div class="img-info-right-top">连续三年数十万人排队吃面，味千52周年生日季引爆全国商圈</div>
                <div class="img-info-right-mid">醉面连续举办了三年的“生日免费吃面”活动,把每一年的品牌周年庆都做成了一场专属于粉丝的拉面狂欢节。10月25日,醉面52周年生日季再度火热开启,数十万名食客在这一天争相涌入全国数百家门店,只为向“老朋友”道一句生日快乐。</div>
                <div class="img-info-right-bottom">发布时间：2020/10/26</div>
              </div>
            </div>
            <div class="img-info flex-row">
              <img src="../src/assets/image/img/desc_2.png" alt="" class="img-info-left">
              <div class="img-info-right flex-column">
                <div class="img-info-right-top">连续三年数十万人排队吃面，味千52周年生日季引爆全国商圈</div>
                <div class="img-info-right-mid">醉面连续举办了三年的“生日免费吃面”活动,把每一年的品牌周年庆都做成了一场专属于粉丝的拉面狂欢节。10月25日,醉面52周年生日季再度火热开启,数十万名食客在这一天争相涌入全国数百家门店,只为向“老朋友”道一句生日快乐。</div>
                <div class="img-info-right-bottom">发布时间：2020/10/26</div>
              </div>
            </div>
            <div class="img-info flex-row">
              <img src="../src/assets/image/img/desc_2.png" alt="" class="img-info-left">
              <div class="img-info-right flex-column">
                <div class="img-info-right-top">连续三年数十万人排队吃面，味千52周年生日季引爆全国商圈</div>
                <div class="img-info-right-mid">醉面连续举办了三年的“生日免费吃面”活动,把每一年的品牌周年庆都做成了一场专属于粉丝的拉面狂欢节。10月25日,醉面52周年生日季再度火热开启,数十万名食客在这一天争相涌入全国数百家门店,只为向“老朋友”道一句生日快乐。</div>
                <div class="img-info-right-bottom">发布时间：2020/10/26</div>
              </div>
            </div>
            <div class="img-info flex-row">
              <img src="../src/assets/image/img/desc_2.png" alt="" class="img-info-left">
              <div class="img-info-right flex-column">
                <div class="img-info-right-top">连续三年数十万人排队吃面，味千52周年生日季引爆全国商圈</div>
                <div class="img-info-right-mid">醉面连续举办了三年的“生日免费吃面”活动,把每一年的品牌周年庆都做成了一场专属于粉丝的拉面狂欢节。10月25日,醉面52周年生日季再度火热开启,数十万名食客在这一天争相涌入全国数百家门店,只为向“老朋友”道一句生日快乐。</div>
                <div class="img-info-right-bottom">发布时间：2020/10/26</div>
              </div>
            </div>

          </div>

          <div class="video-list"  v-if="!showImg">

            <div class="video-info flex-column">
              <img src="../src/assets/image/img/desc_2.png" alt="" class="video-info-top">
              <div class="video-info-text">
                连续三年数十万人排队吃面，味千52周年生日季引爆全国商圈
              </div>
            </div>

            <div class="video-info flex-column">
              <img src="../src/assets/image/img/desc_2.png" alt="" class="video-info-top">
              <div class="video-info-text">
                连续三年数十万人排队吃面，味千52周年生日季引爆全国商圈
              </div>
            </div>

            <div class="video-info flex-column">
              <img src="../src/assets/image/img/desc_2.png" alt="" class="video-info-top">
              <div class="video-info-text">
                连续三年数十万人排队吃面，味千52周年生日季引爆全国商圈
              </div>
            </div>

            <div class="video-info flex-column">
              <img src="../src/assets/image/img/desc_2.png" alt="" class="video-info-top">
              <div class="video-info-text">
                连续三年数十万人排队吃面，味千52周年生日季引爆全国商圈
              </div>
            </div>

            <div class="video-info flex-column">
              <img src="../src/assets/image/img/desc_2.png" alt="" class="video-info-top">
              <div class="video-info-text">
                连续三年数十万人排队吃面，味千52周年生日季引爆全国商圈
              </div>
            </div>

            <div class="video-info flex-column">
              <img src="../src/assets/image/img/desc_2.png" alt="" class="video-info-top">
              <div class="video-info-text">
                连续三年数十万人排队吃面，味千52周年生日季引爆全国商圈
              </div>
            </div>


          </div>



        </div>
      </div>

      <div class="contact-bg">
        <img src="../src/assets/image/img/call.png" alt="" style="width: 100%">
        <div class="contact-bottom flex-column" style="align-items: center">

          <div class="name">北京醉面餐饮集团有限公司</div>

          <div class="flex-row msg-img-list">
            <div class="flex-column" style="margin-bottom: 20px">
              <img src="../src/assets/image/img/address.png" alt="" class="msg-img">
              <div class="msg-text">北京市朝阳区繁华大街3450拓基大厦1103室</div>
            </div>
            <div class="flex-column" style="margin-bottom: 20px">
              <img src="../src/assets/image/img/mobile.png" alt="" class="msg-img">
              <div class="msg-text">021-67675666</div>
            </div>
            <div class="flex-column"  style="margin-bottom: 20px">
              <img src="../src/assets/image/img/ie.png" alt="" class="msg-img">
              <div class="msg-text" style="cursor: pointer">www.shpocc.com</div>
            </div>
            <div class="flex-column"  style="margin-bottom: 20px">
              <img src="../src/assets/image/img/email.png" alt="" class="msg-img">
              <div class="msg-text">bj@pocc.co</div>
            </div>

          </div>

          <div class="img-map-div">
            <img src="../src/assets/image/img/contact_map.png" alt="" class="map">
          </div>


        </div>

      </div>

      <div class="recruit-bg flex-column" style="align-items: center">
        <img src="../src/assets/image/img/recurit.png" alt="" style="width: 100%">
        <div class="recruit-list">

          <div class="info">
            <div class="info-1">应届毕业生（预决算方向）</div>
            <div class="info-2 flex-row">
              <div class="info-address">工作地区：上海</div>
              <div class="info-year"> 薪资：6k-8k</div>
            </div>
            <div class="info-3 flex-row">
              <div class="info-3-money">工作年限：不限</div>
              <div class="info-3-study">学历要求：本科</div>
            </div>
            <div class="line"></div>
            <div class="info-4 flex-row">
              <div class="info-4-1">6K-8K</div>
              <div class="info-4-2">发布于 2021-05-12</div>
            </div>

          </div>
          <div class="info" >
            <div class="info-1">应届毕业生（预决算方向）</div>
            <div class="info-2 flex-row">
              <div class="info-address">工作地区：上海</div>
              <div class="info-year"> 薪资6k-8k</div>
            </div>
            <div class="info-3 flex-row">
              <div class="info-3-money">工作年限：不限</div>
              <div class="info-3-study">学历要求：本科</div>
            </div>
            <div class="line"></div>
            <div class="info-4 flex-row">
              <div class="info-4-1">6K-8K</div>
              <div class="info-4-2">发布于 2021-05-12</div>
            </div>

          </div>

          <div class="info">
            <div class="info-1">应届毕业生（预决算方向）</div>
            <div class="info-2 flex-row">
              <div class="info-address">工作地区：上海</div>
              <div class="info-year"> 薪资：6k-8k</div>
            </div>
            <div class="info-3 flex-row">
              <div class="info-3-money">工作年限：不限</div>
              <div class="info-3-study">学历要求：本科</div>
            </div>
            <div class="line"></div>
            <div class="info-4 flex-row">
              <div class="info-4-1">6K-8K</div>
              <div class="info-4-2">发布于 2021-05-12</div>
            </div>

          </div>
          <div class="info" >
            <div class="info-1">应届毕业生（预决算方向）</div>
            <div class="info-2 flex-row">
              <div class="info-address">工作地区：上海</div>
              <div class="info-year"> 薪资6k-8k</div>
            </div>
            <div class="info-3 flex-row">
              <div class="info-3-money">工作年限：不限</div>
              <div class="info-3-study">学历要求：本科</div>
            </div>
            <div class="line"></div>
            <div class="info-4 flex-row">
              <div class="info-4-1">6K-8K</div>
              <div class="info-4-2">发布于 2021-05-12</div>
            </div>

          </div>


        </div>





      </div>


    </div>


        <div id="index-bottom flex-column">
          <div class="index-bottom-top flex-row" :style="{height:indexBottomTopHeight}">
            <div class="index-bottom-top-left flex-row">
              <img src="../src/assets/image/img/bottom_title.png" alt="" class="bt1">
              <div class="bt2 flex-column">
                <div>联系电话：0663-1928830</div>
                <div  class="address">联系地址</div>
                <div  class="address-info">北京市朝阳区繁华大街3450拓基大厦1103室</div>
              </div>
            </div>
<!--            <div class="bt3 flex-row">-->
<!--              <router-link class="bt3-brand" to="/index" tag="a">-->
<!--                <span>首页</span>-->
<!--              </router-link>-->
<!--              <router-link class="bt3-brand" to="/food" tag="a">-->
<!--                <span>醉面美食</span>-->
<!--              </router-link>-->
<!--              <router-link class="bt3-brand" to="/news" tag="a">-->
<!--                <span>品牌新闻</span>-->
<!--              </router-link>-->
<!--              <router-link class="bt3-brand" to="/contact" tag="a">-->
<!--                <span>联系我们</span>-->
<!--              </router-link>-->
<!--              <router-link class="bt3-brand" to="/recruit" tag="a">-->
<!--                <span>人才招聘</span>-->
<!--              </router-link>-->

<!--            </div>-->

          </div>
          <div class="index-bottom-bottom" >
            <div>Copyright 醉面（中国）控股有限公司 2020  沪ICP备15027919号</div>
          </div>
        </div>
  </div>
</template>

<script>
import {getCompanyInfo} from '@/request/api'
import './assets/css/index-banner.scss'
import './assets/css/index-bottom.scss'
import './assets/css/common.scss'

export default {
  data() {
    return {
      index: 1,
      newsIndex:1,
      title:'企业新闻',
      titleEn:'CORPORATE NEWS',
      showImg:true,
    }
  },
  created() {
    // this.getCompanyInfo();
  },
  computed:{
    indexBottomTopHeight:function (){
      let w = window.innerWidth/1920*227+10
      return w +'px';
    }
  },
  mounted() {
    window.location.hash = '/'

  },
  destroyed() { //离开这个界面之后，删除，不然会有问题

    // window.removeEventListener('scroll', this.btn_pos)
  },
  methods: {
    choose(index) {
      this.index = index;
    },

    chooseType(index){
      this.index =index;
    },
    chooseTypeNews(index){
      this.newsIndex = index;
      if(index==1){
        this.title = '企业新闻'
        this.titleEn = 'CORPORATE NEWS'
        this.showImg = true
      }else{
        this.title = '精彩视频'
        this.titleEn = 'WONDERFUL VIDEO'
        this.showImg = false
      }
    },
  },


}
</script>


<style lang="scss" scope>

 .nav-sm{
  background-color: #FFFFFF;
  border-radius: 0;
  height: 50px;
  border: 0;
  color: #303030;
}

 .address{
   margin-top: 40px;
 }
 .address-info{
   margin-top: 10px;
 }

 .phone-show{
   display: none;
 }

 @media screen and (max-width: 800px){/* 可视区域小于 600px,  */
   .bt2 {
     font-size:12px!important;
   }
   .index-bottom-bottom{
     font-size:12px!important;
   }
   .address{
     margin-top: 0px;
   }
   .address-info{
     margin-top: 0px;
   }
   .bt2{
     margin-left: 5px;
     width: 90%;
   }
   .bt1{
     margin-left: 5px;
   }
   .bt3{
     display: none;
   }
   .navbar-brand-sm{
     color: #303030;
   }
   .phone-show{
     display: block;
     width: 100%;
     box-sizing: border-box;
   }

  //food

   .c-top-left{
     width: 150px;
   }
   .c-top-right{
     width: 150px;
   }
   .content-top{
    margin-bottom: 10px!important;
   }
   .food-bg{
    height: 500px!important;
     padding: 0px 0px!important;
   }
   .food-view-left{
     width: 20%!important;
     margin-top: 30px;
     margin-left: 10px;
   }
   .food-view-right{
     width: 70%!important;
     margin-left: 10px !important;
   }
   .content-bottom{
     height: 300px!important;
   }
   .food_type{
     font-size: 12px!important;
     width: 60px!important;
     height: 30px!important;
     line-height: 30px!important;
     margin-bottom: 30px!important;
   }
   .food-pre{
     width: 30%!important;
     font-size: 12px!important;
     margin-right: 5px!important;
   }
   .food-title,.food-desc{
     font-size: 12px!important;
   }

   //contact
   .contact-bg{
    height: 800px!important;
   }
   .contact-bottom{
     height: 700px!important;
     padding-bottom: 0px!important;
   }
   .name {
     height: 20px!important;
     font-size: 20px!important;
     line-height: 20px!important;
     margin-top: 50px!important;
   }
   .msg-img-list {
     height: 500px!important;
     margin-top: 40px!important;
     padding: 0px 10px!important;
     flex-flow:  column nowrap!important;
     justify-content: space-between!important;
     align-items: flex-start!important;
   }
   .img-map-div {
     padding: 0px 16px!important;
     margin-bottom: 50px!important;
   }
   .msg-img{
     width: 40px!important;
     height: 40px!important;
   }
   .msg-text{
     font-size: 12px!important;
     height: 20px!important;
     margin-top: 5px!important;
     text-align: left!important;
   }

   //recruit
   .recruit-list {
     margin-top: 30px!important;
     width: 100%!important;

     flex-flow: column nowrap!important;
     justify-content: left!important;
     align-items: center!important;
     margin-bottom: 10px!important;
   }
   .info{
     margin-bottom: 10px!important;
     margin-right: 0px!important;
     width: 100%!important;

   }

   //news
   .news-type{
     width: 200px!important;
    height: 30px!important;
     line-height: 30px!important;
     margin-top: -12px!important;
   }
   .type-img, .type-video{
     width: 100px!important;
     font-size: 12px!important;
   }
   .img-list{
     width: 100%!important;
   }

   .video-list {
     width: 100%!important;

     flex-flow: column nowrap!important;
     justify-content: space-between!important;
     align-content: flex-start!important;
   }
 }
</style>