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 @@
bg-color-v="white"
>
<yun-div
:padding-v="[34,0,40]"
:padding-v="[20,0,20]"
>
<yun-input
:width-v="704"
......@@ -12,11 +12,26 @@
bg-color-v="#F4F8FA"
:border-v="[1,'solid',this.commonReturnPrimaryColor(0.2)]"
style="margin: 0 auto;"
v-model="question"
placeholder="请输入您要搜索的内容"
@input="changeInput"
@focus="focus"
>
</yun-input>
<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']"
style="position: absolute;right:23px;top: 34px;"
:extend-style="{
position:'absolute',right:commonReturnFlexedLength(23),top:commonReturnFlexedLength(20)
}"
>
<yun-div
:width-v="36"
......@@ -37,10 +52,42 @@
>搜索
</yun-button>
</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
v-if="this.bottom1"
:width-v="704"
:padding-v="[34,0,40]"
:margin-v="[0,'auto']"
......@@ -67,49 +114,8 @@
: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
:width-v="352"
:ske-w="250"
:margin-v="[0,0,40,0]"
:font-style="[26,30,400,'black','left']"
>1.云深项目组</yun-div>
v-for="(item, index) in topicList" :key="item"
>{{item}}</yun-div>
</yun-div>
</yun-div>
<yun-div
......@@ -142,57 +148,21 @@
:padding-v="[12,20,12,20]"
bg-color-v="#EFEFEF"
:font-style="[24,30,400,'black','left']"
v-for="(item, index) in topicList" :key="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
{{item}}
</yun-div>
</yun-div>
</yun-div>
</yun-div>
<!--搜索详情-->
<Nav></Nav>
<!--搜索结果-->
<Nav :path="path" :nav-list="navList"></Nav>
<yun-div
>
<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>
<answer-card v-for="val in 1" key="val.projectId"></answer-card>
<user-card-x v-for="val in 1" key="val.userId"></user-card-x>
<answer-card v-for="val in 1" key="val.answerId"></answer-card>
</yun-div>
......@@ -206,10 +176,75 @@
import userCardX from '../components/moblie/userCardX'
import projectCard from '../components/moblie/projectCard'
export default {
mixins:[commonMixin],
layout:'blank',
components:{
Nav,answerCard,userCardX,projectCard
mixins: [commonMixin],
layout: 'blank',
components: {
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>
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