8 changed files with 797 additions and 20 deletions
@ -0,0 +1,342 @@ |
|||
<template> |
|||
<div class="section"> |
|||
<div class="section-title">活动信息</div> |
|||
|
|||
<!-- 入企单位 --> |
|||
<van-field v-model="formData.enforcementUnit" name="enforcementUnit" label="入企单位" placeholder="请输入入企单位" |
|||
:rules="[{ required: true, message: '请填写入企单位' }]" required /> |
|||
|
|||
<!-- 入企人员 --> |
|||
<div class="form-row required"> |
|||
<div class="form-label"><span class="required-mark">*</span>入企人员</div> |
|||
<div class="form-value person-select"> |
|||
<div class="person-item default-person"> |
|||
<span>{{ defaultPerson?.name }} {{ defaultPerson?.phonenumber }}</span> |
|||
</div> |
|||
<div v-for="(person, index) in additionalPersons" :key="index" class="person-item-add"> |
|||
<span @click="$emit('openPersonPicker', index)" :class="{ placeholder: !person.name }"> |
|||
{{ person.name || '请选择' }} |
|||
</span> |
|||
<van-icon name="close" class="remove-icon" @click="$emit('removePerson', index)" /> |
|||
</div> |
|||
<div class="person-add"> |
|||
<span @click="$emit('openPersonPicker', -1)">请选择</span> |
|||
<van-icon name="add-o" class="add-circle-icon" @click="$emit('addPerson')" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 隐藏字段用于验证入企人员 --> |
|||
<van-field v-model="hasPerson" name="enforcementPerson" :rules="[{ required: true, message: '请选择入企人员' }]" |
|||
style="display: none;" /> |
|||
|
|||
<!-- 入企事由 --> |
|||
<van-field v-model="formData.enforcementMatter" name="enforcementMatter" label="入企事由" |
|||
:placeholder="formData.enforcementMatter || '请选择'" readonly clickable |
|||
:rules="[{ required: true, message: '请选择入企事由' }]" required @click="showMatterPicker = true" /> |
|||
|
|||
<!-- 入企事由选择弹窗 --> |
|||
<van-popup v-model:show="showMatterPicker" round position="bottom"> |
|||
<van-picker :columns="matterOptions" title="选择入企事由" @confirm="selectMatter" |
|||
@cancel="showMatterPicker = false" /> |
|||
</van-popup> |
|||
|
|||
<!-- 入企事项 --> |
|||
<van-field v-model="formData.taskSource" name="taskSource" label="入企事项" placeholder="请输入入企事项" type="textarea" |
|||
:rules="[{ required: true, message: '请填写入企事项' }]" required rows="3" maxlength="1000" show-word-limit /> |
|||
<!-- 活动依据 --> |
|||
<div class="basis-container"> |
|||
<div v-for="(basis, index) in formData.enforcementBases" :key="index" class="form-row basis-row"> |
|||
<div class="form-label">活动依据</div> |
|||
<div class="form-value basis-wrapper"> |
|||
<span @click="$emit('openBasisPicker', index)" :class="{ placeholder: !basis }"> |
|||
{{ basis || '请选择' }} |
|||
</span> |
|||
<van-icon v-if="index === formData.enforcementBases.length - 1" name="add-o" class="add-circle-icon" |
|||
@click.stop="$emit('addBasis')" /> |
|||
<van-icon v-else name="close" class="close-btn" @click.stop="$emit('removeBasis', index)" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 原因 --> |
|||
<van-field v-model="formData.reason" name="reason" label="原因" placeholder="请输入原因" readonly /> |
|||
|
|||
<!-- 入企时间 --> |
|||
<van-field v-model="formData.enforcementTime" name="enforcementTime" label="入企时间" placeholder="请选择入企时间" |
|||
readonly /> |
|||
|
|||
<!-- 附件上传 --> |
|||
<div class="attachment-section"> |
|||
<div class="attachment-header"> |
|||
<span class="attachment-label">附件</span> |
|||
<span class="attachment-hint">(不多于8张)</span> |
|||
</div> |
|||
<div class="attachment-list"> |
|||
<div v-for="(file, index) in formData.attachments" :key="index" class="attachment-item"> |
|||
<img :src="file.url" mode="aspectFill" class="attachment-image" /> |
|||
<van-icon name="close" class="attachment-remove" @click="$emit('removeAttachment', index)" /> |
|||
</div> |
|||
<div v-if="formData.attachments.length < 8" class="attachment-add" @click="$emit('addAttachment')"> |
|||
<van-icon name="camera-o" class="attachment-icon" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="NonEnforcementInfoSection"> |
|||
import { ref, computed } from 'vue'; |
|||
|
|||
// 入企事由选项（符合 Vant Picker 格式） |
|||
const matterOptions = [ |
|||
{ text: '日常巡查', value: '日常巡查' }, |
|||
{ text: '普法宣传', value: '普法宣传' }, |
|||
{ text: '企业服务', value: '企业服务' }, |
|||
{ text: '技术指导', value: '技术指导' }, |
|||
{ text: '诉求处理', value: '诉求处理' }, |
|||
{ text: '培训', value: '培训' }, |
|||
{ text: '调研', value: '调研' }, |
|||
{ text: '其他', value: '其他' } |
|||
]; |
|||
|
|||
// 弹窗显示状态 |
|||
const showMatterPicker = ref(false); |
|||
|
|||
// 选择入企事由 |
|||
const selectMatter = ({ selectedOptions }) => { |
|||
props.formData.enforcementMatter = selectedOptions[0]?.value || ''; |
|||
showMatterPicker.value = false; |
|||
}; |
|||
|
|||
const props = defineProps({ |
|||
formData: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
defaultPerson: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
additionalPersons: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}); |
|||
|
|||
defineEmits([ |
|||
'openPersonPicker', |
|||
'removePerson', |
|||
'addPerson', |
|||
'openBasisPicker', |
|||
'addBasis', |
|||
'removeBasis', |
|||
'addAttachment', |
|||
'removeAttachment' |
|||
]); |
|||
|
|||
// 计算属性：是否有入企人员（转换为字符串用于表单验证） |
|||
const hasPerson = computed(() => { |
|||
return props.defaultPerson?.name || props.additionalPersons.some(p => p.name) ? '1' : ''; |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.section { |
|||
background: #fff; |
|||
border-radius: 0.16rem; |
|||
margin-bottom: 0.24rem; |
|||
overflow: hidden; |
|||
|
|||
:deep(.van-field__label) { |
|||
margin-right: 6px; |
|||
color: #000; |
|||
} |
|||
} |
|||
|
|||
.section-title { |
|||
padding: 0.28rem 0.32rem; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #000; |
|||
} |
|||
|
|||
.form-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0.32rem; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
&.required .form-label { |
|||
position: relative; |
|||
padding-left: 0.1rem; |
|||
} |
|||
} |
|||
|
|||
.required-mark { |
|||
color: #ee0a24; |
|||
font-size: 0.32rem; |
|||
margin-right: 0.08rem; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.form-label { |
|||
font-size: 14px; |
|||
color: #333; |
|||
flex: none; |
|||
width: 2.4rem; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.form-value { |
|||
flex: 1; |
|||
font-size: 14px; |
|||
color: #333; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.placeholder { |
|||
color: #c8c9cc; |
|||
} |
|||
} |
|||
|
|||
.person-select { |
|||
display: block; |
|||
} |
|||
|
|||
.person-item { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
|
|||
&.default-person span { |
|||
color: #333; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
.person-item-add { |
|||
padding: 10px 10px 0px 0px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.remove-icon { |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
|
|||
.person-add { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
color: #c8c9cc; |
|||
font-size: 14px; |
|||
padding: 10px 10px 0px 0px; |
|||
|
|||
.add-circle-icon { |
|||
font-size: 16px; |
|||
color: #333; |
|||
} |
|||
} |
|||
|
|||
.basis-container { |
|||
margin-bottom: 0.12rem; |
|||
margin-left: 6px; |
|||
} |
|||
|
|||
.basis-row { |
|||
padding: 0.24rem 0.32rem; |
|||
} |
|||
|
|||
.basis-wrapper { |
|||
margin-left: 8px; |
|||
display: flex; |
|||
align-items: end; |
|||
justify-content: space-between; |
|||
padding-right: 10px; |
|||
|
|||
.close-btn { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.add-circle-icon { |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
|
|||
.attachment-section { |
|||
padding: 0.32rem; |
|||
border-top: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.attachment-header { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 0.2rem; |
|||
} |
|||
|
|||
.attachment-label { |
|||
font-size: 14px; |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.attachment-hint { |
|||
font-size: 12px; |
|||
color: #999; |
|||
margin-left: 0.1rem; |
|||
} |
|||
|
|||
.attachment-list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 0.15rem; |
|||
} |
|||
|
|||
.attachment-item { |
|||
width: 2.2rem; |
|||
height: 2.2rem; |
|||
position: relative; |
|||
} |
|||
|
|||
.attachment-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 0.1rem; |
|||
} |
|||
|
|||
.attachment-remove { |
|||
position: absolute; |
|||
top: -0.15rem; |
|||
right: -0.15rem; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
color: #fff; |
|||
border-radius: 50%; |
|||
width: 0.48rem; |
|||
height: 0.48rem; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.attachment-add { |
|||
width: 2.2rem; |
|||
height: 2.2rem; |
|||
border: 1px dashed #ccc; |
|||
border-radius: 0.1rem; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.attachment-icon { |
|||
font-size: 0.8rem; |
|||
color: #ccc; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,369 @@ |
|||
<template> |
|||
<div class="history-activity-list"> |
|||
<!-- 搜索栏 --> |
|||
<van-search v-model="searchText" show-action placeholder="入企事项/入企部门/入企人员" clearable clear-trigger="always" |
|||
@clear="onClear" @search="onSearch"> |
|||
<template #action> |
|||
<div @click="onSearch">搜索</div> |
|||
</template> |
|||
</van-search> |
|||
|
|||
<!-- 日期快捷筛选按钮 --> |
|||
<div class="search-button-list"> |
|||
<van-button plain hairline :class="dateType === null ? 'search-btn active' : 'search-btn'" |
|||
@click="searchDateType(null)" round type="primary" size="mini">全部</van-button> |
|||
<van-button plain hairline :class="dateType === 1 ? 'search-btn active' : 'search-btn'" |
|||
@click="searchDateType(1)" round type="primary" size="mini">本月</van-button> |
|||
<van-button plain hairline :class="dateType === 2 ? 'search-btn active' : 'search-btn'" |
|||
@click="searchDateType(2)" round type="primary" size="mini">本季</van-button> |
|||
<van-button plain hairline :class="dateType === 3 ? 'search-btn active' : 'search-btn'" |
|||
@click="searchDateType(3)" round type="primary" size="mini">本年</van-button> |
|||
<van-button plain hairline :class="dateType === 9 ? 'search-btn active' : 'search-btn'" |
|||
@click="openDatePicker" round type="primary" size="mini">筛选</van-button> |
|||
</div> |
|||
|
|||
<!-- 指定月份显示 --> |
|||
<div class="search-date-display" v-show="dateShow"> |
|||
<span class="date-label" @click="openDatePicker">{{ dateSearchDisplay }}</span> |
|||
</div> |
|||
|
|||
<!-- 月份选择器弹出层 --> |
|||
<van-popup v-model:show="showDatePicker" position="bottom"> |
|||
<van-date-picker title="选择月度" v-model="currentDate" :min-date="minDate" :max-date="maxDate" |
|||
:columns-type="['year', 'month']" @confirm="onDateConfirm" @cancel="showDatePicker = false" /> |
|||
</van-popup> |
|||
|
|||
<!-- 活动列表 --> |
|||
<van-list |
|||
v-model:loading="loading" |
|||
:finished="finished" |
|||
finished-text="已加载全部数据" |
|||
@load="onLoad" |
|||
class="activity-list" |
|||
> |
|||
<van-empty v-if="finished && activityList.length === 0" description="暂无数据" /> |
|||
<div v-for="(item, index) in activityList" :key="index" class="activity-card-item"> |
|||
<div class="activity-header"> |
|||
<span class="activity-time">{{ formatDate(item.createTime) }}</span> |
|||
<span class="activity-status" v-if="item.isRealUnion === 1">联</span> |
|||
</div> |
|||
<div class="activity-divider"></div> |
|||
<div class="activity-body"> |
|||
<div class="activity-title">{{ item.lawEnforcementItemText || '-' }}</div> |
|||
<div class="activity-row"> |
|||
<span class="activity-label">入企部门：</span> |
|||
<span>{{ item.lawEnforcement || '-' }}</span> |
|||
</div> |
|||
<div class="activity-row"> |
|||
<span class="activity-label">入企人员：</span> |
|||
<span>{{ getEnforcerDisplay(item) }}</span> |
|||
</div> |
|||
<div class="activity-row"> |
|||
<span class="activity-label">企业名称：</span> |
|||
<span>{{ enterpriseName || '-' }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</van-list> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="HistoryActivityList"> |
|||
import { ref } from 'vue'; |
|||
import { queryNonRegistrationList } from '@/api/enforcement/index'; |
|||
|
|||
const props = defineProps({ |
|||
enterpriseName: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}); |
|||
|
|||
// ========== 数据 ========== |
|||
// 活动列表数据 |
|||
const activityList = ref([]); |
|||
|
|||
// 分页相关 |
|||
const pageNum = ref(1); |
|||
const pageSize = ref(10); |
|||
const hasMore = ref(true); |
|||
const loading = ref(false); |
|||
const finished = ref(false); |
|||
|
|||
// 搜索相关 |
|||
const searchText = ref(''); |
|||
|
|||
// 日期筛选 |
|||
const dateType = ref(null); |
|||
const dateSearch = ref(null); |
|||
const dateSearchDisplay = ref(''); |
|||
const dateShow = ref(false); |
|||
const showDatePicker = ref(false); |
|||
const currentDate = ref(['2026', '01']); |
|||
const minDate = new Date(2020, 0, 1); |
|||
const maxDate = new Date(2030, 11, 31); |
|||
|
|||
// ========== 格式化日期 ========== |
|||
const formatDate = (dateStr) => { |
|||
if (!dateStr) return '-'; |
|||
const d = new Date(dateStr.replace ? dateStr.replace(/-/g, '/') : dateStr); |
|||
if (isNaN(d.getTime())) return dateStr; |
|||
const y = d.getFullYear(); |
|||
const m = String(d.getMonth() + 1).padStart(2, '0'); |
|||
const day = String(d.getDate()).padStart(2, '0'); |
|||
return `${y}-${m}-${day}`; |
|||
}; |
|||
|
|||
// ========== 执法人员展示 ========== |
|||
const getEnforcerDisplay = (item) => { |
|||
if (item.lawEnforcerDisplay) return item.lawEnforcerDisplay; |
|||
const names = []; |
|||
if (item.lawEnforcer) names.push(item.lawEnforcer); |
|||
if (item.lawEnforcerTwo) names.push(item.lawEnforcerTwo); |
|||
if (Array.isArray(item.lawEnforcer2List)) names.push(...item.lawEnforcer2List); |
|||
return names.length ? names.join('、') : '-'; |
|||
}; |
|||
|
|||
// ========== 获取活动数据 ========== |
|||
const fetchActivityList = (isLoadMore = false) => { |
|||
const params = { |
|||
pageSize: pageSize.value, |
|||
pageNum: isLoadMore ? pageNum.value : 1 |
|||
}; |
|||
|
|||
// 关键字搜索 |
|||
if (searchText.value) { |
|||
params.searchValue = searchText.value; |
|||
} |
|||
// 日期筛选 |
|||
if (dateSearch.value) { |
|||
params.dateSearch = dateSearch.value; |
|||
} |
|||
|
|||
queryNonRegistrationList(params, (res) => { |
|||
loading.value = false; |
|||
if (res.code === 200) { |
|||
const data = res.data.list || []; |
|||
if (isLoadMore) { |
|||
activityList.value = [...activityList.value, ...data]; |
|||
} else { |
|||
activityList.value = data; |
|||
pageNum.value = 1; |
|||
} |
|||
// 判断是否还有更多数据 |
|||
hasMore.value = data.length >= pageSize.value; |
|||
finished.value = !hasMore.value; |
|||
if (hasMore.value) { |
|||
pageNum.value++; |
|||
} |
|||
console.log('历史活动数据加载成功:', activityList.value); |
|||
} else { |
|||
console.error('获取历史活动失败:', res.msg); |
|||
finished.value = true; |
|||
} |
|||
}, (err) => { |
|||
loading.value = false; |
|||
finished.value = true; |
|||
console.error('获取历史活动接口失败', err); |
|||
}); |
|||
}; |
|||
|
|||
// ========== 列表加载处理 ========== |
|||
const onLoad = () => { |
|||
if (loading.value || !hasMore.value) return; |
|||
fetchActivityList(true); |
|||
}; |
|||
|
|||
// ========== 重置分页 ========== |
|||
const resetPagination = () => { |
|||
pageNum.value = 1; |
|||
hasMore.value = true; |
|||
loading.value = false; |
|||
finished.value = false; |
|||
activityList.value = []; |
|||
}; |
|||
|
|||
// ========== 搜索 ========== |
|||
const onSearch = () => { |
|||
resetPagination(); |
|||
loading.value = true; |
|||
fetchActivityList(); |
|||
}; |
|||
|
|||
// ========== 清空搜索 ========== |
|||
const onClear = () => { |
|||
searchText.value = ''; |
|||
onSearch(); |
|||
}; |
|||
|
|||
// ========== 日期类型切换 ========== |
|||
const searchDateType = (val) => { |
|||
dateType.value = val; |
|||
dateShow.value = false; |
|||
|
|||
const now = new Date(); |
|||
const year = now.getFullYear(); |
|||
const month = String(now.getMonth() + 1).padStart(2, '0'); |
|||
|
|||
if (val === null) { |
|||
// 全部 |
|||
dateSearch.value = null; |
|||
} else if (val === 1) { |
|||
// 本月 - 传 yyyy-mm-dd 格式（当月第一天） |
|||
dateSearch.value = `${year}-${month}-01`; |
|||
} else if (val === 2) { |
|||
// 本季 - 传季度格式 yyyy-Qq |
|||
const quarter = Math.ceil((now.getMonth() + 1) / 3); |
|||
dateSearch.value = `${year}-Q${quarter}`; |
|||
} else if (val === 3) { |
|||
// 本年 - 传年份格式 yyyy |
|||
dateSearch.value = `${year}`; |
|||
} |
|||
|
|||
onSearch(); |
|||
}; |
|||
|
|||
// ========== 打开月份选择器 ========== |
|||
const openDatePicker = () => { |
|||
dateType.value = 9; |
|||
showDatePicker.value = true; |
|||
}; |
|||
|
|||
// ========== 月份选择确认 ========== |
|||
const onDateConfirm = (value) => { |
|||
const year = value.selectedValues[0]; |
|||
const month = value.selectedValues[1]; |
|||
dateSearchDisplay.value = year + '/' + month; |
|||
dateSearch.value = `${year}-${month}-01`; // 传 yyyy-mm-dd 格式 |
|||
dateType.value = 9; |
|||
dateShow.value = true; |
|||
showDatePicker.value = false; |
|||
onSearch(); |
|||
}; |
|||
|
|||
// 初始化加载 |
|||
fetchActivityList(); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.history-activity-list { |
|||
// padding: 0 0.27rem; |
|||
background-color: #fff; |
|||
min-height: calc(100vh - 150px); |
|||
|
|||
/* ===== 搜索按钮行 ===== */ |
|||
.search-button-list { |
|||
display: flex; |
|||
flex-direction: row; |
|||
padding: 10px; |
|||
gap: 0.15rem; |
|||
.search-btn { |
|||
flex: 1; |
|||
height: 0.7rem; |
|||
background: #ebebeb; |
|||
border-color: #ebebeb; |
|||
color: #999; |
|||
font-size: 0.3rem; |
|||
} |
|||
|
|||
.search-btn.active { |
|||
background-color: #d9e6fd; |
|||
border-color: #75a5fb; |
|||
color: #1367fe; |
|||
} |
|||
} |
|||
|
|||
/* ===== 日期显示 ===== */ |
|||
.search-date-display { |
|||
padding: 10px; |
|||
.date-label { |
|||
color: #c1bfbf; |
|||
font-size: 0.4rem; |
|||
} |
|||
} |
|||
|
|||
/* ===== 卡片样式 ===== */ |
|||
.activity-card-item { |
|||
background: #fff; |
|||
border-radius: 0.2rem; |
|||
margin-bottom: 0.27rem; |
|||
padding: 0.2rem 0.3rem; |
|||
position: relative; |
|||
} |
|||
|
|||
.activity-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.activity-time { |
|||
color: #c1bfbf; |
|||
font-size: 0.32rem; |
|||
} |
|||
|
|||
.activity-status { |
|||
color: #fff; |
|||
font-size: 0.32rem; |
|||
background: #1367fe; |
|||
width: 20px; |
|||
height: 20px; |
|||
text-align: center; |
|||
line-height: 22px; |
|||
border-radius: 50px; |
|||
} |
|||
} |
|||
|
|||
.activity-divider { |
|||
height: 1px; |
|||
background: #f4f5f6; |
|||
margin: 0.15rem 0; |
|||
} |
|||
|
|||
.activity-body { |
|||
.activity-title { |
|||
font-size: 0.4rem; |
|||
font-weight: bold; |
|||
color: #000; |
|||
margin-bottom: 0.15rem; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.activity-row { |
|||
display: flex; |
|||
font-size: 0.35rem; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
|
|||
.activity-label { |
|||
color: #323233; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.activity-list { |
|||
height: calc(100vh - 200px); |
|||
} |
|||
} |
|||
|
|||
/* ===== Vant 搜索框样式覆盖 ===== */ |
|||
:deep(.van-search__content) { |
|||
height: 0.9rem; |
|||
border: 1px solid #ececec; |
|||
border-radius: 0.15rem 0 0 0.15rem; |
|||
} |
|||
|
|||
:deep(.van-search__action) { |
|||
margin: 0 3% 0 0; |
|||
width: 10%; |
|||
height: 0.9rem; |
|||
background: #1367fe; |
|||
border: 0.01rem solid #1367fe; |
|||
border-radius: 0 0.15rem 0.15rem 0; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 0.9rem; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue