<template>
    <view class="content">
        <view class="head">
            坚持做瑜伽可以减肥吗?
        </view>
        <view class="source">
            <image class="logo" src="/static/icon/sign-icon.png" mode="aspectFill"></image>
            <view class="title">
                <view class="name">
                    ZH大健康
                </view>
                <view class="text">
                    ZH大健康官方账号
                </view>
            </view>
        </view>
        <view class="brief">
            提到骨质疏松，大家的第一反应估计就是补钙，骨质疏松是一种悄无声息的疾病，大多数患者在早期没有症状，随着骨质的逐步流失，逐渐会有全身关节疼痛、甚至稍有不慎便摔成骨折。
            骨质疏松是一种以低骨量和骨组织微结构破坏为特征，导致骨质脆性增加和易于骨折的全身性骨代谢性疾病。常见于老年人，但各年龄时期都可以发病。
            一般的症状包括腰背疼痛、身高下降、驼背以及骨折发生等，但事实上，在这些症状发生之前，骨量已经大量流失，骨质疏松也早已开始了。
            一旦发生骨质疏松性骨折危害巨大，特别是股骨颈等部位发生的骨折，会给患者带来严重的疼痛、高额医疗支出、致残失能等。
            严重影响生活质量的同时，给家庭也造成巨大的负担，并且会缩短患者寿命，因而骨质疏松性骨折常被称为“人生的最后一次骨折”。提到骨质疏松，大家的第一反应估计就是补钙，骨质疏松是一种悄无声息的疾病，大多数患者在早期没有症状，随着骨质的逐步流失，逐渐会有全身关节疼痛、甚至稍有不慎便摔成骨折。
            骨质疏松是一种以低骨量和骨组织微结构破坏为特征，导致骨质脆性增加和易于骨折的全身性骨代谢性疾病。常见于老年人，但各年龄时期都可以发病。
            一般的症状包括腰背疼痛、身高下降、驼背以及骨折发生等，但事实上，在这些症状发生之前，骨量已经大量流失，骨质疏松也早已开始了。
            一旦发生骨质疏松性骨折危害巨大，特别是股骨颈等部位发生的骨折，会给患者带来严重的疼痛、高额医疗支出、致残失能等。
            严重影响生活质量的同时，给家庭也造成巨大的负担，并且会缩短患者寿命，因而骨质疏松性骨折常被称为“人生的最后一次骨折”。
        </view>
        <view class="goods">
            <view class="title">
                相关商品
            </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 {
            }
        },
        onLoad() {},
        methods: {
            
        }
    };
</script>

<style lang="scss" scoped>
    page {
        padding: $padding;
        box-sizing: border-box;
    }
    
    .head {
        font-size: $title-size + 4;
        font-weight: bold;
    }
    
    .source {
        margin: $margin 0;
        position: relative;
        .logo {
            width: 58rpx;
            height: 58rpx;
            border-radius: 50%;
            margin-top: $margin - 22;
        }
        .title {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding-left: 74rpx;
            font-size: $title-size-sm;
            .name {
                margin-bottom: $margin - 25;
            }
            .text {
                font-size: $title-size-sm - 4;
                color: $text-gray-m;
            }
        }
    }
    
    .brief {
        line-height: 48rpx;
        font-size: $title-size-m;
        color: $text-color;
    }
    
    .goods {
        margin-top: $margin;
        .title {
            font-weight: bold;
            font-size: $title-size;
        }
        .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>
