document internationalization

src/component/field/index.less

@@ -0,0 +1,38 @@
+
+@import "../../theme/variable.less";
+
+@field-border-color: var(--field-border-color);
+@field-border-radius: var(--field-border-radius);
+
+:root {
+    --field-border-color: @global-border-color;
+    --field-border-radius: @global-border-radius;
+}
+
+.layui-field {
+  margin-bottom: 10px;
+  padding: 0;
+  border-width: 1px;
+  border-color: @field-border-color;
+  border-style: solid;
+}
+
+.layui-field legend {
+  margin-left: 20px;
+  padding: 0 10px;
+  font-size: 20px;
+  font-weight: 300;
+}
+
+.layui-field-title {
+  margin: 10px 0 20px;
+  border-width: 1px 0 0;
+}
+
+.layui-field-box {
+  padding: 15px;
+}
+
+.layui-field-title .layui-field-box {
+  padding: 10px 0;
+}

src/component/field/index.vue

@@ -5,6 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
+import "./index.less";
 import { useSlots } from "vue";
 
 const slot = useSlots();
@@ -17,14 +18,14 @@ const props = defineProps<LayFieldProps>();
 </script>
 
 <template>
-  <fieldset v-if="slot.default" class="layui-elem-field">
+  <fieldset v-if="slot.default" class="layui-field">
     <legend>{{ title }}</legend>
     <div class="layui-field-box">
       <slot></slot>
     </div>
   </fieldset>
 
-  <fieldset v-else class="layui-elem-field layui-field-title">
+  <fieldset v-else class="layui-field layui-field-title">
     <legend>
       <a name="docend">{{ title }}</a>
     </legend>