hfysite/components/newCenter.vue

<template>
  <div class="w-screen 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.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>
    <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";

export default {
  name: "newCenter",
  components: {BigTitle},
  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: "G8100 4G低功耗LTE无线模块简介",
          type: 2,
          description: "工业级高性能、高通平台，超低功耗，多种无线通信方式，丰富的I/O接口",
          src: '/solution',
          time: '2021-11-30'
        },
        {
          key: 'four',
          title: "ETC停车场的发展前景",
          type: 3,
          description: "1.无需人值守降低人工成本；2.非现金支付，杜绝跑冒滴漏；3.集中式管理，财务一目了然；4.无缝对接各类基于ETC的应用系统；5.兼容全国高速公路，ETC收费系统；6.不停车通行，提升通行效率；",
          src: '/news/info/pa?id=47',
          time: '2022-09-20'
        },{
          key: 'five',
          title: "森林防火4G摄像机视频监控解决方案",
          type: 1,
          description: "采用4G摄像机4G高清网络摄像机或4G高清视频服务器+摄像头组合，将监控点附近的相关视频实时回传至监控中心，林区负责人或监管部门可实时了解林区状态，如有隐患或火灾，可第一时间发现并采取相应措施。\n" ,
          src: '/solution/info/sol?id=49',
          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: 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>