You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
2.8 KiB
126 lines
2.8 KiB
<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>
|