首页搜索
This commit is contained in:
asd
parent
a07d6df078
commit
1fce154a89
84
src/IndexFind.vue
Normal file
84
src/IndexFind.vue
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<div class="indexfind">
|
||||||
|
<indexfindhead></indexfindhead>
|
||||||
|
<div class="tab">
|
||||||
|
<indexfindtab @changeno="getno"></indexfindtab>
|
||||||
|
</div>
|
||||||
|
<div class="all" v-if="no==0">
|
||||||
|
<div class="all1">
|
||||||
|
<indexfindall title="学法律后，对你最大的影响或改变是什么？" num="525" :right="pics"></indexfindall>
|
||||||
|
</div>
|
||||||
|
<div class="all1">
|
||||||
|
<indexfindall title="学法律后，对你最大的影响或改变是什么？" num="1532" :right="pics"></indexfindall>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user" v-if="no==1">
|
||||||
|
<div class="user1">
|
||||||
|
<indedfinduser></indedfinduser>
|
||||||
|
</div>
|
||||||
|
<div class="user1">
|
||||||
|
<indedfinduser></indedfinduser>
|
||||||
|
</div>
|
||||||
|
<div class="user1">
|
||||||
|
<indedfinduser></indedfinduser>
|
||||||
|
</div>
|
||||||
|
<div class="user1">
|
||||||
|
<indedfinduser></indedfinduser>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user" v-if="no==2">
|
||||||
|
<div class="user1">
|
||||||
|
<indedfinduser></indedfinduser>
|
||||||
|
</div>
|
||||||
|
<div class="user1">
|
||||||
|
<indedfinduser></indedfinduser>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import indexfindhead from "./components/indexfindhead"
|
||||||
|
import indexfindtab from "./components/indexfindtab"
|
||||||
|
import indexfindall from "./components/indexfindall"
|
||||||
|
import pics from "./assets/ad.png"
|
||||||
|
import indedfinduser from "./components/indexfinduser"
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
indexfindhead,
|
||||||
|
indexfindtab,
|
||||||
|
indexfindall,
|
||||||
|
indedfinduser
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
getno(e){
|
||||||
|
window.console.log(e)
|
||||||
|
this.no=e
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
pics,
|
||||||
|
no:0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
body{
|
||||||
|
background-color: #F6F6F6
|
||||||
|
}
|
||||||
|
.tab{
|
||||||
|
margin-top:89px;
|
||||||
|
// margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.all{
|
||||||
|
.all1{
|
||||||
|
margin-top: -33px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user1{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/assets/ad.png
Normal file
BIN
src/assets/ad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
src/assets/add.png
Normal file
BIN
src/assets/add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 327 B |
BIN
src/assets/pinglun.png
Normal file
BIN
src/assets/pinglun.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 537 B |
BIN
src/assets/renzheng.png
Normal file
BIN
src/assets/renzheng.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 979 B |
102
src/components/indexfindall.vue
Normal file
102
src/components/indexfindall.vue
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<div class="indexfindall">
|
||||||
|
<p class="title">{{title}}</p>
|
||||||
|
<div class="content">
|
||||||
|
<div class="left">
|
||||||
|
<p class="text"> <b>职问：</b>因为学习工作而在不同程度上变得“麻木”。实际上，长期从事法律</p>
|
||||||
|
<div class="operation">
|
||||||
|
<div>
|
||||||
|
<img src="../assets/share.png" alt="" class="icon">
|
||||||
|
<p>分享</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src="../assets/pinglun.png" alt="" class="icon">
|
||||||
|
<p>{{num}}条评论</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img :src="right" alt="" class="right">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"indexfindall",
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
aaa:"../assets/ad.png"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
title:{
|
||||||
|
type:String
|
||||||
|
},
|
||||||
|
num:{
|
||||||
|
type:String
|
||||||
|
},
|
||||||
|
right:{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.indexfindall{
|
||||||
|
width: 100%;
|
||||||
|
// height: 262px;
|
||||||
|
background-color: white;
|
||||||
|
.title{
|
||||||
|
color: #333333;
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight:500;
|
||||||
|
padding-top: 34px;
|
||||||
|
padding-bottom: 23px;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
width: 689px;
|
||||||
|
height: 139px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 41px;
|
||||||
|
// justify-content: center;
|
||||||
|
.left{
|
||||||
|
width: 457px;
|
||||||
|
.text{
|
||||||
|
color: #333333;
|
||||||
|
font-size: 28px;
|
||||||
|
line-height:35px;
|
||||||
|
}
|
||||||
|
.operation{
|
||||||
|
// width: 271px;
|
||||||
|
margin-top: 47px;
|
||||||
|
color: #95998F;
|
||||||
|
font-size: 22px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
>div{
|
||||||
|
display: flex;
|
||||||
|
>p{
|
||||||
|
margin-right: 60px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// justify-content: space-between;
|
||||||
|
.icon{
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
width:209px;
|
||||||
|
height:139px;
|
||||||
|
border-radius:5px;
|
||||||
|
margin-left: 23px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
109
src/components/indexfindhead.vue
Normal file
109
src/components/indexfindhead.vue
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<van-popup v-model="show" position="top" :style="{ height: '2.82rem' }">
|
||||||
|
<div style="height:0.88rem"></div>
|
||||||
|
<div class="mnuelist">
|
||||||
|
<div>首页</div>
|
||||||
|
<div>我的主页</div>
|
||||||
|
<div>退出登录</div>
|
||||||
|
</div>
|
||||||
|
</van-popup>
|
||||||
|
<div class="head">
|
||||||
|
<img class="logo" src alt srcset />
|
||||||
|
<div class="search">
|
||||||
|
<img src alt />
|
||||||
|
<input type="text" placeholder="搜索" />
|
||||||
|
</div>
|
||||||
|
<div class="mnue" @click="isshow">
|
||||||
|
<!-- <div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div> -->
|
||||||
|
取消
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mnuelist{
|
||||||
|
padding:26px;
|
||||||
|
height: 194px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #333;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.head {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
width: 100%;
|
||||||
|
height: 88px;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.logo {
|
||||||
|
width: 115px;
|
||||||
|
height: 37px;
|
||||||
|
background-color: #000;
|
||||||
|
display: block;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
margin-left: 24px;
|
||||||
|
width: 485px;
|
||||||
|
height: 60px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid rgba(233, 233, 233, 1);
|
||||||
|
border-radius: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
> img {
|
||||||
|
margin-left: 23px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
> input {
|
||||||
|
margin-left: 21px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 24px;
|
||||||
|
height: 26px;
|
||||||
|
border: none;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mnue {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 15px;
|
||||||
|
width: 65px;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-left: 8px;
|
||||||
|
color: #6B9147;
|
||||||
|
font-size: 28px;
|
||||||
|
> div {
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background-color: #95998f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "indexhead",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isshow() {
|
||||||
|
this.show = !this.show;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
46
src/components/indexfindtab.vue
Normal file
46
src/components/indexfindtab.vue
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<template>
|
||||||
|
<div class="indexfindtab">
|
||||||
|
<p @click="change(0)" :class="no==0?'text':''">综合</p>
|
||||||
|
<p @click="change(1)" :class="no==1?'text':''">用户</p>
|
||||||
|
<p @click="change(2)" :class="no==2?'text':''">话题</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"indexfindtab",
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
no:0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
change(e){
|
||||||
|
this.no=e
|
||||||
|
this.$emit("changeno",e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
.indexfindtab{
|
||||||
|
width: 100%;
|
||||||
|
height:100px;
|
||||||
|
background-color: white;
|
||||||
|
display: flex;
|
||||||
|
color: #909090;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 100px;
|
||||||
|
>p{
|
||||||
|
margin-right: 60px;
|
||||||
|
}
|
||||||
|
>p:first-child{
|
||||||
|
margin-left: 30px
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
color: #333333
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
93
src/components/indexfinduser.vue
Normal file
93
src/components/indexfinduser.vue
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
<template>
|
||||||
|
<div class="indexfinduser">
|
||||||
|
<div class="left">
|
||||||
|
<img src="../assets/ad.png" alt class="photo" />
|
||||||
|
<div class="userinfo">
|
||||||
|
<div class="username">
|
||||||
|
<p>法律小知知</p>
|
||||||
|
<img src="../assets/renzheng.png" alt class="icon" />
|
||||||
|
</div>
|
||||||
|
<p class="desc">律师、合伙人、男</p>
|
||||||
|
<p class="desc1">399 回答·5 文章·12 关注者</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<!-- <div class="add"> -->
|
||||||
|
<img src="../assets/add.png" alt="" class="add">
|
||||||
|
<!-- </div> -->
|
||||||
|
<p>关注</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "indexfinduser"
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.indexfinduser {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
background-color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
.photo {
|
||||||
|
width: 120px;
|
||||||
|
height: 126px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.userinfo {
|
||||||
|
margin-top: 33px;
|
||||||
|
margin-left: 20px;
|
||||||
|
color: #333333;
|
||||||
|
.username {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
font-size: 32px;
|
||||||
|
> p {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
margin-top: 28px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
.desc1 {
|
||||||
|
color: #95998f;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 143px;
|
||||||
|
height: 62px;
|
||||||
|
background: rgba(247, 247, 247, 1);
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: auto 0;
|
||||||
|
margin-right: 30px;
|
||||||
|
// text-align: center;
|
||||||
|
line-height: 62px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
color: #6b9147;
|
||||||
|
font-size: 28px;
|
||||||
|
.add {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-top: 19px;
|
||||||
|
margin-right: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -10,10 +10,15 @@ import ManualAppeal from "./ManualAppeal"
|
|||||||
import IndexArticleDetail from "./IndexArticleDetail"
|
import IndexArticleDetail from "./IndexArticleDetail"
|
||||||
import login from "./login"
|
import login from "./login"
|
||||||
import loginpwd from "./loginpwd"
|
import loginpwd from "./loginpwd"
|
||||||
|
import indexfind from "./IndexFind"
|
||||||
const router=new Router({
|
const router=new Router({
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
|
component: indexfind
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/loginpwd',
|
||||||
component: loginpwd
|
component: loginpwd
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user