10 changed files with 205 additions and 4 deletions
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,23 @@ |
|||||
|
const api = require("../../../../utils/activity") |
||||
|
import util from "../../../../utils/util" |
||||
|
Page({ |
||||
|
data: { |
||||
|
noticeObj: {}, |
||||
|
noticeObjContent: "", //富文本内容
|
||||
|
preloadVisible: true |
||||
|
}, |
||||
|
onLoad (options) { |
||||
|
this.getNoticeDetail(options.id) |
||||
|
}, |
||||
|
getNoticeDetail (id) { |
||||
|
api.getBannerDetail(id).then(res => { |
||||
|
this.setData({ |
||||
|
noticeObj: res.data, |
||||
|
noticeObjContent: util.formatRichText(res.data.content), |
||||
|
preloadVisible: false |
||||
|
}) |
||||
|
}).catch(err => { |
||||
|
console.log(err) |
||||
|
}) |
||||
|
} |
||||
|
}) |
@ -0,0 +1,6 @@ |
|||||
|
{ |
||||
|
"usingComponents": { |
||||
|
"parser": "../../../../components/parser/parser" |
||||
|
}, |
||||
|
"navigationBarTitleText": "详情" |
||||
|
} |
@ -0,0 +1,28 @@ |
|||||
|
<wxs module="filter" src="../../../../utils/filter.wxs"></wxs> |
||||
|
<view class="notice-detail"> |
||||
|
<view class="selfContent" wx:if="{{!preloadVisible}}"> |
||||
|
<view class="detail-title"> |
||||
|
<view>{{noticeObj.title}}</view> |
||||
|
</view> |
||||
|
<view class="detail-subtitle"> |
||||
|
<view class="left"> |
||||
|
<!-- <span>{{noticeObj.deptName}}</span> --> |
||||
|
<span>{{filter.formatTime(noticeObj.createdTime, 'yyyy-MM-dd')}}</span> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<view class="readNum"> |
||||
|
<image src="../../images/ic_yueduliang.png" /> |
||||
|
</view> |
||||
|
<view class="num">{{noticeObj.browseNum}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="richContent"> |
||||
|
<!-- <rich-text space="nbsp" nodes="{{noticeObjContent}}"></rich-text> --> |
||||
|
<parser html="{{noticeObjContent}}"></parser> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="preload" wx:else> |
||||
|
<view class="preload-title"></view> |
||||
|
<view class="preload-content"></view> |
||||
|
</view> |
||||
|
</view> |
@ -0,0 +1,126 @@ |
|||||
|
.notice-detail { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
padding: 20rpx; |
||||
|
background: #f7f7f7; |
||||
|
} |
||||
|
.selfContent { |
||||
|
width: 100%; |
||||
|
display: table; |
||||
|
background: #ffffff; |
||||
|
border-radius: 16rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 25rpx 38rpx; |
||||
|
} |
||||
|
.detail-title { |
||||
|
font-family: PingFang-SC-Bold; |
||||
|
font-size: 48rpx; |
||||
|
font-weight: bold; |
||||
|
line-height: 68rpx; |
||||
|
color: #333333; |
||||
|
padding-top: 40rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
.detail-title-img { |
||||
|
text-align: right; |
||||
|
} |
||||
|
.detail-title image { |
||||
|
width: 176rpx; |
||||
|
height: 66rpx; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.detail-subtitle { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
justify-content: space-between; |
||||
|
font-size: 22rpx; |
||||
|
color: #999999; |
||||
|
margin-top:45rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.detail-subtitle .left span:nth-child(1){ |
||||
|
margin-right: 32rpx; |
||||
|
} |
||||
|
.detail-subtitle .right{ |
||||
|
display: flex; |
||||
|
height: 32rpx; |
||||
|
line-height: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.detail-subtitle .right .readNum { |
||||
|
/* display: inline-block; */ |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
.detail-subtitle .right .readNum image{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
float:left; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.banner { |
||||
|
width: 100%; |
||||
|
height: 400rpx; |
||||
|
margin: 39rpx 0 19rpx 0; |
||||
|
} |
||||
|
.banner image{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
float:left; |
||||
|
object-fit: cover; |
||||
|
border-radius: 16rpx; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.paragraph { |
||||
|
font-size: 38rpx; |
||||
|
line-height: 58rpx; |
||||
|
color: #333333; |
||||
|
text-indent: 76rpx; |
||||
|
margin-top:22rpx; |
||||
|
} |
||||
|
|
||||
|
.richContent{ |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
|
||||
|
/* preload start */ |
||||
|
.preload { |
||||
|
width: 100%; |
||||
|
background: #fff; |
||||
|
box-sizing: border-box; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 0 24rpx; |
||||
|
overflow: hidden; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.preload-title { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
border-radius: 8rpx; |
||||
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
||||
|
animation: loading 1.4s ease infinite; |
||||
|
background-size: 400% 100%; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
.preload-content { |
||||
|
width: 100%; |
||||
|
height: 200rpx; |
||||
|
border-radius: 8rpx; |
||||
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
||||
|
animation: loading 1.4s ease infinite; |
||||
|
background-size: 400% 100%; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
@keyframes loading { |
||||
|
0% { |
||||
|
background-position: 100% 50% |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
background-position: 0 50% |
||||
|
} |
||||
|
} |
||||
|
/* preload end */ |
Loading…
Reference in new issue