Skip to content

B
beyond-clouds-frontM
Commit b09f307d by xuebiao
Options

search页面完成

parent 38112b34
Showing with 126 additions and 91 deletions
pages/search.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
bg-color-v="white" bg-color-v="white"
> >
<yun-div <yun-div
:padding-v="[34,0,40]" :padding-v="[20,0,20]"
> >
<yun-input <yun-input
:width-v="704" :width-v="704"
...@@ -12,11 +12,26 @@ ...@@ -12,11 +12,26 @@
bg-color-v="#F4F8FA" bg-color-v="#F4F8FA"
:border-v="[1,'solid',this.commonReturnPrimaryColor(0.2)]" :border-v="[1,'solid',this.commonReturnPrimaryColor(0.2)]"
style="margin: 0 auto;" style="margin: 0 auto;"
v-model="question"
placeholder="请输入您要搜索的内容"
@input="changeInput"
@focus="focus"
> >
</yun-input> </yun-input>
<yun-div <yun-div
v-if="this.bottom1"
:ske-w="50"
:extend-style="{
position:'absolute',right:commonReturnFlexedLength(40),top:commonReturnFlexedLength(44)
}"
:font-style="[24,30,400,'#999999','left']"
>取消</yun-div>
<yun-div
v-if="this.bottom2"
:flex-v="['row','flex-start','center']" :flex-v="['row','flex-start','center']"
style="position: absolute;right:23px;top: 34px;" :extend-style="{
position:'absolute',right:commonReturnFlexedLength(23),top:commonReturnFlexedLength(20)
}"
> >
<yun-div <yun-div
:width-v="36" :width-v="36"
...@@ -37,10 +52,42 @@ ...@@ -37,10 +52,42 @@
>搜索 >搜索
</yun-button> </yun-button>
</yun-div> </yun-div>
</yun-div>
<yun-div
width-v="100%"
:height-v="15"
bg-color-v="#EDF5F8"
></yun-div>
<!--搜索记录-->
<yun-div
:width-v="704"
:margin-v="[35,27,0,26]"
:flex-v="['row','flex-start','center']"
v-for="(item, index) in topicList" :key="item"
>
<yun-div
:height-v="56"
:width-v="56"
:border-r="[28]"
:ske-h="56"
:ske-w="56"
:no-flex-shrink="true"
:show-ske="false"
:font-style="[28,56,500,'#00AAE6','center']"
>
<yun-icon name="search" :size="28" color="#00AAE6"></yun-icon>
</yun-div>
<yun-div
:font-style="[32,38,400,'black','center']"
:margin-v="[0,0,0,20]"
>{{item}}</yun-div>
</yun-div> </yun-div>
<yun-div <yun-div
v-if="this.bottom1"
:width-v="704" :width-v="704"
:padding-v="[34,0,40]" :padding-v="[34,0,40]"
:margin-v="[0,'auto']" :margin-v="[0,'auto']"
...@@ -67,49 +114,8 @@ ...@@ -67,49 +114,8 @@
:ske-w="250" :ske-w="250"
:margin-v="[0,0,40,0]" :margin-v="[0,0,40,0]"
:font-style="[26,30,400,'black','left']" :font-style="[26,30,400,'black','left']"
>1.云深项目组</yun-div> v-for="(item, index) in topicList" :key="item"
<yun-div >{{item}}</yun-div>
:width-v="352"
:ske-w="250"
:margin-v="[0,0,40,0]"
:font-style="[26,30,400,'black','left']"
>1.云深项目组</yun-div>
<yun-div
:width-v="352"
:ske-w="250"
:margin-v="[0,0,40,0]"
:font-style="[26,30,400,'black','left']"
>1.云深项目组</yun-div>
<yun-div
:width-v="352"
:ske-w="250"
:margin-v="[0,0,40,0]"
:font-style="[26,30,400,'black','left']"
>1.云深项目组</yun-div>
<yun-div
:width-v="352"
:ske-w="250"
:margin-v="[0,0,40,0]"
:font-style="[26,30,400,'black','left']"
>1.云深项目组</yun-div>
<yun-div
:width-v="352"
:ske-w="250"
:margin-v="[0,0,40,0]"
:font-style="[26,30,400,'black','left']"
>1.云深项目组</yun-div>
<yun-div
:width-v="352"
:ske-w="250"
:margin-v="[0,0,40,0]"
:font-style="[26,30,400,'black','left']"
>1.云深项目组</yun-div>
<yun-div
:width-v="352"
:ske-w="250"
:margin-v="[0,0,40,0]"
:font-style="[26,30,400,'black','left']"
>1.云深项目组</yun-div>
</yun-div> </yun-div>
</yun-div> </yun-div>
<yun-div <yun-div
...@@ -142,57 +148,21 @@ ...@@ -142,57 +148,21 @@
:padding-v="[12,20,12,20]" :padding-v="[12,20,12,20]"
bg-color-v="#EFEFEF" bg-color-v="#EFEFEF"
:font-style="[24,30,400,'black','left']" :font-style="[24,30,400,'black','left']"
v-for="(item, index) in topicList" :key="item"
> >
三个字 {{item}}
</yun-div>
<yun-div
:ske-w="100"
:margin-v="[0,20,30,0]"
:padding-v="[12,20,12,20]"
bg-color-v="#EFEFEF"
:font-style="[24,30,400,'black','left']"
>
三个字aaaa
</yun-div>
<yun-div
:ske-w="100"
:margin-v="[0,20,30,0]"
:padding-v="[12,20,12,20]"
bg-color-v="#EFEFEF"
:font-style="[24,30,400,'black','left']"
>
三个字aaaa
</yun-div>
<yun-div
:ske-w="100"
:margin-v="[0,20,30,0]"
:padding-v="[12,20,12,20]"
bg-color-v="#EFEFEF"
:font-style="[24,30,400,'black','left']"
>
三个字aaaa
</yun-div>
<yun-div
:ske-w="100"
:margin-v="[0,20,30,0]"
:padding-v="[12,20,12,20]"
bg-color-v="#EFEFEF"
:font-style="[24,30,400,'black','left']"
>
三个字aaaa
</yun-div> </yun-div>
</yun-div> </yun-div>
</yun-div> </yun-div>
</yun-div> </yun-div>
<!--搜索详情--> <!--搜索结果-->
<Nav></Nav> <Nav :path="path" :nav-list="navList"></Nav>
<yun-div <yun-div
> >
<project-card v-for="val in 1" key="val.projectId"></project-card> <project-card v-for="val in 1" key="val.projectId"></project-card>
<user-card-x v-for="val in 1" key="val.projectId"></user-card-x> <user-card-x v-for="val in 1" key="val.userId"></user-card-x>
<answer-card v-for="val in 1" key="val.projectId"></answer-card> <answer-card v-for="val in 1" key="val.answerId"></answer-card>
</yun-div> </yun-div>
...@@ -206,10 +176,75 @@ ...@@ -206,10 +176,75 @@
import userCardX from '../components/moblie/userCardX' import userCardX from '../components/moblie/userCardX'
import projectCard from '../components/moblie/projectCard' import projectCard from '../components/moblie/projectCard'
export default { export default {
mixins:[commonMixin], mixins: [commonMixin],
layout:'blank', layout: 'blank',
components:{ components: {
Nav,answerCard,userCardX,projectCard Nav, answerCard, userCardX, projectCard
},
data() {
return {
question: '',
bottom1: true,
bottom2:false,
topicList:['云顶书院','云顶书院','云顶书院','云顶书院'],
path: '/search',
navList: [
{
label: '全部',
id: 'all'
},
{
label: '项目',
id: '10'
},
{
label: '博客',
id: '11'
},
{
label: '问答',
id: '12'
},
{
label: '话题',
id: '13'
},
{
label: '用户',
id: '14'
},
]
}
},
created() {
if (this.$route.query.type) {
return
}
this.$router.replace({
path: '/search',
query: {
type: 'all'
}
})
},
watch: {
},
methods:{
changeInput(){
if (this.question !== '') {
this.bottom1=false;
this.bottom2 = true
}else{
this.bottom2=false;
this.bottom1=true
}
},
focus(){
console.log("sss")
}
} }
} }
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment