公众号

src/components/OfficialAccounts/DatePicker.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="date-picker-container">
+    <!-- 使用van-field作为输入框，优化移动端点击体验 -->
+    <van-field
+      v-model="displayDate"
+      :label="label"
+      readonly
+      :required="required"
+      clickable
+      :placeholder="placeholder"
+      @click="showPicker = true"
+      :error-message="error"
+    >
+      <template #right-icon>
+        <van-icon name="calendar-o" class="calendar-icon" />
+      </template>
+    </van-field>
+
+    <!-- 日期选择弹窗 -->
+    <van-popup
+      v-model="showPicker"
+      position="bottom"
+      round
+    >
+      <van-datetime-picker
+        v-model="currentDate"
+        type="date"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :formatter="formatter"
+        @confirm="onConfirm"
+        @cancel="showPicker = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: [String, Date],
+      default: ''
+    },
+    label: String,
+    required: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: '请选择日期'
+    },
+    // 新增日期格式配置
+    dateFormat: {
+      type: String,
+      default: 'yyyy-MM-dd'
+    },
+    error: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      showPicker: false,
+      currentDate: this.value ? new Date(this.value) : new Date(),
+      minDate: new Date(1990, 0, 1),
+      maxDate: new Date()
+    }
+  },
+
+  computed: {
+    // 显示格式化后的日期
+    displayDate: {
+      get() {
+        return this.formatDate(this.currentDate)
+      },
+      set() {} // 避免直接修改警告
+    }
+  },
+
+  watch: {
+    value: {
+      handler(newVal) {
+        if (newVal) {
+          this.currentDate = this.parseDate(newVal)
+        }
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    // 日期确认处理
+    onConfirm(value) {
+      this.currentDate = value
+      this.$emit('input', this.formatDate(value))
+      this.showPicker = false
+    },
+
+    // 日期格式化方法
+    formatDate(date) {
+      if (!(date instanceof Date)) return ''
+      const pad = n => n.toString().padStart(2, '0')
+      return this.dateFormat
+        .replace('yyyy', date.getFullYear())
+        .replace('MM', pad(date.getMonth() + 1))
+        .replace('dd', pad(date.getDate()))
+    },
+
+    // 字符串转Date对象
+    parseDate(dateStr) {
+      if (dateStr instanceof Date) return dateStr
+      return new Date(dateStr.replace(/-/g, '/'))
+    },
+
+    // 自定义日期显示格式
+    formatter(type, value) {
+      if (type === 'year') return `${value}年`
+      if (type === 'month') return `${value}月`
+      if (type === 'day') return `${value}日`
+      return value
+    }
+  }
+}
+</script>
+
+<style scoped>
+.date-picker-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 0;
+  box-sizing: border-box;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .date-picker-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .custom-label {
+    width: 100% !important;
+    margin-bottom: 8px;
+  }
+}
+
+/* Vant组件样式覆盖 */
+.calendar-icon {
+  color: #1989fa;
+  font-size: 18px;
+}
+
+/* 必填星号样式 */
+.required-star {
+  color: #ff4444;
+  margin-left: 4px;
+}
+
+/* 标签样式优化 */
+.custom-label {
+  flex: 0 0 auto;
+  font-size: 14px;
+  color: #333;
+  min-width: 6em;
+}
+</style>

