'为你推荐游戏排行'

src/pages/gameOrder/gameOrder.vue

@@ -5,12 +5,14 @@
       <img :src="game.icon" alt="Game Icon" class="game-icon" />
       <!-- 游戏信息 -->
       <div class="game-info">
-        <div class="game-name">{{ game.name }}</div>
-        <div class="game-score">{{ game.score }}</div>
+        <div class="line1">
+          <div class="game-name">{{ game.name }}</div>
+          <div class="game-score">{{ game.score }}</div>
+        </div>
         <div class="game-description">{{ game.description }}</div>
       </div>
       <!-- 启动按钮 -->
-      <button @click="launchGame(game)" class="launch-btn">启动</button>
+      <button @click="launchGame(game)" class="launch-btn"></button>
     </div>
   </div>
 </template>
@@ -228,7 +230,7 @@ export default {
     },
   },
   onHide() {
-    console.log('2222')
+    console.log("2222");
     this.params.behavior = "closePage";
     this.params.data = "gameOrder";
     this.GameStatistics();
@@ -244,25 +246,25 @@ export default {
 .rankings {
   display: flex;
   flex-direction: column;
-  padding: 20rpx;
+  padding: 20rpx 50rpx;
 }
 
 .ranking-item {
   display: flex;
   align-items: center;
-  margin-bottom: 30rpx;
-  padding: 20rpx;
-  border: 1rpx solid #ddd;
-  border-radius: 16rpx;
-  background-color: #f9f9f9;
+  height: 184rpx;
 }
 
 .game-icon {
-  width: 100rpx;
-  height: 100rpx;
-  margin-right: 30rpx;
+  width: 126rpx;
+  height: 126rpx;
+  margin-right: 23rpx;
+  border-radius: 50%;
+}
+.line1 {
+  display: inline-flex;
+  margin-top: 14rpx;
 }
-
 .game-info {
   display: flex;
   flex-direction: column;
@@ -270,38 +272,43 @@ export default {
 }
 
 .game-name {
+  align-self: center;
+  font-weight: 500;
   font-size: 32rpx;
-  font-weight: bold;
-  line-height: 40rpx;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 45rpx;
 }
 
 .game-score {
-  color: #888;
-  margin-top: 10rpx;
-  line-height: 40rpx;
-  font-size: 26rpx;
+  align-self: center;
+  width: 61rpx;
+  height: 32rpx;
+  line-height: 32rpx;
+  text-align: center;
+  background: #f7f7f7;
+  border-radius: 4rpx;
+  font-weight: 400;
+  font-size: 20rpx;
+  color: rgba(0, 0, 0, 0.35);
+  margin-left: 12rpx;
 }
 
 .game-description {
-  color: #777;
-  font-size: 28rpx;
-  margin-top: 10rpx;
-  line-height: 40rpx;
+  margin-top: 16rpx;
+  font-weight: 400;
+  font-size: 22rpx;
+  color: rgba(0, 0, 0, 0.35);
+  line-height: 30rpx;
 }
 
 .launch-btn {
-  padding: 16rpx 32rpx;
-  margin-left: 30rpx;
-  font-size: 26rpx;
-  line-height: 40rpx;
-  background-color: #4caf50;
-  color: white;
-  border: none;
-  border-radius: 10rpx;
-  white-space: nowrap;
+  width: 110rpx;
+  height: 56rpx;
+  background-image: url("https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/gameOrder/playgame.png");
+  background-repeat: no-repeat;
+  background-size: cover;
 }
-
-.launch-btn:hover {
-  background-color: #45a049;
+.launch-btn::after {
+  border: 0;
 }
 </style>