modified

2023-03-28 18:04:49 +08:00 · 2023-03-28 18:04:49 +08:00 · 947f9418ad
commit 947f9418ad
52 changed files with 18283 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,19 @@
+# ninepage
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+  
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,33 @@
+{
+  "name": "ninepage",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "axios": "^1.3.4",
+    "core-js": "^3.8.3",
+    "element-ui": "^2.15.13",
+    "node-sass": "^8.0.0",
+    "svg-sprite-loader": "^6.0.11",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "sass-loader": "^13.2.0",
+    "vue-template-compiler": "^2.6.14",
+    "vue2-svg-icon": "^1.3.2"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,61 @@
+<template>
+  <div id="app">
+    <div class="container">
+		<router-view/>
+	</div>
+  </div>
+</template>
+<script>
+	export default {
+		name: "App",
+		data() {
+			return {
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import 'assets/css/normalize.css';
+	@import 'assets/css/public.scss';//帖子内容样式
+#app {
+	font-family: Avenir, Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	display: flex;
+	flex-direction: column;
+	margin: 0 auto;
+	position: relative;
+}
+.container{
+	// padding: 0 0.35rem;
+	background-color: rgba(246, 246, 246, 1);
+	min-height: 100vh;
+}
+
+.flexflex{
+	display: flex;
+}
+
+.flexcenter {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.flexacenter {
+	display: flex;
+	align-items: center;
+}
+
+.flexcolumn {
+	display: flex;
+	flex-direction: column;
+}
+
+
+.el-message {
+	min-width:  7rem !important;
+}
+
+</style>
--- a/src/assets/css/normalize.css
+++ b/src/assets/css/normalize.css
@ -0,0 +1,46 @@
+*{
+	padding: 0;
+	margin: 0;
+	color: #555;
+	font-family: '微软雅黑';
+	font-weight: 400;
+}
+body {
+	margin: 0 auto;
+	/* 最小宽度 */
+	min-width: 320px;
+	/* 最大宽度因为原稿为750px需要把宽度直接限定死*/
+	max-width: 749px;
+	/* 原稿750px flexible把屏幕给我们划分为10等份，转为rem所以是10rem */
+	/* width: 10rem; */
+}
+
+/* 如果屏幕超过了750px，那么我们就让他默认为750px，不能超过750px。 */
+@media screen and (min-width: 750px) {
+	html {
+		font-size: 75px !important;
+	}
+}
+a{
+	text-decoration: none;
+}
+ol,ul{
+	list-style: none;
+}
+
+/* 单行省略 */
+.oneEllipsis{
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	word-break: break-all;
+}
+/* 多行省略(2行) */
+.moreEllipsis{
+	word-break: break-all;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+}
--- a/src/assets/css/public.scss
+++ b/src/assets/css/public.scss
@ -0,0 +1,314 @@
+// 热门版块标签
+.hot-box {
+	padding: .34rem 0 0.3rem;
+	display: flex;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+	margin: 0 0.35rem;
+
+	.hot-label {
+		border: 0.013333rem solid rgba(215, 215, 215, 1);
+		border-radius: 0.16rem;
+		font-size: 0.3rem;
+		margin: 0 .16rem .24rem 0;
+		padding: 0 0.15rem;
+		height: 0.72rem;
+		line-height: 0.72rem;
+		text-align: center;
+
+		&.active {
+			border: 0.02rem solid #62B1FF;
+			color: #62B1FF;
+		}
+	}
+}
+
+//路径
+.path-box {
+	display: flex;
+	flex-direction: row;
+	height: 1.28rem;
+	line-height: 1.28rem;
+	margin: 0.2rem 0.35rem 0;
+	padding: 0 0.25rem;
+	border-radius: 1.68rem 1.68rem 0 1.68rem;
+	background-color: #fff;
+	font-size: 0.32rem;
+	-webkit-box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.1);
+	box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.1);
+	position: relative;
+
+	div {
+		color: #7F7F7F;
+		max-width: 2.5rem;
+
+		&::before {
+			content: "/";
+			width: 0.2rem;
+			padding: 0 0.07rem;
+			color: #7F7F7F;
+		}
+
+		&:last-child {
+			max-width: 50%;
+			color: #000;
+			font-weight: bold;
+		}
+
+		&:first-child::before {
+			content: "";
+		}
+	}
+
+	&::after {
+		content: "";
+		width: 0;
+		height: 0;
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		border-top: 0.24rem solid rgba(98, 177, 255, 1);
+		border-left: 0.24rem solid transparent;
+		transform: rotateX(180deg);
+		margin: 0 0.09rem 0.09rem 0;
+	}
+
+}
+
+//内容层
+section {
+	padding-top: 0.45rem;
+	margin: 0 0.35rem;
+}
+
+//帖子内容层
+.card-box {
+	background-color: #fff;
+	padding: 0.4rem;
+	border-radius: 0.32rem;
+	box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.1);
+	margin-bottom: 0.32rem;
+	position: relative;
+
+	// 帖子标题
+	.top {
+		width: 95%;
+		max-height: 1.31rem;
+		text-align: left;
+
+		.top-label {
+			display: inline-block;
+			background-color: #000;
+			color: #fff;
+			height: 0.52rem;
+			line-height: 0.52rem;
+			font-size: 0.28rem;
+			border-radius: 0.16rem;
+			padding: 0 0.12rem;
+			margin-right: 0.11rem;
+		}
+
+		.top-title {
+			display: inline;
+			font-size: 0.373333rem;
+			line-height: 0.65rem;
+			color: #000;
+		}
+	}
+
+	// 帖子内容
+	.center {
+		padding: 0.3rem 0 0.6rem;
+
+		.center-text {
+			font-size: 0.3rem;
+			color: #7F7F7F;
+			max-height: 1rem;
+			line-height: 0.53rem;
+		}
+
+		// 回复可见
+		.center-text-visible {
+			border-radius: 0.16rem;
+			background-color: rgba(242, 242, 242, 0.7);
+			padding: 0.28rem;
+			text-align: center;
+			margin-top: 0.25rem;
+		}
+	}
+
+	// 帖子头像、消息、浏览量
+	.bottom {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+
+		.bottom-box {
+			display: flex;
+			flex-direction: row;
+			justify-content: flex-start;
+			align-items: center;
+
+			.icon-head {
+				width: 0.64rem;
+				height: 0.64rem;
+				border-radius: 0.32rem;
+			}
+
+			.bottom-name {
+				margin-left: 0.15rem;
+				font-size: 0.32rem;
+			}
+
+			.bottom-right {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				padding-left: 0.25rem;
+
+				&:last-child {
+					margin-left: 0.133333rem;
+				}
+
+				div {
+					margin-left: 0.1rem;
+					font-size: 0.28rem;
+				}
+
+				.icon-look {
+					width: 0.32rem;
+					height: 0.3rem;
+				}
+
+				.icon-msg {
+					width: 0.32rem;
+					height: 0.28rem;
+				}
+			}
+		}
+	}
+
+	// 精华
+	.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;
+		}
+
+		// 丝带
+		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;
+			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));
+		}
+	}
+}
+
+// 广告
+.banner-box {
+	border-radius: 0.32rem;
+	margin-bottom: 0.2rem;
+
+	// 广告图
+	.banner {
+		width: 100%;
+		display: block;
+		border-radius: 0.32rem;
+	}
+}
+
+// 分页
+.paging-box {
+	margin: 0 auto;
+	display: flex;
+	justify-content: center;
+	margin-bottom: 0.4rem;
+
+	// element组件修改
+	.el-pagination {
+		padding: 0;
+		display: flex;
+		align-items: center;
+
+		button {
+			&:disabled {
+				background-color: transparent;
+				opacity: 0.5;
+			}
+		}
+
+		.btn-next,
+		.btn-prev {
+			background-color: transparent;
+
+			.el-icon {
+				font-size: 0.5rem;
+			}
+		}
+	}
+
+	.el-pager li {
+		background-color: transparent;
+		font-weight: lighter;
+		min-width: 0.48rem;
+		height: 0.48rem;
+		line-height: 0.48rem;
+		border-radius: 0.4rem;
+
+		&.active {
+			color: #fff;
+			background-color: rgba(98, 177, 255, 1) !important;
+		}
+	}
+
+}
--- a/src/assets/img/allSections/nullStar.png
+++ b/src/assets/img/allSections/nullStar.png
--- a/src/assets/img/allSections/star.png
+++ b/src/assets/img/allSections/star.png
--- a/src/assets/img/collect/notCollect.png
+++ b/src/assets/img/collect/notCollect.png
--- a/src/assets/img/headerNav/addyellow.svg
+++ b/src/assets/img/headerNav/addyellow.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -3701 -968 )">
+    <path d="M 11.7613636363636 4.60227272727273  C 11.9204545454545 4.76136363636363  12 4.95454545454545  12 5.18181818181818  L 12 6.81818181818182  C 12 7.04545454545455  11.9204545454545 7.23863636363636  11.7613636363636 7.39772727272727  C 11.6022727272727 7.55681818181818  11.4090909090909 7.63636363636364  11.1818181818182 7.63636363636364  L 7.63636363636364 7.63636363636364  L 7.63636363636364 11.1818181818182  C 7.63636363636364 11.4090909090909  7.55681818181818 11.6022727272727  7.39772727272727 11.7613636363636  C 7.23863636363637 11.9204545454545  7.04545454545455 12  6.81818181818182 12  L 5.18181818181818 12  C 4.95454545454546 12  4.76136363636364 11.9204545454545  4.60227272727273 11.7613636363636  C 4.44318181818182 11.6022727272727  4.36363636363636 11.4090909090909  4.36363636363636 11.1818181818182  L 4.36363636363636 7.63636363636364  L 0.818181818181818 7.63636363636364  C 0.590909090909091 7.63636363636364  0.397727272727273 7.55681818181818  0.238636363636364 7.39772727272727  C 0.0795454545454545 7.23863636363636  0 7.04545454545455  0 6.81818181818182  L 0 5.18181818181818  C 0 4.95454545454545  0.0795454545454545 4.76136363636363  0.238636363636364 4.60227272727273  C 0.397727272727273 4.44318181818182  0.590909090909091 4.36363636363636  0.818181818181818 4.36363636363636  L 4.36363636363636 4.36363636363636  L 4.36363636363636 0.818181818181819  C 4.36363636363636 0.59090909090909  4.44318181818182 0.397727272727272  4.60227272727273 0.238636363636364  C 4.76136363636364 0.0795454545454541  4.95454545454546 0  5.18181818181818 0  L 6.81818181818182 0  C 7.04545454545455 0  7.23863636363637 0.0795454545454541  7.39772727272727 0.238636363636364  C 7.55681818181818 0.397727272727272  7.63636363636364 0.59090909090909  7.63636363636364 0.818181818181819  L 7.63636363636364 4.36363636363636  L 11.1818181818182 4.36363636363636  C 11.4090909090909 4.36363636363636  11.6022727272727 4.44318181818182  11.7613636363636 4.60227272727273  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 3701 968 )" />
+  </g>
+</svg>
--- a/src/assets/img/headerNav/cross.svg
+++ b/src/assets/img/headerNav/cross.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter207">
+      <feColorMatrix type="matrix" values="1 0 0 0 0.355555555555556  0 1 0 0 0.355555555555556  0 0 1 0 0.355555555555556  0 0 0 1 0  " in="SourceGraphic" />
+    </filter>
+  </defs>
+  <g transform="matrix(1 0 0 1 -4640 -1136 )">
+    <image preserveAspectRatio="none" style="overflow:visible" width="16" height="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJBQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwyGIIwAAAC90Uk5TABNKPQQKSVMVTO/OIjDc4iMx7esMS+Mk7CrMvgHWGB/f2BoZF8sDIFI7Cbw6PCsDqUolAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAASAAAAEgARslrPgAAAX9JREFUWMPtlttWwjAQRSOFilVpK1i8gHgDFdH5/78zNaRNmzTJmeWjeZp0rb2TQpM5QvzBOBklY5yapKdTVZ1lROcXKH85I8rS3/UlT5QXGF9e1dR8IctrItygeKJE1okqqVoC+785QrdyMr6DDQ1/v6qnRU7YW+j90/pBPdg8Qnto1n961o8gg4OHDE4eMAzw0YZBPtLg4aMMXj7CEOCDhiAfMETwXkMU7zFE8oOGln8RgmEAeKcB4h0GkLcMMN8zMPiOgcXLe7LShv79B++Btb5twPmugcMbvwOtXzl8+/9BXc/F8wwmzzF0edzQ9s/8WGD5wfh+wc5r8XDvtniGwTp/7PzQfL/M/GB8/6z80Dk/jPzQO39wfrDOL5gfHOcfyg/O+wPIDwP3z39+8Bqi+WB+CPKB/BDBu/ID2j+XTect6ulkBvKGYbuTsxG0fzXe9FuUcvKOrm/u4UPW0wzntaHa13U6J/oEedm7t5I/qHrx9b1CeSF25WGPU/b4AazFu1v2/ZorAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIyLTExLTE0VDE5OjI3OjEzKzA4OjAwWwLoYgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMi0xMS0xNFQxOToyNzoxMyswODowMCpfUN4AAABJdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uXzZibmxndG1jdXh0L2d1YW5iaS5zdmeJnhE5AAAAAElFTkSuQmCC" x="4640px" y="1136px" filter="url(#filter207)" />
+  </g>
+</svg>
--- a/src/assets/img/headerNav/information.png
+++ b/src/assets/img/headerNav/information.png
--- a/src/assets/img/headerNav/search.png
+++ b/src/assets/img/headerNav/search.png
--- a/src/assets/img/headerNav/threeAcross.svg
+++ b/src/assets/img/headerNav/threeAcross.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -460 -76 )">
+    <path d="M 23.703125 16.296875  C 23.9010416666667 16.4947916666667  24 16.7291666666667  24 17  L 24 19  C 24 19.2708333333333  23.9010416666667 19.5052083333333  23.703125 19.703125  C 23.5052083333333 19.9010416666667  23.2708333333333 20  23 20  L 1 20  C 0.729166666666667 20  0.494791666666667 19.9010416666667  0.296875 19.703125  C 0.0989583333333333 19.5052083333333  0 19.2708333333333  0 19  L 0 17  C 0 16.7291666666667  0.0989583333333333 16.4947916666667  0.296875 16.296875  C 0.494791666666667 16.0989583333333  0.729166666666667 16  1 16  L 23 16  C 23.2708333333333 16  23.5052083333333 16.0989583333333  23.703125 16.296875  Z M 23.703125 8.296875  C 23.9010416666667 8.49479166666667  24 8.72916666666667  24 9  L 24 11  C 24 11.2708333333333  23.9010416666667 11.5052083333333  23.703125 11.703125  C 23.5052083333333 11.9010416666667  23.2708333333333 12  23 12  L 1 12  C 0.729166666666667 12  0.494791666666667 11.9010416666667  0.296875 11.703125  C 0.0989583333333333 11.5052083333333  0 11.2708333333333  0 11  L 0 9  C 0 8.72916666666667  0.0989583333333333 8.49479166666667  0.296875 8.296875  C 0.494791666666667 8.09895833333334  0.729166666666667 8  1 8  L 23 8  C 23.2708333333333 8  23.5052083333333 8.09895833333334  23.703125 8.296875  Z M 23.703125 0.296875000000001  C 23.9010416666667 0.494791666666665  24 0.729166666666665  24 1  L 24 3  C 24 3.27083333333333  23.9010416666667 3.50520833333333  23.703125 3.703125  C 23.5052083333333 3.90104166666666  23.2708333333333 4  23 4  L 1 4  C 0.729166666666667 4  0.494791666666667 3.90104166666666  0.296875 3.703125  C 0.0989583333333333 3.50520833333333  0 3.27083333333333  0 3  L 0 1  C 0 0.729166666666665  0.0989583333333333 0.494791666666665  0.296875 0.296875000000001  C 0.494791666666667 0.0989583333333321  0.729166666666667 0  1 0  L 23 0  C 23.2708333333333 0  23.5052083333333 0.0989583333333321  23.703125 0.296875000000001  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 460 76 )" />
+  </g>
+</svg>
--- a/src/assets/img/icon/clear.png
+++ b/src/assets/img/icon/clear.png
--- a/src/assets/img/icon/email.png
+++ b/src/assets/img/icon/email.png
--- a/src/assets/img/icon/search.png
+++ b/src/assets/img/icon/search.png
--- a/src/assets/img/icon/setting.png
+++ b/src/assets/img/icon/setting.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HeaderNav.vue
+++ b/src/components/HeaderNav.vue
@ -0,0 +1,684 @@
+<template>
+  <div class="header-nav">
+    <div class="head-box">
+      <div class="head flexacenter">
+        <div class="left">
+          <slot name="operate"></slot>
+          <div class="head-title">
+            <slot name="header-title"></slot>
+          </div>
+        </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>
+          <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" />
+          </div>
+        </div>
+
+        <div class="head-arrows" :class="{ animation: headMorePopState }" v-if="headMorePopState"></div>
+        <div class="head-more-pop" :class="{ animation: headMorePopState }">
+          <div class="head-more-userinfo flex1 flexacenter">
+            <div class="head-more-left flexacenter">
+              <img class="head-more-userinfo-avatar" :src="userInfo.avatar" alt="" />
+              <div class="head-more-userinfo-username">
+                {{ userInfo.nickname }}
+              </div>
+            </div>
+            <div class="head-more-right">
+              <!-- 消息 -->
+              <div class="information-box" v-if="false">
+                <img class="information-icon" src="@/assets/img/headerNav/information.png" />
+                <div class="red-dot flexcenter">2</div>
+              </div>
+              <!-- 登录按钮 -->
+              <div v-if="!islogin" class="loginBtn flexcenter" @click="handleRegister">
+                登录/注册
+              </div>
+            </div>
+          </div>
+
+          <div class="tab-list">
+            <a class="tab-item flexacenter" :href="item.url" target="_blank" :class="{ pitch: tab == item.name }"
+              v-for="(item, index) in menu" :key="index">{{ item.name }}</a>
+          </div>
+
+          <div class="head-more-post flexcenter" @click.stop="$skipUrl('https://www.gter.net/bbs/post.html', false)">
+            <div class="head-more-post-icon flexcenter">
+              <img class="head-more-post-img" src="@/assets/img/headerNav/addyellow.svg" />
+            </div>
+            发布帖子
+          </div>
+
+          <img class="cross-icon" v-if="headMorePopState" @click="headMorePopState = !headMorePopState"
+            src="@/assets/img/headerNav/cross.svg" />
+        </div>
+      </div>
+      <div class="head-pop" v-if="headMorePopState" @click="headMorePopState = !headMorePopState"></div>
+    </div>
+    <header v-if="false">
+      <!-- 标题 -->
+      <div class="header-title">
+        <slot name="header-title"></slot>
+      </div>
+      <div class="header-search-box">
+        <slot name="search"></slot>
+
+        <!-- 折叠按钮 -->
+        <div class="header-collapse" @click="collapseClick">
+          <svg-icon icon-class="collapse" class-name="icon-collapse"></svg-icon>
+          <div class="collapse-red"></div>
+          <!-- 红点 -->
+        </div>
+
+        <!-- 点击折叠按钮弹窗 -->
+        <div class="collapse-box" :class="{ 'collapse-show': collapseShow == true }" @click="collapseClose">
+          <div class="collapse-container" @click.stop>
+            <!-- 已登录头像 -->
+            <div class="collapse-my" v-if="a == 0">
+              <div class="my-left">
+                <div class="collapse-my-img">
+                  <svg-icon icon-class="Ada" class-name="my-img"></svg-icon>
+                </div>
+                <div class="collapse-my-name">Ada</div>
+              </div>
+              <div class="my-right">
+                <div class="right-msg-img"></div>
+                <!-- 消息数量 -->
+                <div class="right-msg-num">2</div>
+              </div>
+            </div>
+            <!-- 未登录头像 -->
+            <div class="collapse-my" v-if="a == 1">
+              <div class="my-left">
+                <div class="collapse-my-img">
+                  <svg-icon icon-class="notlogin" class-name="my-img"></svg-icon>
+                </div>
+                <div class="collapse-my-name">未登录</div>
+              </div>
+              <div class="my-right">
+                <div class="loginBtn">登录/注册</div>
+              </div>
+            </div>
+
+            <!-- 折叠列表 -->
+            <div class="collapse-list">
+              <span>寄托首页</span>
+              <span class="listActive">论坛</span>
+              <span>招生官</span>
+              <span>中外合办</span>
+              <span>加群</span>
+              <span>Offer榜</span>
+            </div>
+            <!-- 发布帖子 -->
+            <div class="collapse-publish">
+              <div class="collapse-publish-img">
+                <svg-icon icon-class="add" class-name="icon-add"></svg-icon>
+              </div>
+              <span>发布帖子</span>
+            </div>
+            <!-- 取消弹窗 -->
+            <div class="collapse-close" @click="collapseClose">
+              <svg-icon icon-class="collapse-close" class-name="icon-close"></svg-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HeaderNav",
+  data() {
+    return {
+      collapseShow: false, //显示折叠弹窗
+      a: 0,
+      baseURL: "https://offer.gter.net",
+      tab: "Offer榜",
+      headMorePopState: false, // 弹窗的状态
+      islogin: false,
+      userInfo: {},
+      menu: [],
+    };
+  },
+  props: ["issearch", "needgetuser", "userinfo"],
+  watch: {
+    needgetuser: {
+      handler(newValue, oldValue) {
+        if (newValue) this.getUserInfoData();
+      },
+      immediate: true,
+    },
+
+    userinfo(newValue, oldValue) {
+      this.userInfo = newValue;
+      this.islogin = newValue.uid > 0 ? true : false;
+    },
+    headMorePopState(newValue, oldValue) {
+      if (newValue) this.$pageStop();
+      else this.$pageMove();
+    },
+  },
+  mounted() {
+    this.getMenu()
+  },
+  methods: {
+    // 处理登录
+    handleRegister() {
+      let url = encodeURIComponent(location.href);
+      this.$skipUrl(`${this.$loginUrl}?referer=${url}`, false);
+    },
+
+    // 获取用户信息
+    getUserInfoData() {
+      this.$http.post("/widget/getUser").then((res) => {
+        if (res.code != 200) return;
+        this.userInfo = res.data;
+        this.islogin = res.data.uid > 0 ? true : false;
+      }).catch(err => {
+        this.$message.error(err.message)
+      });
+    },
+
+    getMenu() {
+      this.$http.get("/widget", {
+        type: "menu",
+      }).then((res) => {
+        console.log(res);
+        if (res.code != 200) return;
+        this.menu = res.data.menu.data;
+      });
+    },
+
+    // collapseClick() {
+    //   if (this.collapseShow == true) this.collapseShow = false;
+    //   else this.collapseShow = true;
+    // },
+    // collapseClose() {
+    //   this.collapseShow = false;
+    // },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.head-box {
+  z-index: 1000;
+  position: relative;
+
+  .head {
+    padding: 0 0.2933rem;
+    height: 1.3rem;
+    justify-content: space-between;
+    position: fixed;
+    top: 0;
+    width: calc(10rem - 0.5866rem);
+    background-color: #f5f5f5;
+    z-index: 100;
+
+    .left {
+      .head-title {
+        color: #000;
+        font-weight: 650;
+        font-size: 0.48rem;
+      }
+    }
+
+    .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;
+
+        .head-more-icon {
+          width: .48rem;
+          height: .4rem;
+        }
+
+        .red-dot {
+          position: absolute;
+          right: -0.2rem;
+          top: -0.2rem;
+          width: .16rem;
+          height: .16rem;
+          border-radius: .64rem;
+          background-color: rgba(253, 63, 93, 1);
+        }
+      }
+
+    }
+
+    .head-arrows {
+      width: .1333rem;
+      height: .1333rem;
+      position: absolute;
+      bottom: -.0133rem;
+      right: -0.5333rem;
+      width: 0;
+      height: 0;
+      transform: translateX(50%);
+      border: .24rem solid #000;
+      border-top-color: transparent;
+      border-bottom-color: rgb(255, 255, 255);
+      border-left-color: transparent;
+      border-right-color: transparent;
+      opacity: 0;
+      transition: all .2s;
+
+      &.animation {
+        animation: slide-in-left2 0.5s ease-out forwards;
+      }
+    }
+
+    .head-more-pop {
+      position: absolute;
+      top: calc(100% - .0133rem);
+      height: calc(100vh - 1.3rem);
+      width: 7.6rem;
+      right: 0;
+      background-color: #fff;
+      overflow: auto;
+      transition: all .2s;
+      right: -100%;
+      opacity: 0;
+
+      &.animation {
+        animation: slide-in-left 0.5s ease-out forwards;
+      }
+
+      @keyframes slide-in-left {
+        0% {
+          right: -100%;
+          opacity: 0;
+        }
+
+        100% {
+          right: 0;
+          opacity: 1;
+        }
+      }
+
+      @keyframes slide-in-left2 {
+        0% {
+          right: -0.5333rem;
+          opacity: 0;
+        }
+
+        100% {
+          right: 0.5333rem;
+          opacity: 1;
+        }
+      }
+
+
+      .head-more-userinfo {
+        height: 2.88rem;
+        margin-left: .64rem;
+        padding-right: .72rem;
+        box-sizing: border-box;
+        border-bottom: .0133rem solid #ebebeb;
+        justify-content: space-between;
+
+        .head-more-left {
+
+          .head-more-userinfo-avatar {
+            margin-right: .24rem;
+            width: 1.28rem;
+            height: 1.28rem;
+            border-radius: 50%;
+          }
+
+          .head-more-userinfo-username {
+            font-size: .36rem;
+            color: #333333;
+          }
+        }
+
+
+        .head-more-right {
+          .information-box {
+            position: relative;
+            width: .44rem;
+            height: .44rem;
+
+            .information-icon {
+              width: .44rem;
+              height: .44rem;
+            }
+          }
+
+          .red-dot {
+            position: absolute;
+            right: -0.2rem;
+            top: -0.2rem;
+            width: .36rem;
+            height: .36rem;
+            color: #fff;
+            border-radius: .64rem;
+            background-color: rgba(253, 63, 93, 1);
+            font-size: .26rem;
+          }
+
+          .loginBtn {
+            width: 2.24rem;
+            height: .8rem;
+            border-radius: 3.12rem;
+            background-color: rgba(98, 177, 255, 1);
+            color: #fff;
+            font-size: .34rem;
+          }
+        }
+      }
+
+      .tab-list {
+        padding-right: .72rem;
+        margin-left: 0.64rem;
+        border-bottom: .0133rem solid #ebebeb;
+
+        .tab-item {
+          height: 1.44rem;
+          margin: .328rem 0;
+          border-radius: .22rem;
+          padding-left: .64rem;
+          font-size: .36rem;
+          color: #555555;
+          text-decoration: none;
+
+          &.pitch {
+            background-color: rgba(80, 227, 194, 1);
+            font-weight: 650;
+            color: #000;
+          }
+        }
+      }
+
+      .head-more-post {
+        color: #000;
+        font-size: .4rem;
+        margin: 1.28rem 0 2.6667rem;
+
+        .head-more-post-icon {
+          width: .48rem;
+          height: .48rem;
+          margin-right: .1333rem;
+          background-color: #fddf6d;
+          border-radius: 50%;
+
+          .head-more-post-img {
+            width: .24rem;
+            height: .24rem;
+          }
+        }
+      }
+
+      .cross-icon {
+        width: .32rem;
+        height: .32rem;
+        // padding: .8rem;
+        padding: .4rem;
+        // position: sticky;
+        position: fixed;
+        // bottom: .2667rem;
+        // bottom: 1rem;
+        bottom: 0.3rem;
+        // right: 3.8rem;
+        left: calc(50% + 1.2rem);
+        transform: translateX(-50%);
+        // right: 3.8rem;
+        // transform: translateX(50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto;
+      }
+
+    }
+
+
+  }
+
+  .head-pop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.705882352941177);
+  }
+}
+
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.15rem 0.35rem 0.4rem;
+
+  .header-title {
+    width: 60%;
+    font-weight: bold;
+    font-size: 0.48rem;
+    color: #333;
+  }
+
+  .header-search-box {
+    width: 40%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .header-collapse {
+    width: 0.48rem;
+    display: flex;
+    justify-content: flex-end;
+    position: relative;
+
+    .icon-collapse {
+      width: 0.48rem;
+      height: 0.4rem;
+    }
+  }
+
+  .collapse-red {
+    width: 0.16rem;
+    height: 0.16rem;
+    background-color: red;
+    border-radius: 0.2rem;
+    position: absolute;
+    top: -0.15rem;
+    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>
--- a/src/components/SearchBox.vue
+++ b/src/components/SearchBox.vue
@ -0,0 +1,209 @@
+<template>
+	<div>
+		<div class="header-search" @click="searchClick">
+			<div class="header-search-img"></div>
+			<div class="header-search-text">搜索</div>
+		</div>
+		<!-- 搜索弹窗 -->
+		<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>
+			<!-- 历史搜索 -->
+			<div class="search-content">
+				<div class="search-text">历史搜索</div>
+				<div class="search-label">
+					<span>香港大学</span>
+					<span>香港大学</span>
+				</div>
+			</div>
+			<!-- 热门搜索 -->
+			<div class="search-content">
+				<div class="search-text">热门搜索</div>
+				<div class="search-label">
+					<span>Bocconi</span>
+					<span>Bocconi</span>
+					<span>Bocconi</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</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
+			}
+		}
+	}
+</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;
+				}
+			}
+		}
+		
+	}
+
+	
+	.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;
+    }
+  }
+</style>
--- a/src/components/SvgIcon.vue
+++ b/src/components/SvgIcon.vue
@ -0,0 +1,41 @@
+<template>
+	<svg :class="svgClass" xmlns="http://www.w3.org/2000/svg">
+		<use :xlink:href="iconName" 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: ''
+			}
+		},
+		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%;
+		height: 100%; */
+		vertical-align: -0.15em;
+		fill: currentColor;
+		overflow: hidden;
+	}
+</style>
--- a/src/icons/index.js
+++ b/src/icons/index.js
@ -0,0 +1,8 @@
+
+import Vue from 'vue';
+import SvgIcon from '@/components/SvgIcon'; // svg组件
+// register globally
+Vue.component('svg-icon', SvgIcon);
+const req = require.context('./svg', false, /\.svg$/);
+const requireAll = requireContext => requireContext.keys().map(requireContext);
+requireAll(req);
--- a/src/icons/svg/Ada.svg
+++ b/src/icons/svg/Ada.svg
--- a/src/icons/svg/add.svg
+++ b/src/icons/svg/add.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -422 -493 )">
+    <path d="M 19.6022727272727 7.67045454545455  C 19.8674242424242 7.93560606060606  20 8.25757575757576  20 8.63636363636363  L 20 11.3636363636364  C 20 11.7424242424242  19.8674242424242 12.0643939393939  19.6022727272727 12.3295454545455  C 19.3371212121212 12.594696969697  19.0151515151515 12.7272727272727  18.6363636363636 12.7272727272727  L 12.7272727272727 12.7272727272727  L 12.7272727272727 18.6363636363636  C 12.7272727272727 19.0151515151515  12.594696969697 19.3371212121212  12.3295454545455 19.6022727272727  C 12.0643939393939 19.8674242424242  11.7424242424242 20  11.3636363636364 20  L 8.63636363636364 20  C 8.25757575757576 20  7.93560606060606 19.8674242424242  7.67045454545455 19.6022727272727  C 7.40530303030303 19.3371212121212  7.27272727272727 19.0151515151515  7.27272727272727 18.6363636363636  L 7.27272727272727 12.7272727272727  L 1.36363636363636 12.7272727272727  C 0.984848484848485 12.7272727272727  0.662878787878788 12.594696969697  0.397727272727273 12.3295454545455  C 0.132575757575758 12.0643939393939  0 11.7424242424242  0 11.3636363636364  L 0 8.63636363636363  C 0 8.25757575757576  0.132575757575758 7.93560606060606  0.397727272727273 7.67045454545455  C 0.662878787878788 7.40530303030303  0.984848484848485 7.27272727272727  1.36363636363636 7.27272727272727  L 7.27272727272727 7.27272727272727  L 7.27272727272727 1.36363636363636  C 7.27272727272727 0.984848484848484  7.40530303030303 0.662878787878787  7.67045454545455 0.397727272727273  C 7.93560606060606 0.132575757575757  8.25757575757576 0  8.63636363636364 0  L 11.3636363636364 0  C 11.7424242424242 0  12.0643939393939 0.132575757575757  12.3295454545455 0.397727272727273  C 12.594696969697 0.662878787878787  12.7272727272727 0.984848484848484  12.7272727272727 1.36363636363636  L 12.7272727272727 7.27272727272727  L 18.6363636363636 7.27272727272727  C 19.0151515151515 7.27272727272727  19.3371212121212 7.40530303030303  19.6022727272727 7.67045454545455  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 422 493 )" />
+  </g>
+</svg>
--- a/src/icons/svg/collapse-close.svg
+++ b/src/icons/svg/collapse-close.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter207">
+      <feColorMatrix type="matrix" values="1 0 0 0 0.355555555555556  0 1 0 0 0.355555555555556  0 0 1 0 0.355555555555556  0 0 0 1 0  " in="SourceGraphic" />
+    </filter>
+  </defs>
+  <g transform="matrix(1 0 0 1 -4640 -1136 )">
+    <image preserveAspectRatio="none" style="overflow:visible" width="16" height="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJBQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwyGIIwAAAC90Uk5TABNKPQQKSVMVTO/OIjDc4iMx7esMS+Mk7CrMvgHWGB/f2BoZF8sDIFI7Cbw6PCsDqUolAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAASAAAAEgARslrPgAAAX9JREFUWMPtlttWwjAQRSOFilVpK1i8gHgDFdH5/78zNaRNmzTJmeWjeZp0rb2TQpM5QvzBOBklY5yapKdTVZ1lROcXKH85I8rS3/UlT5QXGF9e1dR8IctrItygeKJE1okqqVoC+785QrdyMr6DDQ1/v6qnRU7YW+j90/pBPdg8Qnto1n961o8gg4OHDE4eMAzw0YZBPtLg4aMMXj7CEOCDhiAfMETwXkMU7zFE8oOGln8RgmEAeKcB4h0GkLcMMN8zMPiOgcXLe7LShv79B++Btb5twPmugcMbvwOtXzl8+/9BXc/F8wwmzzF0edzQ9s/8WGD5wfh+wc5r8XDvtniGwTp/7PzQfL/M/GB8/6z80Dk/jPzQO39wfrDOL5gfHOcfyg/O+wPIDwP3z39+8Bqi+WB+CPKB/BDBu/ID2j+XTect6ulkBvKGYbuTsxG0fzXe9FuUcvKOrm/u4UPW0wzntaHa13U6J/oEedm7t5I/qHrx9b1CeSF25WGPU/b4AazFu1v2/ZorAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIyLTExLTE0VDE5OjI3OjEzKzA4OjAwWwLoYgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMi0xMS0xNFQxOToyNzoxMyswODowMCpfUN4AAABJdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uXzZibmxndG1jdXh0L2d1YW5iaS5zdmeJnhE5AAAAAElFTkSuQmCC" x="4640px" y="1136px" filter="url(#filter207)" />
+  </g>
+</svg>
--- a/src/icons/svg/collapse.svg
+++ b/src/icons/svg/collapse.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -460 -76 )">
+    <path d="M 23.703125 16.296875  C 23.9010416666667 16.4947916666667  24 16.7291666666667  24 17  L 24 19  C 24 19.2708333333333  23.9010416666667 19.5052083333333  23.703125 19.703125  C 23.5052083333333 19.9010416666667  23.2708333333333 20  23 20  L 1 20  C 0.729166666666667 20  0.494791666666667 19.9010416666667  0.296875 19.703125  C 0.0989583333333333 19.5052083333333  0 19.2708333333333  0 19  L 0 17  C 0 16.7291666666667  0.0989583333333333 16.4947916666667  0.296875 16.296875  C 0.494791666666667 16.0989583333333  0.729166666666667 16  1 16  L 23 16  C 23.2708333333333 16  23.5052083333333 16.0989583333333  23.703125 16.296875  Z M 23.703125 8.296875  C 23.9010416666667 8.49479166666667  24 8.72916666666667  24 9  L 24 11  C 24 11.2708333333333  23.9010416666667 11.5052083333333  23.703125 11.703125  C 23.5052083333333 11.9010416666667  23.2708333333333 12  23 12  L 1 12  C 0.729166666666667 12  0.494791666666667 11.9010416666667  0.296875 11.703125  C 0.0989583333333333 11.5052083333333  0 11.2708333333333  0 11  L 0 9  C 0 8.72916666666667  0.0989583333333333 8.49479166666667  0.296875 8.296875  C 0.494791666666667 8.09895833333334  0.729166666666667 8  1 8  L 23 8  C 23.2708333333333 8  23.5052083333333 8.09895833333334  23.703125 8.296875  Z M 23.703125 0.296875000000001  C 23.9010416666667 0.494791666666665  24 0.729166666666665  24 1  L 24 3  C 24 3.27083333333333  23.9010416666667 3.50520833333333  23.703125 3.703125  C 23.5052083333333 3.90104166666666  23.2708333333333 4  23 4  L 1 4  C 0.729166666666667 4  0.494791666666667 3.90104166666666  0.296875 3.703125  C 0.0989583333333333 3.50520833333333  0 3.27083333333333  0 3  L 0 1  C 0 0.729166666666665  0.0989583333333333 0.494791666666665  0.296875 0.296875000000001  C 0.494791666666667 0.0989583333333321  0.729166666666667 0  1 0  L 23 0  C 23.2708333333333 0  23.5052083333333 0.0989583333333321  23.703125 0.296875000000001  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 460 76 )" />
+  </g>
+</svg>
--- a/src/icons/svg/collect-btn.svg
+++ b/src/icons/svg/collect-btn.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -5396 -757 )">
+    <path d="M 10.5 20.09375  C 10.7708333333333 20.09375  11.0052083333333 19.9947916666667  11.203125 19.796875  L 18.296875 12.703125  C 18.4947916666667 12.5052083333333  18.59375 12.2708333333333  18.59375 12  C 18.59375 11.7291666666667  18.4947916666667 11.4947916666667  18.296875 11.296875  L 11.203125 4.203125  C 11.0052083333333 4.00520833333333  10.7708333333333 3.90625  10.5 3.90625  C 10.2291666666667 3.90625  9.99479166666667 4.00520833333333  9.796875 4.203125  L 8.203125 5.796875  C 8.00520833333333 5.99479166666667  7.90625 6.22916666666667  7.90625 6.5  C 7.90625 6.77083333333333  8.00520833333333 7.00520833333333  8.203125 7.203125  L 13 12  L 8.203125 16.796875  C 8.00520833333333 16.9947916666667  7.90625 17.2291666666667  7.90625 17.5  C 7.90625 17.7708333333333  8.00520833333333 18.0052083333333  8.203125 18.203125  L 9.796875 19.796875  C 9.99479166666667 19.9947916666667  10.2291666666667 20.09375  10.5 20.09375  Z M 22.390625 5.9765625  C 23.4635416666667 7.81510416666666  24 9.82291666666666  24 12  C 24 14.1770833333333  23.4635416666667 16.1848958333333  22.390625 18.0234375  C 21.3177083333333 19.8619791666667  19.8619791666667 21.3177083333333  18.0234375 22.390625  C 16.1848958333333 23.4635416666667  14.1770833333333 24  12 24  C 9.82291666666667 24  7.81510416666667 23.4635416666667  5.9765625 22.390625  C 4.13802083333333 21.3177083333333  2.68229166666667 19.8619791666667  1.609375 18.0234375  C 0.536458333333333 16.1848958333333  0 14.1770833333333  0 12  C 0 9.82291666666666  0.536458333333333 7.81510416666666  1.609375 5.9765625  C 2.68229166666667 4.13802083333333  4.13802083333333 2.68229166666666  5.9765625 1.609375  C 7.81510416666667 0.536458333333331  9.82291666666667 0  12 0  C 14.1770833333333 0  16.1848958333333 0.536458333333331  18.0234375 1.609375  C 19.8619791666667 2.68229166666666  21.3177083333333 4.13802083333333  22.390625 5.9765625  Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" transform="matrix(1 0 0 1 5396 757 )" />
+  </g>
+</svg>
--- a/src/icons/svg/look.svg
+++ b/src/icons/svg/look.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="9px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 0 -6 )">
+    <path d="M 11.8794642857143 7.05078125  C 13.0729166666667 6.41796875  14.0654761904762 5.56770833333333  14.8571428571429 4.5  C 13.952380952381 3.27083333333333  12.8184523809524 2.3515625  11.4553571428571 1.7421875  C 11.8184523809524 2.28385416666667  12 2.86979166666667  12 3.5  C 12 4.46354166666667  11.608630952381 5.28776041666667  10.8258928571429 5.97265625  C 10.0431547619048 6.65755208333333  9.10119047619048 7  8 7  C 6.89880952380952 7  5.95684523809524 6.65755208333333  5.17410714285714 5.97265625  C 4.39136904761905 5.28776041666667  4 4.46354166666667  4 3.5  C 4 2.86979166666667  4.18154761904762 2.28385416666667  4.54464285714286 1.7421875  C 3.18154761904762 2.3515625  2.04761904761905 3.27083333333333  1.14285714285714 4.5  C 1.93452380952381 5.56770833333333  2.92708333333333 6.41796875  4.12053571428571 7.05078125  C 5.3139880952381 7.68359375  6.60714285714286 8  8 8  C 9.39285714285714 8  10.6860119047619 7.68359375  11.8794642857143 7.05078125  Z M 8.30357142857143 1.765625  C 8.38690476190476 1.69270833333333  8.42857142857143 1.60416666666667  8.42857142857143 1.5  C 8.42857142857143 1.39583333333333  8.38690476190476 1.30729166666667  8.30357142857143 1.234375  C 8.2202380952381 1.16145833333333  8.11904761904762 1.125  8 1.125  C 7.25595238095238 1.125  6.61755952380952 1.35807291666667  6.08482142857143 1.82421875  C 5.55208333333333 2.29036458333333  5.28571428571429 2.84895833333333  5.28571428571429 3.5  C 5.28571428571429 3.60416666666667  5.32738095238095 3.69270833333333  5.41071428571429 3.765625  C 5.49404761904762 3.83854166666667  5.5952380952381 3.875  5.71428571428571 3.875  C 5.83333333333333 3.875  5.93452380952381 3.83854166666667  6.01785714285714 3.765625  C 6.10119047619048 3.69270833333333  6.14285714285714 3.60416666666667  6.14285714285714 3.5  C 6.14285714285714 3.05208333333333  6.32440476190476 2.66927083333333  6.6875 2.3515625  C 7.05059523809524 2.03385416666667  7.48809523809524 1.875  8 1.875  C 8.11904761904762 1.875  8.2202380952381 1.83854166666667  8.30357142857143 1.765625  Z M 15.8214285714286 3.9609375  C 15.9404761904762 4.14322916666667  16 4.32291666666667  16 4.5  C 16 4.67708333333333  15.9404761904762 4.85677083333333  15.8214285714286 5.0390625  C 14.9880952380952 6.23697916666667  13.8675595238095 7.19661458333333  12.4598214285714 7.91796875  C 11.0520833333333 8.63932291666667  9.56547619047619 9  8 9  C 6.43452380952381 9  4.94791666666667 8.63802083333333  3.54017857142857 7.9140625  C 2.13244047619048 7.19010416666667  1.01190476190476 6.23177083333333  0.178571428571429 5.0390625  C 0.0595238095238095 4.85677083333333  0 4.67708333333333  0 4.5  C 0 4.32291666666667  0.0595238095238095 4.14322916666667  0.178571428571429 3.9609375  C 1.01190476190476 2.76822916666667  2.13244047619048 1.80989583333333  3.54017857142857 1.0859375  C 4.94791666666667 0.361979166666666  6.43452380952381 0  8 0  C 9.56547619047619 0  11.0520833333333 0.361979166666666  12.4598214285714 1.0859375  C 13.8675595238095 1.80989583333333  14.9880952380952 2.76822916666667  15.8214285714286 3.9609375  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 0 6 )" />
+  </g>
+</svg>
--- a/src/icons/svg/msg.svg
+++ b/src/icons/svg/msg.svg
--- a/src/icons/svg/notlogin.svg
+++ b/src/icons/svg/notlogin.svg
--- a/src/icons/svg/settingAdd.svg
+++ b/src/icons/svg/settingAdd.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter480">
+      <feColorMatrix type="matrix" values="1.37777777777778 0 0 0 -0.188888888888889  0 1.37777777777778 0 0 -0.188888888888889  0 0 1.37777777777778 0 -0.188888888888889  0 0 0 1 0  " in="SourceGraphic" />
+    </filter>
+  </defs>
+  <g transform="matrix(1 0 0 1 -4615 -591 )">
+    <image preserveAspectRatio="none" style="overflow:visible" width="20" height="20" xlink:href="data:image/png;base64,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" x="4615px" y="591px" filter="url(#filter480)" />
+  </g>
+</svg>
--- a/src/icons/svg/test-banner.svg
+++ b/src/icons/svg/test-banner.svg
--- a/src/icons/svg/test-head.svg
+++ b/src/icons/svg/test-head.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <mask fill="white" id="clip71">
+      <path d="M 37 174  C 28.12 174  21 166.88  21 158  L 21 158  C 21 149.12  28.12 142  37 142  L 37 142  C 45.88 142  53 149.12  53 158  L 53 158  C 53 166.88  45.88 174  37 174  " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g transform="matrix(1 0 0 1 -21 -142 )">
+    <image preserveAspectRatio="none" style="overflow:visible" width="32" height="32" xlink:href="data:image/png;base64,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" x="21px" y="142px" mask="url(#clip71)" />
+  </g>
+</svg>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,38 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import ElementUI, {Message} from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import { skipUrl, pageStop, pageMove, goTologin } from "@/utils/common.js"
+import http from "@/utils/request"
+
+Vue.config.productionTip = false
+
+Vue.prototype.$baseURL = "https://forum.gter.net/api"  // 请求接口的共 url
+Vue.prototype.$loginUrl = "https://passport.gter.net/" // 跳转登录的url
+
+Vue.prototype.$http = http  // 跳转登录页面的方法
+Vue.prototype.$skipUrl = skipUrl  // 跳转页面的公共方法
+Vue.prototype.$goTologin = goTologin  // 跳转登录页面的方法
+// 上面的顺序不要修改
+
+Vue.prototype.$pageStop = pageStop   // 页面禁止滑动
+Vue.prototype.$pageMove = pageMove  // 页面可以滑动
+Vue.prototype.$Message = Message  // 页面可以滑动
+
+//svg文件引入
+import './icons'
+//动态设置fontsize
+import './utils/fontSize.js'
+
+//ElementUI
+Vue.use(ElementUI);
+
+
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,68 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+// import Recommend from "views/recommend/Recommend.vue"
+
+Vue.use(VueRouter)
+
+const VueRouterPush = VueRouter.prototype.push
+VueRouter.prototype.push = function push(to) {
+	return VueRouterPush.call(this, to).catch(err => err)
+}
+//标题js
+import getPageTitle from "@/utils/title-config";
+
+
+const Index = () => import('views/index')
+const Recommend = () => import('views/recommend/Recommend')
+const Collect = () => import('views/collect/Collect')
+const AllSections = () => import('views/allSections/AllSections')
+
+const routes = [
+	{
+		// 首页
+		path: '/',
+		name: 'Index',
+		redirect: "/recommend",
+		component: Index,
+		children: [
+			{
+				path: '/recommend',
+				name: 'Recommend',
+				component: Recommend,
+				meta: {
+					title: "推荐版块"
+				}
+			},
+			{
+				path: '/collect',
+				name: 'Collect',
+				component: Collect,
+				meta: {
+					title: "收藏的版块"
+				}
+			},
+			{
+				path: '/allSections',
+				name: 'AllSections',
+				component: AllSections,
+				meta: {
+					title: "全部版块"
+				}
+			}
+		]
+	},
+
+]
+
+const router = new VueRouter({
+	mode: 'history',
+	base: process.env.BASE_URL,
+	routes
+})
+router.beforeEach(async (to, from, next) => {
+	if (to.meta.title) document.title = getPageTitle(to.meta.title);
+
+	next();
+});
+
+export default router
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
--- a/src/utils/baseApi.js
+++ b/src/utils/baseApi.js
@ -0,0 +1,3 @@
+const baseURL = 'https://forum.gter.net/api';
+
+export default baseURL
--- a/src/utils/common.js
+++ b/src/utils/common.js
@ -0,0 +1,29 @@
+// a标签 跳转  isblank 代表跳转新标签
+function skipUrl(url, isblank = true) {
+    console.log();
+    let aTab = document.createElement("a");
+    document.body.appendChild(aTab);
+    aTab.setAttribute("href", url);
+    if (isblank) aTab.setAttribute("target", "_blank");
+    aTab.click();
+}
+
+
+// 禁止页面滑动
+function pageStop() {
+    document.body.style.overflow = "hidden";
+}
+
+// 开启页面滑动
+function pageMove() {
+    document.body.style.overflow = "";
+}
+
+// 跳转登录
+function goTologin() {
+    let url = encodeURIComponent(location.href);
+    console.log(skipUrl);
+    skipUrl(`https://passport.gter.net/?referer=${url}`, false);
+}
+
+export { skipUrl, pageStop, pageMove, goTologin }
--- a/src/utils/fontSize.js
+++ b/src/utils/fontSize.js
@ -0,0 +1,39 @@
+(function(window, document) {
+	var sizeUI = 750 // 定义设计图尺寸
+	var remBase = 75 // 定义基准值
+	var docEl = document.documentElement
+	var bodyEl = document.querySelector('body')
+
+	setRemUnit()
+
+	window.addEventListener('resize', setRemUnit)
+	window.addEventListener('pageshow', function(e) {
+		if (e.persisted) setRemUnit()
+	})
+
+	function setRemUnit() {
+		var docFontSize = docEl.clientWidth / sizeUI * remBase
+		docEl.style.fontSize = docFontSize + 'px'
+		bodyEl.style.fontSize = 16 / docFontSize + 'rem'
+		handleRemAdapt()
+	}
+
+	function handleRemAdapt() {
+		var currentFontSize = parseInt(docEl.style.fontSize)
+		var temp = currentFontSize
+		for (var i = 0; i < 100; i++) {
+			var realFontSize = parseInt(window.getComputedStyle(docEl).fontSize)
+			var differ = realFontSize - currentFontSize
+			if (Math.abs(differ) >= 1) {
+				if (differ > 0) {
+					temp--
+				} else {
+					temp++
+				}
+				docEl.style.fontSize = temp + 'px'
+			} else {
+				break
+			}
+		}
+	}
+})(window, document)
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,122 @@
+/****   request.js   ****/
+// 导入axios
+import axios from 'axios'
+// 使用element-ui Message做消息提醒
+import { Message } from 'element-ui';
+import baseURL from '@/utils/baseApi'
+import { skipUrl, pageStop, pageMove, goTologin } from "@/utils/common.js"
+
+//1. 创建新的axios实例，
+axios.defaults.withCredentials = true
+axios.defaults.emulateJSON = true
+baseURL = "https://offer.gter.net/api"
+const service = axios.create({
+    baseURL,
+    timeout: 5000
+})
+
+// 2.请求拦截器
+service.interceptors.request.use(config => {
+    //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
+    //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
+    return config
+}, error => {
+    Promise.reject(error)
+})
+
+// 3.响应拦截器
+service.interceptors.response.use(response => {
+    //接收到响应数据并成功后的一些共有的处理，关闭loading等  
+    let data = response.data
+    if (data.code == 401) return goTologin()
+    if (data.code == 201) Message.error(data.message)
+    return data
+}, error => {
+    /***** 接收到异常响应的处理开始 *****/
+    if (error && error.response) {
+        // 1.公共错误处理
+        // 2.根据响应码具体处理
+        switch (error.response.status) {
+            case 400:
+                error.message = '错误请求'
+                break;
+            case 401:
+                error.message = '未授权，请重新登录'
+                break;
+            case 403:
+                error.message = '拒绝访问'
+                break;
+            case 404:
+                // error.message = '请求错误,未找到该资源'
+                // window.location.href = "/NotFound"
+                break;
+            case 405:
+                error.message = '请求方法未允许'
+                break;
+            case 408:
+                error.message = '请求超时'
+                break;
+            case 500:
+                error.message = '服务器端出错'
+                break;
+            case 501:
+                error.message = '网络未实现'
+                break;
+            case 502:
+                error.message = '网络错误'
+                break;
+            case 503:
+                error.message = '服务不可用'
+                break;
+            case 504:
+                error.message = '网络超时'
+                break;
+            case 505:
+                error.message = 'http版本不支持该请求'
+                break;
+            default:
+                error.message = `连接错误${error.response.status}`
+        }
+    } else {
+        // 超时处理
+        if (JSON.stringify(error).includes('timeout')) error.message = '服务器响应超时，请刷新当前页'
+        error.message = '连接服务器失败'
+    }
+
+    Message.error(error.message)
+    /***** 处理结束 *****/
+    //如果不需要错误处理，以上的处理过程都可省略
+    return Promise.resolve(error.response)
+})
+
+const http = {
+    /**
+     * methods: 请求
+     * @param url 请求地址 
+     * @param params 请求参数
+     */
+    get(url, params, ispop = true) {
+        const config = {
+            method: 'get',
+            url: url
+        }
+        if (params) config.params = params
+        config.ispop = ispop
+        return service(config)
+    },
+    post(url, params, ispop = true) {
+        const config = {
+            method: 'post',
+            url: url
+        }
+        if (params) config.data = params
+        config.ispop = ispop
+        return service(config)
+    },
+}
+// 导出
+export default http
+
+
+//4.导入文件
+// export default service
--- a/src/utils/title-config.js
+++ b/src/utils/title-config.js
@ -0,0 +1,8 @@
+const title = "寄托天下论坛"; //标题主体
+
+export default function getPageTitle(pageTitle) {
+	if (pageTitle) {
+		return `${pageTitle} - ${title}`;
+	}
+	return `${title}`;
+}
--- a/src/views/allSections/AllSections.vue
+++ b/src/views/allSections/AllSections.vue
@ -0,0 +1,214 @@
+<template>
+	<div class="allSections">
+		<!-- 左选项 -->
+		<div class="allSections-left">
+			<span v-for="(item,index) in list" :class="{'active':index == allActive}" :key="index" @click="allClick(index)">{{item.title}}</span>
+		</div>
+		<!-- 右选项 -->
+		<div class="allSections-right" :class="{'active':index == allActive}" v-for="(item,index) in list" :key="index">
+			<div class="allSections-right-item" v-for="(i,k) in starList" :key="k">
+				<div class="item-content">
+					<div class="item-title">{{i.title}}</div>
+					<div class="item-text">{{i.text}}</div>
+				</div>
+				<div class="item-star" @click="starClick(k)">
+					<img v-if="!showStar[k].checked" src="~assets/img/allSections/nullStar.png" alt="空星">
+					<img v-else src="~assets/img/allSections/star.png" alt="实星">
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "AllSections",
+		data() {
+			return {
+				allActive: 0,
+				showStar: [],
+				star: -1,
+				list:[
+					{
+						title: "2023招生官"
+					},
+					{
+						title: "香港澳门台湾留学版"
+					},
+					{
+						title: "美国留学版"
+					},
+					{
+						title: "加拿大留学版"
+					},
+					{
+						title: "英国留学版"
+					},
+					{
+						title: "欧洲留学版"
+					},
+					{
+						title: "欧洲留学版"
+					},
+					{
+						title: "欧洲留学版"
+					},
+					{
+						title: "欧洲留学版"
+					}
+				],
+				starList:[
+					{
+						title: "2023招生季[你好 招生官]",
+						text: "[权威、官方]的第一手信息。"
+					},
+					{
+						title: "2023招生季[你好 招生官]",
+						text: "[权威、官方]的第一手信息。"
+					},
+					{
+						title: "2023招生季[你好 招生官]",
+						text: "[权威、官方]的第一手信息。"
+					}
+				]
+			}
+		},
+		methods: {
+			allClick(index) {
+				this.allActive = index
+			},
+			starClick(k) {
+				this.star = k
+				if(this.showStar[k].checked){
+					this.showStar[k].checked = false
+				}else{
+					this.showStar[k].checked = true
+				}
+				
+				console.log(this.showStar);
+				this.$forceUpdate()
+			}
+		},
+		created() {
+			for(var i = 0; i < this.starList.length; i++) {
+				this.showStar.push(this.starList[i])
+			}
+			for(let i in this.showStar){
+				this.showStar[i].checked = false
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.allSections{
+		display: flex;
+		flex-direction: row;
+		border-radius: 0.32rem;
+		margin-top: 0.666667rem;
+		filter: drop-shadow(0.05rem 0 0.09rem rgba(0, 0, 0, 0.1));
+	}
+	.allSections-left{
+		width: 35%;
+		border-left: 0.013333rem solid #ddd;
+		background-color: rgba(235, 235, 235, 0.556862745098039);
+		border-radius: 0.32rem 0 0 0.32rem;
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+		span{
+			height: 1.28rem;
+			line-height: 1.28rem;
+			border-radius: 0.32rem;
+			font-size: 0.32rem;
+			// padding: 0 0 0 0.2rem;
+			position: relative;
+			&.active{
+				background-color: #fff;
+				font-weight: bolder;
+				border-radius: 0.32rem 0 0 0.32rem;
+				color: #000;
+				width: 105%;
+				margin-left: -0.133333rem;
+				filter: drop-shadow(0 0 0.08rem rgba(0, 0, 0, 0.1));
+			}
+			&.active::before{
+				content: "";
+				width: 0.36rem;
+				height: 101%;
+				position: absolute;
+				right: 0;
+				top: -100%;
+				box-shadow: 0.14rem 0.14rem #fff;
+				border-radius: 0 0 0.32rem 0;
+			}
+			&.active::after{
+				content: "";
+				width: 0.36rem;
+				height: 101%;
+				position: absolute;
+				right: 0;
+				bottom: -100%;
+				box-shadow: 0.14rem -0.14rem #fff;
+				border-radius: 0 0.32rem 0 0;
+			}
+			&:first-child.active::before{
+				display: none;
+			}
+			&:last-child.active::after{
+				display: none;
+			}
+		}
+	}
+	.allSections-right{
+		width: 65%;
+		background-color: #fff;
+		border-radius: 0 0.32rem 0.32rem 0;
+		/* box-shadow: 0px 0px 8px rgb(0 0 0 / 20%); */
+		display: flex;
+		flex-direction: column;
+		z-index: 1;
+		display: none;
+		padding-bottom: 0.4rem;
+		&.active{
+			display: block;
+		}
+		.allSections-right-item{
+			padding: 0.4rem 0;
+			margin: 0 0.32rem 0 0.7rem;
+			border-bottom: 0.013333rem solid #ddd;
+			display: flex;
+			justify-content: space-between;
+			position: relative;
+			.item-content{
+				width: 80%;
+			}
+			.item-title{
+				color: #000;
+				font-size: 0.32rem;
+			}
+			.item-text{
+				margin: 0.266667rem 0;
+				color: #aaa;
+				font-size: 0.28rem;
+			}
+			.item-star{
+				display: flex;
+				align-items: center;
+				img{
+					width: 20px;
+				}
+			}
+			&::before{
+				content: "";
+				width: 0.12rem;
+				height: 0.32rem;
+				border-radius: 0.16rem;
+				position: absolute;
+				top: 0.48rem;
+				left: -0.35rem;
+				background-color: #62b1ff;
+			}
+		}
+	}
+</style>
--- a/src/views/collect/Collect.vue
+++ b/src/views/collect/Collect.vue
@ -0,0 +1,387 @@
+<template>
+  <!-- 收藏版块 -->
+  <div class="collect">
+    <!-- 未收藏 -->
+    <div v-if="collect.length == 0" class="notCollect">
+      <img
+        class="notCollect-img"
+        src="~assets/img/collect/notCollect.png"
+        alt="未收藏"
+      />
+      <div class="collect-text">收藏你感兴趣的版块，迅速浏览相应的帖子</div>
+      <div class="collect-btn">
+        <div class="collect-btn-text">马上收藏</div>
+        <svg-icon icon-class="collect-btn" class-name="icon-collect"></svg-icon>
+      </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)"
+        >
+          {{ item.label }}
+        </div>
+        <!-- 设置按钮 -->
+        <div class="setting flexcenter" @click="settingClick">
+          <img src="~assets/img/icon/setting.png" alt="设置" />
+          设置
+        </div>
+        <!-- 设置  收藏版块弹窗 -->
+        <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>
+            </div>
+            <!-- 弹窗收藏版块内容 -->
+            <div class="setting-sections">
+              <div class="setting-item">
+                <div class="setting-item-title">香港澳门台湾留学申请</div>
+                <div class="setting-star"></div>
+              </div>
+            </div>
+            <!-- 关闭弹窗 -->
+            <div class="setting-close" @click="settingClose">关闭</div>
+          </div>
+        </div>
+      </div>
+      <!-- 路径 -->
+      <div class="path-box">
+        <div>论坛</div>
+        <div class="oneEllipsis">论坛</div>
+        <div class="oneEllipsis">论坛</div>
+      </div>
+      <!-- 内容区域 -->
+      <section>
+        <!-- 帖子 -->
+        <div class="card-box">
+          <!-- 标题 -->
+          <div class="top moreEllipsis">
+            <div class="top-label">经验</div>
+            <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>
+          <!-- 头像、浏览量、消息 -->
+          <div class="bottom">
+            <div class="bottom-box">
+              <svg-icon
+                icon-class="test-head"
+                class-name="icon-head"
+              ></svg-icon>
+              <div class="bottom-name">匿名用户</div>
+            </div>
+            <div class="bottom-box">
+              <div class="bottom-right">
+                <svg-icon icon-class="look" class-name="icon-look"></svg-icon>
+                <div>1552</div>
+              </div>
+              <div class="bottom-right">
+                <svg-icon icon-class="msg" class-name="icon-look"></svg-icon>
+                <div>12</div>
+              </div>
+            </div>
+          </div>
+          <!-- 精华 -->
+          <div class="rightTop">
+            <div>
+              <span>精华</span>
+            </div>
+          </div>
+        </div>
+        <div class="card-box">
+          <!-- 帖子标题 -->
+          <div class="top moreEllipsis">
+            <div class="top-label">经验</div>
+            <div class="top-title">23fall 美国llm 求定位</div>
+          </div>
+          <!-- 帖子内容 -->
+          <div class="center">
+            <div class="center-text-visible">回复可见</div>
+          </div>
+          <!-- 头像、浏览量、消息 -->
+          <div class="bottom">
+            <div class="bottom-box">
+              <svg-icon
+                icon-class="test-head"
+                class-name="icon-head"
+              ></svg-icon>
+              <div class="bottom-name">匿名用户</div>
+            </div>
+            <div class="bottom-box">
+              <div class="bottom-right">
+                <svg-icon icon-class="look" class-name="icon-look"></svg-icon>
+                <div>1552</div>
+              </div>
+              <div class="bottom-right">
+                <svg-icon icon-class="msg" class-name="icon-look"></svg-icon>
+                <div>12</div>
+              </div>
+            </div>
+          </div>
+          <!-- 精华 -->
+          <div class="rightTop">
+            <div>
+              <span>精华</span>
+            </div>
+          </div>
+        </div>
+        <!-- 广告 -->
+        <div class="banner-box">
+          <svg-icon icon-class="test-banner" class-name="banner"></svg-icon>
+        </div>
+        <!-- 分页 -->
+        <div class="paging-box">
+          <el-pagination layout="prev, pager, next" :total="100">
+          </el-pagination>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Collect",
+  data() {
+    return {
+      hotActive: 0, //热门版块活跃点击
+      collect: [1],
+      settingShow: false, //弹窗显示
+      settingStar: false,
+      list: [
+        //版块
+        {
+          label: "全部",
+        },
+        {
+          label: "香港留学",
+        },
+        {
+          label: "香港留学",
+        },
+        {
+          label: "香港留学",
+        },
+      ],
+    };
+  },
+  methods: {
+    hotLabelClick(index) {
+      this.hotActive = index;
+    },
+    // 点击显示弹窗
+    settingClick() {
+      this.settingShow = true;
+    },
+    // 点击弹窗以外区域隐藏按钮、关闭弹窗
+    settingClose() {
+      this.settingShow = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.setting {
+  width: 1.44rem;
+  height: 0.72rem;
+  border-radius: 2.56rem;
+  border: 0.013333rem solid rgba(127, 127, 127, 1);
+  font-size: 0.3rem;
+  color: #333;
+  img {
+    width: 0.32rem;
+    height: 0.32rem;
+  }
+}
+
+//设置弹窗
+.setting-window {
+  display: none;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 7;
+
+  // 显示设置弹窗
+  &.setting-show {
+    display: block;
+  }
+
+  .setting-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    width: 100%;
+    max-height: 90%;
+    min-height: 28%;
+    border-radius: 0.8rem 0.8rem 0 0;
+    overflow: hidden;
+    display: inline-grid;
+    align-content: flex-start;
+  }
+
+  //弹窗标题
+  .setting-title {
+    text-align: center;
+    padding: 0.56rem 0;
+    font-size: 0.48rem;
+    font-weight: bolder;
+    color: #000;
+  }
+
+  // 设置收藏弹窗版块量
+  .setting-total {
+    display: flex;
+    justify-content: space-between;
+    margin: 0.25rem 0.4rem 0 0.5rem;
+
+    b {
+      font-weight: bolder;
+    }
+  }
+
+  .setting-num,
+  .setting-add {
+    font-size: 0.32rem;
+    color: #000;
+    font-weight: 400;
+  }
+
+  .setting-add-img {
+    width: 0.4rem;
+    height: 0.4rem;
+    margin-right: 0.07rem;
+  }
+
+  // 设置收藏内容区域
+  .setting-sections {
+    width: 100%;
+    overflow-y: scroll;
+    display: inherit;
+    margin: 0.45rem 0 0;
+    max-height: 58vh;
+    margin-bottom: 2.8rem;
+
+    .setting-item {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-left: 0.87rem;
+      border-bottom: 0.013333rem solid #eee;
+      position: relative;
+      padding: 0.5rem 0;
+
+      &::before {
+        content: "";
+        width: 0.12rem;
+        height: 0.32rem;
+        border-radius: 0.16rem;
+        position: absolute;
+        top: 0.6rem;
+        left: -0.4rem;
+        background-color: #62b1ff;
+      }
+
+      .setting-item-title {
+        font-size: 0.36rem;
+      }
+
+      &:last-child {
+        border: none;
+      }
+      .setting-star {
+        width: 0.48rem;
+        height: 0.48rem;
+        background-size: contain;
+        background-image: url("assets/img/allSections/star.png");
+        margin-right: 0.4rem;
+      }
+    }
+  }
+
+  .setting-close {
+    width: 50%;
+    margin: 0.666667rem auto;
+    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%;
+  }
+}
+
+// 未收藏样式
+.notCollect {
+  height: 80vh;
+  border-radius: 0.32rem;
+  box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 0.67rem;
+  background-color: #fff;
+
+  .notCollect-img {
+    width: 2.04rem;
+    margin: 4rem 0 0.5rem 0;
+  }
+
+  .collect-text {
+    font-size: 0.3rem;
+    color: #7f7f7f;
+  }
+
+  .collect-btn {
+    display: flex;
+    align-items: center;
+
+    .collect-btn-text {
+      color: #000;
+      font-weight: bold;
+      font-size: 0.4rem;
+      margin: 1rem 0.25rem;
+    }
+
+    //图标
+    .icon-collect {
+      width: 0.48rem;
+      height: 0.48rem;
+    }
+  }
+}
+</style>
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -0,0 +1,86 @@
+<template>
+  <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>
+      <router-link to="/collect">收藏的版块</router-link>
+      <router-link to="/allSections">全部版块</router-link>
+    </nav>
+    <!-- 发帖子 -->
+    <div class="publish flexcolumn flexcenter">
+      <svg-icon icon-class="add" class-name="icon-publish"></svg-icon>
+      发帖
+    </div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+import HeaderNav from "../components/HeaderNav";
+import SearchBox from "../components/SearchBox.vue";
+export default {
+  name: "Index",
+  data() {
+    return {};
+  },
+  components: {
+    HeaderNav,
+    SearchBox,
+  },
+};
+</script>
+
+<style lang="scss">
+// 导航
+nav {
+  display: flex;
+  justify-content: center;
+  align-self: center;
+  border-radius: 2.56rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  flex-direction: row;
+  background-color: rgba(235, 235, 235, 1);
+  margin: 1.5rem 0.35rem 0.2rem;
+
+  a {
+    flex: 1;
+    font-size: 0.4rem;
+    border-radius: 2.56rem;
+    text-align: center;
+
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    -webkit-user-select: none;
+    -moz-user-focus: none;
+    -moz-user-select: none;
+
+    &.router-link-exact-active {
+      color: #000;
+      font-weight: bolder;
+      background-color: rgba(80, 227, 194, 1);
+    }
+  }
+}
+// 发帖按钮
+.publish {
+  background-color: rgba(253, 223, 109, 1);
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 2.56rem;
+  position: fixed;
+  right: 0.4rem;
+  bottom: 20%;
+  font-size: 0.32rem;
+  z-index: 6;
+  color: #000;
+
+  .icon-publish {
+    width: 0.4rem;
+    height: 0.4rem;
+    margin-bottom: 0.1rem;
+  }
+}
+</style>
--- a/src/views/recommend/Recommend.vue
+++ b/src/views/recommend/Recommend.vue
@ -0,0 +1,121 @@
+<template>
+	<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>
+		<!-- 路径 -->
+		<div class="path-box">
+			<div>论坛</div>
+			<div class="oneEllipsis">论坛论坛论坛论坛论坛</div>
+			<div class="oneEllipsis">论坛</div>
+		</div>
+		<!-- 内容区域 -->
+		<section>
+			<!-- 帖子 -->
+			<div class="card-box">
+				<div class="top moreEllipsis">
+					<div class="top-label">经验</div>
+					<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>
+				<div class="bottom">
+					<div class="bottom-box">
+						<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
+						<div class="bottom-name">匿名用户</div>
+					</div>
+					<div class="bottom-box">
+						<div class="bottom-right">
+							<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
+							<div>1552</div>
+						</div>
+						<div class="bottom-right">
+							<svg-icon icon-class="msg" class-name="icon-look"></svg-icon>
+							<div>12</div>
+						</div>
+					</div>
+				</div>
+				<!-- 精华 -->
+				<div class="rightTop">
+					<div>
+						<span>精华</span>
+					</div>
+				</div>
+			</div>
+			<div class="card-box">
+				<div class="top moreEllipsis">
+					<div class="top-label">经验</div>
+					<div class="top-title">23fall 美国llm 求定位</div>
+				</div>
+				<div class="center">
+					<div class="center-text-visible">
+						回复可见
+					</div>
+				</div>
+				<div class="bottom">
+					<div class="bottom-box">
+						<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
+						<div class="bottom-name">匿名用户</div>
+					</div>
+					<div class="bottom-box">
+						<div class="bottom-right">
+							<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
+							<div>1552</div>
+						</div>
+						<div class="bottom-right">
+							<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
+							<div>12</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- 广告 -->
+			<div class="banner-box">
+				<svg-icon icon-class="test-banner" class-name="banner"></svg-icon>
+			</div>
+			<!-- 分页 -->
+			<div class="paging-box">
+				<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 
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
--- a/src/views/searchResult/SearchResult.vue
+++ b/src/views/searchResult/SearchResult.vue
@ -0,0 +1,19 @@
+<template>
+	<div>
+		
+	</div>
+</template>
+
+<script>
+	export default{
+		name: "SearchResult",
+		data() {
+			return {
+				
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,57 @@
+const { defineConfig } = require('@vue/cli-service')
+const path = require('path')
+
+function resolve(dir) {
+	return path.join(__dirname, dir)
+}
+module.exports = defineConfig({
+	//开启代理服务器(方式一)
+	devServer: {
+		//请求服务器的地址
+		proxy: 'https://forum.gter.net'
+	},
+
+	// devServer: {
+	// 	proxy: {
+	// 	  '/api': {
+	// 		target: 'https://forum.gter.net',
+	// 		changeOrigin: true,
+	// 		pathRewrite: {
+	// 		  '^/api': ''
+	// 		}
+	// 	  }
+	// 	}
+	//   },
+	transpileDependencies: true,
+	configureWebpack: {
+		resolve: {
+			alias: {
+				'assets': '@/assets',
+				'common': '@/common',
+				'components': '@/components',
+				'network': '@/network',
+				'views': '@/views'
+			}
+		}
+	},
+	// svg图片配置
+	lintOnSave: false,
+	chainWebpack(config) {
+		config.module
+			.rule('svg')
+			.exclude.add(resolve('src/icons'))       //svg的存储地址
+			.end()
+		config.module
+			.rule('icons')
+			.test(/\.svg$/)
+			.include.add(resolve('src/icons'))        //svg的存储地址
+			.end()
+			.use('svg-sprite-loader')
+			.loader('svg-sprite-loader')
+			.options({
+				symbolId: 'icon-[name]'
+			})
+			.end()
+
+	}
+})