Skip to content

B
beyond-clouds-front
Commit 4a61e227 by yanju
Options

pages

parent e1e862e9
Showing with 1625 additions and 0 deletions
layouts/only-header.vue 0 → 100644
<template>
<div class="bc-layout-container">
<page-header></page-header>
<nuxt />
</div>
</template>
<script>
import PageHeader from '../components/pc/pageHeader';
export default {
name:'onlyHeader',
components:{
PageHeader,
}
}
</script>
<style lang="scss">
.bc-layout-container{
background-image: $bgImage;
}
</style>
pages/detail.vue 0 → 100644
<template>
<div class="dynamic-container">
<div class="dynamic-container__left">
</div>
<div class="dynamic-container__center">
<release-card></release-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
</div>
<div class="dynamic-container__right">
<card-container title="话题热搜榜" label="换一换" more="更多">
</card-container>
<card-container style="margin-top:16px" title="推荐用户" label="换一换" more="更多">
</card-container>
</div>
</div>
</template>
<script>
import ReleaseCard from '../components/pc/releaseCard';
import SocialContactCard from '../components/pc/socialContactCard';
import CardContainer from '../components/pc/cardContainer';
export default {
components:{
ReleaseCard,SocialContactCard,CardContainer
},
}
</script>
<style lang="scss" scoped>
.dynamic-container{
width: $pageWidth;
margin:16*$length auto;
@extend %flex-row-spb;
align-items: flex-start;
.dynamic-container__left{
width:106*$length;
}
.dynamic-container__center{
width:816*$length;
}
.dynamic-container__right{
width:302*$length;
}
}
</style>
pages/dynamic/index.vue 0 → 100644
<template>
<div class="dynamic-container">
<div class="dynamic-container__left">
</div>
<div class="dynamic-container__center">
<release-card></release-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
</div>
<div class="dynamic-container__right">
<card-container title="话题热搜榜" label="换一换" more="更多">
</card-container>
<card-container style="margin-top:16px" title="推荐用户" label="换一换" more="更多">
</card-container>
</div>
</div>
</template>
<script>
import ReleaseCard from '../../components/pc/releaseCard';
import SocialContactCard from '../../components/pc/socialContactCard';
import CardContainer from '../../components/pc/cardContainer';
export default {
components:{
ReleaseCard,SocialContactCard,CardContainer
},
}
</script>
<style lang="scss" scoped>
.dynamic-container{
width: $pageWidth;
margin:16*$length auto;
@extend %flex-row-spb;
align-items: flex-start;
.dynamic-container__left{
width:106*$length;
}
.dynamic-container__center{
width:816*$length;
}
.dynamic-container__right{
width:302*$length;
}
}
</style>
pages/personal-center/account.vue 0 → 100644
<template>
<div class="account-container">
<div class="account-container__l">
<nav-card :labelList="labelList"></nav-card>
</div>
<div class="account-container__r">
<card-container style="margin-top: 16px" title="初次登录请提交登录密码" label="账号注册">
<div class="bind-account-item__wrap">
<div class="bind-account-item">
<div class="item__left">
<div class="avatar">
<yun-icon name="phone" color="#00AAE6"></yun-icon>
</div>
<div class="info">
<p>手机号</p>
<h6>13333338888</h6>
</div>
</div>
<div class="item__right">
更换
</div>
</div>
<div class="bind-account-item">
<div class="item__left">
<div class="avatar">
<yun-icon name="mail" color="#00AAE6"></yun-icon>
</div>
<div class="info">
<p>邮箱</p>
<h6>13333338888@163.com</h6>
</div>
</div>
<div class="item__right">
更换
</div>
</div>
</div>
<div class="bind-account-item__wrap">
<div class="bind-account-item">
<div class="item__left">
<div class="avatar">
<embed src="../../assets/svg/wechat.svg" width="20" height="16"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</div>
<div class="info">
<p>微信号</p>
</div>
</div>
<div class="item__right">
更换
</div>
</div>
<div class="bind-account-item">
<div class="item__left">
<div class="avatar">
<embed src="../../assets/svg/qq.svg" width="18" height="21"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</div>
<div class="info">
<p>qq号</p>
</div>
</div>
<div class="item__right">
更换
</div>
</div>
</div>
<div class="bind-account-item__wrap">
<div class="bind-account-item">
<div class="item__left">
<div class="avatar">
<embed src="../../assets/svg/dingding.svg" width="18" height="22"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</div>
<div class="info">
<p>钉钉</p>
</div>
</div>
<div class="item__right">
更换
</div>
</div>
</div>
</card-container>
<card-container style="margin-top: 16px" title="账号绑定" >
<div class="bind-account-item__wrap">
<input type="text" placeholder="请输入密码">
<input type="text" placeholder="请再次确认密码">
</div>
<p class="submit-button">保存</p>
</card-container>
<card-container style="margin-top: 16px" title="修改登录密码" label="忘记密码">
<div class="bind-account-item__wrap">
<input type="text" placeholder="请输入旧密码">
<input type="text" placeholder="请输入新密码">
</div>
<p class="submit-button">保存</p>
</card-container>
</div>
</div>
</template>
<script>
import NoticeCard from '../../components/pc/noticeCard';
import CardContainer from '../../components/pc/cardContainer';
export default {
data(){
return{
labelList: ['我的消息','私信'],
selected:'全部'
}
},
components:{
NoticeCard,CardContainer
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$account({
// type: 'info',
// account: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
mounted(){
// this.$popupbox();
// account 使用方法
// this.$account({
// account:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
<style lang="scss" scoped>
.account-container{
width: $pageWidth;
margin:0 auto;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: flex-start;
.account-container__l{
overflow:hidden;
width:302*$length;
}
.account-container__r{
overflow:hidden;
width:938*$length;
border-radius: 4*$length;
.bind-account-item__wrap{
width:726*$length;
margin:32*$length auto;
@extend %flex-row-spb;
& input{
width:334*$length;
height:48*$length;
border-radius: 4*$length;
padding:14*$length 16*$length;
@include fontStyle(14,48,500,#999,left);
background-color: #F4F8FA;
}
.bind-account-item{
width:334*$length;
height:100*$length;
background-color: #F4F8FA;
border-radius: 4*$length;
box-sizing: border-box;
padding:24*$length 30*$length;
@extend %flex-row-spb;
.item__left{
@extend %flex-row-spb;
.avatar{
width:52*$length;
height:52*$length;
background-color: #fff;
@extend %flex-row-center;
border-radius: 50%;
}
.info{
@extend %flex-column-center;
align-items: flex-start;
margin-left:20*$length;
p{
@include fontStyle(14,19,500,#666,left);
}
h6{
margin-top: 9*$length;
@include fontStyle(14,19,500,#666,left);
}
}
}
.item__right{
@extend %cursorPointer;
@include fontStyle(14,19,500,#55B946,left);
}
}
}
.submit-button{
width:148*$length;
height:48*$length;
border-radius: 4*$length;
background-color: #75D098;
@include fontStyle(14,48,500,#fff,center);
margin:32*$length auto;
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
filter:brightness(110%);
}
}
}
}
</style>
pages/personal-center/black-list/index.vue 0 → 100644
<template>
<div class="message-container">
<div class="message-container__l">
<nav-card :labelList="labelList"></nav-card>
</div>
<div class="message-container__r">
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card>
</div>
</div>
</template>
<script>
import FanCard from '../../../components/pc/fanCard';
export default {
data(){
return{
labelList: ['我的消息','私信'],
selected:'项目'
}
},
components:{
FanCard
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
mounted(){
// this.$popupbox();
// message 使用方法
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
<style lang="scss" scoped>
.message-container{
width: $pageWidth;
margin:0 auto;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: flex-start;
.message-container__l{
overflow:hidden;
width:302*$length;
}
.message-container__r{
overflow:hidden;
width:938*$length;
margin-top:16*$length;
border-radius: 4*$length;
background-color: #fff;
.container__tab{
box-sizing: border-box;
padding:18*$length 24*$length;
border-bottom:1px solid #EFEFEF;
@extend %flex-row-spb;
.tab__left{
@extend %flex-row-spb;
.left__item{
position:relative;
@extend %flex-column-spb;
margin-right: 24*$length;
.abs{
position:absolute;
}
.word{
@include fontStyle(14,19,500,#333,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
.line{
position:absolute;
top:32*$length;
margin:0 auto;
left:0;
right:0;
width:16*$length;
height:4*$length;
border-radius:2px 2px 0 0;
background-color: #00AAE6;
}
}
}
.tab__right{
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
}
}
}
</style>
pages/personal-center/collect/index.vue 0 → 100644
<template>
<div class="message-container">
<div class="message-container__l">
<nav-card :labelList="labelList"></nav-card>
</div>
<div class="message-container__r">
<div class="container__tab">
<div class="tab__left">
<div class="left__item">
<p class="abs"></p>
<p class="word">项目</p>
<p class="line" v-if="selected==='项目'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">博客</p>
<p class="line" v-if="selected==='博客'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">问答</p>
<p class="line" v-if="selected==='问答'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">资讯</p>
<p class="line" v-if="selected==='资讯'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">动态</p>
<p class="line" v-if="selected==='动态'"></p>
</div>
</div>
<p class="tab__right">
</p>
</div>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
</div>
</div>
</template>
<script>
import ProjectCard from '../../../components/pc/projectCard';
export default {
data(){
return{
labelList: ['我的消息','私信'],
selected:'项目'
}
},
components:{
ProjectCard
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
mounted(){
// this.$popupbox();
// message 使用方法
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
<style lang="scss" scoped>
.message-container{
width: $pageWidth;
margin:0 auto;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: flex-start;
.message-container__l{
overflow:hidden;
width:302*$length;
}
.message-container__r{
overflow:hidden;
width:938*$length;
margin-top:16*$length;
border-radius: 4*$length;
background-color: #fff;
.container__tab{
box-sizing: border-box;
padding:18*$length 24*$length;
border-bottom:1px solid #EFEFEF;
@extend %flex-row-spb;
.tab__left{
@extend %flex-row-spb;
.left__item{
position:relative;
@extend %flex-column-spb;
margin-right: 24*$length;
.abs{
position:absolute;
}
.word{
@include fontStyle(14,19,500,#333,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
.line{
position:absolute;
top:32*$length;
margin:0 auto;
left:0;
right:0;
width:16*$length;
height:4*$length;
border-radius:2px 2px 0 0;
background-color: #00AAE6;
}
}
}
.tab__right{
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
}
}
}
</style>
pages/personal-center/fans/index.vue 0 → 100644
<template>
<div class="message-container">
<div class="message-container__l">
<nav-card :labelList="labelList"></nav-card>
</div>
<div class="message-container__r">
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card>
</div>
</div>
</template>
<script>
import FanCard from '../../../components/pc/fanCard';
export default {
data(){
return{
labelList: ['我的消息','私信'],
selected:'项目'
}
},
components:{
FanCard
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
mounted(){
// this.$popupbox();
// message 使用方法
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
<style lang="scss" scoped>
.message-container{
width: $pageWidth;
margin:0 auto;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: flex-start;
.message-container__l{
overflow:hidden;
width:302*$length;
}
.message-container__r{
overflow:hidden;
width:938*$length;
margin-top:16*$length;
border-radius: 4*$length;
background-color: #fff;
.container__tab{
box-sizing: border-box;
padding:18*$length 24*$length;
border-bottom:1px solid #EFEFEF;
@extend %flex-row-spb;
.tab__left{
@extend %flex-row-spb;
.left__item{
position:relative;
@extend %flex-column-spb;
margin-right: 24*$length;
.abs{
position:absolute;
}
.word{
@include fontStyle(14,19,500,#333,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
.line{
position:absolute;
top:32*$length;
margin:0 auto;
left:0;
right:0;
width:16*$length;
height:4*$length;
border-radius:2px 2px 0 0;
background-color: #00AAE6;
}
}
}
.tab__right{
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
}
}
}
</style>
pages/personal-center/following/index.vue 0 → 100644
<template>
<div class="message-container">
<div class="message-container__l">
<nav-card :labelList="labelList"></nav-card>
</div>
<div class="message-container__r">
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card>
</div>
</div>
</template>
<script>
import FanCard from '../../../components/pc/fanCard';
export default {
data(){
return{
labelList: ['我的消息','私信'],
selected:'项目'
}
},
components:{
FanCard
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
mounted(){
// this.$popupbox();
// message 使用方法
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
<style lang="scss" scoped>
.message-container{
width: $pageWidth;
margin:0 auto;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: flex-start;
.message-container__l{
overflow:hidden;
width:302*$length;
}
.message-container__r{
overflow:hidden;
width:938*$length;
margin-top:16*$length;
border-radius: 4*$length;
background-color: #fff;
.container__tab{
box-sizing: border-box;
padding:18*$length 24*$length;
border-bottom:1px solid #EFEFEF;
@extend %flex-row-spb;
.tab__left{
@extend %flex-row-spb;
.left__item{
position:relative;
@extend %flex-column-spb;
margin-right: 24*$length;
.abs{
position:absolute;
}
.word{
@include fontStyle(14,19,500,#333,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
.line{
position:absolute;
top:32*$length;
margin:0 auto;
left:0;
right:0;
width:16*$length;
height:4*$length;
border-radius:2px 2px 0 0;
background-color: #00AAE6;
}
}
}
.tab__right{
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
}
}
}
</style>
pages/personal-center/home/index.vue 0 → 100644
<template>
<div class="home-container">
<div class="home-container__top">
<img src="https://s2.ax1x.com/2020/01/30/1lqW5j.png" alt="">
</div>
<div class="home-container__bottom">
<div class="home-container__bottom-center">
<div class="bottom-container__bg"></div>
<div class="bottom-container">
<div class="bottom-left">
<user-card></user-card>
<card-container style="margin-top: 16px" title="项目草稿箱">
</card-container>
<card-container style="margin-top: 16px" title="提问草稿箱">
</card-container>
<card-container style="margin-top: 16px" title="Ta的提问">
</card-container>
<card-container style="margin-top: 16px" title="博客草稿箱">
</card-container>
<card-container style="margin-top: 16px" title="博文归档">
</card-container>
<card-container style="margin-top: 16px" title="我创建的话题">
</card-container>
<card-container style="margin-top: 16px" title="我参与的话题">
</card-container>
<card-container style="margin-top: 16px" title="访问统计">
</card-container>
</div>
<div class="bottom-right">
<div class="bottom-right__tab">
<div class="tab__left">
<div class="left__item">
<p class="abs"></p>
<p class="word">全部</p>
<p class="line" v-if="selected==='全部'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">评论</p>
<p class="line" v-if="selected==='评论'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">喜欢</p>
<p class="line" v-if="selected==='评论'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">粉丝</p>
<p class="line" v-if="selected==='评论'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">公告</p>
<p class="line" v-if="selected==='评论'"></p>
</div>
</div>
<p class="tab__right">
</p>
</div>
<card-container style="margin-top: 16px" title="项目" label="换一换">
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
</card-container>
</div>
</div>
<page-footer></page-footer>
</div>
</div>
</div>
</template>
<script>
import UserCard from '../../../components/pc/userCard';
import ProjectCard from '../../../components/pc/projectCard';
import CardContainer from '../../../components/pc/cardContainer';
import PageFooter from '../../../components/pc/pageFooter';
export default {
layout: 'only-header',
data(){
return{
labelList: ['我的消息','私信'],
selected:'项目'
}
},
components:{
UserCard,ProjectCard,CardContainer,PageFooter
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
mounted(){
// this.$popupbox();
// message 使用方法
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
<style lang="scss" scoped>
html{
background-image: $bgImage;
}
.home-container{
align-items: flex-start;
.home-container__top{
width:100%;
height:auto;
z-index: 100;
position: relative;
img{
width:100%;
height:auto;
}
}
.home-container__bottom{
position:relative;
margin:0 auto;
.home-container__bottom-center{
position:absolute;
top: -60*$length;
left:0;
right:0;
background-image: $bgImage;
.bottom-container__bg{
background-image: $bgImage;
position:absolute;
top: 60*$length;
left:0;
right:0;
z-index: -1;
}
.bottom-container{
position:relative;
z-index: 200;
padding-bottom: 32*$length;
width: $pageWidth;
margin:0 auto;
@extend %flex-row-spb;
align-items: flex-start;
.bottom-left{
width:302*$length;
}
.bottom-right{
width:938*$length;
.bottom-right__tab{
box-sizing: border-box;
height:62*$length;
padding:18*$length 24*$length;
border-bottom:1px solid #EFEFEF;
@extend %flex-row-spb;
.tab__left{
@extend %flex-row-spb;
.left__item{
position:relative;
@extend %flex-column-spb;
margin-right: 24*$length;
.abs{
position:absolute;
}
.word{
@include fontStyle(14,19,500,rgba(255,255,255,.6),center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#fff
}
}
.line{
position:absolute;
top:32*$length;
margin:0 auto;
left:0;
right:0;
width:16*$length;
height:4*$length;
border-radius:2px 2px 0 0;
background-color: #00AAE6;
}
}
}
.tab__right{
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
}
}
}
}
}
}
</style>
pages/personal-center/like/index.vue 0 → 100644
<template>
<div class="message-container">
<div class="message-container__l">
<nav-card :labelList="labelList"></nav-card>
</div>
<div class="message-container__r">
<div class="container__tab">
<div class="tab__left">
<div class="left__item">
<p class="abs"></p>
<p class="word">项目</p>
<p class="line" v-if="selected==='项目'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">博客</p>
<p class="line" v-if="selected==='博客'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">问答</p>
<p class="line" v-if="selected==='问答'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">资讯</p>
<p class="line" v-if="selected==='资讯'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">动态</p>
<p class="line" v-if="selected==='动态'"></p>
</div>
</div>
<p class="tab__right">
</p>
</div>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
</div>
</div>
</template>
<script>
import ProjectCard from '../../../components/pc/projectCard';
export default {
data(){
return{
labelList: ['我的消息','私信'],
selected:'项目'
}
},
components:{
ProjectCard
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
mounted(){
// this.$popupbox();
// message 使用方法
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
<style lang="scss" scoped>
.message-container{
width: $pageWidth;
margin:0 auto;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: flex-start;
.message-container__l{
overflow:hidden;
width:302*$length;
}
.message-container__r{
overflow:hidden;
width:938*$length;
margin-top:16*$length;
border-radius: 4*$length;
background-color: #fff;
.container__tab{
box-sizing: border-box;
padding:18*$length 24*$length;
border-bottom:1px solid #EFEFEF;
@extend %flex-row-spb;
.tab__left{
@extend %flex-row-spb;
.left__item{
position:relative;
@extend %flex-column-spb;
margin-right: 24*$length;
.abs{
position:absolute;
}
.word{
@include fontStyle(14,19,500,#333,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
.line{
position:absolute;
top:32*$length;
margin:0 auto;
left:0;
right:0;
width:16*$length;
height:4*$length;
border-radius:2px 2px 0 0;
background-color: #00AAE6;
}
}
}
.tab__right{
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
}
}
}
</style>
pages/personal-center/message.vue 0 → 100644
<template>
<div class="message-container">
<div class="message-container__l">
<nav-card :labelList="labelList"></nav-card>
</div>
<div class="message-container__r">
<div class="container__tab">
<div class="tab__left">
<div class="left__item">
<p class="abs"></p>
<p class="word">全部</p>
<p class="line" v-if="selected==='全部'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">评论</p>
<p class="line" v-if="selected==='评论'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">喜欢</p>
<p class="line" v-if="selected==='评论'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">粉丝</p>
<p class="line" v-if="selected==='评论'"></p>
</div>
<div class="left__item">
<p class="abs"></p>
<p class="word">公告</p>
<p class="line" v-if="selected==='评论'"></p>
</div>
</div>
<p class="tab__right">
全部标记为已读
</p>
</div>
<notice-card></notice-card>
<notice-card></notice-card>
<notice-card></notice-card>
<notice-card></notice-card>
<notice-card></notice-card>
<notice-card></notice-card>
</div>
</div>
</template>
<script>
import NoticeCard from '../../components/pc/noticeCard';
export default {
data(){
return{
labelList: ['我的消息','私信'],
selected:'全部'
}
},
components:{
NoticeCard
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
mounted(){
// this.$popupbox();
// message 使用方法
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
<style lang="scss" scoped>
.message-container{
width: $pageWidth;
margin:0 auto;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: flex-start;
.message-container__l{
overflow:hidden;
width:302*$length;
}
.message-container__r{
overflow:hidden;
width:938*$length;
margin-top:16*$length;
border-radius: 4*$length;
background-color: #fff;
.container__tab{
box-sizing: border-box;
padding:18*$length 24*$length;
border-bottom:1px solid #EFEFEF;
@extend %flex-row-spb;
.tab__left{
@extend %flex-row-spb;
.left__item{
position:relative;
@extend %flex-column-spb;
margin-right: 24*$length;
.abs{
position:absolute;
}
.word{
@include fontStyle(14,19,500,#333,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
.line{
position:absolute;
top:32*$length;
margin:0 auto;
left:0;
right:0;
width:16*$length;
height:4*$length;
border-radius:2px 2px 0 0;
background-color: #00AAE6;
}
}
}
.tab__right{
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
}
}
}
</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