fix: 样式统一优化提取。

This commit is contained in:
tianyongbao
2026-05-30 22:37:18 +08:00
parent 0e3e0d21ba
commit 1ff68c1f98
22 changed files with 1031 additions and 4715 deletions

View File

@@ -0,0 +1,126 @@
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
/**
* 健康模块列表页通用逻辑 composable
*
* @param {Function} listApi - 列表查询API函数接收 { pageSize, pageNum, ...queryParams }
* @param {Object} options - 可选配置
* @param {number} options.pageSize - 每页数量,默认 10
* @param {Function} options.onLoadCallback - onLoad 时额外执行的回调
* @param {Function} options.transformRows - 自定义数据转换函数
* @returns {Object}
*/
export function useHealthList(listApi, options = {}) {
const { pageSize = 10, onLoadCallback = null, transformRows = null } = options
const pageNum = ref(1)
const listData = ref([])
const isShow = ref(false)
const status = ref('loadmore')
/**
* 获取列表数据
* @param {Object} queryParams - 查询参数
*/
function getList(queryParams = {}) {
status.value = 'loading'
listApi({ pageSize, pageNum: pageNum.value, ...queryParams })
.then(res => {
const rows = transformRows ? transformRows(res) : (res.rows || [])
listData.value = listData.value.concat(rows)
if (listData.value.length < res.total) {
status.value = 'loadmore'
} else {
status.value = 'nomore'
}
})
.catch(() => {
status.value = 'nomore'
})
}
/**
* 加载更多
* @param {Object} queryParams - 查询参数
*/
function loadmore(queryParams = {}) {
pageNum.value += 1
if (status.value === 'loadmore') {
getList(queryParams)
}
}
/**
* 重置列表并重新加载
* @param {Object} queryParams - 查询参数
*/
function resetList(queryParams = {}) {
pageNum.value = 1
listData.value = []
getList(queryParams)
}
/**
* 初始化列表页生命周期
* @param {Function} getQueryParams - 返回当前查询参数的函数
*/
function initLifecycle(getQueryParams) {
onLoad(() => {
if (onLoadCallback) onLoadCallback()
getList(getQueryParams ? getQueryParams() : {})
})
onShow(() => {
if (isShow.value) {
resetList(getQueryParams ? getQueryParams() : {})
isShow.value = false
}
})
}
/**
* 通用删除处理
* @param {Object} item - 要删除的项
* @param {Function} deleteApi - 删除API函数
* @param {Function} getQueryParams - 返回当前查询参数的函数
*/
function handleDeleteAction(item, deleteApi, getQueryParams) {
uni.showModal({
title: '确认删除',
content: '确定要删除这条记录吗?',
confirmText: '删除',
cancelText: '取消',
confirmColor: '#f5576c',
cancelColor: '#909399',
success: function (res) {
if (res.confirm) {
deleteApi(item.id).then(() => {
uni.showToast({ title: '删除成功', icon: 'success' })
resetList(getQueryParams ? getQueryParams() : {})
})
}
}
})
}
/**
* 标记进入编辑/新增页面,返回时刷新
*/
function markForRefresh() {
isShow.value = true
}
return {
pageNum,
listData,
isShow,
status,
getList,
loadmore,
resetList,
initLifecycle,
handleDeleteAction,
markForRefresh
}
}

View File

