<template>
  <div style="overflow:hidden">
    <div id="news">


      <div class="news-bg">
        <img 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':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>

          <el-pagination
              class="mb40 mt100"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000">
          </el-pagination>

        </div>
      </div>


    </div>
  </div>
</template>

<script>
import '../assets/css/news.scss'

export default {
  data() {
    return {
      index:1,
      title:'企业新闻',
      titleEn:'CORPORATE NEWS',
      showImg:true,
      currentPage3:1
    }
  },
  created() {

  },

  mounted: function () {


  },
  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
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  destroyed() {

  },
  components: {
    // introduce,
    // shopthumb,
    // productthumb,
    // "el-card": Card
  }
}


</script>

<style lang="scss">
</style>
