|
|
@@ -842,10 +842,10 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
.container {
|
|
|
min-height: 100vh;
|
|
|
- background: linear-gradient(180deg, #F0FFF4 0%, #F5F7FA 40%);
|
|
|
+ background: linear-gradient(180deg, #F0FFF4 0%, $app-bg 40%);
|
|
|
padding-bottom: 120rpx;
|
|
|
}
|
|
|
|
|
|
@@ -853,7 +853,7 @@ export default {
|
|
|
.brand-strap {
|
|
|
margin: 24rpx 30rpx 0;
|
|
|
padding: 28rpx 32rpx;
|
|
|
- background: linear-gradient(135deg, #10B981 0%, #34D399 50%, #6EE7B7 100%);
|
|
|
+ background: linear-gradient(135deg, $dim-action 0%, #34D399 50%, #6EE7B7 100%);
|
|
|
border-radius: 24rpx;
|
|
|
box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.25);
|
|
|
position: relative;
|
|
|
@@ -881,7 +881,7 @@ export default {
|
|
|
}
|
|
|
.brand-strap-text {
|
|
|
font-size: 30rpx;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: $app-surface;
|
|
|
font-weight: 600;
|
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
|
|
position: relative;
|
|
|
@@ -892,7 +892,7 @@ export default {
|
|
|
.monthly-guidance {
|
|
|
margin: 20rpx 30rpx 0;
|
|
|
padding: 24rpx 28rpx;
|
|
|
- background: linear-gradient(135deg, #FFFFFF 0%, #F0FFF4 100%);
|
|
|
+ background: linear-gradient(135deg, $app-surface 0%, #F0FFF4 100%);
|
|
|
border-radius: 20rpx;
|
|
|
border: 1rpx solid rgba(16, 185, 129, 0.15);
|
|
|
box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.08);
|
|
|
@@ -920,7 +920,7 @@ export default {
|
|
|
right: 24rpx;
|
|
|
height: 3rpx;
|
|
|
border-radius: 3rpx 3rpx 0 0;
|
|
|
- background: linear-gradient(90deg, #10B981, #34D399);
|
|
|
+ background: linear-gradient(90deg, $dim-action, #34D399);
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
.section-header {
|
|
|
@@ -935,7 +935,7 @@ export default {
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
gap: 8rpx;
|
|
|
- border-left: 8rpx solid #10B981;
|
|
|
+ border-left: 8rpx solid $dim-action;
|
|
|
padding-left: 16rpx;
|
|
|
}
|
|
|
.help-icon {
|
|
|
@@ -949,12 +949,12 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
flex-shrink: 0;
|
|
|
- transition: all 0.2s;
|
|
|
- background: #FFFFFF;
|
|
|
+ transition: opacity 0.2s $ease-standard, transform 0.2s $ease-standard;
|
|
|
+ background: $app-surface;
|
|
|
}
|
|
|
.help-icon:active {
|
|
|
- border-color: #10B981;
|
|
|
- color: #10B981;
|
|
|
+ border-color: $dim-action;
|
|
|
+ color: $dim-action;
|
|
|
background: #F0FFF4;
|
|
|
transform: scale(1.1);
|
|
|
}
|
|
|
@@ -978,7 +978,7 @@ export default {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 500;
|
|
|
white-space: nowrap;
|
|
|
- transition: all 0.2s;
|
|
|
+ transition: opacity 0.2s $ease-standard, transform 0.2s $ease-standard;
|
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
.section-link:active {
|
|
|
@@ -996,31 +996,31 @@ export default {
|
|
|
box-shadow: 0 4rpx 16rpx rgba(14,165,233,0.3);
|
|
|
}
|
|
|
.section-link-ability {
|
|
|
- background: linear-gradient(135deg, #10B981, #34D399);
|
|
|
+ background: linear-gradient(135deg, $dim-action, #34D399);
|
|
|
color: #fff;
|
|
|
box-shadow: 0 4rpx 16rpx rgba(16,185,129,0.3);
|
|
|
}
|
|
|
|
|
|
/* 关系解读卡片 — 状态色 */
|
|
|
.score-explain-card {
|
|
|
- background: linear-gradient(135deg, #FFFFFF 0%, #F0FFF4 100%);
|
|
|
+ background: linear-gradient(135deg, $app-surface 0%, #F0FFF4 100%);
|
|
|
border-radius: 20rpx;
|
|
|
padding: 28rpx 32rpx;
|
|
|
border: 1rpx solid rgba(16, 185, 129, 0.12);
|
|
|
box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.08);
|
|
|
}
|
|
|
.score-explain-good {
|
|
|
- background: linear-gradient(135deg, #FFFFFF 0%, #D1FAE5 100%);
|
|
|
+ background: linear-gradient(135deg, $app-surface 0%, #D1FAE5 100%);
|
|
|
border-color: rgba(16, 185, 129, 0.25);
|
|
|
box-shadow: 0 4rpx 20rpx rgba(16, 185, 129, 0.15);
|
|
|
}
|
|
|
.score-explain-warn {
|
|
|
- background: linear-gradient(135deg, #FFFFFF 0%, #FEF3C7 100%);
|
|
|
+ background: linear-gradient(135deg, $app-surface 0%, #FEF3C7 100%);
|
|
|
border-color: rgba(245, 158, 11, 0.25);
|
|
|
box-shadow: 0 4rpx 20rpx rgba(245, 158, 11, 0.12);
|
|
|
}
|
|
|
.score-explain-bad {
|
|
|
- background: linear-gradient(135deg, #FFFFFF 0%, #FEE2E2 100%);
|
|
|
+ background: linear-gradient(135deg, $app-surface 0%, #FEE2E2 100%);
|
|
|
border-color: rgba(239, 68, 68, 0.25);
|
|
|
box-shadow: 0 4rpx 20rpx rgba(239, 68, 68, 0.12);
|
|
|
}
|
|
|
@@ -1042,12 +1042,12 @@ export default {
|
|
|
transition: transform 0.2s;
|
|
|
}
|
|
|
.explain-icon-wrap:active { transform: scale(0.95); }
|
|
|
-.explain-icon-good { background: linear-gradient(135deg, #10B981, #34D399); box-shadow: 0 4rpx 12rpx rgba(16,185,129,0.3); }
|
|
|
+.explain-icon-good { background: linear-gradient(135deg, $dim-action, #34D399); box-shadow: 0 4rpx 12rpx rgba(16,185,129,0.3); }
|
|
|
.explain-icon-warn { background: linear-gradient(135deg, #F59E0B, #FBBF24); box-shadow: 0 4rpx 12rpx rgba(245,158,11,0.3); }
|
|
|
.explain-icon-bad { background: linear-gradient(135deg, #EF4444, #F87171); box-shadow: 0 4rpx 12rpx rgba(239,68,68,0.3); }
|
|
|
.explain-icon {
|
|
|
font-size: 28rpx;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: $app-surface;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
.explain-info {
|
|
|
@@ -1066,7 +1066,7 @@ export default {
|
|
|
line-height: 1;
|
|
|
letter-spacing: -2rpx;
|
|
|
}
|
|
|
-.score-explain-good .explain-score { color: #10B981; }
|
|
|
+.score-explain-good .explain-score { color: $dim-action; }
|
|
|
.score-explain-warn .explain-score { color: #D97706; }
|
|
|
.score-explain-bad .explain-score { color: #DC2626; }
|
|
|
.explain-score-unit {
|
|
|
@@ -1096,7 +1096,7 @@ export default {
|
|
|
z-index: 999;
|
|
|
}
|
|
|
.help-dialog {
|
|
|
- background: #FFFFFF;
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 24rpx;
|
|
|
width: 85%;
|
|
|
max-width: 520rpx;
|
|
|
@@ -1110,7 +1110,7 @@ export default {
|
|
|
align-items: center;
|
|
|
padding: 28rpx 32rpx 20rpx;
|
|
|
border-bottom: 1rpx solid #F1F5F9;
|
|
|
- background: linear-gradient(135deg, #F0FFF4, #FFFFFF);
|
|
|
+ background: linear-gradient(135deg, #F0FFF4, $app-surface);
|
|
|
}
|
|
|
.help-dialog-title {
|
|
|
font-size: 32rpx;
|
|
|
@@ -1147,7 +1147,7 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: space-around;
|
|
|
- background: linear-gradient(135deg, #FFFFFF 0%, #F0FFF4 100%);
|
|
|
+ background: linear-gradient(135deg, $app-surface 0%, #F0FFF4 100%);
|
|
|
border-radius: 24rpx;
|
|
|
padding: 32rpx 16rpx;
|
|
|
box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.1);
|
|
|
@@ -1170,7 +1170,7 @@ export default {
|
|
|
justify-content: center;
|
|
|
margin-bottom: 12rpx;
|
|
|
box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.15);
|
|
|
- transition: all 0.2s;
|
|
|
+ transition: opacity 0.2s $ease-standard, transform 0.2s $ease-standard;
|
|
|
}
|
|
|
.func-item:active .func-icon-wrap {
|
|
|
transform: scale(0.95);
|
|
|
@@ -1200,7 +1200,7 @@ export default {
|
|
|
}
|
|
|
.portrait-tier {
|
|
|
font-size: 26rpx;
|
|
|
- color: #10B981;
|
|
|
+ color: $dim-action;
|
|
|
font-weight: bold;
|
|
|
margin-left: 16rpx;
|
|
|
}
|
|
|
@@ -1243,7 +1243,7 @@ export default {
|
|
|
.portrait-dim-score {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #10B981;
|
|
|
+ color: $dim-action;
|
|
|
margin-right: 12rpx;
|
|
|
}
|
|
|
.portrait-dim-bar-track {
|
|
|
@@ -1268,7 +1268,7 @@ export default {
|
|
|
padding: 16rpx 20rpx;
|
|
|
background: linear-gradient(135deg, #F0FFF4, #E6FFF2);
|
|
|
border-radius: 12rpx;
|
|
|
- border-left: 8rpx solid #10B981;
|
|
|
+ border-left: 8rpx solid $dim-action;
|
|
|
margin-top: 16rpx;
|
|
|
}
|
|
|
.portrait-tip-text {
|