pbl-app/src/views/classObserve/components/stencilledCon.vue

<template>
  <div :class="['stencilledCon',isChoice?'stencilledConActive':'']">
    <div class="top">
      <div class="tit"><img src="../../../assets/images/classObserve/science.svg" alt="" />{{ data.name }}</div>
      <div class="btn">
        <img src="../../../assets/images/classObserve/collect1.svg" alt="" v-if="collectData.findIndex(i=>i.id==data.id)==-1" @click.stop="collect(0)"/>
				<img src="../../../assets/images/classObserve/collect2.svg" alt="" v-else @click.stop="collect(1)"/>
        <div class="btnTxt" @click.stop="PerTel">预览</div>
      </div>
    </div>
    <div class="con">
      {{ data.detail }}
    </div>
    <div class="bom">
      <div>{{ data.use }}人已使用</div>
      <div>{{ tagSubjectList.find(i=>i.value==data.type)?tagSubjectList.find(i=>i.value==data.type).label:'' }}</div>
    </div>
  </div>
</template>

<script>
export default {
	props:{
		data:{
			type:Object,
			default:{},
		},
		tagSubjectList:{
			type:Array,
			default:()=>[]
		},
		collectData:{
			type:Array,
			default:[]
		},
		isChoice:{
			type:Boolean,
			default:false
		}
	},
  data() {
    return {

		}
  },
  methods: {
    PerTel() {
			this.$parent.previewTel(this.data)
      // this.$emit('previewTel')
    },
		collect(type){
			this.$parent.collect(type,this.data)
			// this.$toast("收藏或不收藏")
		},
  }
}
</script>

<style lang="scss" scoped>
.stencilledCon {
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 16px 24px 2px rgba(0, 0, 0, 0.04);
  box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
	transition: .3s;
	border: solid 2px #fff;
}
.stencilledConActive{
	border-color: #3681FC;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  .tit {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    img {
      margin-right: 5px;
    }
  }
  .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btnTxt {
      background-color: rgba(240, 242, 245, 1);
      padding: 7px 15px;
      border-radius: 5px;
      margin-left: 7px;
    }
    img {
      width: 20px;
      height: 20px;
    }
  }
}
.con {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  padding: 10px 0;
}
.bom {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
}
</style>