feat(zm)手机 联系页面

src/App.vue

@@ -151,6 +151,109 @@
         </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">
@@ -158,19 +261,19 @@
           <div class="name">北京醉面餐饮集团有限公司</div>
 
           <div class="flex-row msg-img-list">
-            <div class="flex-column" >
+            <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" >
+            <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"  >
+            <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"  >
+            <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>
@@ -185,6 +288,91 @@
         </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>
 
 
@@ -234,7 +422,11 @@ import './assets/css/common.scss'
 export default {
   data() {
     return {
-      index: 1
+      index: 1,
+      newsIndex:1,
+      title:'企业新闻',
+      titleEn:'CORPORATE NEWS',
+      showImg:true,
     }
   },
   created() {
@@ -261,7 +453,19 @@ export default {
 
     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
+      }
+    },
   },
 
 
@@ -370,7 +574,7 @@ export default {
     height: 800px!important;
    }
    .contact-bottom{
-     height: 600px!important;
+     height: 700px!important;
      padding-bottom: 0px!important;
    }
    .name {
@@ -380,7 +584,7 @@ export default {
      margin-top: 50px!important;
    }
    .msg-img-list {
-     height: 300px!important;
+     height: 500px!important;
      margin-top: 40px!important;
      padding: 0px 10px!important;
      flex-flow:  column nowrap!important;
@@ -401,5 +605,45 @@ export default {
      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>