diff --git a/client/index.html b/client/index.html
index d0060f3..cff064c 100644
--- a/client/index.html
+++ b/client/index.html
@@ -10,7 +10,7 @@
     <meta name="referrer" content="never">
     <meta charset="UTF-8"/>
     <title>(╥﹏╥)</title>
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_vmyr7my0yje.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_xtm26gd5aa.css">
 </head>
 <body>
     <div id="app"></div>
diff --git a/client/src/App.vue b/client/src/App.vue
index 02eff38..ba6417e 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -19,22 +19,16 @@ html, body, #app {
 }
 
 /*背景色切换*/
-
-
 #app, .main {
     max-width: 100%;
     min-height: 100vh;
-    /*background: #222;*/
     color: rgb(221, 221, 221);
-    //background: rgb(34, 34, 34);
+    background: #16161a;
 }
 
-
 * {
     box-sizing: border-box;
 }
-
-
 /*全局a标签默认样式去除*/
 a {
     outline: none;
diff --git a/client/src/assets/css/classify.css b/client/src/assets/css/classify.css
index cb021dc..e453314 100644
--- a/client/src/assets/css/classify.css
+++ b/client/src/assets/css/classify.css
@@ -1,18 +1,19 @@
-.header {
+.container {
+    padding: 0 10px;
+}
+.title {
     display: flex;
     justify-content: start;
     padding-bottom: 20px;
-    margin-top: 20px;
-    margin-bottom: 35px;
+
     border-bottom: 2px solid rgba(255,255,255, 0.15);
 }
-.header a {
+.title a {
     color: rgba(255,255,255,0.15);
-    font-size: 30px;
     font-weight: 700;
     line-height: 1.1;
 }
-.header a:hover {
+.title a:hover {
     color: rgba(255,255,255,0.65)!important;
 }
 
@@ -27,7 +28,6 @@
     left: 0;
     width: 100%;
     background: orangered;
-    bottom: -60%;
     height: 3px;
     border-radius: 16px 16px 0 0;
 }
@@ -36,11 +36,41 @@
     width: 3px;
     background: rgba(255,255,255,0.15);
     display: inline-block;
-    margin: 5px 15px;
     border-radius: 2px;
 }
 
 
+@media (min-width: 650px) {
+    .title{
+        margin-bottom: 35px;
+        margin-top: 20px;
+    }
+    .title a{
+        font-size: 30px;
+    }
+    .h_active::after{
+        bottom: -60%;
+    }
+    .line{
+        margin: 5px 15px;
+    }
+}
+@media (max-width: 650px) {
+    .title{
+        margin-bottom: 20px;
+    }
+    .title a{
+        font-size: 24px;
+    }
+    .h_active::after{
+        bottom: -76%;
+    }
+    .line{
+        margin: 2px 15px;
+    }
+}
+
+
 /*Category Tag style*/
 .c_header {
     width: 100%;
diff --git a/client/src/assets/css/pagination.css b/client/src/assets/css/pagination.css
new file mode 100644
index 0000000..2ba1aa1
--- /dev/null
+++ b/client/src/assets/css/pagination.css
@@ -0,0 +1,85 @@
+    /*分页插件区域*/
+.pagination_container {
+    max-width: 100%;
+    margin-top: 30px;
+    text-align: center;
+}
+
+: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;
+    }
+    :deep(.el-pager li){
+        margin: 0 2px!important;
+    }
+}
+
diff --git a/client/src/views/index/FilmClassify.vue b/client/src/views/index/FilmClassify.vue
index 11f01e4..af77da3 100644
--- a/client/src/views/index/FilmClassify.vue
+++ b/client/src/views/index/FilmClassify.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
-    <div class="header">
-        <a :href="`/filmClassify?Pid=${d.title.id}`" class="h_active">{{ d.title.name }}</a>
-        <span class="line"/>
-        <a :href="`/filmClassifySearch?Pid=${d.title.id}`" >{{ `${d.title.name}库` }}</a>
+    <div class="title">
+      <a :href="`/filmClassify?Pid=${d.title.id}`" class="h_active">{{ d.title.name }}</a>
+      <span class="line"/>
+      <a :href="`/filmClassifySearch?Pid=${d.title.id}`">{{ `${d.title.name}库` }}</a>
     </div>
 
     <!--影片列表展示-->
@@ -17,14 +17,14 @@
       </div>
       <div class="news">
         <div class="c_nav">
-          <span  class="c_nav_text silver">排行榜</span>
+          <span class="c_nav_text silver">排行榜</span>
           <span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
         </div>
         <FilmList :list="d.content.top"/>
       </div>
       <div class="news">
         <div class="c_nav">
-          <span  class="c_nav_text silver">最近更新</span>
+          <span class="c_nav_text silver">最近更新</span>
           <span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
         </div>
         <FilmList :list="d.content.recent"/>
@@ -77,26 +77,58 @@ onMounted(() => {
 .c_nav {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 15px;
+
   padding: 6px;
 }
+
 .c_nav_text {
- font-size: 28px;
   font-weight: 700;
   line-height: 1.1;
 }
-.c_nav_more{
-  font-size: 14px;
+
+.c_nav_more {
+  //font-size: 14px;
   background: #25252b;
-  padding: 0 15px;
-  line-height: 32px;
+
   border-radius: 8px;
 }
-.content>div {
+
+.content > div {
   padding-bottom: 20px;
 }
 
 /**/
+@media (min-width: 650px) {
+  .c_nav{
+    margin-bottom: 15px;
+  }
+  .c_nav_text {
+    font-size: 28px;
+  }
+  .c_nav_more {
+    font-size: 14px;
+    padding: 0 15px;
+    line-height: 32px;
+  }
 
+}
+
+@media (max-width: 650px) {
+  .c_nav{
+    margin-bottom: 10px;
+  }
+  .c_nav_text {
+    font-size: 20px;
+    line-height: 28px;
+  }
+  .c_nav_more {
+    font-size: 12px;
+    padding: 0 10px;
+    line-height: 28px;
+  }
+  .c_nav_more b{
+    font-size: 12px;
+  }
+}
 
 </style>
\ No newline at end of file
diff --git a/client/src/views/index/FilmClassifySearch.vue b/client/src/views/index/FilmClassifySearch.vue
index 06f9e4a..afd71ac 100644
--- a/client/src/views/index/FilmClassifySearch.vue
+++ b/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>
\ No newline at end of file
diff --git a/client/src/views/index/SearchFilm.vue b/client/src/views/index/SearchFilm.vue
index 3a32abd..3fe16af 100644
--- a/client/src/views/index/SearchFilm.vue
+++ b/client/src/views/index/SearchFilm.vue
@@ -110,6 +110,7 @@ const changeCurrent = (currentVal: number) => {
 
 <!--移动端-->
 <style scoped>
+@import "/src/assets/css/pagination.css";
 @media (max-width: 650px) {
     .title h2 {
         margin: 8px auto;
@@ -368,91 +369,3 @@ const changeCurrent = (currentVal: number) => {
 
 </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>
\ No newline at end of file
