Ver código fonte

style(components): 调整tabbar图标尺寸并优化页面样式

- 将tabbar图标尺寸从50rpx调整为45rpx
- 移除了多个健康详情页的TabBar组件引用
- 优化了图表容器样式,增加高度限制和溢出隐藏
- 清理了不必要的换行和空格,统一代码格式
- 移除了重复的TabBar导入和使用声明
mcbaiyun 1 mês atrás
pai
commit
acc6ae967a

+ 2 - 2
src/components/tab-bar.vue

@@ -57,8 +57,8 @@ const onTabClick = (index: number) => {
 
 <style>
 .icon {
-  width: 50rpx;
-  height: 50rpx;
+  width: 45rpx;
+  height: 45rpx;
   display: inline-block;
 }
 .tab-bar {

+ 220 - 222
src/pages/patient/health/details/blood-glucose.vue

@@ -19,14 +19,10 @@
     </view>
 
     <!-- 趋势图 - 简化canvas设置 -->
-  <view class="chart-wrap">
-  <view class="chart-header">{{ viewMode === 'month' ? '本月' : '本周' }}趋势</view>
-      <canvas 
-        canvas-id="bgChart" 
-        id="bgChart" 
-        class="chart-canvas"
-        :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
-      ></canvas>
+    <view class="chart-wrap">
+      <view class="chart-header">{{ viewMode === 'month' ? '本月' : '本周' }}趋势</view>
+      <canvas canvas-id="bgChart" id="bgChart" class="chart-canvas"
+        :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
     </view>
 
     <view class="content">
@@ -78,7 +74,8 @@
         </view>
 
         <view class="ruler-wrap">
-          <ScaleRuler v-if="showAdd" :min="2" :max="16" :step="0.1" :gutter="12" :initialValue="addGlucose ?? 6" @update="onRulerUpdate" @change="onRulerChange" />
+          <ScaleRuler v-if="showAdd" :min="2" :max="16" :step="0.1" :gutter="12" :initialValue="addGlucose ?? 6"
+            @update="onRulerUpdate" @change="onRulerChange" />
         </view>
 
         <view class="fixed-footer">
@@ -88,13 +85,13 @@
     </view>
 
   </view>
-  <TabBar />
+
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount, getCurrentInstance } from 'vue'
 import CustomNav from '@/components/custom-nav.vue'
-import TabBar from '@/components/tab-bar.vue'
+
 import ScaleRuler from '@/components/scale-ruler.vue'
 import { createUChart } from '@/composables/useUChart'
 import { getWeekStart, getWeekEnd, getWeekNumber, formatDisplayDate, formatPickerDate, daysInMonth, weekDayIndex } from '@/utils/date'
@@ -339,16 +336,16 @@ function closeAdd() { showAdd.value = false; addGlucose.value = null }
 function onAddDateChange(e: any) { const val = e?.detail?.value || e; addDate.value = val; addDateLabel.value = val.replace(/^(.{10}).*$/, '$1') }
 
 async function confirmAdd() {
-  if (!addGlucose.value) { 
-    uni.showToast && uni.showToast({ title: '请输入血糖值', icon: 'none' }); 
-    return 
+  if (!addGlucose.value) {
+    uni.showToast && uni.showToast({ title: '请输入血糖值', icon: 'none' });
+    return
   }
   const id = `user-${Date.now()}`
-  const item: RecordItem = { 
-    id, 
-    date: addDateLabel.value, 
-    value: Number(Number(addGlucose.value).toFixed(1)), 
-    type: types[typeIndex.value] 
+  const item: RecordItem = {
+    id,
+    date: addDateLabel.value,
+    value: Number(Number(addGlucose.value).toFixed(1)),
+    type: types[typeIndex.value]
   }
   const parts = addDate.value.split('-')
   const addY = parseInt(parts[0], 10)
@@ -377,42 +374,42 @@ async function confirmAdd() {
   }
 }
 
-async function confirmDeleteRecord(id: string) { 
-  if (typeof uni !== 'undefined' && uni.showModal) { 
-    uni.showModal({ 
-      title: '删除', 
-      content: '确认删除该条记录吗?', 
-      success: async (res: any) => { 
+async function confirmDeleteRecord(id: string) {
+  if (typeof uni !== 'undefined' && uni.showModal) {
+    uni.showModal({
+      title: '删除',
+      content: '确认删除该条记录吗?',
+      success: async (res: any) => {
         if (res.confirm) {
           records.value = records.value.filter(r => r.id !== id)
           try { await rebuildChart() } catch (e) { console.warn('rebuildChart after delete failed', e) }
         }
-      } 
-    }) 
-  } else { 
+      }
+    })
+  } else {
     records.value = records.value.filter(r => r.id !== id)
     try { await rebuildChart() } catch (e) { console.warn('rebuildChart after delete failed', e) }
-  } 
+  }
 }
 </script>
 
 <style scoped>
-.page { 
-  min-height: calc(100vh); 
-  padding-top: calc(var(--status-bar-height) + 44px); 
-  background: #f5f6f8; 
-  box-sizing: border-box 
+.page {
+  min-height: calc(100vh);
+  padding-top: calc(var(--status-bar-height) + 44px);
+  background: #f5f6f8;
+  box-sizing: border-box
 }
 
-.header { 
-  padding: 20rpx 40rpx 
+.header {
+  padding: 20rpx 40rpx
 }
 
-.month-selector { 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-  gap: 12rpx 
+.month-selector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx
 }
 
 .period-controls {
@@ -444,253 +441,254 @@ async function confirmDeleteRecord(id: string) {
   border-color: #ff6a00;
 }
 
-.month-label { 
-  font-size: 34rpx; 
-  color: #333 
+.month-label {
+  font-size: 34rpx;
+  color: #333
 }
 
-.btn { 
-  background: transparent; 
-  border: none; 
-  font-size: 36rpx; 
-  color: #666 
+.btn {
+  background: transparent;
+  border: none;
+  font-size: 36rpx;
+  color: #666
 }
 
-.content { 
-  padding: 20rpx 24rpx 100rpx 24rpx 
+.content {
+  padding: 20rpx 24rpx 100rpx 24rpx
 }
 
-.chart-wrap { 
-  background: #fff; 
-  border-radius: 12rpx; 
-  padding: 24rpx; 
-  margin: 0 24rpx 20rpx 24rpx; 
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03) 
+.chart-wrap {
+  height: 340rpx;
+  overflow: hidden; /* 隐藏溢出内容 */
+  background: #fff;
+  border-radius: 12rpx;
+  padding: 24rpx;
+  margin: 0 24rpx 20rpx 24rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
 }
 
-.chart-header { 
-  font-size: 32rpx; 
-  color: #333; 
-  margin-bottom: 20rpx; 
-  font-weight: 600 
+.chart-header {
+  font-size: 32rpx;
+  color: #333;
+  margin-bottom: 20rpx;
+  font-weight: 600
 }
 
 /* 关键修复:确保canvas样式正确,参考微信小程序示例 */
 .chart-canvas {
-  width: 750rpx;
   height: 280rpx;
   background-color: #FFFFFF;
   display: block;
 }
 
-.summary { 
-  padding: 20rpx; 
-  color: #666; 
-  font-size: 28rpx 
-}
-
-.list { 
-  background: #fff; 
-  border-radius: 12rpx; 
-  padding: 10rpx; 
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03) 
+.summary {
+  padding: 20rpx;
+  color: #666;
+  font-size: 28rpx
 }
 
-.empty { 
-  padding: 40rpx; 
-  text-align: center; 
-  color: #999 
+.list {
+  background: #fff;
+  border-radius: 12rpx;
+  padding: 10rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03)
 }
 
-.list-item { 
-  display: flex; 
-  align-items: center; 
-  padding: 20rpx; 
-  border-bottom: 1rpx solid #f0f0f0 
+.empty {
+  padding: 40rpx;
+  text-align: center;
+  color: #999
 }
 
-.list-item .date { 
-  color: #666 
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  border-bottom: 1rpx solid #f0f0f0
 }
-
-.list-item .value { 
-  color: #333; 
-  font-weight: 600; 
-  flex: 1; 
-  text-align: right 
+
+.list-item .date {
+  color: #666
 }
 
-.btn-delete { 
-  width: 80rpx; 
-  height: 60rpx; 
-  min-width: 60rpx; 
-  min-height: 60rpx; 
-  display: inline-flex; 
-  align-items: center; 
-  justify-content: center; 
-  background: #fff0f0; 
-  color: #d9534f; 
-  border: 1rpx solid rgba(217,83,79,0.15); 
-  border-radius: 8rpx; 
-  margin-left: 30rpx 
+.list-item .value {
+  color: #333;
+  font-weight: 600;
+  flex: 1;
+  text-align: right
 }
 
-.fab { 
-  position: fixed; 
-  right: 28rpx; 
-  bottom: 160rpx; 
-  width: 110rpx; 
-  height: 110rpx; 
-  border-radius: 999px; 
-  background: linear-gradient(180deg, #ff7a00, #ff4a00); 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.2); 
-  z-index: 1200 
+.btn-delete {
+  width: 80rpx;
+  height: 60rpx;
+  min-width: 60rpx;
+  min-height: 60rpx;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff0f0;
+  color: #d9534f;
+  border: 1rpx solid rgba(217, 83, 79, 0.15);
+  border-radius: 8rpx;
+  margin-left: 30rpx
+}
+
+.fab {
+  position: fixed;
+  right: 28rpx;
+  bottom: 160rpx;
+  width: 110rpx;
+  height: 110rpx;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #ff7a00, #ff4a00);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.2);
+  z-index: 1200
 }
 
-.fab-inner { 
-  color: #fff; 
-  font-size: 56rpx; 
-  line-height: 56rpx 
+.fab-inner {
+  color: #fff;
+  font-size: 56rpx;
+  line-height: 56rpx
 }
 
-.modal { 
-  position: fixed; 
-  left: 0; 
-  right: 0; 
-  top: 0; 
-  bottom: 0; 
-  display: flex; 
-  align-items: flex-end; 
-  justify-content: center; 
-  z-index: 1300 
+.modal {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 1300
 }
 
-.modal-backdrop { 
-  position: absolute; 
-  left: 0; 
-  right: 0; 
-  top: 0; 
-  bottom: 0; 
-  background: rgba(0, 0, 0, 0.4) 
+.modal-backdrop {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4)
 }
 
-.modal-panel { 
-  position: relative; 
-  width: 100%; 
-  background: #fff; 
-  border-top-left-radius: 18rpx; 
-  border-top-right-radius: 18rpx; 
-  padding: 28rpx 24rpx 140rpx 24rpx; 
-  box-shadow: 0 -8rpx 30rpx rgba(0,0,0,0.12) 
+.modal-panel {
+  position: relative;
+  width: 100%;
+  background: #fff;
+  border-top-left-radius: 18rpx;
+  border-top-right-radius: 18rpx;
+  padding: 28rpx 24rpx 140rpx 24rpx;
+  box-shadow: 0 -8rpx 30rpx rgba(0, 0, 0, 0.12)
 }
 
-.modal-title { 
-  font-size: 56rpx; 
-  margin-block: 60rpx; 
-  color: #222; 
-  font-weight: 700; 
-  letter-spacing: 1rpx 
+.modal-title {
+  font-size: 56rpx;
+  margin-block: 60rpx;
+  color: #222;
+  font-weight: 700;
+  letter-spacing: 1rpx
 }
 
-.modal-inner { 
-  max-width: 70%; 
-  margin: 0 auto 
+.modal-inner {
+  max-width: 70%;
+  margin: 0 auto
 }
 
-.form-row { 
-  display: flex; 
-  align-items: center; 
-  justify-content: space-between; 
-  margin-bottom: 34rpx; 
-  padding: 14rpx 0; 
-  font-size: 32rpx 
+.form-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 34rpx;
+  padding: 14rpx 0;
+  font-size: 32rpx
 }
 
-.input { 
-  width: 150rpx; 
-  text-align: right; 
-  padding: 16rpx; 
-  border-radius: 14rpx; 
-  border: 1rpx solid #eee; 
-  background: #fff7f0 
+.input {
+  width: 150rpx;
+  text-align: right;
+  padding: 16rpx;
+  border-radius: 14rpx;
+  border: 1rpx solid #eee;
+  background: #fff7f0
 }
 
-.picker-display { 
-  color: #333 
-}
+.picker-display {
+  color: #333
+}
 
-.btn-primary { 
-  background: #ff6a00; 
-  color: #fff; 
-  padding: 18rpx 22rpx; 
-  border-radius: 16rpx; 
-  text-align: center; 
-  width: 50%; 
-  box-shadow: 0 10rpx 28rpx rgba(255,106,0,0.18) 
+.btn-primary {
+  background: #ff6a00;
+  color: #fff;
+  padding: 18rpx 22rpx;
+  border-radius: 16rpx;
+  text-align: center;
+  width: 50%;
+  box-shadow: 0 10rpx 28rpx rgba(255, 106, 0, 0.18)
 }
 
-.drag-handle { 
-  width: 64rpx; 
-  height: 6rpx; 
-  background: rgba(0,0,0,0.08); 
-  border-radius: 999px; 
-  margin: 10rpx auto 14rpx auto 
+.drag-handle {
+  width: 64rpx;
+  height: 6rpx;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 999px;
+  margin: 10rpx auto 14rpx auto
 }
 
-.modal-header { 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-  gap: 12rpx; 
-  margin-bottom: 6rpx 
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  margin-bottom: 6rpx
 }
 
-.label { 
-  color: #666 
+.label {
+  color: #666
 }
 
-.ruler-wrap { 
-  margin: 12rpx 0 
+.ruler-wrap {
+  margin: 12rpx 0
 }
 
-.type-buttons { 
-  display: flex; 
-  gap: 12rpx 
+.type-buttons {
+  display: flex;
+  gap: 12rpx
 }
 
-.type-btn { 
-  padding: 8rpx 18rpx; 
-  border-radius: 12rpx; 
-  border: 1rpx solid #eee; 
-  background: #fff; 
-  color: #333 
+.type-btn {
+  padding: 8rpx 18rpx;
+  border-radius: 12rpx;
+  border: 1rpx solid #eee;
+  background: #fff;
+  color: #333
 }
 
-.type-btn.active { 
-  background: #ff6a00; 
-  color: #fff; 
-  border-color: #ff6a00 
+.type-btn.active {
+  background: #ff6a00;
+  color: #fff;
+  border-color: #ff6a00
 }
 
-.unit { 
-  color: #666; 
-  font-size: 28rpx 
+.unit {
+  color: #666;
+  font-size: 28rpx
 }
 
-.fixed-footer { 
-  position: absolute; 
-  left: 0; 
-  right: 0; 
-  bottom: 40rpx; 
-  padding: 0 24rpx 
+.fixed-footer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 40rpx;
+  padding: 0 24rpx
 }
 
-.btn-full { 
-  width: 100%; 
-  padding: 18rpx; 
-  border-radius: 12rpx; 
+.btn-full {
+  width: 100%;
+  padding: 18rpx;
+  border-radius: 12rpx;
 }
 </style>

+ 4 - 3
src/pages/patient/health/details/blood-pressure.vue

@@ -86,14 +86,14 @@
     </view>
 
   </view>
-  <TabBar />
+
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount, getCurrentInstance } from 'vue'
 import { createUChart } from '@/composables/useUChart'
 import CustomNav from '@/components/custom-nav.vue'
-import TabBar from '@/components/tab-bar.vue'
+
 import ScaleRuler from '@/components/scale-ruler.vue'
 import { getWeekStart, getWeekEnd, getWeekNumber, formatDisplayDate, formatPickerDate, daysInMonth, weekDayIndex } from '@/utils/date'
 
@@ -452,6 +452,8 @@ async function confirmDeleteRecord(id: string) {
 }
 
 .chart-wrap { 
+  height: 380rpx;
+  overflow: hidden; /* 隐藏溢出内容 */
   background: #fff; 
   border-radius: 12rpx; 
   padding: 24rpx; 
@@ -468,7 +470,6 @@ async function confirmDeleteRecord(id: string) {
 
 /* 关键修复:确保canvas样式正确,参考微信小程序示例 */
 .chart-canvas {
-  width: 750rpx;
   height: 320rpx;
   background-color: #FFFFFF;
   display: block;

+ 2 - 2
src/pages/patient/health/details/bmi.vue

@@ -3,13 +3,13 @@
   <view class="content">
     <view class="placeholder">自动根据身高体重计算并展示 BMI 历史</view>
   </view>
-  <TabBar />
+
 </template>
 
 <script setup lang="ts">
 import CustomNav from '@/components/custom-nav.vue'
 
-import TabBar from '@/components/tab-bar.vue'
+
 </script>
 
 <style>

+ 4 - 3
src/pages/patient/health/details/heart-rate.vue

@@ -77,14 +77,14 @@
     </view>
 
   </view>
-  <TabBar />
+
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount, getCurrentInstance } from 'vue'
 import { createUChart } from '@/composables/useUChart'
 import CustomNav from '@/components/custom-nav.vue'
-import TabBar from '@/components/tab-bar.vue'
+
 import ScaleRuler from '@/components/scale-ruler.vue'
 import { getWeekStart, getWeekEnd, getWeekNumber, formatDisplayDate, formatPickerDate, daysInMonth, weekDayIndex } from '@/utils/date'
 
@@ -428,6 +428,8 @@ async function confirmDeleteRecord(id: string) {
 }
 
 .chart-wrap { 
+  height: 340rpx;
+  overflow: hidden; /* 隐藏溢出内容 */
   background: #fff; 
   border-radius: 12rpx; 
   padding: 24rpx; 
@@ -444,7 +446,6 @@ async function confirmDeleteRecord(id: string) {
 
 /* 关键修复:确保canvas样式正确,参考微信小程序示例 */
 .chart-canvas {
-  width: 750rpx;
   height: 280rpx;
   background-color: #FFFFFF;
   display: block;

+ 4 - 3
src/pages/patient/health/details/height.vue

@@ -78,14 +78,14 @@
     </view>
 
   </view>
-  <TabBar />
+
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount, getCurrentInstance } from 'vue'
 import { createUChart } from '@/composables/useUChart'
 import CustomNav from '@/components/custom-nav.vue'
-import TabBar from '@/components/tab-bar.vue'
+
 import ScaleRuler from '@/components/scale-ruler.vue'
 import { getWeekStart, getWeekEnd, getWeekNumber, formatDisplayDate, formatPickerDate, daysInMonth, weekDayIndex } from '@/utils/date'
 
@@ -451,6 +451,8 @@ async function confirmDeleteRecord(id: string) {
 }
 
 .chart-wrap { 
+  height: 340rpx;
+  overflow: hidden; /* 隐藏溢出内容 */
   background: #fff; 
   border-radius: 12rpx; 
   padding: 24rpx; 
@@ -467,7 +469,6 @@ async function confirmDeleteRecord(id: string) {
 
 /* 关键修复:确保canvas样式正确,参考微信小程序示例 */
 .chart-canvas {
-  width: 750rpx;
   height: 280rpx;
   background-color: #FFFFFF;
   display: block;

+ 4 - 3
src/pages/patient/health/details/weight.vue

@@ -76,14 +76,14 @@
       </view>
     </view>
   </view>
-  <TabBar />
+
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount, getCurrentInstance } from 'vue'
 import { createUChart } from '@/composables/useUChart'
 import CustomNav from '@/components/custom-nav.vue'
-import TabBar from '@/components/tab-bar.vue'
+
 import ScaleRuler from '@/components/scale-ruler.vue'
 import { getWeekStart, getWeekEnd, getWeekNumber, formatDisplayDate, formatPickerDate, daysInMonth, weekDayIndex } from '@/utils/date'
 
@@ -423,6 +423,8 @@ async function confirmDeleteRecord(id: string) {
 }
 
 .chart-wrap { 
+  height: 340rpx;
+  overflow: hidden; /* 隐藏溢出内容 */
   background: #fff; 
   border-radius: 12rpx; 
   padding: 24rpx; 
@@ -439,7 +441,6 @@ async function confirmDeleteRecord(id: string) {
 
 /* 关键修复:确保canvas样式正确,参考微信小程序示例 */
 .chart-canvas {
-  width: 750rpx;
   height: 280rpx;
   background-color: #FFFFFF;
   display: block;

+ 0 - 2
src/pages/patient/health/reminder.vue

@@ -39,7 +39,6 @@
     </view>
   </view>
   
-  <TabBar />
 </template>
 
 <script setup lang="ts">
@@ -47,7 +46,6 @@ import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { onShow, onHide } from '@dcloudio/uni-app'
 
 import CustomNav from '@/components/custom-nav.vue'
-import TabBar from '@/components/tab-bar.vue'
 
 interface Reminder {
   title: string