update

src/components/XConfirmModal.vue

@@ -85,5 +85,6 @@ const success = () => {
     font-size: 14px;
     font-weight: 400;
     letter-spacing: 0;
+    text-align: center;
 }
 </style>

src/components/XDateTime.vue

@@ -2,10 +2,14 @@
 import timeIcon from "../static/icons/time.png";
 
 const modalValue = defineModel();
-const {placeholder} = defineProps({
+const {placeholder, fields} = defineProps({
     placeholder: {
         type: String,
         default: "请选择时间",
+    },
+    fields: {
+        type: String,
+        default: 'day'
     }
 });
 
@@ -15,12 +19,13 @@ const success = ({detail: {value}}) => {
 </script>
 
 <template>
-    <picker mode="date" class="x-date-input" @change="success">
-        <view>
-            <image class="!size-[24rpx] !absolute left-[30rpx] top-1/2 -translate-y-1/2" :src="timeIcon"></image>
+    <picker mode="date" :class="[!$slots.default ? 'x-date-input' : '']" @change="success" :fields="fields">
+        <view v-if="!$slots.default" class="!flex items-center justify-center gap-[20rpx]">
+            <image class="!size-[24rpx]" :src="timeIcon"></image>
             <text v-if="!modalValue" class="text-[#666]">{{ placeholder }}</text>
-            <text v-else>{{modalValue}}</text>
+            <text class="test-24r" v-else>{{ modalValue }}</text>
         </view>
+        <slot v-else></slot>
     </picker>
 </template>
 

src/components/XTag.vue

@@ -0,0 +1,37 @@
+<script setup>
+const {type} = defineProps({
+    type: {
+        type: String,
+        default: 'info'
+    }
+});
+</script>
+
+<template>
+    <view :class="['x-tag', type]">
+        <slot></slot>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.x-tag {
+    font-size: 24rpx;
+    padding: 3rpx 8rpx;
+    border-radius: 4rpx;
+}
+
+.info {
+    background-color: var(--primary-color-info);
+    color: var(--primary-color);
+}
+
+.success {
+    background-color: #E8FFEA;
+    color: #00B42A;
+}
+
+.warn {
+    background-color: #FFF7E8;
+    color: #FF7D00;
+}
+</style>