<template>
    <view>
        <!-- index.wxml -->
        <view class="topBj">
            <image :src="loadImgSrc('/jcb-top.png')"></image>
        </view>
        <view class="container">
            <!-- 主导航 -->
            <ul class="mainNav">
                <li>
                    <view class="wb" @tap="goWenBa"><em class="iconfont icon-wenhaofill"></em></view>
                    <span>问吧</span>
                </li>
                <li>
                    <view class="hq"><em class="iconfont icon-hangqing"></em></view>
                    <span>行情</span>
                </li>
                <li>
                    <view class="sc" @tap="goShangCheng"><em class="iconfont icon-shangcheng11"></em></view>
                    <span>商城</span>
                </li>
                <li>
                    <view class="bs"><em class="iconfont icon-banshidating1"></em></view>
                    <span>办事</span>
                </li>
            </ul>
            <!-- 村民福利 -->
            <view class="cmfl_title">
                <image :src="loadImgSrc('/cnfl-fl.png')"></image>
                <h1>村民福利</h1>
                <image :src="loadImgSrc('/cnfl-fr.png')"></image>
            </view>
            <view class="cnfl">
                <view class="fv">
                    <text>法律乡下</text>
                    <image :src="loadImgSrc('/fv.jpg')"></image>
                </view>
                <view class="hm">
                    <text>惠民通</text>
                    <image :src="loadImgSrc('/hm.jpg')"></image>
                </view>
            </view>
        </view>
        <view class="fengexian"></view>
        <!-- 分割线 -->
        <!-- 公告 -->
        <view class="container">
            <view class="gonggao">
                <span>
                    <em class="iconfont icon-gonggao"></em>
                    [公告]
                </span>
                <swiper class="swiper_container" :autoplay="true" :circular="true" :vertical="true" interval="2000">
                    <block v-for="(item, index) in msgList" :key="index">
                        <swiper-item>
                            <view class="swiper_item">{{ item.title }}</view>
                        </swiper-item>
                    </block>
                </swiper>
                <em class="iconfont icon-xiangyoujiantou"></em>
            </view>
        </view>
        <!-- 公告 end -->
        <view class="fengexian"></view>
        <!-- 分割线 -->
        <view class="container">
            <!-- 政策推荐 -->
            <view class="zcTuijian">
                <image :src="loadImgSrc('/zctj.png')"></image>
                <ul>
                    <view v-for="(item, index) in msgList" :key="index">
                        <li>
                            <em class="iconfont icon-yuandianxiao"></em>
                            {{ item.title }}
                        </li>
                    </view>
                </ul>
                <em class="iconfont icon-xiangyoujiantou"></em>
            </view>
        </view>
        <view class="fengexian"></view>
        <!-- 分割线 -->
        <view class="container">
            <!-- 图片轮播 -->
            <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" class="banner">
                <block v-for="(item, index) in banners" :key="index">
                    <swiper-item><image :src="loadImgSrc(item.src)" mode="aspectFill"></image></swiper-item>
                </block>
            </swiper>
        </view>
        <view class="fengexian"></view>
        <!-- 分割线 -->
        <view class="container">
            <view class="titleLeft">
                <em class="iconfont icon--fuwu"></em>
                高频服务
            </view>
            <view class="gpfwNav">
                <ul>
                    <li>
                        <view class="lvxd"><em class="iconfont icon-jurassic_nav"></em></view>
                        <span>旅游向导</span>
                    </li>
                    <li>
                        <view class="xlzx"><em class="iconfont icon-xinlizixun"></em></view>
                        <span>心里咨询</span>
                    </li>
                    <li>
                        <view class="xswz"><em class="iconfont icon-wenzhen"></em></view>
                        <span>线上问诊</span>
                    </li>
                    <li>
                        <view class="gxs"><em class="iconfont icon-gongxiaoshelogo"></em></view>
                        <span>供销社</span>
                    </li>
                    <li>
                        <view class="xlzx"><em class="iconfont icon-linshijiuzhu"></em></view>
                        <span>帮扶救助</span>
                    </li>
                    <li>
                        <view class="xswz"><em class="iconfont icon-zhishi1"></em></view>
                        <span>知识库</span>
                    </li>
                    <li>
                        <view class="lvxd"><em class="iconfont icon-zhibo"></em></view>
                        <span>直播带货</span>
                    </li>
                    <li>
                        <view class="more"><em class="iconfont icon-gengduo1"></em></view>
                        <span>更多</span>
                    </li>
                </ul>
            </view>
        </view>
        <view class="fengexian"></view>
        <!-- 分割线 -->
        <view class="container">
            <view class="titleLeft">
                <em class="iconfont icon-licaiwenda"></em>
                热门问答
            </view>
            <view class="rnwdList">
                <view class="list" @tap="goDetails" v-for="(item, index) in indexList" :key="index">
                    <span class="listTitle">{{ item.title }}</span>

                    <view class="onePic" v-if="item.imgList.length == 1">
                        <image :src="loadImgSrc('/'+item.url)" v-for="(item, index1) in item.imgList" :key="index1"></image>
                    </view>

                    <view class="twoPic" v-if="item.imgList.length == 2">
                        <image :src="loadImgSrc('/'+item.url)" v-for="(item, index1) in item.imgList" :key="index1"></image>
                    </view>

                    <view class="threePic" v-if="item.imgList.length == 3">
                        <image :src="loadImgSrc('/'+item.url)" v-for="(item, index1) in item.imgList" :key="index1"></image>
                    </view>

                    <view class="jlSj">
                        <span class="jf">
                            {{ item.jf }}
                            <em class="iconfont icon-jifen"></em>
                        </span>
                        <view class="ck">
                            <span>
                                <em class="iconfont icon-pinglun"></em>
                                {{ item.pl }}
                            </span>
                            <span>
                                <em class="iconfont icon-chakan"></em>
                                {{ item.ck }}
                            </span>
                            <span>
                                <em class="iconfont icon-shoucang"></em>
                                {{ item.dz }}
                            </span>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="fengexian"></view>
        <!-- 分割线 -->
        <view class="container">
            <view class="titleLeft">
                <em class="iconfont icon-zhishiku1"></em>
                热门知识
            </view>
            <ul class="rmzsList">
                <li>
                    <image :src="loadImgSrc('/10_16.png')"></image>
                    <view class="listCont">
                        <p>稳预期 促互通——专家学者建言献策国际农产品市场和贸易高质量发展</p>
                        <text>唐旭 姚媛</text>
                        <view class="biaoqian">
                            <span>三农</span>
                            <span>教育</span>
                        </view>
                        <view class="jiage">
                            <span class="yhjg">
                                <em>￥</em>
                                200
                            </span>
                            <span class="yjjg">￥500</span>
                        </view>
                    </view>
                </li>
                <li>
                    <image :src="loadImgSrc('/10_16.png')"></image>
                    <view class="listCont">
                        <p>稳预期 促互通——专家学者建言献策国际农产品市场和贸易高质量发展</p>
                        <text>唐旭 姚媛</text>
                        <view class="biaoqian">
                            <span>三农</span>
                            <span>教育</span>
                        </view>
                        <view class="jiage">
                            <span class="yhjg">
                                <em>￥</em>
                                200
                            </span>
                            <span class="yjjg">￥500</span>
                        </view>
                    </view>
                </li>
            </ul>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 图片轮播
            banners: [
                {
                    src: '/img1.png'
                },
                {
                    src: '/img2.png'
                }
            ],
            msgList: [
                {
                    id: 0,
                    title: '关于高质量推进土地整治工作赋能乡村振兴的通知'
                },
                {
                    id: 1,
                    title: '关于高质量推进土地整治工作的通知'
                },
                {
                    id: 2,
                    title: '关于乡村振兴的通知'
                }
            ],
            indicatorDots: true,
            vertical: false,
            autoplay: true,
            interval: 2000,
            duration: 500,
            circular: true,
            indexList: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
    },
    methods: {
        goWenBa() {
            uni.navigateTo({
                url: '/pages/wenba/wenba'
            });
        },

        goShangCheng() {
            uni.navigateTo({
                url: '/pages/shangcheng/shangcheng'
            });
        },

        goDetails() {
            uni.navigateTo({
                url: '/pages/wenbaxiangqing/wenbaxiangqing'
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
