Skip to content

B
beyond-clouds-front
Commit baf8fd41 by yanju
Options

'pages'

parent d819481b
Showing with 724 additions and 739 deletions
assets/common.scss
......@@ -133,3 +133,21 @@ $index5:500;
.fade-enter, .fade-leave-to {
opacity: 0;
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all .5s;
}
.fade-transform-enter {
opacity: 0;
transform: translateX(-30px);
}
.fade-transform-leave-to {
opacity: 0;
transform: translateX(30px);
}
components/pc/pageHeader.vue
<template>
<div class="bc-layout-container-header">
<div class="nuxt-progress" v-if="progressShow"></div>
<div class="container-header">
<div class="header-center">
<div class="header-center-l">
......@@ -8,23 +9,55 @@
pluginspage="http://www.adobe.com/svg/viewer/install/" />
<ul>
<li>首页</li>
<li>项目</li>
<li>博客</li>
<li>问答</li>
<li>资讯</li>
<li>动态</li>
<li>话题</li>
<li>
<nuxt-link tag="span" to="/home" :style="{color:route==='home'||route==='index'||route===''?'#00AAE6':'#666'}">首页</nuxt-link>
<div class="abs-line" v-if="route==='home'||route==='index'||route===''"></div>
</li>
<li>
<nuxt-link tag="span" to="/project" :style="{color:route==='project'?'#00AAE6':'#666'}">项目</nuxt-link>
<div class="abs-line" v-if="route==='project'"></div>
</li>
<li>
<nuxt-link tag="span" to="/blog" :style="{color:route==='blog'?'#00AAE6':'#666'}">博客</nuxt-link>
<div class="abs-line" v-if="route==='blog'"></div>
</li>
<li>
<nuxt-link tag="span" to="/answer" :style="{color:route==='answer'?'#00AAE6':'#666'}">问答</nuxt-link>
<div class="abs-line" v-if="route==='answer'"></div>
</li>
<li>
<nuxt-link tag="span" to="/news" :style="{color:route==='news'?'#00AAE6':'#666'}">资讯</nuxt-link>
<div class="abs-line" v-if="route==='news'"></div>
</li>
<li>
<nuxt-link tag="span" to="/dynamic" :style="{color:route==='dynamic'?'#00AAE6':'#666'}">动态</nuxt-link>
<div class="abs-line" v-if="route==='dynamic'"></div>
</li>
<li>
<nuxt-link tag="span" to="/topic" :style="{color:route==='topic'?'#00AAE6':'#666'}">话题</nuxt-link>
<div class="abs-line" v-if="route==='topic'"></div>
</li>
</ul>
<yun-input iconName="search" width='212px' placeholder="请输入关键词" v-model="searchValue"></yun-input>
<yun-input @click.native="$router.push('/search')" iconName="search" width='212px' placeholder="请输入关键词" v-model="searchValue"></yun-input>
</div>
<div class="header-center-r" v-if="!user_id">
<div></div>
<p class="login-word">
<span>登录</span>
<span>
<nuxt-link tag="span" to="/users/login">登录</nuxt-link>
</span>
·
<span>注册</span>
<span>
<nuxt-link tag="span" to="/users/register">注册</nuxt-link>
</span>
</p>
</div>
......@@ -35,26 +68,51 @@
@mouseover.native="changeStateShowBox(3)" @mouseleave.native="changeStateHideBox(3)"></yun-icon>
<img class="user-photo" @mouseleave="changeStateHideBox(2)" :src="photo" alt="" @mouseover="changeStateShowBox(2)">
<transition name="fade">
<ul class="abs-box abs-box1" v-if="showHideBox1" @mouseleave="changeStateHideBox(1)">
<li>发布项目</li>
<li>写博客</li>
<li>发表动态</li>
<li>我要提问</li>
<li>资讯投稿</li>
<ul class="abs-box abs-box1" v-if="showHideBox1" @mouseover="changeStateShowBox(1)" @mouseleave="changeStateHideBox(1)">
<li>
<nuxt-link tag="span" to="/project/release">发布项目</nuxt-link>
</li>
<li>
<nuxt-link tag="span" to="/blog/release">写博客</nuxt-link>
</li>
<li>
<nuxt-link tag="span" to="/dynamic">发布动态</nuxt-link>
</li>
<li>
<nuxt-link tag="span" to="/answer/release">我要提问</nuxt-link>
</li>
<li>
<nuxt-link tag="span" to="/news/release">资讯投稿</nuxt-link>
</li>
</ul>
</transition>
<transition name="fade">
<ul class="abs-box abs-box2" v-if="showHideBox2" @mouseleave="changeStateHideBox(2)">
<li>我的主页</li>
<li>我的喜欢</li>
<li>我的收藏</li>
<li>我的关注</li>
<li>账号资料</li>
<ul class="abs-box abs-box2" v-if="showHideBox2" @mouseover="changeStateShowBox(2)" @mouseleave="changeStateHideBox(2)">
<li>
<nuxt-link tag="span" to="/personal-center/home">我的主页</nuxt-link>
</li>
<li>
<nuxt-link tag="span" to="/personal-center/like/support">我的喜欢</nuxt-link>
</li>
<li>
<nuxt-link tag="span" to="/personal-center/like/collect">我的收藏</nuxt-link>
</li>
<li>
<nuxt-link tag="span" to="/personal-center/person">我的关注</nuxt-link>
</li>
<li>
<nuxt-link tag="span" to="/personal-center/account">账号资料</nuxt-link>
</li>
<li>安全退出</li>
</ul>
</transition>
<transition name="fade">
<alerts-card class="abs-box3" v-if="showHideBox3" @mouseleave.native="changeStateHideBox(3)"></alerts-card>
<alerts-card class="abs-box3" v-if="showHideBox3" @mouseover.native="changeStateShowBox(3)" @mouseleave.native="changeStateHideBox(3)"></alerts-card>
</transition>
</div>
......@@ -84,6 +142,8 @@
hideBox1Time:null,
hideBox2Time:null,
hideBox3Time:null,
route:'home',
progressShow:false,
}
},
......@@ -91,10 +151,30 @@
AlertsCard
},
created(){
this.route = this.$route.name;
console.log(this.$route)
this.progressShow = true;
setTimeout(()=>{
this.progressShow = false;
},900)
},
mounted(){
},
watch:{
$route(route){
this.route = route.name;
this.progressShow = true;
setTimeout(()=>{
this.progressShow = false;
},900)
}
},
methods:{
changeStateHideBox(...arg){
if(arg.indexOf(1)===0){
......@@ -118,6 +198,10 @@
},
changeStateShowBox(...arg){
clearTimeout(this.hideBox1Time);
clearTimeout(this.hideBox2Time);
clearTimeout(this.hideBox3Time);
if(arg.indexOf(1)===0){
this.showHideBox1=true
this.showHideBox2=false
......@@ -140,6 +224,33 @@
<style lang="scss">
.bc-layout-container-header{
.nuxt-progress{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2*$length;
opacity: 1;
width:100%;
background-image: linear-gradient(to right ,rgba(0,170,230,.1) ,rgba(0,170,230,.8));
z-index: 999999;
animation: nuxt-progress .6s;
}
@keyframes nuxt-progress {
from {width:0;opacity: .1}
to {width: 100%;opacity: .8}
}
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width:100%;
transition: width 0.28s;
}
.container-header{
position:fixed;
......@@ -164,12 +275,31 @@
li{
display: inline-block;
margin-left:40*$length;
@include fontStyle(14,19,500,#666,start);
@include fontStyle(14,66,500,#666,start);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6;
position: relative;
span{
color:#666;
@extend %animate-transition;
&:hover{
color:#00AAE6;
}
}
.abs-line{
position: absolute;
bottom:0;
left:0;
right:0;
margin:0 auto;
width:16*$length;
height:4*$length;
border-radius:2*$length 2*$length 0 0;
background-color: #00AAE6;
}
}
}
......@@ -209,8 +339,12 @@
@include fontStyle(14,19,500,#666,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6;
span{
@extend %animate-transition;
color:#666;
&:hover{
color:#00AAE6;
}
}
}
}
......
components/pc/projectCard.vue
<template>
<div class="project-card__wrap">
<div class="project-card">
<div class="project-card" @click="$router.push('/detail')">
<div class="project-card__left">
<div class="project-card__header">
<p class="title">开源社区</p>
......
layouts/default.vue
<template>
<div class="bc-layout-container">
<page-header></page-header>
<transition name="fade-transform" mode="out-in">
<nuxt />
</transition>
<page-footer></page-footer>
</div>
</template>
......@@ -12,10 +14,16 @@
import PageFooter from '../components/pc/pageFooter';
export default {
name:'layouts',
data(){
return {
progressShow:false,
}
},
components:{
PageHeader,
PageFooter
}
},
}
</script>
......@@ -23,4 +31,6 @@
.bc-layout-container{
background-image: $bgImage;
}
</style>
pages/dynamic/index.vue
......@@ -3,7 +3,6 @@
<div class="dynamic-container__left">
<nav-wrap
width="106px"
height="480px"
:list="list"
></nav-wrap>
</div>
......@@ -100,6 +99,15 @@
}
},
created() {
this.$router.replace({
path: '/dynamic',
query: {
id: '推荐'
}
});
},
components:{
ReleaseCard,SocialContactCard,CardContainer,NavWrap
},
......
pages/index.vue
<template>
<<<<<<< HEAD
<home></home>
=======
<div class="container">
<div>
<h1 class="title">
</h1>
<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>
<h2 class="subtitle" @click="showAlert">
beyond-clouds project
</h2>
</div>
</div>
>>>>>>> 9a338ba1cd2b0453c4a745128dd0c7bf121e36d3
</template>
<script>
......@@ -37,14 +10,10 @@ import Home from './home';
export default {
data(){
return{
hello:'fasdfasf'
}
},
components:{
Home
}
}
</script>
......
pages/personal-center/account.vue
......@@ -3,126 +3,13 @@
<div class="account-container__l">
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</div>
<div class="account-container__r">
<card-container style="margin-top: 16px;padding-bottom: 32px" 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;padding-bottom: 32px" 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;padding-bottom: 32px" title="修改登录密码" label="忘记密码">
<div class="bind-account-item__wrap">
<input type="text" placeholder="请输入旧密码">
<input type="text" placeholder="请输入新密码">
</div>
<p class="submit-button">保存</p>
</card-container>
<transition name="fade-transform" mode="out-in">
<nuxt-child></nuxt-child>
</transition>
</div>
</div>
</template>
......@@ -140,12 +27,12 @@
list: [
{
label: '基本资料',
address: '/personal-center/info',
address: '/personal-center/account/info',
id: '基本资料'
},
{
label: '账号安全',
address: '/personal-center/account',
address: '/personal-center/account/setting',
id: '账号安全'
}
],
......@@ -161,35 +48,10 @@
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$account({
// type: 'info',
// account: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
created() {
this.$router.replace('/personal-center/account/info')
},
mounted(){
// this.$popupbox();
// account 使用方法
// this.$account({
// account:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
......@@ -209,78 +71,7 @@
overflow:hidden;
width:938*$length;
border-radius: 4*$length;
.bind-account-item__wrap{
width:726*$length;
margin:32*$length auto 0;
@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 0;
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
filter:brightness(110%);
}
}
}
......
pages/personal-center/account/setting.vue 0 → 100644
<template>
<div>
<card-container style="margin-top: 16px;padding-bottom: 32px" 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;padding-bottom: 32px" 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;padding-bottom: 32px" 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>
</template>
<script>
import CardContainer from '../../../components/pc/cardContainer';
export default {
name:'setting',
components:{
CardContainer
}
}
</script>
<style lang="scss" scoped>
.bind-account-item__wrap{
width:726*$length;
margin:32*$length auto 0;
@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 0;
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
filter:brightness(110%);
}
}
</style>
pages/personal-center/fans/index.vue → pages/personal-center/like.vue
......@@ -3,28 +3,20 @@
<div class="message-container__l">
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</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>
<transition name="fade-transform" mode="out-in">
<nuxt-child></nuxt-child>
</transition>
</div>
</div>
</template>
<script>
import FanCard from '../../../components/pc/fanCard';
import NavWrap from "../../../components/pc/nav/navWrap";
import NavWrap from "../../components/pc/nav/navWrap";
export default {
......@@ -32,61 +24,32 @@
return{
list: [
{
label: '我的关注',
address: '/personal-center/following',
label: '我的喜欢',
address: '/personal-center/like/support',
id: '我的消息'
},
{
label: '我的粉丝',
address: '/personal-center/fans',
id: '我的粉丝'
},
{
label: '黑名单',
address: '/personal-center/black-list',
id: '黑名单'
},
label: '我的收藏',
address: '/personal-center/like/collect',
id: '我的收藏'
}
],
selected:'项目'
}
},
components:{
FanCard,NavWrap
created() {
this.$router.replace('/personal-center/like/support')
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
components:{
NavWrap
mounted(){
// this.$popupbox();
// message 使用方法
},
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
......@@ -98,9 +61,10 @@
@extend %flex-row-spb;
align-items: flex-start;
.message-container__l{
margin-top:16*$length;
overflow:hidden;
width:302*$length;
margin-top:16*$length;
}
.message-container__r{
overflow:hidden;
......
pages/personal-center/collect/index.vue → pages/personal-center/like/collect.vue
<template>
<div class="message-container">
<div class="message-container__l">
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</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>
<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>
<p class="tab__right">
</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>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<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>
</template>
<script>
<script>
import ProjectCard from '../../../components/pc/projectCard';
import NavWrap from "../../../components/pc/nav/navWrap";
export default {
name:'collect',
components:{
ProjectCard
},
data(){
return{
list: [
{
label: '我的喜欢',
address: '/personal-center/like',
id: '我的消息'
},
{
label: '我的收藏',
address: '/personal-center/collect',
id: '我的收藏'
}
],
selected:'项目'
}
},
components:{
ProjectCard,NavWrap
},
}
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
</script>
mounted(){
// this.$popupbox();
<style lang="scss" scoped>
// message 使用方法
.container__tab{
box-sizing: border-box;
padding:18*$length 24*$length;
border-bottom:1px solid #EFEFEF;
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
@extend %flex-row-spb;
.tab__left{
@extend %flex-row-spb;
}
}
</script>
.left__item{
position:relative;
@extend %flex-column-spb;
margin-right: 24*$length;
<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{
margin-top:16*$length;
.abs{
position:absolute;
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);
.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/like/index.vue
......@@ -3,7 +3,6 @@
<div class="message-container__l">
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</div>
......@@ -85,36 +84,6 @@
ProjectCard,NavWrap
},
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>
......@@ -139,55 +108,7 @@
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
}
}
}
}
}
......
pages/personal-center/following/index.vue → pages/personal-center/like/support.vue
<template>
<div class="message-container">
<div class="message-container__l">
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</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 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>
</template>
<script>
<script>
import FanCard from '../../../components/pc/fanCard';
import NavWrap from "../../../components/pc/nav/navWrap";
import ProjectCard from '../../../components/pc/projectCard';
export default {
name:'collect',
components:{
ProjectCard
},
data(){
return{
list: [
{
label: '我的关注',
address: '/personal-center/following',
id: '我的消息'
},
{
label: '我的粉丝',
address: '/personal-center/fans',
id: '我的粉丝'
},
{
label: '黑名单',
address: '/personal-center/black-list',
id: '黑名单'
},
],
selected:'项目'
}
},
components:{
FanCard,NavWrap
}
},
</script>
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
<style lang="scss" scoped>
mounted(){
// this.$popupbox();
.container__tab{
box-sizing: border-box;
padding:18*$length 24*$length;
border-bottom:1px solid #EFEFEF;
// message 使用方法
@extend %flex-row-spb;
.tab__left{
@extend %flex-row-spb;
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
.left__item{
position:relative;
@extend %flex-column-spb;
margin-right: 24*$length;
}
}
</script>
.abs{
position:absolute;
<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{
margin-top:16*$length;
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);
.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
......@@ -3,7 +3,6 @@
<div class="message-container__l">
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</div>
......
pages/personal-center/black-list/index.vue → pages/personal-center/person.vue
......@@ -3,18 +3,14 @@
<div class="message-container__l">
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</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>
<transition name="fade-transform" mode="out-in">
<nuxt-child></nuxt-child>
</transition>
</div>
</div>
......@@ -23,8 +19,8 @@
<script>
import FanCard from '../../../components/pc/fanCard';
import NavWrap from "../../../components/pc/nav/navWrap";
import FanCard from '../../components/pc/fanCard';
import NavWrap from "../../components/pc/nav/navWrap";
export default {
......@@ -33,17 +29,17 @@
list: [
{
label: '我的关注',
address: '/personal-center/following',
address: '/personal-center/person/following',
id: '我的消息'
},
{
label: '我的粉丝',
address: '/personal-center/fans',
address: '/personal-center/person/fans',
id: '我的粉丝'
},
{
label: '黑名单',
address: '/personal-center/black-list',
address: '/personal-center/person/black-list',
id: '黑名单'
},
],
......@@ -57,36 +53,9 @@
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
created() {
this.$router.replace('/personal-center/person/following')
},
mounted(){
// this.$popupbox();
// message 使用方法
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
......
pages/personal-center/person/black-list.vue 0 → 100644
<template>
<div>
<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>
</template>
<script>
import FanCard from '../../../components/pc/fanCard';
export default {
data(){
return{
}
},
components:{
FanCard
},
}
</script>
<style lang="scss" scoped>
</style>
pages/personal-center/person/fans.vue 0 → 100644
<template>
<div>
<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>
</template>
<script>
import FanCard from '../../../components/pc/fanCard';
export default {
data(){
return{
}
},
components:{
FanCard
},
}
</script>
<style lang="scss" scoped>
</style>
pages/personal-center/person/following.vue 0 → 100644
<template>
<div>
<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>
</template>
<script>
import FanCard from '../../../components/pc/fanCard';
export default {
data(){
return{
}
},
components:{
FanCard
},
}
</script>
<style lang="scss" scoped>
</style>
vim.exe.stackdump
......@@ -13,7 +13,7 @@ Frame Function Args
00000000001 0010057F413 (00000000008, 001006642E0, 00000000000, 00000000000)
00000000001 001005747F6 (00000000000, 0005A6D26A9, 0001772867C, 00000010000)
00000000001 001005D381B (00000000001, 0006B7E1F10, 00180053BD3, 00100666620)
00600049080 001005E0BAA (00000000020, 001802DA8E0, 00180047B96, 00180046BA0)
00600049090 001005E0BAA (00000000020, 001802DA8E0, 00180047B96, 00180046BA0)
000FFFFCCB0 00180047C07 (00000000000, 00000000000, 00000000000, 00000000000)
00000000000 00180045873 (00000000000, 00000000000, 00000000000, 00000000000)
End of stack trace (more stack frames may be present)
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