hfysite/components/newCenter.vue

<template>
  <div class="content">
    <div class="conBox big-title">
      <span>
        {{lang===langType.cn?"新闻中心":getAbbrText("新闻中心")}}
      </span>
      <div class="hr"></div>
    </div>
    <div class="conBox newView">
      <a
        v-for="(news,i) in newArr"
        :key="news.key"
        :href="news.src"
        :class="`newChunk chunk${i}`">
        <span class="imgBox" v-if="news.img">
          <img :src="news.img" alt=""/>
        </span>
        <p class="newsContext">
          <span class="newsType">
            <span>{{getNewsTypeStr(news.type)}}</span>
          </span>
          <span class="title">
            {{lang===langType.cn?news.title:getLangText(news.title)}}
          </span>
          <span class="description">
            {{lang===langType.cn?news.description:getLangText(news.description)}}
          </span>
          <span class="time">
            {{news.time}}
          </span>
        </p>
      </a>
    </div>
    <a class="conBox show-more" :href="hrefs.news">查看更多</a>
  </div>
</template>

<script>
import langMap from "@/map/langMap";
import {hrefs} from "@/map/hrefMap";
import {newsType,getNewsTypeStr} from "@/map/newMap";

export default {
  name: "newCenter",
  props: {
    lang:{
      default: langMap.lang.cn
    },
  },
  data(){
    return {
      langType: langMap.lang,
      hrefs: hrefs,
      newsType: newsType,
      newArr:[
        {
          key: 'one',
          title: "智慧能源解决方案",
          img: 'image/showing/fire_s.jpg',
          type: 2,
          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
          src: '/solution',
          time: '2023-04-02',

        },
        {
          key: 'two',
          title: "解锁家庭光伏电站监控全姿势",
          type: 2,
          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
          src: '/solution',
          time: '2022-01-02'
        },
        {
          key: 'three',
          title: "解锁家庭光伏电站监控全姿势",
          type: 2,
          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
          src: '/solution',
          time: '2022-01-02'
        },
        {
          key: 'four',
          title: "解锁家庭光伏电站监控全姿势",
          type: 2,
          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
          src: '/solution',
          time: '2022-01-02'
        },{
          key: 'five',
          title: "解锁家庭光伏电站监控全姿势",
          type: 2,
          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
          src: '/solution',
          time: '2022-01-02'
        }
      ]
    }
  },
  methods:{
    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>
.newView{
  display: grid;
  grid-template-columns: repeat(3);
  grid-template-rows: repeat(2,260px);
  grid-template-areas:
    'a b c'
    'a d e'
  ;
  margin-bottom: 35px;
}
.newView .newChunk{
  box-shadow: 0 0 1px black;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  padding: 15px 35px;
}
.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;
}
/*.newView .chunk2{*/
/*  grid-area: b;*/
/*}*/
/*.newView .chunk3{*/
/*  grid-area: c;*/
/*}*/
/*.newView .chunk4{*/
/*  grid-area: d;*/
/*}*/
/*.newView .chunk5{*/
/*  grid-area: e;*/
/*}*/
</style>