|
|
@@ -0,0 +1,680 @@
|
|
|
+<template>
|
|
|
+ <div v-if="showModal" class="modal-overlay" @click.self="handleClose">
|
|
|
+ <div class="modal modal-lg">
|
|
|
+ <div class="modal-header">
|
|
|
+ <div class="modal-title"><i class="fas fa-user-plus"></i> 添加客户</div>
|
|
|
+ <button class="modal-close" @click="handleClose"><i class="fas fa-times"></i></button>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <!-- 基础信息 -->
|
|
|
+ <div class="section-title">基础信息</div>
|
|
|
+ <div class="form-row ">
|
|
|
+ <div class="lef">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">客户代码</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.customerCode" placeholder="客户代码">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">归属人员 <span class="required">*</span></label>
|
|
|
+ <select class="form-select" v-model="formData.ownerUser">
|
|
|
+ <option value="">请选择用户</option>
|
|
|
+ <option value="user1">用户1</option>
|
|
|
+ <option value="user2">用户2</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">客户状态 <span class="required">*</span></label>
|
|
|
+ <select class="form-select" v-model="formData.customerStatus">
|
|
|
+ <option value="no_need">暂无需</option>
|
|
|
+ <option value="intent">意向客户</option>
|
|
|
+ <option value="deal">成交客户</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">联系人姓名 <span class="required">*</span></label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.contactName" placeholder="请输入联系人姓名">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">意向产品</label>
|
|
|
+ <select class="form-select" v-model="formData.intentProduct">
|
|
|
+ <option value="">意向产品</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">客户来源</label>
|
|
|
+ <select class="form-select" v-model="formData.source">
|
|
|
+ <option value="">客户来源</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">客户等级</label>
|
|
|
+ <div class="radio-group">
|
|
|
+ <label class="radio-item">
|
|
|
+ <input type="radio" v-model="formData.level" value="A"> A级
|
|
|
+ </label>
|
|
|
+ <label class="radio-item">
|
|
|
+ <input type="radio" v-model="formData.level" value="B"> B级
|
|
|
+ </label>
|
|
|
+ <label class="radio-item">
|
|
|
+ <input type="radio" v-model="formData.level" value="C"> C级
|
|
|
+ </label>
|
|
|
+ <label class="radio-item">
|
|
|
+ <input type="radio" v-model="formData.level" value="D"> D级
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">助记名称</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.alias" placeholder="请输入助记名称">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">区域名称 <span class="required">*</span></label>
|
|
|
+ <select class="form-select" v-model="formData.regionName">
|
|
|
+ <option value="">请选择</option>
|
|
|
+ <option value="A">区域A</option>
|
|
|
+ <option value="B">区域B</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">客户名称 <span class="required">*</span></label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.customerName" placeholder="请输入客户名称">
|
|
|
+ </div>
|
|
|
+ <!-- 企业网址 紧凑多行布局 -->
|
|
|
+ <div class="form-group multi-input-group">
|
|
|
+ <label class="form-label">企业网址 <span class="required">*</span></label>
|
|
|
+ <div class="input-item" v-for="(item, idx) in formData.websiteList" :key="idx">
|
|
|
+ <div class="input-with-icon">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="form-input"
|
|
|
+ v-model="formData.websiteList[idx]"
|
|
|
+ placeholder="请输入企业网址"
|
|
|
+ >
|
|
|
+ <span class="icon-btn" @click="addWebsite" v-if="idx === 0">+</span>
|
|
|
+ <span class="icon-btn minus" @click="delWebsite(idx)" v-if="idx > 0">-</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 联系人邮箱 紧凑多行布局 -->
|
|
|
+ <div class="form-group multi-input-group">
|
|
|
+ <label class="form-label">联系人邮箱 <span class="required">*</span></label>
|
|
|
+ <div class="input-item" v-for="(item, idx) in formData.emailList" :key="idx">
|
|
|
+ <div class="input-with-icon">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="form-input"
|
|
|
+ v-model="formData.emailList[idx]"
|
|
|
+ placeholder="请输入联系人邮箱"
|
|
|
+ >
|
|
|
+ <span class="icon-btn" @click="addEmail" v-if="idx === 0">+</span>
|
|
|
+ <span class="icon-btn minus" @click="delEmail(idx)" v-if="idx > 0">-</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">客户类型</label>
|
|
|
+ <select class="form-select" v-model="formData.customerType">
|
|
|
+ <option value="">客户类型</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">经济性质</label>
|
|
|
+ <select class="form-select" v-model="formData.economicNature">
|
|
|
+ <option value="">客户经济性质</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">信用等级</label>
|
|
|
+ <div class="radio-group">
|
|
|
+ <label class="radio-item">
|
|
|
+ <input type="radio" v-model="formData.creditLevel" value="good"> 良好
|
|
|
+ </label>
|
|
|
+ <label class="radio-item">
|
|
|
+ <input type="radio" v-model="formData.creditLevel" value="normal"> 一般
|
|
|
+ </label>
|
|
|
+ <label class="radio-item">
|
|
|
+ <input type="radio" v-model="formData.creditLevel" value="poor"> 较差
|
|
|
+ </label>
|
|
|
+ <label class="radio-item">
|
|
|
+ <input type="radio" v-model="formData.creditLevel" value="worse"> 比较差
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">备注信息</label>
|
|
|
+ <textarea class="form-textarea" v-model="formData.remark" placeholder="请输入内容"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 企业信息 -->
|
|
|
+ <div class="section-title">企业信息</div>
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">企业规模</label>
|
|
|
+ <select class="form-select" v-model="formData.scale">
|
|
|
+ <option value="">意向产品</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">所属行业</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.industry" placeholder="请输入所属行业">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">通信地址</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.address" placeholder="请输入通信地址">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">邮政编码</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.postcode" placeholder="请输入邮政编码">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">传真号码</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.fax" placeholder="请输入传真号码">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">企业邮箱</label>
|
|
|
+ <div class="input-with-icon">
|
|
|
+ <input type="text" class="form-input" v-model="formData.companyEmail" placeholder="请输入企业邮箱">
|
|
|
+ <span class="icon-btn">+</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">企业备用邮箱</label>
|
|
|
+ <div class="input-with-icon">
|
|
|
+ <input type="text" class="form-input" v-model="formData.backupEmail" placeholder="请输入企业备用邮箱">
|
|
|
+ <span class="icon-btn minus">-</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">联系号码</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.contactPhone" placeholder="请输入联系号码">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 首要联系人 -->
|
|
|
+ <div class="section-title">首要联系人</div>
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">称呼</label>
|
|
|
+ <div class="radio-group">
|
|
|
+ <label class="radio-item">
|
|
|
+ <input type="radio" v-model="formData.gender" value="unknown"> 未知
|
|
|
+ </label>
|
|
|
+ <label class="radio-item">
|
|
|
+ <input type="radio" v-model="formData.gender" value="mr"> 先生
|
|
|
+ </label>
|
|
|
+ <label class="radio-item">
|
|
|
+ <input type="radio" v-model="formData.gender" value="mrs"> 女士
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">角色</label>
|
|
|
+ <select class="form-select" v-model="formData.role">
|
|
|
+ <option value="">请选择角色</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">生日</label>
|
|
|
+ <select class="form-select" v-model="formData.birthday">
|
|
|
+ <option value="">请选择生日</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">部门职务</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.position" placeholder="请输入部门职务">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">手机号码</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.mobile" placeholder="请输入手机号码">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">联系人备用邮箱</label>
|
|
|
+ <div class="input-with-icon">
|
|
|
+ <input type="text" class="form-input" v-model="formData.contactBackupEmail" placeholder="请输入联系人备用邮箱">
|
|
|
+ <span class="icon-btn minus">-</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">固定电话</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.tel" placeholder="请输入固定电话">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">传真号码</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.contactFax" placeholder="请输入传真号码">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">宅电</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.homeTel" placeholder="请输入内容">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">QQ</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.qq" placeholder="请输入QQ">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">SKYPE</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.skype" placeholder="请输入SKYPE">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">旺旺</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.ww" placeholder="请输入旺旺">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">微信</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.wechat" placeholder="请输入微信">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">Twitter</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.twitter" placeholder="请输入Twitter">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">LinkedIn</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.linkedin" placeholder="请输入LinkedIn">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">Facebook</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.facebook" placeholder="请输入Facebook">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">Whatsapp</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.whatsapp" placeholder="请输入Whatsapp">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">所在地区</label>
|
|
|
+ <input type="text" class="form-input" v-model="formData.contactRegion" placeholder="请输入所在地区">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button class="btn btn-secondary" @click="handleClose">取消</button>
|
|
|
+ <button class="btn btn-primary" @click="handleAdd"><i class="fas fa-plus"></i> 添加</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, defineProps, defineEmits } from 'vue'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ showModal: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const emit = defineEmits(['close', 'add'])
|
|
|
+
|
|
|
+// 表单数据
|
|
|
+const formData = ref({
|
|
|
+ customerCode: '',
|
|
|
+ regionName: '',
|
|
|
+ ownerUser: '',
|
|
|
+ customerName: '',
|
|
|
+ customerStatus: 'no_need',
|
|
|
+ websiteList: [''], // 最多4条(主+3备用)
|
|
|
+ emailList: [''], // 最多4条(主+3备用)
|
|
|
+ intentProduct: '',
|
|
|
+ customerType: '',
|
|
|
+ source: '',
|
|
|
+ economicNature: '',
|
|
|
+ level: 'A',
|
|
|
+ creditLevel: 'good',
|
|
|
+ alias: '',
|
|
|
+ remark: '',
|
|
|
+ scale: '',
|
|
|
+ industry: '',
|
|
|
+ address: '',
|
|
|
+ postcode: '',
|
|
|
+ fax: '',
|
|
|
+ companyEmail: '',
|
|
|
+ backupEmail: '',
|
|
|
+ contactPhone: '',
|
|
|
+ gender: 'unknown',
|
|
|
+ role: '',
|
|
|
+ birthday: '',
|
|
|
+ position: '',
|
|
|
+ mobile: '',
|
|
|
+ contactBackupEmail: '',
|
|
|
+ tel: '',
|
|
|
+ contactFax: '',
|
|
|
+ homeTel: '',
|
|
|
+ qq: '',
|
|
|
+ skype: '',
|
|
|
+ ww: '',
|
|
|
+ wechat: '',
|
|
|
+ twitter: '',
|
|
|
+ linkedin: '',
|
|
|
+ facebook: '',
|
|
|
+ whatsapp: '',
|
|
|
+ contactRegion: ''
|
|
|
+})
|
|
|
+
|
|
|
+// 企业网址 新增
|
|
|
+const addWebsite = () => {
|
|
|
+ if (formData.value.websiteList.length >= 4) return
|
|
|
+ formData.value.websiteList.push('')
|
|
|
+}
|
|
|
+// 企业网址 删除
|
|
|
+const delWebsite = (index) => {
|
|
|
+ formData.value.websiteList.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+// 联系人邮箱 新增
|
|
|
+const addEmail = () => {
|
|
|
+ if (formData.value.emailList.length >= 4) return
|
|
|
+ formData.value.emailList.push('')
|
|
|
+}
|
|
|
+// 联系人邮箱 删除
|
|
|
+const delEmail = (index) => {
|
|
|
+ formData.value.emailList.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+// 关闭弹窗 & 重置表单
|
|
|
+const handleClose = () => {
|
|
|
+ formData.value = {
|
|
|
+ customerCode: '',
|
|
|
+ regionName: '',
|
|
|
+ ownerUser: '',
|
|
|
+ customerName: '',
|
|
|
+ customerStatus: 'no_need',
|
|
|
+ websiteList: [''],
|
|
|
+ emailList: [''],
|
|
|
+ intentProduct: '',
|
|
|
+ customerType: '',
|
|
|
+ source: '',
|
|
|
+ economicNature: '',
|
|
|
+ level: 'A',
|
|
|
+ creditLevel: 'good',
|
|
|
+ alias: '',
|
|
|
+ remark: '',
|
|
|
+ scale: '',
|
|
|
+ industry: '',
|
|
|
+ address: '',
|
|
|
+ postcode: '',
|
|
|
+ fax: '',
|
|
|
+ companyEmail: '',
|
|
|
+ backupEmail: '',
|
|
|
+ contactPhone: '',
|
|
|
+ gender: 'unknown',
|
|
|
+ role: '',
|
|
|
+ birthday: '',
|
|
|
+ position: '',
|
|
|
+ mobile: '',
|
|
|
+ contactBackupEmail: '',
|
|
|
+ tel: '',
|
|
|
+ contactFax: '',
|
|
|
+ homeTel: '',
|
|
|
+ qq: '',
|
|
|
+ skype: '',
|
|
|
+ ww: '',
|
|
|
+ wechat: '',
|
|
|
+ twitter: '',
|
|
|
+ linkedin: '',
|
|
|
+ facebook: '',
|
|
|
+ whatsapp: '',
|
|
|
+ contactRegion: ''
|
|
|
+ }
|
|
|
+ emit('close')
|
|
|
+}
|
|
|
+
|
|
|
+// 提交表单
|
|
|
+const handleAdd = () => {
|
|
|
+ const { websiteList, emailList, regionName, ownerUser, customerName, customerStatus } = formData.value
|
|
|
+ if (!regionName || !ownerUser || !customerName || !customerStatus) {
|
|
|
+ alert('请填写所有必填项!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 过滤空值
|
|
|
+ const params = {
|
|
|
+ ...formData.value,
|
|
|
+ websiteList: websiteList.filter(item => item.trim()),
|
|
|
+ emailList: emailList.filter(item => item.trim())
|
|
|
+ }
|
|
|
+ emit('add', params)
|
|
|
+ handleClose()
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.modal-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 1000;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.modal {
|
|
|
+ background: var(--bg-card);
|
|
|
+ border-radius: 16px;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 800px;
|
|
|
+ max-height: 90vh;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+}
|
|
|
+
|
|
|
+.modal-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-close {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ background: var(--bg-hover);
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-close:hover {
|
|
|
+ background: var(--border);
|
|
|
+ color: var(--text-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.modal-body {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 12px;
|
|
|
+ padding: 20px;
|
|
|
+ border-top: 1px solid var(--border);
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ background: var(--bg-hover);
|
|
|
+ padding: 8px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 行布局:保留两列,统一间距 */
|
|
|
+.form-row {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ align-items: flex-start; /* 关键:多行输入时顶部对齐,避免留白 */
|
|
|
+}
|
|
|
+.form-row .left,.form-row .right{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.form-group {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/* 多行输入专属样式 */
|
|
|
+.multi-input-group {
|
|
|
+ gap: 4px; /* 标签与输入组间距缩小 */
|
|
|
+}
|
|
|
+
|
|
|
+.form-group.full-width {
|
|
|
+ grid-column: 1 / -1;
|
|
|
+}
|
|
|
+
|
|
|
+.form-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-input,
|
|
|
+.form-select,
|
|
|
+.form-textarea {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 14px;
|
|
|
+ background: var(--bg-dark);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 8px;
|
|
|
+ color: var(--text-primary);
|
|
|
+ font-size: 13px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.form-input:focus,
|
|
|
+.form-select:focus,
|
|
|
+.form-textarea:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: var(--primary);
|
|
|
+}
|
|
|
+
|
|
|
+.form-textarea {
|
|
|
+ min-height: 80px;
|
|
|
+ resize: vertical;
|
|
|
+}
|
|
|
+
|
|
|
+.required {
|
|
|
+ color: var(--danger, #f56c6c);
|
|
|
+}
|
|
|
+
|
|
|
+/* 单条输入容器,紧凑间距 */
|
|
|
+.input-item {
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+.input-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.input-with-icon {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.icon-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 12px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ color: var(--primary);
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+.icon-btn.minus {
|
|
|
+ color: var(--danger, #f56c6c);
|
|
|
+}
|
|
|
+
|
|
|
+.radio-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 16px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.radio-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-secondary {
|
|
|
+ background: var(--bg-hover);
|
|
|
+ color: var(--text-secondary);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-primary {
|
|
|
+ background: var(--primary);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|