查询页修改

front/src/views/assignCase/components/queryPage.vue

@@ -6,7 +6,7 @@
         <div class="top">
           <h1>赋能案例</h1>
           <div></div>
-          <h3>Enabling Cases</h3>
+          <!-- <h3>Enabling Cases</h3> -->
         </div>
         <div class="navigation">
           <div class="navigationMain">
@@ -21,24 +21,18 @@
                 <span>{{ item.name }}</span>
               </div>
             </div>
-            <div
+            <div class="tabClickRight" v-if="tabClickShow">
-              class="tabClick"
+              <div
-              v-if="tabClickShow"
+                class="tabClick"
-              ref="txttype"
+                :ref="txttype"
-              :class="hidetext == true ? 'hidetext' : ''"
+                :class="hidetext == true ? 'hidetext' : ''"
-            >
+              >
-              <span v-for="(item, index) in tabClickData" :key="index">
+                <span v-for="(item, index) in tabClickData" :key="index">
-                {{ item.name }}
+                  {{ item.name }}
-              </span>
+                </span>
-              <a class="more" v-if="nomore" @click="lookmore">
+              </div>
+              <a class="more" @click="lookmore(hidetext)">
                 {{ moretext }}
-                <!-- <i
-                  :class="
-                    hidetext == false
-                      ? 'el-icon-arrow-up'
-                      : 'el-icon-arrow-down'
-                  "
-                ></i> -->
               </a>
             </div>
           </div>
@@ -65,6 +59,7 @@
           </div>
           <div class="pagination">
             <!-- 分页 -->
+            <span>共{{ resourceTotal }}条</span>
             <a-pagination
               v-model:current="currentPage"
               v-model:pageSize="currentPageSize"
@@ -79,8 +74,8 @@
   </div>
 </template>
 <script setup>
-  import { ref, reactive, onMounted } from 'vue'
+  import { ref, onMounted } from 'vue'
-  import { useStore } from 'vuex'
+  // import { useStore } from 'vuex'
   import { useRouter } from 'vue-router'
   // import { pinyin } from 'pinyin-pro'
   // import { Empty } from 'ant-design-vue'
@@ -98,16 +93,21 @@
       name: '文明创城场景',
       time: '2022-01-01 12:00',
     },
+    {
+      photo: require('@/assets/assignCase/important.png'),
+      name: '重点区域监控平台',
+      time: '2022-01-01 12:00',
+    },
   ])
   const hopeing = require('@/assets/assignCase/hopeing.png')
   // 分页
-  const resourceTotal = ref(15)
+  const resourceTotal = contenBox.value.length
+  // const resourceTotal = ref(15)
   const currentPage = ref(1)
   const currentPageSize = ref(3)
   const pageChange = (val) => {
     console.log(val)
     currentPage.value = val
-    // paramsGetResources.pageNum = val
   }
   // 选项卡
   const titleName = ref([
@@ -179,9 +179,19 @@
       tabClickShow.value = false
     }
   }
-  const moretext = ref('查看更多')
+  const moretext = ref('展开')
-  const nomore = ref('true')
+  const hidetext = ref(false)
-  const hidetext = ref('false')
+  const lookmore = (val) => {
+    console.log(val)
+    if (val) {
+      hidetext.value = false
+      moretext.value = '展开'
+    } else {
+      hidetext.value = true
+      moretext.value = '收起'
+    }
+  }
+  onMounted(() => {})
 
   // 跳转
   const lookContent = (val) => {
@@ -233,9 +243,10 @@
     }
     .navigation {
       width: 100%;
-      height: 80px;
+      // height: 80px;
       line-height: 80px;
       background: #ffffff;
+
       .navigationMain {
         width: 1350px;
         margin: 0 auto;
@@ -256,29 +267,31 @@
             color: #999999;
           }
         }
+        .tabClickRight {
+          display: flex;
+          .more {
+            font-size: 22px;
+            color: #526aff;
+          }
+        }
         .tabClick {
+          height: 80px;
+          line-height: 80px;
+          width: 1000px;
+          overflow: hidden;
           span {
             font-size: 22px;
             color: #333333;
             margin-right: 30px;
           }
-          span:last-child {
+          span:nth-of-type(8n) {
             margin-right: 50px;
           }
         }
-        .tabClick {
-          letter-spacing: 0.5px;
-          line-height: 20px;
-          position: relative;
-        }
         .hidetext {
-          position: relative;
+          height: unset;
-          height: 20px;
+          overflow: unset;
-          overflow: hidden;
+          line-height: 80px;
-          span {
-            display: block;
-            width: calc(100% - 100px);
-          }
         }
       }
     }
@@ -293,6 +306,7 @@
         display: flex;
         justify-content: center;
         padding-top: 40px;
+        overflow: hidden;
         .contenBox {
           width: 430px;
           padding: 30px;
@@ -324,6 +338,7 @@
             border-radius: 6px;
             font-size: 18px;
             text-align: center;
+            cursor: pointer;
           }
         }
         .contenBox:last-of-type {
@@ -347,9 +362,42 @@
       }
       .pagination {
         padding: 60px 0 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        span {
+          font-size: 18px;
+          color: #999999;
+          margin-right: 20px;
+        }
         .ant-pagination {
           margin-top: 0;
         }
+        :deep(.ant-pagination-item) {
+          border-radius: 4px;
+          border: 1px solid #b2b2b2;
+          a {
+            color: #b2b2b2;
+          }
+        }
+        :deep(.ant-pagination-item:hover) {
+          background: #526aff;
+          border-color: #526aff;
+          a {
+            color: #ffffff;
+          }
+        }
+        :deep(.ant-pagination-item-active) {
+          background: #526aff;
+          border: 1px solid #526aff;
+          border-radius: 4px;
+          a {
+            color: #ffffff;
+          }
+        }
+        :deep(.ant-pagination-options-quick-jumper input) {
+          width: 32px;
+        }
       }
     }
   }