薛定喵君

uni-app首页样式分享

2020-08-25 20:42:26

分享一张首页样式

首页涉及内容

城市选择、轮播、一些列表

预览效果

代码

index.vue


<template>
	<view class="page">
		<uni-popup :show="show" type="right" :custom="true" :mask-click="false">
			<citySelect @back_city="back_city" />
		</uni-popup>
		<view class="top">
			<view class="location-info" @click="selectCity">
				<image src="../../../static/img/location-icon.png" class="icon" mode="aspectFit" />
				<text class="addr">{{region}}</text>
				<uni-icons class="arrow" color="#fff" type="arrowdown" size="10" />
			</view>
			<view class="search-box">
				<uni-icons class="search" color="#404040" type="search" size="18" />
				<input class="m-input" type="text" v-model="keyword" placeholder="搜索你需要了解的品种" @click="toSearch" />
			</view>
		</view>
		<view class="navs">
			<view class="page-section-spacing">
				<view class="swiper-box">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item>
							<view class="swiper-item uni-bg-red">
								<image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2932945092,92090541&fm=26&gp=0.jpg" mode="aspectFill"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">
								<image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3460026757,1697811979&fm=26&gp=0.jpg"
								 mode="aspectFill"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">
								<image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3179510954,476163921&fm=11&gp=0.jpg" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="modules">
				<view class="item">
					<image class="pic" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=166096106,1842696106&fm=26&gp=0.jpg" />
					<view class="name">我的待诊</view>
				</view>
				<view class="item">
					<image class="pic" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3750210115,3994859311&fm=26&gp=0.jpg" />
					<view class="name">名医专家</view>
				</view>
				<view class="item">
					<image class="pic" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4143029327,3538579640&fm=26&gp=0.jpg" />
					<view class="name">视频讲堂</view>
				</view>
				<view class="item">
					<image class="pic" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2674117081,869618551&fm=15&gp=0.jpg" />
					<view class="name">常见疾病</view>
				</view>
			</view>
		</view>
		<view class="news-box">
			<view class="section-info">
				<view class="title">最新新闻</view>
				<navigator class="more" url="">查看更多 ></navigator>
			</view>
			<view class="news-list">
				<view class="item">
					<view class="left">
						<view class="title">9月水产品市场价格监测简报</view>
						<view class="extra-info">
							<view class="type">新闻资讯</view>
							<text class="date">2019-10-29</text>
						</view>
					</view>
					<view class="right">
						<image class="news-pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581333477046&di=3291ab2737a7ccade9bf928311b3569e&imgtype=0&src=http%3A%2F%2Fwww.jituwang.com%2Fuploads%2Fallimg%2F160306%2F257923-1603060KK060.jpg"
						 mode="aspectFill" />
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="title">9水产养殖业绿色发展现场会在浙江召开</view>
						<view class="extra-info">
							<view class="type">政策法规</view>
							<text class="date">2019-10-29</text>
						</view>
					</view>
					<view class="right">
						<image class="news-pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581333477046&di=3291ab2737a7ccade9bf928311b3569e&imgtype=0&src=http%3A%2F%2Fwww.jituwang.com%2Fuploads%2Fallimg%2F160306%2F257923-1603060KK060.jpg"
						 mode="aspectFill" />
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="title">关于发布《水产养殖用药明白纸》宣传材料的通知</view>
						<view class="extra-info">
							<view class="type">预测预报</view>
							<text class="date">2019-10-29</text>
						</view>
					</view>
					<view class="right">
						<image class="news-pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581333477046&di=3291ab2737a7ccade9bf928311b3569e&imgtype=0&src=http%3A%2F%2Fwww.jituwang.com%2Fuploads%2Fallimg%2F160306%2F257923-1603060KK060.jpg"
						 mode="aspectFill" />
					</view>
				</view>
			</view>
		</view>
		<view class="experts-box">
			<view class="section-info">
				<view class="title">精选好专家</view>
				<navigator class="more" url="">更多精选 ></navigator>
			</view>
			<view class="experts-list">
				<view class="item">
					<view class="title">专家推荐</view>
					<view class="extra-info">精准诊断病情</view>
				</view>
				<view class="item">
					<view class="title">好评最多</view>
					<view class="extra-info">治疗方案最细致</view>
				</view>
			</view>
		</view>
		<view class="qa-box">
			<view class="section-info">
				<view class="title">最新问答</view>
				<navigator class="more" url="">更多问答 ></navigator>
			</view>
			<view class="qa-list">
				<view class="item">
					<view class="title">怎样简单治疗鱼的水霉病？</view>
					<view class="user-info">
						<image class="avatar" src="http://img3.imgtn.bdimg.com/it/u=15857274,120780525&fm=26&gp=0.jpg" mode="aspectFill" />
						<view class="name">今天去要饭了吗</view>
					</view>
					<view class="q-content">就像人天气好想要吃饭一样，鱼商有些事情说的对，有些事情说的也不一定对，个别的的巴不得你天天死鱼...</view>
					<view class="q-pic">
						<image class="pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581347534539&di=00cfb41b950fba48ae1cfbd70b520ba0&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F65%2F38%2F16300534049378135355388981738.jpg"
						 mode="aspectFill" />
						<image class="pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581347534536&di=624201c9e6a85a70468c7c0d18cb4057&imgtype=0&src=http%3A%2F%2Fimages1.aoyou.cc%2Fhomepage%2FProductList%2F201205%2FL64D8N25173435.jpg"
						 mode="aspectFill" />
						<image class="pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581347616120&di=054457206a77f95341405fc22d4d2fea&imgtype=0&src=http%3A%2F%2Fimg011.hc360.cn%2Fg6%2FM06%2FC8%2F0B%2FwKhQsVNM1sSEHtoaAAAAAN_LSSc876.jpg"
						 mode="aspectFill" />
					</view>
					<view class="other-info">
						<text class="total-ans">24个回答</text>
						· 2019-10-29
					</view>
				</view>
				<view class="item">
					<view class="title">邓氏鱼是最古老的有脊椎动物，这么判定的？是因为没有挖到比他还古老的鱼的化石吗？</view>
					<view class="user-info">
						<image class="avatar" src="http://img3.imgtn.bdimg.com/it/u=15857274,120780525&fm=26&gp=0.jpg" mode="aspectFill" />
						<view class="name">今天去要饭了吗</view>
					</view>
					<view class="q-content">就像人天气好想要吃饭一样，鱼商有些事情说的对，有些事情说的也不一定对，个别的的巴不得你天天死鱼...</view>
					<view class="other-info">
						<text class="total-ans">24个回答</text>
						· 2019-10-29
					</view>
				</view>
			</view>
		</view>
		<view class="videos-box">
			<view class="section-info">
				<view class="title">知识讲堂</view>
				<navigator class="more" url="">更多知识 ></navigator>
			</view>
			<view class="videos-list">
				<view class="item">
					<view class="left">
						<image class="cover" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4075943997,2460011434&fm=26&gp=0.jpg"
						 mode="aspectFill" />
						<view class="play-time">
							<image class="play-icon" src="/static/img/play.png" mode="aspectFit" />
							18:08
						</view>
					</view>
					<view class="right">
						<view class="title">9月水产品市场价格监测简报</view>
						<view class="extra-info">
							<view class="owner">爱泡研究所</view>
							·
							<text class="date">2019-10-29</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<image class="cover" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4075943997,2460011434&fm=26&gp=0.jpg"
						 mode="aspectFill" />
						<view class="play-time">
							<image class="play-icon" src="/static/img/play.png" mode="aspectFit" />
							18:08
						</view>
					</view>
					<view class="right">
						<view class="title">针对鱼病，用碘伏好还是高锰酸钾好，看大神怎么说的!</view>
						<view class="extra-info">
							<view class="owner">爱泡研究所</view>
							·
							<text class="date">2019-10-29</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import uniIcons from '@/components/uni-icon/uni-icon.vue';
	import citySelect from '@/components/city-select/city-select.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniIcons,
			citySelect,
			uniPopup
		},
		data() {
			return {
				show: false,
				region: 'xxxxxxxxx',
				keyword: '',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			};
		},
		onLoad() {},
		onReachBottom() {},
		onPullDownRefresh() {},
		methods: {
			...mapMutations(['logout']),
			toSearch() {
				uni.navigateTo({
					url: '../../search/search'
				});
			},
			selectCity() {
				this.show = true;
			},
			back_city(e) {
				if (e !== 'no') {
					this.region = e.cityName;
				}
				this.show = false;
			}
		}
	};
