ZhHealth/pages/index/index.vue

<template>
	<view class="content">
		<view class="status">
			<view class="status-main">
				<view class="helloe">
					欢迎使用ZH健康
				</view>
				<view class="btns">
					<view class="btns-item">
						<image src="@/static/icon/sign-icon.png" mode="widthFix"></image>
					</view>
					<view class="btns-item show">
						<uni-icons custom-prefix="iconfont" type="icon-pinglun" size="25"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<!-- 搜索 -->
		<view class="search">
			<navigator class="search-nav" url="">
				<uni-icons class="search-icon" custom-prefix="iconfont" type="icon-sousuo" color="#34CE98" size="20"></uni-icons>
				低脂鸡胸肉
			</navigator>
		</view>
		<!-- 排行榜 -->
		<view class="img-card">
			<image src="@/static/dev/img-01.png" mode="widthFix"></image>
		</view>
		<!-- 精选推荐 -->
		<!-- <view class="new-box">
			<view class="title">精选推荐</view>
		</view> -->
		<!-- 话题广场 -->
		<view class="new-box">
			<view class="title">话题广场</view>
			<view class="new-item">
				<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/7.2.jpg" mode="aspectFill"></image>
				<view class="new-title">坚持做瑜伽可以减肥吗</view>
				<view class="new-tool">
					<text>阅读100</text>
					<text>赞100</text>
				</view>
			</view>
			<view class="new-item">
				<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/yundong1.jpg" mode="aspectFill"></image>
				<view class="new-title">有没有减肥秘诀/减肥偏方/减肥窍门</view>
				<view class="new-tool">
					<text>阅读100</text>
					<text>赞100</text>
				</view>
			</view>
			<view class="new-item">
				<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/yundong2.jpg" mode="aspectFill"></image>
				<view class="new-title">只需2招迅速变出小蛮腰</view>
				<view class="new-tool">
					<text>阅读100</text>
					<text>赞100</text>
				</view>
			</view>
			<view class="new-item">
				<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/jian.jpg" mode="aspectFill"></image>
				<view class="new-title">有效方便的减肥方法有哪些</view>
				<view class="new-tool">
					<text>阅读100</text>
					<text>赞100</text>
				</view>
			</view>
		</view>
		<!-- ZH健康 -->
		<view class="img-card">
			<image src="@/static/dev/img-00.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-top: calc(var(--status-bar-height) + 100rpx);
		overflow: hidden;
	}
	.status{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		height: 100rpx;
		background-color: white;
		@extend .ios-top;
		.status-main{
			padding: 0 $padding;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.helloe{
				line-height: 100rpx;
				font-size: $title-size + 10;
				font-weight: bold;
			}
			.btns{
				margin-left: $margin;
				display: flex;
				.btns-item{
					position: relative;
					text-align: right;
					margin-left: $margin;
					image{
						width: 46rpx;
						vertical-align: top;
					}
					&.show::before{
						content: "";
						height: 10rpx;
						width: 10rpx;
						position: absolute;
						right: 0;
						top: 0;
						background: $text-price;
						border-radius: 50%;
					}
				}
			}
		}
	}
	
	// 搜索
	.search{
		padding: 0 $padding;
		.search-nav{
			background: $window-color;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			color: $text-gray;
			font-size: $title-size-lg;
			padding: 0 $padding;
			.search-icon{
				vertical-align: middle;
				margin-right: $margin/2;
			}
		}
	}
	
	// 话题广场
	.new-box{
		margin: $margin;
		.title{
			font-weight: bold;
			font-size: $title-size + 4;
		}
		.new-item{
			position: relative;
			margin-top: $margin - 10;
			background: #f5fdfa;
			border-radius: $radius;
			padding: $padding ($padding*2 + 200rpx) $padding $padding;
			.new-cover{
				position: absolute;
				right: $padding;
				top: $padding;
				width: 200rpx;
				height: 150rpx;
				border-radius: $radius;
			}
			.new-title{
				font-size: $title-size;
				line-height: 45rpx;
				min-height: 100rpx;
				margin-bottom: 10px;
			}
			.new-tool{
				color: $text-gray;
				font-size: $title-size-sm;
				line-height: 40rpx;
				text{
					margin-right: $margin/2;
				}
			}
		}
	}
	
	// 卡片
	.img-card{
		margin: $margin;
		image{
			width: 100%;
			vertical-align: top;
			border-radius: $radius;
		}
	}
</style>