hfysite/components/showingStand.vue

<template>
  <div class="w-screen pad:w-full">
    <big-title>{{lang===langType.cn?"关于我们":getAbbrText("关于我们")}}</big-title>
    <div class="container mx-auto 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";
import BigTitle from "~/components/public/bigTitle.vue";

export default {
  name: "showingStand",
  components: {BigTitle},
  props: {
    lang:{
      default: langMap.lang.cn
    },
  },
  data(){
    return {
      langType: langMap.lang,
      // chunk 1-7
      chunkItems:showingStandData,
      baseWidth: 500,
      baseHeight: 350,
    }
  },
  directives: {
    // 为元素设定比例
    ratio: {
      bind: function (el, binding) {
        // 如果没有传入比例值，则默认为1
        let ratio = binding.value || 1;
        let width = el.offsetWidth;
        let finalHeight = width * ratio;
        // 防止高度过低导致影响美观
        if (width < 1000) {
          finalHeight+= 50;
        }
        el.style.height = finalHeight + 'px'
      }
    }
  },
  methods: {
    getLangText(str) {
      return langMap.getText(this.lang, str);
    },
    getAbbrText(str) {
      return langMap.getAbbrText(this.lang, str);
    },
  }
}
</script>

<style scoped>

.showing{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.showing .chunk {
  box-shadow: 1px 1px 3px black;
  /*box-sizing: border-box;*/
  /*padding:5px;*/
  position: relative;
  overflow: hidden;
  cursor: pointer;
  width: 96%;
  aspect-ratio:500/350;
  margin-bottom: 10px;
}



.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;
  aspect-ratio:500/810;
}
.showing .chunk4{
  grid-area: d;
  aspect-ratio:870/400;
}
.showing .chunk5{
  grid-area: e;
}
.showing .chunk6{
  grid-area: f;
}
.showing .chunk7{
  grid-area: g;
}
@media screen and (min-width: 1024px) {
  /* 其他针对移动设备的样式 */
  .showing{
    display: grid;
    grid-template-columns: repeat(3, 500px);
    grid-template-rows: repeat(3, 410px);
    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;
    aspect-ratio:500/410;
    margin-bottom: 0;
    width: 100%;
  }

  .showing .chunk:hover{
    box-shadow: 1px 1px 3px deepskyblue;
  }
  .showing .chunk3{
    grid-area: c;
    aspect-ratio:500/840;
  }
  .showing .chunk4{
    grid-area: d;
    aspect-ratio:870/350;
  }
}

</style>