</script>

<style lang="scss">
	.page {
		background: #fbf7fb;

		.top {
			height: 156px;
			background: #1550b5;
			padding: 0 16px;

			.location-info {
				display: flex;
				align-content: flex-start;
				align-items: center;
				justify-content: flex-start;
				justify-items: center;
				color: #fff;

				.icon {
					width: 16px;
					height: 20px;
					margin-right: 8px;
				}

				.addr {
					font-size: 16px;
					font-weight: 500;
					margin-right: 4px;
				}
			}

			.search-box {
				margin-top: 22px;
				background: #fff;
				position: relative;
				height: 36px;
				display: flex;
				align-content: center;
				justify-content: flex-start;
				border-radius: 4px;

				.search {
					position: absolute;
					left: 16px;
					top: 50%;
					margin-top: -9px;
				}

				.m-input {
					width: 100%;
					height: 100%;
					padding-left: 38px;
					border-radius: 4px;

					.uni-input-placeholder {
						color: #999999;
						font-size: 14px;
					}
				}
			}
		}

		.navs {
			min-height: 214px;
			padding: 0 16px;
			background: #fff;

			.page-section-spacing {
				position: relative;
				height: 80px;

				.swiper-box {
					position: absolute;
					z-index: 10;
					background: #fff;
					width: 100%;
					top: -48px;
					border-radius: 4px;
					box-shadow: 0px 2px 12px 0px rgba(153, 153, 153, 0.16);

					.swiper {
						height: 130px;

						.swiper-item {
							border-radius: 4px;
							height: 100%;

							image {
								width: 100%;
							}
						}
					}
				}
			}

			.modules {
				margin-top: 32px;
				display: flex;

				.item {
					flex: 1;
					text-align: center;

					.pic {
						width: 48px;
						height: 48px;
						border-radius: 100%;
						background: #f1f1f1;
						margin: 0 auto;
					}

					.name {
						color: #333333;
						font-size: 14px;
					}
				}
			}
		}

		.news-box {
			margin-top: 12px;
			padding: 24px 16px;
			background: #fff;

			.section-info {
				display: flex;
				justify-content: space-between;
				align-content: center;
				font-size: 14px;
				align-items: center;

				.title {
					font-size: 18px;
					color: #404040;
					font-weight: bold;
				}

				.more {
					color: #1550b5;
				}
			}

			.news-list {
				margin-top: 8px;

				.item {
					display: flex;
					justify-content: space-between;
					margin: 16px 0;

					.left {
						flex: 1;

						.title {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							height: 44px;
							line-height: 22px;
							font-size: 16px;
							color: #404040;
							font-weight: bold;
						}

						.extra-info {
							display: flex;
							align-content: flex-start;
							font-size: 14px;
							margin-top: 16px;

							.type {
								color: #1550b5;
								margin-right: 16px;
							}

							.date {
								color: #999999;
							}
						}
					}

					.right {
						.news-pic {
							width: 110px;
							height: 80px;
						}
					}
				}
			}
		}

		.experts-box {
			margin-top: 12px;
			padding: 24px 16px;
			background: #fff;

			.section-info {
				display: flex;
				justify-content: space-between;
				align-content: center;
				font-size: 14px;
				align-items: center;

				.title {
					font-size: 18px;
					color: #404040;
					font-weight: bold;
				}

				.more {
					color: #1550b5;
				}
			}

			.experts-list {
				margin-top: 20px;
				display: flex;
				align-content: flex-start;

				.item {
					color: #fff;
					font-size: 14px;
					padding: 18px 0 16px 12px;
					flex: 1;

					.title {
						font-size: 16px;
					}

					.extra-info {
						margin-top: 4px;
					}

					&:nth-child(1) {
						background: linear-gradient(315deg, rgba(28, 206, 175, 1) 0%, rgba(0, 141, 152, 1) 100%);
						margin-right: 15px;
					}

					&:nth-child(2) {
						background: linear-gradient(48deg, rgba(255, 205, 80, 1) 0%, rgba(244, 166, 0, 1) 100%);
					}
				}
			}
		}

		.qa-box {
			margin-top: 12px;
			padding: 24px 16px;
			background: #fff;

			.section-info {
				display: flex;
				justify-content: space-between;
				align-content: center;
				font-size: 14px;
				align-items: center;

				.title {
					font-size: 18px;
					color: #404040;
					font-weight: bold;
				}

				.more {
					color: #1550b5;
				}
			}

			.qa-list {
				margin-top: 20px;

				.item {
					margin: 16px 0;

					.title {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						line-height: 22px;
						font-size: 16px;
						color: #404040;
						font-weight: bold;
					}

					.user-info {
						margin-top: 12px;
						display: flex;
						align-content: flex-start;
						align-items: center;

						.avatar {
							width: 32px;
							height: 32px;
							border-radius: 100%;
						}

						.name {
							margin-left: 12px;
							font-size: 14px;
							color: #404040;
							font-weight: bold;
						}
					}

					.q-content {
						font-size: 14px;
						line-height: 20px;
						margin: 4px 0 12px 0;
						color: #666666;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.q-pic {
						display: flex;
						align-content: flex-start;

						.pic {
							flex: 1;
							width: 104px;
							height: 104px;
							border-radius: 8px;

							&:nth-child(2) {
								margin: 0 16px;
							}
						}
					}

					.other-info {
						color: #999999;
						font-size: 14px;
						margin-top: 12px;

						.total-ans {
							color: #1550b5;
							margin-right: 5px;
						}
					}
				}
			}
		}

		.videos-box {
			margin-top: 12px;
			padding: 24px 16px;
			background: #fff;

			.section-info {
				display: flex;
				justify-content: space-between;
				align-content: center;
				font-size: 14px;
				align-items: center;

				.title {
					font-size: 18px;
					color: #404040;
					font-weight: bold;
				}

				.more {
					color: #1550b5;
				}
			}

			.videos-list {
				margin-top: 8px;

				.item {
					display: flex;
					justify-content: flex-start;
					margin: 16px 0;

					.left {
						width: 121px;
						margin-right: 12px;
						position: relative;
						height: 75px;

						.cover {
							width: 121px;
							height: 75px;
						}

						.play-time {
							position: absolute;
							bottom: 8px;
							right: 4px;
							background: rgba(33, 33, 33, 0.6);
							border-radius: 12px;
							display: flex;
							align-content: flex-start;
							color: #fff;
							font-size: 10px;
							align-items: center;
							padding: 0 8px;

							.play-icon {
								width: 10px;
								height: 10px;
								margin-right: 3px;
							}
						}
					}

					.right {
						.title {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							height: 44px;
							line-height: 22px;
							font-size: 16px;
							color: #404040;
							font-weight: bold;
						}

						.extra-info {
							display: flex;
							align-content: flex-start;
							font-size: 14px;
							margin-top: 7px;
							color: #999999;

							.owner {
								margin-right: 5px;
							}

							.date {
								margin-left: 5px;
							}
						}
					}
				}
			}
		}
	}
