4-系统消息
This commit is contained in:
DL
10
pages.json
10
pages.json
@@ -42,6 +42,16 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "消息"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/serve/message/m_system",
|
||||
"style": {
|
||||
"navigationBarTitleText": "系统消息"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/serve/message/m_sys_detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "系统消息系统消息系统消息"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<image class="clear_img" src="@/static/images/app/serve/m_xiaochu.png" mode=""></image>
|
||||
</view> -->
|
||||
<view class="viewBox">
|
||||
<view class="box">
|
||||
<view class="box" @click="toSystemPages">
|
||||
<view class="box_l">
|
||||
<image class="box_l_img" src="@/static/images/app/serve/m_one.png" mode=""></image>
|
||||
<view class="box_l_txt"> 系统消息 </view>
|
||||
@@ -90,11 +90,18 @@
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 清除弹层
|
||||
openClear(){
|
||||
this.showClear=true
|
||||
},
|
||||
sureClear(){
|
||||
this.showClear=false
|
||||
},
|
||||
// 系统消息
|
||||
toSystemPages(){
|
||||
uni.navigateTo({
|
||||
url:`/pages/serve/message/m_system`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
112
pages/serve/message/m_sys_detail.vue
Normal file
112
pages/serve/message/m_sys_detail.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<view class="m_system">
|
||||
<view class="m_time"> <text class="time_txt"> 10-19 12:34 </text> </view>
|
||||
<view class="m_content">
|
||||
<view class="con_up"> 恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆! </view>
|
||||
<view class="con_img">
|
||||
<image src="@/static/images/app/serve/m_sys_con.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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.m_content {
|
||||
width: 702rpx;
|
||||
height: 670rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
opacity: 1;
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
|
||||
.con_up {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.con_img {
|
||||
margin-top: 16rpx;
|
||||
image {
|
||||
height: 334rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.con_txt {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
overflow: hidden; // 超出的文本部分隐藏起来
|
||||
text-overflow: ellipsis; // 超出部分使用省略号(…)
|
||||
display: -webkit-box; // 使用弹性盒子模型，并支持多行文本
|
||||
-webkit-box-orient: vertical; // 弹性盒子内部的子元素在垂直方向上排列
|
||||
-webkit-line-clamp: 2; // 最多显示两行文本，超出部分使用省略号表示。
|
||||
}
|
||||
|
||||
.con_xian {
|
||||
margin-top: 16rpx;
|
||||
height: 0rpx;
|
||||
opacity: 0.3;
|
||||
border: 1rpx solid #CED7E0;
|
||||
}
|
||||
|
||||
.con_down{
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.down_l {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.m_time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.time_txt {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.m_system {
|
||||
background: #F5F5F5;
|
||||
opacity: 1;
|
||||
padding: 16rpx 24rpx;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
117
pages/serve/message/m_system.vue
Normal file
117
pages/serve/message/m_system.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<view class="m_system">
|
||||
<view class="m_time"> <text class="time_txt"> 10-19 12:34 </text> </view>
|
||||
<view class="m_content" @click="toSysDetailPages">
|
||||
<view class="con_up"> 恭喜获得#带着宠物去旅行 #红包!现金实物超多惊喜，速拆! </view>
|
||||
<view class="con_img">
|
||||
<image src="@/static/images/app/serve/m_sys_con.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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
toSysDetailPages(){
|
||||
uni.navigateBack({
|
||||
url:`/pages/serve/message/m_sys_detail`
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.m_content {
|
||||
width: 702rpx;
|
||||
height: 670rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
opacity: 1;
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
|
||||
.con_up {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.con_img {
|
||||
margin-top: 16rpx;
|
||||
image {
|
||||
height: 334rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.con_txt {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
overflow: hidden; // 超出的文本部分隐藏起来
|
||||
text-overflow: ellipsis; // 超出部分使用省略号(…)
|
||||
display: -webkit-box; // 使用弹性盒子模型，并支持多行文本
|
||||
-webkit-box-orient: vertical; // 弹性盒子内部的子元素在垂直方向上排列
|
||||
-webkit-line-clamp: 2; // 最多显示两行文本，超出部分使用省略号表示。
|
||||
}
|
||||
|
||||
.con_xian {
|
||||
margin-top: 16rpx;
|
||||
height: 0rpx;
|
||||
opacity: 0.3;
|
||||
border: 1rpx solid #CED7E0;
|
||||
}
|
||||
|
||||
.con_down{
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.down_l {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.m_time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.time_txt {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.m_system {
|
||||
background: #F5F5F5;
|
||||
opacity: 1;
|
||||
padding: 16rpx 24rpx;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
BIN
static/images/app/serve/m_sys_con.png
Normal file
BIN
static/images/app/serve/m_sys_con.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 325 KiB |
Reference in New Issue
Block a user