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

109
pages/index/index.vue
View File

@@ -4,7 +4,7 @@
<view class="status-main">
<view class="helloe">欢迎使用ZH健康</view>
<view class="btns">
<view class="btns-item"><image src="@/static/icon/sign-icon.png" mode="widthFix"></image></view>
<view class="btns-item" @click="$Router.push({name: 'signIndex'})"><image src="@/static/icon/sign-icon.png" mode="widthFix"></image></view>
<view class="btns-item show"><uni-icons custom-prefix="iconfont" type="icon-pinglun" size="25"></uni-icons></view>
</view>
</view>
@@ -17,9 +17,9 @@
</navigator>
</view>
<!-- 排行榜 -->
<view class="img-card"><image src="@/static/dev/img-01.png" mode="widthFix"></image></view>
<view class="img-card" @click="$Router.push({name: 'rankingIndex'})"><image src="@/static/dev/img-01.png" mode="widthFix"></image></view>
<!-- 精选推荐 -->
<view class="new-box"><view class="title">精选推荐</view></view>
<view class="new-box"><view class="title">精选推荐</view><view class="more" @click="$Router.push({name: 'menuIndex'})">查看更多</view></view>
<u-scroll-list class="choiceness-box" indicatorColor="#dafff2" indicatorActiveColor="#34CE98">
<view v-for="(item, index) in choiceness" class="choiceness-item" :key="index">
<view class="choiceness-item-nav" :style="'backgroundColor:#' + item.color">
@@ -31,39 +31,11 @@
</u-scroll-list>
<!-- 话题广场 -->
<view class="new-box">
<view class="title">话题广场</view>
<view class="new-item">
<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/7.2.jpg" mode="aspectFill"></image>
<view class="new-title">坚持做瑜伽可以减肥吗</view>
<view class="new-tool">
<text>阅读100</text>
<text>赞100</text>
</view>
</view>
<view class="new-item">
<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/yundong1.jpg" mode="aspectFill"></image>
<view class="new-title">有没有减肥秘诀/减肥偏方/减肥窍门</view>
<view class="new-tool">
<text>阅读100</text>
<text>赞100</text>
</view>
</view>
<view class="new-item">
<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/yundong2.jpg" mode="aspectFill"></image>
<view class="new-title">只需2招迅速变出小蛮腰</view>
<view class="new-tool">
<text>阅读100</text>
<text>赞100</text>
</view>
</view>
<view class="new-item">
<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/jian.jpg" mode="aspectFill"></image>
<view class="new-title">有效方便的减肥方法有哪些</view>
<view class="new-tool">
<text>阅读100</text>
<text>赞100</text>
</view>
</view>
<view class="title">话题广场</view><view class="more" @click="$Router.push({name: 'topicIndex'})">查看更多</view>
<oct-topic
:lists="topicArr"
@onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.id }})"
/>
</view>
<!-- ZH健康 -->
<view class="img-card"><image src="@/static/dev/img-00.png" mode="widthFix"></image></view>
@@ -89,7 +61,32 @@ export default {
describe: "健身搭配食用更佳",
color : "fbeed3",
thumb : 'https://cdn.uviewui.com/uview/goods/1.jpg'
}]
}],
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() {},
@@ -209,41 +206,17 @@ export default {
// 话题广场
.new-box {
margin: $margin;
position: relative;
.title {
font-weight: bold;
font-size: $title-size + 4;
}
.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;
}
}
}
.more {
position: absolute;
right: 0;
top: 0;
color: $text-gray;
}
}
// 卡片

68
pages/menu/classify.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<view class="content">
<view class="tabs">
<u-tabs :current="tabsIndex" :list="tabArr" @change="tabsClick" lineColor="#34CE98" :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"></u-tabs>
</view>
<view class="box">
<oct-menu
:lists="menuData"
:btnStyle="{'padding': '30rpx'}"
@onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.id, title: $event.name, title: $event.index }})"
/>
</view>
</view>
</template>
<script>
import { queue, categories } from '@/apis/interfaces/menu'
export default {
data() {
return {
tabArr : [],
menuData : [],
tabsIndex : this.$Route.query.index
};
},
mounted() {
this.getTab()
this.getMenu(this.$Route.query.id)
},
methods: {
getTab(){
categories().then(res => {
this.tabArr = res
})
},
getMenu(id){
queue({
category_id: id
}).then(res => {
this.menuData = res.data
})
},
tabsClick(item) {
this.getMenu(item.category_id)
this.tabsIndex = item.index
}
}
};
</script>
<style lang="scss" scoped>
page {
background-color: $window-color;
}
.tabs {
background-color: white;
margin-bottom: $margin;
padding-bottom: $padding - 10;
}
.box {
padding: 0 $padding;
box-sizing: border-box;
}
// 34CE98
</style>

149
pages/menu/details.vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<view class="content">
<image class="backImg" :src="menuData.cover ? menuData.cover : '/static/find/default_img.png'" mode="widthFix"></image>
<view class="details">
<view class="introduce">
{{ menuData.description }}
</view>
<view class="foods">
<view class="title">
推荐搭配
</view>
<oct-menu
:lists="menuData.foods"
:isType='true'
:btnStyle="{'margin-top': '30rpx'}"
@onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.food_id, title: $event.name }})"
/>
</view>
<view class="foods">
<view class="title">
推荐搭配
</view>
<view class="other">
<view class="other-label">
<view class="other-name">
碳水化合物
</view>
<view class="other-number">
200.00g
</view>
</view>
<view class="other-label">
<view class="other-name">
蛋白质
</view>
<view class="other-number">
200.00g
</view>
</view>
<view class="other-label">
<view class="other-name">
脂肪
</view>
<view class="other-number">
200.00g
</view>
</view>
<view class="other-label">
<view class="other-name">
千卡
</view>
<view class="other-number">
{{ menuData.calory }}
</view>
</view>
</view>
</view>
<view class="foods">
<view class="title">
营养师建议
</view>
<view class="quiz">
{{ menuData.suggest }}
</view>
</view>
</view>
</view>
</template>
<script>
import { menuDet } from '@/apis/interfaces/menu'
export default {
data() {
return {
menuData: ''
}
},
onLoad() {},
mounted() {
uni.setNavigationBarTitle({
title: this.$Route.query.title
})
this.getMenu()
},
methods: {
getMenu(){
menuDet(this.$Route.query.id).then(res => {
this.menuData = res
})
}
}
};
</script>
<style lang="scss" scoped>
page {
background-color: $window-color;
}
.backImg {
width: 100%;
display: block;
}
.details {
padding: $padding;
box-sizing: border-box;
.introduce {
border-radius: $radius;
background-color: white;
padding: $padding;
box-sizing: border-box;
margin-bottom: $margin;
font-size: $title-size-lg;
line-height: 48rpx;
}
.foods {
background-color: white;
border-radius: $radius;
padding: $padding;
margin-bottom: $margin;
.title {
font-size: $title-size;
font-weight: bold;
margin-bottom: $margin;
}
.other {
display: flex;
.other-label {
text-align: center;
width: 25%;
font-size: $title-size-m;
.other-number {
color: $text-gray;
font-size: $title-size-sm;
padding-top: $padding - 20;
}
&:last-child {
font-weight: bold;
}
}
}
.quiz {
font-size: $title-size-m;
color: $text-gray;
line-height: 48rpx;
}
}
}
</style>

