<!-- 首页 -->
<template>
<view class="index">
<!-- <div class='slideShine' style="position:absolute;top: 36rpx;left: 46rpx;z-index: -998;font-size: 50rpx;color: #fff;font-weight: 600;letter-spacing: 4rpx;">新疆网络举报</div> -->
<!-- <image style="width: 70px;height: 60px;position:absolute;top: 36rpx;left: 60rpx;z-index: -998" src="http://111.198.10.15:11604/png/share.png"></image> -->
<image src="http://111.198.10.15:11604/png/back_complete.png" style="position:absolute;top: -4rpx;left: 0;z-index: -999; width:100%;height: 300rpx;"></image>
<view class="swiper-area">
<swiper class="swiper-box" style="height: 300rpx;" :interval="3000" :indicator-dots="true" :autoplay="true" :circular="circular">
<swiper-item v-for="(item ,index) in swiperList" :key="index">
<view class="swiper-item">
<image :src="item.url" style="width:100%;height: 300rpx;"></image>
</view>
</swiper-item>
</swiper>
</view>
<view class="tab-area">
<view class="tab">
<u-row>
<u-col span="4" v-for="item in tabList_first" :key="item.id">
<view class="tab-item" @click="handleClick(item.id)">
<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
<text class="grid-text">{{item.name}}</text>
</view>
</u-col>
</u-row>
<!-- <u-row>
<u-col span="4" v-for="item in tabList_second" :key="item.id">
<view class="tab-item" @click="handleClick(item.id)">
<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
<text class="grid-text">{{item.name}}</text>
</view>
</u-col>
</u-row> -->
<!-- <u-row>
<u-col span="6" v-for="item in tabList_third" :key="item.id">
<view class="tab-item" @click="handleClick(item.id)">
<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
<text class="grid-text">{{item.name}}</text>
</view>
</u-col>
</u-row> -->
</view>
</view>
<!-- 通知公告、辟谣信息、案例警醒 -->
<view class="event-area">
<EventList
v-for="(item,index) in eventList"
:key="index"
:title="item.name"
:list="tzggList"
@checkMore="checkMore(item.id)">
</EventList>
</view>
</view>
</template>
<script>
import EventList from '@/components/eventList.vue'
export default {
name: 'Index',
components: {
EventList
},
data() {
return {
tabList_first: [
{
id: 'will',
name: '我要举报',
icon: '../../static/index/will.png',
},
// {
// id: 'search',
// name: '举报查询',
// icon: '../../static/index/search.png',
// },
{
id: 'guide',
name: '举报指南',
icon: '../../static/index/guide.png',
},
{
id: 'jdy',
name: '加入我们',
// name: '成为监督员',
icon: '../../static/index/jdy.png',
},
],
tabList_second: [
{
id: 'status',
name: '工作动态',
icon: '../../static/index/status.png',
},
{
id: 'rules',
name: '法律法规',
icon: '../../static/index/rules.png',
},
{
id: 'jdy',
name: '成为监督员',
icon: '../../static/index/jdy.png',
},
],
tabList_third: [
],
//轮播图信息
swiperList: [
{
url: 'http://111.198.10.15:11604/png/swiper4.png'
},
{
url: 'http://111.198.10.15:11604/png/swiper3.png'
},
{
url: 'http://111.198.10.15:11604/png/swiper2.png'
},
{
url: 'http://111.198.10.15:11604/png/swiper1.png'
},
],
tzggList: [
{
title: '通知公告标题1',
publishTime: '2022-03-03 12:12:00'
},
{
title: '通知公告标题2',
publishTime: '2022-03-03 12:12:00'
},
{
title: '通知公告标题1',
publishTime: '2022-03-03 12:12:00'
},
{
title: '通知公告标题2',
publishTime: '2022-03-03 12:12:00'
},
{
title: '通知公告标题1',
publishTime: '2022-03-03 12:12:00'
},
{
title: '通知公告标题2',
publishTime: '2022-03-03 12:12:00'
},
],
pyxxList: [
{
title: '辟谣信息标题1',
publishTime: '2022-03-03 12:12:00'
},
{
title: '辟谣信息标题2',
publishTime: '2022-03-03 12:12:00'
},
],
aljxList: [
{
title: '案例警醒标题1',
publishTime: '2022-03-03 12:12:00'
},
{
title: '案例警醒标题2',
publishTime: '2022-03-03 12:12:00'
},
{
title: '案例警醒标题1',
publishTime: '2022-03-03 12:12:00'
},
{
title: '案例警醒标题2',
publishTime: '2022-03-03 12:12:00'
},
{
title: '案例警醒标题1',
publishTime: '2022-03-03 12:12:00'
},
{
title: '案例警醒标题2',
publishTime: '2022-03-03 12:12:00'
},
{
title: '案例警醒标题1',
publishTime: '2022-03-03 12:12:00'
},
{
title: '案例警醒标题2',
publishTime: '2022-03-03 12:12:00'
},
],
eventList: [
{
id: 'tzgg',
name: '通知公告',
value: 'tzggList'
},
{
id: 'pyxx',
name: '辟谣信息',
value: 'pyxxList'
},
{
id: 'aljx',
name: '案例警醒',
value: 'tzggList'
},
]
}
},
mounted(){
uni.showShareMenu({
withShareTicket: true,
menus: ["shareAppMessage", "shareTimeline"]
});
},
//分享好友
onShareAppMessage() {
return {
title: '新疆网络举报',
imageUrl: '../../static/share.png',
};
},
//分享朋友圈
onShareTimeline() {
return {
title: '新疆网络举报',
}
},
methods: {
// 点击按钮
handleClick(val) {
console.log('---', val)
if(val === 'search') { // 举报查询
wx.navigateTo({
url: '/packageB/search/search'
})
} else if(val === 'guide') { // 举报指南
wx.navigateTo({
url: '/packageB/guide/guide'
})
} else if(val === 'will') { // 我要举报
wx.navigateTo({
url: '/packageB/center/center'
})
}
else if(val === 'rules' || val === 'status') { // 法律法规、工作动态
let tabIndex = 0;
if(val === 'status') {
tabIndex = 1;
} else if(val === 'net') {
tabIndex = 2;
}
wx.navigateTo({
url: `/packageB/messageList/messageList?tabIndex=${tabIndex}`
})
} else if(val === 'jdy') { // 成为监督员
wx.navigateTo({
url: `/packageB/supervisor/supervisor`
})
}
},
// 点击更多
checkMore(id) {
// 跳转到固定页面
if(id === 'aljx') {
wx.navigateTo({
url: '/packageA/egersis/egersis'
})
}
if(id === 'pyxx') {
wx.navigateTo({
url: '/packageC/rumorInfo/rumorInfo'
})
}
if(id === 'tzgg') {
wx.navigateTo({
url: '/packageA/egersis/egersis'
})
}
}
}
}
</script>
<style lang="scss" scoped>
.index {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 60rpx 0;
padding-top: 192rpx;
.swiper-area {
padding: 0 40rpx;
}
.tab-area {
margin-top: 40rpx;
padding: 0 40rpx;
.tab {
background: linear-gradient(#eef1fd 0%, #bed5fe 100%);
border-radius: 20rpx;
padding-bottom: 80rpx;
}
.tab-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 80rpx;
.grid-text {
color: #3a3a3b;
}
}
}
.slideShine{
background: #871317 -webkit-linear-gradient(left, #561214, #febaf7 50%, #ff0 90%,#561214) no-repeat 0 0;
background-size:20% 100%;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 36px;
text-align: center;
font-weight: bold;
text-decoration: underline;
}
.slideShine {
animation: slideShine 4s linear infinite;animation: slideShine 4s linear infinite;
}
@keyframes slideShine {
0% {background-position: 0 0; }
100% {background-position: 100% 100%; }
}
}
</style>
<style lang="scss">
.index {
}
</style>
