@@ -3,6 +3,8 @@ | |||||
<div class="nav-bar"> | <div class="nav-bar"> | ||||
<van-nav-bar | <van-nav-bar | ||||
:title="title" | :title="title" | ||||
:fixed="true" | |||||
z-index="998" | |||||
@click-left="onClickLeft" | @click-left="onClickLeft" | ||||
@click-right="onClickRight" | @click-right="onClickRight" | ||||
> | > | ||||
@@ -15,6 +15,7 @@ export const constantRouterMap = [ | |||||
{ | { | ||||
path: '/Tabbar', | path: '/Tabbar', | ||||
name: 'Index', | name: 'Index', | ||||
redirect: '/index', | |||||
component: () => import('@/views/Tabbar.vue'), | component: () => import('@/views/Tabbar.vue'), | ||||
children: [ | children: [ | ||||
{ | { | ||||
@@ -1,19 +1,22 @@ | |||||
<!-- --> | <!-- --> | ||||
<template> | <template> | ||||
<div> | <div> | ||||
<!-- nav 组件 --> | |||||
<div></div> | |||||
<!-- 页面 --> | |||||
<router-view /> | |||||
<!-- 头部导航 --> | |||||
<TopNavBar /> | |||||
<!-- 页面 --> | |||||
<div class="tabbar-container"> | |||||
<router-view /> | |||||
</div> | |||||
<!-- tabbar 组件 --> | <!-- tabbar 组件 --> | ||||
<TabBar /> | <TabBar /> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import TopNavBar from '@/components/TopNavBar'; | |||||
import TabBar from '@/components/TabBar'; | import TabBar from '@/components/TabBar'; | ||||
export default { | export default { | ||||
components: { TabBar }, | |||||
components: { TopNavBar, TabBar }, | |||||
data() { | data() { | ||||
return {}; | return {}; | ||||
}, | }, | ||||
@@ -23,7 +26,10 @@ export default { | |||||
}; | }; | ||||
</script> | </script> | ||||
<style> | <style> | ||||
.van-tabbar{ | |||||
.van-tabbar { | |||||
z-index: 999 !important; | z-index: 999 !important; | ||||
} | } | ||||
.tabbar-container{ | |||||
padding:100.06px 0px; | |||||
} | |||||
</style> | </style> |
@@ -1,8 +1,6 @@ | |||||
<!-- --> | <!-- --> | ||||
<template> | <template> | ||||
<div class="optimize"> | <div class="optimize"> | ||||
<!-- 头部导航 --> | |||||
<TopNavBar /> | |||||
<!-- 专家介绍 --> | <!-- 专家介绍 --> | ||||
<div class="expert-box"> | <div class="expert-box"> | ||||
<van-swipe indicator-color="white"> | <van-swipe indicator-color="white"> | ||||
@@ -136,7 +134,6 @@ | |||||
<script> | <script> | ||||
import Vue from 'vue'; | import Vue from 'vue'; | ||||
import TabBar from '@/components/TabBar'; | import TabBar from '@/components/TabBar'; | ||||
import TopNavBar from '@/components/TopNavBar'; | |||||
import expertImage from "@/assets/optimize/images/3_08.png"; | import expertImage from "@/assets/optimize/images/3_08.png"; | ||||
import { Swipe, SwipeItem, Lazyload } from 'vant'; | import { Swipe, SwipeItem, Lazyload } from 'vant'; | ||||
Vue.use(Lazyload); | Vue.use(Lazyload); | ||||
@@ -145,8 +142,7 @@ | |||||
}); | }); | ||||
export default { | export default { | ||||
components: { | components: { | ||||
TabBar, | |||||
TopNavBar, | |||||
TabBar, | |||||
[Swipe.name]: Swipe, | [Swipe.name]: Swipe, | ||||
[SwipeItem.name]: SwipeItem, | [SwipeItem.name]: SwipeItem, | ||||
[Lazyload.name]: Lazyload, | [Lazyload.name]: Lazyload, | ||||
@@ -1,5 +1,4 @@ | |||||
.optimize { | .optimize { | ||||
padding: 100.06px 0; | |||||
background-color: #fff; | background-color: #fff; | ||||
min-height: 100vh; | min-height: 100vh; | ||||
.expert-box { | .expert-box { | ||||
@@ -266,4 +265,4 @@ | |||||
} | } | ||||
} | } | ||||
} | } | ||||
} | |||||
} |
@@ -1,8 +1,6 @@ | |||||
<!-- 今日 --> | <!-- 今日 --> | ||||
<template> | <template> | ||||
<div class="today"> | <div class="today"> | ||||
<!-- 头部导航 --> | |||||
<TopNavBar /> | |||||
<!-- 今日状态 --> | <!-- 今日状态 --> | ||||
<div class="today-status"> | <div class="today-status"> | ||||
<img class="img" src="@/assets/today/images/2_03.png" /> | <img class="img" src="@/assets/today/images/2_03.png" /> | ||||
@@ -109,22 +107,22 @@ | |||||
</li> | </li> | ||||
</ul> | </ul> | ||||
<div class="annular"> | <div class="annular"> | ||||
<van-circle | |||||
v-model="currentRate1" | |||||
<van-circle | |||||
v-model="currentRate1" | |||||
size="160px" | size="160px" | ||||
color="#179b3b" | color="#179b3b" | ||||
layer-color="#F8F8F8" | layer-color="#F8F8F8" | ||||
:rate="90" | |||||
:speed="50" | |||||
:stroke-width="120" | |||||
:rate="90" | |||||
:speed="50" | |||||
:stroke-width="120" | |||||
/> | /> | ||||
<van-circle | |||||
v-model="currentRate2" | |||||
<van-circle | |||||
v-model="currentRate2" | |||||
size="129px" | size="129px" | ||||
color="#ff5f8b" | color="#ff5f8b" | ||||
layer-color="#F8F8F8" | layer-color="#F8F8F8" | ||||
:rate="80" | |||||
:speed="50" | |||||
:rate="80" | |||||
:speed="50" | |||||
:stroke-width="140" | :stroke-width="140" | ||||
/> | /> | ||||
<p>多走4567步</p> | <p>多走4567步</p> | ||||
@@ -209,12 +207,10 @@ | |||||
<script> | <script> | ||||
import TabBar from '@/components/TabBar'; | import TabBar from '@/components/TabBar'; | ||||
import TopNavBar from '@/components/TopNavBar'; | |||||
import { Calendar, Circle, Checkbox, CheckboxGroup } from 'vant'; | import { Calendar, Circle, Checkbox, CheckboxGroup } from 'vant'; | ||||
export default { | export default { | ||||
components: { | components: { | ||||
TabBar, | TabBar, | ||||
TopNavBar, | |||||
[Circle.name]: Circle, | [Circle.name]: Circle, | ||||
[Calendar.name]: Calendar, | [Calendar.name]: Calendar, | ||||
[Checkbox.name]: Checkbox, | [Checkbox.name]: Checkbox, | ||||
@@ -1,5 +1,4 @@ | |||||
.today { | .today { | ||||
padding: 100.06px 0; | |||||
background-color: #fff; | background-color: #fff; | ||||
min-height: 100vh; | min-height: 100vh; | ||||
.today-status { | .today-status { | ||||
@@ -227,7 +226,7 @@ | |||||
} | } | ||||
time { | time { | ||||
color: #fff; | color: #fff; | ||||
font-size: 24px; | |||||
font-size: 24px; | |||||
display: block; | display: block; | ||||
} | } | ||||
} | } | ||||
@@ -428,4 +427,4 @@ | |||||
} | } | ||||
} | } | ||||
} | } | ||||
} | |||||
} |