xiongmao/pages/health-encyclopedia/health-encyclopedia.vue

<!-- 康养百科 -->
<template>
	<view class="wrap">

		<view class="header">
			<view class="header-bottom">
				<view class="search-bar">
					<image src="../../static/search-icon.png" mode="" class="search-icon"></image>
					<input type="text" value="" placeholder="亚健康养生" placeholder-class="placeholder"
						class="search-input" />
					<button type="default" class="search-btn">搜索</button>
				</view>
				<view class="header-right">
					<button type="default">
						<image src="../../static/head-icon1.png" mode="widthFix"></image>
					</button>

					<button type="default">
						<image src="../../static/head-icon2.png" mode="widthFix"></image>
					</button>
				</view>
			</view>
		</view>

		<view class="content-box">

			<view class="health-nav-list">
				<view class="health-nav-item">
					<image src="../../static/health-nav1.png" class="health-nav-item-img" mode=""></image>
					时令养生
				</view>
				<view class="health-nav-item">
					<image src="../../static/health-nav2.png" class="health-nav-item-img" mode=""></image>
					四季养生
				</view>
				<view class="health-nav-item">
					<image src="../../static/health-nav3.png" class="health-nav-item-img" mode=""></image>
					膳食养生
				</view>
				<view class="health-nav-item">
					<image src="../../static/health-nav4.png" class="health-nav-item-img" mode=""></image>
					茶酒养生
				</view>
				<view class="health-nav-item">
					<image src="../../static/health-nav5.png" class="health-nav-item-img" mode=""></image>
					中医养生
				</view>
				<view class="health-nav-item">
					<image src="../../static/health-nav6.png" class="health-nav-item-img" mode=""></image>
					养生讲堂
				</view>
			</view>

			<view class="swiper-box">
				<swiper class="swiper" indicator-dots="true" indicator-color="#F2F2F2" indicator-active-color="#F2501A"
					:circular="true" autoplay="true" interval="3000" duration="500">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<view class="swiper-item">
							<image :src="item" class="banner-img" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="tag-box">
				<view class="tag-list">
					<view class="tag-item">
						# 经常熬夜该吃的食物
					</view>
					<view class="tag-item">
						# 经常熬夜该吃的食物
					</view>
					<view class="tag-item">
						# 经常熬夜该吃的食物
					</view>
					<view class="tag-item">
						# 经常熬夜该吃的食物
					</view>
				</view>
				<view class="refresh-row">
					<image src="../../static/refresh-icon.png" mode=""></image>
					换一批
				</view>
			</view>

			<view class="health-menu-list">
				<view class="health-menu-item">
					<image src="../../static/health-menu1.png" class="health-menu-item-img" mode="heightFix"></image>
					亚健康养生
				</view>
				<view class="health-menu-item">
					<image src="../../static/health-menu2.png" class="health-menu-item-img" mode="heightFix"></image>
					食谱知识
				</view>
				<view class="health-menu-item">
					<image src="../../static/health-menu3.png" class="health-menu-item-img" mode="heightFix"></image>
					食疗知识
				</view>
				<view class="health-menu-item">
					<image src="../../static/health-menu4.png" class="health-menu-item-img" mode="heightFix"></image>
					食材知识
				</view>
				<view class="health-menu-item">
					<image src="../../static/health-menu5.png" class="health-menu-item-img" mode="heightFix"></image>
					妙方知识
				</view>
			</view>

			<view class="health-consult-box">
				<image src="../../static/icon-1.png" class="health-consult-img" mode="widthFix"></image>
				<view class="health-consult-sidebar">
					<view class="health-consult-column">
						<view class="health-consult-name">健康咨询</view>
						<view class="health-consult-msg">携手熊猫为您专业量身定制健康食谱</view>
					</view>
					<button type="default" class="health-consult-btn">去定制</button>
				</view>
			</view>

			<view class="product-bottom">
				<scroll-view scroll-x="true" class="tab-list">
					<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList"
						:key="index" @click="checked(index)">
						<view class="child-column">
							<view class="child-column-name">{{item.title}}</view>
							<view class="child-column-msg">
								<text>{{item.msg}}</text>
								<image src="../../static/border.png" class="border-img" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="product-list">
					<view class="product-item">
						<image src="../../static/img-4.png" class="product-item-column-img" mode="aspectFill" />
						<view class="product-item-sidebar">
							<view class="product-item-sidebar-top">
								<image src="../../static/hot.png" class="product-tag-img" mode="widthFix"></image>
								<text class="product-item-column-name">有勇气去改变可以改变的事，有胸怀去接受</text>
							</view>
							<view class="product-item-row-between">
								<text class="look-num">3.2万人浏览</text>
								<button type="default" class="collect-btn">
									<image src="../../static/heart-active.png" mode="widthFix"></image>
									3386
								</button>
							</view>
						</view>
					</view>
					<view class="product-item">
						<image src="../../static/img-4.png" class="product-item-column-img" mode="aspectFill" />
						<view class="product-item-sidebar">
							<view class="product-item-sidebar-top">
								<image src="../../static/newest.png" class="product-tag-img" mode="widthFix"></image>
								<text class="product-item-column-name">有勇气去改变可以改变的事，有胸怀去接受</text>
							</view>
							<view class="product-item-row-between">
								<text class="look-num">3.2万人浏览</text>
								<button type="default" class="collect-btn">
									<image src="../../static/heart-active.png" mode="widthFix"></image>
									3386
								</button>
							</view>
						</view>
					</view>
					<view class="product-item">
						<image src="../../static/img-4.png" class="product-item-column-img" mode="aspectFill" />
						<view class="product-item-sidebar">
							<view class="product-item-sidebar-top">
								<image src="../../static/newest.png" class="product-tag-img" mode="widthFix"></image>
								<text
									class="product-item-column-name">有勇气去改变可以改变的事有勇气去改变可以改变的事有勇气去改变可以改变的事有勇气去改变可以改变的事，有胸怀去接受</text>
							</view>
							<view class="product-item-row-between">
								<text class="look-num">3.2万人浏览</text>
								<button type="default" class="collect-btn">
									<image src="../../static/heart-active.png" mode="widthFix"></image>
									3386
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>


		<!-- 健康咨询-弹窗 -->
		<view v-show="isShowConsult">
			<view class="mask" @tap="closeConsult"></view>
			<view class="window">
				<view class="window-label">
					健康咨询
				</view>
				<view class="itemBox">
					<view v-for="(item, index) in checkboxList" :key="index"
						:class="'fang ' + (item.isSelected ? 'selected':'')" @click="cutTabClick(index, item)">
						<text class="grid-text">{{ item.name }}</text>
					</view>
				</view>
				<view class="window-bottom">
					<button type="default">确定</button>
				</view>
			</view>
		</view>
		<!-- 健康咨询-弹窗  -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//轮播
				swiperList: [
					'../../static/banner-2.png',
					'../../static/banner-2.png',
					'../../static/banner-2.png'
				],

				//选项卡
				isActive: 0,
				navList: [{
					index: 0,
					title: '亚健康',
					msg: '健康管理'
				}, {
					index: 1,
					title: "时令养生",
					msg: '学会养生'
				}, {
					index: 2,
					title: "食疗知识",
					msg: '开启食疗'
				}, {
					index: 3,
					title: "膳食养生",
					msg: '膳食食品'
				}],

				//健康咨询-弹窗
				isShowConsult: true,
				
				//健康咨询多选列表
				checkboxList: [{
						isSelected: true,
						name: '# 疲乏无力'
					},
					{
						isSelected: true,
						name: '# 注意力不集中'
					},
					{
						isSelected: false,
						name: '# 脘腹不适'
					},
					{
						isSelected: false,
						name: '# 肌肉/关节酸痛'
					},
					{
						isSelected: false,
						name: '# 精力不足'
					},
					{
						isSelected: false,
						name: '# 反应迟钝'
					},
					{
						isSelected: false,
						name: '# 精力不足'
					},
					{
						isSelected: false,
						name: '# 反应迟钝'
					}
				],
			}
		},
		methods: {
			//选项卡
			checked(index) {
				this.isActive = index
			},

			/**
			 * 健康咨询-弹窗
			 */
			showConsult() {
				this.isShowConsult = true;
			},
			closeConsult() {
				this.isShowConsult = false;
			},

			//多选
			cutTabClick(index, item) {
				this.selected = index;
				//然后通过这个属性判断是否选中点亮和取消
				item.isSelected = !item.isSelected;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./health-encyclopedia.css";
</style>