新手试炼页面完善

src/pages/practise.vue

@@ -21,25 +21,48 @@ const toPractiseTwo = () => {
     <AppBackground />
     <Header title="个人练习" />
     <Guide>
-      <text :style="{ color: '#fed847' }">师傅领进门，修行靠自身，赶紧练起来吧。</text
+      <text :style="{ color: '#fed847' }"
+        >师傅领进门，修行靠自身，赶紧练起来吧。</text
+      >
+      <text :style="{ fontSize: '12px' }"
+        >坚持练习就能你快速升级，早日加入全国排位赛！</text
       >
-      <text :style="{ fontSize: '12px' }">坚持练习就能你快速升级，早日加入全国排位赛！</text>
     </Guide>
-    <view class="practise1" @click="toPractiseOne">
+    <image
+      src="../static/practise-bg.png"
+      class="practise-bg"
+      mode="widthFix"
+      :style="{ marginTop: 0 }"
+    />
+    <view class="practise-btn" @click="toPractiseOne">
       <image src="../static/practise1.png" class="practise1" mode="widthFix" />
     </view>
-    <view class="practise2" @click="toPractiseTwo">
+    <image
+      src="../static/practise-bg.png"
+      class="practise-bg"
+      mode="widthFix"
+    />
+    <view class="practise-btn" @click="toPractiseTwo">
       <image src="../static/practise2.png" class="practise2" mode="widthFix" />
     </view>
+    <image
+      src="../static/practise-bg.png"
+      class="practise-bg"
+      mode="widthFix"
+    />
   </view>
 </template>
 
 <style scoped>
-.practise1 {
+.practise-btn {
   width: 100%;
-  margin: 20px 0;
+  margin-top: -6px;
 }
-.practise2 {
+.practise-btn > image {
   width: 100%;
 }
+.practise-bg {
+  width: 100%;
+  margin-top: -6px;
+}
 </style>