UI修改

src/pages/my-device.vue

@@ -97,29 +97,32 @@ const backToHome = () => {
 <template>
   <Container title="弓箭绑定">
     <view v-if="!device.deviceId" class="scan-code">
-      <view @click="handleScan">
+      <button hover-class="none" @click="handleScan">
         <image src="../static/scan.png" mode="widthFix" />
-        <text>扫码绑定弓箭</text>
+      </button>
-      </view>
+      <button hover-class="none" @click="showTip = true">
-      <view>
+        <text>扫</text>
-        <view @click="() => (showTip = true)">找不到我的弓箭？</view>
+        <text :style="{ color: '#fed847' }">射灵弓箭</text>
-        <view @click="toDeviceIntroPage">我还没有弓箭</view>
+        <text>上的二维码</text>
-      </view>
+        <image src="../static/s-question-mark-white.png" mode="widthFix" />
+      </button>
+      <text>射灵智能弓箭，三模传感系统与独创靶环算法，</text>
+      <text>毫秒级在线实时对战，让你拥有全球约战的乐趣！</text>
+      <button hover-class="none" @click="toDeviceIntroPage">
+        <image src="../static/have-no-device.png" mode="widthFix" />
+      </button>
       <ScreenHint
         mode="square"
         :show="showTip"
         :onClose="() => (showTip = false)"
       >
         <view class="scan-tips">
-          <text>找不到我的弓箭 </text>
+          <text>扫码绑定设灵弓箭</text>
-          <text>1.确认弓箭是智能弓箭 </text>
-          <text>2.确认弓箭有电且电源已开启 </text>
-          <text>3.进入弓箭绑定功能，扫描弓箭上的二维码 </text>
           <image
             src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuacrelri7jr3axiy.png"
             mode="widthFix"
           />
-          <text>4.连接成功后</text>
+          <text>【注】已被绑定的弓箭无法再次绑定。</text>
           <view>联系在线客服</view>
         </view>
       </ScreenHint>
@@ -202,40 +205,53 @@ const backToHome = () => {
   width: 100%;
   height: 100%;
 }
-.scan-code > view:first-child {
+.scan-code {
+  justify-content: flex-start;
+}
+.scan-code > button:first-child {
+  margin-top: 22%;
+}
+.scan-code > button:first-child > image {
+  width: 300rpx;
+}
+.scan-code > button:nth-child(2) {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  width: 40%;
+  justify-content: center;
-  color: #fff;
+  font-size: 26rpx;
-  font-size: 14px;
+  color: #ffffff;
-  margin: 35% 0;
+  margin: 50rpx;
 }
-.scan-code > view:first-child > image {
+.scan-code > button:nth-child(2) > image {
-  width: 100%;
+  width: 28rpx;
-  margin-bottom: 20px;
+  margin-left: 10rpx;
 }
-.scan-code > view:nth-child(2) {
+.scan-code > text {
-  display: flex;
+  font-size: 24rpx;
-  flex-direction: column;
+  color: #fff9;
-  align-items: center;
 }
-.scan-code > view:nth-child(2) > view {
+.scan-code > button:nth-child(5) {
-  color: #39a8ff;
+  margin-top: 25%;
-  font-size: 14px;
+}
-  margin: 10px;
+.scan-code > button:nth-child(5) > image {
+  width: 380rpx;
 }
 .scan-tips {
   display: flex;
   flex-direction: column;
   font-size: 14px;
+  width: 90%;
+  margin-top: 20%;
 }
 .scan-tips > text {
   margin-bottom: 2px;
+  color: #fff;
+  font-size: 24rpx;
 }
 .scan-tips > text:first-child {
   color: #fed847;
   margin-bottom: 10px;
+  font-size: 32rpx;
 }
 .scan-tips > view:last-child {
   color: #39a8ff;