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>
		<u-scroll-list class="choiceness-box" indicatorColor="#dafff2" indicatorActiveColor="#34CE98">
			<view v-for="(item, index) in choiceness" class="choiceness-item" :key="index">
				<view class="choiceness-item-nav" :style="'backgroundColor:#' + item.color">
					<image class="choiceness-item-cover" :src="item.thumb"></image>
					<view class="choiceness-item-title">{{item.title}}</view>
					<view class="choiceness-item-describe">{{item.describe}}</view>
				</view>
			</view>
		</u-scroll-list>
		<!-- 话题广场 -->
		<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 {
			choiceness: [{
				title	: "低碳食谱",
				describe: "减肥人士的最爱",
				color	: "c8e6da",
				thumb	: 'https://cdn.uviewui.com/uview/goods/1.jpg'
			},{
				title	: "低GI食谱",
				describe: "家庭衡量膳食平衡",
				color	: "f0edff",
				thumb	: 'https://cdn.uviewui.com/uview/goods/1.jpg'
			},{
				title	: "高蛋白食谱",
				describe: "健身搭配食用更佳",
				color	: "fbeed3",
				thumb	: 'https://cdn.uviewui.com/uview/goods/1.jpg'
			}]
		};
	},
	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;
		}
	}
}

// 精选推荐
.choiceness-box{
	.choiceness-item{
		padding: 0 $padding/3;
		&:last-child{
			padding-right: $padding;
		}
		&:first-child{
			padding-left: $padding;
		}
		&-nav{
			position: relative;
			padding: $padding;
			border-radius: $radius;
			padding-right: $padding + 108rpx;
		}
		&-cover{
			position: absolute;
			right: $margin;
			top: $margin;
			width: 88rpx;
			height: 88rpx;
			vertical-align: top;
		}
		&-title{
			line-height: 44rpx;
			width: 160rpx;
			font-weight: bold;
			font-size: $title-size;
			color: $text-color;
			@extend .nowrap;
		}
		&-describe{
			color: $text-gray;
			line-height: 44rpx;
			font-size: 20rpx;
			@extend .nowrap;
		}
	}
}

// 话题广场
.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;
			font-weight: bold;
			color: $text-color;
		}
		.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>