222 lines
16 KiB
Plaintext
222 lines
16 KiB
Plaintext
/* pages/jisufd/jisufd.wxss - 增强版，包含标签展示 */
|
|
.page-container {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
padding-bottom: 40rpx;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
|
|
}
|
|
.balance-card {
|
|
background: linear-gradient(135deg, rgba(20,20,30,0.9), rgba(30,30,50,0.9));
|
|
border-radius: 24rpx;
|
|
padding: 36rpx;
|
|
margin-bottom: 40rpx;
|
|
color: #fff;
|
|
box-shadow: 0 15rpx 35rpx rgba(0,0,0,0.4), 0 0 40rpx rgba(0,150,255,0.15);
|
|
text-align: center;
|
|
border: 1.5rpx solid rgba(0,180,255,0.2);
|
|
backdrop-filter: blur(10rpx);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.balance-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%; left: -50%;
|
|
width: 200%; height: 200%;
|
|
background: linear-gradient(45deg, transparent 30%, rgba(0,180,255,0.1) 50%, transparent 70%);
|
|
animation: cardShine 6s infinite linear;
|
|
z-index: 1;
|
|
}
|
|
@keyframes cardShine {
|
|
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
|
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
|
|
}
|
|
.balance-label { font-size: 28rpx; color: rgba(255,255,255,0.8); margin-bottom: 18rpx; font-weight: 500; position: relative; z-index: 2; }
|
|
.balance-amount { display: flex; align-items: baseline; justify-content: center; margin-bottom: 15rpx; position: relative; z-index: 2; }
|
|
.amount-value { font-size: 64rpx; font-weight: bold; color: #00B4FF; text-shadow: 0 0 20rpx rgba(0,180,255,0.7), 0 0 40rpx rgba(0,180,255,0.4); animation: amountGlow 3s infinite alternate; }
|
|
@keyframes amountGlow {
|
|
0% { color: #00B4FF; text-shadow: 0 0 15rpx rgba(0,180,255,0.6); }
|
|
100% { color: #00E0FF; text-shadow: 0 0 25rpx rgba(0,180,255,0.8), 0 0 50rpx rgba(0,180,255,0.5); }
|
|
}
|
|
.amount-unit { font-size: 36rpx; color: #00B4FF; margin-left: 12rpx; font-weight: 500; z-index: 2; }
|
|
.balance-tip { font-size: 24rpx; color: rgba(255,255,255,0.6); z-index: 2; }
|
|
|
|
.section { margin-bottom: 35rpx; }
|
|
.section-title { font-size: 32rpx; font-weight: 700; color: #FFFFFF; margin-bottom: 25rpx; padding-left: 12rpx; border-left: 6rpx solid #9C27B0; text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3); }
|
|
|
|
.type-scroll { white-space: nowrap; display: flex; height: 90rpx; }
|
|
.type-item {
|
|
display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
|
|
height: 85rpx; padding: 0 40rpx; margin-right: 20rpx;
|
|
background: rgba(255,255,255,0.08); border-radius: 45rpx; border: 2rpx solid rgba(255,255,255,0.15);
|
|
font-size: 28rpx; color: rgba(255,255,255,0.8);
|
|
transition: all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
|
|
backdrop-filter: blur(10rpx);
|
|
}
|
|
.type-active {
|
|
background: linear-gradient(135deg, #9C27B0 0%, #673AB7 100%);
|
|
border-color: #9C27B0; color: white; transform: scale(1.05);
|
|
box-shadow: 0 10rpx 25rpx rgba(156,39,176,0.4), 0 0 30rpx rgba(156,39,176,0.3);
|
|
}
|
|
.type-text { max-width: 220rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
|
|
|
|
/* 搜索区域 */
|
|
.search-section { margin-bottom: 35rpx; }
|
|
.search-box {
|
|
display: flex; align-items: center;
|
|
background: rgba(255,255,255,0.1); border-radius: 50rpx;
|
|
padding: 20rpx 30rpx; border: 2rpx solid rgba(255,255,255,0.2);
|
|
backdrop-filter: blur(10rpx); transition: all 0.3s ease;
|
|
}
|
|
.search-box:focus-within { border-color: #9C27B0; background: rgba(255,255,255,0.15); box-shadow: 0 0 25rpx rgba(156,39,176,0.3); }
|
|
.search-icon { font-size: 32rpx; color: rgba(255,255,255,0.7); margin-right: 20rpx; flex-shrink: 0; }
|
|
.search-input { flex: 1; font-size: 28rpx; color: #FFFFFF; background: transparent; border: none; outline: none; min-height: 40rpx; }
|
|
.search-input::placeholder { color: rgba(255,255,255,0.4); }
|
|
.search-btn { background: linear-gradient(135deg, #9C27B0 0%, #673AB7 100%); border-radius: 40rpx; padding: 15rpx 30rpx; margin-left: 20rpx; flex-shrink: 0; box-shadow: 0 8rpx 20rpx rgba(156,39,176,0.3); }
|
|
.search-btn:active { transform: scale(0.95); }
|
|
.search-btn-text { font-size: 26rpx; color: white; font-weight: 600; }
|
|
|
|
.filter-row { display: flex; align-items: center; margin-top: 20rpx; gap: 15rpx; }
|
|
.filter-item { display: flex; align-items: center; background: rgba(255,255,255,0.08); border-radius: 30rpx; padding: 10rpx 20rpx; border: 1rpx solid rgba(255,255,255,0.15); }
|
|
.filter-label { font-size: 24rpx; color: rgba(255,255,255,0.7); margin-right: 10rpx; }
|
|
.filter-input { width: 120rpx; height: 50rpx; background: transparent; color: #fff; font-size: 26rpx; }
|
|
.picker-view { padding: 10rpx 0; color: rgba(255,255,255,0.9); font-size: 26rpx; max-width: 160rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.clear-search { margin-left: auto; padding: 10rpx 20rpx; background: rgba(255,255,255,0.1); border-radius: 20rpx; color: rgba(255,255,255,0.7); font-size: 24rpx; }
|
|
|
|
/* 模板区域 */
|
|
.template-section { height: calc(100vh - 600rpx); position: relative; }
|
|
.template-scroll { height: 100%; }
|
|
.template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25rpx; padding-bottom: 30rpx; }
|
|
.template-card {
|
|
background: linear-gradient(145deg, rgba(30,30,45,0.9), rgba(40,40,60,0.9));
|
|
border-radius: 20rpx; padding: 25rpx;
|
|
border: 1.5rpx solid rgba(255,255,255,0.1);
|
|
box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.3), 0 0 25rpx rgba(0,180,255,0.1);
|
|
transition: all 0.3s ease; backdrop-filter: blur(10rpx);
|
|
display: flex; flex-direction: column; min-height: 280rpx; position: relative; overflow: hidden;
|
|
}
|
|
.template-card::before { content: ''; position: absolute; top:0; left:0; right:0; height:4rpx; background: linear-gradient(90deg, #9C27B0, #00B4FF, #9C27B0); opacity:0.6; }
|
|
.template-intro { flex:1; margin-bottom:10rpx; min-height:70rpx; overflow:hidden; }
|
|
.intro-text { font-size:24rpx; line-height:1.4; color:rgba(255,255,255,0.9); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-weight:500; }
|
|
.template-label { margin-bottom: 10rpx; }
|
|
.template-price-row { display:flex; align-items:center; margin-bottom:20rpx; padding:10rpx 0; border-bottom:1rpx solid rgba(255,255,255,0.1); }
|
|
.template-price-label { font-size:22rpx; color:rgba(255,255,255,0.7); margin-right:10rpx; }
|
|
.template-price-value { font-size:26rpx; font-weight:bold; color:#FFD700; text-shadow:0 0 10rpx rgba(255,215,0,0.3); flex:1; }
|
|
.template-actions-grid { display:flex; flex-direction:column; gap:12rpx; margin-top:10rpx; }
|
|
.action-grid-btn {
|
|
height:65rpx; border-radius:32rpx; font-size:24rpx; font-weight:600; transition:all 0.3s ease;
|
|
border:none; padding:0 20rpx; box-shadow:0 4rpx 12rpx rgba(0,0,0,0.2), inset 0 1rpx 0 rgba(255,255,255,0.1);
|
|
display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important;
|
|
}
|
|
.generate-grid-btn { background:linear-gradient(135deg, #00B4FF, #0091EA); color:white; }
|
|
.generate-grid-btn.generated { background:linear-gradient(135deg, #4CAF50, #2E7D32); }
|
|
.copy-grid-btn { background:linear-gradient(135deg, #9C27B0, #673AB7); color:white; }
|
|
.copy-grid-btn.copied { background:linear-gradient(135deg, #FF9800, #F57C00); }
|
|
.add-card { background: linear-gradient(145deg, rgba(40,40,60,0.7), rgba(60,60,80,0.7)); border:2rpx dashed rgba(255,255,255,0.3); display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:280rpx; }
|
|
.add-icon { font-size:60rpx; color:rgba(255,255,255,0.6); margin-bottom:20rpx; }
|
|
.add-text { font-size:30rpx; color:rgba(255,255,255,0.8); font-weight:600; margin-bottom:8rpx; }
|
|
.add-subtext { font-size:24rpx; color:rgba(255,255,255,0.5); }
|
|
|
|
/* 弹窗通用 */
|
|
.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.75); display:flex; align-items:center; justify-content:center; z-index:9999; padding:30rpx; backdrop-filter:blur(10rpx); animation:fadeIn 0.3s ease; }
|
|
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
|
|
.modal-content {
|
|
background:linear-gradient(145deg, rgba(30,30,45,0.95), rgba(40,40,60,0.95));
|
|
border-radius:30rpx; width:100%; max-width:700rpx; max-height:85vh; overflow-y:auto;
|
|
border:1.5rpx solid rgba(255,255,255,0.15);
|
|
box-shadow:0 25rpx 80rpx rgba(0,0,0,0.6), 0 0 60rpx rgba(0,180,255,0.2);
|
|
animation:slideUp 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
|
|
position:relative;
|
|
}
|
|
@keyframes slideUp { from{transform:translateY(100rpx) scale(0.9); opacity:0;} to{transform:translateY(0) scale(1); opacity:1;} }
|
|
.modal-close { position:absolute; top:25rpx; right:25rpx; width:60rpx; height:60rpx; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:40rpx; color:rgba(255,255,255,0.7); z-index:10; }
|
|
.modal-header { padding:40rpx 40rpx 20rpx; text-align:center; }
|
|
.modal-title { font-size:36rpx; font-weight:bold; color:#FFFFFF; }
|
|
|
|
.detail-info { padding:30rpx 40rpx; }
|
|
.detail-item { margin-bottom:30rpx; }
|
|
.detail-label { font-size:26rpx; color:rgba(255,255,255,0.7); margin-bottom:10rpx; font-weight:500; }
|
|
.detail-value { font-size:28rpx; color:#FFFFFF; word-break:break-word; }
|
|
.intro-value { background:rgba(255,255,255,0.05); border-radius:15rpx; padding:20rpx; border:1rpx solid rgba(255,255,255,0.1); max-height:200rpx; overflow-y:auto; }
|
|
.detail-meta-row { display:flex; align-items:center; justify-content:space-between; padding:25rpx 0; margin:20rpx 0; border-top:1rpx solid rgba(255,255,255,0.1); border-bottom:1rpx solid rgba(255,255,255,0.1); }
|
|
.meta-item { display:flex; flex-direction:column; align-items:center; flex:1; }
|
|
.meta-label { font-size:22rpx; color:rgba(255,255,255,0.6); margin-bottom:8rpx; }
|
|
.meta-value { font-size:26rpx; font-weight:600; }
|
|
.price-meta { color:#FFD700; text-shadow:0 0 10rpx rgba(255,215,0,0.3); }
|
|
.count-meta { color:#00B4FF; }
|
|
.id-meta { color:#4CAF50; font-family:'Courier New',monospace; font-size:24rpx; }
|
|
.meta-divider { color:rgba(255,255,255,0.2); font-size:24rpx; margin:0 15rpx; }
|
|
|
|
.link-filter-bar { display:flex; align-items:center; margin-top:30rpx; margin-bottom:20rpx; }
|
|
.filter-switch {
|
|
padding:10rpx 25rpx; margin-left:10rpx; border-radius:20rpx; background:rgba(255,255,255,0.1);
|
|
font-size:24rpx; color:rgba(255,255,255,0.7); transition:all 0.3s;
|
|
}
|
|
.filter-switch.active { background:linear-gradient(135deg, #00B4FF, #0091EA); color:white; }
|
|
.link-list { background:rgba(0,0,0,0.2); border-radius:15rpx; padding:15rpx; }
|
|
.link-item { display:flex; align-items:center; justify-content:space-between; padding:15rpx 0; border-bottom:1rpx solid rgba(255,255,255,0.1); }
|
|
.link-url { flex:1; font-size:22rpx; color:rgba(255,255,255,0.8); word-break:break-all; margin-right:15rpx; }
|
|
.link-status { font-size:20rpx; color:rgba(255,255,255,0.5); margin-right:15rpx; }
|
|
.copy-link-btn { padding:8rpx 20rpx; background:#00B4FF; color:white; border-radius:15rpx; font-size:22rpx; }
|
|
.load-more-links { text-align:center; padding:20rpx 0; }
|
|
.load-more-btn { display:inline-block; padding:15rpx 40rpx; background:linear-gradient(135deg, #9C27B0, #673AB7); border-radius:30rpx; color:white; font-size:26rpx; }
|
|
.link-loading, .link-empty { text-align:center; padding:30rpx; color:rgba(255,255,255,0.5); font-size:24rpx; }
|
|
|
|
/* 弹窗按钮 */
|
|
.modal-actions-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18rpx; padding:30rpx 40rpx 40rpx; border-top:1rpx solid rgba(255,255,255,0.1); }
|
|
.modal-grid-btn {
|
|
height:85rpx; border-radius:42rpx; font-size:28rpx; font-weight:600; transition:all 0.3s;
|
|
border:none; padding:0 20rpx; box-shadow:0 8rpx 25rpx rgba(0,0,0,0.3), inset 0 1rpx 0 rgba(255,255,255,0.2);
|
|
display:flex !important; align-items:center !important; justify-content:center !important;
|
|
}
|
|
.generate-modal-grid-btn { background:linear-gradient(145deg, #00B4FF, #0091EA); color:white; }
|
|
.copy-modal-grid-btn { background:linear-gradient(145deg, #9C27B0, #673AB7); color:white; }
|
|
.copy-modal-grid-btn.copied { background:linear-gradient(145deg, #FF9800, #F57C00); }
|
|
.edit-modal-grid-btn { background:linear-gradient(145deg, #4CAF50, #2E7D32); color:white; }
|
|
.delete-modal-grid-btn { background:linear-gradient(145deg, #FF4444, #CC0000); color:white; }
|
|
|
|
/* 编辑区 */
|
|
.edit-section { padding:30rpx 40rpx 20rpx; border-top:1rpx solid rgba(255,255,255,0.1); margin-top:20rpx; }
|
|
.edit-item { margin-bottom:30rpx; }
|
|
.edit-label { font-size:26rpx; color:rgba(255,255,255,0.8); margin-bottom:15rpx; font-weight:600; }
|
|
.edit-input { width:100%; background:rgba(255,255,255,0.08); border:1.5rpx solid rgba(255,255,255,0.2); border-radius:15rpx; padding:25rpx; font-size:28rpx; color:#FFFFFF; }
|
|
.intro-edit { min-height:150rpx; }
|
|
.price-edit { text-align:center; font-size:32rpx; font-weight:600; height:90rpx; line-height:90rpx; }
|
|
.picker-view { padding:25rpx; background:rgba(255,255,255,0.08); border-radius:15rpx; border:1.5rpx solid rgba(255,255,255,0.2); color:#fff; }
|
|
.commission-item { display:flex; align-items:center; gap:20rpx; }
|
|
.commission-input { flex:1; background:rgba(255,255,255,0.08); border-radius:15rpx; padding:20rpx; color:#fff; }
|
|
|
|
/* 添加表单 */
|
|
.add-form { padding:30rpx 40rpx 20rpx; }
|
|
.form-item { margin-bottom:35rpx; }
|
|
.form-label { font-size:28rpx; color:rgba(255,255,255,0.8); margin-bottom:18rpx; font-weight:600; }
|
|
.intro-input, .price-input { width:100%; background:rgba(255,255,255,0.08); border:1.5rpx solid rgba(255,255,255,0.2); border-radius:15rpx; padding:25rpx; font-size:28rpx; color:#FFFFFF; }
|
|
.intro-input { min-height:180rpx; }
|
|
.price-input { height:90rpx; line-height:90rpx; text-align:center; font-weight:600; }
|
|
.add-actions-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:25rpx; padding:30rpx 40rpx 40rpx; border-top:1rpx solid rgba(255,255,255,0.1); }
|
|
.cancel-grid-btn { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.8); border:1.5rpx solid rgba(255,255,255,0.2); }
|
|
.confirm-add-grid-btn { background:linear-gradient(145deg, #9C27B0, #673AB7); color:white; }
|
|
|
|
/* 确认弹窗 */
|
|
.confirm-content {
|
|
background:linear-gradient(145deg, rgba(40,40,60,0.95), rgba(50,50,70,0.95));
|
|
border-radius:25rpx; padding:50rpx 40rpx 40rpx; width:85%; max-width:550rpx;
|
|
border:1.5rpx solid rgba(255,255,255,0.15); box-shadow:0 30rpx 90rpx rgba(0,0,0,0.7); text-align:center;
|
|
animation:scaleIn 0.3s ease;
|
|
}
|
|
@keyframes scaleIn { from{transform:scale(0.8); opacity:0;} to{transform:scale(1); opacity:1;} }
|
|
.confirm-title { font-size:34rpx; font-weight:bold; color:#FFFFFF; margin-bottom:25rpx; }
|
|
.confirm-text { font-size:28rpx; color:rgba(255,255,255,0.8); margin-bottom:40rpx; }
|
|
.confirm-actions-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:25rpx; }
|
|
.confirm-grid-btn { height:85rpx; border-radius:42rpx; font-size:28rpx; font-weight:600; display:flex; align-items:center; justify-content:center; }
|
|
.cancel-confirm-grid-btn { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.8); border:1.5rpx solid rgba(255,255,255,0.2); }
|
|
.delete-confirm-grid-btn { background:linear-gradient(145deg, #FF4444, #CC0000); color:white; }
|
|
.confirm-new-link-grid-btn { background:linear-gradient(145deg, #00B4FF, #0091EA); color:white; }
|
|
|
|
.loading-mask { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(18,18,24,0.95); display:flex; align-items:center; justify-content:center; z-index:10000; }
|
|
.loading-content { background:rgba(40,40,60,0.95); padding:60rpx 80rpx; border-radius:30rpx; display:flex; flex-direction:column; align-items:center; box-shadow:0 25rpx 70rpx rgba(0,0,0,0.6); }
|
|
.loading-spinner { width:90rpx; height:90rpx; border:8rpx solid rgba(0,180,255,0.2); border-top:8rpx solid #00B4FF; border-radius:50%; animation:spin 1.2s linear infinite; margin-bottom:35rpx; }
|
|
.loading-text { font-size:30rpx; color:#00B4FF; font-weight:600; }
|
|
@keyframes spin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } |