uni-zhihuikuangshan/pages/tabbar/index/index - 宁煤新首页UI备份.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="container">
			<view class="top"></view>
			<view class="content">
				<!-- 查询 -->
				<view class="search">
					<view class="icon">
						<image src="./icon/search.png" mode=""></image>
					</view>
					<view class="text">查询</view>
				</view>
				<!-- 日期天气 -->
				<view class="date">
					<view class="text">2022年6月11日 星期六</view>
					<view class="icon">
						<image src="./icon/weather.png" mode=""></image>
					</view>
				</view>
				<!-- 值班 -->
				<view class="notice">
					<view class="left">
						<uni-notice-bar scrollable="true" :speed="20" background-color="#ffffff00" color="#fff"
							single="true" text="今日总值班：田禄禄 吕凤圆 雍兴成 郑宗儒 矿领导：翟文"></uni-notice-bar>
					</view>
					<view class="right">
						<view class="icon">
							<uni-icons type="more-filled" size="20" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 轮播 -->
				<view class="banner">
					<swiper class="box" autoplay circular>
						<swiper-item v-for="(item,index) in 2" :key="index">
							<view class="item">
								<view class="img">
									<image src="https://cdn.colorhub.me/0JcNa7IL8ym_3xaeDLY5DXc27xr_rC9ByusCJi3XQDU/rs:auto:280:0:0/g:ce/bG9jYWw6Ly8vY2Ev/ZDEvZTRlNzU0Yzdl/MTljMDA3YjQ3NmRj/ZDk4ZjIwOTExNWE2/NDViY2FkMS5qcGVn.jpg" mode="aspectFill"></image>
								</view>
								<view class="title">
									<view class="text">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</view>
									<view class="num">
										<text>{{index+1}} / {{2}}</text>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- 七块体系建设 -->
				<view class="fixed_system">
					<view class="line">
						<view class="item" v-for="(item,index) in 3" :key="index">
							<view class="icon">
								<image src="./icon/icon.png" mode=""></image>
							</view>
							<view class="text">思想建设</view>
						</view>
					</view>
					<view class="line">
						<view class="item" v-for="(item,index) in 4" :key="index">
							<view class="icon">
								<image src="./icon/icon.png" mode=""></image>
							</view>
							<view class="text">思想建设</view>
						</view>
					</view>
				</view>
				<!-- 待办事项 -->
				<view class="todo">
					<view class="left">
						<view class="title">
							<view class="icon"></view>
							<view class="text">待办事项</view>
						</view>
					</view>
					<view class="right">
						<view class="tip">您有 <text style="color: #FF0000;">5</text> 项待办</view>
						<view class="detail">
							详情 <uni-icons type="right" size="12" color="#B5B5B5"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 实操应用 -->
				<!-- 数据平台 -->
				<!-- 学习资料 -->
				<view class="nav">
					<view class="section" v-for="(item,index) in 3" :key="index">
						<view class="title">
							<view class="icon"></view>
							<view class="text">实操应用</view>
						</view>
						<view class="list">
							<view class="item" v-for="(item,index) in 10" :key="index">
								<view class="icon">
									<image src="./icon/icon_1.png" mode=""></image>
								</view>
								<view class="text">标准化考核</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 动态信息 -->
				<view class="news">
					<view class="title_box">
						<view class="left">
							<view class="title">
								<view class="icon"></view>
								<view class="text">动态信息</view>
							</view>
						</view>
						<view class="right">
							<view class="detail">
								查看全部 <uni-icons type="right" size="12" color="#B5B5B5"></uni-icons>
							</view>
						</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item,index) in 3" :key="index">
							<view class="icon"></view>
							<view class="inner">
								<view class="new_title">宁煤公司学习贯彻习近平总书记在中青班开班式上重要讲话精神</view>
								<view class="tip">
									<view class="time">2022-06-11</view>
									<view class="detail">
										详情<image src="./icon/new_detail.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {}
			}
		},
		onPullDownRefresh() {
			uni.reLaunch({
				url: "./index"
			})
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);

		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.status_bar {
		background-color: #00A0E8;
	}
	
	.container{
		position: relative;
	}

	.top {
		position: fixed;
		top: 0;
		left: 0;
		
		width: 750rpx;
		height: 665rpx;
		background-image: linear-gradient(to top, #FFFFFF 0%, #00A0E8 100%);
	}

	.content {
		position: absolute;
		top: 0rpx;

		box-sizing: border-box;
		padding: 25rpx;

		.search {
			width: 700rpx;
			height: 64rpx;
			box-sizing: border-box;
			border: 2rpx solid #FFFFFF;
			border-radius: 30rpx;
			opacity: 0.5;

			display: flex;
			align-items: center;
			padding: 0 30rpx;

			.icon {
				margin-right: 10rpx;

				image {
					width: 35rpx;
					height: 27rpx;
				}
			}

			.text {
				color: #DDF4FF;
				font-size: 27rpx;
			}
		}

		.date {
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.text {
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
				font-weight: 700;
			}

			.icon {
				image{
					width: 38rpx;
					height: 29rpx;
				}
			}
		}

		.notice {
			background: #FFFFFF40;
			border-radius: 21rpx;

			box-sizing: border-box;
			padding: 25rpx;
			
			
			height: 124rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: 580rpx;

				/deep/.uni-noticebar {
					margin-bottom: 0;
				}
			}

			.right {
				width: 50rpx;
				height: 72rpx;
				display: flex;
				align-items: center;

				.icon {
					transform: rotate(90deg);
				}
			}
		}

		.banner {
			margin-top: 30rpx;

			.box {
				width: 700rpx;
				height: 430rpx;

				.item {
					width: 700rpx;
					position: relative;

					.img {
						text-align: center;

						image {
							width: 700rpx;
							height: 400rpx;
							border-radius: 20rpx;
						}
					}

					.title {
						position: absolute;
						left: 0;
						bottom: 10rpx;

						box-sizing: border-box;
						padding: 15rpx 20rpx;
						width: 700rpx;

						font-size: 30rpx;

						display: flex;
						justify-content: space-between;
						.text {
							width: 520rpx;
							color: #FFFFFF;

							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.num {
							color: #FFFFFF;
							text {
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
		
		.fixed_system{
			margin: -10rpx -25rpx 0;
			
			box-sizing: border-box;
			padding: 25rpx 0;
			
			width: 750rpx;
			height: 436rpx;
			background-image: url(./icon/section.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			
			.line{
				box-sizing: border-box;
				padding: 25rpx;
				
				display: flex;
				justify-content: center;
				.item{
					margin-right: 54rpx;
					.icon{
						image{
							width: 109rpx;
							height: 109rpx;
							display: block;
						}
					}
					.text{
						font-size: 25rpx;
						color: #171717;
					}
				}
			}
			.line:first-child{
				.item:nth-child(3){
					margin-right: 0;
				}
			}
			.line:last-child{
				.item:nth-child(4){
					margin-right: 0;
				}
			}
		}
	
		.todo{
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				.title{
					display: flex;
					align-items: center;
					.icon{
						width: 9rpx;
						height: 34rpx;
						background-color: #04A0E8;
						border-radius: 5rpx;
					}
					.text{
						margin-left: 10rpx;
						color: #6A6A6A;
						font-size: 33rpx;
						font-weight: 700;
					}
				}
			}
			.right{
				display: flex;
				align-items: baseline;
				.tip{
					font-size: 25rpx;
					color: #6A6A6A;
				}
				.detail{
					margin-left: 24rpx;
					font-size: 25rpx;
					color: #B5B5B5;
				}
			}
		}
	
		.nav{
			background-color: #F7F9F7;
			margin: 0 -25rpx;
			width: 750rpx;
			padding-top: 20rpx;
			.section{
				margin-bottom: 20rpx;
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 25rpx;
				.title{
					padding: 20rpx 0;
					display: flex;
					align-items: center;
					.icon{
						width: 9rpx;
						height: 34rpx;
						background-color: #04A0E8;
						border-radius: 5rpx;
					}
					.text{
						margin-left: 10rpx;
						color: #6A6A6A;
						font-size: 33rpx;
						font-weight: 700;
					}
				}
					
				.list{
					width: 700rpx;
					overflow: hidden;
					.item{
						margin-top: 20rpx;
						float: left;
						margin-right: 20rpx;
						
						width: 120rpx;
						text-align: center;
						.icon{
							image{
								width: 73rpx;
								height: 73rpx;
							}
						}
						.text{
							color: #171717;
							font-size: 24rpx;
							
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					.item:nth-child(5n){
						margin-right: 0;
					}
				}
			}
		}
	
		.news{
			background-color: #F7F9F7;
			
			margin: 0 -25rpx;
			margin-bottom: 40rpx;
			padding-top: 20rpx;
			.title_box{
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 25rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					.title{
						display: flex;
						align-items: center;
						.icon{
							width: 9rpx;
							height: 34rpx;
							background-color: #04A0E8;
							border-radius: 5rpx;
						}
						.text{
							margin-left: 10rpx;
							color: #6A6A6A;
							font-size: 33rpx;
							font-weight: 700;
						}
					}
				}
				.right{
					display: flex;
					align-items: baseline;
					.tip{
						font-size: 25rpx;
						color: #6A6A6A;
					}
					.detail{
						margin-left: 24rpx;
						font-size: 25rpx;
						color: #B5B5B5;
					}
				}
			}
			.list{
				box-sizing: border-box;
				padding: 25rpx;
				background-color: #FFFFFF;
				.item{
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					
					border-bottom: 1rpx solid #F5F6F7;
					.icon{
						position: relative;
						top: 16rpx;
						
						width: 8rpx;
						height: 8rpx;
						background: #999999;
						border-radius: 50%;
					}
					.inner{
						width: 680rpx;
						.new_title{
							color: #171717;
							font-size: 29rpx;
							line-height: 44rpx;
						}
						.tip{
							margin: 20rpx 0;
							display: flex;
							justify-content: space-between;
							.time{
								font-size: 23rpx;
								color: #999999;
							}
							.detail{
								color: #FD6B5C;
								font-size: 23rpx;
								image{
									margin-left: 8rpx;
									width: 19rpx;
									height: 16rpx;
								}
							}
						}
					}
				}
				.item:last-child{
					border: none;
				}
			}
		}
	}
</style>