82
pages/menu/index.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<view class="content">
<view class="menu" v-for="(item, index) in menuData" :key="index">
<view class="title">
<view class="name">
{{ item.name }}
</view>
<view class="more" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index }})">
查看更多<image src="/static/find/menu_more.png" mode="aspectFill"></image>
</view>
</view>
<view class="box">
<oct-menu
v-if="item.recipes.length > 0"
:lists="item.recipes"
:btnStyle="{'padding': '30rpx'}"
@onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.recipe_id, title: $event.name }})"
/>
<u-empty
v-else
mode="list"
text="暂无食谱"
/>
</view>
</view>
</view>
</template>
<script>
import { index } from '@/apis/interfaces/menu'
export default {
data() {
return {
menuData: ''
};
},
mounted() {
this.getMenu()
},
methods: {
getMenu(){
index().then(res => {
this.menuData = res
})
}
}
};
</script>
<style lang="scss" scoped>
page {
background-color: $window-color;
}
.menu {
.title {
padding: $padding $padding 0;
box-sizing: border-box;
display: flex;
margin-bottom: $margin - 10;
line-height: 50rpx;
.name {
font-weight: bold;
font-size: $title-size + 4;
flex: 1;
}
.more {
display: flex;
color: $text-gray;
image {
width: 28rpx;
height: 28rpx;
margin-top: $margin - 18;
}
}
}
.box {
padding: 0 $padding;
box-sizing: border-box;
}
}
</style>

321
pages/ranking/details.vue Normal file
View File

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

120
pages/ranking/index.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<view class="content">
<view class="left">
<view class="label" :class="{active : categoryId == item.category_id}" v-for="(item, index) in rankArr" :key="index" @click="leftClick(item.category_id)">
{{ item.name }}
</view>
</view>
<view class="right">
<view class="goods">
<view class="list" @click="$Router.push({name: 'rankingList', params: {id: item.category_id, name: item.name}})" v-for="(item, index) in listArr" :key="index">
<image class="logo" :src="item.cover" mode="aspectFill"></image>
<view class="name">
{{ item.name }}
</view>
<image class="arrow" src="/static/find/menu_more.png" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
</template>
<script>
import { categories } from '@/apis/interfaces/ranking'
export default {
data() {
return {
rankArr : [],
listArr : [],
categoryId : ''
}
},
mounted() {
categories().then(res => {
this.rankArr = res
this.categoryId = res[0].category_id
this.listArr = res[0].children
})
},
methods: {
// 分类-食物
getRank(cateogoryId){
categories({
category_id: cateogoryId
}).then(res => {
this.listArr = res
})
},
// 选择分类
leftClick(id) {
this.getRank(id)
this.categoryId = id
}
}
};
</script>
<style lang="scss" scoped>
.left {
position: fixed;
width: 200rpx;
left: 0;
top: 0;
height: 100vh;
z-index: 9;
overflow-y: scroll;
background-color: white;
.label {
line-height: 120rpx;
text-align: center;
font-size: $title-size-lg;
color: $text-gray-m;
border-bottom: $window-color 2rpx solid;
&.active {
background-color: $window-color;
color: $main-color;
font-weight: bold;
}
}
}
.right {
position: fixed;
background-color: $window-color;
height: 100vh;
overflow-y: scroll;
width: 100%;
left: 0;
top: 0;
padding: $padding $padding $padding 230rpx;
box-sizing: border-box;
.goods {
.list {
padding: $padding;
border-radius: $radius-m;
display: flex;
background-color: white;
margin-bottom: $margin;
position: relative;
.logo {
width: 80rpx;
height: 80rpx;
border-radius: $radius-lg;
margin-right: $margin;
}
.name {
font-size: $title-size-lg;
line-height: 80rpx;
}
.arrow {
width: 28rpx;
height: 28rpx;
position: absolute;
right: $padding;
top: 58rpx;
opacity: .6;
}
}
}
}
</style>

