lihenian
5 years ago
11 changed files with 294 additions and 119 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