hfysite/components/showingStand.vue

<template>
  <div class="content">
    <div class="conBox big-title">
      <span>
        {{lang===langType.cn?"关于我们":getAbbrText("关于我们")}}
      </span>
      <div class="hr"></div>
    </div>
    <div class="conBox showing">
      <a
        v-for="(item,i) in chunkItems"
        :class="`chunk chunk${(i+1)}`"
         :key="item.id"
      >
<!--         实时管理(物联网) -->
        <img class="chunkBg" :src="item.img" alt="imgNotFound">
        <p class="chunkText">
          <span class="title">{{lang===langType.cn?item.title:getAbbrText(item.title)}}</span>
          <span class="subTitle">{{lang===langType.cn?item.subTitle:getAbbrText(item.subTitle)}}</span>
          <span class="chunkMore">
          {{lang===langType.cn?"了解更多":getAbbrText("了解更多")}}
        </span>
        </p>

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

<script>

import langMap from "~/map/langMap";

export default {
  name: "showingStand",
  props: {
    lang:{
      default: langMap.lang.cn
    },
  },
  data(){
    return {
      langType: langMap.lang,
      // chunk 1-7
      chunkItems:[
        {
          id: 'iotManger',
          img: 'image/showing/szman.jpg',
          href: 'https://gpscore.net/',
          title: "管理平台",
          subTitle: "一站式管理,专业高效"
        },
        {
          id: 'ePower',
          img: 'image/showing/szman.jpg',
          href: 'https://gpscore.net/',
          title: "智慧能源",
          subTitle: "1+3综合数字能源管理平台"
        },
        {
          id: 'aiCamera',
          img: 'image/showing/ai_h.jpg',
          href: 'https://gpscore.net/',
          title: "ai视觉",
          subTitle: "摄像头+ai算法,各种算法,各种场景"
        },
        {
          id: 'iot',
          img: 'image/showing/iot.jpg',
          href: 'https://gpscore.net/',
          title: "合方圆物联网解决方案",
          subTitle: "积极开阔物联网在行业,医疗,家居等大众市场上的应用"
        },
        {
          id: 'gps',
          img: 'image/showing/gps.jpg',
          href: 'https://gpscore.net/',
          title: "北斗导航",
          subTitle: "合方圆关于GPS与北斗功能区别详细说明"
        },
        {
          id: 'etc',
          img: 'image/showing/etc.jpg',
          href: 'https://gpscore.net/',
          title: "智慧停车场",
          subTitle: "ai视觉落地成套方案"
        },
        {
          id: 'aiCamera',
          img: 'image/showing/lowCam.jpg',
          href: 'https://gpscore.net/',
          title: "低功耗摄像头",
          subTitle: "超低功耗,超长工作时长"
        }
      ]
    }
  },
  methods: {
    getLangText(str) {
      return langMap.getText(this.lang, str);
    },
    getAbbrText(str) {
      return langMap.getAbbrText(this.lang, str);
    },
  }
}
</script>

<style scoped>


.showing{
  display: grid;
  grid-template-columns: repeat(3, 425px);
  grid-template-rows: repeat(3, 350px);
  grid-template-areas:
    'a b c'
    'd d c'
    'e f g';
  grid-gap: 20px;
}
.showing .chunk {
  box-shadow: 1px 1px 3px black;
  /*box-sizing: border-box;*/
  /*padding:5px;*/
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.showing .chunk:hover{
  box-shadow: 1px 1px 3px deepskyblue;
}

.showing .chunk .chunkBg{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all .5s;
}
.showing .chunk:hover .chunkBg{
  left: -20px;
  top: -20px;
  max-width: calc(100% + 40px);
  width: calc(100% + 40px);
  height: calc(100% + 40px);
}
.showing .chunk .chunkText{
  display: block;
  position: absolute;
  width: 100%;
  height: 150px;
  bottom: -50px;
  /*background: #000;*/
  color: white;
  transition: all .5s;
  padding: 0 15px;
  background-image: linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,0.5) 75% );
}
.showing .chunk:hover .chunkText{
  bottom: 0;
  background-image: linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,0.66) 66% 15% 80% );
}
.showing .chunk .chunkText .title{
  height: 40px;
  font-size: 1.5em;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
}
.showing .chunk .chunkText .subTitle{
  padding: 5px 0;
  min-height: 35px;
  max-height: 80px;
  font-size: 1.2em;
}
.showing .chunk .chunkText .chunkMore{
  margin-top: 20px;
  height: 30px;
  font-size: 0.9em;
  color: #ff6e3f;
}
.showing .chunk .chunkText .chunkMore:hover{
  color: orangered;
}

.showing .chunk .chunkText > *{
  display: block;
}
.showing .chunk1 {
  grid-area: a;
}
.showing .chunk2{
  grid-area: b;
}
.showing .chunk3{
  grid-area: c;
}
.showing .chunk4{
  grid-area: d;
}
.showing .chunk5{
  grid-area: e;
}
.showing .chunk6{
  grid-area: f;
}
.showing .chunk7{
  grid-area: g;
}
</style>