<template>
	<view>
		<!-- 顶部背景 -->
		<view class="head-Bg">
			<lwTopnav :bgColor="bgColor" lwColor="#fff" lwTitle="首页"></lwTopnav>
			<view class="home-search">
				<u-search height="80" bgColor="#fff" placeholder="请输入关键字" clearabled animation v-model="keyword"></u-search>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="swiper-view">
			<u-swiper @click="handleClickSwiper" mode="number" :list="swiperList" height="400" 
			indicatorPos="bottomRight" borderRadius="0"></u-swiper>
		</view>
		<!-- 横向滚动列表 -->
		<view class="horizontal-scroll">
			<Function :list="functionList"/>
		</view>
		<!-- 番禺区“人才生态30条” -->
		<view class="web-link">
			<image :src="webLinkImg" @click="toWeb"></image>
		</view>
		<!-- 智汇谷简介、成员单位一览、人才留言板 -->
		<view class="common-blocks">
			<view class="common-left" @click="toShowIntroduce(1)">
				<view class="left-top">
					<text class="lto">智汇谷简介</text>
					<text class="ltt">点击进入智汇谷简介</text>
					<view class="see">立即查看</view>
				</view>
				<view class="left-bottom" @click="toShowIntroduce(2)">
					<text class="lbo">成员单位一览</text>
					<text class="lbt">点击进入成员单位一览</text>
					<view class="see">立即查看</view>
				</view>
			</view>
			<view class="common-right" @click="toMessage">
				<text class="rto">人才留言板</text>
				<text class="rtt">点击进入人才留言板</text>
				<view class="see">立即查看</view>
			</view>
		</view>
		<!-- 工作动态 -->
		<view class="work-dynamics">
			<u-section title="工作动态" :showLine="false" fontSize="40" subTitle="查看更多" @click="toList"></u-section>
			<view style="height: 40rpx"></view> 
			<Dynamics :list="dynamicsList" tip="置顶" />
		</view>
	</view>
</template>

<script>
	import lwTopnav from "@/components/lw-topnav/lw-topnav";
	import Function from "./component/functions.vue";
	import Dynamics from "./component/dynamics.vue";
	export default {
		components: {
			lwTopnav,Function,Dynamics
		},
		props:{
			bgColor:{
				type: String,
				default: 'transparent'
			}
		},
		data() {
			return {
				keyword:'',//搜索内容
				// 轮播图
				swiperList: [
				    'http://8.138.171.103/static/banner.png',
				],
				// 功能按钮
				functionList:[
					{icon:"http://8.138.171.103/static/talentPolicy.png",title:'人才政策'},
					{icon:"http://8.138.171.103/static/talentServices.png",title:'人才服务'},
					{icon:"http://8.138.171.103/static/resourceDocking.png",title:'资源对接'}
				],
				// 人才生态30条链接
				url:'https://b.pyrc.com.cn/pyrsj/public/login.asp',
				// 人才生态30条图片
				webLinkImg:'http://8.138.171.103/static/webLink.png',
				// 动态列表
				dynamicsList:[{
					isTop: true,
					title: '本年度广州市积分制入户申请即将开放！你想知道的都在这里',
					content: '<p>2024年度广州市积分制入户工作正式启动今年的入户指标为1.6万个10月8日起接受积分制入户申请</p>',
					img: 'http://8.138.171.103/static/banner.png',
					readCount: 597,
					date: '2024-04-30'
				},{
					isTop: false,
					title: '本年度广州市积分制入户申请即将开放！你想知道的都在这里',
					content: '<p>2024年度广州市积分制入户工作正式启动今年的入户指标为1.6万个10月8日起接受积分制入户申请</p>',
					img: 'http://8.138.171.103/static/banner.png',
					readCount: 597,
					date: '2024-04-30'
				}],
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '首页'
			})
		},
		methods:{
			// 跳转网络连接-人才生态30条
			toWeb(){
				uni.navigateTo({
					url: `/pages/home/component/web?url=${this.url}`
				})
			},
			// 点击轮播图
			handleClickSwiper(index){
				uni.navigateTo({
					url: '/pages/article/articleDetails'
				})
			},
			// 三大功能中的智汇谷简介和成员单位一览
			toShowIntroduce(index){
				uni.navigateTo({
					url: `/pages/article/richDetail?title=${index===1?'智汇谷简介':'成员单位一览'}`
				})
			},
			// 留言板
			toMessage(){
				uni.navigateTo({
					url: '/pages/home/component/message'
				})
			},
			// 动态查看更多
			toList(){
				uni.navigateTo({
					url: '/pages/article/articleList'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.home-search{
	padding: 10rpx 35rpx;
	height: 120rpx;
}
.head-Bg{
	// position: fixed;
	top: 0rpx;
	left: 0rpx;
	z-index: 1;
	width: 100%;
	background-color: #FFFFFF;
	overflow: hidden;
	background: -webkit-linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%);
	background: linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%);
}
.swiper-view{
	.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;
	    }
	}
}
.horizontal-scroll{
	margin: 50rpx 0 0 0;
	width: 100%;
}
.web-link{
	padding: 0 25rpx;
	height: 250rpx;
	border-radius: 16rpx;
	image{
		border-radius: 16rpx;
		width: 100%;
		height: 100%;
	}
}
.common-blocks{
	padding: 0 25rpx;
	margin-top: 70rpx;
	display: flex;
	height: 500rpx;
	width: 100%;
	justify-content: space-between;
	.common-left{
		width: 48%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.left-top{
			height: 48%;
			border-radius: 12rpx;
			background: linear-gradient( 100deg, #d5ffd9 0%, rgba(255,255,255,0.77) 100%);
			padding: 25rpx 0 0 25rpx;
			display: flex;
			flex-direction: column;
			.lto{
				color: #2cae63;
				font-weight: bold;
				font-size: 35rpx;
			}
			.ltt{
				margin-top: 10rpx;
				margin-bottom: 40rpx;
				color: #878787;
				font-size: 26rpx;
			}
			.see{
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 56rpx;
				width: 150rpx;
				height: 60rpx;
				background-color: #51c280;
				color: #fff;
				font-size: 25rpx;
			}
		}
		.left-bottom{
			height: 48%;
			border-radius: 12rpx;
			background: linear-gradient( 100deg, #ffefd5 0%, rgba(255,255,255,0.77) 100%);
			padding: 25rpx 0 0 25rpx;
			display: flex;
			flex-direction: column;
			.lbo{
				color: #e7940a;
				font-weight: bold;
				font-size: 35rpx;
			}
			.lbt{
				color: #878787;
				margin-top: 10rpx;
				font-size: 26rpx;
				margin-bottom: 40rpx;
			}
			.see{
				border-radius: 56rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 150rpx;
				height: 60rpx;
				background-color: #e89e23;
				color: #fff;
				font-size: 25rpx;
			}
		}
	}
	.common-right{
		width: 48%;
		border-radius: 12rpx;
		background: linear-gradient( 190deg, #e7e8fd 0%, rgba(255,255,255,0.77) 100%);
		padding: 25rpx 0 0 25rpx;
		display: flex;
		flex-direction: column;
		.rto{
			color: #4c5fdf;
			font-weight: bold;
			font-size: 35rpx;
		}
		.rtt{
			color: #878787;
			margin-top: 10rpx;
			margin-bottom: 40rpx;
			font-size: 26rpx;
		}
		.see{
			border-radius: 56rpx;
			width: 150rpx;
			height: 60rpx;
			background-color: #8594f1;
			color: #fff;
			font-size: 25rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.work-dynamics{
	padding: 0 25rpx;
	margin-top: 70rpx;
}
</style>
