<template>
    <view class="content">
        <view class="modular goods">
            <image class="img" src="/static/find/menu_0.jpg" mode="aspectFill"></image>
            <view class="title">
                <view class="name">
                    白粉桃
                </view>
                <view class="text">
                    295千卡/100克
                </view>
            </view>
        </view>
        
        <view class="modular foods">
            <view class="title">
                <view class="name">
                    推荐搭配
                </view>
            </view>
            <view class="text">
                白粉桃富含蛋白质、脂肪、维生素、挥发油、有机酸、矿物质、粗纤维和水化合物等多种成份。有解饥消渴，补养身体；且有增进人体胆汁分泌，促进消化和治疗便秘等功效
            </view>
        </view>
        
        <view class="modular foods">
            <view class="title">
                <view class="name">
                    热量
                </view>
                <view class="switch">
                    <view class="switch-item" :class="{active : current == 0}" @click="switchTab(0)">
                    	千卡
                    </view>
                    <view class="switch-item" :class="{active : current == 1}" @click="switchTab(1)">
                    	千焦
                    </view>
                </view>
            </view>
            <view class="energy">
                <view class="number">
                    <text>113</text>千卡
                </view>
                <view class="tips">
                    每100克（可食用部分）
                </view>
            </view>
        </view>
        
        <view class="modular foods">
            <view class="title">
                <view class="name">
                    营养成分
                </view>
                <view class="unit">
                    单位：每100克
                </view>
            </view>
            <view class="nutrition">
                <view class="tabs">
                    <view class="tabs-title">
                        营养元素
                    </view>
                    <view class="tabs-title">
                        含量
                    </view>
                    <view class="tabs-title">
                        NPV%
                    </view>
                </view>
                <view class="list">
                    <view class="label">
                        <view class="label-name">
                            蛋白质
                        </view>
                        <view class="label-name">
                            0.1克
                        </view>
                        <view class="label-name">
                            0.1%
                        </view>
                    </view>
                    <view class="label">
                        <view class="label-name">
                            脂肪
                        </view>
                        <view class="label-name">
                            0.4克
                        </view>
                        <view class="label-name">
                            0.7%
                        </view>
                    </view>
                    <view class="label">
                        <view class="label-name">
                            碳水化合物
                        </view>
                        <view class="label-name">
                            0.2克
                        </view>
                        <view class="label-name">
                            0.1%
                        </view>
                    </view>
                </view>
            </view>
            <view class="careful">
                注：以上为三大营养元素的功能比例，不是重量比例。其中，脂肪供能效率比较高，是碳水化合物和蛋白质的2.25倍
            </view>
        </view>
        
        <view class="modular foods">
            <view class="title">
                <view class="name">
                    相关商品
                </view>
            </view>
            <view class="item">
            	<image class="item-cover" src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png" mode="aspectFill"></image>
            	<view class="item-title">
                    <view class="nowrap item-name">
                        黑果枸杞
                    </view>
                    <view class="item-price">
                        ￥99.00
                    </view>
                </view>
                <view class="item-btn">
                    查看商品
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
        data() {
            return {
                current: 0
            }
        },
        onLoad() {},
        methods: {
            switchTab(val) {
                this.current = val
            }
        }
    };
</script>

<style lang="scss" scoped>
    page {
        background-color: $window-color;
        padding: $padding;
        box-sizing: border-box;
    }
    
    .modular {
        background-color: white;
        border-radius: $radius;
        margin-bottom: $margin;
        padding: $padding;
        box-sizing: border-box;
    }
    
    .goods {
        position: relative;
        .img {
            width: 100rpx;
            height: 100rpx;
            border-radius: $radius-m;
        }
        .title {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding: $padding 0 0 100rpx + $padding * 2;
            .name {
                font-weight: bold;
                margin-bottom: $margin - 10;
            }
            .text {
                color: $text-gray-m;
                font-size: $title-size-m;
            }
        }
    }
    
    .foods {
        margin-bottom: $margin;
        .title {
            margin-bottom: $margin - 10;
            display: flex;
            .name {
                font-weight: bold;
                font-size: $title-size;
                flex: 1;
            }
            .switch {
                background-color: $main-color;
                display: flex;
                color: white;
                font-size: $title-size-sm;
                border-radius: $radius-m;
                overflow: hidden;
                line-height: 48rpx;
                .switch-item {
                    flex: 2;
                    padding: 0 $padding - 20;
                    transition-property: transform, color, -webkit-transform;
                    transition-duration: 0.3s;
                    transition-timing-function: ease-in-out;
                    &.active {
                        background-color: #09a16c;
                    }
                }
            }
            .unit {
                font-size: $title-size-m;
                line-height: 40rpx;
                color: $text-gray-m;
            }
        }
        .text {
            line-height: 48rpx;
            font-size: $title-size-lg;
        }
        .energy {
            text-align: center;
            font-size: $title-size-m;
            padding: $padding 0;
            color: $text-gray-m;
            .number {
                margin-bottom: $margin - 20;
                color: #000000;
                text {
                    font-size: $title-size + 8;
                    font-weight: bold;
                    padding-right: $padding - 20;
                }
            }
        }
        .nutrition {
            border: 2rpx solid $border-color;
            .tabs {
                display: flex;
                flex-wrap: wrap;
                font-size: $title-size-m;
                line-height: 80rpx;
                border-bottom: $border-color 2rpx solid;
                background-color: $window-color;
                .tabs-title {
                    width: 33.33%;
                    text-align: center;
                }
            }
            .list {
                .label {
                    display: flex;
                    flex-wrap: wrap;
                    line-height: 80rpx;
                    border-bottom: $border-color 2rpx solid;
                    font-size: $title-size-m;
                    color: $text-gray;
                    .label-name {
                        width: 33.33%;
                        text-align: center;
                    }
                    &:last-child {
                        border: none;
                    }
                }
            }
        }
        .careful {
            font-size: $title-size-m;
            color: $text-gray-m;
            padding-top: $padding - 10;
        }
        .item {
        	position: relative;
        	margin-top: $margin - 10;
        	background: #f5fdfa;
        	border-radius: $radius;
        	padding: $padding;
        	.item-cover {
        		width: 120rpx;
        		height: 90rpx;
        		border-radius: $radius-m;
        	}
        	.item-title {
                position: absolute;
                left: 0;
                top: 0;
                width: calc(100% - 180rpx);
                box-sizing: border-box;
                padding: $padding $padding 0  180rpx;
        		font-size: $title-size-lg;
        		margin-bottom: 10px;
        		color: $text-color;
                .item-price {
                    color: $text-price;
                    margin-top: $margin - 20;
                }
        	}
            .item-btn {
                position: absolute;
                right: $padding;
                top: $padding + 20;
                background-color: $main-color;
                color: white;
                line-height: 62rpx;
                font-size: $title-size-m;
                padding: 0 $padding - 10;
                border-radius: $radius-m;
            }
        }
    }
</style>
