138 lines
3.3 KiB
Vue
138 lines
3.3 KiB
Vue
<template>
|
|
<view class="tab-dock">
|
|
<view class="tab-dock__inner">
|
|
<view class="tab-dock__item" @click="goHome">
|
|
<image
|
|
class="tab-dock__icon"
|
|
:src="active === 0 ? '/static/user/home_no.png' : '/static/user/home.png'"
|
|
mode="aspectFit"
|
|
/>
|
|
<text class="tab-dock__label" :style="{ color: active === 0 ? activeColor : color }">首页</text>
|
|
</view>
|
|
|
|
<view class="tab-dock__item tab-dock__item--center" @click="goWeekly">
|
|
<view class="tab-dock__fab" :class="{ 'tab-dock__fab--active': active === 1 }">
|
|
<text class="tab-dock__fab-text">糖</text>
|
|
</view>
|
|
<text class="tab-dock__label tab-dock__label--center" :style="{ color: active === 1 ? activeColor : color }">血糖</text>
|
|
</view>
|
|
|
|
<view class="tab-dock__item" @click="goUser">
|
|
<image
|
|
class="tab-dock__icon"
|
|
:src="active === 2 ? '/static/user/user_no.png' : '/static/user/user.png'"
|
|
mode="aspectFit"
|
|
/>
|
|
<text class="tab-dock__label" :style="{ color: active === 2 ? activeColor : color }">我的</text>
|
|
</view>
|
|
</view>
|
|
<view class="tab-dock__safe" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
/** 0 首页 1 血糖 2 我的 */
|
|
active: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
})
|
|
|
|
const color = '#8a8a8a'
|
|
const activeColor = '#204e2b'
|
|
|
|
function goHome() {
|
|
if (props.active === 0) return
|
|
uni.redirectTo({ url: '/pages/index/index' })
|
|
}
|
|
|
|
function goUser() {
|
|
if (props.active === 2) return
|
|
uni.redirectTo({ url: '/pages/user/user' })
|
|
}
|
|
|
|
function goWeekly() {
|
|
if (props.active === 1) return
|
|
uni.redirectTo({ url: '/tongji/pages/weekly' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tab-dock {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
background: #ffffff;
|
|
border-top: 1rpx solid rgba(0, 0, 0, 0.06);
|
|
box-shadow: 0 -6rpx 20rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.tab-dock__inner {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
height: 100rpx;
|
|
}
|
|
|
|
.tab-dock__item {
|
|
flex: 1;
|
|
height: 100rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tab-dock__item--center {
|
|
justify-content: flex-end;
|
|
padding-bottom: 6rpx;
|
|
}
|
|
|
|
.tab-dock__icon {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
}
|
|
|
|
.tab-dock__label {
|
|
margin-top: 6rpx;
|
|
font-size: 22rpx;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.tab-dock__label--center {
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.tab-dock__fab {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
margin-top: -48rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(180deg, #2d7340 0%, #204e2b 100%);
|
|
border: 6rpx solid #ffffff;
|
|
box-shadow: 0 10rpx 24rpx rgba(32, 78, 43, 0.35);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tab-dock__fab--active {
|
|
transform: scale(1.04);
|
|
box-shadow: 0 12rpx 28rpx rgba(32, 78, 43, 0.42);
|
|
}
|
|
|
|
.tab-dock__fab-text {
|
|
color: #ffffff;
|
|
font-size: 38rpx;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tab-dock__safe {
|
|
height: env(safe-area-inset-bottom);
|
|
background: #ffffff;
|
|
}
|
|
</style>
|