|
|
@@ -1,66 +1,49 @@
|
|
|
<template>
|
|
|
<view class="detail-page" @click="closeProvinceDropdown">
|
|
|
- <view class="tip"
|
|
|
- >数据更新时间：{{
|
|
|
- formatDate(
|
|
|
- new Date().setDate(new Date().getDate() - 1),
|
|
|
- "YYYY-MM-DD",
|
|
|
- ) || "--"
|
|
|
- }}
|
|
|
- <view
|
|
|
- class="filter"
|
|
|
- :style="{
|
|
|
- position: 'relative',
|
|
|
- zIndex: dropdownProvinceOpen ? 9 : 'auto',
|
|
|
- }"
|
|
|
- >
|
|
|
- <view class="selector-wrap">
|
|
|
+ <!-- 背景层 -->
|
|
|
+ <view class="header-bg"></view>
|
|
|
+
|
|
|
+ <!-- 顶部内容层 -->
|
|
|
+ <view class="header-section">
|
|
|
+ <view class="header-content">
|
|
|
+ <view class="title-group">
|
|
|
+ <text class="main-title">感冒灵颗粒</text>
|
|
|
+ <text class="sub-title">药品流向实时追踪</text>
|
|
|
+ </view>
|
|
|
+ <view class="stat-box">
|
|
|
+ <text class="stat-num">{{ totalCount }}</text>
|
|
|
+ <text class="stat-unit">家</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="header-toolbar">
|
|
|
+ <view class="update-tip">
|
|
|
+ <text class="tip-icon">🕒</text>
|
|
|
+ <text
|
|
|
+ >更新：{{
|
|
|
+ formatDate(
|
|
|
+ new Date().setDate(new Date().getDate() - 1),
|
|
|
+ "YYYY-MM-DD",
|
|
|
+ ) || "--"
|
|
|
+ }}</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="filter-wrap">
|
|
|
<view class="selector" @click.stop="toggleProvinceDropdown">
|
|
|
<text class="selector-text">{{
|
|
|
- selectedProvince ? selectedProvince : "全部省份"
|
|
|
+ selectedProvince || "全部省份"
|
|
|
}}</text>
|
|
|
<text
|
|
|
class="selector-arrow"
|
|
|
:class="{ open: dropdownProvinceOpen }"
|
|
|
></text>
|
|
|
</view>
|
|
|
- <view class="dropdown" v-show="dropdownProvinceOpen" @click.stop>
|
|
|
- <view class="dropdown-search-bar">
|
|
|
- <input
|
|
|
- class="dropdown-search-input"
|
|
|
- v-model="provinceSearchText"
|
|
|
- @input="onProvinceSearch"
|
|
|
- placeholder="搜索省份..."
|
|
|
- />
|
|
|
- </view>
|
|
|
- <scroll-view scroll-y="true" class="dropdown-scroll-view">
|
|
|
- <view
|
|
|
- class="dropdown-item"
|
|
|
- v-for="(p, i) in filteredProvinceList"
|
|
|
- :key="p || i"
|
|
|
- :style="
|
|
|
- p === selectedProvince || (!selectedProvince && i === 0)
|
|
|
- ? {
|
|
|
- backgroundColor: '#2c69ff',
|
|
|
- color: '#fff',
|
|
|
- }
|
|
|
- : {}
|
|
|
- "
|
|
|
- @click.stop="selectProvince(p)"
|
|
|
- >{{ p || "全部省份" }}</view
|
|
|
- >
|
|
|
- <view
|
|
|
- v-if="filteredProvinceList.length === 0"
|
|
|
- class="dropdown-item"
|
|
|
- style="text-align: center; color: #999"
|
|
|
- >暂无数据</view
|
|
|
- >
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
+ <!-- 列表区域 -->
|
|
|
<scroll-view
|
|
|
class="list-scroll"
|
|
|
scroll-y="true"
|
|
|
@@ -76,29 +59,36 @@
|
|
|
:key="index"
|
|
|
@click="toDetail(item)"
|
|
|
>
|
|
|
- <view class="left-info">
|
|
|
- <view class="row1-name">
|
|
|
- <view style="display: flex; align-items: center; gap: 10rpx">
|
|
|
- <text style="text-decoration: underline"
|
|
|
- >{{ index + 1 }}.{{ item.receiverName }}</text
|
|
|
- >
|
|
|
- <text
|
|
|
- class="level-tag"
|
|
|
- :class="getLevelClass(item.customerLevel)"
|
|
|
- >
|
|
|
- {{ item.customerLevel }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="right-info">
|
|
|
- <text class="alert-count">{{ item.alertCount }}次预警</text>
|
|
|
- </view></view
|
|
|
- >
|
|
|
- <view class="row2-info">
|
|
|
- <text class="province">省份：{{ item.receiverProvince }} </text>
|
|
|
+ <view class="card-header">
|
|
|
+ <view class="header-left">
|
|
|
+ <text class="index-num">{{ index + 1 }}</text>
|
|
|
+ <text class="company-name">{{ item.receiverName }}</text>
|
|
|
+ <text
|
|
|
+ class="level-tag"
|
|
|
+ :class="getLevelClass(item.customerLevel)"
|
|
|
+ >
|
|
|
+ {{ item.customerLevel }}
|
|
|
+ </text>
|
|
|
</view>
|
|
|
- <view class="row3-nature">
|
|
|
- <text class="province">责任人：{{ item.manager }}</text>
|
|
|
- <text class="province">性质：{{ item.customerNature }}</text>
|
|
|
+ <view class="header-right">
|
|
|
+ <text class="alert-count">{{ item.alertCount }}次预警</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="card-body">
|
|
|
+ <view class="info-grid">
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="label">省份</text>
|
|
|
+ <text class="value">{{ item.receiverProvince }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="label">责任人</text>
|
|
|
+ <text class="value">{{ item.manager }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="label">性质</text>
|
|
|
+ <text class="value">{{ item.customerNature }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -108,6 +98,7 @@
|
|
|
class="loading-icon"
|
|
|
src="../../../static/images/loading.png"
|
|
|
/>
|
|
|
+ <text class="loading-text">加载中...</text>
|
|
|
</view>
|
|
|
|
|
|
<view v-if="!loading && displayRows.length === 0" class="empty-data">
|
|
|
@@ -120,8 +111,50 @@
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
+ <!-- 独立的下拉菜单层 -->
|
|
|
+ <view class="dropdown-layer" v-if="dropdownProvinceOpen" @click.stop>
|
|
|
+ <view class="dropdown">
|
|
|
+ <view class="dropdown-search-bar">
|
|
|
+ <input
|
|
|
+ class="dropdown-search-input"
|
|
|
+ v-model="provinceSearchText"
|
|
|
+ @input="onProvinceSearch"
|
|
|
+ placeholder="搜索省份..."
|
|
|
+ placeholder-style="color: #999"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <scroll-view scroll-y="true" class="dropdown-scroll-view">
|
|
|
+ <view
|
|
|
+ class="dropdown-item"
|
|
|
+ v-for="(p, i) in filteredProvinceList"
|
|
|
+ :key="p || i"
|
|
|
+ :class="{
|
|
|
+ active: p === selectedProvince || (!selectedProvince && i === 0),
|
|
|
+ }"
|
|
|
+ @click.stop="selectProvince(p)"
|
|
|
+ >
|
|
|
+ {{ p || "全部省份" }}
|
|
|
+ <text
|
|
|
+ v-if="p === selectedProvince || (!selectedProvince && i === 0)"
|
|
|
+ class="check-mark"
|
|
|
+ >✓</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view v-if="filteredProvinceList.length === 0" class="dropdown-empty"
|
|
|
+ >暂无数据</view
|
|
|
+ >
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 底部按钮区 -->
|
|
|
<view class="footer-btn-area">
|
|
|
- <button class="export-btn" @click="handleExport">导出至邮箱</button>
|
|
|
+ <button class="action-btn history-btn" @click="handleHistory">
|
|
|
+ 历史记录
|
|
|
+ </button>
|
|
|
+ <button class="action-btn export-btn" @click="handleExport">
|
|
|
+ 导出至邮箱
|
|
|
+ </button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -290,6 +323,13 @@ export default {
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
+ handleHistory() {
|
|
|
+ uni.showToast({
|
|
|
+ title: "历史记录功能开发中",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -300,249 +340,365 @@ export default {
|
|
|
flex-direction: column;
|
|
|
height: calc(100vh - 116rpx - env(safe-area-inset-bottom));
|
|
|
box-sizing: border-box;
|
|
|
- background: #f3f6f9;
|
|
|
+ background: #f5f7fa;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-.filter {
|
|
|
- background: #f3f6f9;
|
|
|
- padding: 8rpx 24rpx 0;
|
|
|
+/* Header Background Layer */
|
|
|
+.header-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 320rpx; /* Fixed height for background */
|
|
|
+ background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
|
|
+ border-bottom-left-radius: 40rpx;
|
|
|
+ border-bottom-right-radius: 40rpx;
|
|
|
+ z-index: 1;
|
|
|
+ box-shadow: 0 10rpx 30rpx rgba(24, 144, 255, 0.2);
|
|
|
}
|
|
|
|
|
|
-.selector-wrap {
|
|
|
+/* Header Content Layer */
|
|
|
+.header-section {
|
|
|
+ padding: 40rpx 40rpx 80rpx;
|
|
|
position: relative;
|
|
|
+ z-index: 3; /* Above List */
|
|
|
+ color: #fff;
|
|
|
+ /* Transparent background to allow overlap effect */
|
|
|
+}
|
|
|
+
|
|
|
+.header-content {
|
|
|
display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
}
|
|
|
|
|
|
-.selector {
|
|
|
+.title-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.main-title {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-title {
|
|
|
+ font-size: 24rpx;
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-num {
|
|
|
+ font-size: 56rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ font-family: "DINAlternate-Bold", sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-unit {
|
|
|
+ font-size: 24rpx;
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
+
|
|
|
+.header-toolbar {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
position: relative;
|
|
|
+ z-index: 3;
|
|
|
+}
|
|
|
+
|
|
|
+.update-tip {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ background: rgba(255, 255, 255, 0.15);
|
|
|
+ padding: 8rpx 20rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+}
|
|
|
+
|
|
|
+.tip-icon {
|
|
|
+ margin-right: 8rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* Filter Styles */
|
|
|
+.filter-wrap {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.selector {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- color: #2c69ff;
|
|
|
- padding-right: 30rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ padding: 8rpx 20rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: 30rpx;
|
|
|
+ border: 1rpx solid rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
.selector-text {
|
|
|
- font-size: 30rpx;
|
|
|
- max-width: 240rpx;
|
|
|
+ max-width: 200rpx;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
- display: inline-block;
|
|
|
}
|
|
|
|
|
|
.selector-arrow {
|
|
|
- position: absolute;
|
|
|
- right: 0rpx;
|
|
|
- bottom: 14rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- display: inline-block;
|
|
|
- width: 15rpx;
|
|
|
- height: 15rpx;
|
|
|
- border: 5rpx solid #2c69ff;
|
|
|
- border-top: none;
|
|
|
- border-left: none;
|
|
|
- transform-origin: 50% 50%;
|
|
|
- transform: rotate(45deg);
|
|
|
- transition: transform 0.2s;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-left: 8rpx solid transparent;
|
|
|
+ border-right: 8rpx solid transparent;
|
|
|
+ border-top: 10rpx solid #fff;
|
|
|
+ transition: transform 0.3s;
|
|
|
}
|
|
|
|
|
|
.selector-arrow.open {
|
|
|
- bottom: 7rpx;
|
|
|
- transform: rotate(225deg);
|
|
|
+ transform: rotate(180deg);
|
|
|
}
|
|
|
|
|
|
-.dropdown {
|
|
|
+/* Dropdown Layer (Absolute on top of everything) */
|
|
|
+.dropdown-layer {
|
|
|
position: absolute;
|
|
|
- right: 0rpx;
|
|
|
- top: 54rpx;
|
|
|
- width: 310rpx;
|
|
|
- max-height: 380rpx;
|
|
|
+ top: 220rpx; /* Adjust based on header layout */
|
|
|
+ right: 40rpx;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+
|
|
|
+.dropdown {
|
|
|
+ width: 360rpx;
|
|
|
background: #fff;
|
|
|
- border: 1rpx solid #eef0f4;
|
|
|
border-radius: 12rpx;
|
|
|
- box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
|
|
- z-index: 93;
|
|
|
+ box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.dropdown-search-bar {
|
|
|
- padding: 10rpx;
|
|
|
- border-bottom: 1rpx solid #f0f2f5;
|
|
|
- background: #fff;
|
|
|
- z-index: 94;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
}
|
|
|
|
|
|
.dropdown-search-input {
|
|
|
- width: 100%;
|
|
|
- height: 60rpx;
|
|
|
background: #f5f7fa;
|
|
|
- border-radius: 8rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- box-sizing: border-box;
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
}
|
|
|
|
|
|
.dropdown-scroll-view {
|
|
|
- flex: 1;
|
|
|
- width: 100%;
|
|
|
- max-height: 260rpx;
|
|
|
- overflow-y: auto;
|
|
|
+ max-height: 400rpx;
|
|
|
}
|
|
|
|
|
|
.dropdown-item {
|
|
|
- padding: 16rpx 24rpx;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
font-size: 28rpx;
|
|
|
color: #333;
|
|
|
- text-wrap: wrap;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ transition: background 0.2s;
|
|
|
}
|
|
|
|
|
|
-.dropdown-item + .dropdown-item {
|
|
|
- border-top: 1rpx solid #f0f2f5;
|
|
|
+.dropdown-item:active {
|
|
|
+ background: #f5f7fa;
|
|
|
}
|
|
|
|
|
|
-.tip {
|
|
|
+.dropdown-item.active {
|
|
|
+ color: #1890ff;
|
|
|
+ font-weight: 500;
|
|
|
+ background: #e6f7ff;
|
|
|
+}
|
|
|
+
|
|
|
+.check-mark {
|
|
|
font-size: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.dropdown-empty {
|
|
|
+ padding: 40rpx;
|
|
|
+ text-align: center;
|
|
|
color: #999;
|
|
|
- padding: 24rpx;
|
|
|
- background: #f3f6f9;
|
|
|
+ font-size: 26rpx;
|
|
|
}
|
|
|
|
|
|
+/* List Section */
|
|
|
.list-scroll {
|
|
|
flex: 1;
|
|
|
height: 0;
|
|
|
- /* Important for flex expansion */
|
|
|
padding: 0 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
+ margin-top: -50rpx; /* Overlap effect */
|
|
|
+ position: relative;
|
|
|
+ z-index: 2; /* Between bg and header content */
|
|
|
}
|
|
|
|
|
|
.list-container {
|
|
|
+ padding-top: 10rpx;
|
|
|
padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
|
|
|
}
|
|
|
|
|
|
.card-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- /* Align top */
|
|
|
background: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
padding: 30rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
|
|
|
+ transition: transform 0.2s;
|
|
|
}
|
|
|
|
|
|
-.left-info {
|
|
|
- flex: 1;
|
|
|
+.card-item:active {
|
|
|
+ transform: scale(0.99);
|
|
|
}
|
|
|
|
|
|
-.row1-name {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #1890ff;
|
|
|
- margin-bottom: 16rpx;
|
|
|
+.card-header {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- gap: 20rpx;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
}
|
|
|
|
|
|
-.row2-info {
|
|
|
+.header-left {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 12rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ gap: 12rpx;
|
|
|
}
|
|
|
|
|
|
-.province {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- margin-right: 20rpx;
|
|
|
+.index-num {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ font-family: monospace;
|
|
|
+}
|
|
|
+
|
|
|
+.company-name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.4;
|
|
|
}
|
|
|
|
|
|
.level-tag {
|
|
|
- font-size: 22rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
padding: 4rpx 12rpx;
|
|
|
- border-radius: 6rpx;
|
|
|
- background: #f0f0f0;
|
|
|
- color: #666;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+.header-right {
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.tag-vip {
|
|
|
- background: #e6f7ff;
|
|
|
- color: #1890ff;
|
|
|
+ background: linear-gradient(135deg, #e6f7ff, #bae7ff);
|
|
|
+ color: #096dd9;
|
|
|
}
|
|
|
|
|
|
.tag-l2 {
|
|
|
- background: #f6ffed;
|
|
|
- color: #52c41a;
|
|
|
+ background: linear-gradient(135deg, #f6ffed, #d9f7be);
|
|
|
+ color: #389e0d;
|
|
|
}
|
|
|
|
|
|
.tag-l3 {
|
|
|
- background: #fff7e6;
|
|
|
- color: #fa8c16;
|
|
|
+ background: linear-gradient(135deg, #fff7e6, #ffe7ba);
|
|
|
+ color: #d46b08;
|
|
|
}
|
|
|
|
|
|
-.row3-nature {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- margin-bottom: 12rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20rpx;
|
|
|
+.tag-default {
|
|
|
+ background: #f5f5f5;
|
|
|
+ color: #999;
|
|
|
}
|
|
|
|
|
|
-.row4-manager {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
+.card-body {
|
|
|
+ background: #f9fbfd;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.info-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 24rpx;
|
|
|
}
|
|
|
|
|
|
-.right-info {
|
|
|
+.info-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- align-self: center;
|
|
|
- /* Center vertically relative to card */
|
|
|
+ min-width: 45%;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item .label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-right: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item .value {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.alert-count {
|
|
|
- background: #fff2f0;
|
|
|
+ font-size: 22rpx;
|
|
|
color: #ff4d4f;
|
|
|
- font-size: 24rpx;
|
|
|
- padding: 8rpx 20rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
+ background: rgba(255, 77, 79, 0.1);
|
|
|
+ padding: 6rpx 16rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
|
|
|
+/* Loading & Footer */
|
|
|
.loading-more {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- padding: 20rpx 0;
|
|
|
+ padding: 30rpx 0;
|
|
|
+}
|
|
|
+
|
|
|
+.loading-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
}
|
|
|
|
|
|
.loading-icon {
|
|
|
width: 32rpx;
|
|
|
height: 32rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
animation: spin 1s linear infinite;
|
|
|
}
|
|
|
|
|
|
.empty-data {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- padding-top: 100rpx;
|
|
|
+ padding-top: 120rpx;
|
|
|
}
|
|
|
|
|
|
.no-more {
|
|
|
text-align: center;
|
|
|
- color: #999;
|
|
|
+ color: #ccc;
|
|
|
font-size: 24rpx;
|
|
|
- padding: 20rpx 0;
|
|
|
+ padding: 30rpx 0;
|
|
|
}
|
|
|
|
|
|
@keyframes spin {
|
|
|
from {
|
|
|
transform: rotate(0deg);
|
|
|
}
|
|
|
-
|
|
|
to {
|
|
|
transform: rotate(360deg);
|
|
|
}
|
|
|
@@ -551,33 +707,46 @@ export default {
|
|
|
.footer-btn-area {
|
|
|
padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
|
|
|
background: #fff;
|
|
|
- box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
|
|
|
+ box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
|
position: fixed;
|
|
|
- z-index: 10;
|
|
|
+ z-index: 100;
|
|
|
bottom: 0;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ gap: 24rpx;
|
|
|
}
|
|
|
|
|
|
-.export-btn {
|
|
|
- background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
|
|
- color: #fff;
|
|
|
- border-radius: 44rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 500;
|
|
|
+.action-btn {
|
|
|
+ flex: 1;
|
|
|
height: 88rpx;
|
|
|
line-height: 88rpx;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
border: none;
|
|
|
- box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.35);
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
-.export-btn:active {
|
|
|
- transform: scale(0.98);
|
|
|
- box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.35);
|
|
|
+.action-btn::after {
|
|
|
+ border: none;
|
|
|
}
|
|
|
|
|
|
-.export-btn::after {
|
|
|
- border: none;
|
|
|
+.action-btn:active {
|
|
|
+ transform: scale(0.96);
|
|
|
+}
|
|
|
+
|
|
|
+.history-btn {
|
|
|
+ background: #fff;
|
|
|
+ color: #1890ff;
|
|
|
+ border: 2rpx solid #1890ff;
|
|
|
+ box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.export-btn {
|
|
|
+ background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.35);
|
|
|
}
|
|
|
</style>
|
钱新宇