--- pages/index/component/MyApplicationTab.vue +++ pages/index/component/MyApplicationTab.vue @@ -1146,569 +1146,211 @@ .swiper-container { flex: 1; width: 100%; - padding-bottom: 20rpx; } .application-swiper { height: 100%; } .swiper-item-wrapper { - padding: 8rpx 18rpx 26rpx; height: 100%; box-sizing: border-box; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; - transform: scale(0.94); - opacity: 0.7; -} - -.swiper-item-wrapper--active { - transform: scale(1); - opacity: 1; + background-color: #FFFFFF; } .swiper-scroll-view { height: 100%; } -.application-card { - min-height: calc(100% - 40rpx); - background: transparent; - border-radius: 0; - padding: 22rpx 14rpx 34rpx; - box-shadow: none; - border: none; +.application-list-item { + min-height: 100%; + padding: 40rpx 40rpx 80rpx; display: flex; flex-direction: column; - transition: none; } -.empty-panel { - background: transparent; - padding: 60rpx 40rpx; - min-height: 50vh; +.item-header { + padding-bottom: 40rpx; + border-bottom: 1px solid #F1F5F9; } -.card-hero { - position: relative; - padding: 6rpx 0 20rpx; - border-radius: 0; - overflow: visible; - background: transparent; - border: none; - box-shadow: none; - border-bottom: 1px solid rgba(148, 163, 184, 0.16); -} - -.card-hero__glow { - display: none; -} - -.card-head { +.item-meta-top { display: flex; align-items: center; justify-content: space-between; - gap: 16rpx; + margin-bottom: 24rpx; } -.card-title-wrap { - display: flex; - align-items: center; - min-width: 0; - flex: 1; -} - -.card-title-block { - min-width: 0; - flex: 1; -} - -.card-title-meta { - display: flex; - align-items: center; - gap: 12rpx; - min-width: 0; - margin-bottom: 8rpx; -} - -.card-kicker { - display: inline-flex; - align-items: center; - padding: 0; - border-radius: 0; - background: transparent; - color: $brand-primary; - font-size: 19rpx; +.item-kicker { + font-size: 22rpx; font-weight: 700; + color: #64748B; + letter-spacing: 1px; + text-transform: uppercase; } -.card-title { - font-size: 36rpx; - font-weight: 800; - color: #0F172A; - line-height: 1.22; - word-break: break-word; +.item-status { + font-size: 22rpx; + font-weight: 700; + padding: 8rpx 20rpx; + border-radius: 999rpx; } -.card-code-inline { - min-width: 0; - flex: 1; - color: #64748B; - font-size: 20rpx; - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.status-badge { - display: inline-flex; - align-items: center; - padding: 0; - border-radius: 0; - font-size: 20rpx; - font-weight: 700; - white-space: nowrap; - - .status-dot { - width: 10rpx; - height: 10rpx; - border-radius: 50%; - margin-right: 10rpx; - } -} - -.status-pending { - color: #D97706; - .status-dot { background: #D97706; } -} - -.status-approved { - color: $brand-primary; - .status-dot { background: $brand-primary; } -} - -.status-rejected { - color: #DC2626; - .status-dot { background: #DC2626; } -} - -.status-finished { - color: #64748B; - .status-dot { background: #64748B; } -} - -.hero-summary { - display: flex; - align-items: center; - gap: 18rpx; - padding-top: 16rpx; -} - -.hero-summary__item { - flex: 1; - min-width: 0; -} - -.hero-summary__item--compact { - flex: 0 0 180rpx; -} - -.hero-summary__divider { - width: 1px; - align-self: stretch; - background: rgba(148, 163, 184, 0.16); -} - -.hero-summary__label { - color: #94A3B8; - font-size: 20rpx; - margin-bottom: 8rpx; -} - -.hero-summary__value { +.item-title { + font-size: 48rpx; + font-weight: 900; color: #0F172A; - font-weight: 700; - font-size: 28rpx; - line-height: 1.3; - word-break: break-word; + line-height: 1.2; + margin-bottom: 12rpx; } -.card-body { - position: relative; +.item-code { + font-size: 24rpx; + color: #94A3B8; + font-family: monospace; } -.meta-panel { - padding: 8rpx 0 2rpx; +.item-body { + padding: 40rpx 0; } -.meta-panel__row { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 28rpx; - padding: 18rpx 0; - border-bottom: 1px dashed rgba(148, 163, 184, 0.24); -} - -.meta-panel__row:last-child { - border-bottom: none; -} - -.meta-panel__label { - color: #94A3B8; - font-size: 24rpx; - display: flex; - align-items: center; - flex-shrink: 0; -} - -.meta-panel__value { - color: #334155; - font-size: 28rpx; - font-weight: 700; - text-align: right; - line-height: 1.5; - word-break: break-word; -} - -.info-label { - color: #94A3B8; - font-size: 24rpx; - margin-bottom: 12rpx; - display: flex; - align-items: center; -} - -.info-value { - color: #0F172A; - font-weight: 700; - font-size: 30rpx; -} - -.info-row { - padding: 12rpx 0; - - .info-label { - color: #94A3B8; - margin-bottom: 0; - } - - .info-value { - color: #334155; - font-size: 28rpx; - font-weight: 600; - } -} - -.remark-label { - color: #94A3B8; - font-size: 24rpx; - margin-bottom: 8rpx; -} - -.remark-panel { - display: flex; - align-items: stretch; - gap: 14rpx; - padding: 14rpx 0 0; - border-radius: 0; - background: transparent; - border: none; -} - -.remark-panel__accent { - width: 4rpx; - border-radius: 999rpx; - background: rgba($brand-primary, 0.45); - flex-shrink: 0; -} - -.remark-panel__main { - min-width: 0; -} - -.remark-text { - color: #334155; - font-size: 28rpx; - line-height: 1.6; -} - -.deposit-action-panel { - margin-top: auto; - padding: 24rpx 0 0; - border-radius: 0; - background: transparent; - border: none; - box-shadow: none; - border-top: 1px solid rgba(148, 163, 184, 0.16); -} - -.deposit-action-panel__hero { +.data-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 32rpx; + padding-bottom: 40rpx; + border-bottom: 1px solid #F1F5F9; +} + +.data-group { display: flex; flex-direction: column; - align-items: stretch; - gap: 18rpx; -} - -.deposit-action-panel__hero-main { - display: flex; - align-items: center; - min-width: 0; - width: 100%; -} - -.deposit-action-panel__icon { - width: 40rpx; - height: 40rpx; - border-radius: 0; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - background: transparent; - color: #EA580C; - font-size: 24rpx; -} - -.deposit-action-panel__heading { - min-width: 0; - flex: 1; - margin-left: 14rpx; -} - -.deposit-action-panel__eyebrow { - color: #94A3B8; - font-size: 20rpx; - font-weight: 500; -} - -.deposit-action-panel__title { - margin-top: 4rpx; - color: #0F172A; - font-size: 34rpx; - line-height: 1.3; - font-weight: 800; - word-break: break-word; -} - -.deposit-action-panel__subtitle { - margin-top: 6rpx; - color: #64748B; - font-size: 20rpx; - font-weight: 500; -} - -.deposit-action-panel__actions { - display: flex; - align-items: center; - justify-content: stretch; - gap: 16rpx; - width: 100%; -} - -.deposit-action-panel__actions .card-action-btn { - flex: 1; - min-width: 0; -} - -.deposit-action-panel__content { - padding-top: 4rpx; -} - -.deposit-action-panel__remark { - margin-bottom: 16rpx; - padding: 0; - border-radius: 0; - background: transparent; - border: none; -} - -.deposit-action-panel__remark-label { - color: #94A3B8; - font-size: 22rpx; - margin-bottom: 10rpx; -} - -.deposit-action-panel__remark-text { - color: #475569; - font-size: 26rpx; - line-height: 1.55; -} - -.deposit-action-panel__amount-card { - padding: 0 0 18rpx; - border-radius: 0; - background: transparent; - border: none; - min-height: 0; - border-bottom: 1px solid rgba(148, 163, 184, 0.16); -} - -.deposit-action-panel__amount-label { - color: #94A3B8; +} + +.data-label { font-size: 22rpx; -} - -.deposit-action-panel__amount-value { - margin-top: 12rpx; - color: #0F172A; - font-size: 48rpx; - line-height: 1; - font-weight: 800; -} - -.deposit-action-panel__meta { - display: grid; - gap: 12rpx; - padding-top: 2rpx; -} - -.deposit-action-panel__meta-row { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 24rpx; - padding: 0 2rpx; -} - -.deposit-action-panel__meta-label { color: #94A3B8; - font-size: 22rpx; - flex-shrink: 0; - min-width: 120rpx; + margin-bottom: 8rpx; } -.deposit-action-panel__meta-value { - flex: 1; - text-align: right; - word-break: break-word; - color: #334155; - font-size: 26rpx; - font-weight: 600; -} - -.deposit-action-panel__meta-value--expired { - color: #DC2626 !important; -} - -.status-reminder { - display: flex; - align-items: flex-start; - gap: 18rpx; - padding: 24rpx 0 0; - border-radius: 0; - box-shadow: none; - border-top: 1px solid rgba(148, 163, 184, 0.16); -} - -.status-reminder--warning { - background: transparent; -} - -.status-reminder--info { - background: transparent; -} - -.status-reminder__icon { - width: 40rpx; - height: 40rpx; - border-radius: 0; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - font-size: 24rpx; -} - -.status-reminder--warning .status-reminder__icon { - color: #C2410C; - background: transparent; -} - -.status-reminder--info .status-reminder__icon { - color: #1D4ED8; - background: transparent; -} - -.status-reminder__content { - flex: 1; - min-width: 0; -} - -.status-reminder__action { - min-width: 164rpx; - height: 68rpx; - padding: 0 26rpx; - border-radius: 999rpx; - display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - background: transparent; - color: #DC2626; - border: 1px solid rgba(239, 68, 68, 0.24); - box-shadow: none; -} - -.status-reminder__action--loading { - opacity: 0.72; -} - -.status-reminder__title { - font-size: 24rpx; - font-weight: 700; - color: #64748B; -} - -.status-reminder__text { - margin-top: 8rpx; - font-size: 30rpx; - line-height: 1.45; - font-weight: 800; +.data-value { + font-size: 28rpx; + font-weight: 600; color: #1E293B; } -.card-footer { - margin-top: auto; - padding-top: 24rpx; - display: flex; - justify-content: flex-end; -} - -.card-action-btn { - height: 72rpx; - padding: 0 32rpx; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 999rpx; - font-size: 26rpx; - font-weight: 700; - margin-left: 20rpx; - transition: opacity 0.2s; -} - -.card-action-btn:active { - opacity: 0.7; -} - -.card-action-btn--solid { - background: $brand-primary; - color: #FFFFFF; - border: 1px solid transparent; - box-shadow: none; -} - -.card-action-btn--ghost { - background: #FFFFFF; - color: #000000; - border: 1px solid #E2E8F0; - box-shadow: none; -} - -.card-action-btn--ghost-danger { - background: #FFFFFF; - color: #DC2626; - border: 1px solid #F3C4C4; - box-shadow: none; -} - -.card-action-btn--loading { - opacity: 0.72; -} - -.action-btn { - width: 100%; - height: 90rpx; - display: flex; - align-items: center; +.data-list { + display: flex; + flex-direction: column; + gap: 24rpx; +} + +.data-row { + display: flex; + justify-content: space-between; + align-items: center; +} + +.data-row-label { + font-size: 26rpx; + color: #64748B; +} + +.data-row-value { + font-size: 26rpx; + font-weight: 600; + color: #0F172A; +} + +.text-danger { + color: #DC2626 !important; +} + +.status-pending { color: #D97706; background: #FEF3C7; } +.status-approved { color: $brand-primary; background: rgba($brand-primary, 0.12); } +.status-rejected { color: #DC2626; background: #FEE2E2; } +.status-finished { color: #475569; background: #F1F5F9; } + +.remark-block { + background: #F8FAFC; + padding: 24rpx; + border-radius: 16rpx; +} + +.remark-label { + font-size: 22rpx; + font-weight: 700; + color: #64748B; + margin-bottom: 8rpx; +} + +.remark-text { + font-size: 26rpx; + line-height: 1.5; + color: #334155; +} + +.action-block { + margin-top: auto; + padding-top: 40rpx; + border-top: 2px solid #F1F5F9; +} + +.action-block-header { + margin-bottom: 32rpx; +} + +.action-title { + font-size: 32rpx; + font-weight: 800; + color: #0F172A; +} + +.action-subtitle { + font-size: 24rpx; + color: #64748B; + margin-top: 4rpx; +} + +.amount-display { + display: flex; + align-items: baseline; + margin-bottom: 32rpx; +} + +.amount-currency { + font-size: 36rpx; + font-weight: 700; + color: #0F172A; + margin-right: 8rpx; +} + +.amount-number { + font-size: 80rpx; + font-weight: 900; + color: #0F172A; + line-height: 1; + letter-spacing: -1px; +} + +.action-buttons { + display: flex; + gap: 20rpx; +} + +.btn-minimal { + flex: 1; + height: 96rpx; + border-radius: 16rpx; + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + font-weight: 700; + transition: opacity 0.2s; +} + +.btn-minimal:active { + opacity: 0.8; +} + +.btn-minimal--solid { + background: #000000; + color: #FFFFFF; +} + +.btn-minimal--ghost { + background: transparent; + color: #000000; + border: 1px solid #E2E8F0; +} + +.btn-loading { + opacity: 0.5; + pointer-events: none; +} + +.reminder-block { + background: #F8FAFC; + padding: 32rpx; + border-radius: 16rpx; + border-left: 4px solid #3B82F6; +} + +.reminder-title { + font-size: 24rpx; + font-weight: 700; + color: #3B82F6; + margin-bottom: 8rpx; +} + +.reminder-text { + font-size: 28rpx; + color: #1E293B; + line-height: 1.5; + font-weight: 600; +} + +.empty-panel { + background: transparent; + padding: 60rpx 40rpx; + min-height: 50vh; +} + +.action-btn { + width: 100%; + height: 90rpx; + display: flex; + align-items: center;