feat(i18n): 整理文件

src/pages/index/i18n.vue

@@ -7,22 +7,25 @@
 </route>
 
 <template>
-  <view>{{ $t('app.name') }}</view>
-
-  <view>切换语言 </view>
-  <view class="uni-list">
-    <radio-group @change="radioChange">
-      <label class="uni-list-cell uni-list-cell-pd" v-for="item in languages" :key="item.value">
-        <view>
-          <radio :value="item.value" :checked="item.value === current" />
-        </view>
-        <view>{{ item.name }}</view>
-      </label>
-    </radio-group>
-  </view>
+  <view class="center flex-col mt-6">
+    <view class="text-green-500">多语言测试</view>
+    <view class="m-4">{{ $t('app.name') }}</view>
+
+    <view class="text-green-500">切换语言 </view>
+    <view class="uni-list">
+      <radio-group @change="radioChange" class="radio-group">
+        <label class="uni-list-cell uni-list-cell-pd" v-for="item in languages" :key="item.value">
+          <view>
+            <radio :value="item.value" :checked="item.value === current" />
+          </view>
+          <view>{{ item.name }}</view>
+        </label>
+      </radio-group>
+    </view>
 
-  <!-- http://localhost:9000/#/pages/index/i18n -->
-  <button @click="testI18n">测试弹窗</button>
+    <!-- http://localhost:9000/#/pages/index/i18n -->
+    <button @click="testI18n">测试弹窗</button>
+  </view>
 </template>
 
 <script lang="ts" setup>
@@ -49,3 +52,30 @@ const radioChange = (evt) => {
   uni.setLocale(evt.detail.value)
 }
 </script>
+
+<style lang="scss">
+.uni-list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 12px;
+}
+
+.radio-group {
+  width: 200px;
+  margin: auto;
+  border-radius: 12px;
+}
+
+.uni-list-cell {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: #bcecd1;
+}
+</style>