hjyd/src/views/Index/components/ReadWidely/Card/index.vue

<template>
  <div :class="getBg()">
    <div class="dialog_text">
      {{ title }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: String,
  i: String,
})

const getBg = () => {
  if (props.i == '1') {
    return 'read_card_container bg1'
  }
  if (props.i == '2') {
    return 'read_card_container bg2'
  }
  if (props.i == '3') {
    return 'read_card_container bg3'
  }
  if (props.i == '4') {
    return 'read_card_container bg4'
  }
  if (props.i == '5') {
    return 'read_card_container bg5'
  }
  if (props.i == '6') {
    return 'read_card_container bg6'
  }
  if (props.i == '7') {
    return 'read_card_container bg7'
  }
  if (props.i == '8') {
    return 'read_card_container bg8'
  }
  if (props.i == '9') {
    return 'read_card_container bg9'
  }
  if (props.i == '10') {
    return 'read_card_container bg10'
  }
  if (props.i == '11') {
    return 'read_card_container bg11'
  }
  if (props.i == '12') {
    return 'read_card_container bg12'
  }
}
</script>

<style lang="scss" scoped>
.read_card_container {
  width: 350px;
  height: 205px;
  position: relative;
  .dialog_text {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.68);
    font-size: 24px;
    font-family: 'SourceHanSans';
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.bg1 {
  background: url(../../../../../assets/img/readwidely/01.png) no-repeat;
  background-size: 100% 100%;
}
.bg2 {
  background: url(../../../../../assets/img/readwidely/02.png) no-repeat;
  background-size: 100% 100%;
}
.bg3 {
  background: url(../../../../../assets/img/readwidely/03.png) no-repeat;
  background-size: 100% 100%;
}
.bg4 {
  background: url(../../../../../assets/img/readwidely/04.png) no-repeat;
  background-size: 100% 100%;
}
.bg5 {
  background: url(../../../../../assets/img/readwidely/05.png) no-repeat;
  background-size: 100% 100%;
}
.bg6 {
  background: url(../../../../../assets/img/readwidely/06.png) no-repeat;
  background-size: 100% 100%;
}
.bg7 {
  background: url(../../../../../assets/img/readwidely/07.png) no-repeat;
  background-size: 100% 100%;
}
.bg8 {
  background: url(../../../../../assets/img/readwidely/08.png) no-repeat;
  background-size: 100% 100%;
}
.bg9 {
  background: url(../../../../../assets/img/readwidely/09.png) no-repeat;
  background-size: 100% 100%;
}
.bg10 {
  background: url(../../../../../assets/img/readwidely/10.png) no-repeat;
  background-size: 100% 100%;
}
.bg11 {
  background: url(../../../../../assets/img/readwidely/11.png) no-repeat;
  background-size: 100% 100%;
}
.bg12 {
  background: url(../../../../../assets/img/readwidely/12.png) no-repeat;
  background-size: 100% 100%;
}
</style>