style:样式切换

web/src/components/ui/BlackInput.vue

@@ -1,57 +1,58 @@
 <template>
   <div class="black-input-wrapper">
-    <el-input v-model="model" :type="type" :rows="rows"
-              @input="onInput"
-              style="--el-input-bg-color:#252020;
-            --el-input-border-color:#414141;
-            --el-input-focus-border-color:#414141;
-            --el-text-color-regular: #f1f1f1;
-            --el-input-border-radius: 10px;
-            --el-border-color-hover:#616161"
-              resize="none"
-              :placeholder="placeholder" :maxlength="maxlength"/>
+    <el-input
+      v-model="model"
+      :type="type"
+      :rows="rows"
+      @input="onInput"
+      resize="none"
+      :placeholder="placeholder"
+      :maxlength="maxlength"
+    />
     <div class="word-stat" v-if="rows > 1">
-      <span>{{value.length}}</span>/<span>{{maxlength}}</span>
+      <span>{{ value.length }}</span
+      >/<span>{{ maxlength }}</span>
     </div>
   </div>
-
 </template>
 
 <script setup>
-
-import {ref, watch} from "vue";
+import { ref, watch } from "vue";
 
 const props = defineProps({
-  value : {
+  value: {
     type: String,
-    default: '',
+    default: ""
   },
   placeholder: {
     type: String,
-    default: '',
+    default: ""
   },
   type: {
     type: String,
-    default: 'input',
+    default: "input"
   },
   rows: {
     type: Number,
-    default: 5,
+    default: 5
   },
   maxlength: {
     type: Number,
     default: 1024
   }
 });
-watch(() => props.value, (newValue) => {
-  model.value = newValue
-})
-const model = ref(props.value)
+watch(
+  () => props.value,
+  (newValue) => {
+    model.value = newValue;
+  }
+);
+const model = ref(props.value);
 // eslint-disable-next-line no-undef
-const emits = defineEmits(['update:value']);
+const emits = defineEmits(["update:value"]);
 const onInput = (value) => {
-  emits('update:value',value)
-}
+  emits("update:value", value);
+};
 </script>
 
 <style lang="stylus">
@@ -77,4 +78,4 @@ const onInput = (value) => {
     }
   }
 }
-</style>
+</style>

web/src/components/ui/BlackSelect.vue

@@ -1,33 +1,32 @@
 <template>
-
-  <el-select v-model="model" :placeholder="placeholder"
-             :value="value" @change="$emit('update:value', $event)"
-             style="--el-fill-color-blank:#252020;
-                   --el-text-color-regular: #a1a1a1;
-                   --el-select-disabled-color:#0E0808;
-                   --el-color-primary-light-9:#0E0808;
-                   --el-border-radius-base:20px;
-                   --el-border-color:#0E0808;">
-    <el-option v-for="item in options"
-               :key="item.value"
-               :label="item.label"
-               :value="item.value">
+  <el-select
+    v-model="model"
+    :placeholder="placeholder"
+    :value="value"
+    @change="$emit('update:value', $event)"
+    style="--el-border-radius-base: 20px"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    >
     </el-option>
   </el-select>
-
 </template>
 
 <script>
 export default {
-  name: 'BlackSelect',
+  name: "BlackSelect",
   props: {
-    value : {
+    value: {
       type: String,
-      default: '',
+      default: ""
     },
     placeholder: {
       type: String,
-      default: '请选择',
+      default: "请选择"
     },
     options: {
       type: Array,
@@ -37,7 +36,7 @@ export default {
   data() {
     return {
       model: this.value
-    }
+    };
   }
-}
+};
 </script>

web/src/components/ui/BlackSwitch.vue

@@ -1,24 +1,26 @@
 <template>
-
-  <el-switch v-model="model" :size="size"
-             @change="$emit('update:value', $event)"
-             style="--el-switch-on-color:#555555;--el-color-white:#0E0808"/>
-
+  <el-switch
+    v-model="model"
+    :size="size"
+    @change="$emit('update:value', $event)"
+  />
 </template>
 
 <script setup>
-
-import {ref, watch} from "vue";
+import { ref, watch } from "vue";
 const props = defineProps({
-  value : Boolean,
+  value: Boolean,
   size: {
     type: String,
-    default: 'default',
+    default: "default"
   }
 });
-const model = ref(props.value)
+const model = ref(props.value);
 
-watch(() => props.value, (newValue) => {
-  model.value = newValue
-})
+watch(
+  () => props.value,
+  (newValue) => {
+    model.value = newValue;
+  }
+);
 </script>