src/components/OfficialAccounts/InputField.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="input-wrapper">
+    <div class="form-row">
+      <label 
+        class="label"
+        :style="{ width: labelWidth }"
+      >
+        {{ label }}
+        <span v-if="required" class="required-star">*</span>
+      </label>
+      <div class="input-container">
+        <input
+          :type="type"
+          :value="value"
+          @input="$emit('input', $event.target.value)"
+          :placeholder="placeholder"
+          :pattern="pattern"
+          :required="required"
+          class="input-field"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MobileInput',
+  props: {
+    value: String,
+    label: String,
+    type: { type: String, default: 'text' },
+    placeholder: String,
+    pattern: String,
+    required: Boolean,
+    // 新增label宽度配置
+    labelWidth: {
+      type: [String, Number],
+      default: '5em', // 默认5个中文宽度
+      validator: value => typeof value === 'string' || typeof value === 'number'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.input-wrapper {
+  width: 100%;
+  margin-bottom: 1rem;
+  box-sizing: border-box;
+  background-color: #ffffff;
+}
+
+.form-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  width: 100%;
+  min-height: 48px;
+}
+
+.label {
+  flex: 0 0 auto; /* 取消固定flex比例 */
+  font-size: 1rem;
+  color: #333;
+  font-weight: 600;
+  line-height: 1.5;
+  white-space: normal;
+  word-break: break-word;
+  text-align: right;
+  box-sizing: border-box;
+  max-width: 60%; /* 移动端最大宽度限制 */
+}
+
+.required-star {
+  color: #ff4d4f;
+  font-size: 1.1em;
+  margin-left: 0.2rem;
+}
+
+.input-container {
+  flex: 1;
+  position: relative;
+}
+
+.input-field {
+  width: 100%;
+  padding: 12px 16px;
+  background: #ffffff;
+  font-size: 1rem;
+  line-height: 1.5;
+  /* 移除边框 */
+  border: none !important;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+}
+
+.input-field::placeholder {
+  text-align: right; /* placeholder右对齐 */
+  padding-right: 16px; /* 保留右侧间距 */
+  direction: rtl; /* 强制右对齐（备用方案） */
+  color: rgba(153, 153, 153, 1);
+}
+
+/* 移动端优化 */
+@media (max-width: 768px) {
+  .form-row {
+    flex-wrap: wrap;
+    gap: 0.6rem;
+  }
+
+  .label {
+    max-width: 70%; /* 移动端更宽松的限制 */
+    margin-bottom: 0.3rem;
+  }
+
+  .input-field {
+    min-height: 44px;
+    padding: 10px 16px;
+  }
+
+  .input-field:focus {
+    outline: none;
+    /* box-shadow: 0 0 0 1px rgb(8, 9, 10); */
+  }
+}
+
+/* 响应式宽度控制 */
+@media (min-width: 769px) {
+  .label {
+    max-width: 40%; /* PC端更紧凑的布局 */
+  }
+}
+</style>

src/components/OfficialAccounts/MultiSelect.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="multi-select">
+    <div v-if="label" class="multi-select__label">{{ label }}</div>
+    <div class="multi-select__tags">
+      <div
+        v-for="(option, index) in options"
+        :key="index"
+        class="tag"
+        :class="{ 'tag--active': isSelected(option.value) }"
+        @click="toggleSelection(option.value)"
+        @keydown.enter.space.prevent="toggleSelection(option.value)"
+        role="checkbox"
+        :aria-checked="isSelected(option.value)"
+        tabindex="0"
+      >
+        {{ option.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MultiSelect',
+  props: {
+    value: {  // Vue2 中 v-model 默认对应 value 属性
+      type: Array,
+      default: () => []
+    },
+    label: String,
+    options: {
+      type: Array,
+      required: true,
+      validator: opts => opts.every(option => 
+        typeof option === 'object' && 
+        'value' in option && 
+        'label' in option
+      )
+    }
+  },
+  methods: {
+    isSelected(value) {
+      return this.value.some(item => this.deepEqual(item, value))
+    },
+    toggleSelection(value) {
+      const newSelection = [...this.value]
+      const index = newSelection.findIndex(item => this.deepEqual(item, value))
+
+      if (index > -1) {
+        newSelection.splice(index, 1)
+      } else {
+        newSelection.push(value)
+      }
+      console.log("当前值:", newSelection)
+      this.$emit('input', newSelection)  // Vue2 中通过 input 事件更新
+    },
+    deepEqual(a, b) {
+      if (typeof a !== typeof b) return false
+      if (typeof a === 'object') {
+        return JSON.stringify(a) === JSON.stringify(b)
+      }
+      return a === b
+    }
+  }
+}
+</script>
+
+<style scoped>
+.multi-select {
+  --primary-color: #409eff;
+  --hover-color: #ecf5ff;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  background-color: #ffffff;
+}
+
+/* 标签文字放大 */
+.multi-select__label {
+  margin: 1rem;
+  font-size: 15px;
+  color: #333;
+  font-weight: 400;
+}
+
+/* 弹性布局优化 */
+.multi-select__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 1rem;
+}
+
+.tag {
+  margin-left: 1rem;
+  margin-bottom: 1rem;
+  /* 触控优化 */
+  padding: 8px 16px;
+  min-width: 60px;
+  min-height: 36px;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  
+  /* 视觉优化 */
+  border: 1px solid #e0e0e0;  /* 加粗边框 */
+  border-radius: 8px;  /* 更圆润的圆角 */
+  font-size: 16px;  /* 放大文字 */
+  color: #333;
+  background: #f8f8f8;  /* 更明显的背景 */
+  box-shadow: 0 1px 1px rgba(0,0,0,0.05);  /* 添加轻微阴影 */
+  
+  /* 布局优化 */
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.15s ease-in-out;
+}
+
+/* 移除 hover 效果（移动端不适用） */
+/* 添加点击反馈 */
+.tag:active {
+  transform: scale(0.98);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+
+.tag--active {
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);  /* 激活态阴影 */
+}
+
+/* 焦点状态优化 */
+.tag:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
+}
+
+/* 移动端横屏适配 */
+@media screen and (max-width: 480px) {
+  .multi-select__tags {
+    gap: 8px;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    
+  }
+  
+  .tag {
+    padding: 8px 12px;
+    font-size: 14px;
+    min-width: 54px;
+    min-height: 32px;
+  }
+}
+
+/* 超小屏幕优化 */
+@media screen and (max-width: 320px) {
+  .tag {
+    padding: 6px 10px;
+    font-size: 13px;
+    border-radius: 6px;
+  }
+}
+</style>

