You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
2.6 KiB
144 lines
2.6 KiB
<template>
|
|
<view class="bg">
|
|
<view class="topLeft flex-center">
|
|
<span class="iconfont" @click="goBack"></span>
|
|
</view>
|
|
|
|
<image :src="showImg(headImg)" 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.slice(0,10)}}
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
typeList: [
|
|
{
|
|
title: '公告信息',
|
|
id: '4'
|
|
},
|
|
{
|
|
title: '旅游政策',
|
|
id: '5'
|
|
}
|
|
],
|
|
typeIndex: 0,
|
|
list: [],
|
|
headImg: ''
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getHeadImg('notice').then(res => {this.headImg = res})
|
|
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;
|
|
}
|
|
|
|
.topImg {
|
|
width: 750rpx;
|
|
height: 440rpx;
|
|
}
|
|
|
|
.type-box {
|
|
width: 404rpx;
|
|
height: 77rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 13rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
display: flex;
|
|
margin: -39rpx auto 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
view {
|
|
width: 50%;
|
|
text-align: center;
|
|
line-height: 77rpx;
|
|
}
|
|
|
|
.active {
|
|
color: #fff;
|
|
background: #248BAA;
|
|
}
|
|
}
|
|
|
|
.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>
|