jp-railway/pages/homePage/homePage.vue

<template>
	<view>
		<!-- 吸顶搜索框 -->
		<view class="sticky" v-if="flag">
			<input type="text" placeholder="请输入搜索内容">
		</view>
		<!-- 轮播图 -->
		<view class="slideshow">
			<view class="wrap">
				<view class="search-box">
					<u-search color="black" search-icon-color="#fff" placeholder-color="#fff" bg-color="#8a7170"
						placeholder="请输入搜索内容" :show-action="false" input-align="center"></u-search>
				</view>
				<u-swiper mode="none" :list="list" :title="true" height="422"></u-swiper>
			</view>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<view class="title">
				公告
			</view>
			<view class="content">
				荆州市地方铁路有限公司招标111111111
			</view>
			<view class="date">
				2022-12-08
			</view>
		</view>
		<!-- 宫格 -->
		<view class="grid">
			<u-grid :col="4" :border="false">
				<u-grid-item>
					<img src="../../assets/img/tlgk.png" alt="">
					<view class="grid-text">铁路概况</view>
				</u-grid-item>
				<u-grid-item>
					<img src="../../assets/img/jgsz.png" alt="">
					<view class="grid-text">机构设置</view>
				</u-grid-item>
				<u-grid-item>
					<img src="../../assets/img/zwdt.png" alt="">
					<view class="grid-text">政务动态</view>
				</u-grid-item>
				<u-grid-item>
					<img src="../../assets/img/djdt.png" alt="">
					<view class="grid-text">党建动态</view>
				</u-grid-item>
				<u-grid-item>
					<img src="../../assets/img/fzxc.png" alt="">
					<view class="grid-text">法制宣传</view>
				</u-grid-item>
				<u-grid-item>
					<img src="../../assets/img/jjjc.png" alt="">
					<view class="grid-text">纪检监察</view>
				</u-grid-item>
				<u-grid-item>
					<img src="../../assets/img/wmcj.png" alt="">
					<view class="grid-text">文明创建</view>
				</u-grid-item>
				<u-grid-item>
					<img src="../../assets/img/wnfw.png" alt="">
					<view class="grid-text">为您服务</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 新闻资讯 -->
		<view class="news">
			<view class="title">
				<view class="icon">
					<img src="../../assets/img/news.png" alt="">
				</view>
				<view class="text">
					新闻资讯
				</view>

			</view>
			<view class="news-item" v-for="item in 4">
				<view class="content">
					<view class="news-title">
						李春华带队到岳阳港考察学习
					</view>
					<view class="information">
						<view class="classify">
							行业资讯
						</view>
						<view class="date">
							2020-12-30
						</view>

					</view>
				</view>

				<view class="img">
					<img src="../../assets/img/newsPic.png" alt="">
				</view>

			</view>
		</view>
		<u-divider bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
		<tabbar current="0"></tabbar>
	</view>
</template>

<script>
	import tabbar from "../../components/Tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				flag: false,
				scrollTop: "",
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],

			}
		},
		methods: {
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
				console.log(this.scrollTop);
				if (this.scrollTop >= 200) {
					this.flag = true;
				} else {
					this.flag = false;
				}


			},

		},



	}
</script>

<style scoped lang="scss">
	page {
		padding-bottom: 50px;
		font-family: 'Regular';
	}

	.sticky {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		border-bottom: 1px solid #fff;
		padding: 16rpx 40rpx;
		background-color: #fff;

		uni-input {
			background-color: #E8E8E8;
			height: 32px;
			line-height: 32px;
			border-radius: 8px;
			text-align: center;
		}
	}



	.u-search {


		/deep/.uni-input-placeholder {
			font-weight: bold;
		}

		/deep/.uni-input-input {
			color: #ffffff !important;
			font-weight: bold;
		}
	}

	.search-box {
		width: 100%;
		background-color: #4F3C27;
		padding: 16rpx 40rpx;
		position: absolute;
		line-height: 32px;
		color: #ffffff !important;
		opacity: 0.4;
		z-index: 999;
		opacity: 0.4;
	}


	// 公告
	.notice {
		background-color: rgba(255, 255, 255, 1);
		line-height: 40px;
		display: flex;
		padding: 0 32rpx;

		.title {
			color: rgba(31, 74, 153, 1);
			font-size: 18px;
			font-weight: bold;
		}

		.content {
			width: 380rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: rgba(51, 51, 51, 1);
			margin-left: 14px;
		}

		.date {
			color: rgba(119, 119, 119, 1);
			margin-left: auto;
		}
	}

	// 宫格
	.grid {
		img {
			width: 80rpx;
			height: 80rpx;
		}

		.grid-text {
			color: rgba(51, 51, 51, 1);
			margin-top: 8rpx;
		}
	}

	// 新闻资讯
	.news {
		padding: 40rpx 32rpx;
		background-color: rgba(244, 244, 244, 1);

		.title {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
font-family: 'SemiBold';
			img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}

		.news-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;

			.content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.news-title {
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
					text-align: justify;
					width: 438rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.information {
					margin-top: 44rpx;
					display: flex;
					justify-content: space-between;
					color: #777777;
				}
			}
		}

		.img {
			width: 224rpx;
			border-radius: 5px;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>