完成新手试炼页面

src/components/Guide.vue

@@ -37,6 +37,6 @@ defineProps({
 }
 .container > view > text {
   color: #fff;
-  font-size: 14px;
+  font-size: 13px;
 }
 </style>

src/pages/first-try.vue

@@ -1,28 +1,32 @@
 <script setup>
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
+import Guide from "@/components/Guide.vue";
 </script>
 
 <template>
   <view>
     <AppBackground />
     <Header title="新手试炼场" />
+    <Guide
+      title="hi，Rocker，这是新人必刷小任务，0基础小白也能快速掌握弓箭技巧和游戏规则哦~：）"
+    />
+    <image src="../static/first-try-tip.png" class="try-tip" mode="widthFix" />
+    <button class="start-btn">开始</button>
   </view>
 </template>
 
 <style scoped>
-.back-btn {
+.try-tip {
-  position: fixed;
+  width: calc(100% - 20px);
-  top: 2rem;
+  margin: 10px 10px;
-  left: 2rem;
-  padding: 0.5rem 1rem;
-  background-color: #007aff;
-  color: #fff;
-  border-radius: 5px;
-  font-size: 14px;
 }
-
+.start-btn {
-.back-hover {
+  margin: 0 10px;
-  opacity: 0.8;
+  width: calc(100% - 20px);
+  background-color: #fed847;
+  font-size: 15px;
+  padding: 3px;
+  border-radius: 10px;
 }
 </style>