feat: beautify action-detail (行) page with enhanced visual design

- Gradient backgrounds matching brand theme (#10B981 green)
- Enhanced shadows and depth with pseudo-elements
- Improved border-radius to 24rpx throughout
- Active state transforms (scale effects) on cards
- Better typography hierarchy with letter-spacing
- Enhanced dialog/popup styling with gradient headers
- func-grid with improved spacing and shadow
- Consistent green theme throughout following design system

cfc-frontend/pages/action-detail/index.vue

@@ -711,36 +711,62 @@ export default {
 <style scoped>
 .container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: linear-gradient(180deg, #F0FFF4 0%, #F5F7FA 40%);
   padding-bottom: 120rpx;
 }
 
 /* 品牌定位语 */
 .brand-strap {
-  margin: 16rpx 30rpx 0;
-  padding: 20rpx 28rpx;
-  background: linear-gradient(135deg, #F0FFF4, rgba(16,185,129,0.12));
-  border-radius: 16rpx;
-  border-left: 4rpx solid #10B981;
+  margin: 24rpx 30rpx 0;
+  padding: 28rpx 32rpx;
+  background: linear-gradient(135deg, #10B981 0%, #34D399 50%, #6EE7B7 100%);
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.25);
+  position: relative;
+  overflow: hidden;
+}
+.brand-strap::before {
+  content: '';
+  position: absolute;
+  top: -30rpx;
+  right: -30rpx;
+  width: 120rpx;
+  height: 120rpx;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 50%;
+}
+.brand-strap::after {
+  content: '';
+  position: absolute;
+  bottom: -20rpx;
+  left: 20rpx;
+  width: 60rpx;
+  height: 60rpx;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
 }
 .brand-strap-text {
-  font-size: 26rpx;
-  color: #065F46;
-  font-weight: 500;
+  font-size: 30rpx;
+  color: #FFFFFF;
+  font-weight: 600;
+  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 1;
 }
 
 /* 每月引导语 */
 .monthly-guidance {
-  margin: 16rpx 30rpx 0;
-  padding: 20rpx 28rpx;
-  background: linear-gradient(135deg, #F0FFF4, rgba(16,185,129,0.08));
-  border-radius: 16rpx;
-  border-left: 4rpx solid #10B981;
+  margin: 20rpx 30rpx 0;
+  padding: 24rpx 28rpx;
+  background: linear-gradient(135deg, #FFFFFF 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);
   display: flex;
   align-items: center;
   gap: 12rpx;
 }
-.guidance-icon { font-size: 32rpx; }
+.guidance-icon { font-size: 36rpx; }
 .guidance-text {
   font-size: 26rpx;
   color: #065F46;
@@ -749,7 +775,7 @@ export default {
 
 /* ===== 通用区块 ===== */
 .section {
-  margin: 20rpx 30rpx 0;
+  margin: 24rpx 30rpx 0;
 }
 .section-header {
   display: flex;
@@ -768,56 +794,91 @@ export default {
   width: 36rpx;
   height: 36rpx;
   border-radius: 50%;
-  border: 2rpx solid #CBD5E1;
-  color: #94A3B8;
+  border: 2rpx solid #D1D5DB;
+  color: #9CA3AF;
   font-size: 22rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: all 0.2s;
+  background: #FFFFFF;
 }
 .help-icon:active {
-  border-color: #F97316;
-  color: #F97316;
-  background: #FFF7ED;
+  border-color: #10B981;
+  color: #10B981;
+  background: #F0FFF4;
+  transform: scale(1.1);
 }
 .section-title {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #333;
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #1E293B;
+  letter-spacing: 0.5rpx;
 }
 .section-sub {
-  font-size: 22rpx;
-  color: #999;
+  font-size: 24rpx;
+  color: #94A3B8;
+  margin-top: 4rpx;
+  line-height: 1.4;
 }
 .section-link {
   display: inline-flex;
   align-items: center;
-  padding: 10rpx 28rpx;
+  padding: 12rpx 28rpx;
   border-radius: 40rpx;
   font-size: 24rpx;
   font-weight: 500;
   white-space: nowrap;
-  transition: opacity 0.2s;
+  transition: all 0.2s;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
 }
 .section-link:active {
-  opacity: 0.7;
+  opacity: 0.85;
+  transform: scale(0.98);
 }
 .section-link-octopus {
   background: linear-gradient(135deg, #F97316, #FB923C);
   color: #fff;
-  box-shadow: 0 4rpx 16rpx rgba(249,115,22,0.25);
+  box-shadow: 0 4rpx 16rpx rgba(249,115,22,0.3);
 }
 .section-link-pearl {
   background: linear-gradient(135deg, #0EA5E9, #38BDF8);
   color: #fff;
-  box-shadow: 0 4rpx 16rpx rgba(14,165,233,0.25);
+  box-shadow: 0 4rpx 16rpx rgba(14,165,233,0.3);
 }
 .section-link-ability {
   background: linear-gradient(135deg, #10B981, #34D399);
   color: #fff;
-  box-shadow: 0 4rpx 16rpx rgba(16,185,129,0.25);
+  box-shadow: 0 4rpx 16rpx rgba(16,185,129,0.3);
+}
+
+/* 关系解读卡片 */
+.score-explain-card {
+  background: linear-gradient(135deg, #FFFFFF 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);
+}
+.explain-header {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 12rpx;
+}
+.explain-icon {
+  font-size: 32rpx;
+}
+.explain-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #1E293B;
+}
+.explain-text {
+  font-size: 26rpx;
+  color: #64748B;
+  line-height: 1.7;
 }
 
 /* 帮助说明弹窗 */
@@ -827,76 +888,99 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 999;
 }
 .help-dialog {
-  background: #fff;
-  border-radius: 20rpx;
-  width: 90%;
-  max-width: 500rpx;
-  max-height: 80vh;
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  width: 85%;
+  max-width: 520rpx;
+  max-height: 75vh;
   overflow: hidden;
+  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
 }
 .help-dialog-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20rpx 24rpx;
-  border-bottom: 1rpx solid #E5E7EB;
+  padding: 28rpx 32rpx 20rpx;
+  border-bottom: 1rpx solid #F1F5F9;
+  background: linear-gradient(135deg, #F0FFF4, #FFFFFF);
 }
 .help-dialog-title {
   font-size: 32rpx;
-  font-weight: bold;
-  color: #333;
+  font-weight: 700;
+  color: #1E293B;
 }
 .help-dialog-close {
-  font-size: 32rpx;
+  font-size: 36rpx;
   color: #94A3B8;
   cursor: pointer;
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 0.2s;
+}
+.help-dialog-close:active {
+  background: #F1F5F9;
 }
 .help-dialog-content {
-  padding: 24rpx;
-  font-size: 26rpx;
-  color: #666;
-  line-height: 1.6;
+  padding: 28rpx 32rpx;
+  font-size: 28rpx;
+  color: #64748B;
+  line-height: 1.8;
 }
+
+/* 功能入口网格 */
 .func-section {
-  margin: 20rpx 30rpx 0;
+  margin: 24rpx 30rpx 0;
 }
 .func-grid {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 24rpx 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+  justify-content: space-around;
+  background: linear-gradient(135deg, #FFFFFF 0%, #F0FFF4 100%);
+  border-radius: 24rpx;
+  padding: 32rpx 16rpx;
+  box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.1);
+  border: 1rpx solid rgba(16, 185, 129, 0.08);
 }
 .func-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   flex: 1;
+  padding: 8rpx;
 }
 .func-icon-wrap {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 40rpx;
-  background: linear-gradient(135deg, #D1FAE5, #ECFDF5);
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 28rpx;
+  background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 10rpx;
+  margin-bottom: 12rpx;
+  box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.15);
+  transition: all 0.2s;
+}
+.func-item:active .func-icon-wrap {
+  transform: scale(0.95);
+  box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.2);
 }
 .func-icon {
-  font-size: 40rpx;
+  font-size: 44rpx;
 }
 .func-label {
-  font-size: 22rpx;
-  color: #666;
+  font-size: 24rpx;
+  color: #475569;
   font-weight: 500;
 }