2025-11-25 14:21:22 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="content">
|
|
|
|
|
|
<view class="content_box">
|
|
|
|
|
|
<view class="set">
|
|
|
|
|
|
<view class="date">{{foodInfo.date}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="box">
|
|
|
|
|
|
<view class="kcal2">
|
|
|
|
|
|
<view class="top">
|
|
|
|
|
|
<view class="left ">
|
|
|
|
|
|
<view class="center">
|
|
|
|
|
|
可以吃
|
|
|
|
|
|
<text>{{foodInfo.remaining_kcal}}</text>
|
|
|
|
|
|
<view class="unit">Kcal</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="right">
|
|
|
|
|
|
<view class="item border-bottom">
|
|
|
|
|
|
<text class="name">已摄入</text>
|
|
|
|
|
|
<text class="bold">
|
|
|
|
|
|
{{foodInfo.today_intake.kcal}}千卡
|
|
|
|
|
|
</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="item">
|
|
|
|
|
|
<text class="name">碳水</text>
|
|
|
|
|
|
<text class="bold">
|
|
|
|
|
|
{{foodInfo.today_intake.carbohydrate}}/{{foodInfo.suggestion.carbohydrate}}
|
|
|
|
|
|
</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="item">
|
|
|
|
|
|
<text class="name">脂肪</text>
|
|
|
|
|
|
<text class="bold">
|
|
|
|
|
|
{{foodInfo.today_intake.fat}}/{{foodInfo.suggestion.fat}}
|
|
|
|
|
|
</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="item">
|
|
|
|
|
|
<text class="name">蛋白</text>
|
|
|
|
|
|
<text class="bold">
|
|
|
|
|
|
{{foodInfo.today_intake.protein}}/{{foodInfo.suggestion.protein}}
|
|
|
|
|
|
</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- -->
|
|
|
|
|
|
<view class="tabbar-box">
|
|
|
|
|
|
<view class="list" v-if="foodInfo.list.length">
|
|
|
|
|
|
<view class="listbox" v-for="(ite,ind) in foodInfo.list" :key="ind">
|
|
|
|
|
|
<view class="left">
|
|
|
|
|
|
<view class="title">{{ite.name}}</view>
|
|
|
|
|
|
<view class="kcalval">
|
|
|
|
|
|
<text>{{ite.val}}</text>{{ite.unit}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="right">
|
|
|
|
|
|
<view class="item" @click="showFoodDetail(it)" v-for="(it,id) in ite.list">
|
|
|
|
|
|
<image :src="it.pic_url" mode="aspectFill"></image>
|
|
|
|
|
|
<text>{{it.name}}</text>
|
|
|
|
|
|
<text>{{it.weight}}</text>
|
|
|
|
|
|
<text>{{it.val}}千卡</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 加餐 -->
|
|
|
|
|
|
<!-- 营养含量分析 -->
|
2026-01-29 10:51:54 +08:00
|
|
|
|
<view v-if="drawerVisible" class="drawerVisible">
|
|
|
|
|
|
<view class="bgVisible" @click="handleDrawerClose"></view>
|
|
|
|
|
|
<view class="infoVisible">
|
|
|
|
|
|
<scroll-view style="height: 100%;" scroll-y="true">
|
|
|
|
|
|
<view class="foodDetail">
|
|
|
|
|
|
<view class="foodInfo">
|
|
|
|
|
|
<image :src="activeFoodDetail.pic_url" mode="aspectFill"></image>
|
|
|
|
|
|
<view class="info">
|
|
|
|
|
|
<view class="name">{{activeFoodDetail.name}}</view>
|
|
|
|
|
|
<view class="kcal">{{activeFoodDetail.val}}千卡</view>
|
|
|
|
|
|
</view>
|
2025-11-25 14:21:22 +08:00
|
|
|
|
</view>
|
2026-01-29 10:51:54 +08:00
|
|
|
|
<view class="foodContent">
|
|
|
|
|
|
<view class="title">热量和营养</view>
|
|
|
|
|
|
<view class="progress">
|
|
|
|
|
|
<div class="chart-wrap">
|
|
|
|
|
|
<qiun-data-charts type="ring" :opts="opts" :canvas2d="true" v-if="chartVisible"
|
|
|
|
|
|
canvasId="recordetailCharts" :chartData="chartData2" :cHeight="250"
|
|
|
|
|
|
:cWidth="250" />
|
|
|
|
|
|
<view class="uchart-kcal">{{activeFoodDetail.val}}</view>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<view class="info" v-if="activeFoodDetail.nutrients_four">
|
|
|
|
|
|
<view class="info-item"
|
|
|
|
|
|
v-for="(item,index) in activeFoodDetail.nutrients_four.slice(1)" :key="index">
|
|
|
|
|
|
<view class="color" :style="{'background-color':`${item.color}`}"></view>
|
|
|
|
|
|
<view>{{item.name}}：{{item.proportion}}%</view>
|
|
|
|
|
|
</view>
|
2025-11-25 14:21:22 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
2026-01-29 10:51:54 +08:00
|
|
|
|
<view class="tips">
|
|
|
|
|
|
<text>营养素</text>
|
|
|
|
|
|
<text>{{activeFoodDetail.weight}}含量</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="foodDetailList">
|
|
|
|
|
|
<view class="foodDetailItem" v-for="(item,index) in activeFoodDetail.nutrients_list"
|
|
|
|
|
|
:key="index">
|
|
|
|
|
|
<view class="name">{{item.name_ch}}</view>
|
|
|
|
|
|
<view class="value">{{item.value}}{{item.unit}}
|
|
|
|
|
|
</view>
|
2025-11-25 14:21:22 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
2026-01-29 10:51:54 +08:00
|
|
|
|
</scroll-view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
2025-11-25 14:21:22 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import {
|
|
|
|
|
|
mapState
|
|
|
|
|
|
} from "vuex";
|
|
|
|
|
|
let next = 0
|
|
|
|
|
|
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
token: "",
|
|
|
|
|
|
index: 0,
|
2026-01-29 10:51:54 +08:00
|
|
|
|
drawerVisible: false,
|
|
|
|
|
|
chartVisible: false, // 单独控制图表显示
|
2025-11-25 14:21:22 +08:00
|
|
|
|
opts: {
|
|
|
|
|
|
dataLabel: false,
|
|
|
|
|
|
color: ["#5180D8", "#ED7886", "#FFB169"],
|
|
|
|
|
|
background: "transparent",
|
|
|
|
|
|
canvas: {
|
|
|
|
|
|
background: "transparent"
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: false // 这个设置将隐藏图例
|
|
|
|
|
|
},
|
|
|
|
|
|
title: {
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
|
offsetY: -3,
|
|
|
|
|
|
color: "#333333"
|
|
|
|
|
|
},
|
|
|
|
|
|
subtitle: {
|
|
|
|
|
|
name: "千卡",
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
offsetY: 12,
|
|
|
|
|
|
color: "#888888"
|
|
|
|
|
|
},
|
|
|
|
|
|
extra: {
|
|
|
|
|
|
ring: {
|
|
|
|
|
|
ringWidth: 10,
|
|
|
|
|
|
labelWidth: 0,
|
|
|
|
|
|
border: false,
|
|
|
|
|
|
// customRadius: 50
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
isShow: false,
|
|
|
|
|
|
chartData2: {},
|
|
|
|
|
|
activeFoodDetail: {},
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
components: {
|
|
|
|
|
|
qiunDataCharts
|
|
|
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
...mapState(["user", "countFoodInfo"]),
|
|
|
|
|
|
userinfo() {
|
|
|
|
|
|
return this.user.aud_id
|
|
|
|
|
|
},
|
|
|
|
|
|
foodInfo() {
|
|
|
|
|
|
return this.countFoodInfo
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad(options) {
|
|
|
|
|
|
let that = this
|
|
|
|
|
|
that.$store.dispatch("getCountFoodInfo", {
|
|
|
|
|
|
aud_id: that.user.aud_id,
|
|
|
|
|
|
time: options.time
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
// 详情
|
|
|
|
|
|
showFoodDetail(item) {
|
|
|
|
|
|
console.log("item", item)
|
|
|
|
|
|
let chart_data = []
|
|
|
|
|
|
this.activeFoodDetail = item
|
|
|
|
|
|
this.$refs.showRight.open();
|
|
|
|
|
|
this.opts.color = []
|
|
|
|
|
|
for (let i = 1; i < item.nutrients_four.length; ++i) {
|
|
|
|
|
|
this.opts.color.push(item.nutrients_four[i].color)
|
|
|
|
|
|
chart_data.push({
|
|
|
|
|
|
name: item.nutrients_four[i].name,
|
|
|
|
|
|
value: Number(item.nutrients_four[i].proportion),
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
this.chartData2 = JSON.parse(JSON.stringify({
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
data: chart_data
|
|
|
|
|
|
}]
|
|
|
|
|
|
}));
|
2026-01-29 10:51:54 +08:00
|
|
|
|
that.$nextTick(() => {
|
|
|
|
|
|
// 延迟显示图表，确保容器已渲染
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
that.chartVisible = true
|
|
|
|
|
|
}, 100)
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
handleDrawerClose() {
|
|
|
|
|
|
// 先隐藏图表，再隐藏抽屉
|
|
|
|
|
|
this.chartVisible = false
|
|
|
|
|
|
this.drawerVisible = false;
|
2025-11-25 14:21:22 +08:00
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
.content {
|
|
|
|
|
|
padding: 0 20rpx;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.content_box {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.set {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
|
background: #d1f2ed;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
font-size: 56rpx;
|
|
|
|
|
|
color: #66cccc;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
padding: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.kcal2 {
|
|
|
|
|
|
width: calc(100% - 40rpx);
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
margin-top: 30rpx;
|
|
|
|
|
|
background: #f3fffd;
|
|
|
|
|
|
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
|
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
|
width: 300rpx;
|
|
|
|
|
|
height: 300rpx;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
background: #d1f2ed;
|
|
|
|
|
|
border: 5px solid #66cccc;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.center {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
width: 260rpx;
|
|
|
|
|
|
height: 260rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
|
|
|
|
|
|
text {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin: 20rpx 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
top: 0px;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
padding: 0 20rpx;
|
|
|
|
|
|
border-radius: 0 20rpx 20rpx 0;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
background: #d1f2ed;
|
|
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
height: 35px;
|
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.border-bottom {
|
|
|
|
|
|
border-bottom: 1px solid #dfdfdf;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tools {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
padding: 20rpx 0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
|
|
|
|
|
|
|
|
|
|
|
.type {
|
|
|
|
|
|
width: 20%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
|
width: 100rpx;
|
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
|
|
|
|
icon {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.list {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
padding-bottom: 100rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.listbox {
|
|
|
|
|
|
width: calc(100% - 40rpx);
|
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
margin: 30rpx 0px;
|
|
|
|
|
|
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
text {
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
|
margin-left: 30rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
|
background: #f3fffd;
|
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
|
border-bottom: 1px solid #f7f7f7;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
border-radius: 12rpx;
|
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:nth-child(2) {
|
|
|
|
|
|
width: 40%;
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:nth-child(3) {
|
|
|
|
|
|
width: 20%;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:nth-child(4) {
|
|
|
|
|
|
width: 26%;
|
|
|
|
|
|
margin-right: 6rpx;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nolist {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
padding: 60rpx 20rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
width: auto;
|
|
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
|
width: 100rpx;
|
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.list2 {
|
|
|
|
|
|
margin-top: 45%;
|
|
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
height: 64rpx;
|
|
|
|
|
|
line-height: 64rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.addfood {
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
padding: 20rpx 20rpx 0 20rpx;
|
|
|
|
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
|
|
|
|
|
|
|
|
|
.iconfont {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 7px;
|
|
|
|
|
|
top: -20rpx;
|
|
|
|
|
|
background: #f7f7f7;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
font-size: 60rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.list {
|
|
|
|
|
|
padding-bottom: 0px;
|
|
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:nth-child(2).item {
|
|
|
|
|
|
border-bottom: 1px solid #dfdfdf;
|
|
|
|
|
|
border-top: 1px solid #dfdfdf;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.foodDetail {
|
|
|
|
|
|
background-color: #F7F7F7;
|
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
|
|
.foodInfo {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
padding: 30rpx;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
box-sizing: 0 0 20rpx #f1f1f1;
|
|
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
|
width: 90rpx;
|
|
|
|
|
|
height: 90rpx;
|
|
|
|
|
|
border-radius: 15rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
margin-left: 30rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.kcal {
|
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
|
margin: 0 !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.foodContent {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
padding: 30rpx;
|
|
|
|
|
|
margin-top: 16rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
box-sizing: 0 0 20rpx #f1f1f1;
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.progress {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.chart-wrap {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 250rpx;
|
|
|
|
|
|
height: 250rpx;
|
|
|
|
|
|
margin-top: -30rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.uchart-kcal {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 60rpx;
|
|
|
|
|
|
top: 120rpx;
|
|
|
|
|
|
width: 130rpx;
|
|
|
|
|
|
font-size: 40rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
z-index: 9;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.info-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.color {
|
|
|
|
|
|
width: 6rpx;
|
|
|
|
|
|
height: 20rpx;
|
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
|
border-radius: 3rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tips {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
border-bottom: 1px solid #f1f1f1;
|
|
|
|
|
|
padding: 16rpx 0;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
margin-top: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.foodDetailList {
|
|
|
|
|
|
margin-top: 10rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.foodDetailItem {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding: 20rpx 0;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #777;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.val {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
