Skip to content

B
beyond-clouds-front
Commit a3f81baa by yanju
Options

Merge branch 'yanjunli' into 'master' 

comment-card and pagination

See merge request pigbigbig/beyond-clouds-front!6
parents 977a273f 8e1e4849
Showing with 608 additions and 5 deletions
assets/font/iconfont.css
......@@ -11,6 +11,7 @@
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
vertical-align:middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
......
components/common/avatar/avatar.vue 0 → 100644
<template>
<div class="user-avatar" :style="{backgroundColor:randomColor,width:size,height:size,borderRadius:borderR}">
<img :src="src" v-if="src"/>
<p v-if="!src">{{firstWord}}</p>
</div>
</template>
<script>
export default {
name:'yunAvatar',
props:{
src:String,
name:String,
size:String,
borderR:String,
},
data(){
return {
colorArr:['#A3A7D2','#B9A3D2','#D2A3CE','#D2A3A3','#9FBFD3','#9FD3D3','#9FD3B5','#BBD39F','#D3CF9F','#DEBAA7'],
}
},
computed:{
randomColor(){
let randomNum = Math.floor(Math.random() * 10);
return this.colorArr[randomNum];
},
firstWord(){
return this.name.slice(0,1)
}
}
}
</script>
<style lang="scss" scoped>
.user-avatar{
width:48*$length;
height:48*$length;
border-radius:50%;
overflow: hidden;
background-color: #000;
@extend %cursorPointer;
img{
width:100%;
height:100%;
}
p{
@include fontStyle(14,48,700,#fff,center)
}
}
</style>
components/common/avatar/index.js 0 → 100644
import YunAvatar from './avatar';
YunAvatar.install =function (Vue) {
Vue.component(YunAvatar.name,YunAvatar)
}
export default YunAvatar;
components/common/icon/src/icon.vue
<template>
<<<<<<< HEAD
<i :class="'iconfont yun-icon--' + name" :style="{fontSize:size,color:nowColor,cursor:cursor,verticalAlign:vertical,paddingBottom:pb}" @mouseenter="changeStyle1" @mouseout="changeStyle2"></i>
=======
<i :class="'iconfont yun-icon--' + name" :style="{fontSize:size,color:nowColor,transition:'.5s ease',cursor:cursor,verticalAlign:'middle'}" @mouseenter="changeStyle1" @mouseout="changeStyle2"></i>
>>>>>>> 977a273fde2a48e90ed7d1fd29c36cc7679722a5
</template>
<script>
......@@ -8,9 +12,17 @@
props: {
name: String,
size: Number,
size: String,
color: String,
<<<<<<< HEAD
hoverColor:{
type:String,
},
pb:String,
vertical:String,
=======
hoverColor:String,
>>>>>>> 977a273fde2a48e90ed7d1fd29c36cc7679722a5
canClick:{
type:Boolean,
default:true,
......@@ -44,3 +56,18 @@
}
};
</script>
<style lang="scss" scoped>
i{
transition:.5s ease;
display:inline-block;
padding-bottom: 5*$length;
vertical-align: middle;
&:before{
display: inline-block;
height:100%;
vertical-align: middle;
}
}
</style>
components/pc/banner.vue
......@@ -27,8 +27,6 @@
</div>
</div>
</div>
</template>
......
components/pc/commentCard.vue 0 → 100644
<template>
<div class="comment-card__wrap">
<div class="comment-card1">
<div class="comment-card1__l">
<yun-avatar :src="src"></yun-avatar>
</div>
<div class="comment-card1__r">
<div class="header">
<h6>{{name}}</h6>
<p>{{floor}}楼</p>
</div>
<p class="comment-box">{{comment}}</p>
<div class="footer">
<h6>{{time}}</h6>
<p>
<span>回复</span>
<span>赞{{likeNum}}</span>
</p>
</div>
<div class="comment-card2">
<div class="comment-card2__l">
<yun-avatar :src="src"></yun-avatar>
</div>
<div class="comment-card2__r">
<div class="header">
<h6>{{name}}</h6>
<p>{{floor}}楼</p>
</div>
<p class="comment-box">{{comment}}</p>
<div class="footer">
<h6>{{time}}</h6>
<p>
<span>回复</span>
<span>赞{{likeNum}}</span>
</p>
</div>
<div class="comment-card3">
<div class="comment-card3__l">
<yun-avatar :src="src"></yun-avatar>
</div>
<div class="comment-card3__r">
<div class="header">
<h6>{{name}}</h6>
<p>{{floor}}楼</p>
</div>
<p class="comment-box">{{comment}}</p>
<div class="footer">
<h6>{{time}}</h6>
<p>
<span>回复</span>
<span>赞{{likeNum}}</span>
</p>
</div>
</div>
</div>
<div class="comment-card3">
<div class="comment-card3__l">
<yun-avatar :src="src"></yun-avatar>
</div>
<div class="comment-card3__r">
<div class="header">
<h6>{{name}}</h6>
<p>{{floor}}楼</p>
</div>
<p class="comment-box">{{comment}}</p>
<div class="footer">
<h6>{{time}}</h6>
<p>
<span>回复</span>
<span>赞{{likeNum}}</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'commentCard',
data(){
//return
return {
src:'https://s2.ax1x.com/2020/01/15/lO2kIf.png',
name:'我我欸',
floor:6,
comment:'这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容',
time:'3小时前',
likeNum:10,
}
},
}
</script>
<style lang="scss" scoped>
.comment-card__wrap{
.comment-card1{
box-sizing:content-box;
padding:21*$length 24*$length 24*$length;
width:890*$length;
border-bottom:1px dashed #EFEFEF;
@extend %flex-row-spb;
align-items: flex-start;
background-color: #fff;
.comment-card1__l{
width:48*$length;
}
.comment-card1__r{
width:826*$length;
.header{
@extend %flex-row-spb;
h6{
@include fontStyle(14,19,500,#666,left)
}
p{
@include fontStyle(12,16,500,#999,left)
}
}
.comment-box{
margin-top:15*$length;
@include fontStyle(14,24,500,#333,left);
height:auto;
}
.footer{
margin:12*$length 0;
@extend %flex-row-spb;
h6{
@include fontStyle(12,16,500,#999,start)
}
p{
@include fontStyle(12,16,500,#999,start);
span{
margin-left:20*$length;
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
color:#00AAE6;
}
}
}
}
}
}
.comment-card2{
box-sizing:content-box;
padding:20*$length;
width:778*$length;
border-bottom:1px dashed #e5e5e5;
@extend %flex-row-spb;
align-items: flex-start;
border-radius: 4*$length;
background-color: #F4F8FA;
.comment-card2__l{
width:48*$length;
}
.comment-card2__r{
width:714*$length;
.header{
@extend %flex-row-spb;
h6{
@include fontStyle(14,19,500,#666,left)
}
p{
@include fontStyle(12,16,500,#999,left)
}
}
.comment-box{
margin-top:15*$length;
@include fontStyle(14,24,500,#333,left);
height:auto;
}
.footer{
margin:12*$length 0;
@extend %flex-row-spb;
h6{
@include fontStyle(12,16,500,#999,start)
}
p{
@include fontStyle(12,16,500,#999,start);
span{
margin-left:20*$length;
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
color:#00AAE6;
}
}
}
}
}
}
.comment-card3{
margin-left:-16*$length;
box-sizing:content-box;
padding:10*$length 0 10*$length 16*$length;
width:714*$length;
border-bottom:1px dashed #e5e5e5;
border-left:1px solid #E5E5E5;
@extend %flex-row-spb;
align-items: flex-start;
.comment-card3__l{
width:48*$length;
}
.comment-card3__r{
width:650*$length;
.header{
@extend %flex-row-spb;
h6{
@include fontStyle(14,19,500,#666,left)
}
p{
@include fontStyle(12,16,500,#999,left)
}
}
.comment-box{
margin-top:15*$length;
@include fontStyle(14,24,500,#333,left);
height:auto;
}
.footer{
margin:12*$length 0;
@extend %flex-row-spb;
h6{
@include fontStyle(12,16,500,#999,start)
}
p{
@include fontStyle(12,16,500,#999,start);
span{
margin-left:20*$length;
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
color:#00AAE6;
}
}
}
}
}
}
}
</style>
components/pc/pagination.vue 0 → 100644
<template>
<div class="pagination-container__wrap">
<div class="pagination-container">
<p class="left-arrow" @click="clickToGetPrevPage" v-if="currentPage>1">
<yun-icon name="left_arrow" size="12px"></yun-icon>
</p>
<p class="number-box" v-if="centerFirstPage>=2" @click="clickToChangePage(1)">1</p>
<p class="number-box" v-if="centerFirstPage>2" @click="clickToGetPrevGroup">...</p>
<p @click="clickToChangePage(value)" :class="(centerFirstPage+index)===currentPage?'number-box--active':'number-box'" v-for="value,index in changeCenterPage" >{{value}}</p>
<p class="number-box" v-if="centerFirstPage+6<pages" @click="clickToGetNextGroup">...</p>
<p class="number-box" v-if="centerFirstPage+6<=pages" @click="clickToChangePage(pages)">{{pages}}</p>
<p class="right-arrow" @click="clickToGetNextPage" v-if="currentPage<pages">
<yun-icon name="left_arrow" size="12px"></yun-icon>
</p>
</div>
</div>
</template>
<script>
export default {
name:'pagination',
data(){
return {
pages:13,
currentPage:2,
centerFirstPage:1,
}
},
computed:{
changeCenterPage(){
//正常6个
let {pages,centerFirstPage} = this;
if(pages - centerFirstPage>=6){
return [centerFirstPage,centerFirstPage+1,centerFirstPage+2,centerFirstPage+3,centerFirstPage+4,centerFirstPage+5]
}else{
if(centerFirstPage>0){
let arr = [];
for (let i = 0; i < pages - centerFirstPage+1; i++) {
arr.push(centerFirstPage+i)
}
return arr
}
}
}
},
mounted(){
},
methods:{
// 跳到下一页
clickToGetNextPage(){
let {pages,centerFirstPage,currentPage} = this;
if(pages - centerFirstPage>=6){
this.currentPage = currentPage + 1;
this.centerFirstPage = centerFirstPage +1;
}else if(currentPage <pages){
this.currentPage = currentPage + 1;
}
},
//跳到前一页
clickToGetPrevPage(){
let {centerFirstPage,currentPage} = this;
if(centerFirstPage>1){
this.currentPage = currentPage - 1;
this.centerFirstPage = centerFirstPage -1;
}
else if(currentPage>1){
this.currentPage = currentPage - 1;
}
},
//点击前面的省略号
clickToGetPrevGroup(){
let {centerFirstPage,currentPage} = this;
if(centerFirstPage>7){
this.currentPage = currentPage - 6;
this.centerFirstPage = centerFirstPage -6;
}
else if(centerFirstPage<=7){
this.currentPage = 3;
this.centerFirstPage = 1;
}
},
//点击后面的省略号
clickToGetNextGroup(){
let {centerFirstPage,currentPage,pages} = this;
if(centerFirstPage+5+6<pages){
this.currentPage = currentPage +6;
this.centerFirstPage = centerFirstPage +6;
}
else if(centerFirstPage+5+6>=pages){
this.currentPage = pages-5;
this.centerFirstPage = pages-5;
}
},
//点击页数改变页数
clickToChangePage(currentPage){
let {pages} = this;
if(currentPage>=pages - 5){
this.centerFirstPage = pages - 5;
this.currentPage = currentPage;
}
else if(currentPage>=7){
this.centerFirstPage = currentPage;
this.currentPage = currentPage;
}else if(currentPage<7){
this.centerFirstPage = 1;
this.currentPage = currentPage;
}
}
}
}
</script>
<style lang="scss">
.pagination-container__wrap{
.pagination-container{
@extend %flex-row-center;
.number-box{
margin:0 4*$length;
width:40*$length;
height:36*$length;
border-radius:4*$length;
@include fontStyle(14,36,500,#666,center);
background-color: #fff;
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
background-color: #00AAE6;
border-radius:0;
color:#fff;
}
}
.number-box--active{
margin:0 4*$length;
width:40*$length;
height:36*$length;
background-color: #00AAE6;
border-radius:0;
@include fontStyle(14,36,500,#fff,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
background-color: #00AAE6;
border-radius:0;
color:#fff;
}
}
.left-arrow{
margin:0 4*$length;
width:40*$length;
height:36*$length;
border-radius:4*$length;
background-color: #fff;
@extend %animate-transition;
@extend %cursorPointer;
@extend %inlineBlockV;
transform: rotate(180deg);
&:hover{
background-color: #00AAE6;
border-radius:0;
color:#fff;
}
}
.right-arrow{
margin:0 4*$length;
width:40*$length;
height:36*$length;
border-radius:4*$length;
background-color: #fff;
@extend %animate-transition;
@extend %cursorPointer;
@extend %inlineBlockV;
&:hover{
background-color: #00AAE6;
border-radius:0;
color:#fff;
}
}
}
}
</style>
components/pc/projectCard.vue
......@@ -139,7 +139,7 @@
.project-card__body{
margin-top: 15*$length;
@include fontStyle(14,19,500,#666,left);
@include fontStyle(14,24,500,#666,left);
height:auto;
> span{
color:#00AAE6;
......@@ -200,6 +200,7 @@
margin-left:12*$length;
img{
max-width:280*$length;
border-radius:4*$length;
height:auto;
@extend %animate-transition;
}
......
nuxt.config.js
......@@ -33,6 +33,7 @@ module.exports = {
{src:'~/plugins/messageBox.js',ssr:false},
{src:'~/plugins/message.js',ssr:false},
{src:'~/plugins/yunIcon.js',ssr:false},
{src:'~/plugins/yunAvatar.js',ssr:false},
{src:'~/plugins/yunInput.js',ssr:false}
],
/*
......
pages/index.vue
......@@ -5,6 +5,12 @@
<h1 class="title">
beyond-clouds-front
</h1>
<<<<<<< HEAD
<comment-card></comment-card>
<comment-card></comment-card>
<comment-card></comment-card>
<comment-card></comment-card>
=======
<project-card></project-card>
<answer-card></answer-card>
<my-answer></my-answer>
......@@ -12,6 +18,7 @@
<h2 class="subtitle" @click="showAlert">
beyond-clouds project
</h2>
>>>>>>> 977a273fde2a48e90ed7d1fd29c36cc7679722a5
</div>
</div>
</template>
......@@ -20,9 +27,16 @@
import Banner from '../components/pc/banner';
import ProjectCard from '../components/pc/projectCard';
<<<<<<< HEAD
import Pagination from '../components/pc/pagination';
import Avatar from '../components/common/avatar/avatar';
import CommentCard from '../components/pc/commentCard';
=======
import AnswerCard from '../components/pc/answerCard';
import MyAnswer from '../components/pc/myAnswer';
import TopicListCard from '../components/pc/topicListCard';
>>>>>>> 977a273fde2a48e90ed7d1fd29c36cc7679722a5
export default {
......@@ -32,7 +46,11 @@ export default {
}
},
components:{
<<<<<<< HEAD
Banner,ProjectCard,Pagination,Avatar,CommentCard
=======
Banner,ProjectCard,AnswerCard,MyAnswer,TopicListCard
>>>>>>> 977a273fde2a48e90ed7d1fd29c36cc7679722a5
},
methods:{
......@@ -71,7 +89,7 @@ export default {
margin: 0 auto;
min-height: 300vh;
display: flex;
background-color: #fff;
/*background-color: #fff;*/
justify-content: center;
align-items: center;
text-align: center;
......
plugins/yunAvatar.js 0 → 100644
import YunAvatar from '../components/common/avatar';
import Vue from 'vue';
Vue.use(YunAvatar)
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