<template>
|
<div class="eventTickets">
|
<div class="flex-container" :style="{ paddingTop: route.query.topMargin + 'px' }">
|
<div class="searchTop">
|
<van-search placeholder="请输入事件名称" :animation="true" v-model="listParams.keyword" :show-action="false"
|
shape="round" @search="onSearch" @clear="handleClear"></van-search>
|
<div class="Hamburger" @click="selectag"><img :src="toggleSelectImg" alt="" /></div>
|
</div>
|
<div class="listBox" v-if="!showhanbao">
|
<van-tabs v-model:active="currentTab" @change="handleChange" line-width="26">
|
<van-tab v-for="tab in filteredTabs" :key="tab.key" :name="tab.key" :title="tab.name">
|
<template #title>
|
<div class="custom-tab-title">
|
<div class="tab-text">{{ tab.name }}</div>
|
<div class="tab-badge">{{ tab.badge.value }}</div>
|
</div>
|
</template>
|
</van-tab>
|
</van-tabs>
|
<div class="eventBox" ref="eventBoxRef">
|
<div class="eventItem" v-for="(item, index) in dataList" :key="index">
|
<img :src="item.smallUrl" alt="" @click="detailHandle(item, index + 1)" />
|
<div class="itemTitle">{{ item.event_name }}</div>
|
<div class="itemContent">
|
<div class="itemStatus">
|
<span v-if="item.status === 0" style="background-color: #ff7411"></span>
|
<span v-else-if="item.status === 2" style="background-color: #ff472f"></span>
|
<span v-else-if="item.status === 3" style="background-color: #ffc300"></span>
|
<span v-else-if="item.status === 4" style="background-color: #06d957"></span>
|
<p>{{ formatDate(item.create_time) }}</p>
|
</div>
|
<div class="fullBtn" @click.stop="previewTheImage(item)">
|
<img :src="sfSvg" alt="" />
|
</div>
|
</div>
|
</div>
|
<!-- 空状态 -->
|
<van-empty v-if="!loading && dataList.length === 0" description="暂无数据" />
|
|
<!-- 加载状态提示 -->
|
<div class="load-status" v-if="dataList.length > 0">
|
<div v-if="loading && dataList.length > 0">加载中...</div>
|
<div v-if="error && dataList.length > 0" @click="reloadData">加载失败，点击重新加载</div>
|
</div>
|
</div>
|
<div class="add-task-btn" v-if="showAddBtn">
|
<img :src="addBtnSvg" alt="" @click="addTask">
|
</div>
|
</div>
|
<div class="selectContainer" v-else>
|
<div class="leftTab">
|
<div class="tabitem" v-for="(item, index) in leftTabList" :key="index" @click="handleTabClick(item)"
|
:class="{ 'active': activeTab === item }">
|
{{ item }}
|
</div>
|
</div>
|
<div class="rightContent">
|
<div class="rightBox">
|
<div v-for="(item, index) in rightDataList[activeTab]" :key="index" class="contentItem"
|
:class="{ 'on': item.isSelect }" @click="filteringAlgorithms(item)">
|
<div class="imagediv">
|
<img :src="`${baseUrl}/app-sf-icon-source/${item.iconName}.png`" @error="handleImageError" />
|
</div>
|
<div class="imgName">{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="typesBtn">
|
<div class="resertBtn" @click="resetSelection">重置</div>
|
<div class="submissionBtn" @click="handleAitypes">搜索</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import {ALL_WORK_ORDER_TYPE_OPTIONS} from '@ztzf/constants'
|
import addBtnSvg from '@/appDataSource/add.png'
|
|
import { usePermission } from '@/appPages/work/usePermission'
|
import hbb from '@/appDataSource/appwork/hbb.svg'
|
import hbbSelect from '@/appDataSource/appwork/hbbSelect.svg'
|
import sfSvg from '@/appDataSource/inspectionTask/sf.svg'
|
import { getShowImg, getSmallImg } from '@/utils/util'
|
import { getList, getstatusCount, getDictionaryByCode, getChildList } from '/src/api/work/index.js'
|
import dayjs from 'dayjs'
|
import { useStore } from 'vuex'
|
import _ from 'lodash'
|
import { onMounted, onUnmounted, ref, computed } from 'vue'
|
import { showImagePreview } from 'vant'
|
import { useRoute } from 'vue-router'
|
const route = useRoute()
|
const baseUrl = import.meta.env.VITE_APP_PICTURE_URL
|
const store = useStore()
|
const userInfo = computed(() => store?.state?.user?.userInfo)
|
const { permission, getButtonsApi } = usePermission()
|
|
const showAddBtn = ref(false)
|
let AlgorithmData = ref([])
|
const dataList = ref([])
|
const currentTab = ref('all')
|
const currentIndex = ref(null)
|
const showImages = ref([])
|
const showhanbao = ref(false)
|
const eventBoxRef = ref(null)
|
// 分页与加载状态变量
|
const pageParams = ref({
|
current: 1,
|
size: 10,
|
total: 0,
|
})
|
const totalNum = ref(0)
|
const loading = ref(false)
|
const finished = ref(false)
|
const error = ref(false)
|
const listParams = ref({
|
status: null,
|
source: 1,
|
department: '',
|
keyword: '',
|
parentId: '1905161774696075265',
|
word_order_types: [],
|
aiType: '',
|
})
|
const tabList = ref([
|
{
|
name: '我的工单',
|
key: 'myTickets',
|
badge: {
|
value: 0,
|
},
|
},
|
{
|
name: '全部状态',
|
key: 'all',
|
badge: {
|
value: 0,
|
},
|
status: null,
|
},
|
{
|
name: '待审核',
|
key: 'pending',
|
badge: {
|
value: 0,
|
},
|
status: '2',
|
},
|
{
|
name: '待处理',
|
key: 'processing',
|
badge: {
|
value: 0,
|
},
|
status: '0',
|
},
|
{
|
name: '处理中',
|
key: 'inProgress',
|
badge: {
|
value: 0,
|
},
|
status: '3',
|
},
|
{
|
name: '已完成',
|
key: 'completed',
|
badge: {
|
value: 0,
|
},
|
status: '4',
|
},
|
])
|
const formatDate = dateString => {
|
return dayjs(dateString).format('MM/DD HH:mm')
|
}
|
// 动态过滤tabs，保证isShow为true/false
|
const filteredTabs = computed(() => {
|
const tabPending = permission.value?.tickets_tab_pending === true //待审核
|
const tabMyTickets = permission.value?.tickets_tab_mytickets === true //我的工单
|
const tabALL = permission.value?.tickets_allWorkOrders === true //全部工单
|
const tabInProgress = permission.value?.tickets_inProgress === true //处理中
|
const tabProcessing = permission.value?.tickets_pending === true //待处理
|
const tabCompleted = permission.value?.tickets_wasDone === true //已完成
|
return tabList.value
|
.map(tab => {
|
switch (tab.key) {
|
case 'all':
|
return { ...tab, isShow: tabALL } // 全部工单
|
case 'pending':
|
return { ...tab, isShow: tabPending } // 待审核
|
case 'myTickets':
|
return { ...tab, isShow: tabMyTickets } // 我的工单
|
case 'processing':
|
return { ...tab, isShow: tabProcessing } // 待处理
|
case 'inProgress':
|
return { ...tab, isShow: tabInProgress } // 处理中
|
case 'completed':
|
return { ...tab, isShow: tabCompleted } // 已完成
|
default:
|
return { ...tab, isShow: false } // 其他标签默认隐藏
|
}
|
})
|
.filter(tab => tab.isShow)
|
})
|
const initPermissionAndTabs = async () => {
|
await getButtonsApi()
|
|
// 设置默认tab
|
currentTab.value = defaultActiveTab.value
|
const currentTabItem = tabList.value.find(tab => tab.key === currentTab.value)
|
if (currentTabItem) {
|
listParams.value.status = currentTabItem.status
|
}
|
resetPageAndReload()
|
getstatusCountData()
|
}
|
// 计算默认激活的标签（无全部工单时优先激活待审核）
|
const defaultActiveTab = computed(() => {
|
const hasAllTab = filteredTabs.value.some(tab => tab.key === 'all')
|
const hasPendingTab = filteredTabs.value.some(tab => tab.key === 'pending')
|
if (!hasAllTab && hasPendingTab) {
|
return 'pending'
|
} else if (hasAllTab) {
|
return 'all'
|
} else {
|
return filteredTabs.value[0]?.key || 'all'
|
}
|
})
|
// 提取状态列表计算属性
|
const statusList = computed(() => {
|
const visibleTabs = filteredTabs.value
|
return visibleTabs
|
.filter(tab => tab.key !== 'all' && tab.key !== 'myTickets' && tab.value !== undefined)
|
.map(tab => String(tab.value))
|
})
|
const getDataList = async () => {
|
if (loading.value || finished.value) return
|
loading.value = true
|
error.value = false
|
const statusListVal = statusList.value
|
try {
|
const params = {
|
current: pageParams.value.current,
|
size: pageParams.value.size,
|
source: 1,
|
status: listParams.value.status,
|
event_name: listParams.value.keyword,
|
is_draft: currentTab.value === 'myTickets' ? 1 : undefined,
|
user_id: currentTab.value === 'myTickets' ? userInfo.value.user_id : undefined,
|
ai_types: listParams.value.aiType,
|
status_list: currentTab.value !== 'myTickets' ? statusListVal : undefined,
|
work_types: ALL_WORK_ORDER_TYPE_OPTIONS
|
}
|
const res = await getList(params)
|
const response = res.data.data
|
const newData =
|
response.records?.map(i => ({
|
...i,
|
smallUrl: getSmallImg(i.photo_url),
|
showUrl: getShowImg(i.photo_url),
|
})) || []
|
const newShowUrls = newData.map(item => item.showUrl)
|
pageParams.value.total = response.total || 0
|
if (pageParams.value.current === 1) {
|
dataList.value = newData
|
showImages.value = newShowUrls
|
} else {
|
dataList.value.push(...newData)
|
showImages.value.push(...newShowUrls)
|
}
|
// 判断是否加载完毕
|
finished.value = dataList.value.length >= pageParams.value.total
|
} catch (err) {
|
error.value = true
|
console.error('数据加载失败:', err)
|
} finally {
|
loading.value = false
|
}
|
}
|
|
let countRequestController = null
|
|
const debouncedGetStatusCount = _.debounce(async (params) => {
|
// 取消未完成的请求
|
if (countRequestController) {
|
countRequestController.abort()
|
}
|
|
const controller = new AbortController()
|
countRequestController = controller
|
|
try {
|
const res = await getstatusCount({
|
...params,
|
work_types: ALL_WORK_ORDER_TYPE_OPTIONS,
|
signal: controller.signal
|
})
|
|
// 请求完成后清理控制器
|
if (countRequestController === controller) {
|
countRequestController = null
|
}
|
|
|
const statusCount = res.data.data
|
const myNum = statusCount[6]
|
|
const totalCount = Object.entries(statusCount).reduce((sum, [key, count]) => {
|
if (key === '6') return sum
|
return sum + (count || 0)
|
}, 0)
|
|
totalNum.value = totalCount
|
tabList.value.forEach(tab => {
|
if (tab.key === 'all') {
|
tab.badge.value = totalCount || 0
|
} else if (tab.key === 'myTickets') {
|
tab.badge.value = myNum || 0
|
} else {
|
tab.badge.value = statusCount[String(tab.status)] || 0
|
}
|
})
|
|
// ... 处理数据的代码不变
|
} catch (error) {
|
if (error.name !== 'AbortError') {
|
console.error('获取状态统计失败:', error)
|
}
|
}
|
}, 500)
|
|
|
const getstatusCountData = () => {
|
const statusListVal = statusList.value
|
const params = {
|
source: 1,
|
event_name: listParams.value.keyword,
|
is_draft: currentTab.value === 'myTickets' ? 1 : undefined,
|
user_id: currentTab.value === 'myTickets' ? userInfo.value.user_id : undefined,
|
ai_types: listParams.value.aiType,
|
status_list: currentTab.value !== 'myTickets' ? statusListVal : undefined,
|
}
|
// 调用防抖后的请求方法
|
debouncedGetStatusCount(params)
|
}
|
const bindScrollEvent = () => {
|
const container = eventBoxRef.value
|
if (container && !container._hasScrollListener) {
|
container.addEventListener('scroll', handleContainerScroll)
|
container._hasScrollListener = true // 标记已绑定
|
}
|
}
|
const unbindScrollEvent = () => {
|
const container = eventBoxRef.value
|
if (container && container._hasScrollListener) {
|
container.removeEventListener('scroll', handleContainerScroll)
|
container._hasScrollListener = false // 清除标记
|
}
|
}
|
// 标签切换处理
|
const handleChange = key => {
|
const currentTabItem = tabList.value.find(tab => tab.key === key)
|
if (!currentTabItem) return
|
currentTab.value = key
|
listParams.value.status = currentTabItem.status
|
resetPageAndReload()
|
getstatusCountData()
|
}
|
|
// 详情
|
const detailHandle = (val, current) => {
|
const data = {
|
type: 'workid',
|
eventNum: val.event_num,
|
totalNum: totalNum.value,
|
keyword: listParams.value.keyword,
|
aiType: Array.isArray(listParams.value.aiType) ? listParams.value.aiType.join(',') : listParams.value.aiType || '',
|
current
|
}
|
|
if (currentTab.value !== 'myTickets') {
|
data.status = listParams.value.status
|
}
|
|
const transmitData = { data }
|
|
wx.miniProgram.navigateTo({ url: `/subPackages/workDetail/index?eventNum=${data.eventNum}&totalNum=${data.totalNum}&keyword=${data.keyword}&aiType=${data.aiType}&status=${data.status}¤t=${current}` })
|
wx.miniProgram.postMessage(transmitData)
|
uni.postMessage(transmitData)
|
}
|
// 算法列表过滤函数
|
const filterAlgorithmList = () => {
|
const keyword = listParams.value.keyword.toLowerCase()
|
let filteredData = {}
|
for (const key in rightAllDataList.value) {
|
filteredData[key] =
|
rightAllDataList.value[key]
|
?.filter(item => item.dictValue.toLowerCase().includes(keyword))
|
.map(item => ({ ...item, name: item.dictValue, iconName: item.dictKey })) || []
|
}
|
|
rightDataList.value = filteredData
|
}
|
|
// 搜索处理
|
const onSearch = () => {
|
if (showhanbao.value) {
|
filterAlgorithmList()
|
} else {
|
resetPageAndReload()
|
getstatusCountData()
|
}
|
}
|
|
const handleClear = () => {
|
listParams.value.keyword = ''
|
if (showhanbao.value) {
|
filterAlgorithmList()
|
} else {
|
resetPageAndReload()
|
}
|
|
// 清除所有选中状态
|
if (selectedAlgorithmIds.value.length > 0) {
|
selectedAlgorithmIds.value = []
|
Object.keys(rightAllDataList.value).forEach(key => {
|
rightAllDataList.value[key] = rightAllDataList.value[key].map(item => ({
|
...item,
|
isSelect: false,
|
}))
|
})
|
listParams.value.aiType = ''
|
}
|
|
getstatusCountData()
|
}
|
// 切换算法筛选
|
const selectag = () => {
|
showhanbao.value = !showhanbao.value
|
const hasAllTab = filteredTabs.value.some(tab => tab.key === 'all')
|
const defaultTab = hasAllTab ? 'all' : 'pending'
|
handleChange(defaultTab)
|
listParams.value.keyword = ''
|
if (showhanbao.value) {
|
filterAlgorithmList()
|
unbindScrollEvent()
|
} else {
|
resetPageAndReload()
|
nextTick(() => {
|
bindScrollEvent()
|
})
|
}
|
|
getstatusCountData()
|
}
|
const toggleSelectImg = computed(() => {
|
return selectedAlgorithmIds.value.length > 0 ? hbbSelect : hbb
|
})
|
|
// 筛选相关
|
const activeTab = ref('全部')
|
const leftTabList = ref(['全部'])
|
const rightDataList = ref({
|
'全部': [],
|
})
|
const rightAllDataList = ref({})
|
|
const handleTabClick = tab => {
|
activeTab.value = tab
|
}
|
// 算法数据
|
const requestDictionary = () => {
|
getChildList(listParams.value.current, listParams.value.size, listParams.value.parentId).then(res => {
|
AlgorithmData.value = res.data.data
|
const processedData = { '全部': [] }
|
const leftTabs = ['全部']
|
AlgorithmData.value.forEach(category => {
|
const categoryName = category.dictValue
|
leftTabs.push(categoryName)
|
processedData[categoryName] = []
|
|
if (category.children && category.children.length) {
|
const secondLevelData = category.children.map(item => ({
|
...item,
|
name: item.dictValue,
|
iconName: item.dictKey,
|
isSelect: false,
|
}))
|
processedData[categoryName] = secondLevelData
|
processedData['全部'] = [...processedData['全部'], ...secondLevelData]
|
}
|
})
|
|
rightDataList.value = processedData
|
|
rightAllDataList.value = {
|
...processedData,
|
}
|
|
leftTabList.value = leftTabs
|
})
|
}
|
// 算法筛选处理
|
const wordOrderType = ref('')
|
// 存储选中的算法ID
|
const selectedAlgorithmIds = ref([])
|
|
const filteringAlgorithms = val => {
|
// 切换选中状态
|
const isSelect = !val.isSelect
|
|
val.isSelect = isSelect
|
if (isSelect) {
|
if (!selectedAlgorithmIds.value.includes(val.dictKey)) {
|
selectedAlgorithmIds.value.push(val.dictKey)
|
}
|
} else {
|
selectedAlgorithmIds.value = selectedAlgorithmIds.value.filter(id => id !== val.dictKey)
|
}
|
|
wordOrderType.value = selectedAlgorithmIds.value.join(',')
|
|
Object.keys(rightAllDataList.value).forEach(key => {
|
rightAllDataList.value[key] = rightAllDataList.value[key].map(item => {
|
if (item.dictKey === val.dictKey) {
|
return { ...item, isSelect }
|
}
|
return item
|
})
|
})
|
|
rightDataList.value = {
|
...rightAllDataList.value,
|
}
|
}
|
// 提交
|
const handleAitypes = () => {
|
listParams.value.aiType = selectedAlgorithmIds.value
|
const hasAllTab = filteredTabs.value.some(tab => tab.key === 'all')
|
currentTab.value = hasAllTab ? 'all' : 'pending'
|
showhanbao.value = false
|
resetPageAndReload()
|
getstatusCountData()
|
nextTick(() => {
|
bindScrollEvent()
|
})
|
}
|
// 重置
|
const resetSelection = () => {
|
listParams.value.aiType = ''
|
selectedAlgorithmIds.value = []
|
wordOrderType.value = ''
|
Object.keys(rightAllDataList.value).forEach(key => {
|
rightAllDataList.value[key] = rightAllDataList.value[key].map(item => ({
|
...item,
|
isSelect: false,
|
}))
|
})
|
rightDataList.value = {
|
...rightAllDataList.value,
|
}
|
handleAitypes()
|
}
|
const handleImageError = e => {
|
e.target.src = `${baseUrl}/app-sf-icon-source/default.png`
|
}
|
|
// 预览图片
|
const previewTheImage = val => {
|
currentIndex.value = dataList.value.findIndex(item => item.event_num === val.event_num)
|
showImagePreview({
|
images: showImages.value,
|
startPosition: currentIndex.value,
|
})
|
}
|
// 滚动触底判断
|
const isContainerScrollToBottom = () => {
|
const container = eventBoxRef.value
|
if (!container) return false
|
const scrollHeight = container.scrollHeight
|
const scrollTop = container.scrollTop
|
const clientHeight = container.clientHeight
|
// 距离底部 200px 时触发加载
|
return scrollTop + clientHeight >= scrollHeight - 200
|
}
|
|
const handleContainerScroll = () => {
|
if (!loading.value && !finished.value && !error.value && isContainerScrollToBottom()) {
|
pageParams.value.current += 1
|
getDataList()
|
}
|
}
|
// 重置分页并重新加载
|
const resetPageAndReload = () => {
|
pageParams.value.current = 1
|
finished.value = false
|
error.value = false
|
getDataList()
|
}
|
|
// 重新加载（加载失败时）
|
const reloadData = () => {
|
getDataList()
|
}
|
|
const addTask = () => {
|
const transmitData = { data: { type: 'addWork' } }
|
wx.miniProgram.navigateTo({ url: `/subPackages/workDetail/addWork/index` })
|
wx.miniProgram.postMessage(transmitData)
|
uni.postMessage(transmitData)
|
}
|
watch(
|
() => route.query.updateKey,
|
(newValue, oldValue) => {
|
listParams.value.keyword = ''
|
wordOrderType.value = ''
|
selectedAlgorithmIds.value = []
|
listParams.value.aiType = ''
|
nextTick()
|
const hasAllTab = filteredTabs.value.some(tab => tab.key === 'all')
|
currentTab.value = hasAllTab ? 'all' : 'pending'
|
resetSelection()
|
resetPageAndReload()
|
getstatusCountData()
|
},
|
{ deep: true }
|
)
|
onMounted(() => {
|
if ('showAddBtn' in route.query) {
|
showAddBtn.value = Number(route.query.showAddBtn)
|
}
|
resetPageAndReload()
|
getstatusCountData()
|
requestDictionary()
|
initPermissionAndTabs()
|
nextTick(() => {
|
bindScrollEvent()
|
})
|
})
|
|
onUnmounted(() => {
|
unbindScrollEvent()
|
// 终止未完成的请求
|
if (countRequestController) {
|
countRequestController.abort()
|
}
|
// 取消防抖函数
|
debouncedGetStatusCount.cancel()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.eventTickets {
|
height: 100%;
|
|
.flex-container {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
}
|
|
:deep(.van-empty) {
|
margin: auto;
|
// height: calc(100vh - 122px);
|
margin-top: 100px;
|
}
|
|
:deep(.van-search) {
|
width: 350px;
|
background: transparent;
|
}
|
|
:deep(.van-tabs__nav--line) {
|
background: transparent;
|
}
|
|
:deep(.van-tab--active) {
|
color: #1d6fe9;
|
}
|
|
:deep(.van-tabs__nav--line.van-tabs__nav--complete) {
|
padding-left: 0 !important;
|
}
|
|
:deep(.van-tabs) {
|
height: 59px;
|
flex-shrink: 0;
|
}
|
|
.searchTop {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-right: 12px;
|
width: 100%;
|
height: 54px;
|
|
.Hamburger {
|
width: 20%;
|
width: 20px;
|
height: 20px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.listBox {
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
flex: 1;
|
|
.add-task-btn {
|
position: absolute;
|
right: 6px;
|
bottom: 24px;
|
|
img {
|
width: 60px;
|
height: 60px;
|
vertical-align: middle;
|
// border-radius: 50%;
|
}
|
}
|
}
|
|
:deep(.van-badge) {
|
background-color: #1d6fe9 !important;
|
}
|
|
.eventBox {
|
padding: 0 12px 12px 12px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
overflow-y: auto;
|
height: 0;
|
flex-grow: 1;
|
align-content: flex-start;
|
|
.eventItem {
|
width: calc(50% - 5px);
|
background-color: #fff;
|
border-radius: 5px;
|
overflow: hidden;
|
height: 145px;
|
|
img {
|
width: 100%;
|
height: 98px;
|
border-radius: 6px;
|
overflow: hidden;
|
}
|
|
.itemTitle {
|
padding: 0 5px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 500;
|
font-size: 14px;
|
color: #000000;
|
}
|
|
.itemContent {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 5px;
|
|
.itemStatus {
|
display: flex;
|
align-items: center;
|
|
span {
|
display: inline-block;
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
margin-right: 5px;
|
margin-bottom: 3px;
|
}
|
|
p {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 12px;
|
color: rgba(54, 54, 54, 0.5);
|
padding-bottom: 3px;
|
}
|
}
|
|
.fullBtn {
|
img {
|
width: 14px;
|
height: 14px;
|
border-radius: 0;
|
}
|
}
|
}
|
}
|
|
// 加载状态提示样式
|
.load-status {
|
width: 100%;
|
text-align: center;
|
padding: 15px 0;
|
color: #999;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
}
|
|
.selectContainer {
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
height: calc(100vh - 85px);
|
box-sizing: border-box;
|
overflow: hidden;
|
padding: 0 12px 12px 0;
|
|
.typesBtn {
|
position: fixed;
|
bottom: 0;
|
min-height: 73px;
|
width: 100%;
|
background: rgba(158, 158, 158, 0.32);
|
backdrop-filter: blur(3px);
|
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
|
.resertBtn,
|
.submissionBtn {
|
width: 138px;
|
height: 38px;
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.19);
|
border-radius: 20px 20px 20px 20px;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
color: #ffffff;
|
text-align: center;
|
line-height: 38px;
|
cursor: pointer;
|
}
|
|
.resertBtn {
|
background: #aeaeae;
|
}
|
|
.submissionBtn {
|
background: #1d6fe9;
|
}
|
}
|
|
.active {
|
color: #1d6fe9;
|
}
|
|
.tabitem {
|
margin-bottom: 38px;
|
line-height: 24px;
|
word-wrap: break-word;
|
/* 旧版浏览器 */
|
overflow-wrap: break-word;
|
/* 新版标准 */
|
white-space: normal;
|
/* 默认值，确保不强制不换行 */
|
}
|
|
.tabitem:first-child {
|
margin-top: 12px;
|
}
|
|
.leftTab {
|
width: 0;
|
flex: 1;
|
margin-right: 12px;
|
min-width: 98px;
|
padding-left: 12px;
|
overflow-y: auto;
|
height: 100%;
|
padding-bottom: 40px;
|
}
|
|
.rightContent {
|
width: 100%;
|
background: #ffffff;
|
border-radius: 6px 6px 6px 6px;
|
padding: 24px 10px 80px 10px;
|
|
overflow-y: auto;
|
height: 100%;
|
|
.rightBox {
|
min-height: 90px;
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 10px;
|
}
|
|
.contentItem {
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
text-align: center;
|
|
.imagediv {
|
position: relative;
|
width: 58px;
|
height: 58px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
box-shadow: 0px 0px 7px 0px rgba(224, 224, 224, 0.7);
|
border-radius: 50%;
|
}
|
}
|
|
.imgName {
|
font-size: 12px;
|
}
|
|
&.on {
|
.imagediv {
|
&::after {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 50px;
|
height: 50px;
|
border: 4px solid #1d6fe9;
|
border-radius: 50%;
|
z-index: 1;
|
box-shadow: 0px 0px 7px 0px rgba(224, 224, 224, 0.7);
|
}
|
}
|
|
.imgName {
|
color: #1d6fe9;
|
}
|
}
|
}
|
}
|
}
|
|
:deep(.van-tab) {
|
.custom-tab-title {
|
padding-bottom: 8px;
|
min-width: 60px;
|
text-align: center;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 500;
|
|
.tab-text {
|
height: 21px;
|
line-height: 21px;
|
color: #676666 !important;
|
font-size: 15px;
|
}
|
|
.tab-badge {
|
margin-top: 2px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 18px;
|
background: rgba(29, 111, 233, 0.14);
|
border-radius: 4px 4px 4px 4px;
|
color: #222324 !important;
|
font-size: 12px;
|
}
|
}
|
}
|
|
:deep(.van-tab--active) {
|
.custom-tab-title {
|
.tab-text {
|
color: #1d6fe9 !important;
|
}
|
|
.tab-badge {
|
color: #0051ff !important;
|
}
|
}
|
}
|
|
:deep(.van-tabs__line) {
|
background: #227bff !important;
|
}
|
}
|
</style>
|
