Skip to content

B
beyond-clouds-front
Commit 9405a200 by xuebiao
Options

search

parent f3967649
Showing with 355 additions and 0 deletions
pages/search.vue 0 → 100644
<template>
<div class="search-container">
<div class="search-header">
<div class="search-box">
<input type="text">
<div class="bottom">
<bottom><yun-icon name="search" color="#ccc"></yun-icon></bottom>
</div>
</div>
</div>
<div class="search-center">
<div class="search-center__nav">
<nav-wrap
:list="list"
width="106px"
height="231px"
style="padding-bottom: 0px"
></nav-wrap>
</div>
<div class="search-center__content">
<nuxt-child></nuxt-child>
</div>
<div class="search-center__right">
<card-container
title="推荐历史"
width="302px"
height="226px"
label="清空"
>
<div class="search-container__rightone">
<p>java</p>
<yun-icon name="close2" class="yun-icon"></yun-icon>
</div>
</card-container>
<card-container
title="相关搜索"
width="302px"
height="300px"
>
<div class="search-container__righttwo">
<div class="righttwo__box">
<p>java</p>
</div>
<div class="righttwo__box">
<p>java</p>
</div>
</div>
</card-container>
</div>
</div>
</div>
</template>
<script>
import NavWrap from "../components/pc/nav/navWrap";
import CardContainer from "../components/pc/cardContainer";
export default {
name: "search",
components:{
NavWrap,CardContainer
},
data(){
return {
list:[
{
label:"项目",
address:"/search/project"
},
{
label:"博客",
address:"/search/blogs"
},
{
label:"问答",
address:"/search/answer"
},
{
label:"动态",
address:"/search/dynamic"
},
{
label:"话题",
address:"/search/topic"
},
{
label:"用户",
address:"/search/user"
}
]
}
},
created() {
this.$router.replace('/search/project')
}
}
</script>
<style lang="scss" scoped>
.search-container {
.search-header{
width: 100%;
height: 160*$length;
display: flex;
align-items: center;
.search-box{
width: 408*$length;
height: 40*$length;
@extend %flex-row-spb;
margin: 0 auto;
input{
@include border-radius(4*$length 0 0 4*$length);
width: 318*$length;
height: 40*$length;
}
.bottom{
@include border-radius(0 4*$length 4*$length 0);
width: 90*$length;
height: 40*$length;
background-color: #00AAE6;
text-align: center;
line-height: 40*$length;
}
}
}
.search-center {
width: $pageWidth;
margin: 16*$length auto 0;
@extend %flex-row-spb;
align-items: start;
}
.search-center__right{
@extend %flex-column-spb;
height:546*$length;
.search-container__rightone{
width: 282*$length;
height: 24*$length;
margin: 0 auto;
margin-top: 15*$length;
color: #ccc;
position: relative;
.yun-icon{
font-size: 10*$length;
color: #ccc;
position: absolute;
right: 1*$length;
top: 2*$length;
}
:hover{
background-color: #F4F8FA;
}
}
.search-container__righttwo{
width: 282*$length;
margin: 0 auto;
margin-top: 10*$length;
.righttwo__box{
background-color: #F4F8FA;
margin-top:10px;
margin-left: 15px;
heigt:20*$length;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
@include border-radius(2px)
}
}
}
}
</style>
pages/search/answer.vue 0 → 100644
<template>
<card-container
title="与 Java 关键词相关的 问答 共 13 条"
width="816px"
height="730px"
>
<ProjectCard></ProjectCard>
</card-container>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
export default {
name: "answer",
components:{
CardContainer,ProjectCard
}
}
</script>
<style lang="scss" scoped>
</style>
pages/search/blogs.vue 0 → 100644
<template>
<card-container
title="与 Java 关键词相关的 博客 共 13 条"
width="816px"
height="730px"
>
<ProjectCard></ProjectCard>
</card-container>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
export default {
name: "blogs",
components:{
CardContainer,ProjectCard
}
}
</script>
<style lang="scss" scoped>
</style>
pages/search/dynamic.vue 0 → 100644
<template>
<card-container
title="与 Java 关键词相关的 项目 共 13 条"
width="816px"
height="730px"
>
<SocialContactCard></SocialContactCard>
</card-container>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
import SocialContactCard from "../../components/pc/socialContactCard";
export default {
name: "dynamic",
components:{
CardContainer,SocialContactCard
}
}
</script>
<style lang="scss" scoped>
</style>
pages/search/project.vue 0 → 100644
<template>
<card-container
title="与 Java 关键词相关的 项目 共 13 条"
width="816px"
height="730px"
>
<ProjectCard></ProjectCard>
</card-container>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
export default {
name: "project",
components:{
CardContainer,ProjectCard
}
}
</script>
<style lang="scss" scoped>
</style>
pages/search/topic.vue 0 → 100644
<template>
<card-container
title="与 Java 关键词相关的 话题 共 13 条"
width="816px"
height="730px"
>
<TopicCard></TopicCard>
</card-container>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
import TopicCard from "../../components/pc/topicCard";
export default {
name: "topic",
components:{
CardContainer,TopicCard
}
}
</script>
<style scoped>
</style>
pages/search/user.vue 0 → 100644
<template>
<card-container
title="与 Java 关键词相关的 用户 共 13 条"
width="816px"
height="730px"
>
<fan-card></fan-card>
</card-container>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
import FanCard from "../../components/pc/fanCard";
export default {
name: "user",
components:{
CardContainer,FanCard
}
}
</script>
<style scoped>
</style>
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