|
@@ -19,14 +19,10 @@
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 趋势图 - 简化canvas设置 -->
|
|
<!-- 趋势图 - 简化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>
|
|
|
|
|
|
|
|
<view class="content">
|
|
<view class="content">
|
|
@@ -78,7 +74,8 @@
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="ruler-wrap">
|
|
<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>
|
|
|
|
|
|
|
|
<view class="fixed-footer">
|
|
<view class="fixed-footer">
|
|
@@ -88,13 +85,13 @@
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
- <TabBar />
|
|
|
|
|
|
|
+
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount, getCurrentInstance } from 'vue'
|
|
import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount, getCurrentInstance } from 'vue'
|
|
|
import CustomNav from '@/components/custom-nav.vue'
|
|
import CustomNav from '@/components/custom-nav.vue'
|
|
|
-import TabBar from '@/components/tab-bar.vue'
|
|
|
|
|
|
|
+
|
|
|
import ScaleRuler from '@/components/scale-ruler.vue'
|
|
import ScaleRuler from '@/components/scale-ruler.vue'
|
|
|
import { createUChart } from '@/composables/useUChart'
|
|
import { createUChart } from '@/composables/useUChart'
|
|
|
import { getWeekStart, getWeekEnd, getWeekNumber, formatDisplayDate, formatPickerDate, daysInMonth, weekDayIndex } from '@/utils/date'
|
|
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') }
|
|
function onAddDateChange(e: any) { const val = e?.detail?.value || e; addDate.value = val; addDateLabel.value = val.replace(/^(.{10}).*$/, '$1') }
|
|
|
|
|
|
|
|
async function confirmAdd() {
|
|
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 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 parts = addDate.value.split('-')
|
|
|
const addY = parseInt(parts[0], 10)
|
|
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) {
|
|
if (res.confirm) {
|
|
|
records.value = records.value.filter(r => r.id !== id)
|
|
records.value = records.value.filter(r => r.id !== id)
|
|
|
try { await rebuildChart() } catch (e) { console.warn('rebuildChart after delete failed', e) }
|
|
try { await rebuildChart() } catch (e) { console.warn('rebuildChart after delete failed', e) }
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- } else {
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ } else {
|
|
|
records.value = records.value.filter(r => r.id !== id)
|
|
records.value = records.value.filter(r => r.id !== id)
|
|
|
try { await rebuildChart() } catch (e) { console.warn('rebuildChart after delete failed', e) }
|
|
try { await rebuildChart() } catch (e) { console.warn('rebuildChart after delete failed', e) }
|
|
|
- }
|
|
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<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 {
|
|
.period-controls {
|
|
@@ -444,253 +441,254 @@ async function confirmDeleteRecord(id: string) {
|
|
|
border-color: #ff6a00;
|
|
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样式正确,参考微信小程序示例 */
|
|
/* 关键修复:确保canvas样式正确,参考微信小程序示例 */
|
|
|
.chart-canvas {
|
|
.chart-canvas {
|
|
|
- width: 750rpx;
|
|
|
|
|
height: 280rpx;
|
|
height: 280rpx;
|
|
|
background-color: #FFFFFF;
|
|
background-color: #FFFFFF;
|
|
|
display: block;
|
|
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>
|
|
</style>
|