src/components/OfficialAccounts/SingleSelect.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="select-wrapper">
+    <!-- 使用van-field作为选择器触发入口 -->
+    <van-field
+      v-model="displayText"
+      :label="label"
+      readonly
+      :required="required"
+      clickable
+      :placeholder="placeholder"
+      @click="showPickerclick"
+      :error-message="errorMessage"
+      @touchstart="pickerError()"
+      @focus="pickerError()"
+    >
+      <template #right-icon>
+        <van-icon name="arrow-down" class="arrow-icon" />
+      </template>
+    </van-field>
+
+    <!-- 选项选择弹窗 -->
+    <van-popup
+      v-model="showPicker"
+      position="bottom"
+      round
+      :style="{ height: '40%' }"
+    >
+      <van-picker
+        show-toolbar
+        :columns="formattedOptions"
+        @confirm="onConfirm"
+        @cancel="showPicker = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: [String, Number],
+    label: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Array,
+      required: true,
+      validator: opts => opts.every(option => 
+        typeof option === 'object' && 
+        'value' in option && 
+        'label' in option
+      )
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    required: Boolean,
+    errorMessage: {
+      type: String,
+    }
+  },
+
+  data() {
+    return {
+      showPicker: false,
+      selectedValue: this.value,
+    }
+  },
+
+  computed: {
+    // 格式化选项为Vant Picker需要的结构
+    formattedOptions() {
+      return this.options.map(option => ({
+        text: option.label,
+        value: option.value
+      }))
+    },
+
+    // 显示选中的文本
+    displayText() {
+      if (!this.selectedValue) return ''
+      const selected = this.options.find(
+        option => option.value === this.selectedValue
+      )
+      return selected ? selected.label : ''
+    }
+  },
+
+  watch: {
+    value(newVal) {
+      this.selectedValue = newVal
+    }
+  },
+
+  methods: {
+    showPickerclick() {
+      this.showPicker = true
+      this.pickerError()
+    },
+    pickerError(){
+      console.log("测试")
+      this.$emit('error-message');
+    },
+    // 确认选择
+    onConfirm(value) {
+      this.selectedValue = value.value
+      this.$emit('input', value.value)
+      this.showPicker = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.select-wrapper {
+  position: relative;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  background-color: #ffffff;
+}
+
+/* 下拉箭头样式 */
+.arrow-icon {
+  color: #969799;
+  font-size: 16px;
+  transition: transform 0.3s;
+}
+
+.van-field__control:active + .arrow-icon {
+  transform: rotate(180deg);
+}
+
+/* 弹窗样式优化 */
+.van-picker {
+  --picker-option-font-size: 16px;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  
+  .van-field__control {
+    font-size: 14px !important;
+  }
+
+  .van-picker {
+    --picker-option-font-size: 14px;
+  }
+}
+
+/* 必填星号样式 */
+.required-star {
+  color: #ff4d4f;
+  margin-left: 4px;
+  font-size: 12px;
+  vertical-align: top;
+}
+</style>

src/views/officialAccounts/patientData/index.vue

@@ -0,0 +1,402 @@
+<template>
+  <div class="app-container">
+
+    <!-- 主表单区域 -->
+    <form @submit.prevent="handleSubmit">
+      <h2 class="form-title">信息录入</h2>
+
+      <!-- 基本信息组 -->
+      <!-- <fieldset class="form-group">
+        <legend>基本信息</legend> -->
+        <van-field
+            v-model="formData.name"
+            label="姓名"
+            placeholder="请输入姓名"
+            required
+            clearable
+            :label-width="100"
+            class="right-placeholder-field"
+            :error-message="errorform.name"
+            @input="nameError"
+            @blur="nameError"
+        />
+        
+        <single-select
+          v-model="formData.gender"
+          label="性别"
+          :options="getLabelForValue(dict.type.dict_sex)"
+          required
+           placeholder="请输入性别"
+          labelWidth="3em"
+          :errorMessage="errorform.gender"
+          @error-message="genderError"
+        />
+
+        <van-field
+            v-model="formData.mobile"
+            label="联系电话"
+            placeholder="请输入手机号"
+            required
+            clearable
+            :label-width="100"
+            :error-message="errorform.mobile"
+            @input="mobileError"
+            @blur="mobileError"
+        />
+
+        <div style="margin-top: 1rem;">
+            <van-field
+            v-model="formData.idCard"
+            label="身份证号码"
+            placeholder="请输入身份证号码"
+            required
+            clearable
+            :label-width="100"
+            :error-message="errorform.idCard"
+            @input="idCardError"
+            @blur="idCardError"
+            />    
+        </div>
+
+        <date-picker
+          v-model="formData.birthDate"
+          label="出生年月"
+          required
+        />
+
+        <van-field
+            v-model="formData.age"
+            label="年龄"
+            placeholder="请输入年龄"
+            required
+            clearable
+            :label-width="100"
+            :error-message="errorform.age"
+            @input="ageError"
+            @blur="ageError"
+        />
+        
+
+        <!-- <single-select
+          v-model="formData.profession"
+          label="职业"
+          placeholder="请输入职业"
+          :options="professionOptions"
+          required
+          labelWidth="3em"
+        /> -->
+
+        <single-select
+          v-model="formData.education"
+          label="教育程度"
+          :options="getLabelForValue(dict.type.education_type)"
+          placeholder="请输入教育程度"
+          required
+          labelWidth="5em"
+          :errorMessage="errorform.education"
+        />
+
+        <!-- 病史多选题组 -->
+        <MultiSelect
+          v-model="formData.medicalHistory"
+          label="现病史（多选）"
+          :options="getLabelForValue(dict.type.medical_current_type)"
+        />
+
+        <MultiSelect
+          v-model="formData.familyHistory"
+          label="既往史（多选）"
+          :options="getLabelForValue(dict.type.medical_his_type)"
+        />
+        
+        <MultiSelect
+          v-model="formData.familyHistory"
+          label="家族史（多选）"
+          :options="getLabelForValue(dict.type.genetic_disease)"
+        />
+
+      <!-- 诊断结果多选题组 -->
+    <MultiSelect
+      v-model="formData.diagnosis"
+      label="诊疗结果（多选）"
+      :options="getLabelForValue(dict.type.diagnose_result_type)"
+    />
+
+    <MultiSelect
+      v-model="formData.diagnosis"
+      label="认知障碍（多选）"
+      :options="getLabelForValue(dict.type.game_type)"
+    />
+      <!-- 提交按钮 -->
+      <button type="submit" class="submit-btn">提交</button>
+    </form>
+  </div>
+</template>
+
+<script>
+
+import InputField from '@/components/OfficialAccounts/InputField.vue';
+import SingleSelect from '@/components/OfficialAccounts/SingleSelect.vue';
+import MultiSelect from '@/components/OfficialAccounts/MultiSelect.vue';
+import DatePicker from '@/components/OfficialAccounts/DatePicker.vue';
+
+export default {
+  dicts: ['equipment_class', 'education_type', 'dict_sex', 'medical_his_type', 'medical_current_type', 'diagnose_result_type', 'career', 'game_type', 'genetic_disease', 'department', 'patient_source', 'pay_status', 'pay_method'],
+  components: {
+    InputField,
+    SingleSelect,
+    MultiSelect,
+    DatePicker
+  },
+  data() {
+    return {
+      minDate: new Date(1990,1,1),
+      formData: {
+        name: '',
+        gender: '',
+        mobile: '',
+        birthDate: '',
+        age: '',
+        idCard: '',
+        education: '',
+        medicalHistory: [],
+        familyHistory: [],
+        diagnosis: []
+      },
+      errorform: {
+        name: '',
+        gender: '',
+        mobile: '',
+        birthDate: '',
+        age: '',
+        idCard: '',
+        education: '',
+        medicalHistory: [],
+        familyHistory: [],
+        diagnosis: []
+      },
+    };
+  },
+  computed: {
+    
+  },
+  methods: {
+    getLabelForValue(educationData) {
+        return educationData.map(item => ({
+                label: item.label,
+                value: item.value
+                }))
+    },
+    handleSubmit() {
+      // 表单验证
+      if (!this.validateForm()) return;
+
+      // 处理提交逻辑
+      console.log('提交数据:', this.formData);
+    },
+    validateForm() {
+      // 手机号验证
+      const phoneRegex = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
+      if (!phoneRegex.test(this.formData.phone)) {
+        this.errorform.mobile = "请输入有效的手机号码"
+        return false;
+      }
+
+      // 年龄验证
+      if (isNaN(this.formData.age) || this.formData.age < 0) {
+        this.$toast.error('请输入有效的年龄');
+        return false;
+      }
+
+      return true;
+    },
+    //校验
+    nameError() {
+        this.errorform.name = this.formData.name.trim().length === 0 
+        ? '姓名不能为空' 
+        : '';
+    },
+    genderError() {
+        this.errorform.gender = this.formData.gender.trim().length === 0 
+        ? '性别不能为空' 
+        : '';
+    },
+    mobileError() {
+      this.errorform.mobile = this.formData.mobile.trim().length === 0 
+        ? '手机号不能为空' 
+        : '';
+    },
+    birthDateError() {
+        this.errorform.birthDate = this.formData.birthDate.trim().length === 0 
+        ? '出生年月不能为空' 
+        : '';
+    },
+    ageError() {
+        this.errorform.age = this.formData.age.trim().length === 0 
+        ? '年龄不能为空' 
+        : '';
+    },
+    idCardError() {
+        const idCard = this.formData.idCard.trim();
+    
+        // 基础格式校验
+        const idCardPattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
+        
+        if (!idCard) {
+            this.errorform.idCard = '身份证号码不能为空';
+            return;
+        }
+        
+        if (!idCardPattern.test(idCard)) {
+            this.errorform.idCard = '身份证号码格式不正确';
+            return;
+        }
+
+        if (this.formData.idCard.length == 18) {
+            this.formData.birthDate = this.formData.idCard.substring(6, 10) + "-" + this.formData.idCard.substring(10, 12) + "-" + this.formData.idCard.substring(12, 14)
+            this.formData.age = this.calculateAge(this.formData.idCard)
+        }
+        this.errorform.idCard = '';
+    },
+    // 获取年龄
+    calculateAge(iden) {
+      if (iden.length == 18) {
+        let ye = iden.substring(6, 10)
+        let date = new Date();
+        let year = date.getFullYear();
+        return year - ye
+      }
+    },
+    educationError() {
+        this.errorform.education = this.formData.education.trim().length === 0 
+        ? '教育程度不能为空' 
+        : '';
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.app-container {
+  width: 100vw;
+  background-color:#f8f9fa;
+  box-sizing: border-box;
+}
+
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  color: #666;
+  font-family: Arial;
+
+  .time, .battery {
+    font-size: 1.2em;
+  }
+}
+
+form {
+  
+
+  h2.form-title {
+    text-align: center;
+    margin-bottom: 30px;
+    color: #333;
+    font-size: 1.5em;
+  }
+
+  .submit-btn {
+    background-color: #007bff;
+    color: white;
+    padding: 12px 25px;
+    border: none;
+    border-radius: 5px;
+    font-size: 1.1em;
+    cursor: pointer;
+    width: 100%;
+    margin-top: 20px;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+}
+
+// /* 输入框和选择器通用样式 */
+// .single-select, .multi-select, .date-picker {
+//   width: 100%;
+//   margin-bottom: 15px;
+
+//   label {
+//     display: block;
+//     margin-bottom: 5px;
+//     color: #495057;
+//     font-weight: 500;
+//   }
+
+//   select {
+//     width: 100%;
+//     padding: 10px;
+//     border: 1px solid #ddd;
+//     border-radius: 5px;
+//     font-size: 1em;
+
+//     &:focus {
+//       outline: none;
+//       border-color: #007bff;
+//       box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+//     }
+//   }
+
+//   .multi-select {
+//     display: flex;
+//     flex-direction: column;
+    
+//     .option-btn {
+//       margin: 5px 0;
+//       padding: 8px;
+//       background-color: #fff;
+//       border: 1px solid #ddd;
+//       border-radius: 3px;
+//       cursor: pointer;
+
+//       &.selected {
+//         background-color: #007bff;
+//         color: white;
+//       }
+//     }
+//   }
+// }
+
+/* 日期选择器样式 */
+// .date-picker {
+//   position: relative;
+
+//   input {
+//     cursor: pointer;
+//   }
+
+//   .calendar-icon {
+//     position: absolute;
+//     right: 10px;
+//     top: 50%;
+//     transform: translateY(-50%);
+//     font-size: 1.2em;
+//     color: #666;
+//   }
+// }
+
+/* 提示信息样式 */
+.toast {
+  position: fixed;
+  top: 20px;
+  right: -300px;
+  padding: 15px 25px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  transition: right 0.3s ease;
+}
+</style>