699 lines
21 KiB
Vue
699 lines
21 KiB
Vue
<!--
|
||
* @Description:用于展示用户体重管理及体重记录饮食记录和饮水记录会员专享食谱和帮助小助手
|
||
* @Author: Aimee·Zhang
|
||
* @Date: 2022-01-05 09:01:12
|
||
* @LastEditors: Aimee·Zhang
|
||
* @LastEditTime: 2022-01-14 08:59:15
|
||
-->
|
||
<template>
|
||
<view class="record">
|
||
<!-- 登录 （建立档案和未建立档案） -->
|
||
<template v-if="is_login && is_record">
|
||
<!-- 搜索顶部 -->
|
||
<view class="search">
|
||
<!-- 头像 -->
|
||
<view class="user">
|
||
<u-icon name="arrow-left" color="#525252" size="22" class="downIcon" :bold="true" @click='$Router.back()'/>
|
||
<!-- <u-image class="avatar" width="90rpx" height="90rpx" :src="user.avatar ? user.avatar : require('../../static/imgs/avatar.png')" :lazy-load="true" shape="circle" />
|
||
<view class="nickname">{{user.nickname}}</view> -->
|
||
<!-- <u-icon name="arrow-down-fill" color="#525252" size="10" class="downIcon" :bold="true" space="1"/> -->
|
||
</view>
|
||
<!-- 搜索框 -->
|
||
<view style="flex:1;" @click="$Router.push({ name: 'indexSearch' })">
|
||
<u-search
|
||
placeholder="搜索食物营养和热量"
|
||
shape="round"
|
||
:show-action="false"
|
||
searchIconColor="#34ce98"
|
||
bgColor="#f8f8f8"
|
||
:clearabled="false"
|
||
:disabled="true"
|
||
placeholderColor="#777"
|
||
class="searchTem"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 消息中心 -->
|
||
<view class="news" @click="$Router.push({name:'noticeIndex'})">
|
||
<u-icon name="bell-fill" color="#525252" size="24" :bold="true" space="1"/>
|
||
<u-badge class="dian" :isDot="notifications_count > 0" bgColor="#e6576b"></u-badge>
|
||
</view>
|
||
</view>
|
||
<!-- 体重管理模块 -->
|
||
<view class="weight-manage">
|
||
<!-- 体重管理 -->
|
||
<!-- @click="$Router.push({name:'EssentialInfo'})" -->
|
||
<view class="manage">体重管理</view>
|
||
<!-- 单位:公斤 -->
|
||
<u-icon class="eye" name="eye" color="#fff" size="14" :bold="true" label="单位 : 公斤" labelPos="left" labelSize="12" labelColor="#fff" space="6" />
|
||
<!-- 进度条 -->
|
||
<u-line-progress :percentage="weight.ratio" :showText="false" inactiveColor="#d5f2e8" activeColor="none" height="16">
|
||
<text class="u-percentage-slot">≈{{ weight.ratio }}%</text>
|
||
</u-line-progress>
|
||
<!-- 开始目标 结束目标 当前目标 -->
|
||
<view class="number">
|
||
<view class="--item">
|
||
{{ weight.begin }}
|
||
<span>初始</span>
|
||
</view>
|
||
<view class="--item">
|
||
{{ weight.now }}
|
||
<span>当前</span>
|
||
</view>
|
||
<view class="--item">
|
||
{{ weight.target }}
|
||
<span>目标</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 实时消息 -->
|
||
<view class="real-news">
|
||
<view class="real-news-left">
|
||
<view class="news-icon">
|
||
<u-icon class="volume-fill" name="volume-fill" color="#24ccb3" size="20" :bold="true" label="公告" labelPos="right" labelSize="14" labelColor="#24ccb3" space="6" />
|
||
</view>
|
||
<swiper class="news-info" :autoplay="true" :vertical="true" :circular="true">
|
||
<swiper-item class="news-swiper-item" v-for="item in notices" :key="item">
|
||
<view>{{ item }}</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
<!-- 健康测评 -->
|
||
<u-image
|
||
:src="banner.cover || require('../../static/imgs/health1.png')"
|
||
class="eval-img"
|
||
@click="$Router.push({ name: 'EvaluationList' })"
|
||
:lazy-load="true"
|
||
radius="10rpx"
|
||
mode="widthFix"
|
||
width="100%"
|
||
/>
|
||
<!-- 健康记录 -->
|
||
<view class="title">健康记录</view>
|
||
<view class="health" @click="$Router.push({ name: 'RecordFoods' })">
|
||
<view>
|
||
<view class="h-title">饮食&运动健康</view>
|
||
<view class="h-date">{{ intake_run.time || '暂无' }}</view>
|
||
<view class="h-eat">
|
||
{{ !intake_run.exceeds ? '还可以吃' : '多吃了' }}
|
||
<span>{{ intake_run.amount }}</span>
|
||
千卡
|
||
</view>
|
||
</view>
|
||
<u-image :src="require('../../static/imgs/eat.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="140rpx" />
|
||
</view>
|
||
<view class="health-2">
|
||
<view class="health" @click="$Router.push({ name: 'Drink' })">
|
||
<view>
|
||
<view class="h-title">饮水记录</view>
|
||
<view class="h-date">{{ water.time || '暂无' }}</view>
|
||
<view class="h-eat" v-if="water.is_complete">目标达成！</view>
|
||
<view class="h-eat" v-else>
|
||
还可以喝
|
||
<span>{{ water.value || '--' }}</span>
|
||
毫升
|
||
</view>
|
||
</view>
|
||
<u-image :src="require('../../static/imgs/drink.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="110rpx" class="h-icon" />
|
||
</view>
|
||
<view class="health" @click="$Router.push({ name: 'Weight' })">
|
||
<view>
|
||
<view class="h-title">体重记录</view>
|
||
<view class="h-date">{{ weight.time || '暂无' }}</view>
|
||
<view class="h-eat">
|
||
当前
|
||
<span>{{ weight.now || '--' }}</span>
|
||
公斤
|
||
</view>
|
||
</view>
|
||
<u-image :src="require('../../static/imgs/weight.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="140rpx" class="h-icon" />
|
||
</view>
|
||
</view>
|
||
<!-- 营养管理 -->
|
||
<view class="title">营养管理</view>
|
||
<view class="nutrition">
|
||
<view class="--item" @click="$Router.push({ name: 'VipFoods' })">
|
||
<u-icon :name="require('../../static/icon/vip.png')" size="20" :bold="true" label="会员专享食谱" labelPos="right" labelSize="16" labelColor="#525252" space="10" />
|
||
<u-icon name="arrow-right" color="#999" />
|
||
</view>
|
||
<view class="--item mt20" @click="$Router.push({ name: 'topicIndex' })">
|
||
<u-icon :name="require('../../static/icon/helper.png')" size="20" :bold="true" label="营养小助手" labelPos="right" labelSize="16" labelColor="#525252" space="10" />
|
||
<u-icon name="arrow-right" color="#999" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 未登录 -->
|
||
<template v-else-if="!is_login">
|
||
<!-- 搜索顶部 -->
|
||
<view class="search" @click="Login">
|
||
<!-- 头像 -->
|
||
<view class="user">
|
||
<!-- <u-image class="avatar" width="90rpx" height="90rpx" :src="require('../../static/imgs/avatar.png')" :lazy-load="true" shape="circle" />
|
||
<u-icon name="arrow-down-fill" color="#525252" size="10" class="downIcon" :bold="true" space="1" /> -->
|
||
<u-icon name="arrow-left" color="#525252" size="22" class="downIcon" :bold="true" @click='$Router.back()'/>
|
||
</view>
|
||
<!-- 搜索框 -->
|
||
<u-search
|
||
placeholder="搜索食物营养和热量"
|
||
shape="round"
|
||
:show-action="false"
|
||
searchIconColor="#34ce98"
|
||
bgColor="#f8f8f8"
|
||
:clearabled="false"
|
||
:disabled="true"
|
||
placeholderColor="#777"
|
||
class="searchTem"
|
||
/>
|
||
<!-- 消息中心 -->
|
||
<view class="news">
|
||
<u-icon name="bell-fill" color="#525252" size="24" :bold="true" space="1" />
|
||
<u-badge class="dian" :isDot="notifications_count > 0" bgColor="#e6576b"></u-badge>
|
||
</view>
|
||
</view>
|
||
<!-- 体重管理模块 -->
|
||
<view class="weight-manage">
|
||
<!-- 体重管理 -->
|
||
<view class="manage" @click="Login">体重管理</view>
|
||
<!-- 单位:公斤 -->
|
||
|
||
<!-- 开始目标 结束目标 当前目标 -->
|
||
<view class="number" @click="Login">
|
||
<view class="no-login-number">
|
||
<view>你想减到多少斤？ZH健康来帮你</view>
|
||
<view>完善信息</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 实时消息 -->
|
||
<view class="real-news">
|
||
<view class="real-news-left">
|
||
<view class="news-icon">
|
||
<u-icon class="volume-fill" name="volume-fill" color="#24ccb3" size="20" :bold="true" label="公告" labelPos="right" labelSize="14" labelColor="#24ccb3" space="6" />
|
||
</view>
|
||
<swiper class="news-info" :autoplay="true" :vertical="true" :circular="true">
|
||
<swiper-item class="news-swiper-item" v-for="item in notices" :key="item">
|
||
<view>{{ item }}</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
<!-- 健康测评 -->
|
||
<u-image :src="banner.cover || require('../../static/imgs/health1.png')" class="eval-img" @click="Login" :lazy-load="true" radius="10rpx" mode="widthFix" width="100%" />
|
||
<!-- 健康记录 -->
|
||
<view class="title">健康记录</view>
|
||
<view class="health" @click="Login">
|
||
<view>
|
||
<view class="h-title">饮食&运动健康</view>
|
||
<!-- <view class="h-date">--</view> -->
|
||
<view class="h-eat"><span>--</span></view>
|
||
</view>
|
||
<u-image :src="require('../../static/imgs/eat.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="140rpx" />
|
||
</view>
|
||
<view class="health-2">
|
||
<view class="health" @click="Login">
|
||
<view>
|
||
<view class="h-title">饮水记录</view>
|
||
<!-- <view class="h-date">--</view> -->
|
||
<view class="h-eat"><span>--</span></view>
|
||
</view>
|
||
<u-image :src="require('../../static/imgs/drink.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="110rpx" class="h-icon" />
|
||
</view>
|
||
<view class="health" @click="Login">
|
||
<view>
|
||
<view class="h-title">体重记录</view>
|
||
<!-- <view class="h-date">--</view> -->
|
||
<view class="h-eat"><span>--</span></view>
|
||
</view>
|
||
<u-image :src="require('../../static/imgs/weight.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="140rpx" class="h-icon" />
|
||
</view>
|
||
</view>
|
||
<!-- 营养管理 -->
|
||
<view class="title">营养管理</view>
|
||
<view class="nutrition">
|
||
<view class="--item" @click="Login">
|
||
<u-icon :name="require('../../static/icon/vip.png')" size="24" :bold="true" label="会员专享食谱" labelPos="right" labelSize="17" labelColor="#525252" space="10" />
|
||
<u-icon name="arrow-right" color="#999" />
|
||
</view>
|
||
<view class="--item mt20" @click="Login">
|
||
<u-icon :name="require('../../static/icon/helper.png')" size="24" :bold="true" label="营养小助手" labelPos="right" labelSize="17" labelColor="#525252" space="10" />
|
||
<u-icon name="arrow-right" color="#999" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 登录 (未建立档案) -->
|
||
<template v-eles-if="is_login && !is_record">
|
||
<!-- 搜索顶部 -->
|
||
<view class="search" @click="toCreateInfo">
|
||
<!-- 头像 -->
|
||
<view class="user">
|
||
<!-- <u-image class="avatar" width="90rpx" height="90rpx" :src="require('../../static/imgs/avatar.png')" :lazy-load="true" shape="circle" />
|
||
<u-icon name="arrow-down-fill" color="#525252" size="10" class="downIcon" :bold="true" space="1" /> -->
|
||
<u-icon name="arrow-left" color="#525252" size="22" class="downIcon" :bold="true" @click='$Router.back()'/>
|
||
</view>
|
||
<!-- 搜索框 -->
|
||
<u-search
|
||
placeholder="搜索食物营养和热量"
|
||
shape="round"
|
||
:show-action="false"
|
||
searchIconColor="#34ce98"
|
||
bgColor="#f8f8f8"
|
||
:clearabled="false"
|
||
:disabled="true"
|
||
placeholderColor="#777"
|
||
class="searchTem"
|
||
/>
|
||
<!-- 消息中心 -->
|
||
<view class="news">
|
||
<u-icon name="bell-fill" color="#525252" size="24" :bold="true" space="1" />
|
||
<u-badge class="dian" :isDot="notifications_count > 0" bgColor="#e6576b"></u-badge>
|
||
</view>
|
||
</view>
|
||
<!-- 体重管理模块 -->
|
||
<view class="weight-manage">
|
||
<!-- 体重管理 -->
|
||
<view class="manage" @click="toCreateInfo">体重管理</view>
|
||
<!-- 单位:公斤 -->
|
||
|
||
<!-- 开始目标 结束目标 当前目标 -->
|
||
<view class="number" @click="toCreateInfo">
|
||
<view class="no-login-number">
|
||
<view>你想减到多少斤？ZH健康来帮你</view>
|
||
<view>完善信息</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 实时消息 -->
|
||
<view class="real-news">
|
||
<view class="real-news-left">
|
||
<view class="news-icon">
|
||
<u-icon class="volume-fill" name="volume-fill" color="#24ccb3" size="20" :bold="true" label="公告" labelPos="right" labelSize="14" labelColor="#24ccb3" space="6" />
|
||
</view>
|
||
<swiper class="news-info" :autoplay="true" :vertical="true" :circular="true">
|
||
<swiper-item class="news-swiper-item" v-for="item in notices" :key="item">
|
||
<view>{{ item }}</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
<!-- 健康测评 -->
|
||
<u-image
|
||
:src="banner.cover || require('../../static/imgs/health1.png')"
|
||
class="eval-img"
|
||
@click="toCreateInfo"
|
||
:lazy-load="true"
|
||
radius="10rpx"
|
||
mode="widthFix"
|
||
width="100%"
|
||
/>
|
||
<!-- 健康记录 -->
|
||
<view class="title">健康记录</view>
|
||
<view class="health" @click="toCreateInfo">
|
||
<view>
|
||
<view class="h-title">饮食&运动健康</view>
|
||
<!-- <view class="h-date">--</view> -->
|
||
<view class="h-eat"><span>--</span></view>
|
||
</view>
|
||
<u-image :src="require('../../static/imgs/eat.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="140rpx" />
|
||
</view>
|
||
<view class="health-2">
|
||
<view class="health" @click="toCreateInfo">
|
||
<view>
|
||
<view class="h-title">饮水记录</view>
|
||
<!-- <view class="h-date">--</view> -->
|
||
<view class="h-eat"><span>--</span></view>
|
||
</view>
|
||
<u-image :src="require('../../static/imgs/drink.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="110rpx" class="h-icon" />
|
||
</view>
|
||
<view class="health" @click="toCreateInfo">
|
||
<view>
|
||
<view class="h-title">体重记录</view>
|
||
<!-- <view class="h-date">--</view> -->
|
||
<view class="h-eat"><span>--</span></view>
|
||
</view>
|
||
<u-image :src="require('../../static/imgs/weight.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="140rpx" class="h-icon" />
|
||
</view>
|
||
</view>
|
||
<!-- 营养管理 -->
|
||
<view class="title">营养管理</view>
|
||
<view class="nutrition">
|
||
<view class="--item" @click="toCreateInfo">
|
||
<u-icon :name="require('../../static/icon/vip.png')" size="24" :bold="true" label="会员专享食谱" labelPos="right" labelSize="17" labelColor="#525252" space="10" />
|
||
<u-icon name="arrow-right" color="#999" />
|
||
</view>
|
||
<view class="--item mt20" @click="toCreateInfo">
|
||
<u-icon :name="require('../../static/icon/helper.png')" size="24" :bold="true" label="营养小助手" labelPos="right" labelSize="17" labelColor="#525252" space="10" />
|
||
<u-icon name="arrow-right" color="#999" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { logs } from '@/apis/interfaces/health';
|
||
import userAuth from '@/public/userAuth';
|
||
export default {
|
||
data() {
|
||
return {
|
||
weight: {}, // - array - 体重
|
||
water: [], // - array - 饮水量
|
||
intake_run: [], //- array - 饮食和运动
|
||
is_login: false, // - boolean - 当前是否登录
|
||
is_record: false, // - boolean - 当前是否完善信息 （创建档案）
|
||
notices: [], // -- array -- 公告
|
||
banner: {}, // -- object -- 轮播图
|
||
user: {},
|
||
notifications_count:0,// 消息数量
|
||
};
|
||
},
|
||
onShow() {
|
||
this.logs();
|
||
},
|
||
methods: {
|
||
// 错误提示
|
||
errToast() {
|
||
uni.showToast({
|
||
title: '努力开发中~',
|
||
icon: 'none'
|
||
});
|
||
},
|
||
/**
|
||
* @description:首页信息
|
||
* @return {
|
||
*weight - array - 体重
|
||
*water - array - 饮水量
|
||
*intake_run - array - 饮食和运动
|
||
*is_login - boolean - 当前是否登录
|
||
*is_record - boolean - 当前是否完善信息 （创建档案）
|
||
*notices - array - 公告
|
||
*banner - object - 轮播图
|
||
|
||
}
|
||
* @Date: 2022-01-12 11:16:22
|
||
*/
|
||
logs() {
|
||
logs().then(res => {
|
||
this.weight = res.weight;
|
||
this.water = res.water;
|
||
this.intake_run = res.intake_run;
|
||
this.is_login = res.is_login;
|
||
this.is_record = res.is_record;
|
||
this.notices = res.notices;
|
||
this.banner = res.banner;
|
||
this.user = res.user;
|
||
this.notifications_count = res.notifications_count;
|
||
});
|
||
},
|
||
/**
|
||
* @description:跳转登录页面
|
||
* @params {*}
|
||
* @Date: 2022-01-12 11:16:36
|
||
*/
|
||
Login() {
|
||
const Auth = new userAuth();
|
||
Auth.Login();
|
||
},
|
||
/**
|
||
* @description:跳转创建档案页面
|
||
* @Date: 2022-01-12 11:51:52
|
||
*/
|
||
// 去创建用户信息
|
||
toCreateInfo() {
|
||
this.$Router.push({
|
||
name: 'EssentialInfo'
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.record {
|
||
padding: $padding * 5 $padding $padding $padding;
|
||
position: relative;
|
||
// 顶部搜索
|
||
.search {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
position: fixed;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
padding: $padding *2 $padding $padding $padding;
|
||
z-index: 1000;
|
||
.user {
|
||
display: flex;
|
||
flex-direction: row;
|
||
position: relative;
|
||
.downIcon {
|
||
// margin: 0 0 0 $margin * 0.4;
|
||
}
|
||
.nickname{
|
||
background-color: rgba($color: #fa8168, $alpha:1 );
|
||
background-color: rgba($color: #34ce98, $alpha:1 );
|
||
font-size: 10rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
// width:100rpx ;
|
||
position: absolute;
|
||
bottom: -14rpx;
|
||
max-width: 110rpx;
|
||
padding: 0 4rpx;
|
||
}
|
||
.avatar {
|
||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.searchTem {
|
||
margin: 0 $margin * 0.6 !important;
|
||
}
|
||
.news {
|
||
position: relative;
|
||
.dian {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
}
|
||
// 体重管理
|
||
.weight-manage {
|
||
height: 288rpx;
|
||
background-image: url(../../static/imgs/banner-bg.png);
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
border-radius: $radius + 1;
|
||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||
margin-top: $margin + 6;
|
||
padding: 0 $padding;
|
||
.eye {
|
||
margin-bottom: $margin * 0.6;
|
||
}
|
||
// 体重管理
|
||
.manage {
|
||
font-size: $margin + 2;
|
||
color: #fff;
|
||
display: inline-block;
|
||
padding: $padding * 0.3 $padding;
|
||
position: relative;
|
||
box-shadow: 0 0 10rpx 4rpx rgba($color: #fff, $alpha: 0.3);
|
||
left: -$padding;
|
||
top: 0;
|
||
border-radius: $radius + 1 0 $radius - 6;
|
||
}
|
||
// 未登录体重健康
|
||
.no-login-number {
|
||
color: #fff;
|
||
font-size: $title-size;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 50rpx;
|
||
box-sizing: border-box;
|
||
font-weight: normal;
|
||
view:nth-child(1) {
|
||
flex: 1;
|
||
margin-right: $margin - 10;
|
||
}
|
||
view:nth-child(2) {
|
||
background: #fff;
|
||
color: $main-color;
|
||
padding: 10rpx $padding * 0.9;
|
||
border-radius: 40rpx;
|
||
font-size: $title-size - 4;
|
||
}
|
||
}
|
||
// 进度条线上样式
|
||
.u-percentage-slot {
|
||
padding: 4rpx 10rpx;
|
||
background-color: #fff;
|
||
color: #26a377;
|
||
border-radius: 200rpx;
|
||
font-size: $title-size - 10;
|
||
margin-right: -5px;
|
||
}
|
||
// 数值
|
||
.number {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
justify-content: space-around;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
font-size: $title-size + 18;
|
||
font-weight: bold;
|
||
margin-top: $margin * 0.6;
|
||
.--item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
|
||
span {
|
||
font-size: $title-size - 6;
|
||
font-weight: normal;
|
||
margin-top: $margin * 0.3;
|
||
}
|
||
}
|
||
.--item:nth-child(1),
|
||
.--item:nth-child(3) {
|
||
font-size: $margin + 4 !important;
|
||
}
|
||
}
|
||
}
|
||
// 实时消息
|
||
.real-news {
|
||
font-size: $title-size - 2;
|
||
color: $text-color;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: $padding 0;
|
||
.real-news-left {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
flex: 1;
|
||
// 消息图标
|
||
.news-icon {
|
||
background-color: #e9fbf8;
|
||
display: inline-block;
|
||
padding: 10rpx 20rpx 6rpx 20rpx;
|
||
border-radius: $margin;
|
||
// margin-right: $margin * 0.5;
|
||
}
|
||
// 轮播图
|
||
.news-info {
|
||
flex: 1;
|
||
margin: 0 $margin * 0.4;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
|
||
.news-swiper-item {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 评测图片
|
||
.eval-img {
|
||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||
}
|
||
// 标题
|
||
.title {
|
||
font-size: $title-size * 1.4;
|
||
font-weight: bold;
|
||
margin: $margin * 1.5 0;
|
||
}
|
||
// 健康记录
|
||
.health-2 {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
margin-top: $margin;
|
||
.h-icon {
|
||
position: absolute;
|
||
right: 0;
|
||
z-index: 0;
|
||
}
|
||
.health:nth-child(1) {
|
||
flex: 1 !important;
|
||
margin-right: $margin * 0.5;
|
||
}
|
||
.health:nth-child(2) {
|
||
flex: 1 !important;
|
||
margin-left: $margin * 0.5;
|
||
}
|
||
}
|
||
.health {
|
||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||
padding: $padding * 1 $padding;
|
||
border-radius: $radius - 10;
|
||
color: #a3a3a3;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
.h-title {
|
||
color: $text-color;
|
||
font-size: $title-size + 2;
|
||
font-weight: bold;
|
||
}
|
||
.h-date {
|
||
margin-top: $margin * 0.4;
|
||
font-size: $title-size-sm + 2;
|
||
}
|
||
.h-eat {
|
||
font-size: $title-size-sm;
|
||
margin-top: $margin;
|
||
z-index: 10;
|
||
|
||
span {
|
||
font-size: $title-size * 1.2;
|
||
color: $main-color;
|
||
font-weight: bold;
|
||
padding: $padding * 0.2;
|
||
}
|
||
}
|
||
}
|
||
// 营养管理
|
||
.nutrition {
|
||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||
padding: $padding * 1.5 $padding;
|
||
border-radius: $radius - 10;
|
||
font-size: $title-size-m;
|
||
|
||
.--item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.mt20 {
|
||
margin-top: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|