系统上线运行问题修改

src/views/publicService/proMaterials/index.vue

@@ -19,6 +19,7 @@
             v-model="selectedTypes"
             label="1"
             @change="filterMaterials"
+            style="color: #000;"
           >产品手册
           </el-checkbox>
         </div>
@@ -27,6 +28,7 @@
             v-model="selectedTypes"
             label="0"
             @change="filterMaterials"
+            style="color: #000;"
           >
             产品视频
           </el-checkbox>
@@ -36,7 +38,12 @@
     </div>
 
     <div style="width: 100%;height: 100%;">
-      <div class="content-area" ref="servicesGrid">
+      <div class="content-area"
+           :class="{
+            'compact-grid': showProMaterialsDuctList.length >= 5 && showProMaterialsDuctList.length < 8,
+            'compact-grid-ba': showProMaterialsDuctList.length == 8
+          }"
+           ref="servicesGrid">
         <div
           :key="item.id"
           class="services-grid"
@@ -45,14 +52,14 @@
           <div class="card-image" @click="previewDocs(item)">
             <ImagePreview
               style="margin-top: -10px"
-              :height="200"
+              :height="192"
               :borderRadius="10"
               :width="itemWidth"
               :src1="item.image"
             />
           </div>
 
-          <div class="card-content" :style="{ width: itemWidth - 40 + 'px' }">
+          <div class="card-content" >
             <!-- 第一行：名称和版本 -->
             <el-tooltip :content="item.name" placement="top" :effect="'light'" :enterable="false">
               <div class="card-title-row">
@@ -92,12 +99,17 @@
 
       <div>
         <!-- 在这里添加分页组件 -->
-        <div class="pagination-container" style="margin-top: -40px !important;">
+        <div class="pagination-container"
+             :class="{
+            'pagination-container-grid': showProMaterialsDuctList.length >= 5 && showProMaterialsDuctList.length < 8,
+            'pagination-container-grid-ba': showProMaterialsDuctList.length == 8
+          }"
+        >
           <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="currentPage"
-            :page-sizes="[10, 20, 30, 50]"
+            :page-sizes="[8, 16]"
             :page-size="pageSize"
             :total="total"
             layout="total, sizes, prev, pager, next, jumper">
