Skip to content

B
beyond-clouds-front
Commit 8e100130 by 高浩杰
Options

完成消息通知列表

parent 1bdb9406
Showing with 612 additions and 13 deletions
components/pc/altersMessage/alertsCard.vue 0 → 100644
<template>
<div class="alerts-card__wrap">
<div class="alerts-card">
<div class="alerts-card__header">
<div class="header-title">消息通知</div>
<div class="header-read" @click="handleRead" v-if="flag !== 4">标记已读</div>
<div class="header-delete" @click="handleClick" v-if="flag === 4">清空</div>
</div>
<div class="alerts-card__content">
<span v-if="message.length === 0">暂无消息</span>
<alerts-content
v-for="(item, index) in message"
:info="item"
:number="index"
@read="handleReader(index)"
v-if="reload"
></alerts-content>
</div>
<div class="alerts-card__footer">
<p>查看全部</p>
</div>
</div>
</div>
</template>
<script>
import AlertsContent from './alertsContent';
export default {
name: "alertsCard",
components: {
AlertsContent
},
data(){
return{
message: [
{
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈',
isRead: false
},
{
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈',
isRead: false
},{
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈',
isRead: false
},{
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈',
isRead: false
},
{
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈',
isRead: false
},
{
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈',
isRead: false
},{
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈',
isRead: false
},{
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈',
isRead: false
}
],
messageRead: [],
isShow: true,
reload: true,
flag: 0
}
},
methods:{
// 找到已读消息的下标
handleReader(index){
console.log(this.messageRead);
this.messageRead.push(index);
this.messageRead = Array.from(new Set(this.messageRead));
console.log(this.messageRead);
},
// 将下标符合的消息中的属性修改未true
handleRead(){
if (this.flag >= 4){
this.flag = 0
}
this.message.forEach((item, index) => {
this.messageRead.forEach((item2, e) => {
if (index == item2){
item.isRead = true;
}
})
});
// 循环已读个数
let i = 0;
this.message.forEach((item, index) => {
if (item.isRead){
i++;
this.flag = i;
}
});
// 重新渲染子组件
this.reload = false;
this.$nextTick(() =>{
this.reload = true;
});
},
// 清空全部已读消息
handleClick(){
// 重置计数要删除的个数
this.flag = 0;
let i = 0;
for (i = this.message.length -1 ; i >= 0; i--){
if (this.message[i].isRead) {
this.message.splice(i, 1);
}
}
// 重新渲染子组件
this.reload = false;
this.$nextTick(() =>{
this.reload = true;
});
}
}
}
</script>
<style lang="scss" scoped>
.alerts-card__wrap{
.alerts-card{
width: 300*$length;
height: 274*$length;
background-color: #fff;
@include border-radius(4*$length);
@include box-shadow(0 5*$length 20*$length rgba(0,0,0,.08));
.alerts-card__header{
height: 56*$length;
line-height: 56*$length;
border-bottom: 1*$length solid #EFEFEF;
@extend %flex-row-spb;
.header-title{
margin-left: 16*$length;
@extend %cursorPointer;
@include fontStyle(16,22,500,#2F2F2F,left);
}
.header-read{
margin-right: 16*$length;
@extend %cursorPointer;
@include fontStyle(13,18,500,#999,left);
}
.header-delete{
margin-right: 16*$length;
@extend %cursorPointer;
@include fontStyle(13,18,500,#999,left);
}
}
.alerts-card__content{
height: 173*$length;
border-bottom: 1*$length solid #EFEFEF;
overflow: hidden;
>span{
@include fontStyle(12,17,500,#AAA,center);
line-height: 173*$length;
}
}
.alerts-card__footer{
@include fontStyle(12,17,500,#333,center);
height: 45*$length;
line-height: 45*$length;
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
color: #00AAE6;
}
}
}
}
</style>
components/pc/altersMessage/alertsContent.vue 0 → 100644
<template>
<div>
<p
@click="handleRead(number)"
:style="{color: fontColor}"
>{{info.content}}</p>
</div>
</template>
<script>
export default {
name: "alertsContent",
props: {
info: Object,
number: Number
},
data(){
return{
fontColor: '#333'
}
},
methods:{
handleRead(index){
console.log(index);
if (this.fontColor !== '#AAA'){
this.fontColor='#00AAE6';
this.$emit('read', index);
}
}
},
mounted() {
if (this.info.isRead){
this.fontColor = '#AAA';
}
}
}
</script>
<style lang="scss" scoped>
p{
@include fontStyle(12,17,500,#333,center);
height: 43*$length;
line-height: 43*$length;
margin: 0 16*$length;
border-bottom:1px dashed #EFEFEF;
@extend %animate-transition;
@extend %cursorPointer;
}
</style>
components/pc/answerCard.vue
...@@ -57,6 +57,7 @@ export default { ...@@ -57,6 +57,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.answer-card__wrap{ .answer-card__wrap{
background-color: #fff;
.answer-card{ .answer-card{
@extend %cursorPointer; @extend %cursorPointer;
width: 938*$length; width: 938*$length;
......
components/pc/cardContainer.vue 0 → 100644
<template>
<div class="card-container__warp" :style="{width: width, height: height}">
<div class="card-container__header">
<div class="header-left">
<div class="header-left__label"></div>
<span>{{title}}</span>
</div>
<div class="header-right">{{label}}</div>
</div>
<slot></slot>
<div class="card-container__footer">
<span>{{more}}</span>
</div>
</div>
</template>
<script>
export default {
name: "cardContainer",
props: {
title: String,
label: String,
more: String,
width: String,
height: String
}
}
</script>
<style lang="scss" scoped>
.card-container__warp{
@include border-radius(4*$length);
background-color: #fff;
.card-container__header{
height: 56*$length;
border-bottom: 1*$length solid #EFEFEF;
@extend %flex-row-spb;
.header-left{
@extend %flex-row-spb;
.header-left__label{
width: 4*$length;
height: 16*$length;
background-color: #00AAE6;
@include border-radius(2*$length);
}
> span{
margin-left: 12*$length;
@include fontStyle(16,22,500,#2F2F2F,left);
line-height: 18*$length;
}
}
.header-right{
margin-right: 24*$length;
@include fontStyle(13,18,500,#999,left);
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
color: #00AAE6;
}
}
}
.card-container__footer{
@include fontStyle(13,18,500,#999,center);
height: 70*$length;
line-height: 70*$length;
> span{
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color: #00AAE6;
}
}
}
}
</style>
components/pc/fanCard.vue
...@@ -2,17 +2,42 @@ ...@@ -2,17 +2,42 @@
<div class="fan-card__warp"> <div class="fan-card__warp">
<div class="fan-card"> <div class="fan-card">
<div class="fan-card__left"> <div class="fan-card__left">
<div class="left__head-portrait"></div> <div class="left__head-portrait">
<yun-avatar :src="src"></yun-avatar>
</div>
<div class="left__content"> <div class="left__content">
<div class="content-title"></div> <div class="content-name">
<div class="content-label"></div> <span>hhhh</span>
<div class="content-main"></div> <yun-icon name="sex_man" size="12px" color="#00AAE6" pb="6px"></yun-icon>
</div> </div>
<div class="content-label">
<div class="content-label__left">
<span>人气 <span class="label-number">123123</span> · 粉丝 <span class="label-number">231</span></span>
</div>
<div class="content-label__right">
<span>项目 <span class="label-number">23</span> · 博客 <span>6</span> · 回答 <span class="label-number">12</span> · 动态 <span class="label-number">12</span></span>
</div>
</div>
<p class="content-main">
哈哈哈哈哈哈我很低调
</p>
</div>
</div> </div>
<div class="fan-card__right"> <div class="fan-card__right" v-if="!isBlacklist">
<span>+关注</span> <span @click="handleChange" v-if="isFocus" style="color: #55B946">+关注</span>
<yun-icon name="down_arrow"></yun-icon> <span @click="handleChange" v-if="!isFocus" >互相关注</span>
<yun-icon class="icon-menu" name="down_arrow" size="8px" @mouseover.native="isShow=true"></yun-icon>
<transition name="fade">
<div class="fan-card__right-menu" v-if="isShow">
<ul @mouseover="isShow=true" @mouseleave="isShow=false">
<li>添加备注</li>
<li>移除粉丝</li>
<li>加入黑名单</li>
</ul>
</div>
</transition>
</div> </div>
<div class="fan-card__right2" v-if="isBlacklist"><span>移除</span></div>
</div> </div>
</div> </div>
</template> </template>
...@@ -22,11 +47,105 @@ export default { ...@@ -22,11 +47,105 @@ export default {
name: 'fanCard', name: 'fanCard',
data () { data () {
return { return {
src: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
isFocus: true,
isShow: false,
isBlacklist: true
}
},
methods:{
handleChange(){
this.isFocus = !this.isFocus;
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fan-card__warp{
background-color: #fff;
.fan-card{
width: 938*$length;
padding: 21*$length 24*$length;
box-sizing: border-box;
border-bottom: 1px dashed #EFEFEF;
@extend %cursorPointer;
@extend %flex-row-spb;
align-items: start;
.fan-card__left{
@extend %flex-row-spb;
justify-items: flex-start;
align-items: start;
.left__head-portrait{
height: 48*$length;
width: 48*$length;
margin-right: 10*$length;
> img{
width: 100%;
height: 100%;
@include border-radius(50%);
}
}
.left__content{
text-align: left;
.content-name{
margin-bottom: 7*$length;
> span{
@include fontStyle(14,14,500,#2F2F2F,left);
}
}
.content-label{
margin-bottom: 8*$length;
@include fontStyle(12,17,500,#999,left);
> div{
display: inline-block;
.label-number{
color: #00AAE6;
}
}
.content-label__left{
margin-right: 26*$length;
}
}
.content-main{
@include fontStyle(12,17,500,#999,left);
@extend %nowrap;
}
}
}
.fan-card__right{
position: relative;
width: 120*$length;
@extend %flex-row-spb;
>span{
@include fontStyle(14,20,500,#999,left);
}
.icon-menu{
vertical-align: top;
}
.fan-card__right-menu{
background-color: #fff;
position: absolute;
top: 30*$length;
right: 0;
width: 136*$length;
height: 138*$length;
box-shadow: 0 6*$length 20*$length rgba(0,0,0,.08);
@include border-radius(4*$length);
li{
@extend %animate-transition;
@include fontStyle(14,20,500,#666,center);
height: 46*$length;
line-height: 46*$length;
&:hover{
color:#00AAE6;
}
}
}
}
.fan-card__right2{
@include fontStyle(14,20,500,#999,left);
}
}
}
</style> </style>
components/pc/myAnswer.vue
...@@ -37,6 +37,7 @@ export default { ...@@ -37,6 +37,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.my-answer__warp{ .my-answer__warp{
background-color: #fff;
.my-answer{ .my-answer{
@extend %cursorPointer; @extend %cursorPointer;
text-align: left; text-align: left;
......
components/pc/nav/navCard.vue 0 → 100644
<template>
<div class="nav-card-wrap">
<div class="nav-card" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
<div class="nav-card__container">
<div
class="nav-card__label"
:style="{backgroundColor:bgColor}"
></div>
<p :style="{color:fontColor}">
<slot></slot>
</p>
<transition name="fade">
<div class="nav-card__menu" v-if="isShow===true" @mouseleave="handleMouseLeave">
<div class="arrow"></div>
<div class="label-list-box">
<nuxt-link
class="label-list"
v-for="(item, key) in labelList"
:key="`${item}${key}`" to="/">
{{item}}
</nuxt-link>
</div>
</div>
</transition>
</div>
</div>
</div>
</template>
<script>
export default {
name: "navCard",
props: {
labelList: Array
},
data(){
return{
fontColor: '#666',
bgColor: '#fff',
isShow: false,
labelList: ['文件管理','多媒体','文本编辑','应用软件','IM及时聊天']
}
},
methods:{
handleMouseLeave(){
this.isShow=false;
this.fontColor = '#666';
this.bgColor = '#fff';
},
handleMouseOver(){
this.isShow=true;
this.fontColor = '#00AAE6';
this.bgColor = '#00AAE6';
}
}
}
</script>
<style lang="scss" scoped>
.nav-card-wrap{
.nav-card{
padding-bottom: 18*$length;
.nav-card__container{
position: relative;
@extend %flex-row-spb;
justify-content: flex-start;
.nav-card__label{
width: 4*$length;
height: 16*$length;
border-radius: 0 2*$length 2*$length 0;
background-color: #00AAE6;
}
> p{
width: 100%;
@include fontStyle(14,18,500,#666,center);
@extend %cursorPointer;
@extend %animate-transition;
}
.nav-card__menu{
position: absolute;
z-index: 999;
left: 18*$length;
top: 25*$length;
background-color: #fff;
@include box-shadow(0 6*$length 20*$length rgba(0,0,0,.1));
.label-list-box{
box-sizing: border-box;
width: 308*$length;
height: 122*$length;
padding: 21*$length 23*$length 16*$length 20*$length;
@extend %flex-row-spb;
align-items: start;
flex-wrap: wrap;
.label-list{
display: inline-block;
width: 103*$length;
margin-left: 5*$length;
@extend %nowrap;
@include fontStyle(14,20,500,#666,left);
@extend %animate-transition;
&:hover{
color: #00AAE6;
}
}
}
.arrow{
position: absolute;
top: -15*$length;
left: 25*$length;
width: 0;
height: 0;
border: 8*$length solid;
border-color: transparent transparent #fff;
}
}
}
}
}
</style>
components/pc/nav/navWrap.vue 0 → 100644
<template>
<div class="nav-wrap">
<nav-card
v-for="(item,index) in list"
:key="item"
:labelList="labelList"
>{{item}}</nav-card>
</div>
</template>
<script>
import NavCard from './navCard';
export default {
name: "navWrap",
components: {
NavCard
},
props: {
},
data(){
return{
color: '',
labelList: ['asd','仍在你','前端'],
list: ['java','javascript','web']
}
}
}
</script>
<style lang="scss" scoped>
.nav-wrap{
background-color: #fff;
padding-top: 21*$length;
padding-bottom: 74*$length;
width: 106*$length;
@include border-radius(4*$length);
}
</style>
components/pc/projectCard.vue
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
<style lang="scss"> <style lang="scss">
.project-card__wrap{ .project-card__wrap{
background-color: #fff;
.project-card{ .project-card{
@extend %cursorPointer; @extend %cursorPointer;
box-sizing:border-box; box-sizing:border-box;
......
components/pc/topicListCard.vue
...@@ -37,6 +37,7 @@ export default { ...@@ -37,6 +37,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.topic-list-card__wrap{ .topic-list-card__wrap{
background-color: #fff;
.topic-list-card{ .topic-list-card{
width: 1044*$length; width: 1044*$length;
height: 35*$length; height: 35*$length;
...@@ -76,7 +77,6 @@ export default { ...@@ -76,7 +77,6 @@ export default {
display: inline-block; display: inline-block;
width: 22*$length; width: 22*$length;
height: 22*$length; height: 22*$length;
line-height: 22*$length;
margin-right: 5*$length; margin-right: 5*$length;
color: #fff; color: #fff;
background-color: #00AAE6; background-color: #00AAE6;
......
pages/index.vue
...@@ -10,6 +10,23 @@ ...@@ -10,6 +10,23 @@
<answer-card></answer-card> <answer-card></answer-card>
<my-answer></my-answer> <my-answer></my-answer>
<topic-list-card></topic-list-card> <topic-list-card></topic-list-card>
<fan-card></fan-card>
<card-container
title="最新回答"
label="换一换"
more="加载更多"
width="938px"
height="786px"
></card-container>
<card-container
title="热门项目"
label="更新"
more="更多项目"
width="302px"
height="446px"
></card-container>
<nav-wrap></nav-wrap>
<alerts-card></alerts-card>
<h2 class="subtitle" @click="showAlert"> <h2 class="subtitle" @click="showAlert">
beyond-clouds project beyond-clouds project
</h2> </h2>
...@@ -28,6 +45,10 @@ import CommentCard from '../components/pc/commentCard'; ...@@ -28,6 +45,10 @@ import CommentCard from '../components/pc/commentCard';
import AnswerCard from '../components/pc/answerCard'; import AnswerCard from '../components/pc/answerCard';
import MyAnswer from '../components/pc/myAnswer'; import MyAnswer from '../components/pc/myAnswer';
import TopicListCard from '../components/pc/topicListCard'; import TopicListCard from '../components/pc/topicListCard';
import FanCard from '../components/pc/fanCard';
import CardContainer from '../components/pc/cardContainer';
import NavWrap from '../components/pc/nav/navWrap';
import AlertsCard from '../components/pc/altersMessage/alertsCard';
export default { export default {
...@@ -37,8 +58,8 @@ export default { ...@@ -37,8 +58,8 @@ export default {
} }
}, },
components:{ components:{
Banner,ProjectCard,Pagination,Avatar,CommentCard,FanCard,AnswerCard,MyAnswer,TopicListCard,
Banner,ProjectCard,Pagination,Avatar,CommentCard CardContainer,NavWrap,AlertsCard
}, },
......
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