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.
97 lines
2.0 KiB
97 lines
2.0 KiB
<template>
|
|
<view class="card">
|
|
<view class="card-header">
|
|
<view class="title">{{ data.title }}</view>
|
|
<view class="desc">{{ data.createTime }}</view>
|
|
</view>
|
|
<view class="card-content">
|
|
{{ data.content }}
|
|
</view>
|
|
<view class="card-footer">
|
|
<button class="btn">了解详情</button>
|
|
</view>
|
|
<view v-if="data.new" class="dot"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
jumpToDetail() {
|
|
this.$utils.navigateTo(`/pages_order/message/index?id=${this.data.id}`)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.card {
|
|
position: relative;
|
|
padding: 32rpx 32rpx 0 32rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
background-image: linear-gradient(164deg,#DAF3FF 88rpx, #FBFEFF 176rpx, #FBFEFF);
|
|
border: 2rpx solid #FFFFFF;
|
|
|
|
&-header {
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #181818;
|
|
}
|
|
|
|
.desc {
|
|
margin-top: 4rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
margin-top: 16rpx;
|
|
font-size: 26rpx;
|
|
line-height: 1.7;
|
|
color: #666666;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display:-webkit-box; //作为弹性伸缩盒子模型显示。
|
|
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
|
-webkit-line-clamp:4; //显示的行
|
|
}
|
|
|
|
&-footer {
|
|
margin-top: 16rpx;
|
|
border-top: 2rpx dashed #DADADA;
|
|
|
|
.btn {
|
|
width: 100%;
|
|
padding: 16rpx 32rpx;
|
|
font-family: PingFang SC;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
color: #00A9FF;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.dot {
|
|
position: absolute;
|
|
top: 12rpx;
|
|
right: 12rpx;
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
background: #F53F3F;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
</style>
|