152 lines
5.7 KiB
Vue
152 lines
5.7 KiB
Vue
<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>
|