Skip to content

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

pages

parent e1e862e9
Showing with 2030 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/info.vue 0 → 100644
<template>
<div class="info-container">
<div class="info-container__l">
<nav-card :labelList="labelList"></nav-card>
</div>
<div class="info-container__r">
<card-container style="margin-top: 16px" title="个人信息">
<div class="info-account-item__wrap">
<yun-avatar size="90px" name="昵称"> </yun-avatar>
<p class="change-button">修改头像</p>
<input type="text" class="input1">
</div>
<div class="info-account-item__wrap">
<div class="radio-box1">
<div class="input-radio">
<input id="man" type="radio" name="sex" />
<label for="man">男</label>
</div>
<div class="input-radio">
<input id="woman" type="radio" name="sex" value="0">
<label for="woman">女</label>
</div>
<div class="input-radio">
<input id="unknow" type="radio" name="sex" value="0">
<label for="unknow">保密</label>
</div>
</div>
<div class="select-box__wrap">
<div class="select-box">
<p>生日·年</p>
<h6>
<yun-icon name="down_arrow" size="8px" color="#999"></yun-icon>
</h6>
</div>
<div class="select-box">
<p>月</p>
<h6>
<yun-icon name="down_arrow" size="8px" color="#999"></yun-icon>
</h6> </div>
<div class="select-box">
<p>日</p>
<h6>
<yun-icon name="down_arrow" size="8px" color="#999"></yun-icon>
</h6> </div>
</div>
</div>
<div class="info-account-item__wrap">
<input type="text" class="input2" placeholder="请输入个人签名">
</div>
<p class="submit-button">保存</p>
</card-container>
<card-container style="margin-top: 16px" title="联系方式" >
<div class="info-account-item__wrap">
<input type="text" class="input1" placeholder="微信号">
<div class="radio-box2">
<div class="input-radio">
<input id="everyone-wechat" type="radio" name="wechat" />
<label for="everyone-wechat">所有人可见</label>
</div>
<div class="input-radio">
<input id="fans-wechat" type="radio" name="wechat" value="0">
<label for="fans-wechat">粉丝可见</label>
</div>
<div class="input-radio">
<input id="watch-wechat" type="radio" name="wechat" value="0">
<label for="watch-wechat">我的关注可见</label>
</div>
<div class="input-radio">
<input id="unknow-wechat" type="radio" name="wechat" value="0">
<label for="unknow-wechat">保密</label>
</div>
</div>
</div>
<div class="info-account-item__wrap">
<input type="text" class="input1" placeholder="QQ号">
<div class="radio-box2">
<div class="input-radio">
<input id="everyone-qq" type="radio" name="qq" />
<label for="everyone-qq">所有人可见</label>
</div>
<div class="input-radio">
<input id="fans-qq" type="radio" name="qq" value="0">
<label for="fans-qq">粉丝可见</label>
</div>
<div class="input-radio">
<input id="watch-qq" type="radio" name="qq" value="0">
<label for="watch-qq">我的关注可见</label>
</div>
<div class="input-radio">
<input id="unknow-qq" type="radio" name="qq" value="0">
<label for="unknow-qq">保密</label>
</div>
</div>
</div>
<div class="info-account-item__wrap">
<input type="text" class="input1" placeholder="手机号">
<div class="radio-box2">
<div class="input-radio">
<input id="everyone-phone" type="radio" name="phone" />
<label for="everyone-phone">所有人可见</label>
</div>
<div class="input-radio">
<input id="fans-phone" type="radio" name="phone" value="0">
<label for="fans-phone">粉丝可见</label>
</div>
<div class="input-radio">
<input id="watch-phone" type="radio" name="phone" value="0">
<label for="watch-phone">我的关注可见</label>
</div>
<div class="input-radio">
<input id="unknow-phone" type="radio" name="phone" value="0">
<label for="unknow-phone">保密</label>
</div>
</div>
</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(){
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
});
}
},
mounted(){
}
}
</script>
<style lang="scss" scoped>
.info-container{
width: $pageWidth;
margin:0 auto;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: flex-start;
.info-container__l{
overflow:hidden;
width:302*$length;
}
.info-container__r{
overflow:hidden;
width:938*$length;
border-radius: 4*$length;
.info-account-item__wrap{
width:726*$length;
margin:32*$length auto;
@extend %flex-row-spb;
justify-content: flex-start;
.change-button{
margin-left: 16*$length;
margin-right: 156*$length;
@include fontStyle(14,19,500,#999,left);
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
color:#75D098;
}
}
.input1{
width:302*$length;
height:48*$length;
border-radius: 4*$length;
padding:14*$length 16*$length;
@include fontStyle(14,48,500,#999,left);
background-color: #F4F8FA;
}
.input2{
width:726*$length;
height:48*$length;
border-radius: 4*$length;
padding:14*$length 16*$length;
@include fontStyle(14,48,500,#999,left);
background-color: #F4F8FA;
}
.select-box__wrap{
margin-left:130*$length;
width:407*$length;
@extend %flex-row-spb;
.select-box{
width:125*$length;
height:48*$length;
border-radius:4*$length;
background-color: #F4F8FA;
box-sizing: border-box;
padding:14*$length 16*$length;
@extend %flex-row-spb;
p{
@include fontStyle(14,19,500,#333,start);
}
h6{
@extend %flex-row-center;
transform:rotate(0);
@extend %animate-transition;
&:hover{
transform:rotate(180deg);
}
}
}
}
.radio-box1{
width:188*$length;
@extend %flex-row-spb;
.input-radio {
margin-right:30*$length;
white-space: nowrap;
input[type="radio"] {
// 将原生单选框透明
opacity: 0;
// 紧接在单选框后面的标签，用于显示文字并作为伪元素的载体
+ label {
position: relative;
cursor: pointer;
@include fontStyle(14,19,500,#666,left);
// 下面使用伪元素模拟单选框
// 圆形外边线
&::before {
content: '';
position: absolute;
left: -18px;
top:3px;
border-radius: 50%;
background-color: #F4F5F5;
width: 12*$length;
height: 12*$length;
border:2px solid #F0F0F0;
transition: .1s;
}
}
&:checked {
+ label {
&::before {
width: 6*$length;
height: 6*$length;
border: 4px solid #75D098;
}
}
}
&:hover {
+ label::before {
border-color: #75D09833;
}
}
&:focus {
+ label::before {
box-shadow: 0 0 6px #75D09833;
}
}
}
}
}
.radio-box2{
margin-left:16*$length;
width:424*$length;
@extend %flex-row-spb;
.input-radio {
margin-right:30*$length;
white-space: nowrap;
input[type="radio"] {
// 将原生单选框透明
opacity: 0;
// 紧接在单选框后面的标签，用于显示文字并作为伪元素的载体
+ label {
position: relative;
cursor: pointer;
@include fontStyle(14,19,500,#666,left);
// 下面使用伪元素模拟单选框
// 圆形外边线
&::before {
content: '';
position: absolute;
left: -18px;
top:3px;
border-radius: 50%;
background-color: #F4F5F5;
width: 12*$length;
height: 12*$length;
border:2px solid #F0F0F0;
transition: .1s;
}
}
&:checked {
+ label {
&::before {
width: 6*$length;
height: 6*$length;
border: 4px solid #75D098;
}
}
}
&:hover {
+ label::before {
border-color: #75D09833;
}
}
&:focus {
+ label::before {
box-shadow: 0 0 6px #75D09833;
}
}
}
}
}
}
.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/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