新增手机端暂时适配的样式

syhy0612 · Aug 18, 2024 · 4cd19c9 · 4cd19c9
1 parent e120095
commit 4cd19c9
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -127,9 +127,7 @@
 
 - 在Issues中分享您的想法或建议，无论大小。
 - 如果您做了什么有趣的改进，也欢迎在Issues里告诉大家。
-
-您的每一个反馈都可能成为这个小工具进步的契机，我会非常感激。
-
+1·
 ## 反馈与交流
 
 如果您在使用过程中有任何问题、建议或想法，欢迎提Issue交流。

diff --git a/src/components/board.vue b/src/components/board.vue
@@ -75,7 +75,7 @@
         </div>
       </div>
     </div>
-    <el-button type="primary" @click="debug">调试</el-button>
+    <!--    <el-button type="primary" @click="debug">调试</el-button>-->
   </div>
 </template>
 
@@ -242,4 +242,82 @@ $noteWidth: 700px;
     flex-grow: 1;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .outBox {
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  .note {
+    width: 100%;
+    margin: 0 auto 20px;
+  }
+
+  .players-container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .players-column {
+    width: 49%; /* 略微小于50%以确保两列之间有一点间隔 */
+  }
+
+  .player-item {
+    margin-bottom: 10px;
+  }
+
+  .messageInfo {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .messageInfo-left {
+    width: 40px; /* 保持固定宽度以确保一致性 */
+    margin-right: 5px;
+  }
+
+  .messageInfo-left img {
+    width: 20px;
+    height: 20px;
+  }
+
+  .player-number {
+    font-size: 12px;
+  }
+
+  .messageInfo-right {
+    flex-grow: 1;
+    width: calc(100% - 45px); /* 减去左侧宽度和间距 */
+  }
+
+  .note h2 {
+    font-size: 16px;
+    padding: 8px;
+    margin-bottom: 10px;
+  }
+
+  .note-textarea {
+    width: 100%;
+  }
+
+  :deep(.el-textarea__inner) {
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 14px;
+    padding: 5px;
+  }
+
+  /* 确保 RoleSelector 组件在移动设备上也能正确显示 */
+  .messageInfo-left .el-select {
+    width: 100%;
+  }
+
+  .messageInfo-left .el-select .el-input__inner {
+    padding: 0 5px;
+    font-size: 12px;
+  }
+}
 </style>
diff --git a/src/components/nav.vue b/src/components/nav.vue
diff --git a/src/views/home.vue b/src/views/home.vue
@@ -1,17 +1,15 @@
 <template>
-  <div class="container">
-    <div class="bgColor">
-      <div class="title">这是标题</div>
-      <router-link to="/board">
-        <el-button color="#6633cc">开始使用</el-button>
-      </router-link>
-      <router-link to="/test">
-        <el-button color="#6633cc" class="btnOld">测试组件</el-button>
-      </router-link>
-      <router-link to="/add">
-        <el-button color="#6633cc" class="btnOld">测试组合</el-button>
-      </router-link>
-    </div>
+  <div class="bgColor">
+    <div class="title">在线笔记</div>
+    <router-link to="/board">
+      <el-button color="#6633cc">开始使用</el-button>
+    </router-link>
+    <router-link to="/test">
+      <el-button color="#6633cc" class="btnOld">beta1</el-button>
+    </router-link>
+    <router-link to="/add">
+      <el-button color="#6633cc" class="btnOld">beta2</el-button>
+    </router-link>
   </div>
 </template>
 
@@ -33,6 +31,10 @@
 .btnOld {
   margin-top: 20px;
 }
+
+.bgColor {
+  text-align: center;
+}
 </style>
 
 <style lang="scss">
@@ -43,12 +45,5 @@
   flex-direction: column;
   flex: 1;
   background-color: #20240427;
-  //text-align: center;
-}
-</style>
-
-<style lang="scss" scoped>
-.bgColor {
-  text-align: center;
 }
 </style>