新手试炼页面完善

src/components/Swiper.vue

@@ -52,8 +52,10 @@ const handleChange = (e) => {
 .swiper-container {
   width: calc(100% - 20px);
   margin: 10px;
-  height: 440px;
+  height: 560px;
   position: relative;
+  border-radius: 10px;
+  overflow: hidden;
 }
 
 .swiper-container > swiper {
@@ -67,7 +69,7 @@ const handleChange = (e) => {
 
 .dots {
   position: absolute;
-  bottom: 27%;
+  bottom: 12%;
   left: 50%;
   transform: translateX(-50%);
   display: flex;

src/pages/first-try.vue

@@ -59,29 +59,51 @@ const onClose = () => {
         >这是我们人帅技高的高教练。首先，请按教练示范，尝试自己去做这些动作和手势吧。</text
       >
       <view v-if="step === 2">
-        <text :style="{ color: '#fed847' }">你知道5米射程有多远吗？</text>
-        <text>
-          在我们的排位赛中，射程小于5米的成绩无效、哦！建议平时练习距离至少5米。现在，来边射箭边调整你的站位点吧！
-        </text>
+        <view :style="{ display: 'flex', flexDirection: 'column' }">
+          <text :style="{ color: '#fed847' }">你知道5米射程有多远吗？</text>
+          <text>
+            在我们的排位赛中，射程小于5米的成绩无效、哦！建议平时练习距离至少5米。现在，来边射箭边调整你的站位点吧！
+          </text>
+        </view>
       </view>
       <view v-if="step === 3">
-        <text :style="{ color: '#fed847' }">一切准备就绪</text>
-        <text>试着完成一个真正的弓箭手任务吧！</text>
+        <view :style="{ display: 'flex', flexDirection: 'column' }">
+          <text :style="{ color: '#fed847' }">一切准备就绪</text>
+          <text>试着完成一个真正的弓箭手任务吧！</text>
+        </view>
       </view>
       <view v-if="step === 5">
-        <text :style="{ color: '#fed847' }">新手试炼场通关啦，优秀！</text>
-        <text
-          >反曲弓运动基本知识和射灵世界系统规则你已Get，是不是挺容易呀：）</text
+        <view
+          :style="{ display: 'flex', flexDirection: 'column', marginTop: 20 }"
         >
+          <text :style="{ color: '#fed847' }">新手试炼场通关啦，优秀！</text>
+          <text
+            >反曲弓运动基本知识和射灵世界系统规则你已Get，是不是挺容易呀：）</text
+          >
+          <!-- 这行是占位用的 -->
+          <text :style="{ opacity: 0 }">新手试炼场通关啦，优秀！</text>
+        </view>
       </view>
     </Guide>
     <image
       src="../static/first-try-tip.png"
       class="try-tip"
       mode="widthFix"
-      v-if="step === 0 || step === 5"
+      v-if="step === 0"
     />
-    <view style="height: 450px" v-if="step === 1">
+    <image
+      src="../static/first-try-tip2.png"
+      class="try-tip"
+      mode="widthFix"
+      v-if="step === 3"
+    />
+    <image
+      src="../static/first-try-tip3.png"
+      class="try-tip"
+      mode="widthFix"
+      v-if="step === 5"
+    />
+    <view style="height: 570px" v-if="step === 1">
       <Swiper
         :data="[
           '../static/first-try-tip.png',
@@ -106,12 +128,6 @@ const onClose = () => {
       v-if="step === 4"
       :onClose="onClose"
     />
-    <image
-      src="../static/first-try-tip.png"
-      class="try-tip"
-      mode="widthFix"
-      v-if="step === 3"
-    />
     <SButton v-if="step !== 4" :onClick="nextStep">{{
       stepButtonTexts[step]
     }}</SButton>

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>