hfysite/components/solutionList.vue

<template>
  <div class="content productList">
    <div class="conBox solutionCenter">
      <a class="solution"
         v-for="(item,i) in solutionList"
         :key="'pro-'+i"
         @click="clickSolutionHandle(item)"
      >
          <span class="imgBox">
             <img :src="'/public/'+item.image" :alt="item.name" class="img">

          </span>
        <span class="more">
              {{lang===langType.cn?"了解更多":getAbbrText("了解更多")}}
            </span>
        <p class="solution-info">
            <span class="title">
              {{lang===langType.cn?item.name:getAbbrText(item.name)}}
            </span>
          <span class="description" v-if="item.remark">
          {{item.remark}}
        </span>
        </p>
      </a>
    </div>
  </div>
</template>

<script>
import langMap from "~/map/langMap";

export default {
  name: "solutionList",
  props: {
    lang:{
      default: langMap.lang.cn
    },
    solutionList: {
      default(){
        return []
      }
    },
    parentType: {
      default: 'solution'
    }
  },
  data(){
    return {
      langType: langMap.lang,
    }
  },
  methods: {
    getLangText(str) {
      return langMap.getText(this.lang, str);
    },
    getAbbrText(str) {
      return langMap.getAbbrText(this.lang, str);
    },
    clickSolutionHandle(solution){
      console.log(solution);
      let url = ""
      if(solution.sourceType === "1"){
        url = solution.source;
      }else{
        url = `/${this.parentType}/info/${solution.type_key}?id=${solution.id}`
      }
      window.location.href = url;
    }
  }
}
</script>

<style scoped>
/*@import "~/assets/productList.css";*/
.solutionCenter{
  margin: 10px auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.solution{
  display: flex;
  height: 360px;
  margin-bottom: 30px;
  border-radius: 3px;
  position: relative;
  box-shadow: 1px 1px 5px black;
  justify-content: space-between;
  cursor: pointer;
  padding: 5px;
  box-sizing: content-box;
}
.solution .imgBox{
  display: flex;
  /*position: relative;*/
  width: 40%;
  height: 360px;
  overflow: hidden;
  justify-content: center;
  flex-shrink: 1;
}

.solution .imgBox img{
  display: block;
  max-width: 100%;
  width: auto;
  height: 100%;
  position: relative;
}

.solution .more{
  background-color: #912b02;
  padding: 0 30px;
  border-radius: 4px;
  display: block;
  position: absolute;
  right: 20px;
  bottom: 20px;
  opacity: 0;
  transition:all 0.5s;
  color: white;
}
.solution:hover .more{
  opacity: 1;
  background-color: orangered;
}
.solution .more:hover{
  box-shadow: 1px 1px 5px white;
  padding: 0 25px;
}
.solution .solution-info{
  display: block;
  width: calc(60% - 15px);
  padding: 5px;
  margin-left: 15px;
  box-sizing: border-box;
}
.solution .solution-info .title{
  font-size: 2rem;
  display: block;
}

.solution .solution-info .escription{
  display: block;
  text-indent: 2em;
}
</style>