连云港陪玩陪聊
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.
 
 
 
 
 
 
chunwan/pages/xiaoxi/xitong.vue

78 lines
1.7 KiB

<template>
<view class="xitong">
<view class="item" v-for="i in 5" :key="i" @click="openPage(1)">
<view class="date">2023-01-02</view>
<view class="content">
<view class="title">系统消息系统消息系统消息</view>
<view class="desc">系统消息系统消息系统消息系统消息系统消息系统消息系统消息,系统消息系统消息系统消息系统消息系统消息系统消息系统消息系统消息系统消息系统消息系统消息系统消息,系统消息系统消息系统消息系统消息系统消息</view>
<image mode="widthFix" v-if="i == 5" src="@/static/pic.jpg"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
openPage(id){
uni.navigateTo({
url: "/pages/xiaoxi/detail?id="+id
})
}
}
}
</script>
<style scoped lang="scss">
.xitong{
padding: 0 25rpx 25rpx;
overflow: hidden;
.item{
margin-top: 30rpx;
overflow: hidden;
.date{
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #999999;
}
.content{
background: #FFFFFF;
border-radius: 20rpx;
padding: 30rpx 30rpx;
margin-top: 30rpx;
.title{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-weight: 500;
font-size: 36rpx;
color: #222222;
}
.desc{
margin-top: 20rpx;
font-weight: 500;
font-size: 24rpx;
color: #999999;
line-height: 36rpx;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
}
image{
width: 100%;
margin-top: 30rpx;
border-radius: 10rpx;
}
}
}
}
</style>