[更新发现模块]
This commit is contained in:
zhangmanman
@@ -10,6 +10,10 @@
|
|||||||
{
|
{
|
||||||
"launchtype" : "local"
|
"launchtype" : "local"
|
||||||
},
|
},
|
||||||
|
"h5" :
|
||||||
|
{
|
||||||
|
"launchtype" : "local"
|
||||||
|
},
|
||||||
"type" : "uniCloud"
|
"type" : "uniCloud"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
44
apis/interfaces/menu.js
Normal file
44
apis/interfaces/menu.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
/**
|
||||||
|
* Web唐明明
|
||||||
|
* 匆匆数载恍如梦，岁月迢迢华发增。
|
||||||
|
* 碌碌无为枉半生，一朝惊醒万事空。
|
||||||
|
* moduleName: 签到
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { request } from '../index'
|
||||||
|
|
||||||
|
// 首页
|
||||||
|
const index = () =>{
|
||||||
|
return request({
|
||||||
|
url: 'health/recipes'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分类
|
||||||
|
const categories = () =>{
|
||||||
|
return request({
|
||||||
|
url: 'health/recipe/categories'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分类-列表
|
||||||
|
const queue = (data) =>{
|
||||||
|
return request({
|
||||||
|
url: 'health/recipe/lists',
|
||||||
|
data:data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 详情
|
||||||
|
const menuDet = (recipe) =>{
|
||||||
|
return request({
|
||||||
|
url: 'health/recipes/' + recipe
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
index,
|
||||||
|
categories,
|
||||||
|
queue,
|
||||||
|
menuDet
|
||||||
|
}
|
||||||
29
apis/interfaces/ranking.js
Normal file
29
apis/interfaces/ranking.js
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
/**
|
||||||
|
* Web唐明明
|
||||||
|
* 匆匆数载恍如梦，岁月迢迢华发增。
|
||||||
|
* 碌碌无为枉半生，一朝惊醒万事空。
|
||||||
|
* moduleName: 食物排行
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { request } from '../index'
|
||||||
|
|
||||||
|
// 食物分类
|
||||||
|
const categories = (data) =>{
|
||||||
|
return request({
|
||||||
|
url: 'health/foods/categories',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 食物排行
|
||||||
|
const foods = (data) =>{
|
||||||
|
return request({
|
||||||
|
url: 'health/foods',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
categories,
|
||||||
|
foods
|
||||||
|
}
|
||||||
19
apis/interfaces/sign.js
Normal file
19
apis/interfaces/sign.js
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
/**
|
||||||
|
* Web唐明明
|
||||||
|
* 匆匆数载恍如梦，岁月迢迢华发增。
|
||||||
|
* 碌碌无为枉半生，一朝惊醒万事空。
|
||||||
|
* moduleName: 签到
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { request } from '../index'
|
||||||
|
|
||||||
|
// 日历
|
||||||
|
const date = () =>{
|
||||||
|
return request({
|
||||||
|
url: 'user/sign'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
date
|
||||||
|
}
|
||||||
11
package-lock.json
generated
11
package-lock.json
generated
@@ -8,19 +8,14 @@
|
|||||||
"integrity": "sha512-GkrrZ0LX0vn9R5k6RKEi0Ez3Q3e2vUpjXQ8Z6/K/d28KudI9ajqgt8WEjQFlG5EPm1K6uTArN8LlqmZTEixDUA=="
|
"integrity": "sha512-GkrrZ0LX0vn9R5k6RKEi0Ez3Q3e2vUpjXQ8Z6/K/d28KudI9ajqgt8WEjQFlG5EPm1K6uTArN8LlqmZTEixDUA=="
|
||||||
},
|
},
|
||||||
"uni-simple-router": {
|
"uni-simple-router": {
|
||||||
"version": "2.0.7",
|
"version": "2.0.8-beta.3",
|
||||||
"resolved": "https://registry.npmjs.org/uni-simple-router/-/uni-simple-router-2.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/uni-simple-router/-/uni-simple-router-2.0.8-beta.3.tgz",
|
||||||
"integrity": "sha512-8FKv5dw7Eoonm0gkO8udprrxzin0fNUI0+AvIphFkFRH5ZmP5ZWJ2pvnWzb2NiiqQSECTSU5VSB7HhvOSwD5eA=="
|
"integrity": "sha512-Aiw9O7TzATZ0BH9e6p0hJsVy8K1lYjf3P9QMmskNqJaOh9jltCaurrw/dJZ7xUMGVu/K3XP1MxOotBAUjsiUZg=="
|
||||||
},
|
},
|
||||||
"uview-ui": {
|
"uview-ui": {
|
||||||
"version": "2.0.19",
|
"version": "2.0.19",
|
||||||
"resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-2.0.19.tgz",
|
"resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-2.0.19.tgz",
|
||||||
"integrity": "sha512-ddZiaP7R9wsUxMzAuhuXgh5OswgCm2lKuulTqjnRXFr0uUWsgL1iBifU3GbOwpwP0LtTHKJOo9rYv1LP0WXmzA=="
|
"integrity": "sha512-ddZiaP7R9wsUxMzAuhuXgh5OswgCm2lKuulTqjnRXFr0uUWsgL1iBifU3GbOwpwP0LtTHKJOo9rYv1LP0WXmzA=="
|
||||||
},
|
|
||||||
"vuex": {
|
|
||||||
"version": "3.6.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
|
|
||||||
"integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
72
pages.json
72
pages.json
@@ -119,6 +119,78 @@
|
|||||||
"navigationBarBackgroundColor": "#FFFFFF",
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
"enablePullDownRefresh": true
|
"enablePullDownRefresh": true
|
||||||
}
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/sign/index",
|
||||||
|
"name": "signIndex",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "每日签到",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/menu/index",
|
||||||
|
"name": "menuIndex",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "食谱推荐",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/menu/classify",
|
||||||
|
"name": "menuClassify",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "食谱推荐",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/menu/details",
|
||||||
|
"name": "menuDetails",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "食谱详情",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/topic/index",
|
||||||
|
"name": "topicIndex",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "话题广场",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/topic/details",
|
||||||
|
"name": "topicDetails",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/ranking/index",
|
||||||
|
"name": "rankingIndex",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "食物排行",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/ranking/list",
|
||||||
|
"name": "rankingList",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "食物榜单",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/ranking/details",
|
||||||
|
"name": "rankingDetails",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "食物详情",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
}],
|
}],
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
"borderStyle": "white",
|
"borderStyle": "white",
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<view class="status-main">
|
<view class="status-main">
|
||||||
<view class="helloe">欢迎使用ZH健康</view>
|
<view class="helloe">欢迎使用ZH健康</view>
|
||||||
<view class="btns">
|
<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 class="btns-item show"><uni-icons custom-prefix="iconfont" type="icon-pinglun" size="25"></uni-icons></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -17,9 +17,9 @@
|
|||||||
</navigator>
|
</navigator>
|
||||||
</view>
|
</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">
|
<u-scroll-list class="choiceness-box" indicatorColor="#dafff2" indicatorActiveColor="#34CE98">
|
||||||
<view v-for="(item, index) in choiceness" class="choiceness-item" :key="index">
|
<view v-for="(item, index) in choiceness" class="choiceness-item" :key="index">
|
||||||
<view class="choiceness-item-nav" :style="'backgroundColor:#' + item.color">
|
<view class="choiceness-item-nav" :style="'backgroundColor:#' + item.color">
|
||||||
@@ -31,39 +31,11 @@
|
|||||||
</u-scroll-list>
|
</u-scroll-list>
|
||||||
<!-- 话题广场 -->
|
<!-- 话题广场 -->
|
||||||
<view class="new-box">
|
<view class="new-box">
|
||||||
<view class="title">话题广场</view>
|
<view class="title">话题广场</view><view class="more" @click="$Router.push({name: 'topicIndex'})">查看更多</view>
|
||||||
<view class="new-item">
|
<oct-topic
|
||||||
<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/7.2.jpg" mode="aspectFill"></image>
|
:lists="topicArr"
|
||||||
<view class="new-title">坚持做瑜伽可以减肥吗</view>
|
@onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.id }})"
|
||||||
<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>
|
</view>
|
||||||
<!-- ZH健康 -->
|
<!-- ZH健康 -->
|
||||||
<view class="img-card"><image src="@/static/dev/img-00.png" mode="widthFix"></image></view>
|
<view class="img-card"><image src="@/static/dev/img-00.png" mode="widthFix"></image></view>
|
||||||
@@ -89,7 +61,32 @@ export default {
|
|||||||
describe: "健身搭配食用更佳",
|
describe: "健身搭配食用更佳",
|
||||||
color : "fbeed3",
|
color : "fbeed3",
|
||||||
thumb : 'https://cdn.uviewui.com/uview/goods/1.jpg'
|
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() {},
|
onLoad() {},
|
||||||
@@ -209,41 +206,17 @@ export default {
|
|||||||
// 话题广场
|
// 话题广场
|
||||||
.new-box {
|
.new-box {
|
||||||
margin: $margin;
|
margin: $margin;
|
||||||
|
position: relative;
|
||||||
.title {
|
.title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: $title-size + 4;
|
font-size: $title-size + 4;
|
||||||
}
|
}
|
||||||
.new-item {
|
.more {
|
||||||
position: relative;
|
position: absolute;
|
||||||
margin-top: $margin - 10;
|
right: 0;
|
||||||
background: #f5fdfa;
|
top: 0;
|
||||||
border-radius: $radius;
|
color: $text-gray;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 卡片
|
// 卡片
|
||||||
|
|||||||
68
pages/menu/classify.vue
Normal file
68
pages/menu/classify.vue
Normal 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
149
pages/menu/details.vue
Normal 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
82
pages/menu/index.vue
Normal 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
321
pages/ranking/details.vue
Normal 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
120
pages/ranking/index.vue
Normal 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
73
pages/ranking/list.vue
Normal 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
182
pages/sign/index.vue
Normal 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
151
pages/topic/details.vue
Normal 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
108
pages/topic/index.vue
Normal 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>
|
||||||
BIN
static/find/default_img.png
Normal file
BIN
static/find/default_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
static/find/menu_0.jpg
Normal file
BIN
static/find/menu_0.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
static/find/menu_1.jpg
Normal file
BIN
static/find/menu_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
BIN
static/find/menu_2.jpg
Normal file
BIN
static/find/menu_2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
BIN
static/find/menu_more.png
Normal file
BIN
static/find/menu_more.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
static/find/ranking_img.png
Normal file
BIN
static/find/ranking_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
static/find/sign.png
Normal file
BIN
static/find/sign.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
static/find/sign_active.png
Normal file
BIN
static/find/sign_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/find/sign_img.png
Normal file
BIN
static/find/sign_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 329 KiB |
0
uni_modules/oct-menu/changelog.md
Normal file
0
uni_modules/oct-menu/changelog.md
Normal file
115
uni_modules/oct-menu/components/oct-menu/oct-menu.vue
Normal file
115
uni_modules/oct-menu/components/oct-menu/oct-menu.vue
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="menu--item" v-for="(item, index) in lists" :key="index" @click="$emit('onMenu', item)" :style="btnStyle">
|
||||||
|
<view class="menu--block">
|
||||||
|
<view class="menu--number" v-if="isNumber">
|
||||||
|
{{ index + 1 }}
|
||||||
|
</view>
|
||||||
|
<image class="menu--picture" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="menu--label">
|
||||||
|
<view class="nowrap menu--name">
|
||||||
|
{{ item.name }}
|
||||||
|
</view>
|
||||||
|
<view class="nowrap menu--text">
|
||||||
|
{{ isType ? item.weight + '克' : item.sub_title }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default{
|
||||||
|
props:{
|
||||||
|
lists: {
|
||||||
|
type : Array,
|
||||||
|
required: true,
|
||||||
|
default : () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 列表底部距离
|
||||||
|
btnStyle: {
|
||||||
|
type : Object,
|
||||||
|
default : () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 是否显示排行数字
|
||||||
|
isNumber: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
|
||||||
|
// 是否是详情
|
||||||
|
isType: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.menu--item {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: $radius;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: $margin - 10;
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.menu--block {
|
||||||
|
position: relative;
|
||||||
|
width: 110rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
border-radius: $radius;
|
||||||
|
overflow: hidden;
|
||||||
|
.menu--number {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
padding: 0 $padding - 20;
|
||||||
|
background-color: $text-gray-m;
|
||||||
|
border-radius: $radius 0 $radius 0;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.menu--picture {
|
||||||
|
z-index: 1;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-child(1) .menu--number,
|
||||||
|
&:nth-child(2) .menu--number,
|
||||||
|
&:nth-child(3) .menu--number{
|
||||||
|
background-color: $text-price;
|
||||||
|
}
|
||||||
|
.menu--label {
|
||||||
|
width: calc(100% - 140rpx);
|
||||||
|
margin: 10rpx 0 0 30rpx;
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0!important;
|
||||||
|
}
|
||||||
|
.menu--name {
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
margin-bottom: $margin - 20;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
.menu--text {
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
80
uni_modules/oct-menu/package.json
Normal file
80
uni_modules/oct-menu/package.json
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
{
|
||||||
|
"id": "oct-menu",
|
||||||
|
"displayName": "oct-menu",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "oct-menu",
|
||||||
|
"keywords": [
|
||||||
|
"oct-menu"
|
||||||
|
],
|
||||||
|
"repository": "",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "",
|
||||||
|
"data": "",
|
||||||
|
"permissions": ""
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "u",
|
||||||
|
"aliyun": "u"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "u",
|
||||||
|
"vue3": "u"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "u",
|
||||||
|
"app-nvue": "u"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "u",
|
||||||
|
"Android Browser": "u",
|
||||||
|
"微信浏览器(Android)": "u",
|
||||||
|
"QQ浏览器(Android)": "u"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "u",
|
||||||
|
"IE": "u",
|
||||||
|
"Edge": "u",
|
||||||
|
"Firefox": "u",
|
||||||
|
"Safari": "u"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "u",
|
||||||
|
"阿里": "u",
|
||||||
|
"百度": "u",
|
||||||
|
"字节跳动": "u",
|
||||||
|
"QQ": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
1
uni_modules/oct-menu/readme.md
Normal file
1
uni_modules/oct-menu/readme.md
Normal file
@@ -0,0 +1 @@
|
|||||||
|
# oct-menu
|
||||||
0
uni_modules/oct-topic/changelog.md
Normal file
0
uni_modules/oct-topic/changelog.md
Normal file
63
uni_modules/oct-topic/components/oct-topic/oct-topic.vue
Normal file
63
uni_modules/oct-topic/components/oct-topic/oct-topic.vue
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="new-item" v-for="(item, index) in lists" :key="index" @click="$emit('onTopic', item)">
|
||||||
|
<image class="new-cover" :src="item.cover" mode="aspectFill"></image>
|
||||||
|
<view class="new-title">{{ item.title }}</view>
|
||||||
|
<view class="new-tool">
|
||||||
|
<text>阅读{{ item.read }}</text>
|
||||||
|
<text>赞{{ item.praise }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default{
|
||||||
|
props:{
|
||||||
|
lists: {
|
||||||
|
type : Array,
|
||||||
|
required: true,
|
||||||
|
default : () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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-lg;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
80
uni_modules/oct-topic/package.json
Normal file
80
uni_modules/oct-topic/package.json
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
{
|
||||||
|
"id": "oct-topic",
|
||||||
|
"displayName": "oct-topic",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "oct-topic",
|
||||||
|
"keywords": [
|
||||||
|
"oct-topic"
|
||||||
|
],
|
||||||
|
"repository": "",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "",
|
||||||
|
"data": "",
|
||||||
|
"permissions": ""
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "u",
|
||||||
|
"aliyun": "u"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "u",
|
||||||
|
"vue3": "u"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "u",
|
||||||
|
"app-nvue": "u"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "u",
|
||||||
|
"Android Browser": "u",
|
||||||
|
"微信浏览器(Android)": "u",
|
||||||
|
"QQ浏览器(Android)": "u"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "u",
|
||||||
|
"IE": "u",
|
||||||
|
"Edge": "u",
|
||||||
|
"Firefox": "u",
|
||||||
|
"Safari": "u"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "u",
|
||||||
|
"阿里": "u",
|
||||||
|
"百度": "u",
|
||||||
|
"字节跳动": "u",
|
||||||
|
"QQ": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
1
uni_modules/oct-topic/readme.md
Normal file
1
uni_modules/oct-topic/readme.md
Normal file
@@ -0,0 +1 @@
|
|||||||
|
# oct-topic
|
||||||
Reference in New Issue
Block a user