From a26d2f7d6663e9241c23775c293b462aaf23ea8c Mon Sep 17 00:00:00 2001
From: chorblack <cjl1562818788@163.com>
Date: Sun, 27 Apr 2025 19:04:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B2=A1=E5=95=A5=E5=8F=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/Demo/index.ux | 259 ++++++++++++++++++++++----------------------
 1 file changed, 132 insertions(+), 127 deletions(-)

diff --git a/pages/Demo/index.ux b/pages/Demo/index.ux
index b0cb643..b7a23c9 100644
--- a/pages/Demo/index.ux
+++ b/pages/Demo/index.ux
@@ -19,7 +19,7 @@
     </div>
     <!-- 滑动键盘区域 -->
     <!-- 第一行 -->
-    <div class="keyboard-row-scroll" scroll-x="true">
+    <div class="keyboard-row-scroll">
         <div class="keyboard-row" for="{{row1Letters}}">
             <input 
                 type="button" 
@@ -32,25 +32,27 @@
     </div>
 
     <!-- 第二行 -->
-    <div class="keyboard-row-scroll" scroll-x="true">
+    <div class="keyboard-row-scroll">
       <div class="keyboard-row" for="{{row2Letters}}">
         <input 
             type="button" 
             class="input-button"
             value="{{$item}}"
             onclick="input($item)"
+            
         />
       </div>
     </div>
 
     <!-- 第三行 -->
-    <div class="keyboard-row-scroll" scroll-x="true">
+    <div class="keyboard-row-scroll">
       <div class="keyboard-row" for="{{row3Letters}}">
         <input 
             type="button" 
             class="input-button"
             value="{{$item}}"
             onclick="input($item)"
+            
         />
       </div>
     </div>
@@ -246,185 +248,188 @@ export default {
 
 <style>
 .container {
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 466px;
-    height: 100%;
-    background-color: #000000;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 466px;
+  height: 100%;
+  background-color: #000000;
 }
 .keyboard-row-scroll {
-    width: 466px;
-    height: 60px;
-    margin: 5px 0;
+  width: 466px;
+  height: 60px;
+  margin: 5px 0;
 }
 .keyboard-row {
-    flex-direction: row;
-    height: 60px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 466px; /* 固定总宽度 */
+  height: 60px;
+}
+.input-button {
+  width: 100%;
+  height: 60px;
+  margin: 0 3px;
+  font-size: 24px;
+  border-radius: 5px;
+  background-color: #444;
+  color: white;
 }
 .text-container {
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 320px;
-    height: 260px;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 320px;
+  height: 260px;
 }
 
 .text-content {
-    font-size: 30px;
-    text-align: left;
-    width: 322px;
-    height: 270px;
+  font-size: 30px;
+  text-align: left;
+  width: 322px;
+  height: 270px;
 }
 
 .candidate-word {
-    font-size: 30px;
-    text-align: center;
-    width: 100px;
-    height: 55px;
-    justify-content: center;
+  font-size: 30px;
+  text-align: center;
+  width: 100px;
+  height: 55px;
+  justify-content: center;
 }
 
 
-.input-button {
-    width: 70px;
-    height: 60px;
-    min-width: 60px;
-    margin: 0 3px;
-    font-size: 24px;
-    border-radius: 5px;
-    background-color: #444;
-    color: white;
-}
+
 .function-row {
-    flex-direction: row;
-    justify-content: space-between;
-    width: 466px;
-    margin-top: 10px;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 466px;
+  margin-top: 10px;
 }
 .mode-button {
-    width: 80px;
-    height: 60px;
-    background-color: #666;
-    border-radius: 30px;
+  width: 80px;
+  height: 60px;
+  background-color: #666;
+  border-radius: 30px;
 }
 
 .space-button {
-    margin: 0 5px;
-    height: 60px;
-    color: #f0f8ff;
-    background-color: #9f83fb;
-    border-radius: 25px; /* 新增圆角 */
+  margin: 0 5px;
+  height: 60px;
+  color: #f0f8ff;
+  background-color: #9f83fb;
+  border-radius: 25px; /* 新增圆角 */
 }
 .active-mode {
-    background-color: #2196F3;
-    color: white;
+  background-color: #2196F3;
+  color: white;
 }
 .backspace-button {
-    width: 80px;
-    height: 60px;
-    background-color: #f44336;
-    border-radius: 30px;
+  width: 80px;
+  height: 60px;
+  background-color: #f44336;
+  border-radius: 30px;
 }
 
 .func-button {
-    width: 90px;
-    height: 50px;
-    background-color: #323232;
-    margin: 0px 5px 0px 5px;
-    font-size: 30px;
-    border-radius: 15px; /* 新增圆角 */
-    color: #f0f8ff;
+  width: 90px;
+  height: 50px;
+  background-color: #323232;
+  margin: 0px 5px 0px 5px;
+  font-size: 30px;
+  border-radius: 15px; /* 新增圆角 */
+  color: #f0f8ff;
 }
 
 .pinyin-button {
-    width: 380px;
-    height: 40px;
-    background-color: rgb(65, 105, 225);
-    margin: 0px 5px 0px 5px;
-    font-size: 30px;
-    border-radius: 30px; /* 新增圆角 */
-    color: #f0f8ff;
+  width: 380px;
+  height: 40px;
+  background-color: rgb(65, 105, 225);
+  margin: 0px 5px 0px 5px;
+  font-size: 30px;
+  border-radius: 30px; /* 新增圆角 */
+  color: #f0f8ff;
 }
 
 .container-row {
-    flex-direction: row;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 454px;
-    height: 65px;
+  flex-direction: row;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 65px;
 }
 
 .container-row-candidate {
-    flex-direction: row;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 466px;
-    height: 65px;
+  flex-direction: row;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 466px;
+  height: 65px;
 }
 
 .container-col {
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 466px;
-    height: 100%;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 466px;
+  height: 100%;
 }
 
 .container-col-candidate {
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 454px;
-    height: 65px;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 65px;
 }
 
 .container-swiper {
-    left: 0px;
-    top: 0px;
-    width: 454px;
-    height: 500px;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 500px;
 }
 /* 新增候选词样式 */
 .candidate-word-button {
-    width: 55px;
-    height: 60px;
-    background-color: rgba(50,50,50,0.9);
-    margin: 5px;
-    border-radius: 10px;
-    font-size: 30px;
-    color: #fff;
+  width: 55px;
+  height: 60px;
+  background-color: rgba(50,50,50,0.9);
+  margin: 5px;
+  border-radius: 10px;
+  font-size: 30px;
+  color: #fff;
 }
 text {
-    color: #f0f8ff;
+  color: #f0f8ff;
 }
 .letters-display {
-    font-size: 20px;
-    height: 30px;
-    margin-bottom: 3px;
+  font-size: 20px;
+  height: 30px;
+  margin-bottom: 3px;
 }
 
 .words-preview {
-    font-size: 35px;
-    height: 50px;
-    margin-bottom: 15px;
+  font-size: 35px;
+  height: 50px;
+  margin-bottom: 15px;
 }
 </style>