@@ -155,7 +167,7 @@ export default {
 
       // 添加分页相关属性
       currentPage: 1,
-      pageSize: 10,
+      pageSize: 8,
       total: 0,
 
       // 添加请求控制变量
@@ -330,7 +342,7 @@ export default {
       const {fileName, filePath} = item;
       console.log(filePath)
 
-      if(!fileName){
+      if (!fileName) {
         this.$modal.msgWarning('格式不正常，请重新上传');
       }
       // 获取文件扩展名
@@ -524,9 +536,11 @@ export default {
     }
 
     .card-content {
+      width: 95%;
       display: flex;
       flex-direction: column;
       font-size: 14px;
+      margin-left: 0px;
     }
 
     .card-title-row,
@@ -538,6 +552,7 @@ export default {
       text-overflow: ellipsis;
       width: 100%;
       min-height: 24px;
+      margin-top: 4px;
     }
 
     .title-name {
@@ -546,12 +561,16 @@ export default {
       text-overflow: ellipsis;
       white-space: nowrap;
       margin-right: 8px;
+      font-size: 16px;
+      color: #333;
+      font-weight: bold;
+      font-family: 'PingFang SC', sans-serif;
     }
 
     .title-version {
       flex-shrink: 0;
       color: #999;
-      font-size: 12px;
+      font-size: 16px;
     }
 
     .card-footer {
@@ -582,6 +601,239 @@ export default {
       opacity: 0.6;
     }
   }
+
+  .compact-grid {
+    flex: 1;
+    height: 78%;
+    padding-bottom: 20px;
+    padding-right: 12px;
+    padding-top: 2px;
+    //max-height: calc(100vh - 80px); /* 减去顶部padding */
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0px;
+    margin-left: 30px;
+    row-gap: 40px;
+
+    .services-grid {
+      height: 280px; /* 给子元素设置固定高度以便测试滚动 */
+      width: 354px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
+      border: 1px solid #d6d1d1;
+      border-radius: 10px;
+      align-content: flex-start;
+      justify-items: center;
+
+      // background-color: skyblue;
+    }
+
+    .card-image {
+      height: 200px;
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border-bottom: 1px solid #d6d1d1;
+    }
+
+    .services-grid:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    }
+
+    .card-content {
+      width: 95%;
+      display: flex;
+      flex-direction: column;
+      font-size: 14px;
+      margin-left: 0px;
+    }
+
+    .card-title-row,
+    .card-footer {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      min-height: 24px;
+      margin-top: 4px;
+    }
+
+    .title-name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 8px;
+      font-size: 16px;
+      color: #333;
+      font-weight: bold;
+      font-family: 'PingFang SC', sans-serif;
+    }
+
+    .title-version {
+      flex-shrink: 0;
+      color: #999;
+      font-size: 16px;
+    }
+
+    .card-footer {
+      justify-content: space-between; /* 描述左对齐，按钮右对齐 */
+      margin-top: 4px;
+    }
+
+    .title-desc {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 8px;
+    }
+
+    .primary-btn {
+      flex-shrink: 0;
+      padding: 4px 12px;
+      background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
+      color: white;
+      border-radius: 4px;
+      font-size: 12px;
+      cursor: pointer;
+    }
+
+    .primary-btn.isDisabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+
+  .compact-grid-ba {
+    flex: 1;
+    height: 83%;
+    padding-bottom: 20px;
+    padding-right: 12px;
+    padding-top: 2px;
+    //max-height: calc(100vh - 80px); /* 减去顶部padding */
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0px;
+    margin-left: 30px;
+    row-gap: 40px;
+
+    .services-grid {
+      height: 280px; /* 给子元素设置固定高度以便测试滚动 */
+      width: 354px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
+      border: 1px solid #d6d1d1;
+      border-radius: 10px;
+      align-content: flex-start;
+      justify-items: center;
+
+      // background-color: skyblue;
+    }
+
+    .card-image {
+      height: 200px;
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border-bottom: 1px solid #d6d1d1;
+    }
+
+    .services-grid:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    }
+
+    .card-content {
+      width: 95%;
+      display: flex;
+      flex-direction: column;
+      font-size: 14px;
+      margin-left: 0px;
+    }
+
+    .card-title-row,
+    .card-footer {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      min-height: 24px;
+      margin-top: 4px;
+    }
+
+    .title-name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 8px;
+      font-size: 16px;
+      color: #333;
+      font-weight: bold;
+      font-family: 'PingFang SC', sans-serif;
+    }
+
+    .title-version {
+      flex-shrink: 0;
+      color: #999;
+      font-size: 16px;
+    }
+
+    .card-footer {
+      justify-content: space-between; /* 描述左对齐，按钮右对齐 */
+      margin-top: 4px;
+    }
+
+    .title-desc {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 8px;
+    }
+
+    .primary-btn {
+      flex-shrink: 0;
+      padding: 4px 12px;
+      background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
+      color: white;
+      border-radius: 4px;
+      font-size: 12px;
+      cursor: pointer;
+    }
+
+    .primary-btn.isDisabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+
 }
 
 .category-item {
@@ -592,9 +844,11 @@ export default {
   cursor: pointer;
   transition: all 0.2s ease;
   font-size: 14px;
-  color: #666;
+  color: #000;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   transition: all 0.2s ease;
+  font-family: 'PingFang SC', sans-serif;
+  text-align: center;
 }
 
 .category-item:hover {
@@ -622,7 +876,7 @@ export default {
 
 .section-title {
   font-size: 12px;
-  color: #666;
+  color: #000;
   margin-bottom: 8px;
   padding-left: 16px;
 }
@@ -633,17 +887,22 @@ export default {
   align-items: center;
   cursor: pointer;
   transition: background-color 0.2s ease;
-
+  color: #000 !important;
   &:hover {
     background-color: #f5f7fa;
   }
+}
 
-  .pagination-container {
+.pagination-container {
-    grid-column: 1 / -1; /* 占据整行 */
+  display: flex;
-    display: flex;
+  margin-top: -40px !important;
-    justify-content: center;
+}
-    padding: 20px 0;
+
-    margin-top: -40px !important;
+.pagination-container-grid{
-  }
+  margin-top: 8% !important;
+}
+
+.pagination-container-grid-ba{
+  margin-top: 6% !important;
 }
 </style>

src/views/publicService/productCenter/index.vue

@@ -153,35 +153,6 @@ export default {
           url = 'https://' + url
         }
       }
-
-      // 确保 URL 是完整的绝对路径
-      /*
-      const authData = {
-        username: linkUser,
-        password: linkPassword
-      }
-      // 将对象转换为JSON字符串并加密
-      const authJson = JSON.stringify(authData)
-      console.log(authJson)
-      const encryptedParams = bnsCloudEncrypt(authJson)
-      console.log(encryptedParams)
-
-
-      // 将加密后的用户名和密码拼接到URL参数中
-      const separator = url.includes('?') ? '&' : '?'
-      url += `${separator}params=${encodeURIComponent(encryptedParams)}`
-
-      // 如果 URL 不是以 http:// 或 https:// 开头，则添加 https://
-      if (!url.startsWith('http://') && !url.startsWith('https://')) {
-        // 如果 URL 以 www. 开头，直接添加 https://
-        if (url.startsWith('www.')) {
-          url = 'https://' + url
-        } else {
-          // 其他情况，添加 https://
-          url = 'https://' + url
-        }
-      }*/
-
       window.open(url, '_blank')
     },
     //  查看详情
@@ -380,7 +351,7 @@ export default {
 
   .compact-grid {
     flex: 1;
-    height: 75%;
+    height: 82%;
     padding-bottom: 20px;
     padding-right: 12px;
     padding-top: 2px;
@@ -391,7 +362,8 @@ export default {
     gap: 33px;
 
     .services-grid {
-      height: 260px; /* 给子元素设置固定高度以便测试滚动 */
+      height: 300px; /* 给子元素设置固定高度以便测试滚动 */
+      width: 354px;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -408,7 +380,7 @@ export default {
     }
 
     .card-image {
-      height: 165px;
+      height: 200px;
       border-top-left-radius: 10px;
       border-top-right-radius: 10px;
       width: 100%;