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