104 lines
2.6 KiB
Vue
104 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<view class="flashItemContainer">
|
||
|
|
<view class="flashItemHeader" @click="handleClick">
|
||
|
|
<text class="flashItemTitle">
|
||
|
|
<!-- <view class="isVip"></view> -->
|
||
|
|
{{ props.data.item.title }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
<view class="flashItemFooter">
|
||
|
|
<view class="unlock" v-if="props.data.item.needpay && !props.noPayShow" @click="showPay">立即解锁</view>
|
||
|
|
<view class="flashItemData">
|
||
|
|
<view class="dataItem">{{ props.data.readNums || 0 }}阅读</view>
|
||
|
|
<view class="dataItem">{{ props.data.likeNums || 0 }}点赞</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
let props = defineProps(["data", "noPayShow"]);
|
||
|
|
// console.log(props.data);
|
||
|
|
const emit = defineEmits(["showPay", "handleClick"]);
|
||
|
|
|
||
|
|
function showPay() {
|
||
|
|
emit("showPay", props.data.item);
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleClick() {
|
||
|
|
emit("handleClick", props.data.item);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.flashItemContainer {
|
||
|
|
width: 500rpx;
|
||
|
|
height: 220rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 21rpx 30rpx;
|
||
|
|
border: 1px solid rgba(51, 51, 51, 0.1);
|
||
|
|
border-radius: 8rpx;
|
||
|
|
margin-right: 24rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
align-content: space-between;
|
||
|
|
box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1);
|
||
|
|
background-color: #fff;
|
||
|
|
word-break: break-all;
|
||
|
|
.flashItemHeader {
|
||
|
|
// font-size: 28rpx;
|
||
|
|
font-size: var(--h2-font-size);
|
||
|
|
|
||
|
|
.flashItemTitle {
|
||
|
|
// font-weight: bold;
|
||
|
|
line-height: 1.3rem;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: normal;
|
||
|
|
font-family: "SourceHanSansCN-Medium";
|
||
|
|
.isVip {
|
||
|
|
display: inline-block;
|
||
|
|
width: 50rpx;
|
||
|
|
height: 29rpx;
|
||
|
|
background-image: url(@/assets/images/icon_vip.png);
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.flashItemFooter {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
font-family: "SourceHanSansCN-Regular";
|
||
|
|
.unlock {
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 8rpx 21rpx;
|
||
|
|
border: 2rpx solid #e7303f;
|
||
|
|
// font-size: 24rpx;
|
||
|
|
font-size: var(--h4-font-size);
|
||
|
|
color: #e7303f;
|
||
|
|
border-radius: 999rpx;
|
||
|
|
}
|
||
|
|
.flashItemData {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.dataItem {
|
||
|
|
// font-size: 20rpx;
|
||
|
|
font-size: var(--h6-font-size);
|
||
|
|
color: #b9b9b9;
|
||
|
|
margin-right: 21rpx;
|
||
|
|
&:nth-child(3) {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|