</style>

@/components/uni-popup/uni-popup.vue


<template>
	<view v-if="showPopup" class="uni-popup">
		<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" />
		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)">
			<view class="uni-popup__wrapper-box" @click.stop="clear">
				<slot />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'UniPopup',
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			type: {
				type: String,
				default: 'center'
			},
			// 是否开启自定义
			custom: {
				type: Boolean,
				default: false
			},
			// maskClick
			maskClick: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				ani: '',
				showPopup: false
			}
		},
		watch: {
			show(newValue) {
				if (newValue) {
					this.open()
				} else {
					this.close()
				}
			}
		},
		created() {},
		methods: {
			clear() {},
			open() {
				this.$emit('change', {
					show: true
				})
				this.showPopup = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.ani = 'uni-' + this.type
					}, 30)
				})
			},
			close(type) {
				if (!this.maskClick && type) return
				this.$emit('change', {
					show: false
				})
				this.ani = ''
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false
					}, 300)
				})
			}
		}
	}
</script>
<style>
	@charset "UTF-8";

	.uni-popup {
		position: fixed;
		top: 0;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999;
		overflow: hidden
	}

	.uni-popup__mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background: rgba(0, 0, 0, .4);
		opacity: 0
	}

	.uni-popup__mask.ani {
		transition: all .3s
	}

	.uni-popup__mask.uni-bottom,
	.uni-popup__mask.uni-center,
	.uni-popup__mask.uni-top {
		opacity: 1
	}

	.uni-popup__wrapper {
		position: absolute;
		z-index: 999;
		box-sizing: border-box
	}

	.uni-popup__wrapper.ani {
		transition: all .3s
	}

	.uni-popup__wrapper.top {
		top: 0;
		left: 0;
		width: 100%;
		transform: translateY(-100%)
	}

	.uni-popup__wrapper.bottom {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateY(100%)
	}

	.uni-popup__wrapper.center {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: scale(1.2);
		opacity: 0
	}

	.uni-popup__wrapper-box {
		position: relative;
		box-sizing: border-box
	}

	.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		padding: 30upx;
		background: #fff
	}

	.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		position: relative;
		max-width: 80%;
		max-height: 80%;
		overflow-y: scroll
	}

	.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
	.uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
		width: 100%;
		max-height: 500px;
		overflow-y: scroll
	}

	.uni-popup__wrapper.uni-bottom,
	.uni-popup__wrapper.uni-top {
		transform: translateY(0)
	}

	.uni-popup__wrapper.uni-center {
		transform: scale(1);
		opacity: 1
	}
</style>
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用，但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码

← 微信公众号接入AI聊天机器人→

阅读量：

评 论：

好文推荐
Copyright ©2022 设计师: 薛定喵君. All Rights Reserved
苏ICP备16010590号-1
每天进步一点点~