首页搜索
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 login from "./login"
|
||||
import loginpwd from "./loginpwd"
|
||||
import indexfind from "./IndexFind"
|
||||
const router=new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
component: indexfind
|
||||
},
|
||||
{
|
||||
path: '/loginpwd',
|
||||
component: loginpwd
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user