jiazhipeng
1 year ago
6 changed files with 253 additions and 6 deletions
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<span class="iconfont topLeft" @click="goBack"></span> |
|||
|
|||
<view class="topBox" :style="{backgroundImage: 'url('+showImg(detail.image)+')', backgroundSize: 'cover'}"> |
|||
<view>{{detail.title}}</view> |
|||
<view style="font-weight: 500;font-size: 24rpx;margin-top: 22rpx;">{{detail.create_time}}</view> |
|||
</view> |
|||
|
|||
<view class="content" v-html="formateRichText(detail.content)"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
detail: {} |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.Post({ |
|||
id: option.id |
|||
},'/api/anncmnt/getAnncmntById').then(res => { |
|||
this.detail = res.data |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
width: 750rpx; |
|||
min-height: 100vh; |
|||
background: url('https://static.ticket.sz-trip.com/yandu/images/notice/noticeBg.png') no-repeat bottom; |
|||
background-size: 100% auto; |
|||
background-color: #F7F7F7; |
|||
} |
|||
|
|||
.topLeft { |
|||
position: absolute; |
|||
left: 26rpx; |
|||
top: 101rpx; |
|||
font-size: 40rpx; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.topBox { |
|||
width: 750rpx; |
|||
height: 432rpx; |
|||
padding: 240rpx 60rpx 0 60rpx; |
|||
font-weight: bold; |
|||
font-size: 35rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.content { |
|||
width: 697rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
margin: -28rpx auto 0; |
|||
padding: 48rpx 21rpx 98rpx; |
|||
position: relative; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,147 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<span class="iconfont topLeft" @click="goBack"></span> |
|||
|
|||
<image src="https://static.ticket.sz-trip.com/yandu/images/notice/topImg.png" mode="" class="topImg"></image> |
|||
|
|||
<view class="type-box"> |
|||
<view v-for="(item,index) in typeList" :key="index" :class="{'active': index == typeIndex}" @click="typeIndex=index;getList()">{{item.title}}</view> |
|||
</view> |
|||
|
|||
<navigator :url="'/subPackages/notice/noticeDetail?id=' + item.id" v-for="(item,index) in list" :key="index" class="item"> |
|||
<image :src="showImg(item.image)" mode="aspectFill" class="headImg"></image> |
|||
<view class="content flex-column"> |
|||
<view class="title"> |
|||
{{item.title}} |
|||
</view> |
|||
<view class="time"> |
|||
<image src="https://static.ticket.sz-trip.com/yandu/images/notice/time.png" mode=""></image> |
|||
{{item.create_time}} |
|||
</view> |
|||
</view> |
|||
</navigator> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
typeList: [ |
|||
{ |
|||
title: '公告信息', |
|||
id: '4' |
|||
}, |
|||
{ |
|||
title: '旅游政策', |
|||
id: '5' |
|||
} |
|||
], |
|||
typeIndex: 0, |
|||
list: [] |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
this.Post({ |
|||
type_id: this.typeList[this.typeIndex].id |
|||
},'/api/anncmnt/getAnncmntByType').then(res => { |
|||
this.list = res.data |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
width: 750rpx; |
|||
min-height: 100vh; |
|||
background: #F7F7F7; |
|||
padding-bottom: 100rpx; |
|||
} |
|||
|
|||
.topLeft { |
|||
position: absolute; |
|||
left: 26rpx; |
|||
top: 101rpx; |
|||
font-size: 40rpx; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.topImg { |
|||
width: 750rpx; |
|||
height: 432rpx; |
|||
} |
|||
|
|||
.type-box { |
|||
width: 404rpx; |
|||
height: 77rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
display: flex; |
|||
margin: -34rpx auto 0; |
|||
overflow: hidden; |
|||
position: relative; |
|||
|
|||
view { |
|||
width: 50%; |
|||
text-align: center; |
|||
line-height: 77rpx; |
|||
} |
|||
|
|||
.active { |
|||
background: linear-gradient(90deg, #9EE4FE, #7FD491); |
|||
} |
|||
} |
|||
|
|||
.item { |
|||
width: 697rpx; |
|||
height: 180rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
margin: 28rpx auto; |
|||
display: flex; |
|||
padding: 6.67rpx; |
|||
|
|||
.headImg { |
|||
width: 180rpx; |
|||
height: 167rpx; |
|||
border-radius: 7rpx; |
|||
} |
|||
|
|||
.content { |
|||
width: 475rpx; |
|||
height: 180rpx; |
|||
padding: 14rpx 0; |
|||
justify-content: space-between; |
|||
margin-left: 20rpx; |
|||
|
|||
.title { |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.time { |
|||
font-weight: 500; |
|||
font-size: 25rpx; |
|||
color: #AFAFAF; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
image { |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
margin-right: 12rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue