fix wrap Pagination UI

client/src/views/index/FilmClassifySearch.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="header">
+    <div class="title">
       <a :href="`/filmClassify?Pid=${d.title.id}`" >{{ d.title.name }}</a>
       <span class="line"/>
       <a :href="`/filmClassifySearch?Pid=${d.title.id}`" class="h_active">{{ `${d.title.name}库` }}</a>
@@ -8,7 +8,7 @@
     <!--影片分类检索-->
     <div class="t_container">
       <div class="t_item" v-for="k in d.search.sortList ">
-        <div class="t_title">{{d.search.titles[k]}} <b class="iconfont icon-yousanjiao"/> </div>
+        <div class="t_title">{{d.search.titles[k]}} <b class="iconfont icon-triangle"/> </div>
         <div class="tag_group">
           <a href="javascript:void(false)" :class="`tag ${t['Value'] === d.searchParams[k]?'t_active':''}`" v-for="t in d.search.tags[k]" @click="handleTag(k,t['Value'])" >
             {{t['Name']}}
@@ -120,8 +120,24 @@ onMounted(() => {
 
 <style scoped>
 @import "/src/assets/css/classify.css";
+@import "/src/assets/css/pagination.css";
 
-
+@media (min-width: 650px) {
+  .tag {
+    margin: 0 8px;
+    padding: 6px 12px;
+  }
+  .t_title {
+    padding: 3px 0;
+  }
+}
+@media (max-width: 650px) {
+  .tag {
+    margin: 0 5px;
+    padding: 4px 10px;
+    font-size: 12px;
+  }
+}
 
 .t_container {
   display: block;
@@ -135,6 +151,7 @@ onMounted(() => {
   display: flex;
   justify-content: start;
   margin: 14px 0;
+  white-space: nowrap;
 }
 
 .t_title {
@@ -145,23 +162,24 @@ onMounted(() => {
   color: rgba(255,255,255,0.35);
   border-radius: 6px;
   margin-right: 12px;
-  padding: 3px 0;
+  //padding: 3px 0;
+}
+.t_title b{
+  color: rgba(255,255,255,0.15);
 }
 
 .tag_group {
   display: flex;
   justify-content: start;
-  flex-flow: wrap;
-
+  flex-flow: nowrap;
+  overflow: auto;
 }
 
 .tag {
   display: inline-block;
   border: 1px solid rgba(255,255,255,0.12);
-  margin: 0 8px;
   border-radius: 5px;
   text-align: center;
-  padding: 6px 12px;
 }
 
 .t_active {
@@ -175,10 +193,7 @@ onMounted(() => {
 <!--移动端修改-->
 <style scoped>
 @media (max-width: 650px) {
-  .container {
-    padding: 0 10px;
 
-  }
   /*顶部内容区域*/
   .header {
     width: 100%;
@@ -208,89 +223,3 @@ onMounted(() => {
 }
 </style>
 
-<style scoped>
-/*分页插件区域*/
-.pagination_container {
-  width: 100%;
-  margin-top: 30px;
-  /*background: deepskyblue;*/
-  text-align: center;
-  /*display: flex;*/
-}
-
-:deep(.el-pagination) {
-  width: 100% !important;
-  margin: 0 auto !important;
-  justify-content: center;
-}
-
-/*分页器样式修改*/
-:deep(.number) {
-  font-weight: bold;
-  width: 45px;
-  height: 45px;
-  background: #2e2e2e !important;
-  color: #ffffff;
-  border-radius: 50%;
-  /*margin: 0 3px!important;*/
-}
-
-:deep(.number:hover) {
-  color: #67d9e8;
-}
-
-:deep(.btn-prev) {
-  font-weight: bold;
-  width: 45px;
-  height: 45px;
-  background: #2e2e2e !important;
-  color: #ffffff;
-  border-radius: 50%;
-}
-
-:deep(.btn-next) {
-  font-weight: bold;
-  width: 45px;
-  height: 45px;
-  background: #2e2e2e !important;
-  color: #ffffff;
-  border-radius: 50%;
-}
-
-:deep(.more) {
-  font-weight: bold;
-  width: 45px;
-  height: 45px;
-  background: #2e2e2e !important;
-  color: #ffffff;
-  border-radius: 50%;
-}
-
-:deep(.is-active) {
-  background: #67d9e8 !important;
-}
-
-/*移动端缩小*/
-@media (max-width: 650px) {
-  :deep(.number) {
-    width: 35px;
-    height: 35px;
-  }
-
-  :deep(.btn-prev) {
-    width: 35px;
-    height: 35px;
-  }
-
-  :deep(.btn-next) {
-    width: 35px;
-    height: 35px;
-  }
-
-  :deep(.more) {
-    width: 35px;
-    height: 35px;
-  }
-}
-
-</style>