style: change image uploader style

Author: iFwu

src/components/BoardResult.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="section">
-    <h2>分析结果</h2>
+    <h2>棋盘识别结果</h2>
     <div
       class="image-container"
       :style="{
@@ -11,7 +11,7 @@
       <img
         v-if="overlayImageSrc"
         :src="overlayImageSrc"
-        alt="分析结果"
+        alt="棋盘识别结果"
         class="overlay-image"
         :style="{
           left: `${leftOffset}px`,

src/components/ImageUploader.vue

@@ -1,12 +1,12 @@
 <template>
-  <section class="section">
+  <section class="upload-container">
     <h2>上传图片</h2>
     <input
       ref="fileInputRef"
       type="file"
       @change="handleImageUpload"
       accept="image/*"
-      :style="{ display: 'none' }"
+      class="file-input"
     />
     <button @click="handleButtonClick">选择图片</button>
   </section>
@@ -44,7 +44,23 @@ const handleButtonClick = () => {
 </script>
 
 <style scoped>
-.section > *:not(h2) {
-  text-align: center;
+.upload-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 1rem;
+}
+
+h2 {
+  margin: 0;
+  color: #333;
+}
+
+.file-input {
+  display: none;
 }
 </style>