@@ -413,185 +413,17 @@ function getList() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.btnAdd {
width: 146rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 8rpx;
display:float;
text-align: center;
}
@import '@/styles/health-common.scss';
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 100;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
gap: 24rpx;
.search-input {
background: rgba(102, 126, 234, 0.08);
color: #333333;
flex: 1;
margin-right: 0;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
display: flex;
align-items: center;
/* H5端placeholder样式 */
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
/* 输入文字颜色 */
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: #667eea;
}
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
// 筛选面板位置补充(单行模式)
.search-view .filter-panel {
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
.filter-panel-content {
background-color: #ffff;
padding: 0 30rpx 30rpx;
.filter-title {
color: #000000;
font-size: 30rpx;
font-weight: 500;
padding: 30rpx 0;
}
.state-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.state-item {
width: 210rpx;
height: 72rpx;
border: 1rpx solid rgba(0, 0, 0, 0.25);
border-radius: 72rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx 20rpx 0;
font-size: 28rpx;
color: #000000;
}
.active {
background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1);
}
}
}
.btn-box {
display: flex;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
// 活动特有 - 卡片头部布局
.item-header {
gap: 12rpx;
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.place-info {
flex: 1;
min-width: 0;
@@ -642,119 +474,22 @@ page {
letter-spacing: 0.5rpx;
}
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
&.cost-value {
// 活动特有 - 费用色
.info-value.cost-value {
color: #fa8c16;
font-weight: 600;
}
}
}
&:not(.info-item-full) .info-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
flex-wrap: wrap;
.btn-summary,
.btn-edit,
.btn-copy,
.btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.btn-summary {
// 活动特有 - 汇总按钮
.operate .btn-summary {
background: rgba(19, 194, 194, 0.1);
color: #13c2c2;
border: 1rpx solid rgba(19, 194, 194, 0.3);
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-copy {
background: rgba(250, 140, 22, 0.1);
color: #fa8c16;
border: 1rpx solid rgba(250, 140, 22, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
}
}
// ==================== 费用汇总面板 ====================
.summary-mask {
position: fixed;
left: 0;

View File

@@ -249,63 +249,10 @@ function handleDelete(item) {
</script>
<style lang="scss" scoped>
page { height: 100%; overflow: auto; }
.search-view {
padding: 12rpx 32rpx; background-color: #ffffff; display: flex; justify-content: space-between; align-items: center;
position: relative; z-index: 100; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); gap: 10rpx;
.search-input { flex: 1; }
.filter-btn, .add-btn {
display: flex; align-items: center; gap: 6rpx; padding: 12rpx 24rpx;
background: rgba(102,126,234,0.08); border-radius: 24rpx; border: 2rpx solid rgba(102,126,234,0.3); flex-shrink: 0;
text { color: #667eea; font-size: 28rpx; font-weight: 600; }
}
.filter-panel {
width: 100%; position: absolute; left: 0; top: 96rpx; background-color: rgba(0,0,0,0.5); z-index: 999;
.filter-panel-content {
background-color: #ffffff; padding: 0 30rpx 30rpx;
.filter-title { color: #2c3e50; font-size: 32rpx; font-weight: 600; padding: 32rpx 0 24rpx 20rpx; }
.state-list {
display: flex; flex-wrap: wrap; gap: 16rpx;
.state-item { padding: 0 32rpx; height: 68rpx; border: 2rpx solid #e8edf3; border-radius: 34rpx; text-align: center; line-height: 68rpx; font-size: 28rpx; color: #666; background: #fff; }
.active { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); border: 2rpx solid transparent; color: #fff; font-weight: 600; }
}
}
.btn-box {
display: flex; gap: 20rpx; padding: 24rpx 30rpx; background-color: #fff;
.btn-reset, .btn-confirm { display: flex; align-items: center; justify-content: center; gap: 8rpx; height: 88rpx; border-radius: 12rpx; font-size: 30rpx; font-weight: 600; flex: 1; text { line-height: 1; } }
.btn-reset { background: #f5f7fa; border: 2rpx solid #dcdfe6; text { color: #606266; } }
.btn-confirm { background: #667eea; border: none; text { color: #fff; } }
}
}
@import '@/styles/health-common.scss';
// 筛选面板位置补充(单行模式)
.search-view .filter-panel {
top: 96rpx;
}
.list-item {
margin: 10rpx 24rpx; background-color: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
.item-header {
display: flex; justify-content: space-between; align-items: center; padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section { display: flex; align-items: center; flex: 1; min-width: 0; }
.card-icon { width: 40rpx; height: 40rpx; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12rpx; flex-shrink: 0; }
.card-info { flex: 1; min-width: 0; .card-name { color: #fff; font-size: 30rpx; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
}
.card-body { padding: 24rpx; background: #fafbfc; border: 2rpx solid #f0f2f5; margin: 15rpx 16rpx 2rpx; border-radius: 12rpx; }
.info-row {
display: flex; flex-wrap: wrap; margin: 0 -12rpx;
.info-item {
width: 50%; padding: 0 12rpx; box-sizing: border-box; display: flex; flex-direction: column; margin-bottom: 20rpx;
&.info-item-full { width: 100%; }
.info-label { font-size: 24rpx; color: #667eea; font-weight: 500; background: rgba(102,126,234,0.08); padding: 6rpx 12rpx; border-radius: 8rpx; align-self: flex-start; margin-bottom: 8rpx; }
.info-value { font-size: 26rpx; color: #333; font-weight: 500; line-height: 1.5; word-break: break-all; }
}
}
.operate {
display: flex; justify-content: flex-end; padding: 16rpx 24rpx 24rpx; gap: 16rpx;
.btn-edit, .btn-delete { display: flex; align-items: center; justify-content: center; gap: 6rpx; padding: 0 24rpx; height: 64rpx; border-radius: 12rpx; font-size: 26rpx; font-weight: 500; }
.btn-edit { background: rgba(102,126,234,0.1); color: #667eea; border: 1rpx solid rgba(102,126,234,0.3); }
.btn-delete { background: rgba(245,87,108,0.1); color: #f5576c; border: 1rpx solid rgba(245,87,108,0.3); }
}
}
.status-tag { font-size: 22rpx; padding: 4rpx 16rpx; border-radius: 8rpx; font-weight: 600; }
.status-1 { background: rgba(82,196,26,0.2); color: #52c41a; }
.status-2 { background: rgba(250,140,22,0.2); color: #fa8c16; }
.status-3 { background: rgba(245,87,108,0.2); color: #f5576c; }
</style>

View File

@@ -243,11 +243,9 @@ function handleUpdateCost() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
@import '@/styles/health-common.scss';
// 工具栏
.toolbar {
padding: 16rpx 24rpx;
background-color: #ffffff;
@@ -308,157 +306,9 @@ page {
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 12rpx;
}
.card-name {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 0;
}
.card-code {
color: rgba(255, 255, 255, 0.9);
font-size: 24rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
}
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
line-height: 1.5;
word-break: break-all;
&.cost {
// 费用金额特殊样式
.info-value.cost {
color: #f5576c;
font-weight: 700;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
flex-wrap: wrap;
}
.btn-edit,
.btn-copy,
.btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-copy {
background: rgba(250, 140, 22, 0.1);
color: #fa8c16;
border: 1rpx solid rgba(250, 140, 22, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
</style>

View File

@@ -470,400 +470,10 @@ function settingCancel() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.search-container {
background-color: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
position: relative;
z-index: 100;
.search-row {
padding: 12rpx 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10rpx;
&:first-child {
padding-bottom: 8rpx;
}
&:last-child {
padding-top: 8rpx;
}
.search-input-wrapper {
flex: 1;
display: flex;
align-items: center;
position: relative;
.search-icon {
position: absolute;
right: 20rpx;
z-index: 10;
cursor: pointer;
}
}
.search-input {
background: rgba(102, 126, 234, 0.08);
color: #333333;
width: 100%;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
display: flex;
align-items: center;
/* H5端placeholder样式 */
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
/* 输入文字颜色 */
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
.filter-btn,
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: #667eea;
}
}
}
}
@import '@/styles/health-common.scss';
// 筛选面板位置补充(双行模式)
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 180rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
.select-header {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
.selcet-content {
display: flex;
flex-direction: column;
gap: 16rpx;
}
}
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.btn-reset,
.btn-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
text {
line-height: 1;
}
}
.btn-reset {
flex: 1;
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text {
color: #606266;
}
}
.btn-confirm {
flex: 1;
background: #667eea;
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
border: none;
text {
color: #ffffff;
}
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 12rpx;
.card-name {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: 0.5rpx;
}
.card-code {
color: rgba(255, 255, 255, 0.9);
font-size: 24rpx;
font-weight: 500;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
letter-spacing: 0.3rpx;
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
}
&:not(.info-item-full) .info-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
flex-wrap: wrap;
.btn-detail,
.btn-edit,
.btn-copy,
.btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.btn-detail {
background: rgba(19, 194, 194, 0.1);
color: #13c2c2;
border: 1rpx solid rgba(19, 194, 194, 0.3);
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-copy {
background: rgba(250, 140, 22, 0.1);
color: #fa8c16;
border: 1rpx solid rgba(250, 140, 22, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
}
}
</style>

View File

@@ -401,179 +401,19 @@ function settingCancel() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
@import '@/styles/health-common.scss';
// 筛选面板位置补充(单行模式)
.search-view .filter-panel {
top: 96rpx;
}
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 100;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
gap: 10rpx;
.search-input-wrapper {
flex: 1;
display: flex;
align-items: center;
position: relative;
.search-icon {
position: absolute;
right: 20rpx;
z-index: 10;
cursor: pointer;
}
}
.search-input {
background: rgba(102, 126, 234, 0.08);
color: #333333;
width: 100%;
margin-right: 0;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
display: flex;
align-items: center;
/* H5端placeholder样式 */
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
/* 输入文字颜色 */
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
.filter-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: #667eea;
}
}
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
margin-left: 10rpx;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: #667eea;
}
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
// 筛选面板额外输入框
.filter-panel-content {
.state-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16rpx;
margin-bottom: 24rpx;
.state-item {
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 68rpx;
font-size: 28rpx;
color: #666666;
transition: all 0.3s ease;
background: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
@@ -582,11 +422,7 @@ page {
}
.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2rpx solid transparent;
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
font-weight: 600;
}
}
@@ -600,223 +436,5 @@ page {
border: 2rpx solid #e8edf3;
}
}
}
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.btn-reset,
.btn-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
text {
line-height: 1;
}
}
.btn-reset {
flex: 1;
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text {
color: #606266;
}
}
.btn-confirm {
flex: 1;
background: #667eea;
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
border: none;
text {
color: #ffffff;
}
}
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 12rpx;
.card-name {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
letter-spacing: 0.5rpx;
}
.card-code {
color: rgba(255, 255, 255, 0.9);
font-size: 28rpx;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
letter-spacing: 0.3rpx;
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
}
&:not(.info-item-full) .info-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
.btn-edit,
.btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
}
}
</style>

View File

@@ -155,41 +155,5 @@ function handleDelete(item) {
</script>
<style lang="scss" scoped>
page { height: 100%; overflow: auto; }
.search-view {
padding: 12rpx 32rpx; background-color: #ffffff; display: flex; justify-content: space-between; align-items: center;
position: relative; z-index: 100; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); gap: 10rpx;
.search-input { flex: 1; }
.add-btn {
display: flex; align-items: center; gap: 6rpx; padding: 12rpx 24rpx;
background: rgba(102,126,234,0.08); border-radius: 24rpx; border: 2rpx solid rgba(102,126,234,0.3); flex-shrink: 0;
text { color: #667eea; font-size: 28rpx; font-weight: 600; }
}
}
.list-item {
margin: 10rpx 24rpx; background-color: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
.item-header {
display: flex; justify-content: space-between; align-items: center; padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section { display: flex; align-items: center; flex: 1; min-width: 0; }
.card-icon { width: 40rpx; height: 40rpx; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12rpx; flex-shrink: 0; }
.card-info { flex: 1; min-width: 0; .card-name { color: #fff; font-size: 30rpx; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
}
.card-body { padding: 24rpx; background: #fafbfc; border: 2rpx solid #f0f2f5; margin: 15rpx 16rpx 2rpx; border-radius: 12rpx; }
.info-row {
display: flex; flex-wrap: wrap; margin: 0 -12rpx;
.info-item {
width: 50%; padding: 0 12rpx; box-sizing: border-box; display: flex; flex-direction: column; margin-bottom: 20rpx;
&.info-item-full { width: 100%; }
.info-label { font-size: 24rpx; color: #667eea; font-weight: 500; background: rgba(102,126,234,0.08); padding: 6rpx 12rpx; border-radius: 8rpx; align-self: flex-start; margin-bottom: 8rpx; }
.info-value { font-size: 26rpx; color: #333; font-weight: 500; line-height: 1.5; word-break: break-all; }
}
}
.operate {
display: flex; justify-content: flex-end; padding: 16rpx 24rpx 24rpx; gap: 16rpx;
.btn-edit, .btn-delete { display: flex; align-items: center; justify-content: center; gap: 6rpx; padding: 0 24rpx; height: 64rpx; border-radius: 12rpx; font-size: 26rpx; font-weight: 500; }
.btn-edit { background: rgba(102,126,234,0.1); color: #667eea; border: 1rpx solid rgba(102,126,234,0.3); }
.btn-delete { background: rgba(245,87,108,0.1); color: #f5576c; border: 1rpx solid rgba(245,87,108,0.3); }
}
}
@import '@/styles/health-common.scss';
</style>

View File

@@ -25,7 +25,7 @@
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
<text>筛选</text>
</view>
<view class="add-btn" @click="handleAdd()">
<view class="add-btn" v-show="auth.hasPermi('health:heightWeightRecord:add')" @click="handleAdd()">
<uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
<text>新增</text>
</view>
@@ -33,7 +33,7 @@
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="select-header">测量日期</view>
<view class="filter-title">测量日期</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
@@ -62,8 +62,14 @@
</view>
</view>
<view class="btn-box">
<u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
<u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
<view class="btn-reset" @click="resetQuery()">
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
<text>重置</text>
</view>
<view class="btn-confirm" @click="searchSubmit()">
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
<text>确定</text>
</view>
</view>
<u-datetime-picker
:closeOnClickOverlay="true"
@@ -139,6 +145,7 @@ import {
} from '@/api/health/heightWeightRecord'
import { listPerson } from '@/api/health/person'
import { timeHandler } from '@/utils/common.ts'
import auth from "@/plugins/auth"
import {onLoad,onShow} from "@dcloudio/uni-app";
import dayjs from 'dayjs'
// 计算属性与监听属性是在vue中而非uniap中 需要注意!!!
@@ -308,396 +315,10 @@ function settingCancel() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.btnAdd {
width: 146rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 8rpx;
display:float;
text-align: center;
}
@import '@/styles/health-common.scss';
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 100;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
gap: 10rpx;
.search-input-wrapper {
flex: 1;
display: flex;
align-items: center;
position: relative;
.search-icon {
position: absolute;
right: 20rpx;
z-index: 10;
cursor: pointer;
}
}
.search-input {
background: rgba(102, 126, 234, 0.08);
color: #333333;
width: 100%;
margin-right: 0;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
display: flex;
align-items: center;
/* H5端placeholder样式 */
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
/* 输入文字颜色 */
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
.filter-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: #667eea;
}
}
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
margin-left: 10rpx;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: #667eea;
}
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
// 筛选面板位置补充(单行模式)
.search-view .filter-panel {
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.select-header {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
.state-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.state-item {
width: 210rpx;
height: 72rpx;
border: 1rpx solid rgba(0, 0, 0, 0.25);
border-radius: 72rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx 20rpx 0;
font-size: 28rpx;
color: #000000;
}
.active {
background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1);
}
}
}
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.u-button {
flex: 1;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
}
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
margin-right: 16rpx;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 12rpx;
.card-name {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
letter-spacing: 0.5rpx;
}
.card-time {
color: rgba(255, 255, 255, 0.9);
font-size: 26rpx;
font-weight: 500;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
letter-spacing: 0.3rpx;
}
}
.stats-section {
display: flex;
align-items: center;
gap: 16rpx;
flex-shrink: 0;
.stats-item {
color: #fa8c16;
font-size: 28rpx;
font-weight: 700;
line-height: 1;
white-space: nowrap;
.stats-label {
color: rgba(255, 255, 255, 0.85);
font-size: 20rpx;
font-weight: 400;
margin-left: 4rpx;
}
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
}
&:not(.info-item-full) .info-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
.btn-edit,
.btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
}
}
</style>

View File

@@ -483,168 +483,24 @@ function settingCancel() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.search-container {
background-color: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
position: relative;
z-index: 100;
.search-row {
padding: 12rpx 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10rpx;
&:first-child {
padding-bottom: 8rpx;
}
&:last-child {
padding-top: 8rpx;
}
.search-input-wrapper {
flex: 1;
display: flex;
align-items: center;
position: relative;
.search-icon {
position: absolute;
right: 20rpx;
z-index: 10;
cursor: pointer;
}
}
.search-input {
background: rgba(102, 126, 234, 0.08);
color: #333333;
width: 100%;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
display: flex;
align-items: center;
/* H5端placeholder样式 */
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
/* 输入文字颜色 */
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
.filter-btn,
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: #667eea;
}
}
}
}
@import '@/styles/health-common.scss';
// 筛选面板位置补充(双行模式)
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 180rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
}
// 筛选面板额外输入框
.filter-panel-content {
.medicine-input,
.health-record-input {
margin-bottom: 24rpx;
}
.state-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16rpx;
margin-bottom: 24rpx;
.state-item {
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 68rpx;
font-size: 28rpx;
color: #666666;
transition: all 0.3s ease;
background: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
@@ -653,11 +509,7 @@ page {
}
.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2rpx solid transparent;
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
font-weight: 600;
}
}
@@ -671,121 +523,10 @@ page {
border: 2rpx solid #e8edf3;
}
}
}
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.btn-reset,
.btn-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
text {
line-height: 1;
}
}
.btn-reset {
flex: 1;
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text {
color: #606266;
}
}
.btn-confirm {
flex: 1;
background: #667eea;
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
border: none;
text {
color: #ffffff;
}
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 12rpx;
.card-name {
color: #ffffff;
font-size: 26rpx;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
letter-spacing: 0.5rpx;
}
}
.dosage-section {
// 用药记录特有 - 剂量展示
.item-header .dosage-section {
display: flex;
align-items: center;
flex-shrink: 0;
@@ -801,104 +542,5 @@ page {
border-radius: 8rpx;
letter-spacing: 0.3rpx;
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
}
&:not(.info-item-full) .info-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
.btn-edit,
.btn-copy,
.btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-copy {
background: rgba(250, 140, 22, 0.1);
color: #fa8c16;
border: 1rpx solid rgba(250, 140, 22, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
}
}
</style>

View File

@@ -331,229 +331,26 @@ function handleDelete(item) {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 100;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
gap: 10rpx;
@import '@/styles/health-common.scss';
.search-input {
flex: 1;
}
.filter-btn, .add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
flex-shrink: 0;
text { color: #667eea; font-size: 28rpx; font-weight: 600; }
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
// 筛选面板位置补充(单行模式)
.search-view .filter-panel {
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
}
.state-list {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
.state-item {
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 68rpx;
font-size: 28rpx;
color: #666666;
background: #ffffff;
}
.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2rpx solid transparent;
color: #ffffff;
font-weight: 600;
}
}
}
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
.btn-reset, .btn-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
flex: 1;
text { line-height: 1; }
}
.btn-reset {
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text { color: #606266; }
}
.btn-confirm {
background: #667eea;
border: none;
text { color: #ffffff; }
}
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
.card-name {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
&.info-item-full { width: 100%; }
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
line-height: 1.5;
word-break: break-all;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
flex-wrap: wrap;
.btn-edit, .btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
}
}
// 用药计划特有状态色
.status-tag {
font-size: 22rpx;
padding: 4rpx 16rpx;
border-radius: 8rpx;
font-weight: 600;
}
.status-1 {
&.status-active, &.status-1 {
background: rgba(82, 196, 26, 0.2);
color: #52c41a;
}
.status-2 {
}
&.status-ended, &.status-2 {
background: rgba(144, 147, 153, 0.2);
color: #909399;
}
.status-3 {
}
&.status-paused, &.status-3 {
background: rgba(250, 140, 22, 0.2);
color: #fa8c16;
}
}
</style>

View File

@@ -299,65 +299,31 @@ function handleDelete(item) {
</script>
<style lang="scss" scoped>
page { height: 100%; overflow: auto; }
.search-view {
padding: 12rpx 32rpx; background-color: #ffffff; display: flex; justify-content: space-between; align-items: center;
position: relative; z-index: 100; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); gap: 10rpx;
.search-input { flex: 1; }
.filter-btn {
display: flex; align-items: center; gap: 6rpx; padding: 12rpx 24rpx;
background: rgba(102,126,234,0.08); border-radius: 24rpx; border: 2rpx solid rgba(102,126,234,0.3); flex-shrink: 0;
text { color: #667eea; font-size: 28rpx; font-weight: 600; }
}
.filter-panel {
width: 100%; position: absolute; left: 0; top: 96rpx; background-color: rgba(0,0,0,0.5); z-index: 999;
.filter-panel-content {
background-color: #ffffff; padding: 0 30rpx 30rpx;
.filter-title { color: #2c3e50; font-size: 32rpx; font-weight: 600; padding: 32rpx 0 24rpx 20rpx; }
.state-list {
display: flex; flex-wrap: wrap; gap: 16rpx;
.state-item { padding: 0 32rpx; height: 68rpx; border: 2rpx solid #e8edf3; border-radius: 34rpx; text-align: center; line-height: 68rpx; font-size: 28rpx; color: #666; background: #fff; }
.active { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); border: 2rpx solid transparent; color: #fff; font-weight: 600; }
}
}
.btn-box {
display: flex; gap: 20rpx; padding: 24rpx 30rpx; background-color: #fff;
.btn-reset, .btn-confirm { display: flex; align-items: center; justify-content: center; gap: 8rpx; height: 88rpx; border-radius: 12rpx; font-size: 30rpx; font-weight: 600; flex: 1; text { line-height: 1; } }
.btn-reset { background: #f5f7fa; border: 2rpx solid #dcdfe6; text { color: #606266; } }
.btn-confirm { background: #667eea; border: none; text { color: #fff; } }
@import '@/styles/health-common.scss';
// 筛选面板位置补充(单行模式)
.search-view .filter-panel {
top: 96rpx;
}
// 服药任务特有按钮
.operate {
.btn-confirm-med {
background: rgba(82, 196, 26, 0.1);
color: #52c41a;
border: 1rpx solid rgba(82, 196, 26, 0.3);
}
.btn-skip {
background: rgba(250, 140, 22, 0.1);
color: #fa8c16;
border: 1rpx solid rgba(250, 140, 22, 0.3);
}
}
.list-item {
margin: 10rpx 24rpx; background-color: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
.item-header {
display: flex; justify-content: space-between; align-items: center; padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section { display: flex; align-items: center; flex: 1; min-width: 0; }
.card-icon { width: 40rpx; height: 40rpx; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12rpx; flex-shrink: 0; }
.card-info { flex: 1; min-width: 0; .card-name { color: #fff; font-size: 30rpx; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
}
.card-body { padding: 24rpx; background: #fafbfc; border: 2rpx solid #f0f2f5; margin: 15rpx 16rpx 2rpx; border-radius: 12rpx; }
.info-row {
display: flex; flex-wrap: wrap; margin: 0 -12rpx;
.info-item {
width: 50%; padding: 0 12rpx; box-sizing: border-box; display: flex; flex-direction: column; margin-bottom: 20rpx;
&.info-item-full { width: 100%; }
.info-label { font-size: 24rpx; color: #667eea; font-weight: 500; background: rgba(102,126,234,0.08); padding: 6rpx 12rpx; border-radius: 8rpx; align-self: flex-start; margin-bottom: 8rpx; }
.info-value { font-size: 26rpx; color: #333; font-weight: 500; line-height: 1.5; word-break: break-all; }
}
}
.operate {
display: flex; justify-content: flex-end; padding: 16rpx 24rpx 24rpx; gap: 16rpx; flex-wrap: wrap;
.btn-confirm-med, .btn-skip, .btn-delete { display: flex; align-items: center; justify-content: center; gap: 6rpx; padding: 0 24rpx; height: 64rpx; border-radius: 12rpx; font-size: 26rpx; font-weight: 500; }
.btn-confirm-med { background: rgba(82,196,26,0.1); color: #52c41a; border: 1rpx solid rgba(82,196,26,0.3); }
.btn-skip { background: rgba(250,140,22,0.1); color: #fa8c16; border: 1rpx solid rgba(250,140,22,0.3); }
.btn-delete { background: rgba(245,87,108,0.1); color: #f5576c; border: 1rpx solid rgba(245,87,108,0.3); }
}
}
.status-tag { font-size: 22rpx; padding: 4rpx 16rpx; border-radius: 8rpx; font-weight: 600; }
.status-0 { background: rgba(102,126,234,0.2); color: #667eea; }
.status-1 { background: rgba(82,196,26,0.2); color: #52c41a; }
.status-2 { background: rgba(250,140,22,0.2); color: #fa8c16; }
.status-3 { background: rgba(245,87,108,0.2); color: #f5576c; }
// 服药任务特有状态色
.status-0 { background: rgba(102, 126, 234, 0.2); color: #667eea; }
.status-1 { background: rgba(82, 196, 26, 0.2); color: #52c41a; }
.status-2 { background: rgba(250, 140, 22, 0.2); color: #fa8c16; }
.status-3 { background: rgba(245, 87, 108, 0.2); color: #f5576c; }
</style>

View File

@@ -362,377 +362,10 @@ function settingCancel() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 100;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
gap: 10rpx;
@import '@/styles/health-common.scss';
.search-input {
background: rgba(102, 126, 234, 0.08);
color: #333333;
flex: 1;
margin-right: 0;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
/* H5端placeholder样式 */
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
/* 输入文字颜色 */
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
.filter-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
}
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
margin-left: 10rpx;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
// 筛选面板位置补充(单行模式)
.search-view .filter-panel {
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
.state-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16rpx;
.state-item {
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 68rpx;
font-size: 28rpx;
color: #666666;
transition: all 0.3s ease;
background: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.95);
}
}
.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2rpx solid transparent;
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
font-weight: 600;
}
}
}
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.btn-reset,
.btn-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
text {
line-height: 1;
}
}
.btn-reset {
flex: 1;
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text {
color: #606266;
}
}
.btn-confirm {
flex: 1;
background: #667eea;
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
border: none;
text {
color: #ffffff;
}
}
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
margin-right: 16rpx;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
.card-name {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.5rpx;
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
}
&:not(.info-item-full) .info-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
.btn-edit,
.btn-copy,
.btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-copy {
background: rgba(250, 140, 22, 0.1);
color: #fa8c16;
border: 1rpx solid rgba(250, 140, 22, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
}
}
</style>

View File

@@ -201,158 +201,5 @@ function settingCancel() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 100;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
.search-input {
background: rgba(102, 126, 234, 0.08);
color: #333333;
flex: 1;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
/* H5端placeholder样式 */
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
/* 输入文字颜色 */
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
margin-right: 16rpx;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
.card-name {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.5rpx;
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
@import '@/styles/health-common.scss';
</style>

View File

@@ -381,372 +381,10 @@ function settingCancel() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 100;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
gap: 10rpx;
@import '@/styles/health-common.scss';
.search-input {
background: rgba(102, 126, 234, 0.08);
color: #333333;
flex: 1;
margin-right: 0;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
/* H5端placeholder样式 */
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
/* 输入文字颜色 */
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
.filter-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
}
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
margin-left: 10rpx;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
// 筛选面板位置补充(单行模式)
.search-view .filter-panel {
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
.state-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16rpx;
.state-item {
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 68rpx;
font-size: 28rpx;
color: #666666;
transition: all 0.3s ease;
background: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:active {
transform: scale(0.95);
}
}
.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2rpx solid transparent;
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
font-weight: 600;
}
}
}
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.btn-reset,
.btn-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
text {
line-height: 1;
}
}
.btn-reset {
flex: 1;
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text {
color: #606266;
}
}
.btn-confirm {
flex: 1;
background: #667eea;
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
border: none;
text {
color: #ffffff;
}
}
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
margin-right: 16rpx;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
.card-name {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.5rpx;
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
}
&:not(.info-item-full) .info-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
.btn-edit,
.btn-copy,
.btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-copy {
background: rgba(250, 140, 22, 0.1);
color: #fa8c16;
border: 1rpx solid rgba(250, 140, 22, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
}
}
</style>

View File

@@ -312,258 +312,15 @@ function settingCancel() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 100;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
gap: 10rpx;
@import '@/styles/health-common.scss';
.search-input-wrapper {
flex: 1;
display: flex;
align-items: center;
position: relative;
.search-icon {
position: absolute;
right: 20rpx;
z-index: 10;
cursor: pointer;
}
}
.search-input {
background: rgba(102, 126, 234, 0.08);
color: #333333;
width: 100%;
margin-right: 0;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
/* H5端placeholder样式 */
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
/* 输入文字颜色 */
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
.filter-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
}
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
margin-left: 10rpx;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
// 筛选面板位置补充(单行模式)
.search-view .filter-panel {
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
}
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.btn-reset,
.btn-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
text {
line-height: 1;
}
}
.btn-reset {
flex: 1;
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text {
color: #606266;
}
}
.btn-confirm {
flex: 1;
background: #667eea;
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
border: none;
text {
color: #ffffff;
}
}
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
margin-right: 16rpx;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
.card-name {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.5rpx;
}
}
.balance-section {
// 奶粉记录特有 - 余量展示
.item-header .balance-section {
display: flex;
align-items: center;
flex-shrink: 0;
@@ -583,98 +340,5 @@ page {
margin-left: 4rpx;
}
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
}
&:not(.info-item-full) .info-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
.btn-edit,
.btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
}
}
</style>

View File

@@ -199,249 +199,5 @@ function getList() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 100;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
gap: 24rpx;
.search-input {
background: rgba(102, 126, 234, 0.08);
color: #333333;
flex: 1;
margin-right: 0;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
display: flex;
align-items: center;
/* H5端placeholder样式 */
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
/* 输入文字颜色 */
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: #667eea;
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 12rpx;
.card-name {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
letter-spacing: 0.5rpx;
}
.card-code {
color: rgba(255, 255, 255, 0.9);
font-size: 28rpx;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
letter-spacing: 0.3rpx;
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
}
&:not(.info-item-full) .info-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
.btn-edit,
.btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
}
}
@import '@/styles/health-common.scss';
</style>

View File

@@ -381,161 +381,15 @@ function settingCancel() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
@import '@/styles/health-common.scss';
// 筛选面板位置补充(单行模式)
.search-view .filter-panel {
top: 96rpx;
}
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 100;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
gap: 10rpx;
.search-input-wrapper {
flex: 1;
display: flex;
align-items: center;
position: relative;
.search-icon {
position: absolute;
right: 20rpx;
z-index: 10;
cursor: pointer;
}
}
.search-input {
background: rgba(102, 126, 234, 0.08);
color: #333333;
width: 100%;
margin-right: 0;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
display: flex;
align-items: center;
/* H5端placeholder样式 */
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
/* 输入文字颜色 */
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
.filter-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: #667eea;
}
}
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
margin-left: 10rpx;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: #667eea;
}
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
// 筛选面板额外输入框
.filter-panel-content {
.health-record-input {
margin-bottom: 24rpx;
}
@@ -550,230 +404,5 @@ page {
border: 2rpx solid #e8edf3;
}
}
}
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.btn-reset,
.btn-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
text {
line-height: 1;
}
}
.btn-reset {
flex: 1;
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text {
color: #606266;
}
}
.btn-confirm {
flex: 1;
background: #667eea;
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
border: none;
text {
color: #ffffff;
}
}
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 12rpx;
.card-name {
color: #ffffff;
font-size: 28rpx;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
letter-spacing: 0.5rpx;
}
.card-code {
color: rgba(255, 255, 255, 0.9);
font-size: 22rpx;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
letter-spacing: 0.3rpx;
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
}
&:not(.info-item-full) .info-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
.btn-edit,
.btn-copy,
.btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-copy {
background: rgba(250, 140, 22, 0.1);
color: #fa8c16;
border: 1rpx solid rgba(250, 140, 22, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
}
}
</style>

View File

@@ -415,399 +415,10 @@ function settingCancel() {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.search-container {
background-color: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
position: relative;
z-index: 100;
.search-row {
padding: 12rpx 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10rpx;
&:first-child {
padding-bottom: 8rpx;
}
&:last-child {
padding-top: 8rpx;
}
.search-input-wrapper {
flex: 1;
display: flex;
align-items: center;
position: relative;
.search-icon {
position: absolute;
right: 20rpx;
z-index: 10;
cursor: pointer;
}
}
.search-input {
background: rgba(102, 126, 234, 0.08);
color: #333333;
width: 100%;
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
height: 66rpx !important;
display: flex;
align-items: center;
/* H5端placeholder样式 */
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
/* 输入文字颜色 */
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
.filter-btn,
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: rgba(102, 126, 234, 0.08);
border-radius: 24rpx;
border: 2rpx solid rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: #667eea;
}
}
}
}
@import '@/styles/health-common.scss';
// 筛选面板位置补充(双行模式)
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 180rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 16rpx 16rpx 0 0;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
margin-right: 12rpx;
}
}
.selcet-content {
display: flex;
flex-direction: column;
gap: 16rpx;
}
}
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.btn-reset,
.btn-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
transition: all 0.3s ease;
flex: 1;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
text {
line-height: 1;
}
}
.btn-reset {
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text {
color: #606266;
}
}
.btn-confirm {
background: #667eea;
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
border: none;
text {
color: #ffffff;
}
}
}
}
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 12rpx;
.card-name {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: 0.5rpx;
}
.card-time {
color: rgba(255, 255, 255, 0.9);
font-size: 28rpx;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
flex-shrink: 0;
}
}
.temperature-section {
display: flex;
align-items: center;
flex-shrink: 0;
.temperature-value {
font-size: 32rpx;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
padding: 10rpx 20rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 10rpx;
letter-spacing: 0.5rpx;
&.temp-normal {
color: rgba(255, 255, 255, 0.95);
}
&.temp-warning {
color: #ff7875;
background: rgba(255, 120, 117, 0.15);
font-weight: 800;
}
&.temp-danger {
color: #ff4d4f;
background: rgba(255, 77, 79, 0.15);
font-weight: 800;
}
}
}
}
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
.info-label {
font-size: 24rpx;
color: #667eea;
font-weight: 500;
background: rgba(102, 126, 234, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
}
&:not(.info-item-full) .info-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
.btn-edit,
.btn-copy,
.btn-delete {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
border: 1rpx solid rgba(102, 126, 234, 0.3);
}
.btn-copy {
background: rgba(250, 140, 22, 0.1);
color: #fa8c16;
border: 1rpx solid rgba(250, 140, 22, 0.3);
}
.btn-delete {
background: rgba(245, 87, 108, 0.1);
color: #f5576c;
border: 1rpx solid rgba(245, 87, 108, 0.3);
}
}
}
</style>

View File

@@ -0,0 +1,74 @@
import { defineStore } from 'pinia'
import { listPerson } from '@/api/health/person'
/**
* 健康模块公共 Store
* 缓存频繁使用的数据(如成员列表),避免每个页面重复请求
*/
const useHealthStore = defineStore('health', {
state: () => ({
personList: [] as any[],
personListLoaded: false,
personListLoading: false
}),
actions: {
/**
* 获取成员列表(带缓存)
* @param {boolean} forceRefresh - 是否强制刷新
* @returns {Promise<Array>}
*/
async fetchPersonList(forceRefresh = false) {
// 已加载且不强制刷新,直接返回缓存
if (this.personListLoaded && !forceRefresh) {
return this.personList
}
// 正在加载中,等待完成
if (this.personListLoading) {
return new Promise((resolve) => {
const timer = setInterval(() => {
if (!this.personListLoading) {
clearInterval(timer)
resolve(this.personList)
}
}, 100)
})
}
this.personListLoading = true
try {
const res = await listPerson({ pageNum: 1, pageSize: 100 })
this.personList = res.rows || []
this.personListLoaded = true
return this.personList
} catch (error) {
console.error('获取成员列表失败:', error)
return []
} finally {
this.personListLoading = false
}
},
/**
* 清除成员缓存(如新增/删除成员后调用)
*/
clearPersonCache() {
this.personList = []
this.personListLoaded = false
}
},
persist: {
key: 'health-store',
paths: ['personList', 'personListLoaded'],
storage: {
getItem(key) {
return uni.getStorageSync(key)
},
setItem(key, value) {
uni.setStorageSync(key, value)
}
}
}
})
export default useHealthStore

View File

@@ -0,0 +1,579 @@
// ============================================================
// 健康模块公共样式 - 统一列表页 UI 风格
// ============================================================
// 主题色变量
$health-primary: #667eea;
$health-primary-end: #764ba2;
$health-primary-bg: rgba(102, 126, 234, 0.08);
$health-primary-border: rgba(102, 126, 234, 0.3);
$health-danger: #f5576c;
$health-danger-bg: rgba(245, 87, 108, 0.1);
$health-danger-border: rgba(245, 87, 108, 0.3);
$health-warning: #fa8c16;
$health-warning-bg: rgba(250, 140, 22, 0.1);
$health-warning-border: rgba(250, 140, 22, 0.3);
$health-info: #13c2c2;
$health-info-bg: rgba(19, 194, 194, 0.1);
$health-info-border: rgba(19, 194, 194, 0.3);
// ==================== 页面容器 ====================
page {
height: 100%;
overflow: auto;
}
// ==================== 搜索栏 - 单行模式 ====================
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 100;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
gap: 10rpx;
.search-input {
flex: 1;
}
.search-input-wrapper {
flex: 1;
display: flex;
align-items: center;
position: relative;
.search-icon {
position: absolute;
right: 20rpx;
z-index: 10;
cursor: pointer;
}
}
.filter-btn,
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: $health-primary-bg;
border-radius: 24rpx;
border: 2rpx solid $health-primary-border;
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: $health-primary;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: $health-primary;
}
}
}
// ==================== 搜索栏 - 多行模式(人员+档案选择) ====================
.search-container {
background-color: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
position: relative;
z-index: 100;
.search-row {
padding: 12rpx 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10rpx;
&:first-child {
padding-bottom: 8rpx;
}
&:last-child {
padding-top: 8rpx;
}
.search-input-wrapper {
flex: 1;
display: flex;
align-items: center;
position: relative;
.search-icon {
position: absolute;
right: 20rpx;
z-index: 10;
cursor: pointer;
}
}
.search-input {
background: $health-primary-bg;
color: #333333;
width: 100%;
border-radius: 24rpx;
border: 2rpx solid $health-primary-border;
height: 66rpx !important;
display: flex;
align-items: center;
:deep(input::placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-webkit-input-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(input::-moz-placeholder) {
color: #909399 !important;
font-size: 14px !important;
}
:deep(.u-input__content__field-wrapper__field) {
color: #333333 !important;
}
:deep(input) {
color: #333333 !important;
}
}
.filter-btn,
.add-btn {
display: flex;
align-items: center;
gap: 6rpx;
padding: 12rpx 24rpx;
background: $health-primary-bg;
border-radius: 24rpx;
border: 2rpx solid $health-primary-border;
transition: all 0.3s ease;
flex-shrink: 0;
&:active {
transform: scale(0.95);
background: rgba(102, 126, 234, 0.12);
}
text {
color: $health-primary;
font-size: 28rpx;
font-weight: 600;
}
uni-icons {
color: $health-primary;
}
}
}
}
// ==================== 筛选面板 ====================
.filter-panel {
width: 100%;
position: absolute;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
.filter-panel-content {
background-color: #ffffff;
padding: 0 30rpx 30rpx;
border-radius: 0 0 16rpx 16rpx;
.filter-title {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
padding: 32rpx 0 24rpx 20rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, $health-primary 0%, $health-primary-end 100%);
border-radius: 3rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
}
.selcet-content {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.state-list {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
.state-item {
padding: 0 32rpx;
height: 68rpx;
border: 2rpx solid #e8edf3;
border-radius: 34rpx;
text-align: center;
line-height: 68rpx;
font-size: 28rpx;
color: #666666;
background: #ffffff;
transition: all 0.2s ease;
}
.active {
background: linear-gradient(135deg, $health-primary 0%, $health-primary-end 100%);
border: 2rpx solid transparent;
color: #ffffff;
font-weight: 600;
}
}
}
.btn-box {
display: flex;
gap: 20rpx;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
.btn-reset,
.btn-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
flex: 1;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
text {
line-height: 1;
}
}
.btn-reset {
background: #f5f7fa;
border: 2rpx solid #dcdfe6;
text {
color: #606266;
}
}
.btn-confirm {
background: $health-primary;
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
border: none;
text {
color: #ffffff;
}
}
}
}
// ==================== 列表卡片 ====================
.list-item {
margin: 10rpx 24rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
}
// 卡片头部 - 渐变背景
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, $health-primary 0%, $health-primary-end 100%);
.card-name-section {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
margin-right: 16rpx;
}
.card-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
flex-shrink: 0;
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 12rpx;
.card-name {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
letter-spacing: 0.5rpx;
}
.card-time {
color: rgba(255, 255, 255, 0.9);
font-size: 26rpx;
font-weight: 500;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
letter-spacing: 0.3rpx;
}
.card-code {
color: rgba(255, 255, 255, 0.9);
font-size: 24rpx;
font-weight: 500;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
letter-spacing: 0.3rpx;
}
}
// 统计数据区(如身高体重)
.stats-section {
display: flex;
align-items: center;
gap: 16rpx;
flex-shrink: 0;
.stats-item {
color: $health-warning;
font-size: 28rpx;
font-weight: 700;
line-height: 1;
white-space: nowrap;
.stats-label {
color: rgba(255, 255, 255, 0.85);
font-size: 20rpx;
font-weight: 400;
margin-left: 4rpx;
}
}
}
// 体温展示区
.temperature-section {
display: flex;
align-items: center;
flex-shrink: 0;
.temperature-value {
font-size: 32rpx;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
padding: 10rpx 20rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 10rpx;
letter-spacing: 0.5rpx;
&.temp-normal {
color: rgba(255, 255, 255, 0.95);
}
&.temp-warning {
color: #ff7875;
background: rgba(255, 120, 117, 0.15);
font-weight: 800;
}
&.temp-danger {
color: #ff4d4f;
background: rgba(255, 77, 79, 0.15);
font-weight: 800;
}
}
}
}
// 卡片主体
.card-body {
padding: 24rpx;
background: #fafbfc;
border: 2rpx solid #f0f2f5;
margin: 15rpx 16rpx 2rpx;
border-radius: 12rpx;
}
// 信息行 - 两列布局
.info-row {
display: flex;
flex-wrap: wrap;
margin: 0 -12rpx;
.info-item {
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
&.info-item-full {
width: 100%;
}
.info-label {
font-size: 24rpx;
color: $health-primary;
font-weight: 500;
background: $health-primary-bg;
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
flex: 1;
line-height: 1.5;
word-break: break-all;
}
&:not(.info-item-full) .info-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
// 操作按钮区
.operate {
display: flex;
justify-content: flex-end;
padding: 16rpx 24rpx 24rpx;
gap: 16rpx;
flex-wrap: wrap;
.btn-edit,
.btn-delete,
.btn-copy,
.btn-detail {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
padding: 0 24rpx;
height: 64rpx;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.btn-edit {
background: rgba(102, 126, 234, 0.1);
color: $health-primary;
border: 1rpx solid $health-primary-border;
}
.btn-delete {
background: $health-danger-bg;
color: $health-danger;
border: 1rpx solid $health-danger-border;
}
.btn-copy {
background: $health-warning-bg;
color: $health-warning;
border: 1rpx solid $health-warning-border;
}
.btn-detail {
background: $health-info-bg;
color: $health-info;
border: 1rpx solid $health-info-border;
}
}
}
// ==================== 状态标签 ====================
.status-tag {
font-size: 22rpx;
padding: 4rpx 16rpx;
border-radius: 8rpx;
font-weight: 600;
&.status-active, &.status-1 {
background: rgba(82, 196, 26, 0.2);
color: #52c41a;
}
&.status-ended, &.status-2 {
background: rgba(144, 147, 153, 0.2);
color: #909399;
}
&.status-paused, &.status-3 {
background: rgba(250, 140, 22, 0.2);
color: #fa8c16;
}
}

View File

@@ -64,4 +64,13 @@ $uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
/* 健康模块主题色 */
$health-primary: #667eea;
$health-primary-end: #764ba2;
$health-primary-bg: rgba(102, 126, 234, 0.08);
$health-primary-border: rgba(102, 126, 234, 0.3);
$health-danger: #f5576c;
$health-warning: #fa8c16;
$health-info: #13c2c2;
@import 'uview-plus/theme.scss';

View File

@@ -5,7 +5,7 @@ export default defineConfig(() => {
return {
base: './',
build: {
minify: true,
minify: 'terser',
outDir: 'dist',
// 小程序不支持 eval需要关闭 terser 的 compress.drop_debugger
terserOptions: {