141 lines
3.4 KiB
Vue
141 lines
3.4 KiB
Vue
<template>
|
||
<view class="m_system">
|
||
<view class="m_allview" hover-class="hover_allview">
|
||
<view class="m_time"> <text class="time_txt"> 10-19 12:34 </text> </view>
|
||
<view class="m_content" hover-class="hover_content" @click="toSysDetailPages">
|
||
<view class="con_up"> 恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆! </view>
|
||
<view class="con_img">
|
||
<image src="@/static/images/app/serve/repair_refund.png" mode=""></image>
|
||
</view>
|
||
<view class="con_txt">
|
||
怪物树种精灵秘宝(绽放的玫瑰，交女巫巨人到110)怪物龙人精英秘宝(龙族简史，交智慧巨人110)怪物树种精灵秘宝(绽放的玫瑰，交女巫巨人到110)
|
||
</view>
|
||
<view class="con_xian"></view>
|
||
<view class="con_down">
|
||
<view class="down_l"> 点击查看全文 </view>
|
||
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="m_allview">
|
||
<view class="m_time"> <text class="time_txt"> 10-19 12:34 </text> </view>
|
||
<view class="m_content" hover-class="hover_content" @click="toSysDetailPages">
|
||
<view class="con_up"> 恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆! </view>
|
||
<view class="con_txt">
|
||
怪物树种精灵秘宝(绽放的玫瑰，交女巫巨人到110)怪物龙人精英秘宝(龙族简史，交智慧巨人110)怪物树种精灵秘宝(绽放的玫瑰，交女巫巨人到110)
|
||
</view>
|
||
<view class="con_xian"></view>
|
||
<view class="con_down">
|
||
<view class="down_l"> 点击查看全文 </view>
|
||
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default{
|
||
data(){
|
||
return{
|
||
|
||
}
|
||
},
|
||
methods:{
|
||
toSysDetailPages(){
|
||
uni.navigateTo({
|
||
url:`/pages/serve/message/m_sys_detail`
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.m_content {
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
opacity: 1;
|
||
margin-top: 24rpx;
|
||
padding: 32rpx;
|
||
|
||
.con_up {
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
}
|
||
|
||
.con_img {
|
||
margin-top: 16rpx;
|
||
image {
|
||
height: 334rpx;
|
||
}
|
||
}
|
||
|
||
.con_txt {
|
||
margin-top: 16rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
overflow: hidden; // 超出的文本部分隐藏起来
|
||
text-overflow: ellipsis; // 超出部分使用省略号(…)
|
||
// white-space: nowrap; // 不换行
|
||
display: -webkit-box; // 使用弹性盒子模型，并支持多行文本
|
||
-webkit-box-orient: vertical; // 弹性盒子内部的子元素在垂直方向上排列
|
||
-webkit-line-clamp: 2; // 最多显示两行文本，超出部分使用省略号表示。
|
||
}
|
||
|
||
.con_xian {
|
||
margin-top: 16rpx;
|
||
// height: 0rpx;
|
||
// border: 1rpx solid #EDEDED;
|
||
background:#EDEDED;
|
||
height: 1rpx;
|
||
transform: scaleY(.5);
|
||
}
|
||
|
||
.con_down{
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.down_l {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
}
|
||
}
|
||
}
|
||
|
||
.hover_content {
|
||
background: #f1f1f1;
|
||
}
|
||
|
||
.m_time {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.time_txt {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.m_allview {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.hover_allview {
|
||
background: #E9E9E9;
|
||
}
|
||
|
||
.m_system {
|
||
background: #F5F5F5;
|
||
opacity: 1;
|
||
padding: 24rpx;
|
||
height: 100vh;
|
||
}
|
||
</style> |