TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

[更新发现模块]

Browse Source
This commit is contained in:
zhangmanman
2022-01-11 11:25:41 +08:00
parent 6d4971bc5e
commit 906745fc14
33 changed files with 1806 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
pages/topic/details.vue Normal file
View File

@@ -0,0 +1,151 @@
<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>

108
pages/topic/index.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<view class="content">
<view class="tabs">
<u-tabs
:list="list1"
@click="click"
lineColor="#34CE98"
:activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
/>
</view>
<view class="topic">
<oct-topic
:lists="topicArr"
@onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.id }})"
/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list1: [{
name: '慢病护理',
}, {
name: '减肥塑性',
}, {
name: '心理健康'
}, {
name: '女性健康'
}, {
name: '健康养生'
}, {
name: '其他'
}],
topicArr: [{
id: 1,
title: '坚持做瑜伽可以减肥吗',
read: '100',
praise: '100',
cover: 'http://up.boohee.cn/house/u/mboohee/img/others/7.2.jpg'
},{
id: 2,
title: '有没有减肥秘诀/减肥偏方/减肥窍门',
read: '100',
praise: '100',
cover: 'http://up.boohee.cn/house/u/mboohee/img/others/yundong1.jpg'
},{
id: 3,
title: '只需2招迅速变出小蛮腰',
read: '100',
praise: '100',
cover: 'http://up.boohee.cn/house/u/mboohee/img/others/yundong2.jpg'
},{
id: 3,
title: '有效方便的减肥方法有哪些',
read: '100',
praise: '100',
cover: 'http://up.boohee.cn/house/u/mboohee/img/others/jian.jpg'
}]
}
},
onLoad() {},
methods: {
}
};
</script>
<style lang="scss" scoped>
.new-item {
position: relative;
margin-top: $margin - 10;
background: #f5fdfa;
border-radius: $radius;
padding: $padding ($padding * 2 + 200rpx) $padding $padding;
.new-cover {
position: absolute;
right: $padding;
top: $padding;
width: 200rpx;
height: 150rpx;
border-radius: $radius;
}
.new-title {
font-size: $title-size;
line-height: 45rpx;
min-height: 100rpx;
margin-bottom: 10px;
font-weight: bold;
color: $text-color;
}
.new-tool {
color: $text-gray;
font-size: $title-size-sm;
line-height: 40rpx;
text {
margin-right: $margin/2;
}
}
}
.topic {
padding: 0 $padding;
box-sizing: border-box;
}
</style>