hfysite/components/newCenter.vue

<template>
  <div class="newCenter pad:w-full">
    <big-title>{{lang===langType.cn?"新闻中心":getAbbrText("新闻中心")}}</big-title>
    <div class="container mx-auto newView">
      <a
        v-for="(news,i) in newArr"
        :key="news.key"
        :href="`/news/${news.key}/${news.id}`"
        :class="`newChunk chunk${i}`">
        <span class="imgBox" v-if="news.img">
          <img :src="imagePathBabel(news.img)" alt=""/>
        </span>
        <p class="newsContext">
          <span class="newsType">
            <span>{{news.type_name}}</span>
          </span>
          <span class="title">
            {{lang===langType.cn?news.title:news.title_en||news.title}}
          </span>
          <span class="description">
            {{lang===langType.cn?news.remark:news.remark_en||news.remark}}
          </span>
          <span class="time">
            {{news.time}}
          </span>
        </p>
      </a>
    </div>
    <div class="container mx-auto">
      <a class=" show-more" :href="hrefs.news">查看更多</a>
    </div>
  </div>
</template>

<script>
import langMap from "@/map/langMap";
import {hrefs} from "@/map/hrefMap";
import {newsType,getNewsTypeStr} from "@/map/newMap";
import BigTitle from "~/components/public/bigTitle.vue";
import {imagePathBabel} from "@/tools/imagePath";

export default {
  name: "newCenter",
  components: {BigTitle},
  props: {
    lang:{
      default: langMap.lang.cn
    },
  },
  data(){
    return {
      langType: langMap.lang,
      hrefs: hrefs,
      newsType: newsType,

    }
  },
  computed: {
    newArr(){
      let arr = this.$store.getters.platform.news;
      console.log(arr)
      return arr.map((item,i)=>{
         let res = {
           ...item
         }
         if(i === 0){
           res.img = res.image;
         }
        return res
      })
    }
  },
  methods:{
    imagePathBabel,
    getLangText(str) {
      return langMap.getText(this.lang, str);
    },
    getAbbrText(str) {
      return langMap.getAbbrText(this.lang, str);
    },
    getNewsTypeStr(ind){
      return langMap.getAbbrText(
        this.lang,
        getNewsTypeStr(ind)
      );
    }
  }
}
</script>

<style scoped>
.newCenter{
  width: calc(100vw - 20px);
  margin: 0 auto;
}
.newView{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.newView .newChunk{
  box-shadow: 0 0 1px black;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  padding: 15px 35px;
  width: 96%;
}
@media screen and (min-width: 1024px) {
  .newView{
    display: grid;
    grid-template-columns: repeat(3);
    grid-template-rows: repeat(2,270px);
    grid-template-areas:
    'a b c'
    'a d e';
    margin-bottom: 35px;
  }
  .newView .newChunk{
    width: 100%;
  }
}

.newView .newChunk:hover{
  box-shadow: 2px 2px 6px #484444;
}
.newChunk .imgBox{
  width: 100%;
  height: 240px;
  margin-bottom: 10px;
}
.newView .newChunk:hover .imgBox img{
  left: -10px;
  top: -10px;
  max-width: calc(100% + 20px);
  width: calc(100% + 20px);
  height: calc(100% + 20px);
}
.newsContext{
  display: block;
  width: 100%;
  height: 240px;
}
.newsContext .newsType{
  /*margin: 10px 0;*/
  display: flex;
  height: 35px;
  align-items: center;
}
.newsContext .newsType > span{
  color: #ea0000;
  background-color: #eecec5;
  padding: 1px 15px;
  border-radius: 3px;
}
.newsContext .title{
  font-size: 1.3em;
  display: flex;
  height: 55px;
  align-items: center;
  font-weight: bold;

}
.newsContext .description{
  display: block;
  width: 100%;
  height: calc(100% - 120px);
}
.newsContext .time{
  display: flex;
  height: 40px;
}
.show-more{
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 1.4em;
  margin-bottom: 35px;
}
.show-more:hover{
  color: orangered;
}
.newView .chunk0{
  grid-area: a;
  height: 100%;
}
/*.newView .chunk2{*/
/*  grid-area: b;*/
/*}*/
/*.newView .chunk3{*/
/*  grid-area: c;*/
/*}*/
/*.newView .chunk4{*/
/*  grid-area: d;*/
/*}*/
/*.newView .chunk5{*/
/*  grid-area: e;*/
/*}*/
</style>