feat(zm)初始化

src/assets/css/news.scss

@@ -6,14 +6,141 @@
 
 .news-bg{
   width: 100%;
-  height: 1450px;
+  height: 1900px;
   background-color: #ffffff;
-  padding: 0px 160px;
+  //padding: 0px 360px;
   box-sizing: border-box;
 }
 .news-bottom{
   width: 100%;
-  margin-top: 130px;
+
+}
+.news-type{
+  width: 880px;
+  height: 64px;
+  line-height: 64px;
+  background: #ffffff;
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.10);
+  margin-top: -32px;
+}
+.type-img,.type-video{
+  font-size: 18px;
+  font-weight: 500;
+  color: #333333;
+  text-align: center;
+  width: 440px;
+  cursor: pointer;
+}
+.choose-type{
+  background: #dd0318!important;
+  color: #ffffff!important;
+}
+
+.title{
+  width: 100px;
+  height: 38px;
+  font-size: 18px;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 38px;
+  margin-top: 60px;
+}
+.title-red{
+  width: 32px;
+  height: 4px;
+  background: #dd0318;
+  margin-top: 10px;
 }
+.titleEn{
+  width: 270px;
+  height: 18px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #cfcfcf;
+  line-height: 18px;
+  margin-top: 10px;
+  text-align: center;
+}
+
 
+.img-list{
+  width: 1200px;
+  height: 1240px;
+  overflow-y: scroll;
+}
+.img-list::-webkit-scrollbar {
+  display: none;
+}
+.img-info{
+  margin-top: 30px;
+ }
+.img-info-left{
+  width: 400px;
+  height: 280px;
+}
+.img-info-right{
+  width: 728px;
+  margin-left: 30px;
+  height: 280px;
+}
+.img-info-right-top{
+  font-size: 20px;
+  font-weight: 500;
+  text-align: LEFT;
+  color: #222222;
+  line-height: 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-top: 40px;
+}
+.img-info-right-mid{
+
+  font-size: 16px;
+  font-weight: 500;
+  text-align: LEFT;
+  color: #666666;
+  margin-top: 26px;
+  height: 100px;
+}
+.img-info-right-bottom{
+  font-size: 16px;
+  font-weight: 500;
+  text-align: LEFT;
+  color: #999999;
+  margin-top: 40px;
+
+}
+
+
+
+.video-list{
+  width: 1260px;
+  height: 1000px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-content: flex-start;
+
+}
+.video-info{
+  width: 400px;
+  height: 400px;
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.10);
+  margin-top: 30px;
+  border-radius: 10px;
+}
+.video-info-top{
+  width: 400px;
+  height: 280px;
+}
+.video-info-text{
+  width: 400px;
+  height: 120px;
+  box-sizing: border-box;
+  padding-left: 20px;
+  padding-top: 30px;
+  padding-right: 60px;
+}
 

src/views/food.vue

@@ -12,9 +12,9 @@
 
             <div class="flex-row content-bottom">
               <div class="flex-column" style="width: 230px">
-                <div class="food_type choose_food_type">三大招牌</div>
-                <div class="food_type">风味小食</div>
-                <div class="food_type">拌饭类</div>
+                <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" style="margin-left: 100px;justify-content: space-between">
                   <div class="flex-column food-pre" style="margin-right: 80px">
@@ -45,7 +45,9 @@ import '../assets/css/food.scss'
 
 export default {
   data() {
-    return {}
+    return {
+      index:1
+    }
   },
   created() {
 
@@ -55,7 +57,11 @@ export default {
 
 
   },
-  methods: {},
+  methods: {
+    chooseType(index){
+      this.index =index;
+    }
+  },
   destroyed() {
 
   },

src/views/news.vue

@@ -5,9 +5,99 @@
 
       <div class="news-bg">
         <img src="../assets/image/img/news.png" alt="" style="width: 100%">
-        <div class="news-bottom" style="align-items: center">
+        <div class="news-bottom flex-column" style="align-items: center">
+
+          <div class="news-type flex-row">
+                  <div class="type-img" :class="{'choose-type':index==1}" @click="chooseType(1)">企业新闻</div>
+                  <div class="type-video" :class="{'choose-type':index==2}" @click="chooseType(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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../assets/image/img/desc_2.png" alt="" class="video-info-top">
+              <div class="video-info-text">
+                连续三年数十万人排队吃面，味千52周年生日季引爆全国商圈
+              </div>
+            </div>
 
-          <div>
 
           </div>
 
@@ -24,7 +114,12 @@ import '../assets/css/news.scss'
 
 export default {
   data() {
-    return {}
+    return {
+      index:1,
+      title:'企业新闻',
+      titleEn:'CORPORATE NEWS',
+      showImg:true
+    }
   },
   created() {
 
@@ -34,7 +129,20 @@ export default {
 
 
   },
-  methods: {},
+  methods: {
+    chooseType(index){
+      this.index = index;
+      if(index==1){
+        this.title = '企业新闻'
+        this.titleEn = 'CORPORATE NEWS'
+        this.showImg = true
+      }else{
+        this.title = '精彩视频'
+        this.titleEn = 'WONDERFUL VIDEO'
+        this.showImg = false
+      }
+    }
+  },
   destroyed() {
 
   },