上传文件至 pages/detail

pages/detail/index.ux

@@ -1,10 +1,10 @@
 <template>
   <div class="page" @swipe="back" @click="nextDialogue">
     <image src="internal://files/{{Img}}"></image>
-      <image style="position: absolute;top: 300px;left: 0;" src="/common/text_bg.png" if="{{gameData.scenes[currentScene].choices == undefined && Img !== 'bg.png'}}"></image>
+      <image class="textbg" style="position: absolute;left: 0;" src="/common/text_bg.png" if="{{gameData.scenes[currentScene].choices == undefined && Img !== 'bg.png'}}"></image>
-      <text style="position: absolute;height: 50px;top: 250px;left: 8px;font-size: 28px;color: #FFFFFF;font-weight: bold" if="{{gameData.scenes[currentScene].choices == undefined && Img !== 'bg.png'}}">{{character}}</text>
+      <text class="characterpos" style="position: absolute;height: 50px;font-size: 28px;color: #FFFFFF;font-weight: bold" if="{{gameData.scenes[currentScene].choices == undefined && Img !== 'bg.png'}}">{{character}}</text>
       <scroll scroll-y="true" bounces="true" class="scroll" id="scroll" if="{{gameData.scenes[currentScene].choices == undefined && Img !== 'bg.png'}}">
-        <text style="color: #FFFFFF;font-weight: bold;width: 100%;text-align: left;font-size: {{settings.textSize}}px;">{{showText}}</text>
+        <text class="showtext" style="color: #FFFFFF;font-weight: bold;width: 100%;font-size: {{settings.textSize}}px;">{{showText}}</text>
       </scroll>
     <div class="page" style="background-color: #000000;" @click="nextDialogue">
       
@@ -362,18 +362,55 @@ export default {
   width: 390px;
   height: 450px;
 }
-.scroll{
+/* 圆表上生效 */
-  position: absolute;
+@media screen and (device: watch-round) {
-  bottom: 0;
+  .textbg {
-  top: 300px;
+    top: 245px;
-  left: 8px;
+  }
-  right: 8px;
+  .characterpos {
-  width: 390px;
+    top: 200px;
-  height: 155px;
+    left: 10px;
-  text-overflow: ellipsis;
+  }
-  flex-wrap: wrap;
+  .showtext {
+    text-align: center;
+  }
+  .scroll {
+    position: absolute;
+    bottom: 0;
+    top: 245px;
+    left: 40px;
+    right: 0;
+    width: 300px;
+    height: 155px;
+    text-overflow: ellipsis;
+    flex-wrap: wrap;
+  }
 }
-.scroll1{
+/* 方表上生效 */
+@media screen and (device: watch-square) {
+  .textbg {
+    top: 300px;
+  }
+  .characterpos {
+    top: 250px;
+    left: 8px;
+  }
+  .showtext {
+    text-align: left;
+  }
+  .scroll {
+    position: absolute;
+    bottom: 0;
+    top: 300px;
+    left: 8px;
+    right: 8px;
+    width: 390px;
+    height: 155px;
+    text-overflow: ellipsis;
+    flex-wrap: wrap;
+  }
+}
+.scroll1 {
   position: absolute;
   bottom: 0;
   top: 0;