fanfpy
bc48e8f7a3
- 添加uni-ui组件库依赖 - 实现微信静默登录功能 - 创建资产、策略、我的等核心页面 - 添加策略组合配置功能 - 实现持仓详情展示 - 完善用户信息展示 - 添加全局样式和工具类 - 配置小程序项目设置
240 lines
7.5 KiB
Plaintext
240 lines
7.5 KiB
Plaintext
|
|
/* 基础设置 */
|
|
.page-container.data-v-eca06f3c {
|
|
min-height: 100vh;
|
|
background-color: #F9FAFB;
|
|
/* 关键：底部留出空间，防止内容被固定按钮遮挡 */
|
|
padding-bottom: 180rpx;
|
|
}
|
|
.flex-row.data-v-eca06f3c { display: flex; flex-direction: row;
|
|
}
|
|
.flex-col.data-v-eca06f3c { display: flex; flex-direction: column;
|
|
}
|
|
.items-center.data-v-eca06f3c { align-items: center;
|
|
}
|
|
.justify-between.data-v-eca06f3c { justify-content: space-between;
|
|
}
|
|
.gap-1.data-v-eca06f3c { gap: 8rpx;
|
|
}
|
|
.gap-2.data-v-eca06f3c { gap: 16rpx;
|
|
}
|
|
.align-right.data-v-eca06f3c { align-items: flex-end;
|
|
}
|
|
.pb-0.data-v-eca06f3c { padding-bottom: 0 !important;
|
|
}
|
|
|
|
/* 颜色工具 */
|
|
.text-red.data-v-eca06f3c { color: #EF4444;
|
|
}
|
|
.text-green.data-v-eca06f3c { color: #10B981;
|
|
}
|
|
.text-brand.data-v-eca06f3c { color: #064E3B;
|
|
}
|
|
.bg-blue-100.data-v-eca06f3c { background-color: #EFF6FF;
|
|
}
|
|
.text-blue.data-v-eca06f3c { color: #2563EB;
|
|
}
|
|
.bg-orange-100.data-v-eca06f3c { background-color: #FFF7ED;
|
|
}
|
|
.text-orange.data-v-eca06f3c { color: #EA580C;
|
|
}
|
|
.bg-green-100.data-v-eca06f3c { background-color: #ECFDF5;
|
|
}
|
|
.bg-red.data-v-eca06f3c { background-color: #EF4444;
|
|
}
|
|
.bg-green.data-v-eca06f3c { background-color: #10B981;
|
|
}
|
|
|
|
/* 1. 导航栏 */
|
|
.nav-bar.data-v-eca06f3c {
|
|
background-color: #fff;
|
|
padding: var(--status-bar-height) 32rpx 20rpx 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
.page-title.data-v-eca06f3c { font-size: 34rpx; font-weight: 700; color: #111827;
|
|
}
|
|
|
|
/* 2. 头部深色卡片 */
|
|
.header-section.data-v-eca06f3c { padding: 20rpx 32rpx;
|
|
}
|
|
.asset-card.data-v-eca06f3c {
|
|
background-color: #064E3B;
|
|
border-radius: 40rpx;
|
|
padding: 40rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 10rpx 30rpx rgba(6, 78, 59, 0.25);
|
|
color: #fff;
|
|
}
|
|
.card-watermark.data-v-eca06f3c { position: absolute; right: -20rpx; top: -20rpx; opacity: 0.1; transform: rotate(15deg);
|
|
}
|
|
.card-top.data-v-eca06f3c { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx;
|
|
}
|
|
.label-text.data-v-eca06f3c { font-size: 26rpx; opacity: 0.8;
|
|
}
|
|
.status-badge.data-v-eca06f3c { background-color: rgba(255,255,255,0.2); padding: 4rpx 16rpx; border-radius: 20rpx;
|
|
}
|
|
.status-text.data-v-eca06f3c { font-size: 22rpx; font-weight: 600;
|
|
}
|
|
.card-main.data-v-eca06f3c { display: flex; align-items: baseline; margin-bottom: 40rpx;
|
|
}
|
|
.currency.data-v-eca06f3c { font-size: 40rpx; font-weight: 700; margin-right: 8rpx;
|
|
}
|
|
.big-number.data-v-eca06f3c { font-size: 64rpx; font-weight: 800; font-family: 'DIN Alternate';
|
|
}
|
|
.card-bottom.data-v-eca06f3c { display: flex; justify-content: space-between;
|
|
}
|
|
.stat-item.data-v-eca06f3c { display: flex; flex-direction: column; gap: 8rpx;
|
|
}
|
|
.stat-label.data-v-eca06f3c { font-size: 24rpx; opacity: 0.7;
|
|
}
|
|
.stat-val.data-v-eca06f3c { font-size: 32rpx; font-weight: 700; font-family: 'DIN Alternate';
|
|
}
|
|
|
|
/* 策略信息卡片 */
|
|
.strategy-info-card.data-v-eca06f3c {
|
|
background-color: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
padding: 24rpx;
|
|
border: 1rpx solid #F3F4F6;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
|
|
}
|
|
.st-left.data-v-eca06f3c { display: flex; align-items: center; gap: 20rpx;
|
|
}
|
|
.st-icon-box.data-v-eca06f3c {
|
|
width: 80rpx; height: 80rpx;
|
|
border-radius: 20rpx;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.st-icon-text.data-v-eca06f3c { font-size: 36rpx; font-weight: 800;
|
|
}
|
|
.st-name.data-v-eca06f3c { font-size: 28rpx; font-weight: 700; color: #1F2937;
|
|
}
|
|
.st-tag.data-v-eca06f3c {
|
|
font-size: 20rpx; color: #6B7280;
|
|
background-color: #F3F4F6; padding: 2rpx 10rpx; border-radius: 8rpx;
|
|
}
|
|
.st-status-text.data-v-eca06f3c { font-size: 24rpx; font-weight: 600; color: #059669;
|
|
}
|
|
.status-dot.data-v-eca06f3c {
|
|
width: 12rpx; height: 12rpx; border-radius: 50%;
|
|
background-color: #10B981;
|
|
}
|
|
.pulsing.data-v-eca06f3c { animation: pulse-eca06f3c 2s infinite;
|
|
}
|
|
@keyframes pulse-eca06f3c {
|
|
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
|
|
}
|
|
70% { box-shadow: 0 0 0 10rpx rgba(16, 185, 129, 0);
|
|
}
|
|
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
|
}
|
|
}
|
|
|
|
/* 通用容器 */
|
|
.section-container.data-v-eca06f3c { padding: 20rpx 32rpx;
|
|
}
|
|
.section-header.data-v-eca06f3c { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24rpx;
|
|
}
|
|
.section-title.data-v-eca06f3c { font-size: 30rpx; font-weight: 800; color: #1F2937; border-left: 8rpx solid #064E3B; padding-left: 16rpx; line-height: 1;
|
|
}
|
|
.section-sub.data-v-eca06f3c { font-size: 24rpx; color: #9CA3AF; margin-right: 4rpx;
|
|
}
|
|
|
|
/* 持仓卡片 */
|
|
.position-card.data-v-eca06f3c {
|
|
background-color: #fff;
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.02);
|
|
border: 1rpx solid #F3F4F6;
|
|
}
|
|
.stock-icon.data-v-eca06f3c { width: 80rpx; height: 80rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.icon-char.data-v-eca06f3c { font-size: 32rpx; font-weight: 800;
|
|
}
|
|
.stock-name.data-v-eca06f3c { font-size: 30rpx; font-weight: 700; color: #1F2937;
|
|
}
|
|
.stock-code.data-v-eca06f3c { font-size: 24rpx; color: #9CA3AF; margin-top: 4rpx;
|
|
}
|
|
.market-val.data-v-eca06f3c { font-size: 32rpx; font-weight: 700; color: #1F2937;
|
|
}
|
|
.weight-tag.data-v-eca06f3c { font-size: 22rpx; color: #6B7280; background-color: #F3F4F6; padding: 2rpx 12rpx; border-radius: 8rpx; margin-top: 8rpx;
|
|
}
|
|
.divider.data-v-eca06f3c { height: 1rpx; background-color: #F3F4F6; margin: 24rpx 0;
|
|
}
|
|
.pos-bottom.data-v-eca06f3c { display: flex; justify-content: space-between;
|
|
}
|
|
.pnl-label.data-v-eca06f3c { font-size: 22rpx; color: #9CA3AF; margin-bottom: 4rpx;
|
|
}
|
|
.pnl-val.data-v-eca06f3c { font-size: 28rpx; font-weight: 700;
|
|
}
|
|
|
|
/* 交易明细 */
|
|
.timeline-box.data-v-eca06f3c { padding: 0 16rpx;
|
|
}
|
|
.timeline-item.data-v-eca06f3c { display: flex; margin-bottom: 0; min-height: 120rpx;
|
|
}
|
|
.tl-left.data-v-eca06f3c { width: 80rpx; text-align: right; padding-right: 20rpx; display: flex; flex-direction: column;
|
|
}
|
|
.tl-date.data-v-eca06f3c { font-size: 26rpx; font-weight: 600; color: #374151;
|
|
}
|
|
.tl-time.data-v-eca06f3c { font-size: 22rpx; color: #9CA3AF; margin-top: 4rpx;
|
|
}
|
|
.tl-line.data-v-eca06f3c { width: 40rpx; display: flex; flex-direction: column; align-items: center; position: relative;
|
|
}
|
|
.tl-dot.data-v-eca06f3c { width: 16rpx; height: 16rpx; border-radius: 50%; z-index: 2; margin-top: 10rpx;
|
|
}
|
|
.tl-dash.data-v-eca06f3c { width: 2rpx; flex: 1; background-color: #E5E7EB; margin-top: 8rpx;
|
|
}
|
|
.tl-right.data-v-eca06f3c { flex: 1; padding-left: 20rpx; padding-bottom: 40rpx;
|
|
}
|
|
.tl-title.data-v-eca06f3c { font-size: 28rpx; font-weight: 600; color: #1F2937;
|
|
}
|
|
.tl-desc.data-v-eca06f3c { font-size: 24rpx; color: #6B7280; margin-top: 8rpx;
|
|
}
|
|
|
|
/* 底部固定操作栏 */
|
|
.fixed-bottom.data-v-eca06f3c {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #FFFFFF;
|
|
display: flex;
|
|
gap: 24rpx;
|
|
padding: 20rpx 32rpx 50rpx 32rpx; /* 适配 iPhone X */
|
|
box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.05);
|
|
z-index: 999;
|
|
}
|
|
.action-btn.data-v-eca06f3c {
|
|
flex: 1;
|
|
height: 96rpx;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
border: none;
|
|
}
|
|
.btn-buy.data-v-eca06f3c { background-color: #064E3B; color: #FFFFFF; box-shadow: 0 8rpx 20rpx rgba(6, 78, 59, 0.2);
|
|
}
|
|
.btn-buy.data-v-eca06f3c:active { background-color: #047857;
|
|
}
|
|
.btn-sell.data-v-eca06f3c { background-color: #FFFFFF; color: #064E3B; border: 2rpx solid #064E3B;
|
|
}
|
|
.btn-sell.data-v-eca06f3c:active { background-color: #ECFDF5;
|
|
}
|