bug优化
This commit is contained in:
parent
c7e3d1991f
commit
7f3864ca30
|
|
@ -14,14 +14,11 @@ declare module 'vue' {
|
|||
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
|
||||
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElCascader: typeof import('element-plus/es')['ElCascader']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElCollapse: typeof import('element-plus/es')['ElCollapse']
|
||||
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElCountdown: typeof import('element-plus/es')['ElCountdown']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
|
|
@ -29,7 +26,6 @@ declare module 'vue' {
|
|||
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
|
|
@ -37,10 +33,8 @@ declare module 'vue' {
|
|||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
|
|
@ -48,11 +42,9 @@ declare module 'vue' {
|
|||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElStep: typeof import('element-plus/es')['ElStep']
|
||||
ElSteps: typeof import('element-plus/es')['ElSteps']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
Empty: typeof import('./src/components/Empty/index.vue')['default']
|
||||
EquipCard: typeof import('./src/components/equipCard.vue')['default']
|
||||
EquipCardHall: typeof import('./src/components/equipCardHall/index.vue')['default']
|
||||
|
|
|
|||
|
|
@ -438,12 +438,33 @@ const onJumpScreen = () => {
|
|||
})
|
||||
}
|
||||
|
||||
// 隐藏下拉展示
|
||||
const hideDropdown = () => {
|
||||
console.log("xxxxxxxxxxxxxxxxxxx")
|
||||
hotWordList.value = []
|
||||
searchCheckVisible.value = false
|
||||
}
|
||||
|
||||
|
||||
const homeSearchRef = ref<HTMLElement | null>(null)
|
||||
// 处理全局点击事件
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (homeSearchRef.value && !homeSearchRef.value.contains(event.target as Node)) {
|
||||
hideDropdown()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
if (tokenNew) {
|
||||
getUserListData()
|
||||
getBookCarDetailsData()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -517,7 +538,7 @@ onMounted(() => {
|
|||
<!-- 中间logo 部分 -->
|
||||
<div class="logo-ipt-container">
|
||||
<div class="home-logo" @click="$router.push('/home')"></div>
|
||||
<div class="home-search">
|
||||
<div class="home-search" ref="homeSearchRef">
|
||||
<input
|
||||
:placeholder="searchTypeName === '装备' ? '搜索装备关键词' : '搜索需求关键词'"
|
||||
type="text"
|
||||
|
|
@ -569,7 +590,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
<!-- 热词 -->
|
||||
<div class="hot-word">
|
||||
<!-- <div class="hot-word">
|
||||
<span
|
||||
v-for="(item, index) in hotWordList"
|
||||
:key="index"
|
||||
|
|
@ -578,6 +599,17 @@ onMounted(() => {
|
|||
>
|
||||
{{ item.deviceName }}
|
||||
</span>
|
||||
</div> -->
|
||||
<!-- 竖着下拉展示包含相关值的数据 -->
|
||||
<div v-if="hotWordList.length > 0" class="dropdown-list">
|
||||
<div
|
||||
v-for="(item, index) in hotWordList"
|
||||
:key="index"
|
||||
class="dropdown-item"
|
||||
@click="onHotWord(item); hideDropdown()"
|
||||
>
|
||||
{{ item.deviceName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-container">
|
||||
|
|
@ -834,6 +866,33 @@ onMounted(() => {
|
|||
// width: 1000px;
|
||||
// margin-left: 40px;
|
||||
|
||||
// 下拉列表样式
|
||||
.dropdown-list {
|
||||
position: absolute;
|
||||
// 基于输入框左侧定位，通过 padding-left 调整
|
||||
left: 100px;
|
||||
// 基于输入框右侧定位，通过减去按钮宽度调整
|
||||
right: 105px;
|
||||
top: calc(100% - 5px);
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
border-radius: 0 0 27px 27px;
|
||||
z-index: 999;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// 下拉列表项样式
|
||||
.dropdown-item {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.hot-word {
|
||||
margin: 15px 0 0 10%;
|
||||
max-width: 80%;
|
||||
|
|
|
|||
|
|
@ -142,29 +142,29 @@
|
|||
>
|
||||
{{ index + 1 }}
|
||||
</span>
|
||||
<span style="font-weight: bold"> 装备 {{ index + 1 }} </span>
|
||||
<!-- <span style="font-weight: bold"> 装备 {{ index + 1 }} </span> -->
|
||||
</div>
|
||||
<el-row style="padding: 10px 0">
|
||||
<el-col :span="2">
|
||||
<el-col :span="3">
|
||||
<span class="label">装备类目：</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span>{{ item.groupName }}</span>
|
||||
<span class="value">{{ item.groupName }}</span>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="2">
|
||||
<span class="label">预估数量：</span>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span>{{ item.leaseNum }}</span>
|
||||
<el-col :span="6">
|
||||
<span class="value">{{ item.leaseNum }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding: 10px 0">
|
||||
<el-col :span="4">
|
||||
<el-col :span="3">
|
||||
<span class="label">装备描述：</span>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<span>{{ item.description }}</span>
|
||||
<span class="value">{{ item.description }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <div class="label" style="padding: 10px 0">参考图片/样式：</div>
|
||||
|
|
@ -707,12 +707,20 @@ onMounted(() => {
|
|||
box-sizing: content-box;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
// font-weight: 600;
|
||||
color: #8e8e8e;
|
||||
// margin-right: 15px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
// font-weight: 600;
|
||||
// color: #8e8e8e;
|
||||
// margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.demand-record {
|
||||
|
|
|
|||
|
|
@ -144,36 +144,43 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
<div class="publicTitle">装备详情</div>
|
||||
<!-- <div class="publicLine"></div> -->
|
||||
<div class="list publicContent">
|
||||
<div class="item" v-for="(v, i) in equipDetailKeyList" :key="i">
|
||||
<div class="label">{{ v.label }}：</div>
|
||||
<div
|
||||
:class="v.fn ? 'fnValue' : 'value'"
|
||||
@click="handelDetailListClick(v.fn, pageData[v.arg])"
|
||||
>
|
||||
{{ pageData[v.key] }}
|
||||
<div class="detail">
|
||||
<div class="publicTitle">装备详情</div>
|
||||
<!-- <div class="publicLine"></div> -->
|
||||
<div class="list publicContent">
|
||||
<!-- 动态渲染两栏布局 -->
|
||||
<template v-for="(row, index) in chunkedEquipDetail" :key="index">
|
||||
<div class="row">
|
||||
<!-- 第一组键值对 -->
|
||||
<div class="item">
|
||||
<div class="label">{{ row[0].label || row[0].propertyName }}</div>
|
||||
<div :class="row[0].fn ? 'fnValue' : 'value'"
|
||||
@click="row[0].fn && handelDetailListClick(row[0].fn, pageData[row[0].arg])">
|
||||
{{ row[0].key ? pageData[row[0].key] : row[0].propertyValue }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二组键值对（如果存在） -->
|
||||
<div class="item" v-if="row[1]">
|
||||
<div class="label">{{ row[1].label || row[1].propertyName }}</div>
|
||||
<div :class="row[1].fn ? 'fnValue' : 'value'"
|
||||
@click="row[1].fn && handelDetailListClick(row[1].fn, pageData[row[1].arg])">
|
||||
{{ row[1].key ? pageData[row[1].key] : row[1].propertyValue }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" v-for="(v, i) in propertyNames" :key="i">
|
||||
<div class="label">{{ v.propertyName }}：</div>
|
||||
<div class="value">
|
||||
{{ v.propertyValue }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="appearance">
|
||||
<div class="publicTitle">装备外观</div>
|
||||
<div class="urlList">
|
||||
<img :src="v.fileUrl" v-for="(v, i) in pageData.detailsFileList" :key="i" />
|
||||
<img :src="v.fileUrl" v-for="(v, i) in pageData.detailsFileList" :key="i" style="width: 500px; height: 500px; object-fit: cover;"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="appearance">
|
||||
<div class="publicTitle">证书展示</div>
|
||||
<div class="certificate">
|
||||
<div class="publicTitle" v-if="pageData.insurancePdf && pageData.insurancePdf.length > 0">证书展示</div>
|
||||
<div class="certificate" v-if="pageData.insurancePdf && pageData.insurancePdf.length > 0">
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div>合格证：</div>
|
||||
|
|
@ -1083,6 +1090,16 @@ const picturesPreview = (row: any) => {
|
|||
// window.open(url)
|
||||
}
|
||||
|
||||
// 合并 equipDetailKeyList 和 propertyNames 并分组
|
||||
const chunkedEquipDetail = computed(() => {
|
||||
const combinedData = [...equipDetailKeyList, ...propertyNames.value];
|
||||
const chunked = [];
|
||||
for (let i = 0; i < combinedData.length; i += 2) {
|
||||
chunked.push(combinedData.slice(i, i + 2));
|
||||
}
|
||||
return chunked;
|
||||
});
|
||||
|
||||
// const init = async () => {
|
||||
// await gethotList()
|
||||
// await getData()
|
||||
|
|
@ -1490,18 +1507,22 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
|
||||
.publicTitle {
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
color: #fff;
|
||||
background-color: #1abc9c;
|
||||
width: 150px;
|
||||
height: 65px;
|
||||
line-height: 65px;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.publicTitle {
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
color: #fff;
|
||||
background-color: #1abc9c;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
// 让 line-height 与 height 一致，实现垂直居中
|
||||
line-height: 50px;
|
||||
text-align: center; // 水平居中
|
||||
letter-spacing: 1px;
|
||||
// 也可以使用 flex 布局实现垂直和水平居中
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.publicLine {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
|
|
@ -1523,52 +1544,87 @@ onMounted(() => {
|
|||
.publicContent {
|
||||
box-sizing: border-box;
|
||||
padding: 40px 30px 10px;
|
||||
border: 1px solid #1abc9c;
|
||||
border: 1px solid #e0e0e0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
.list {
|
||||
.detail.publicTitle{
|
||||
padding: 10px; /* 为标题添加内边距 */
|
||||
border-bottom: 1px solid #ccc; /* 为标题添加底部边框 */
|
||||
margin: 0; /* 移除标题的外边距 */
|
||||
}
|
||||
|
||||
.detail .list {
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: none; /* 由.row控制底部边框 */
|
||||
}
|
||||
.list.publicContent {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
cursor: pointer;
|
||||
width: calc(100% / 3);
|
||||
// font-size: 16px;
|
||||
// font-family: PingFangSC, PingFang SC;
|
||||
// font-weight: 600;
|
||||
display: flex;
|
||||
margin-bottom: 35px;
|
||||
|
||||
.label {
|
||||
color: #8e8e8e;
|
||||
width: 160px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
font-size: 16px;
|
||||
// font-family: 'fangsong';
|
||||
}
|
||||
|
||||
.fnValue {
|
||||
color: #0087cd;
|
||||
// font-family: 'fangsong';
|
||||
}
|
||||
}
|
||||
// padding: 10px; /* 为内容区域添加内边距 */
|
||||
padding: 0; /* 移除内容区域的内边距 */
|
||||
margin: 10px; /* 移除内容区域的外边距 */
|
||||
gap:0;
|
||||
}
|
||||
|
||||
/* 行样式 */
|
||||
.detail .list .row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* 单元格容器 */
|
||||
.detail .list .item {
|
||||
display: flex;
|
||||
width: 50%; /* 两栏平分 */
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* 最后一列的右边框移除 */
|
||||
.detail .list .item:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* 标签样式 */
|
||||
.detail .list .label {
|
||||
color: #8e8e8e;
|
||||
width: 35%; /* 根据内容调整 */
|
||||
background-color: #f3f6f8;
|
||||
padding: 20px 10px;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
display: flex; /* 开启 Flex 布局 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
}
|
||||
|
||||
/* 值样式 */
|
||||
.detail .list .value,
|
||||
.detail .list .fnValue {
|
||||
flex: 1;
|
||||
padding: 20px 10px;
|
||||
font-size: 16px;
|
||||
word-break: break-word;
|
||||
display: flex; /* 开启 Flex 布局 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
}
|
||||
|
||||
.detail .list .value {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.detail .list .fnValue {
|
||||
color: #0087cd;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.appearance {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.urlList {
|
||||
img {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1670,4 +1726,12 @@ onMounted(() => {
|
|||
background-color: #f8f8f8;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.list.publicContent {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 允许项目换行 */
|
||||
gap: 10px; /* 设置项目之间的间距 */
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue