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