Skip to content

B
beyond-clouds-front
Commit 977a273f by yanju
Options

Merge branch 'yoona' into 'master' 

Yoona

See merge request pigbigbig/beyond-clouds-front!3
parents 7e269bcc c93e9742
Showing with 304 additions and 3 deletions
components/pc/answerCard.vue 0 → 100644
<template>
<div class="answer-card__wrap">
<div class="answer-card">
<div class="answer-card__left" v-if="!isAnswer">
<div>
<p>123</p>
<p>回答</p>
</div>
</div>
<div class="answer-card__left2" v-if="isAnswer">
<span>已采纳</span>
</div>
<div class="answer-card__right">
<div class="title">问题的标题</div>
<p class="content">
这是文字的内容
</p>
<div class="footer">
<div class="info-left">
jetris<span>·</span>4小时前
</div>
<div class="info-right">
<div class="icon-box">
<yun-icon name="star" size="10px" vertical="middle" color="#ccc"></yun-icon>
<span>12</span>
</div>
<div class="icon-box">
<yun-icon name="view" size="10px" vertical="middle" color="#ccc"></yun-icon>
<span>12</span>
</div>
</div>
<div class="label-box">
<p>前端</p>
<p>js</p>
<p>java</p>
<p>python</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "answerCard",
data() {
return{
isAnswer: true, // props 判断是否回答过
info: {
// props 传递的内容
}
}
}
}
</script>
<style lang="scss" scoped>
.answer-card__wrap{
.answer-card{
@extend %cursorPointer;
width: 938*$length;
box-sizing: border-box;
padding: 24*$length;
border-bottom: 1px dashed #EFEFEF;
@extend %flex-row-spb;
align-items: flex-start;
justify-content: flex-start;
.answer-card__left{
margin-top: 3*$length;
width: 84*$length;
height: 84*$length;
line-height: 84*$length;
background-color: #F4F8FA;
@include border-radius(4*$length);
> div{
display: inline-block;
vertical-align: middle;
line-height: 16*$length;
p{
@include fontStyle(12,16,500,#999,center);
&:first-child{
margin-bottom: 12*$length;
@include fontStyle(16,21,500,#222222,center);
}
}
}
}
.answer-card__left2{
margin-top: 3*$length;
width: 84*$length;
height: 84*$length;
line-height: 84*$length;
background-color: #F4F8FA;
border: 1*$length solid #75D098;
@include border-radius(4*$length);
> span{
@include fontStyle(12,17,500,#75D098,center);
}
}
.answer-card__right{
margin-left: 20*$length;
@extend %flex-column-spb;
align-items: start;
> .title{
@extend %animate-transition;
@include fontStyle(18,25,500,#222,left);
}
> .content{
padding: 11*$length 0 15*$length 0;
@include fontStyle(14,20,500,#666,left);
}
.footer{
line-height: 18*$length;
@extend %flex-row-spb;
.info-left{
margin-right: 37*$length;
@include fontStyle(12,17,500,#999,left);
> span{
margin: 0 3*$length;
}
}
.info-right{
.icon-box{
display: inline-block;
margin-right: 17*$length;
@include fontStyle(12,12,500,#ccc,left);
vertical-align: 4*$length;
> span{
margin-left:5*$length;
vertical-align: middle;
}
}
}
> .label-box{
margin-left:32*$length;
> p{
display: inline-block;
margin-right:10*$length;
padding:2*$length 8*$length;
background-color: #F4F8FA;
@include border-radius(2*$length);
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
background-color:rgba(0,170,230,.2);
color:rgba(0,170,230,1);
}
}
}
}
&:hover{
> .title{
color:#00AAE6;
}
}
}
}
}
</style>
components/pc/myAnswer.vue 0 → 100644
<template>
<div class="my-answer__warp">
<div class="my-answer">
<div class="title">这个是问题的标题</div>
<div class="content">
<p class="content-secondary">我的回答<span v-if="isAdopt">(已采纳)</span></p>
<p class="content-main">这个是回答的内容</p>
</div>
<div class="footer">
<span class="footer-timer">2019-02-20 14:20</span>
<div>
<span>评论</span>
<span>20</span>
</div>
<div>
<span>赞</span>
<span>50</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "myAnswer",
props: {
info: Object
},
data(){
return{
isAdopt: false,
}
}
}
</script>
<style lang="scss" scoped>
.my-answer__warp{
.my-answer{
@extend %cursorPointer;
text-align: left;
box-sizing: border-box;
width: 938*$length;
padding: 21*$length 24*$length;
border-bottom: 1px dashed #EFEFEF;
&:hover{
> .title{
color: #00AAE6;
}
}
> .title{
@extend %animate-transition;
@include fontStyle(18,25,500,#222,left);
}
.content{
margin-top: 12*$length;
margin-bottom: 11*$length;
.content-secondary{
padding-bottom: 6*$length;
@include fontStyle(12,17,500,#999,left);
> span{
color: #75D098;
}
}
.content-main{
width: 100%;
@include fontStyle(14,20,500,#333,left);
@extend %nowrap;
}
}
.footer{
@include fontStyle(12,17,500,#999,left);
.footer-timer{
margin-right: 32*$length;
}
div{
display: inline-block;
margin-right: 32*$length;
}
}
}
}
</style>
components/pc/projectCard.vue
......@@ -158,7 +158,6 @@
> span{
margin: 0 3*$length;
}
}
.info-right{
......
components/pc/topicListCard.vue 0 → 100644
<template>
<div class="top-list-card__wrap">
<div class="top-list-card">
<div class="top-list-card__left">1</div>
<div class="top-list-card__center">
<span>啦啦啦</span>
<span>12316541</span>
</div>
<div class="top-list-card__right">
<div class="icon-box">
<yun-icon name="top"></yun-icon>
</div>
<div class="icon-box">
<span>新</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "topicListCard"
}
</script>
<style lang="scss" scoped>
.top-list-card__wrap{
.top-list-card{
width: 1044*$length;
height: 35*$length;
@extend %flex-row-spb;
justify-content: flex-start;
.top-list-card__left{
margin-left: 107*$length;
@include fontStyle(12,12,500,#222,left);
}
.top-list-card__center{
width: 424*$length;
@include fontStyle(12,17,500,#00AAE6,left);
}
.top-list-card__right{
.icon-box{
display: inline-block;
}
}
}
}
</style>
pages/index.vue
<template>
<div class="container">
<div>
<banner></banner>
<h1 class="title">
beyond-clouds-front
</h1>
<project-card></project-card>
<answer-card></answer-card>
<my-answer></my-answer>
<topic-list-card></topic-list-card>
<h2 class="subtitle" @click="showAlert">
beyond-clouds project
</h2>
......@@ -16,6 +20,9 @@
import Banner from '../components/pc/banner';
import ProjectCard from '../components/pc/projectCard';
import AnswerCard from '../components/pc/answerCard';
import MyAnswer from '../components/pc/myAnswer';
import TopicListCard from '../components/pc/topicListCard';
export default {
......@@ -25,7 +32,7 @@ export default {
}
},
components:{
Banner,ProjectCard
Banner,ProjectCard,AnswerCard,MyAnswer,TopicListCard
},
methods:{
......@@ -59,7 +66,7 @@ export default {
}
</script>
<style>
<style scoped>
.container {
margin: 0 auto;
min-height: 300vh;
......
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