73
pages/ranking/list.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<view class="content">
<view class="banner">
<image class="img" src="/static/find/ranking_img.png" mode="widthFix"></image>
<view class="title">
{{ name }}
</view>
</view>
<view class="box">
<oct-menu
:lists="menuArr"
:btnStyle="{'margin-top': '30rpx'}"
:isNumber="true"
@onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.id, title: $event.name }})"
/>
</view>
</view>
</template>
<script>
import { foods } from '@/apis/interfaces/ranking'
export default {
data() {
return {
name : this.$Route.query.name,
menuArr : []
}
},
mounted() {
this.getRank()
},
methods: {
// 分类-食物
getRank(){
foods({category_id: this.$Route.query.id}).then(res => {
this.menuArr = res.data
})
}
}
};
</script>
<style lang="scss" scoped>
.banner {
position: relative;
width: 100vw;
padding-top: 25%;
.img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.title {
position: absolute;
left: 0;
top: 0;
z-index: 9;
padding: $padding * 3 $padding $padding $padding;
font-size: $title-size + 8;
font-weight: 600;
color: transparent;
background: linear-gradient(to right, #f5712f, #e6576b);
background-clip: text;
}
}
.box {
padding: $padding;
box-sizing: border-box;
}
</style>

182
pages/sign/index.vue Normal file
View File

@@ -0,0 +1,182 @@
<template>
<view class="content">
<image class="setting" src="/static/find/sign_img.png" mode="widthFix"></image>
<view class="sign">
<!-- <view class="signTitle">
记得每日要签到哦
</view> -->
<view class="signAdd">
<view class="label">
<image class="picture" src="/static/find/sign.png" mode="aspectFill"></image>
<view class="day">
<view class="number">
<text>10</text>天
</view>
本月签到
</view>
</view>
<view class="label">
<image class="picture" src="/static/find/sign_active.png" mode="aspectFill"></image>
<view class="day">
<view class="number">
<text>1</text>天
</view>
本月漏签
</view>
</view>
</view>
<view class="signDate">
<view class="date">
2020-01-07
</view>
<view class="list">
<view class="day">
1
</view>
<view class="day">
2
</view>
<view class="day">
3
</view>
<view class="day">
4
</view>
<view class="day">
5
</view>
<view class="day">
6
</view>
<view class="day">
7
</view>
<view class="day">
8
</view>
</view>
<view class="signBtn">
<view class="btn">
立即签到
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { date } from '@/apis/interfaces/sign'
export default {
data() {
return {
}
},
mounted() {
this.dateList();
},
methods: {
// 用户登录
dateList() {
date().then(res => {
console.log(res)
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
}
}
</script>
<style lang="scss" scoped>
page {
background: $window-color;
height: 100vh;
}
.setting {
width: 100%;
}
.sign {
z-index: 9;
left: 0;
top: 0;
width: 100%;
padding: 0 $padding + 20;
margin-top: -$margin * 2.5;
position: relative;
box-sizing: border-box;
.signTitle {
padding: $padding * 3;
font-size: $title-size + 20;
color: #48988d;
font-weight: 600;
text-align: center;
}
.signAdd {
padding: $padding $padding * 2.5;
box-sizing: border-box;
border-radius: $radius-m;
background-color: white;
margin-bottom: $margin;
display: flex;
.label {
display: flex;
font-size: $title-size-sm;
&:first-child {
flex: 1;
.day {
text {
color: $main-color;
}
}
}
.picture {
width: 74rpx;
height: 74rpx;
margin-right: $margin - 10;
}
.day {
color: $text-gray;
text {
font-size: $title-size-lg;
color: $text-color;
font-weight: 600;
padding-right: $padding - 20;
}
}
}
}
.signDate {
padding: $padding;
border-radius: $radius-m;
background-color: white;
.date {
text-align: center;
font-size: $title-size + 6;
margin-bottom: $margin;
font-weight: 600;
}
.list {
flex-wrap: wrap;
display: flex;
.day {
width: 14.28%;
text-align: center;
line-height: 80rpx;
color: $text-color;
}
}
.signBtn {
padding: $padding * 2 $padding * 2 0;
.btn {
color: white;
background-color: $text-price;
text-align: center;
border-radius: $radius-m;
line-height: 90rpx;
}
}

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>