需求中心：tooltip 样式更改

front/src/views/demandCenter/index.vue

@@ -4,11 +4,7 @@
     <div class="main">
       <div class="left">
         <a-layout-sider>
-          <a-menu
+          <a-menu v-model:selectedKeys="selectedKeys" mode="inline" @click="handleClick">
-            v-model:selectedKeys="selectedKeys"
-            mode="inline"
-            @click="handleClick"
-          >
             <a-menu-item v-for="item in menuList" :key="item.key">
               <img :src="item.img" alt="" style="margin-right: 10px" />
               <span>{{ item.title }}</span>
@@ -18,36 +14,19 @@
       </div>
       <div class="right">
         <!-- <div class="title">数据需求</div> -->
-        <a-list
+        <a-list class="demo-loadmore-list" :loading="initLoading" item-layout="horizontal" :data-source="list"
-          class="demo-loadmore-list"
+          :key="showKey">
-          :loading="initLoading"
-          item-layout="horizontal"
-          :data-source="list"
-          :key="showKey"
-        >
           <template #renderItem="{ item }">
             <a-list-item>
-              <a-skeleton
+              <a-skeleton avatar :title="false" :loading="!!item.loading" active>
-                avatar
+                <a-tooltip placement="topLeft" arrow-point-at-center mouseEnterDelay="1"
-                :title="false"
+                  overlayClassName="tooltip-card">
-                :loading="!!item.loading"
-                active
-              >
-                <a-tooltip
-                  placement="topLeft"
-                  :title="item.demandDetails || '--'"
-                  arrow-point-at-center
-                  mouseEnterDelay="1"
-                >
-                  <a-list-item-meta
-                    :description="'描述：' + (item.demandDetails || '--')"
-                  >
                   <template #title>
-                      <span
+                    <div class="tooltip-desc">{{ item.demandDetails || '--' }}</div>
-                        @click="showDetail(item)"
+                  </template>
-                        style="cursor: pointer"
+                  <a-list-item-meta :description="'描述：' + (item.demandDetails || '--')">
-                        class="name"
+                    <template #title>
-                      >
+                      <span @click="showDetail(item)" style="cursor: pointer" class="name">
                         {{ item.demandSubject }}
                       </span>
                       <span class="time">{{ item.createDate }}</span>
@@ -58,13 +37,8 @@
             </a-list-item>
           </template>
         </a-list>
-        <a-pagination
+        <a-pagination v-model:current="pageNum" v-model:page-size="pageSize" :total="total" @change="pageChange"
-          v-model:current="pageNum"
+          :key="showKey">
-          v-model:page-size="pageSize"
-          :total="total"
-          @change="pageChange"
-          :key="showKey"
-        >
           <template #buildOptionText="props">
             <span>{{ props.value }}条/页</span>
           </template>
@@ -201,16 +175,20 @@
   background-position-x: center;
   display: flex;
   justify-content: center;
+
   .main {
     width: 1200px;
     height: 100%;
     padding-top: 30px;
     display: flex;
+
     .left {
       width: 15%;
+
       .ant-card {
         background: transparent;
         border: none;
+
         .ant-card-grid {
           height: 50px;
           display: flex;
@@ -222,14 +200,17 @@
           cursor: pointer;
         }
       }
+
       .ant-layout-sider {
         background-color: transparent;
+
         :deep(.ant-menu-item) {
           height: 100px;
           font-size: 18px;
           color: #333333;
           border: 1px solid #dee8f5;
           margin: 0;
+
           &::after {
             margin-top: 30px;
             height: 40px;
@@ -237,11 +218,13 @@
             background-color: #0087ff;
           }
         }
+
         :deep(.ant-menu-item-selected) {
           background-color: #e9f4ff;
         }
       }
     }
+
     .right {
       flex: 1;
       margin-left: 30px;
@@ -249,17 +232,21 @@
       background-color: #ffffff;
       box-shadow: 10px 8px 10px 3px #9dc6ea;
       padding: 20px;
+
       .title {
         font-size: 22px;
         font-weight: 500;
         color: #1492ff;
       }
+
       .ant-list {
         height: 730px;
         overflow-y: scroll;
+
         :deep(.ant-list-item-meta-title) {
           display: flex;
           justify-content: space-between;
+
           .name {
             width: 800px;
             font-size: 18px;
@@ -276,6 +263,7 @@
             word-break: break-all;
           }
         }
+
         :deep(.ant-list-item-meta-description) {
           display: -webkit-box;
           /*设置为弹性盒子*/
@@ -289,14 +277,17 @@
           word-break: break-all;
         }
       }
+
       // 隐藏滚动条
       .ant-list::-webkit-scrollbar {
         display: none;
       }
+
       .ant-pagination {
         margin-top: 10px;
       }
     }
+
     .fixedmount {
       height: 1.5rem;
       display: flex;
@@ -321,10 +312,12 @@
       position: relative;
       cursor: pointer;
       background: #e3edfc;
+
       p {
         margin: 0;
       }
     }
+
     .fixedmount div p:nth-child(1) {
       height: 0.24rem;
       width: 0.24rem;
@@ -340,4 +333,11 @@
 html {
   height: unset;
 }
+
+.tooltip-card {
+  max-width: 900px !important;
+  min-width: 600px !important;
+  max-height: 600px !important;
+  overflow-y: auto;
+}
 </style>