diff --git a/.gitignore b/.gitignore
new file mode 100755
index 0000000..de96f3a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+# Logs
+logs
+*.log
+node_modules
+.DS_Store
+dist
+*.local
diff --git a/src/App.vue b/src/App.vue
index 8d8d733..f85241b 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,24 @@
 <template>
-  <div id="app">
-    <div class="container">
-		<router-view/>
+	<div id="app">
+		<div class="container">
+			<router-view />
+		</div>
 	</div>
-  </div>
 </template>
 <script>
-	export default {
-		name: "App",
-		data() {
-			return {
-			}
+export default {
+	name: "App",
+	data() {
+		return {
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	@import 'assets/css/normalize.css';
-	@import 'assets/css/public.scss';//帖子内容样式
+@import 'assets/css/normalize.css';
+@import 'assets/css/public.scss'; //帖子内容样式
+
 #app {
 	font-family: Avenir, Helvetica, Arial, sans-serif;
 	-webkit-font-smoothing: antialiased;
@@ -26,14 +27,16 @@
 	flex-direction: column;
 	margin: 0 auto;
 	position: relative;
+	overflow: hidden;
 }
-.container{
+
+.container {
 	// padding: 0 0.35rem;
 	background-color: rgba(246, 246, 246, 1);
 	min-height: 100vh;
 }
 
-.flexflex{
+.flexflex {
 	display: flex;
 }
 
@@ -53,9 +56,13 @@
 	flex-direction: column;
 }
 
-
-.el-message {
-	min-width:  7rem !important;
+.flex1 {
+	flex: 1;
 }
 
+.el-message {
+	min-width: 7rem !important;
+}
+
+
 </style>
diff --git a/src/assets/css/normalize.css b/src/assets/css/normalize.css
index 4e8f438..a1b982c 100755
--- a/src/assets/css/normalize.css
+++ b/src/assets/css/normalize.css
@@ -1,7 +1,7 @@
 *{
 	padding: 0;
 	margin: 0;
-	color: #555;
+	/* color: #555; */
 	font-family: '微软雅黑';
 	font-weight: 400;
 }
diff --git a/src/assets/css/public.scss b/src/assets/css/public.scss
index f7c74d7..d696d60 100755
--- a/src/assets/css/public.scss
+++ b/src/assets/css/public.scss
@@ -38,16 +38,21 @@
 	box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.1);
 	position: relative;
 
+	.path-slash {
+		color: #D7D7D7;
+		font-size: .32rem;
+	}
+
 	div {
 		color: #7F7F7F;
 		max-width: 2.5rem;
 
-		&::before {
-			content: "/";
-			width: 0.2rem;
-			padding: 0 0.07rem;
-			color: #7F7F7F;
-		}
+		// &::before {
+		// 	content: "/";
+		// 	width: 0.2rem;
+		// 	padding: 0 0.07rem;
+		// 	color: #7F7F7F;
+		// }
 
 		&:last-child {
 			max-width: 50%;
@@ -55,9 +60,9 @@
 			font-weight: bold;
 		}
 
-		&:first-child::before {
-			content: "";
-		}
+		// &:first-child::before {
+		// 	content: "";
+		// }
 	}
 
 	&::after {
@@ -124,7 +129,7 @@ section {
 			font-size: 0.3rem;
 			color: #7F7F7F;
 			max-height: 1rem;
-			line-height: 0.53rem;
+			line-height: .52rem;
 		}
 
 		// 回复可见
@@ -134,6 +139,8 @@ section {
 			padding: 0.28rem;
 			text-align: center;
 			margin-top: 0.25rem;
+			font-size: .32rem;
+			color: #aaa;
 		}
 	}
 
@@ -164,10 +171,11 @@ section {
 				display: flex;
 				flex-direction: row;
 				align-items: center;
-				padding-left: 0.25rem;
+				// padding-left: 0.25rem;
 
 				&:last-child {
-					margin-left: 0.133333rem;
+					// margin-left: 0.133333rem;
+					margin-left: .4rem;
 				}
 
 				div {
@@ -190,66 +198,30 @@ section {
 
 	// 精华
 	.rightTop {
-		width: 2rem;
-		height: 2rem;
 		position: absolute;
 		top: 0;
 		right: 0;
 
-		&:before {
-			content: "";
-			display: block;
-			border-radius: 0.8rem 0.8rem 0 0;
-			width: 0.24rem;
-			height: 0.053333rem;
-			position: absolute;
-			top: -0.053333rem;
-			right: 0.98rem;
-			background: #7474ff;
-		}
-
-		&:after {
-			content: "";
-			display: block;
-			border-radius: 0 0.11rem 0.11rem 0;
-			width: 0.053333rem;
-			height: 0.24rem;
-			position: absolute;
-			right: -0.053333rem;
-			top: 0.98rem;
-			background: #7474ff;
-		}
-
-		div {
-			overflow: hidden;
-			width: 2rem;
-			height: 2rem;
-			position: absolute;
-			top: -0.09rem;
-			right: -0.09rem;
+		.rightTop-img {
+			width: 1.28rem;
+			height: 1.28rem;
+			margin-top: -.1rem;
+			margin-right: -.1rem;
 		}
 
 		// 丝带
 		span {
-			display: inline-block;
-			text-align: center;
-			width: 2.5rem;
-			height: 0.45rem;
-			line-height: 0.45rem;
-			font-size: 0.3rem;
-			color: #fff;
 			position: absolute;
-			top: 0.25rem;
-			right: -0.8rem;
-			z-index: 2;
-			overflow: hidden;
+			top: 0;
+			left: 0;
 			transform: rotate(45deg);
-			-ms-transform: rotate(45deg);
-			-moz-transform: rotate(45deg);
-			-webkit-transform: rotate(45deg);
-			-o-transform: rotate(45deg);
-			box-shadow: 0 0 0.09rem rgba(151, 151, 255, 0.5);
-			background-image: linear-gradient(to bottom right, #7474ff, rgba(190, 190, 255, 1));
+			transform-origin: bottom;
+			margin-top: 0.01rem;
+			margin-left: 0.25rem;
+			width: 0.9rem;
+			font-size: 0.3rem;
+			text-align: center;
+			color: #fff;
 		}
 	}
 }
diff --git a/src/assets/img/icon/search-cross.png b/src/assets/img/icon/search-cross.png
new file mode 100755
index 0000000..696d019
Binary files /dev/null and b/src/assets/img/icon/search-cross.png differ
diff --git a/src/assets/img/icon/topRight .png b/src/assets/img/icon/topRight .png
new file mode 100755
index 0000000..cd3d821
Binary files /dev/null and b/src/assets/img/icon/topRight .png differ
diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue
index 7f24a0c..efa9df4 100755
--- a/src/components/HeaderNav.vue
+++ b/src/components/HeaderNav.vue
@@ -10,10 +10,9 @@
         </div>
 
         <div class="right flexacenter">
-          <div class="head-search flexcenter" v-if="issearch">
-            <img class="head-search-icon" src="@/assets/img/headerNav/search.png" />
-            <span>搜索</span>
-          </div>
+          <!-- <slot name="search"></slot> -->
+          <search-box slot="search" :issearch="true"></search-box>
+
           <div class="head-more flexcenter" @click="headMorePopState = !headMorePopState">
             <div class="red-dot" v-if="false"></div>
             <img class="head-more-icon" src="@/assets/img/headerNav/threeAcross.svg" />
@@ -60,6 +59,7 @@
       </div>
       <div class="head-pop" v-if="headMorePopState" @click="headMorePopState = !headMorePopState"></div>
     </div>
+
     <header v-if="false">
       <!-- 标题 -->
       <div class="header-title">
@@ -69,7 +69,7 @@
         <slot name="search"></slot>
 
         <!-- 折叠按钮 -->
-        <div class="header-collapse" @click="collapseClick">
+        <div class="header-collapse">
           <svg-icon icon-class="collapse" class-name="icon-collapse"></svg-icon>
           <div class="collapse-red"></div>
           <!-- 红点 -->
@@ -133,6 +133,8 @@
 </template>
 
 <script>
+import SearchBox from "../components/SearchBox.vue";
+
 export default {
   name: "HeaderNav",
   data() {
@@ -168,6 +170,10 @@ export default {
   mounted() {
     this.getMenu()
   },
+
+  components: {
+    SearchBox,
+  },
   methods: {
     // 处理登录
     handleRegister() {
@@ -196,13 +202,13 @@ export default {
       });
     },
 
-    // collapseClick() {
-    //   if (this.collapseShow == true) this.collapseShow = false;
-    //   else this.collapseShow = true;
-    // },
-    // collapseClose() {
-    //   this.collapseShow = false;
-    // },
+    collapseClick() {
+      if (this.collapseShow == true) this.collapseShow = false;
+      else this.collapseShow = true;
+    },
+    collapseClose() {
+      this.collapseShow = false;
+    },
   },
 };
 </script>
@@ -231,22 +237,6 @@ export default {
     }
 
     .right {
-      .head-search {
-        width: 2.4rem;
-        height: .8rem;
-        border-radius: 2.56rem;
-        background-color: rgba(235, 235, 235, 1);
-        color: #AAAAAA;
-        font-size: .3467rem;
-
-        .head-search-icon {
-          width: .4rem;
-          height: .4rem;
-          margin-right: .14rem;
-        }
-
-        margin-right: .4rem;
-      }
 
       .head-more {
         position: relative;
@@ -468,6 +458,175 @@ export default {
   }
 }
 
+// 折叠弹窗
+.collapse-box {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 1.19rem;
+  width: 750px;
+  margin: 0 auto;
+  min-height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 8;
+
+  &.collapse-show {
+    display: block;
+  }
+
+  .collapse-container {
+    background-color: #fff;
+    width: 7.6rem;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .collapse-my {
+    margin: 0.9rem 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.7rem 0 0.8rem;
+
+    .my-left {
+      width: 3.5rem;
+      display: flex;
+      align-items: center;
+    }
+
+    .my-right {
+      width: 2.5rem;
+      position: relative;
+      display: flex;
+      justify-content: end;
+    }
+
+    // 头像
+    .collapse-my-img {
+      width: 1.28rem;
+      height: 1.28rem;
+      border-radius: 0.67rem;
+      margin: 0 0.3rem 0 0;
+    }
+
+    .collapse-my-name {
+      font-size: 0.36rem;
+      color: #333;
+    }
+
+    .my-img {
+      width: 1.28rem;
+      height: 1.28rem;
+    }
+
+    .right-msg-img {
+      width: 0.44rem;
+      height: 0.44rem;
+      background-size: contain;
+      background-image: url("../assets/img/icon/email.png");
+    }
+
+    .right-msg-num {
+      display: flex;
+      justify-content: center;
+      width: 0.3rem;
+      height: 0.3rem;
+      line-height: 0.3rem;
+      border-radius: 0.2rem;
+      background-color: #fd3f5d;
+      color: #fff;
+      font-size: 0.254rem;
+      position: absolute;
+      top: -0.15rem;
+      right: -0.2rem;
+      z-index: 1;
+    }
+
+    // 未登录按钮
+    .loginBtn {
+      width: 2.24rem;
+      height: 0.8rem;
+      line-height: 0.8rem;
+      border-radius: 3.12rem;
+      background-color: rgba(98, 177, 255, 1);
+      color: #fff;
+      font-size: 0.34rem;
+      text-align: center;
+    }
+  }
+
+  // 折叠弹窗列表
+  .collapse-list {
+    margin-left: 0.8rem;
+    border-top: 0.013333rem solid #eee;
+    border-bottom: 0.013333rem solid #eee;
+    display: flex;
+    padding: 0.3rem 0;
+    flex-direction: column;
+
+    span {
+      height: 1.44rem;
+      line-height: 1.44rem;
+      border-radius: 0.22rem;
+      padding: 0 0.8rem;
+      font-size: 0.36rem;
+      margin: 0.1rem 0.8rem 0.1rem 0;
+    }
+
+    .listActive {
+      background-color: rgba(80, 227, 194, 1);
+      font-weight: bolder;
+    }
+  }
+
+  // 折叠弹窗发布帖子
+  .collapse-publish {
+    margin: 0.9rem 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+
+    span {
+      color: #000;
+      font-size: 0.4rem;
+    }
+
+    // 发布帖子图片
+    .collapse-publish-img {
+      width: 0.48rem;
+      height: 0.48rem;
+      border-radius: 0.24rem;
+      background-color: #fddf6d;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 0.2rem;
+    }
+
+    .icon-add {
+      width: 0.24rem;
+      height: 0.24rem;
+    }
+  }
+
+  .collapse-close {
+    display: flex;
+    justify-content: center;
+    padding: 0.5rem 0;
+
+    .icon-close {
+      width: 0.32rem;
+      height: 0.32rem;
+    }
+  }
+}
+
 
 header {
   display: flex;
@@ -512,173 +671,6 @@ header {
     right: -0.2rem;
   }
 
-  // 折叠弹窗
-  .collapse-box {
-    display: none;
-    position: absolute;
-    right: 0;
-    top: 1.19rem;
-    width: 750px;
-    margin: 0 auto;
-    min-height: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
-    z-index: 8;
 
-    &.collapse-show {
-      display: block;
-    }
-
-    .collapse-container {
-      background-color: #fff;
-      width: 7.6rem;
-      height: 100%;
-      position: absolute;
-      right: 0;
-      top: 0;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .collapse-my {
-      margin: 0.9rem 0;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0 0.7rem 0 0.8rem;
-
-      .my-left {
-        width: 3.5rem;
-        display: flex;
-        align-items: center;
-      }
-
-      .my-right {
-        width: 2.5rem;
-        position: relative;
-        display: flex;
-        justify-content: end;
-      }
-
-      // 头像
-      .collapse-my-img {
-        width: 1.28rem;
-        height: 1.28rem;
-        border-radius: 0.67rem;
-        margin: 0 0.3rem 0 0;
-      }
-
-      .collapse-my-name {
-        font-size: 0.36rem;
-        color: #333;
-      }
-
-      .my-img {
-        width: 1.28rem;
-        height: 1.28rem;
-      }
-
-      .right-msg-img {
-        width: 0.44rem;
-        height: 0.44rem;
-        background-size: contain;
-        background-image: url("../assets/img/icon/email.png");
-      }
-
-      .right-msg-num {
-        display: flex;
-        justify-content: center;
-        width: 0.3rem;
-        height: 0.3rem;
-        line-height: 0.3rem;
-        border-radius: 0.2rem;
-        background-color: #fd3f5d;
-        color: #fff;
-        font-size: 0.254rem;
-        position: absolute;
-        top: -0.15rem;
-        right: -0.2rem;
-        z-index: 1;
-      }
-
-      // 未登录按钮
-      .loginBtn {
-        width: 2.24rem;
-        height: 0.8rem;
-        line-height: 0.8rem;
-        border-radius: 3.12rem;
-        background-color: rgba(98, 177, 255, 1);
-        color: #fff;
-        font-size: 0.34rem;
-        text-align: center;
-      }
-    }
-
-    // 折叠弹窗列表
-    .collapse-list {
-      margin-left: 0.8rem;
-      border-top: 0.013333rem solid #eee;
-      border-bottom: 0.013333rem solid #eee;
-      display: flex;
-      padding: 0.3rem 0;
-      flex-direction: column;
-
-      span {
-        height: 1.44rem;
-        line-height: 1.44rem;
-        border-radius: 0.22rem;
-        padding: 0 0.8rem;
-        font-size: 0.36rem;
-        margin: 0.1rem 0.8rem 0.1rem 0;
-      }
-
-      .listActive {
-        background-color: rgba(80, 227, 194, 1);
-        font-weight: bolder;
-      }
-    }
-
-    // 折叠弹窗发布帖子
-    .collapse-publish {
-      margin: 0.9rem 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: row;
-
-      span {
-        color: #000;
-        font-size: 0.4rem;
-      }
-
-      // 发布帖子图片
-      .collapse-publish-img {
-        width: 0.48rem;
-        height: 0.48rem;
-        border-radius: 0.24rem;
-        background-color: #fddf6d;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-right: 0.2rem;
-      }
-
-      .icon-add {
-        width: 0.24rem;
-        height: 0.24rem;
-      }
-    }
-
-    .collapse-close {
-      display: flex;
-      justify-content: center;
-      padding: 0.5rem 0;
-
-      .icon-close {
-        width: 0.32rem;
-        height: 0.32rem;
-      }
-    }
-  }
 }
 </style>
diff --git a/src/components/PlateNavigation.vue b/src/components/PlateNavigation.vue
new file mode 100755
index 0000000..2c182a7
--- /dev/null
+++ b/src/components/PlateNavigation.vue
@@ -0,0 +1,32 @@
+<!-- 板块导航 头部 点击板块后的头部导航 -->
+<template>
+    <div class="path-box">
+        <div>论坛</div>
+        <span class="path-slash">/</span>
+        <div class="oneEllipsis">{{ stairname }}</div>
+        <span class="path-slash">/</span>
+        <div class="oneEllipsis">{{ subsectionsname }}</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'PlateNavigation',
+
+    data() {
+        return {
+
+        };
+    },
+    props: ["stairname", "subsectionsname"],
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/components/SearchBox.vue b/src/components/SearchBox.vue
index 5d56f6e..c13709b 100755
--- a/src/components/SearchBox.vue
+++ b/src/components/SearchBox.vue
@@ -1,23 +1,24 @@
 <template>
 	<div>
-		<div class="header-search" @click="searchClick">
-			<div class="header-search-img"></div>
-			<div class="header-search-text">搜索</div>
+		<div class="head-search flexcenter" v-if="issearch" @click="searchClick()">
+			<img class="head-search-icon" src="@/assets/img/headerNav/search.png" />
+			<span>搜索</span>
 		</div>
+
 		<!-- 搜索弹窗 -->
-		<div class="search-window" :class="{'searchShow':searchWinShow == true}">
+		<div class="search-window" :class="{ 'searchShow': searchWinShow == true }">
 			<!-- 搜索框 -->
-			<div class="search-input">
-				<form action="javascript:return true;" @submit.prevent>
-					<div class="search-icon"></div>
-					<input ref="searchInput" v-model="searchText" type="search" placeholder="请输入搜索关键词"/>
-					<div v-if="showClear" class="clear-text" @click="clearText"></div>
-				</form>
-				
-				<div class="search-close" @click="searchClose">取消</div>
+			<div class="search-input flexacenter">
+				<div class="form flexacenter">
+					<img class="search-icon" src="@/assets/img/headerNav/search.png">
+					<input class="flex1" ref="searchInput" v-model="searchText" type="text" placeholder="请输入搜索关键词" />
+					<img v-if="searchText" @click.stop="clearText()" class="clear-text" src="@/assets/img/icon/clear.png">
+				</div>
+
+				<div class="search-close" @click="searchClose()">取消</div>
 			</div>
 			<!-- 历史搜索 -->
-			<div class="search-content">
+			<div class="search-content flexcolumn">
 				<div class="search-text">历史搜索</div>
 				<div class="search-label">
 					<span>香港大学</span>
@@ -38,172 +39,157 @@
 </template>
 
 <script>
-	export default {
-		name: "SearchBox",
-		data() {
-			return {
-				searchWinShow: false,//显示搜索弹窗
-				searchText: '',
-				showClear: false, //显示清除按钮
-			}
-		},
-		methods: {
-			// 点击显示搜索弹窗
-			searchClick() {
-				this.searchWinShow = true
-				this.$refs.searchInput.blur();  
-			},
-			// 点击隐藏搜索弹窗
-			searchClose(){
-				this.searchWinShow = false
-			},
-			// 搜索键盘、搜索
-			search(categoryId) {
-				this.$refs.searchInput.blur();  
-			},
-			// 清空文本框
-			clearText() {
-				if(this.searchText.length > 0) {
-					this.searchText = ""
-				}
-			}
-		},
-		mounted() {
-			if(this.searchText.length > 0) {
-				this.showClear = true
-			}else{
-				this.showClear = false
-			}
+export default {
+	name: "SearchBox",
+	data() {
+		return {
+			searchWinShow: false,//显示搜索弹窗
+			searchText: '',
+			showClear: false, //显示清除按钮
 		}
+	},
+	props: ["issearch"],
+
+	methods: {
+		collapseClick() {
+			if (this.collapseShow == true) this.collapseShow = false;
+			else this.collapseShow = true;
+		},
+		// 点击显示搜索弹窗
+		searchClick() {
+			this.searchWinShow = true
+			this.$nextTick(() => {
+				this.$refs.searchInput.focus();
+			})
+		},
+		// 点击隐藏搜索弹窗
+		searchClose() {
+			this.searchWinShow = false
+		},
+		// 搜索键盘、搜索
+		search(categoryId) {
+			this.$refs.searchInput.blur();
+		},
+		// 清空文本框
+		clearText() {
+			this.searchText = ""
+		}
+	},
+	mounted() {
+		if (this.searchText.length > 0) this.showClear = true
+		else this.showClear = false
+
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	// 搜索弹窗
-	.search-window{
-		    display: none;
-		    position: fixed;
-		    top: 0;
-		    left: 0;
-		    width: 100%;
-		    min-height: 100vh;
-		    background-color: #f6f6f6;
-		    z-index: 9;
-		&.searchShow{
-			display: block;
-		}
-		.search-input{
-			padding: 0.27rem 0.32rem 0.27rem;
-			display: flex;
-			flex-direction: row;
-			justify-content: space-between;
-			align-items: center;
-			
-			.search-icon{
-				position: absolute;
-				top: 0.43rem;
-				left: 0.3rem;
-				width: 0.32rem;
-				height: 0.32rem;
-				background-size: contain;
-				background-image: url('@/assets/img/icon/search.png');
-			}
-			form{
-				width: 90%;
-				position: relative;
-			}
-			input{
-				width: 100%;
-				box-sizing: border-box;
-				text-align: left;
-				font-size: 0.36rem;
-				height: 1.12rem;
-				line-height: 1.12rem;
-				border-radius: 0.56rem;
-				background-color: #ebebeb;
-				border: none;
-				color: #000;
-				display: block;
-				outline: 0;
-				padding-left: 0.8rem;
-				padding-right: 0.9rem;
-				text-decoration: none;
-				&[type="search"]{-webkit-appearance:none;} 
-				&::-webkit-search-cancel-button {display: none;}
-				&:placeholder-shown{
-					color: #aaa;
-				}
-			}
-			.clear-text{
-				width: 0.4rem;
-				height: 0.4rem;
-				position: absolute;
-				top: 0.35rem;
-				right: 0.3rem;
-				background-size: contain;
-				background-image: url('/src/assets/img/icon/clear.png');
-			}
-			.search-close{
-				width: 10%;
-				font-size: 0.36rem;
-				text-align: right;
-			}
-		}
-		
-		.search-content{
-			padding: 0.27rem 0.32rem 0.27rem;
-			display: flex;
-			flex-direction: column;
-			margin-top: 0.2rem;
-			.search-text{
-				color: #7F7F7F;
-				font-size: 0.32rem;
-				margin-bottom: 0.13rem;
-			}
-			.search-label{
-				display: flex;
-				flex-direction: row;
-				flex-wrap: wrap;
-				span{
-					padding: 0 0.2rem;
-					height: 0.96rem;
-					line-height: 0.96rem;
-					background-color: #fff;
-					border-radius: 0.16rem;
-					color: #333;
-					text-align: center;
-					font-size: 0.36rem;
-					margin: 0.2rem 0.16rem 0 0;
-				}
-			}
-		}
-		
+.head-search {
+	width: 2.4rem;
+	height: .8rem;
+	border-radius: 2.56rem;
+	background-color: rgba(235, 235, 235, 1);
+	color: #AAAAAA;
+	font-size: .3467rem;
+
+	.head-search-icon {
+		width: .4rem;
+		height: .4rem;
+		margin-right: .14rem;
 	}
 
-	
-	.header-search {
-    width: 2.4rem;
-    height: 0.8rem;
-    line-height: 0.8rem;
-    border-radius: 2.56rem;
-    background-color: rgba(235, 235, 235, 1);
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    margin-right: 0.35rem;
-    .header-search-img {
-      width: 0.4rem;
-      height: 0.4rem;
-      background-size: contain;
-      margin: 0 0.133333rem 0 0;
-      background-image: url("@/assets/img/icon/search.png");
-    }
-    .header-search-text {
-      text-align: left;
-      font-size: 0.32rem;
-      color: #aaaaaa;
-      display: block;
-    }
-  }
+	margin-right: .4rem;
+}
+
+
+
+// 搜索弹窗
+.search-window {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	min-height: 100vh;
+	background-color: #f6f6f6;
+	z-index: 9;
+
+	&.searchShow {
+		display: block;
+	}
+
+	.search-input {
+		padding: 0.27rem 0.32rem 0.27rem;
+		justify-content: space-between;
+
+		.search-icon {
+			width: .4rem;
+			height: .4rem;
+		}
+
+		.form {
+			width: 90%;
+			background-color: #ebebeb;
+			height: 1.12rem;
+			line-height: 1.12rem;
+			border-radius: 0.56rem;
+			padding-left: .4rem;
+
+		}
+
+		input {
+			font-size: 0.36rem;
+			border: none;
+			outline: 0;
+			color: #000;
+			padding-left: .34rem;
+			height: 1.12rem;
+			background: transparent;
+
+		}
+
+		.clear-text {
+			width: 0.4rem;
+			height: 0.4rem;
+			padding: .48rem;
+		}
+
+		.search-close {
+			width: 10%;
+			font-size: 0.36rem;
+			text-align: right;
+		}
+	}
+
+	.search-content {
+		padding: 0.27rem 0.32rem 0.27rem;
+		margin-top: 0.2rem;
+
+		.search-text {
+			color: #7F7F7F;
+			font-size: 0.32rem;
+			margin-bottom: .32rem;
+		}
+
+		.search-label {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+
+			span {
+				padding: 0 0.2rem;
+				height: 0.96rem;
+				line-height: 0.96rem;
+				background-color: #fff;
+				border-radius: 0.16rem;
+				color: #333;
+				text-align: center;
+				font-size: 0.36rem;
+				margin-right: .2rem;
+				margin-bottom: .24rem;
+			}
+		}
+	}
+
+}
 </style>
\ No newline at end of file
diff --git a/src/components/SvgIcon.vue b/src/components/SvgIcon.vue
index 0e9c253..087c1e5 100755
--- a/src/components/SvgIcon.vue
+++ b/src/components/SvgIcon.vue
@@ -1,41 +1,44 @@
 <template>
-	<svg :class="svgClass" xmlns="http://www.w3.org/2000/svg">
-		<use :xlink:href="iconName" xmlns:xlink="http://www.w3.org/1999/xlink" />
+	<!-- <svg class="svg-icon" :class="svgClass" xmlns="http://www.w3.org/2000/svg"> -->
+	<!-- <use :xlink:href="iconName" xmlns:xlink="http://www.w3.org/1999/xlink" /> -->
+
+	<svg class="svg-icon" :class="className" xmlns="http://www.w3.org/2000/svg">
+		<use :xlink:href="`#icon-${iconClass}`" xmlns:xlink="http://www.w3.org/1999/xlink" />
 	</svg>
 </template>
 <script>
-	export default {
-		name: 'SvgIcon',
-		props: {
-			iconClass: {
-				type: String,
-				required: true
-			},
-			className: {
-				type: String,
-				default: ''
-			}
+export default {
+	name: 'SvgIcon',
+	props: {
+		iconClass: {
+			type: String,
+			required: true
 		},
-		computed: {
-			iconName() {
-				return `#icon-${this.iconClass}`;
-			},
-			svgClass() {
-				if (this.className) {
-					return 'svg-icon ' + this.className;
-				} else {
-					return 'svg-icon';
-				}
+		className: {
+			type: String,
+			default: ''
+		}
+	},
+	computed: {
+		iconName() {
+			return `#icon-${this.iconClass}`;
+		},
+		svgClass() {
+			if (this.className) {
+				return 'svg-icon ' + this.className;
+			} else {
+				return 'svg-icon';
 			}
 		}
-	};
+	}
+};
 </script>
 <style scoped>
-	.svg-icon {
-		/* width: 100%;
+.svg-icon {
+	/* width: 100%;
 		height: 100%; */
-		vertical-align: -0.15em;
-		fill: currentColor;
-		overflow: hidden;
-	}
+	vertical-align: -0.15em;
+	fill: currentColor;
+	overflow: hidden;
+}
 </style>
diff --git a/src/views/collect/Collect.vue b/src/views/collect/Collect.vue
index 3798df4..cb66022 100755
--- a/src/views/collect/Collect.vue
+++ b/src/views/collect/Collect.vue
@@ -3,28 +3,22 @@
   <div class="collect">
     <!-- 未收藏 -->
     <div v-if="collect.length == 0" class="notCollect">
-      <img
-        class="notCollect-img"
-        src="~assets/img/collect/notCollect.png"
-        alt="未收藏"
-      />
+      <img class="notCollect-img" src="~assets/img/collect/notCollect.png" alt="未收藏" />
       <div class="collect-text">收藏你感兴趣的版块，迅速浏览相应的帖子</div>
-      <div class="collect-btn">
+      <!-- <div class="collect-btn"> -->
+      <router-link to="/allSections" class="flexcenter collect-btn">
+
         <div class="collect-btn-text">马上收藏</div>
         <svg-icon icon-class="collect-btn" class-name="icon-collect"></svg-icon>
-      </div>
+      </router-link>
+      <!-- </div> -->
     </div>
     <!-- 已收藏 -->
     <div v-else>
       <!-- 热门版块 -->
       <div class="hot-box">
-        <div
-          class="hot-label"
-          :class="{ active: hotActive == index }"
-          v-for="(item, index) in list"
-          :key="index"
-          @click="hotLabelClick(index)"
-        >
+        <div class="hot-label" :class="{ active: hotActive == index }" v-for="(item, index) in list" :key="index"
+          @click="hotLabelClick(index)">
           {{ item.label }}
         </div>
         <!-- 设置按钮 -->
@@ -33,28 +27,18 @@
           设置
         </div>
         <!-- 设置  收藏版块弹窗 -->
-        <div
-          class="setting-window"
-          :class="{ 'setting-show': settingShow == true }"
-          @click="settingClose"
-        >
+        <div class="setting-window" :class="{ 'setting-show': settingShow == true }" @click="settingClose">
           <div class="setting-container" @click.stop>
             <div class="setting-title">设置收藏版块</div>
             <div class="setting-total">
               <div class="setting-num">共收藏<b> 5 </b>个版块</div>
-              <div class="setting-add">
-                <router-link to="/allSections">
-                  <svg-icon
-                    icon-class="settingAdd"
-                    class-name="setting-add-img"
-                  ></svg-icon
-                  >添加
-                </router-link>
-              </div>
+              <router-link to="/allSections" class="flexcenter setting-add">
+                <svg-icon icon-class="settingAdd" class-name="setting-add-img"></svg-icon>添加
+              </router-link>
             </div>
             <!-- 弹窗收藏版块内容 -->
             <div class="setting-sections">
-              <div class="setting-item">
+              <div class="setting-item" v-for="item in 1" :key="item">
                 <div class="setting-item-title">香港澳门台湾留学申请</div>
                 <div class="setting-star"></div>
               </div>
@@ -65,11 +49,7 @@
         </div>
       </div>
       <!-- 路径 -->
-      <div class="path-box">
-        <div>论坛</div>
-        <div class="oneEllipsis">论坛</div>
-        <div class="oneEllipsis">论坛</div>
-      </div>
+      <plate-navigation stairname="寄托学术类备" subsectionsname="SAT、AP考试、海外本科申…"></plate-navigation>
       <!-- 内容区域 -->
       <section>
         <!-- 帖子 -->
@@ -89,10 +69,7 @@
           <!-- 头像、浏览量、消息 -->
           <div class="bottom">
             <div class="bottom-box">
-              <svg-icon
-                icon-class="test-head"
-                class-name="icon-head"
-              ></svg-icon>
+              <svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
               <div class="bottom-name">匿名用户</div>
             </div>
             <div class="bottom-box">
@@ -108,9 +85,8 @@
           </div>
           <!-- 精华 -->
           <div class="rightTop">
-            <div>
-              <span>精华</span>
-            </div>
+            <img class="rightTop-img" src="@/assets/img/icon/topRight .png">
+            <span>精华</span>
           </div>
         </div>
         <div class="card-box">
@@ -126,10 +102,7 @@
           <!-- 头像、浏览量、消息 -->
           <div class="bottom">
             <div class="bottom-box">
-              <svg-icon
-                icon-class="test-head"
-                class-name="icon-head"
-              ></svg-icon>
+              <svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
               <div class="bottom-name">匿名用户</div>
             </div>
             <div class="bottom-box">
@@ -145,9 +118,8 @@
           </div>
           <!-- 精华 -->
           <div class="rightTop">
-            <div>
-              <span>精华</span>
-            </div>
+            <img class="rightTop-img" src="@/assets/img/icon/topRight .png">
+            <span>精华</span>
           </div>
         </div>
         <!-- 广告 -->
@@ -155,16 +127,17 @@
           <svg-icon icon-class="test-banner" class-name="banner"></svg-icon>
         </div>
         <!-- 分页 -->
-        <div class="paging-box">
+        <!-- <div class="paging-box">
           <el-pagination layout="prev, pager, next" :total="100">
           </el-pagination>
-        </div>
+        </div> -->
       </section>
     </div>
   </div>
 </template>
 
 <script>
+import plateNavigation from '@/components/PlateNavigation.vue'
 export default {
   name: "Collect",
   data() {
@@ -190,6 +163,9 @@ export default {
       ],
     };
   },
+  components: {
+    plateNavigation
+  },
   methods: {
     hotLabelClick(index) {
       this.hotActive = index;
@@ -214,6 +190,7 @@ export default {
   border: 0.013333rem solid rgba(127, 127, 127, 1);
   font-size: 0.3rem;
   color: #333;
+
   img {
     width: 0.32rem;
     height: 0.32rem;
@@ -254,7 +231,7 @@ export default {
   //弹窗标题
   .setting-title {
     text-align: center;
-    padding: 0.56rem 0;
+    padding: .64rem 0 1.06rem;
     font-size: 0.48rem;
     font-weight: bolder;
     color: #000;
@@ -264,7 +241,10 @@ export default {
   .setting-total {
     display: flex;
     justify-content: space-between;
-    margin: 0.25rem 0.4rem 0 0.5rem;
+    // margin: 0.25rem 0.4rem 0 0.5rem;
+    // margin: 0 0.4rem 0 0.5rem;
+    margin-right: .32rem;
+    margin-left: .64rem;
 
     b {
       font-weight: bolder;
@@ -276,32 +256,38 @@ export default {
     font-size: 0.32rem;
     color: #000;
     font-weight: 400;
+    color: #333;
+    font-size: .32rem;
   }
 
   .setting-add-img {
     width: 0.4rem;
     height: 0.4rem;
-    margin-right: 0.07rem;
+    margin-right: .16rem;
   }
 
   // 设置收藏内容区域
   .setting-sections {
     width: 100%;
     overflow-y: scroll;
-    display: inherit;
-    margin: 0.45rem 0 0;
+    // display: inherit;
+    // margin-top: 0.45rem;
+    margin-top: .8rem;
     max-height: 58vh;
-    margin-bottom: 2.8rem;
+    margin-bottom: .7733rem;
 
     .setting-item {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
-      margin-left: 0.87rem;
+      // margin-left: 0.87rem;
+      margin-left: 1.04rem;
       border-bottom: 0.013333rem solid #eee;
       position: relative;
-      padding: 0.5rem 0;
+      // padding: 0.5rem 0;
+      padding: .58rem 0;
+      font-size: .36rem;
 
       &::before {
         content: "";
@@ -309,7 +295,9 @@ export default {
         height: 0.32rem;
         border-radius: 0.16rem;
         position: absolute;
-        top: 0.6rem;
+        // top: 0.6rem;
+        top: 50%;
+        transform: translateY(-50%);
         left: -0.4rem;
         background-color: #62b1ff;
       }
@@ -321,6 +309,7 @@ export default {
       &:last-child {
         border: none;
       }
+
       .setting-star {
         width: 0.48rem;
         height: 0.48rem;
@@ -333,15 +322,15 @@ export default {
 
   .setting-close {
     width: 50%;
-    margin: 0.666667rem auto;
+    margin: 0 auto .72rem;
     border: 0.013333rem solid #ccc;
     height: 1.28rem;
     line-height: 1.28rem;
     border-radius: 0.67rem;
     text-align: center;
-    position: fixed;
-    bottom: 0;
-    left: 25%;
+    // position: fixed;
+    // bottom: 0;
+    // left: 25%;
   }
 }
 
@@ -353,7 +342,7 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 0.67rem;
+  margin: 0.67rem 0.35rem;
   background-color: #fff;
 
   .notCollect-img {
@@ -369,18 +358,20 @@ export default {
   .collect-btn {
     display: flex;
     align-items: center;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
 
     .collect-btn-text {
       color: #000;
-      font-weight: bold;
+      font-weight: 650;
       font-size: 0.4rem;
-      margin: 1rem 0.25rem;
     }
 
     //图标
     .icon-collect {
       width: 0.48rem;
       height: 0.48rem;
+      margin-left: 0.25rem;
     }
   }
 }
diff --git a/src/views/index.vue b/src/views/index.vue
index 15faadf..a0314f3 100755
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -2,7 +2,6 @@
   <div>
     <header-nav :issearch="true" :needgetuser="true">
       <template slot="header-title">寄托天下论坛</template>
-      <search-box slot="search"></search-box>
     </header-nav>
     <nav>
       <router-link to="/recommend">推荐阅读</router-link>
@@ -20,7 +19,6 @@
 
 <script>
 import HeaderNav from "../components/HeaderNav";
-import SearchBox from "../components/SearchBox.vue";
 export default {
   name: "Index",
   data() {
@@ -28,7 +26,6 @@ export default {
   },
   components: {
     HeaderNav,
-    SearchBox,
   },
 };
 </script>
@@ -56,6 +53,7 @@ nav {
     -webkit-user-select: none;
     -moz-user-focus: none;
     -moz-user-select: none;
+    color: #555;
 
     &.router-link-exact-active {
       color: #000;
@@ -64,6 +62,7 @@ nav {
     }
   }
 }
+
 // 发帖按钮
 .publish {
   background-color: rgba(253, 223, 109, 1);
diff --git a/src/views/recommend/Recommend.vue b/src/views/recommend/Recommend.vue
index 777c570..92fe7a7 100755
--- a/src/views/recommend/Recommend.vue
+++ b/src/views/recommend/Recommend.vue
@@ -2,14 +2,16 @@
 	<div class="recommend">
 		<!-- 热门版块 -->
 		<div class="hot-box">
-			<div class="hot-label" :class="{'active': hotActive == index}" v-for="(item, index) in list" :key="index" @click="hotLabelClick(index)">{{item.label}}</div>
+			<div class="hot-label" :class="{ 'active': hotActive == index }" v-for="(item, index) in list" :key="index"
+				@click="hotLabelClick(index)">{{ item.label }}</div>
 		</div>
 		<!-- 路径 -->
-		<div class="path-box">
+		<plate-navigation stairname="寄托学术类备" subsectionsname="SAT、AP考试、海外本科申…"></plate-navigation>
+		<!-- <div class="path-box">
 			<div>论坛</div>
 			<div class="oneEllipsis">论坛论坛论坛论坛论坛</div>
 			<div class="oneEllipsis">论坛</div>
-		</div>
+		</div> -->
 		<!-- 内容区域 -->
 		<section>
 			<!-- 帖子 -->
@@ -19,7 +21,8 @@
 					<div class="top-title">23fall 美国llm 求定位</div>
 				</div>
 				<div class="center">
-					<div class="center-text moreEllipsis">背景：生于80年代中期，英语基础不好，备考托福3个月，刚好100分。2018年8月开始读LLM. 读书期间Point Bar6666666666666666666666</div>
+					<div class="center-text moreEllipsis">背景：生于80年代中期，英语基础不好，备考托福3个月，刚好100分。2018年8月开始读LLM. 读书期间Point
+						Bar6666666666666666666666</div>
 				</div>
 				<div class="bottom">
 					<div class="bottom-box">
@@ -32,16 +35,15 @@
 							<div>1552</div>
 						</div>
 						<div class="bottom-right">
-							<svg-icon icon-class="msg" class-name="icon-look"></svg-icon>
+							<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
 							<div>12</div>
 						</div>
 					</div>
 				</div>
 				<!-- 精华 -->
 				<div class="rightTop">
-					<div>
-						<span>精华</span>
-					</div>
+					<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
+					<span>精华</span>
 				</div>
 			</div>
 			<div class="card-box">
@@ -77,45 +79,45 @@
 			</div>
 			<!-- 分页 -->
 			<div class="paging-box">
-				<el-pagination
-				    layout="prev, pager, next"
-				    :total="100">
-				  </el-pagination>
+				<el-pagination layout="prev, pager, next" :total="100">
+				</el-pagination>
 			</div>
 		</section>
 	</div>
 </template>
 
 <script>
-	export default {
-		name: "Recommend",//推荐阅读
-		data() {
-			return {
-				hotActive: -1,//热门版块活跃点击
-				list: [
-					{
-						label: "香港留学"
-					},
-					{
-						label: "香港留学"
-					},
-					{
-						label: "香港留学"
-					},
-					{
-						label: "香港留学"
-					}
-				]
-			}
-		},
-		methods: {
-			hotLabelClick(index) {
-				this.hotActive = index 
-			}
+import plateNavigation from '@/components/PlateNavigation.vue'
+export default {
+	name: "Recommend",//推荐阅读
+	data() {
+		return {
+			hotActive: -1,//热门版块活跃点击
+			list: [
+				{
+					label: "香港留学"
+				},
+				{
+					label: "香港留学"
+				},
+				{
+					label: "香港留学"
+				},
+				{
+					label: "香港留学"
+				}
+			]
+		}
+	},
+	components: {
+		plateNavigation
+	},
+	methods: {
+		hotLabelClick(index) {
+			this.hotActive = index
 		}
 	}
+}
 </script>
 
-<style>
-
-</style>
\ No newline at end of file
+<style></style>
\ No newline at end of file