feat: 样式调整

src/pages/charts/index.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="exam-ranking">
-		<image src="@/static/images/charts/bg-top.png" mode="aspectFit" class="bg-box"></image>
+		<!-- <image src="@/static/images/charts/bg-top.png" mode="aspectFit" class="bg-box"></image> -->
+		<view class="bg-box"></view>
 		<view class="ranking-box">
 
 			<view class="nav-div">
@@ -10,9 +11,9 @@
 			</view>
 			<view class="title-view">
 				<!-- <view class="title-info">考试排行榜</view> -->
-				<!-- <image class="title-image" src="@/static/images/examRanking/title.png" mode="aspectFit"></image> -->
+				<image class="title-image" src="@/static/images/charts/text.png" mode="aspectFit"></image>
 				<!-- <view class="title-desc">吾日三省吾身，传不习乎？</view> -->
-				<!-- <image class="cup-image" src="@/static/images/examRanking/cup.png" mode="aspectFit"></image> -->
+				<image class="cup-image" src="@/static/images/charts/cup.png" mode="aspectFit"></image>
 
 			</view>
 			<view class="ranking-body">
@@ -252,7 +253,8 @@
 			top: 0;
 			left: 0;
 			width: 100vw;
-			height: 289rpx;
+			height: 400rpx;
+			background: linear-gradient(0deg , #F8F8FA 0%, #6DA7FF 100%);
 			z-index: 1;
 		}
 
@@ -306,15 +308,15 @@
 		.title-view {
 			height: 180rpx;
 			position: relative;
-			padding-left: 79rpx;
 			padding-top: 20rpx;
 
 			.cup-image {
 				position: absolute;
-				right: 90rpx;
-				bottom: 0;
-				width: 178rpx;
-				height: 159rpx;
+				right: 46rpx;
+				bottom: -33rpx;
+				width: 208rpx;
+				height: 208rpx;
+				z-index: 0;
 			}
 
 			.title-desc {
@@ -324,8 +326,11 @@
 			}
 
 			.title-image {
-				width: 308rpx;
-				height: 88rpx;
+				width: 230rpx;
+				height: 111rpx;
+				position: absolute;
+				bottom: 20rpx;
+				left: 46rpx;
 			}
 		}
 
@@ -336,6 +341,8 @@
 			border-radius: 31rpx 31rpx 0 0;
 			padding-top: 20rpx;
 			box-sizing: border-box;
+			position: relative;
+			z-index: 2;
 			.scroll-items-view{
 				height: calc(100% - 308rpx);
 			}