ZhHealth/pages/index/index.vue

<template>
	<view class="content">
		<view class="status">
			<view class="status-main">
				<view class="helloe">欢迎使用ZH-HEALTH健康</view>
				<view class="btns">
                    <!-- 打卡图标gif -->
                    <!-- <view class="btns-item" @click="$Router.push({name: 'signIndex'})"><image src="@/static/icon/sign-icon.gif" mode="widthFix"></image></view> -->
                    <view class="btns-clock" @click="$Router.push({name: 'signIndex'})">
                        <image src="@/static/icon/clock_icon.png" mode="widthFix"></image>
                        <view class="btns-clock-text">
                            打卡
                        </view>
                    </view>
                    
					<view class="btns-item show" @click="onBtn('noticeIndex')"><uni-icons custom-prefix="iconfont" type="icon-pinglun" size="25"></uni-icons></view>
				</view>
			</view>
		</view>
		<!-- 搜索 -->
		<view class="search">
			<view class="search-nav" @click="$Router.push({name: 'indexSearch'})">
				<uni-icons class="search-icon" custom-prefix="iconfont" type="icon-sousuo" color="#34CE98" size="20"></uni-icons>
				低脂鸡胸肉
			</view>
		</view>
		<!-- 排行榜 -->
		<view class="img-card" @click="$Router.push({name: 'rankingIndex'})"><image src="@/static/dev/img-01.png" mode="widthFix"></image></view>
		<!-- 精选推荐 -->
		<view class="new-box"><view class="title">精选推荐</view><view class="more" @click="$Router.push({name: 'menuIndex'})">查看更多</view></view>
		<u-scroll-list class="choiceness-box" indicatorColor="#dafff2" indicatorActiveColor="#34CE98">
			<view v-for="(item, index) in choiceness" class="choiceness-item" :key="index" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index + 1 }})">
				<view class="choiceness-item-nav" :style="'backgroundColor:' + item.color">
					<image class="choiceness-item-cover" :src="item.cover"></image>
					<view class="nowrap choiceness-item-title">{{item.name}}</view>
					<view class="nowrap choiceness-item-describe">{{item.description}}</view>
				</view>
			</view>
		</u-scroll-list>
		<!-- 排行榜 -->
		<view class="img-card" @click="onBtn('Record')">
			<image src="@/static/dev/img-02.png" mode="widthFix"></image>
		</view>
		<!-- 话题广场 -->
		<view class="new-box">
            <view class="title">话题广场</view><view class="more" @click="$Router.push({name: 'topicIndex'})">更多</view>
            <oct-topic
                :lists="topicArr"
                @onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.topic_id }})" 
            />
		</view>
		<!-- ZH健康 -->
		<view class="img-card"><image src="@/static/dev/img-00.png" mode="widthFix" @click="$Router.push({ name: 'indexGuide'})" ></image></view>
	</view>
</template>

<script>
    import { index } from '@/apis/interfaces/topic'
	import userAuth from '@/public/userAuth'
    export default {
        data() {
            return {
                choiceness: [],
                topicArr: []
            };
        },
        mounted() {
            // 获取首页
            this.getindex()
        },
        methods: {
            // 首页
            getindex(){
            	index().then(res => {
                    this.choiceness = res.recipeCategories
                    this.topicArr   = res.topics
            	})
            },
			onBtn(name){
				if(this.$store.state.token === ''){
					const Auth = new userAuth()
					Auth.Login()
					return
				}
				this.$Router.push({name})
			}
        }
    };
</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 + 4;
			font-weight: bold;
		}
		.btns {
			margin-left: $margin;
			display: flex;
            .btns-clock {
                color: #885100;
                height: 50rpx;
                font-size: $title-size-sm - 2;
                border-radius: 40rpx;
                display: flex;
                background-image: linear-gradient(to right, #fce938, #ffce36);
                image {
                    width: 48rpx;
                    display: inline-block;
                }
                .btns-clock-text {
                    line-height: 50rpx;
                    font-weight: 600;
                    padding: 0 20rpx 0 8rpx;
                }
            }
			.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 - 10;
			top: $margin - 5;
			width: 100rpx;
			height: 100rpx;
			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;
		}
        .choiceness-item-describe {
            width: 180rpx;
        }
	}
}

// 话题广场
.new-box {
	margin: $margin;
    position: relative;
	.title {
		font-weight: bold;
		font-size: $title-size + 4;
	}
    .more {
        position: absolute;
        right: 0;
        top: 0;
        color: $text-gray;
    }
}

// 卡片
.img-card {
	margin: $margin;
	image {
		width: 100%;
		vertical-align: top;
		border-radius: $radius;
	}
}
</style>