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 imgBox chunk${(i+1)}`"
         :key="item.id"
        :href="item.href"
      >
<!--         实时管理(物联网) -->
        <img :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";
import {showingStandData} from "@/map/showingData";

export default {
  name: "showingStand",
  props: {
    lang:{
      default: langMap.lang.cn
    },
  },
  data(){
    return {
      langType: langMap.lang,
      // chunk 1-7
      chunkItems:showingStandData
    }
  },
  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:hover > img{
  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>