optimize: avatar page share reward

pages/avatar/detail.vue

@@ -117,7 +117,8 @@
 import { ref, onMounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import { getBavBarHeight } from "@/utils/system";
-import { getAvatarFrameList, getPageDetail } from "@/api/avatar.js";
+import { getAvatarFrameList } from "@/api/avatar.js";
+import { getPageDetail } from "@/api/system.js";
 
 const defaultAvatar =
   "https://file.lihailezzc.com/resource/d9b329082b32f8305101f708593a4882.png";
@@ -234,7 +235,7 @@ const goToWallpaper = () => {
 <style lang="scss" scoped>
 .avatar-detail-page {
   min-height: 100vh;
-  background: #fff0f5; /* Light Pink Background */
+  background: #ffffff;
   box-sizing: border-box;
 }
 
@@ -245,7 +246,7 @@ const goToWallpaper = () => {
   right: 0;
   z-index: 100;
   box-sizing: border-box;
-  background: #fff0f5;
+  background: #ffffff;
 }
 
 .nav-content {
@@ -271,9 +272,6 @@ const goToWallpaper = () => {
   margin-right: 50rpx; /* Balance back button */
 }
 
-.content-scroll {
-}
-
 .content-wrap {
   padding: 30rpx 40rpx 60rpx;
 }
@@ -326,16 +324,17 @@ const goToWallpaper = () => {
 
 /* Main Card */
 .main-card {
-  background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
+  background: #ffffff;
   border-radius: 40rpx;
   padding: 24rpx;
-  box-shadow: 0 20rpx 60rpx rgba(255, 59, 48, 0.15);
+  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.06);
   margin-bottom: 60rpx;
+  border: 2rpx solid #f5f5f5;
 }
 
 .card-inner {
   position: relative;
-  background: #fffaf0;
+  background: #fff9f9;
   border-radius: 30rpx;
   padding: 60rpx;
   display: flex;
@@ -348,7 +347,7 @@ const goToWallpaper = () => {
   height: 400rpx;
   border-radius: 20rpx;
   box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
-  border: 8rpx solid #d63333;
+  border: 8rpx solid #ff3b30;
 }
 
 .loading-box {
@@ -358,7 +357,7 @@ const goToWallpaper = () => {
   align-items: center;
   justify-content: center;
   color: #999;
-  background: #eee;
+  background: #f0f0f0;
   border-radius: 20rpx;
 }
 
@@ -381,14 +380,14 @@ const goToWallpaper = () => {
 .card-footer-text {
   margin-top: 40rpx;
   font-size: 28rpx;
-  color: #d63333;
+  color: #ff3b30;
   font-weight: bold;
   display: flex;
   align-items: center;
   background: #fff;
   padding: 10rpx 30rpx;
   border-radius: 99rpx;
-  box-shadow: 0 4rpx 10rpx rgba(214, 51, 51, 0.1);
+  box-shadow: 0 4rpx 10rpx rgba(255, 59, 48, 0.1);
 }
 
 .card-footer-text .icon {
@@ -423,8 +422,8 @@ const goToWallpaper = () => {
 }
 
 .secondary-btn {
-  background: #eaeaea;
-  color: #666;
+  background: #f5f5f5;
+  color: #333;
 }
 
 .btn .icon {
@@ -478,10 +477,9 @@ const goToWallpaper = () => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: #fff;
+  background: #f8f8f8;
   border-radius: 24rpx;
   padding: 20rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
 }
 
 .frame-img-box {
@@ -490,7 +488,7 @@ const goToWallpaper = () => {
   margin-bottom: 16rpx;
   border-radius: 50%;
   overflow: hidden;
-  background: #f9f9f9;
+  background: #fff;
 }
 
 .frame-img {
@@ -506,19 +504,18 @@ const goToWallpaper = () => {
 
 /* Wallpaper Banner */
 .wallpaper-banner {
-  background: #fff;
+  background: #f8f8f8;
   border-radius: 24rpx;
   padding: 30rpx;
   display: flex;
   align-items: center;
   margin-bottom: 60rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
 }
 
 .banner-icon {
   width: 80rpx;
   height: 80rpx;
-  background: #fff0f5;
+  background: #fff;
   border-radius: 20rpx;
   display: flex;
   align-items: center;
@@ -569,18 +566,18 @@ const goToWallpaper = () => {
 .footer-line .line {
   width: 60rpx;
   height: 2rpx;
-  background: #ccc;
+  background: #eee;
 }
 
 .footer-line .text {
   font-size: 20rpx;
-  color: #999;
+  color: #ccc;
   margin: 0 20rpx;
   letter-spacing: 2rpx;
 }
 
 .footer-sub {
   font-size: 20rpx;
-  color: #ccc;
+  color: #ddd;
 }
 </style>