前言
我们在前面几个章节，将我们的微信小程序、支付宝小程序、App、H5界面全部做出来了，只是各个界面数据都是直接写在组件里面，我们知道数据应该由服务器api接口提供，因此本章节，我们先将数据做一个统一处理，方便我们后面请求数据。
学习过我们第二学期第三季的同学，应该都知道，我们最后一章章节5.企业网站前端部分，是对我们企业网站做的一个数据渲染，用的是模版引擎做的渲染，我们可以参考一下，在渲染前，服务器api接口提供的数据的格式，这种格式非常有代表性，因为它可以根据服务器提供的数据，动态显示或者隐藏页面的栏目。
# 一、首页数据 [index.vue页面]
# ① swiper广告图
<template>
<view>
...
<view v-for="(item,index) in pagedata" :key="index">
<!-- swiper广告图 -->
<view v-if="item.type=='swiper' && item.data.length">
<!-- #ifdef APP-PLUS || MP-ALIPAY -->
<!-- 轮播图：有标题 -->
<view style="background-image: linear-gradient(to bottom,#1989fa 0%,#70d6f2 80%);border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;"
class="px-2">
<u-swiper :list="item.data" autoplay circular :height="180" keyName="src" showTitle :radius="20"></u-swiper>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<!-- 轮播图：卡片式 -->
<view class="pt-2">
<u-swiper :list="item.data" keyName="src" autoplay circular :height="180"
showTitle :radius="5" previousMargin="50" nextMargin="50" bgColor="#ffffff"></u-swiper>
</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<!-- 基础轮播图 -->
<view>
<u-swiper :list="item.data" indicator indicatorMode="dot" autoplay circular
:height="180" :radius="0" keyName="src"></u-swiper>
</view>
<!-- #endif -->
</view>
</view>
...
</view>
</template>
<script>
let pagedata = [
// swiper广告图
{
type:'swiper',
data:[
// {
// src: 'https://cdn.uviewui.com/uview/resources/video.mp4',
// title: '昨夜星辰昨夜风，画楼西畔桂堂东',
// poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
// type: 'video'
// },
{
src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347846723_46195408.png',
title: '规划设计',
type: 'image'
},
{
src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347904014_12078316.png',
title: '施工建设',
type: 'image'
},
{
src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347930629_87275382.png',
title: '电力设备销售',
type: 'image'
},
]
},
];
export default {
data() {
return {
pagedata:pagedata,
}
}
}
</script>
# ② 首页消息滚动数据处理
<template>
<view>
...
<view v-for="(item,index) in pagedata" :key="index">
<!-- swiper广告图 -->
...
<!-- 消息滚动组件 -->
<view v-if="item.type == 'notices' && item.data.length"
class="my-2 px-2">
<u-notice-bar :text="noticetext" direction="column" color="#1989fa" bgColor="#ecf5ff"
fontSize="14" duration="4000" @click="openNotice"></u-notice-bar>
</view>
</view>
...
</view>
</template>
<script>
let pagedata = [
// swiper广告图
//消息滚动
{
type:'notices',
data:[
{
titles:"我司顺利通过“质量、安全及职业健康安全管理体系",
url:'xxx1'
},
{
titles:"2022年8月2日到3日中电联（北京）认证中心委派2位审核专家对我司质量、安全及职业健康安全管理体系进行审",
url:'xxx2'
},
],
}
];
export default {
data() {
return {
pagedata:pagedata,
}
},
computed:{
// 滚动消息内容
noticetext(){
let text = [];
// let res = this.pagedata.find(item=>item.type == 'notices');
// console.log('res',res);
// res.data.forEach(e=> text.push(e.titles));
this.pagedata.find(item=>item.type == 'notices')
.data.forEach(e=> text.push(e.titles));
// this.notices.forEach(e=> text.push(e.titles));
return text;
}
},
methods: {
//点击滚动消息
openNotice(index){
console.log('点击滚动消息',this.noticetext[index]);
},
}
}
</script>
# ③ 首页主要栏目数据处理
<template>
<view>
...
<view v-for="(item,index) in pagedata" :key="index">
<!-- swiper广告图 -->
...
<!-- 消息滚动组件 -->
...
<!-- 主要栏目展示 -->
<view v-if="item.type == 'items' && item.data.length"
class="px-2 mt-2">
<u-row customStyle="margin-bottom:20rpx"
v-for="(row,rowIndex) in rows" :key="rowIndex">
<u-col span="6" v-for="(itemData,colIndex) in row" :key="colIndex">
<view class="py-3 pl-2 flex rounded-lg"
style="background-color: #eef7fe;"
:class="[colIndex==0?'mr-1':'ml-1']">
<view class="flex flex-1 flex-column">
<view>
<u--text size="16" :text="itemData.name"></u--text>
</view>
<view class="mt-2">
<text class="font-small u-line-1" style="color:#5c97e1;">
{{itemData.en_name}}</text>
</view>
</view>
<view class="flex align-center" style="width: 45px;height: 45px;">
<u-icon :name="itemData.icon_name" color="#5c97e1" size="42">
</u-icon>
</view>
</view>
</u-col>
</u-row>
</view>
</view>
...
</view>
</template>
<script>
let pagedata = [
// swiper广告图
...
//消息滚动
...,
// 主要栏目展示
{
type:'items',
data:[
{
name:'关于我们',
en_name:'ABOUT US',
icon_name:'tags-fill'
},
{
name:'资讯中心',
en_name:'NEWS CNETER',
icon_name:'grid-fill'
},
{
name:'主营业务',
en_name:'MAIN BUSINESS',
icon_name:'level'
},
{
name:'工程案例',
en_name:'ENGINEERING CASE',
icon_name:'share-fill'
},
{
name:'合作单位',
en_name:'COOPERATION UNIT',
icon_name:'thumb-up-fill'
},
{
name:'联系我们',
en_name:'CONTACT US',
icon_name:'server-fill'
},
],
}
];
export default {
data() {
return {
pagedata:pagedata,
}
},
computed:{
//获取当前的 items 数据
item() {
return this.pagedata.find(item => item.type === 'items') || {};
},
// 计算每一行的项目
rows() {
// const items = (this.item && this.item.data) || [];
// 可选链操作符 (?.)
// ?. 是可选链操作符，它会在 this.item 为 undefined 或 null 时自动短路，
// 返回 undefined，然后通过 || [] 确保最终结果为一个空数组。
const items = this.item?.data || [];
const rows = [];
for(let i=0;i<items.length;i+=2){
rows.push(items.slice(i, i + 2))
}
console.log('看一下rows',rows);
return rows;
}
},
}
</script>
# ④ 首页滚动列表、卡片列表、底部导航栏数据处理
<template>
<view>
...
<view v-for="(item,index) in pagedata" :key="index">
<!-- swiper广告图 -->
...
<!-- 消息滚动组件 -->
...
<!-- 主要栏目展示 -->
...
<!-- 横向滚动【主营业务】展示 -->
<view v-if="item.type == 'uScrollList' && item.data.length">
<u-gap height="10" bgColor="#f8f8f8" marginBottom="10"></u-gap>
<view class="px-2">
<view class="mb-2">
<u--text :text="item.name" type="info"></u--text>
</view>
<view>
<u-scroll-list @right="right" @left="left">
<view class="scroll-list" style="flex-direction: row;">
<view
class="scroll-list__goods-item"
v-for="(item1, index1) in item.data"
:key="index1"
:class="[(index1 === 9) && 'scroll-list__goods-item--no-margin-right']"
@click.stop="openlistscroll(item1)">
<!-- <image class="scroll-list__goods-item__image" :src="item1.src"></image> -->
<u--image :src="item1.src" width="180px" height="110px" showLoading
radius="5px" mode="widthFix"></u--image>
<text class="scroll-list__goods-item__text">{{ item1.title }}</text>
</view>
<view class="scroll-list__show-more" @click="listscrollMore">
<text class="scroll-list__show-more__text">查看更多</text>
<u-icon name="arrow-leftward" color="#1989fa" size="12"></u-icon>
</view>
</view>
</u-scroll-list>
</view>
</view>
</view>
<!-- 资讯中心-卡片信息 -->
<view v-if="item.type == 'uniCard' && item.data.length">
<u-gap height="10" bgColor="#f8f8f8" marginBottom="10"></u-gap>
<view class="px-2">
<view class="mb-2">
<u--text :text="item.name" type="info"></u--text>
</view>
<!-- 卡片 -->
<view class="mb-3" v-for="(d,i) in item.data" :key="i">
<uni-card padding="0" spacing="0" margin="0"
:title="d.cardTitle" :extra="d.cardExtra">
<template v-slot:cover>
<view class="custom-cover">
<u--image :src="d.imgSrc"
width="100%" height="160px" showLoading
radius="0px" mode="widthFix">
<template v-slot:loading>
<u-loading-icon color="red"></u-loading-icon>
</template>
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</u--image>
<view class="cover-content">
<text class="uni-subtitle uni-white u-line-1">{{d.title}}</text>
</view>
</view>
</template>
<view class="p-2">
<text class="u-line-3 text-light-muted font-sm" style="text-align: justify;">{{d.desc}}</text>
</view>
</uni-card>
</view>
</view>
</view>
<!-- 底部tabbar -->
<view v-if="item.type == 'uTabbar' && item.data.length">
<u-tabbar :value="tabbarValue" :safeAreaInsetBottom="true" :border="true"
:zIndex="1" activeColor="#1989fa" inactiveColor="#7d7e80"
:fixed="true" :placeholder="true"
@change="changeTabbar">
<u-tabbar-item v-for="(d,i) in item.data" :key="i"
:text="d.text" :icon="d.icon" :badge="d.badge"
@click="openurl(`${d.openurl}`)" :dot="d.dot"></u-tabbar-item>
</u-tabbar>
</view>
</view>
...
</view>
</template>
<script>
let pagedata = [
// swiper广告图
...
//消息滚动
...,
// 主要栏目展示
...,
//横向滚动
{
type:'uScrollList',
name:'主营业务',
data:[
{
src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347846723_46195408.png',
title: '规划设计',
type: 'image'
},
{
src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347904014_12078316.png',
title: '施工建设',
type: 'image'
},
{
src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347930629_87275382.png',
title: '电力设备销售',
type: 'image'
},
]
},
//卡片信息
{
type:'uniCard',
name:'资讯中心',
data:[
{
cardTitle:'1个小时前发布',
cardExtra:'浏览:2万+',
imgSrc:'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347930629_87275382.png',
title:'2022年8月2日到3日中电联（北京）认证中心委派2位审核专家对我司质量、安全及职业健康安全管理体系进行审',
desc:'中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职',
},
{
cardTitle:'1个小时前发布',
cardExtra:'浏览:4万+',
imgSrc:'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347904014_12078316.png',
title:'我司顺利通过“质量、安全及职业健康安全管理体系',
desc:'我司顺利通过“质量、安全及职业健康安全管理体系我体系我体系我体系我我司顺利通过“质量、安全及职业健康安全管理体系我体系我体系我体系我我司顺利通过“质量、安全及职业健康安全管理体系我体系我体系我体系我',
}
],
},
//底部导航栏
{
type:'uTabbar',
data:[
{text:'首页',icon:'home',openurl:'/pages/index/index',badge:0,dot:false},
{text:'资讯中心',icon:'level',openurl:'/pages/list/list',badge:3,dot:false},
{text:'工程案例',icon:'list-dot',openurl:'/pages/piclist/piclist',badge:0,dot:true},
{text:'联系我们',icon:'chat-fill',openurl:'/pages/contact/contact',badge:0,dot:false},
],
}
];
export default {
data() {
return {
pagedata:pagedata,
}
},
...
}
</script>
# ⑤ 首页完整代码
<template>
<view>
<!-- 顶部导航栏 -->
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
<u-navbar :safeAreaInsetTop="true" title="首页" placeholder fixed
:border="false" leftIcon="arrow-left" leftText="返回"
rightIcon="share-square" rightText="分享" bgColor="#1989fa"
titleWidth="400rpx" height="44px" leftIconSize="20px"
leftIconColor="#ffffff" titleStyle="color:#ffffff;">
<view slot="left"></view>
<view slot="right">
<!-- #ifdef APP-PLUS -->
<u-icon name="more-dot-fill" color="#ffffff"></u-icon>
<!-- #endif -->
</view>
</u-navbar>
<!-- #endif -->
<view v-for="(item,index) in pagedata" :key="index">
<!-- swiper广告图 -->
<view v-if="item.type == 'swiper' && item.data.length">
<!-- #ifdef APP-PLUS || MP-ALIPAY -->
<!-- 轮播图：有标题 -->
<view style="background-image: linear-gradient(to bottom,#1989fa 0%,#70d6f2 80%);border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;" class="px-2">
<u-swiper :list="item.data" autoplay circular :height="180" keyName="src" showTitle :radius="20"></u-swiper>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<!-- 轮播图：卡片式 -->
<view class="pt-2">
<u-swiper :list="item.data" keyName="src" autoplay circular :height="180"
showTitle :radius="5" previousMargin="50" nextMargin="50" bgColor="#ffffff"></u-swiper>
</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<!-- 基础轮播图 -->
<view>
<u-swiper :list="item.data" indicator indicatorMode="dot" autoplay circular
:height="180" :radius="0" keyName="src"></u-swiper>
</view>
<!-- #endif -->
</view>
<!-- 消息滚动组件 -->
<view v-if="item.type == 'notices' && item.data.length"
class="my-2 px-2">
<u-notice-bar :text="noticetext" direction="column" color="#1989fa" bgColor="#ecf5ff"
fontSize="14" duration="4000" @click="openNotice"></u-notice-bar>
</view>
<!-- 主要栏目展示 -->
<view v-if="item.type == 'items' && item.data.length"
class="px-2 mt-2">
<u-row customStyle="margin-bottom:20rpx"
v-for="(row,rowIndex) in rows" :key="rowIndex">
<u-col span="6" v-for="(itemData,colIndex) in row" :key="colIndex">
<view class="py-3 pl-2 flex rounded-lg" style="background-color: #eef7fe;"
:class="[colIndex==0?'mr-1':'ml-1']">
<view class="flex flex-1 flex-column">
<view>
<u--text size="16" :text="itemData.name"></u--text>
</view>
<view class="mt-2">
<text class="font-small u-line-1" style="color:#5c97e1;">
{{itemData.en_name}}</text>
</view>
</view>
<view class="flex align-center" style="width: 45px;height: 45px;">
<u-icon :name="itemData.icon_name" color="#5c97e1" size="42"></u-icon>
</view>
</view>
</u-col>
</u-row>
</view>
<!-- 横向滚动【主营业务】展示 -->
<view v-if="item.type == 'uScrollList' && item.data.length">
<u-gap height="10" bgColor="#f8f8f8" marginBottom="10"></u-gap>
<view class="px-2">
<view class="mb-2">
<u--text :text="item.name" type="info"></u--text>
</view>
<view>
<u-scroll-list @right="right" @left="left">
<view class="scroll-list" style="flex-direction: row;">
<view
class="scroll-list__goods-item"
v-for="(item1, index1) in item.data"
:key="index1"
:class="[(index1 === 9) && 'scroll-list__goods-item--no-margin-right']"
@click.stop="openlistscroll(item1)">
<!-- <image class="scroll-list__goods-item__image" :src="item1.src"></image> -->
<u--image :src="item1.src" width="180px" height="110px" showLoading
radius="5px" mode="widthFix"></u--image>
<text class="scroll-list__goods-item__text">{{ item1.title }}</text>
</view>
<view class="scroll-list__show-more" @click="listscrollMore">
<text class="scroll-list__show-more__text">查看更多</text>
<u-icon name="arrow-leftward" color="#1989fa" size="12"></u-icon>
</view>
</view>
</u-scroll-list>
</view>
</view>
</view>
<!-- 资讯中心 -->
<view v-if="item.type == 'uniCard' && item.data.length">
<u-gap height="10" bgColor="#f8f8f8" marginBottom="10"></u-gap>
<view class="px-2">
<view class="mb-2">
<u--text :text="item.name" type="info"></u--text>
</view>
<!-- 卡片 -->
<view class="mb-3" v-for="(d,i) in item.data" :key="i">
<uni-card padding="0" spacing="0" margin="0"
:title="d.cardTitle" :extra="d.cardExtra">
<template v-slot:cover>
<view class="custom-cover">
<u--image :src="d.imgSrc"
width="100%" height="160px" showLoading
radius="0px" mode="widthFix">
<template v-slot:loading>
<u-loading-icon color="red"></u-loading-icon>
</template>
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</u--image>
<view class="cover-content">
<text class="uni-subtitle uni-white u-line-1">{{d.title}}</text>
</view>
</view>
</template>
<view class="p-2">
<text class="u-line-3 text-light-muted font-sm"
style="text-align: justify;">{{d.desc}}</text>
</view>
</uni-card>
</view>
</view>
</view>
<!-- 底部tabbar -->
<view v-if="item.type == 'uTabbar' && item.data.length">
<u-tabbar :value="tabbarValue" :safeAreaInsetBottom="true" :border="true"
:zIndex="1" activeColor="#1989fa" inactiveColor="#7d7e80"
:fixed="true" :placeholder="true"
@change="changeTabbar">
<u-tabbar-item v-for="(d,i) in item.data" :key="i"
:text="d.text" :icon="d.icon" :badge="d.badge"
@click="openurl(`${d.openurl}`)" :dot="d.dot"></u-tabbar-item>
</u-tabbar>
</view>
</view>
</view>
</template>
<script>
let pagedata = [
//swiper广告图
{
type:'swiper',
data:[
// {
// src: 'https://cdn.uviewui.com/uview/resources/video.mp4',
// title: '昨夜星辰昨夜风，画楼西畔桂堂东',
// poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
// type: 'video'
// },
{
src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347846723_46195408.png',
title: '规划设计',
type: 'image'
},
{
src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347904014_12078316.png',
title: '施工建设',
type: 'image'
},
{
src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347930629_87275382.png',
title: '电力设备销售',
type: 'image'
},
],
},
// 消息滚动
{
type:'notices',
data:[
{
titles:"我司顺利通过“质量、安全及职业健康安全管理体系",
url:'xxx1'
},
{
titles:"2022年8月2日到3日中电联（北京）认证中心委派2位审核专家对我司质量、安全及职业健康安全管理体系进行审",
url:'xxx2'
},
],
},
//主要栏目
{
type:'items',
data:[
{
name:'关于我们',
en_name:'ABOUT US',
icon_name:'tags-fill'
},
{
name:'资讯中心',
en_name:'NEWS CNETER',
icon_name:'grid-fill'
},
{
name:'主营业务',
en_name:'MAIN BUSINESS',
icon_name:'level'
},
{
name:'工程案例',
en_name:'ENGINEERING CASE',
icon_name:'share-fill'
},
{
name:'合作单位',
en_name:'COOPERATION UNIT',
icon_name:'thumb-up-fill'
},
{
name:'联系我们',
en_name:'CONTACT US',
icon_name:'server-fill'
},
],
},
//横向滚动
{
type:'uScrollList',
name:'主营业务',
data:[
{
src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347846723_46195408.png',
title: '规划设计',
type: 'image'
},
{
src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347904014_12078316.png',
title: '施工建设',
type: 'image'
},
{
src: 'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347930629_87275382.png',
title: '电力设备销售',
type: 'image'
},
]
},
//卡片列表
{
type:'uniCard',
name:'资讯中心',
data:[
{
cardTitle:'1个小时前发布',
cardExtra:'浏览:2万+',
imgSrc:'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347930629_87275382.png ',
title:'2022年8月2日到3日中电联（北京）认证中心委派2位审核专家对我司质量、安全及职业健康安全管理体系进行审',
desc:'中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职中心委派2位审核专家对我司质量、安全及职',
},
{
cardTitle:'2个小时前发布',
cardExtra:'浏览:4万+',
imgSrc:'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240522/1716347904014_12078316.png',
title:'我司顺利通过“质量、安全及职业健康安全管理体系',
desc:'我司顺利通过“质量、安全及职业健康安全管理体系我体系我体系我体系我我司顺利通过“质量、安全及职业健康安全管理体系我体系我体系我体系我我司顺利通过“质量、安全及职业健康安全管理体系我体系我体系我体系我',
},
],
},
//底部导航
{
type:'uTabbar',
data:[
{ text:'首页',icon:'home',openurl:'/pages/index/index',badge:0,dot:false},
{ text:'资讯中心',icon:'level',openurl:'/pages/list/list',badge:3,dot:false},
{ text:'工程案例',icon:'list-dot',openurl:'/pages/piclist/piclist',badge:0,dot:true},
{ text:'联系我们',icon:'chat-fill',openurl:'/pages/contact/contact',badge:0,dot:false},
],
}
];
export default {
data() {
return {
pagedata:pagedata,
tabbarValue:0,
current:0,
}
},
onLoad() {
},
computed:{
// 滚动消息内容
noticetext(){
let text = [];
// let res = this.pagedata.find(item=>item.type == 'notices');
// console.log('res',res);
// res.data.forEach(e=> text.push(e.titles));
// this.notices.forEach(e=> text.push(e.titles));
this.pagedata.find(item=>item.type == 'notices')
.data.forEach(e=> text.push(e.titles));
return text;
},
// 拿到主要栏目数据
item(){
return this.pagedata.find(item=>item.type == 'items') || {};
},
// 计算每一组（每个数组的数据）
rows(){
const items = (this.item && this.item.data) || [];
// 可选链操作符 (?.)
// ?. 是可选链操作符，它会在 this.item 为 undefined 或 null 时自动短路，
// 返回 undefined，然后通过 || [] 确保最终结果为一个空数组。
// const items = this.item ?.data || [];
const rows = [];
for(let i=0;i<items.length; i+=2){
rows.push(items.slice(i,i+2))
}
console.log('rows的结果',rows);
return rows;
}
},
methods: {
//底部tabbar切换
changeTabbar(index){
console.log(index);
this.tabbarValue = index;
},
//点击底部tabbar某一项
openurl(url){
console.log(url);
uni.navigateTo({
url:url
})
},
//点击滚动消息
openNotice(index){
console.log('点击滚动消息',this.noticetext[index]);
},
//滚动列表组件
left() {
console.log('left');
},
right() {
console.log('right');
},
//打开滚动列表中的某个数据
openlistscroll(item){
console.log('打开滚动列表中的某个数据',item);
},
//滚动列表查看更多
listscrollMore(){
console.log('滚动列表查看更多');
}
}
}
</script>
<style>
/* @import '/common/css/common.v1.css'; */
</style>
<style lang="scss">
.scroll-list {
@include flex(column);
&__goods-item {
@include flex(column);
margin-right: 20px;
&__image {
width: 60px;
height: 60px;
border-radius: 4px;
}
&__text {
color: #1989fa;
text-align: center;
font-size: 12px;
margin-top: 5px;
}
}
&__show-more {
background-color: #eef7fe;
border-radius: 3px;
padding: 3px 6px;
@include flex(column);
align-items: center;
justify-content: space-between;
&__text {
font-size: 12px;
width: 12px;
color: #1989fa;
line-height: 16px;
}
}
}
</style>
<style lang="scss">
.custom-cover {
flex: 1;
flex-direction: row;
position: relative;
}
.cover-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: rgba($color: #000000, $alpha: 0.4);
display: flex;
flex-direction: row;
align-items: center;
padding-left: 15px;
font-size: 14px;
color: #fff;
}
</style>
<style lang="scss">
.indicator {
@include flex(row);
justify-content: center;
&__dot {
height: 6px;
width: 6px;
border-radius: 100px;
background-color: rgba(255, 255, 255, 0.35);
margin: 0 5px;
transition: background-color 0.3s;
&--active {
background-color: #ffffff;
}
}
}
.indicator-num {
padding: 2px 0;
background-color: rgba(0, 0, 0, 0.35);
border-radius: 100px;
width: 35px;
@include flex;
justify-content: center;
&__text {
color: #FFFFFF;
font-size: 12px;
}
}
</style>
# 二、信息列表数据 [list.vue页面]
<template>
<view>
<!-- 导航栏 -->
<view>
<!-- #ifdef APP-PLUS -->
<u-navbar :title="pagedata.uNavbarTitle" :border="false" bgColor="#1989fa"
leftIconColor="#ffffff" titleStyle="color:#ffffff;" autoBack placeholder>
<view class="u-nav-slot" slot="right" style="border:1px solid #efefef;">
<u-icon name="more-dot-fill" size="19" color="#ffffff"></u-icon>
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
<u-icon name="home" size="20" color="#ffffff"></u-icon>
</view>
</u-navbar>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<u-navbar :title="pagedata.uNavbarTitle" bgColor="#1989fa" autoBack placeholder
leftIconColor="#ffffff" titleStyle="color:#ffffff;"></u-navbar>
<!-- #endif -->
</view>
<!-- 信息列表 -->
<view class="my-2 px-2">
<view v-for="(item,index) in pagedata.data" :key="index"
class="bg-white rounded-lg p-2 mb-2"
@click="openurl(`${item.openurl}`)">
<text class="text font-weight-bolder font-lg"
style="line-height: 1.4;text-align: justify;">{{item.title}}</text>
<text class="u-line-3 my-2 text-light-muted" style="line-height: 1.4;text-align: justify;">
{{item.desc}}
</text>
<u--image showLoading width="100%" height="160px" radius="5px"
:src="item.imgsrc" v-if="item.imgsrc">
</u--image>
<view class="flex align-center justify-between mt-2">
<text class="text-muted font-sm">{{item.timeago}}</text>
<text class="text-muted font-sm">{{item.readcount}}</text>
</view>
</view>
</view>
<!-- #ifdef H5 -->
<!-- 底部tabbar -->
<u-tabbar :value="tabbarValue" :safeAreaInsetBottom="true" :border="true"
:zIndex="1" activeColor="#1989fa" inactiveColor="#7d7e80"
:fixed="true" :placeholder="true"
@change="changeTabbar">
<u-tabbar-item text="首页" icon="home" @click="openurl('/pages/index/index')"></u-tabbar-item>
<u-tabbar-item text="资讯中心" icon="level" :badge="3" @click="openurl('/pages/list/list')"></u-tabbar-item>
<u-tabbar-item text="工程案例" icon="list-dot" :dot="true" @click="openurl('/pages/piclist/piclist')"></u-tabbar-item>
<u-tabbar-item text="联系我们" icon="chat-fill" @click="openurl('/pages/contact/contact')"></u-tabbar-item>
</u-tabbar>
<!-- #endif -->
</view>
</template>
<script>
let pagedata = {
uNavbarTitle:'资讯中心',
data:[
{
openurl:'/pages/detail/detail',
title:'能源局：2022年乡村振兴定点帮扶和对口支援工作要点 持续推进农村电网薄弱地区建设',
desc:'近日国家能源局印发2022年乡村振兴定点帮扶和对口支援工作要点的通知。文件提出，持续推进农村电网薄弱地区建设，优化城乡网架结构，提升农村电网供电保障水平，增强农村分布式可再生能源接入能力。加快推进通渭县平襄110千伏变电站等重点工程建设。推动通渭、清水县配电网建设示范县、“获得电力”服务水平样板工程建设，巩固提升信丰县全国小康用电示范县成果。',
imgsrc:'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20241211/1733906801435_79206487.png',
timeago:'3个小时前',
readcount:'15万+ 阅读',
},
{
openurl:'/pages/detail/detail',
title:'水电站如何做到精准防汛？请看黄河、长江骨干水库如何做到的',
desc:'为确保骨干水库持续高水位运用期间的防汛安全，水利部等相关各级部门密切关注汛情，做好防汛会商、精准调度等工作，充分发挥水库防洪和经济效益。',
imgsrc:'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20241211/1733907139668_76380519.jpg',
timeago:'5个小时前',
readcount:'20万+ 阅读',
},
{
openurl:'/pages/detail/detail',
title:'变压器直流电阻测试仪的保养小窍门',
desc:'睿晨电网建设工程有限公司主要从事电力工程，规划设计 变电站电力设备，高压试验设备，变电线路检测设备，自动化控制系统，在线监测系统，信息化集成， 实验仪器仪表等研制、生产、销售、技术、售后服务，公司的主要产品有各种电力测试的解决方案，耐电压试验系列， 调频串联谐振试验装置、电力设备的在线监测系统，冲击耐压、 水利水电信息化，无局放试验系列、油化测定，FS6检查系列等等，经营的产品广泛涉足工业自动化与城乡电网的建设、 改造和铁路、航天航空、高等院校、实验室、通信、环保、质检、医疗等领域。',
imgsrc:'',
timeago:'5个小时前',
readcount:'30万+ 阅读',
}
]
};
export default {
data() {
return {
pagedata:pagedata,
tabbarValue:1,
}
},
methods: {
openurl(url){
uni.navigateTo({
url:url
})
},
//底部tabbar切换
changeTabbar(index){
console.log(index);
this.tabbarValue = index;
},
}
}
</script>
<style>
/* @import '/common/css/common.v1.css'; */
</style>
<style lang="scss">
/* #ifndef APP-NVUE */
page {
background-color: $u-bg-color;
}
/* #endif */
.u-page {
padding: 0;
flex: 1;
background-color: $u-bg-color;
&__item {
&__title {
color: $u-tips-color;
background-color: $u-bg-color;
padding: 15px;
font-size: 15px;
&__slot-title {
color: $u-primary;
font-size: 14px;
}
}
}
}
.u-nav-slot {
@include flex;
align-items: center;
justify-content: space-between;
border-width: 0.5px;
border-radius: 100px;
border-color: $u-border-color;
padding: 3px 7px;
opacity: 0.8;
}
</style>
# 三、卡片列表数据 [piclist.vue页面]、联系我们 [contact.vue]、详情页 [detail.vue]
# ① 卡片列表数据 [piclist.vue页面]
<template>
<view>
<!-- 导航栏 -->
<view>
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
<u-navbar :title="pagedata.uNavbarTitle"
bgColor="#1989fa" autoBack placeholder leftIconColor="#ffffff"
titleStyle="color:#ffffff;"></u-navbar>
<!-- #endif -->
</view>
<!-- 工程案例 -->
<view class="p-2">
<!-- 卡片 -->
<view class="mb-3" v-for="(item,index) in pagedata.data" :key="index">
<uni-card padding="0" spacing="0" margin="0"
:title="item.timeago" :extra="item.readcount">
<template v-slot:cover>
<view class="custom-cover">
<u--image
:src="item.imgsrc"
width="100%" height="160px" showLoading radius="0px" mode="aspectFill">
<template v-slot:loading>
<u-loading-icon color="red"></u-loading-icon>
</template>
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</u--image>
<view class="cover-content">
<text
class="uni-subtitle uni-white u-line-1">{{item.title}}</text>
</view>
</view>
</template>
<view class="p-2">
<text
class="u-line-3 text-light-muted font-sm"
style="text-align: justify;">{{item.desc}}</text>
</view>
</uni-card>
</view>
</view>
<!-- #ifdef H5 -->
<!-- 底部tabbar -->
<u-tabbar :value="tabbarValue" :safeAreaInsetBottom="true" :border="true"
:zIndex="1" activeColor="#1989fa" inactiveColor="#7d7e80"
:fixed="true" :placeholder="true"
@change="changeTabbar">
<u-tabbar-item text="首页" icon="home" @click="openurl('/pages/index/index')"></u-tabbar-item>
<u-tabbar-item text="资讯中心" icon="level" :badge="3" @click="openurl('/pages/list/list')"></u-tabbar-item>
<u-tabbar-item text="工程案例" icon="list-dot" :dot="true" @click="openurl('/pages/piclist/piclist')"></u-tabbar-item>
<u-tabbar-item text="联系我们" icon="chat-fill" @click="openurl('/pages/contact/contact')"></u-tabbar-item>
</u-tabbar>
<!-- #endif -->
</view>
</template>
<script>
let pagedata = {
uNavbarTitle:'工程案例',
data:[
{
openurl:'/pages/detail/detail',
title:'碧桂园鸟语花香配电工程',
desc:'碧桂园鸟语花香配电工程是我司湖南分公司接收的工程，改工程于2023年8月18号动工，竣工时间是2024年2月23日，已通过验收。',
timeago:'3个小时前',
readcount:'15万+ 阅读',
imgsrc:'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240523/1716438574482_64182211.jpg',
},
{
openurl:'/pages/detail/detail',
title:'前进药业变电系统',
desc:'前进药业变电系统是我司湖南分公司接收的工程，改工程于2023年8月18号动工，竣工时间是2024年2月23日，已通过验收。',
timeago:'4个小时前',
readcount:'20万+ 阅读',
imgsrc:'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240523/1716436133738_93576553.jpg',
},
{
openurl:'/pages/detail/detail',
title:'东城千伏变电站',
desc:'东城千伏变电站是我司湖南分公司接收的工程，改工程于2023年8月18号动工，竣工时间是2024年2月23日，已通过验收。',
timeago:'5个小时前',
readcount:'30万+ 阅读',
imgsrc:'http://lesson06.51yrc.com/public/uploads/Diy/adminImg/20240523/1716435581200_78379477.jpg',
},
],
};
export default {
data() {
return {
pagedata:pagedata,
tabbarValue:2,
}
},
methods: {
//底部tabbar切换
changeTabbar(index){
console.log(index);
this.tabbarValue = index;
},
//点击底部tabbar某一项
openurl(url){
console.log(url);
uni.navigateTo({
url:url
})
},
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
page {
background-color: $u-bg-color;
}
/* #endif */
</style>
<style lang="scss">
.custom-cover {
flex: 1;
flex-direction: row;
position: relative;
}
.cover-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: rgba($color: #000000, $alpha: 0.4);
display: flex;
flex-direction: row;
align-items: center;
padding-left: 15px;
font-size: 14px;
color: #fff;
}
</style>
# ② 联系我们 [contact.vue]
<template>
<view>
<!-- 导航栏 -->
<view>
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
<u-navbar :title="pagedata.uNavbarTitle" bgColor="#1989fa" autoBack placeholder
leftIconColor="#ffffff" titleStyle="color:#ffffff;"></u-navbar>
<!-- #endif -->
</view>
<!-- 联系我们 -->
<view class="p-2">
<view v-for="(item,index) in pagedata.data" :key="index"
class="bg-white rounded-lg p-2 mb-2">
<u--text :prefixIcon="item.prefixIcon" iconStyle="font-size:19px;margin-right:20px;"
:text="item.text"></u--text>
</view>
<!-- 在线留言 -->
<view class="bg-white rounded-lg p-2 mb-2">
<text class="text-light-muted font-sm">在线留言，专业项目经理为您免费咨询！</text>
<u--form ref="uForm1" :model="form" :rules="rules">
<!-- 称呼 -->
<u-form-item label="您的称呼" prop="username"
labelWidth="80px" borderBottom>
<u--input v-model="form.username" border="none"
placeholder="请输入您的称呼"></u--input>
</u-form-item>
<!-- 电话号码 -->
<u-form-item label="您的电话" prop="telnumber"
labelWidth="80px" borderBottom>
<u--input v-model="form.telnumber" border="none"
placeholder="请输入您的电话"></u--input>
</u-form-item>
<!-- 留言信息 -->
<u-form-item label="您的留言" prop="message"
labelWidth="80px" borderBottom>
<u--textarea v-model="form.message" count
placeholder="选填,最多留言字数255个字" maxlength="255"></u--textarea>
</u-form-item>
<!-- 提交按钮 -->
<u-button @click="submit" type="primary" customStyle="margin:20px 0px;">提交</u-button>
</u--form>
</view>
</view>
<!-- #ifdef H5 -->
<!-- 底部tabbar -->
<u-tabbar :value="tabbarValue" :safeAreaInsetBottom="true" :border="true"
:zIndex="1" activeColor="#1989fa" inactiveColor="#7d7e80"
:fixed="true" :placeholder="true"
@change="changeTabbar">
<u-tabbar-item text="首页" icon="home" @click="openurl('/pages/index/index')"></u-tabbar-item>
<u-tabbar-item text="资讯中心" icon="level" :badge="3" @click="openurl('/pages/list/list')"></u-tabbar-item>
<u-tabbar-item text="工程案例" icon="list-dot" :dot="true" @click="openurl('/pages/piclist/piclist')"></u-tabbar-item>
<u-tabbar-item text="联系我们" icon="chat-fill" @click="openurl('/pages/contact/contact')"></u-tabbar-item>
</u-tabbar>
<!-- #endif -->
</view>
</template>
<script>
let pagedata = {
uNavbarTitle:'联系我们',
data:[
{prefixIcon:'account',text:'睿晨电网建设工程有限公司'},
{prefixIcon:'map',text:'北京CBD帝国大厦999层-1001号'},
{prefixIcon:'phone',text:'010-8888-0000'},
{prefixIcon:'email',text:'RUICHENGxxx@163.COM'},
]
};
export default {
data() {
return {
pagedata:pagedata,
tabbarValue:3,
form:{
username:'',
telnumber:'',
message:'',
},
rules:{
username:[
{
type:'string',
required:true,
message:'请填写您的称呼',
trigger:['blur','change'],
},
// 2-15个字符之间的判断
{
min:2,
max:15,
message:'您的称呼最少两个字，最多15个字'
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.chinese(value);
},
message: '您的称呼必须是中文',
// 触发器可以同时用blur和change
trigger: ['change','blur'],
}
],
telnumber:[
{
type:'integer',
required:true,
message:'请填写您的电话',
trigger:['blur','change'],
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.mobile(value);
},
message: '您的电话号码填写有误',
// 触发器可以同时用blur和change
trigger: ['change','blur'],
}
],
message:{
max:255,
message:'您的留言超过了最大长度'
},
}
}
},
methods: {
submit(){
this.$refs.uForm1.validate().then(res => {
uni.$u.toast('校验通过')
console.log('校验通过的数据',this.form);
}).catch(errors => {
uni.$u.toast('校验失败')
})
},
//底部tabbar切换
changeTabbar(index){
console.log(index);
this.tabbarValue = index;
},
//点击底部tabbar某一项
openurl(url){
console.log(url);
uni.navigateTo({
url:url
})
},
},
onReady() {
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
this.$refs.uForm1.setRules(this.rules)
},
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
page {
background-color: $u-bg-color;
}
/* #endif */
</style>
# ③ 详情页 [detail.vue]
<template>
<view>
<!-- 页面详情内容 -->
<view class="p-3">
<text class="text font-weight-bolder font-lg"
style="line-height: 1.4;text-align: justify;">{{pagedata.title}}</text>
<view class="flex align-center justify-between mt-2">
<text class="text-muted font-sm">{{pagedata.timeago}}</text>
<text class="text-muted font-sm">{{pagedata.readcount}}</text>
</view>
<!-- 页面内容 -->
<view class="py-3" style="line-height: 1.8;text-align: justify;">
<!--{{pagedata.content}}-->
<!-- <rich-text :nodes="pagedata.content"></rich-text> -->
<u-parse :content="pagedata.content" :domain="pagedata.domain"></u-parse>
</view>
</view>
</view>
</template>
<script>
let pagedata = {
title:'能源局：2022年乡村振兴定点帮扶和对口支援工作要点 持续推进农村电网薄弱地区建设',
timeago:'3个小时前',
readcount:'15万+ 阅读',
domain:'http://lesson06.51yrc.com',
content:`
<p>近日国家能源局印发2022年乡村振兴定点帮扶和对口支援工作要点的通知。文件提出，持续推进农村电网薄弱地区建设，优化城乡网架结构，提升农村电网供电保障水平，增强农村分布式可再生能源接入能力。加快推进通渭县平襄110千伏变电站等重点工程建设。推动通渭、清水县配电网建设示范县、“获得电力”服务水平样板工程建设，巩固提升信丰县全国小康用电示范县成果。</p>
<p style="text-align: center;"><img src="/public/uploads/Diy/adminImg/20241211/1733906801435_79206487.png" width="657" height="438"></p>
<p>一、协调推动基础设施建设</p>
<p>（一）持续提升供电保障能力。持续推进农村电网薄弱地区建设，优化城乡网架结构，提升农村电网供电保障水平，增强农村分布式可再生能源接入能力。加快推进通渭县平襄110千伏变电站等重点工程建设。推动通渭、清水县配电网建设示范县、“获得电力”服务水平样板工程建设，巩固提升信丰县全国小康用电示范县成果。〔新能源司、电力司、监管司，华中能源监管局、甘肃能源监管办〕</p>
<p>（二）协调推动天然气项目建设。支持通渭、清水两县与管网企业开展合作，指导建设输气支线管道项目。推动西气东输管道天然气信丰分输站开口，2022年底前通气供气。〔油气司〕</p>
<p>（三）指导信丰电厂建设运行。推动信丰电厂一期项目2台机组2022年上半年按期投产、安全稳定运行；协助信丰电厂增加煤炭来源，稳定煤炭供应。结合全国和江西省电力供需变化趋势，指导信丰县开展信丰电厂二期扩建项目前期研究。指导信丰电厂建设资源综合利用项目。〔科技司、电力司、煤炭司，华中能源监管局〕</p>
<p>（四）推动清陇高速公路规划建设。商请有关部门支持清水县公路建设，将清水县至陕西陇县高速公路项目纳入相关交通规划。〔规划司牵头〕</p>
<p>二、培育壮大可再生能源产业</p>
<p>（五）风电项目建设。加快通渭县寺子川10万千瓦风电项目、清水县黄门5万千瓦风储一体化电站项目建设，力争2022年底前建成并网运行。指导三县开展新建风电开发论证。〔新能源司、电力司、安全司〕</p>
<p>（六）光伏项目建设。积极推动通渭马营镇10万千瓦集中式光伏电站、清水黄门10万千瓦农光储一体化电站项目建设，力争2022年底前建成并网运行。支持三县分布式光伏项目有序建设及并网。指导通渭县建设孟河村光储微电网试点项目。〔新能源司、电力司，华中能源监管局、甘肃能源监管办〕</p>
<p>（七）抽水蓄能项目规划建设。指导清水县开展黄龙抽水蓄能电站项目前期工作。在条件成熟的前提下，将信丰抽水蓄能项目滚动列入“十四五”重点实施项目库。〔新能源司〕</p>
<p>（八）生物质能开发利用。鼓励通渭、清水县在生物质资源丰富的中心村、易地扶贫搬迁安置点开展生物质供暖试点，探索生物质资源开发利用新模式。〔新能源司〕</p>
<p>（九）农村清洁能源创新利用。协调支持通渭多能互补帮扶示范项目、清水陇东南清洁能源示范区项目建设。指导三县有条件的易地搬迁新村、中心村、大型农村社区创新生产生活用能方式，提升农村可再生能源利用水平。〔新能源司〕</p>
<p>三、加大社会帮扶力度</p>
<p>（十）动员社会帮扶。协调动员能源企业、公益组织等社会力量提供无偿帮扶资金和物资，支持三县特色产业发展和基础设施建设。〔规划司牵头，局内各单位参与〕</p>
<p>（十一）开展就业帮扶。协调在通渭、清水县施工的能源企业优先在本地招用劳动力，开展必要的技能培训。协调企业优先招聘三县应届大学生，继续开展核苗计划。〔规划司、核电司，核电中心，局内各单位参与〕</p>
<p>（十二）深化消费帮扶。组织局内党员干部积极购买三县特色农产品，各单位工会、食堂在购买慰问品、食材采购时优先选用三县产品。协调企业、社会组织购买三县产品，助力强化自有电商品牌，优化能源行业消费帮扶合作平台，进一步拓展销售渠道。〔各单位，机关工会〕</p>
<p>四、强化党建和人才帮扶</p>
<p>（十三）持续开展党支部结对共建。相关基层党组织要加强与结对村党支部的联系互动，重点从文化振兴、生态振兴、组织振兴方面探索创新共建形式，帮助提升组织力和党建水平。〔机关党委（人事司），有结对任务的单位〕</p>
<p>（十四）支持三县用好红色教育资源。协助三县宣传红色历史和红色旅游资源，组织局党员干部开展相关学习教育和主题党日活动。〔机关党委（人事司），各单位〕</p>
<p>（十五）加强挂职干部管理。做好挂职干部到期轮换工作，加强挂职干部日常管理，关心挂职干部生活，及时帮助解决工作和生活中的困难。视工作实际需要，可考虑协调安排三县干部在能源局系统挂职。〔机关党委（人事司）、规划司，派出挂职干部单位〕</p>
<p>（十六）组织专题培训。组织专家、学者赴三县授课，组织光伏、电力等运维管理及安全生产培训，根据工作需要，适时组织基层干部、致富带头人开展乡村振兴培训。〔机关党委（人事司）、规划司、安全司，华中能源监管局，甘肃能源监管办，相关单位〕</p>
<p>（十七）协调加强产学研合作。指导通渭县与中国农业科学院饲料研究所合作建设西北草畜与中药材产业试验站，开展光伏农业、技术推广、专家库建设等工作。〔规划司〕</p>
<p>（十八）开展教育帮扶。组织全局干部捐助低收入家庭学生，组织青年干部开展支教活动。协调企业、公益组织和爱心人士开展各类助学活动。〔机关团委，各单位〕</p>
<p>五、工作要求</p>
<p>（十九）着力提升帮扶成效。各单位要持续推进既有长效帮扶举措，定期了解帮扶成效，并根据乡村振兴新形势的需要，围绕提高脱贫户和边缘户自我发展能力，调整帮扶方式或开展新的帮扶项目，确保帮扶工作力度不减。</p>
<p>（二十）发挥政策试点作用。各单位要结合能源行业发展需要，将三县作为政策创新突破的试验田，组织建设试点工程，通过挂职干部一线摸排，及时发现问题，为政策制订提供思路和案例。</p>
<p>（二十一）拓展乡村振兴渠道。按照中央关于全面推进乡村振兴的决策部署，在发挥能源行业优势，继续帮助三县产业、人才、组织振兴的同时，各单位要在改善农村人居环境、加强农村精神文明建设方面拓展工作渠道、加大工作力度，助力实现生态振兴、文化振兴。</p>
`
};
export default {
data() {
return {
pagedata:pagedata
}
},
methods: {
}
}
</script>
<style>
</style>