/**
* @Author: 858834013@qq.com
* @Name: item
* @Date: 2022-02-28
* @Desc:
*/
<template>
<div @click="goApply" class="homeListItem cur">
<div class="homeListItemchild">
<div class="homeListItemImg">
<img :src="item.imgPath" alt="">
</div>
<h3>{{ item.title }}</h3>
<p v-html="item.transactNotice"></p>
<div class="immediateUse">
<span>立即使用</span>
<img src="../../assets/icon_right.png" alt="">
</div>
</div>
</div>
</template>
<script>
export default {
name: "item",
components: {},
props: {
item: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
status: ''
}
},
watch: {},
mounted() {
},
methods: {
goApply() {
this.$router.push({path: '/apply', query: {businessId: this.item.id}});
}
}
}
</script>
<style lang="scss" scoped>
.homeListItem {
width: 282px;
height: 281px;
border-radius: 12px;
position: relative;
.homeListItemchild {
position: absolute;
background: #FFFFFF;
box-shadow: 0px 1px 58px 0px rgba(121, 129, 140, 0.05);
width: 282px;
height: 281px;
border-radius: 12px;
top: 0;
left: 0;
-webkit-transition: .2s;
transition: .2s;
}
h3 {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
text-align: center;
}
p {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
text-align: center;
color: #959595;
margin-top: 16px;
}
.immediateUse {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
position: absolute;
bottom: 32px;
width: 100%;
span {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #3379EF;
}
img {
width: 15px;
margin-left: 6px;
}
}
}
.homeListItem:hover {
//margin-top: -10px;
.homeListItemchild {
top: 10px;
}
}
.homeListItemImg {
height: 87px;
width: 100%;
display: flex;
padding-top: 37px;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
img {
height: 87px;
}
}
</style>