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.
152 lines
3.1 KiB
152 lines
3.1 KiB
<template>
|
|
<div class="dian_container">
|
|
<div class="wrap">
|
|
<img :src="getImgSrc()" alt="" :class="getImgClass()" />
|
|
</div>
|
|
<div class="btn">{{ title }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import A1 from '@/assets/img/cicruit/1.png'
|
|
import A2 from '@/assets/img/cicruit/2.png'
|
|
import A3 from '@/assets/img/cicruit/3.png'
|
|
import A4 from '@/assets/img/cicruit/4.png'
|
|
import A5 from '@/assets/img/cicruit/5.png'
|
|
import A6 from '@/assets/img/cicruit/6.png'
|
|
import A7 from '@/assets/img/cicruit/7.png'
|
|
import A8 from '@/assets/img/cicruit/8.png'
|
|
import A9 from '@/assets/img/cicruit/9.png'
|
|
import A10 from '@/assets/img/cicruit/10.png'
|
|
import A11 from '@/assets/img/cicruit/11.png'
|
|
import A12 from '@/assets/img/cicruit/12.png'
|
|
import A13 from '@/assets/img/cicruit/13.png'
|
|
import A14 from '@/assets/img/cicruit/14.png'
|
|
import A15 from '@/assets/img/cicruit/15.png'
|
|
const props = defineProps({
|
|
title: String,
|
|
i: String,
|
|
})
|
|
const getImgClass = () => {
|
|
if (['1', '2', '4', '5', '6', '7', '8', '9', '10'].includes(props.i)) {
|
|
return 'img1'
|
|
}
|
|
return 'img2'
|
|
}
|
|
const getImgSrc = () => {
|
|
if (props.i == '1') {
|
|
return A1
|
|
}
|
|
if (props.i == '2') {
|
|
return A2
|
|
}
|
|
if (props.i == '3') {
|
|
return A3
|
|
}
|
|
if (props.i == '4') {
|
|
return A4
|
|
}
|
|
if (props.i == '5') {
|
|
return A5
|
|
}
|
|
if (props.i == '6') {
|
|
return A6
|
|
}
|
|
if (props.i == '7') {
|
|
return A7
|
|
}
|
|
if (props.i == '8') {
|
|
return A8
|
|
}
|
|
if (props.i == '9') {
|
|
return A9
|
|
}
|
|
if (props.i == '10') {
|
|
return A10
|
|
}
|
|
if (props.i == '11') {
|
|
return A11
|
|
}
|
|
if (props.i == '12') {
|
|
return A12
|
|
}
|
|
if (props.i == '13') {
|
|
return A13
|
|
}
|
|
if (props.i == '14') {
|
|
return A14
|
|
}
|
|
if (props.i == '15') {
|
|
return A15
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dian_container {
|
|
width: 275px;
|
|
overflow: hidden;
|
|
height: 239px;
|
|
background: #ffffff;
|
|
box-shadow: 0px 7px 24px 0px rgba(7, 7, 72, 0.05);
|
|
// border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
padding: 26px 0 0 0;
|
|
box-sizing: border-box;
|
|
transition-property: all;
|
|
transition-duration: 0.4s;
|
|
animation-fill-mode: forwards;
|
|
.wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.img1 {
|
|
transition-property: all;
|
|
transition-duration: 0.7s;
|
|
width: 240px;
|
|
height: auto;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
.img2 {
|
|
transition-property: all;
|
|
transition-duration: 0.7s;
|
|
height: 90%;
|
|
width: auto;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
transition-property: all;
|
|
transition-duration: 0.7s;
|
|
animation-fill-mode: forwards;
|
|
width: 100%;
|
|
min-height: 47px;
|
|
background: #283fe7;
|
|
opacity: 0.5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 15px;
|
|
font-family: 'SourceHanSans';
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.dian_container:hover {
|
|
border-radius: 10px;
|
|
.wrap {
|
|
.img {
|
|
transform: scale(1.06);
|
|
}
|
|
}
|
|
.btn {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|