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.
89 lines
1.8 KiB
89 lines
1.8 KiB
<template>
|
|
<view class="flex card" @click="jumpToDetail(data.id)">
|
|
<view class="flex main" style="opacity: 0;">
|
|
<view class="left">
|
|
<thesisInfoView :data="data"></thesisInfoView>
|
|
</view>
|
|
<view class="right">
|
|
<image class="img" :src="data.paperImage" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
<view class="bg">
|
|
<image class="img" src="@/static/image/card-bg-icon.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="flex main" style="position: absolute; left: 0; top: 0;">
|
|
<view class="left">
|
|
<thesisInfoView :data="data"></thesisInfoView>
|
|
</view>
|
|
<view class="right">
|
|
<image class="img" :src="data.paperImage" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import thesisInfoView from './thesisInfoView.vue';
|
|
|
|
export default {
|
|
components: {
|
|
thesisInfoView,
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
jumpToDetail(thesisId) {
|
|
this.$emit('jumpToDetail')
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.card {
|
|
position: relative;
|
|
background: linear-gradient(to right, rgba($color: #C8C3FD, $alpha: 0.22), #FFFFFF);
|
|
|
|
.bg {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 4rpx;
|
|
font-size: 0;
|
|
|
|
.img {
|
|
width: 206rpx;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.main {
|
|
// align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.left {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.right {
|
|
padding: 16rpx 18rpx 14rpx 0;
|
|
box-sizing: border-box;
|
|
|
|
.img {
|
|
// $w: 225rpx;
|
|
// width: 225rpx;
|
|
// height: calc(#{$w} * 1184 / 750);
|
|
width: 184rpx;
|
|
height: 290rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|