bug优化

components.d.ts

@@ -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']

src/layout/header.vue

@@ -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%;

src/views/demand-details/index.vue

@@ -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">
+                    <el-col :span="6">
-                        <span>{{ item.leaseNum }}</span>
+                        <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 {

src/views/equip/detail.vue

@@ -144,36 +144,43 @@
             </div>
         </div>
 
-        <div class="detail">
+    <div class="detail">
-            <div class="publicTitle">装备详情</div>
+        <div class="publicTitle">装备详情</div>
-            <!-- <div class="publicLine"></div> -->
+        <!-- <div class="publicLine"></div> -->
-            <div class="list publicContent">
+        <div class="list publicContent">
-                <div class="item" v-for="(v, i) in equipDetailKeyList" :key="i">
+            <!-- 动态渲染两栏布局 -->
-                    <div class="label">{{ v.label }}：</div>
+            <template v-for="(row, index) in chunkedEquipDetail" :key="index">
-                    <div
+                <div class="row">
-                        :class="v.fn ? 'fnValue' : 'value'"
+                    <!-- 第一组键值对 -->
-                        @click="handelDetailListClick(v.fn, pageData[v.arg])"
+                    <div class="item">
-                    >
+                        <div class="label">{{ row[0].label || row[0].propertyName }}</div>
-                        {{ pageData[v.key] }}
+                        <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">
+            </template>
-                    <div class="label">{{ v.propertyName }}：</div>
-                    <div class="value">
-                        {{ v.propertyValue }}
-                    </div>
-                </div>
-            </div>
         </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="publicTitle" v-if="pageData.insurancePdf && pageData.insurancePdf.length > 0">证书展示</div>
-            <div class="certificate">
+            <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 {
+.publicTitle {
-        font-size: 18px;
+    font-size: 18px;
-        font-family: PingFangSC, PingFang SC;
+    font-family: PingFangSC, PingFang SC;
-        color: #fff;
+    color: #fff;
-        background-color: #1abc9c;
+    background-color: #1abc9c;
-        width: 150px;
+    width: 120px;
-        height: 65px;
+    height: 50px;
-        line-height: 65px;
+    // 让 line-height 与 height 一致，实现垂直居中
-        text-align: center;
+    line-height: 50px; 
-        letter-spacing: 1px;
+    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.publicTitle{
-    .detail {
+        padding: 10px; /* 为标题添加内边距 */
-        .list {
+        border-bottom: 1px solid #ccc; /* 为标题添加底部边框 */
+        margin: 0; /* 移除标题的外边距 */
+    }
+    
+    .detail .list {
+        border: 1px solid #ccc;
+        border-bottom: none; /* 由.row控制底部边框 */
+        }
+        .list.publicContent {
             display: flex;
             flex-wrap: wrap;
-
+            // padding: 10px; /* 为内容区域添加内边距 */
-            .item {
+            padding: 0; /* 移除内容区域的内边距 */
-                cursor: pointer;
+            margin: 10px; /* 移除内容区域的外边距 */
-                width: calc(100% / 3);
+            gap:0;
-                // font-size: 16px;
+        }
-                // font-family: PingFangSC, PingFang SC;
+
-                // font-weight: 600;
+        /* 行样式 */
-                display: flex;
+        .detail .list .row {
-                margin-bottom: 35px;
+        display: flex;
-
+        width: 100%;
-                .label {
+        border-bottom: 1px solid #ccc;
-                    color: #8e8e8e;
+        }
-                    width: 160px;
+
-                    font-size: 18px;
+        /* 单元格容器 */
-                }
+        .detail .list .item {
-
+        display: flex;
-                .value {
+        width: 50%; /* 两栏平分 */
-                    color: #333333;
+        border-right: 1px solid #ccc;
-                    flex: 1;
+        }
-                    word-break: break-all;
+
-                    font-size: 16px;
+        /* 最后一列的右边框移除 */
-                    // font-family: 'fangsong';
+        .detail .list .item:last-child {
-                }
+        border-right: none;
-
+        }
-                .fnValue {
+
-                    color: #0087cd;
+        /* 标签样式 */
-                    // font-family: 'fangsong';
+        .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>