Skip to content

B
beyond-clouds-front
Commit 190b243a by yanju
Options

Merge branch 'master' into 'xue' 

# Conflicts:
#   pages/search.vue
parents 544f6d20 74473d68
Showing with 206 additions and 445 deletions
components/common/cropper/src/cropper.vue
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
} }
}, },
props:{ props:{
file:Blob, file:[Object ,Blob],
dialogVisible:Boolean, dialogVisible:Boolean,
cropperW:{ cropperW:{
type:Number, type:Number,
......
components/pc/alertsMessage/alertsCard.vue
...@@ -7,17 +7,17 @@ ...@@ -7,17 +7,17 @@
<div class="header-delete" @click="handleClick" v-if="flag === 4">清空</div> <div class="header-delete" @click="handleClick" v-if="flag === 4">清空</div>
</div> </div>
<div class="alerts-card__content"> <div class="alerts-card__content">
<span v-if="message.length === 0">暂无消息</span> <p v-if="message.length === 0">暂无消息</p>
<alerts-content <alerts-content
v-for="(item, index) in message" v-for="(item, index) in message"
:key="`${item}${index}`"
:info="item" :info="item"
:number="index" @read="handleReader"
@read="handleReader(index)"
v-if="reload" v-if="reload"
></alerts-content> ></alerts-content>
</div> </div>
<div class="alerts-card__footer"> <div class="alerts-card__footer">
<p>查看全部</p> <p>查看全部 （ {{ unread }} ） </p>
</div> </div>
</div> </div>
</div> </div>
...@@ -34,68 +34,64 @@ export default { ...@@ -34,68 +34,64 @@ export default {
return{ return{
message: [ message: [
{ {
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈', content: '啊啊啊啊啊啊1，谁关注了你，哈哈哈哈哈',
isRead: false isRead: false
}, },
{ {
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈', content: '啊啊啊啊啊啊2，谁关注了你，哈哈哈哈哈',
isRead: false isRead: false
},{ },{
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈', content: '啊啊啊啊啊啊3，谁关注了你，哈哈哈哈哈',
isRead: false isRead: false
},{ },{
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈', content: '啊啊啊啊啊啊4，谁关注了你，哈哈哈哈哈',
isRead: false isRead: false
}, },
{ {
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈', content: '啊啊啊啊啊啊5，谁关注了你，哈哈哈哈哈',
isRead: false isRead: false
}, },
{ {
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈', content: '啊啊啊啊啊啊6，谁关注了你，哈哈哈哈哈',
isRead: false isRead: false
},{ },{
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈', content: '啊啊啊啊啊啊7，谁关注了你，哈哈哈哈哈',
isRead: false isRead: false
},{ },{
content: '啊啊啊啊啊啊，谁关注了你，哈哈哈哈哈', content: '啊啊啊啊啊啊8，谁关注了你，哈哈哈哈哈',
isRead: false isRead: false
} }
], ],
messageRead: [], messageRead: new Set(),
isShow: true, isShow: true,
reload: true, reload: true,
flag: 0 flag: 0
} }
}, },
computed: {
unread: function () {
let flag = this.flag;
return this.message.length ? this.message.length - flag : 0
}
},
methods:{ methods:{
// 找到已读消息的下标 // 找到已读消息的下标
handleReader(index){ handleReader(index){
this.messageRead.add(index);
console.log(this.messageRead); console.log(this.messageRead);
this.messageRead.push(index); console.log(this.messageRead.size);
this.messageRead = Array.from(new Set(this.messageRead)); console.log(this.unread);
console.log(this.messageRead);
}, },
// 将下标符合的消息中的属性修改未true // 将下标符合的消息中的属性修改未true
handleRead(){ handleRead(){
if (this.flag >= 4){
this.flag = 0
}
this.message.forEach((item, index) => { this.message.forEach((item, index) => {
this.messageRead.forEach((item2, e) => { this.messageRead.forEach((item2, e) => {
if (index == item2){ if (item.content === item2){
item.isRead = true; item.isRead = true;
} }
}) })
}); });
// 循环已读个数 this.flag = this.messageRead.size; // 已读个数
let i = 0;
this.message.forEach((item, index) => {
if (item.isRead){
i++;
this.flag = i;
}
});
// 重新渲染子组件 // 重新渲染子组件
this.reload = false; this.reload = false;
this.$nextTick(() =>{ this.$nextTick(() =>{
...@@ -106,6 +102,7 @@ export default { ...@@ -106,6 +102,7 @@ export default {
handleClick(){ handleClick(){
// 重置计数要删除的个数 // 重置计数要删除的个数
this.flag = 0; this.flag = 0;
this.messageRead.clear();
let i = 0; let i = 0;
for (i = this.message.length -1 ; i >= 0; i--){ for (i = this.message.length -1 ; i >= 0; i--){
if (this.message[i].isRead) { if (this.message[i].isRead) {
...@@ -131,41 +128,36 @@ export default { ...@@ -131,41 +128,36 @@ export default {
@include border-radius(4*$length); @include border-radius(4*$length);
@include box-shadow(0 5*$length 20*$length rgba(0,0,0,.08)); @include box-shadow(0 5*$length 20*$length rgba(0,0,0,.08));
.alerts-card__header{ .alerts-card__header{
height: 56*$length;
line-height: 56*$length;
border-bottom: 1*$length solid #EFEFEF; border-bottom: 1*$length solid #EFEFEF;
@extend %flex-row-spb; @extend %flex-row-spb;
.header-title{ .header-title{
margin-left: 16*$length; margin-left: 16*$length;
@extend %cursorPointer; @extend %cursorPointer;
@include fontStyle(16,22,500,#2F2F2F,left); @include fontStyle(16,56,500,#2F2F2F,left);
} }
.header-read{ .header-read{
margin-right: 16*$length; margin-right: 16*$length;
@extend %cursorPointer; @extend %cursorPointer;
@include fontStyle(13,18,500,#999,left); @include fontStyle(13,56,500,#999,left);
} }
.header-delete{ .header-delete{
margin-right: 16*$length; margin-right: 16*$length;
@extend %cursorPointer; @extend %cursorPointer;
@include fontStyle(13,18,500,#999,left); @include fontStyle(13,56,500,#999,left);
} }
} }
.alerts-card__content{ .alerts-card__content{
height: 173*$length; height: 173*$length;
border-bottom: 1*$length solid #EFEFEF; border-bottom: 1*$length solid #EFEFEF;
overflow: hidden; overflow: hidden;
>span{ > p {
@include fontStyle(12,17,500,#AAA,center); @include fontStyle(12,173,500,#AAA,center);
line-height: 173*$length;
} }
} }
.alerts-card__footer{ .alerts-card__footer{
@include fontStyle(12,17,500,#333,center);
height: 45*$length;
line-height: 45*$length;
@extend %cursorPointer; @extend %cursorPointer;
@extend %animate-transition; @extend %animate-transition;
@include fontStyle(12,45,500,#333,center);
&:hover{ &:hover{
color: #00AAE6; color: #00AAE6;
} }
......
components/pc/alertsMessage/alertsContent.vue
<template> <template>
<div> <div>
<p <p
@click="handleRead(number)" @click="handleRead"
:style="{color: fontColor}" :style="{color: fontColor}"
>{{info.content}}</p> >{{info.content}}</p>
</div> </div>
...@@ -11,39 +11,39 @@ ...@@ -11,39 +11,39 @@
export default { export default {
name: "alertsContent", name: "alertsContent",
props: { props: {
info: Object, info: Object
number: Number
}, },
data(){ data(){
return{ return{
fontColor: '#333' fontColor: '#333'
} }
}, },
created() {
// 消息已经被读过
if (this.info.isRead){
this.fontColor = '#AAA';
}
},
methods:{ methods:{
handleRead(index){ handleRead(){ // 消息没有被读过
console.log(index);
if (this.fontColor !== '#AAA'){ if (this.fontColor !== '#AAA'){
this.fontColor='#00AAE6'; this.fontColor='#00AAE6';
this.$emit('read', index); this.$emit('read', this.info.content);
} }
} }
},
mounted() {
if (this.info.isRead){
this.fontColor = '#AAA';
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
p{ p{
@include fontStyle(12,17,500,#333,center);
height: 43*$length;
line-height: 43*$length;
margin: 0 16*$length; margin: 0 16*$length;
border-bottom:1px dashed #EFEFEF; border-bottom:1px dashed #EFEFEF;
@extend %animate-transition; @extend %animate-transition;
@extend %cursorPointer; @extend %cursorPointer;
@include fontStyle(12,43,500,#333,center);
&:hover{
color: #00AAE6 !important;
}
} }
</style> </style>
components/pc/answerCard.vue
...@@ -62,8 +62,6 @@ export default { ...@@ -62,8 +62,6 @@ export default {
.answer-card__wrap{ .answer-card__wrap{
background-color: #fff; background-color: #fff;
.answer-card{ .answer-card{
height: 132*$length;
@extend %cursorPointer;
box-sizing: border-box; box-sizing: border-box;
margin: 0 24*$length; margin: 0 24*$length;
padding: 24*$length 0; padding: 24*$length 0;
...@@ -71,7 +69,9 @@ export default { ...@@ -71,7 +69,9 @@ export default {
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
@extend %cursorPointer;
.answer-card__left{ .answer-card__left{
flex-shrink:0;
margin-top: 3*$length; margin-top: 3*$length;
width: 84*$length; width: 84*$length;
height: 84*$length; height: 84*$length;
...@@ -93,6 +93,7 @@ export default { ...@@ -93,6 +93,7 @@ export default {
} }
} }
.answer-card__left2{ .answer-card__left2{
flex-shrink:0;
margin-top: 3*$length; margin-top: 3*$length;
width: 84*$length; width: 84*$length;
height: 84*$length; height: 84*$length;
...@@ -116,6 +117,7 @@ export default { ...@@ -116,6 +117,7 @@ export default {
> .content{ > .content{
padding: 11*$length 0 15*$length 0; padding: 11*$length 0 15*$length 0;
@include fontStyle(14,20,500,#666,left); @include fontStyle(14,20,500,#666,left);
height: auto;
} }
.footer{ .footer{
line-height: 18*$length; line-height: 18*$length;
......
components/pc/banner.vue
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
default:true, default:true,
type: Boolean type: Boolean
}, },
currentImg:{ currentImg2:{
default:0, default:0,
type: Number type: Number
}, },
...@@ -67,16 +67,22 @@ ...@@ -67,16 +67,22 @@
data(){ data(){
return{ return{
imgSrc:'', imgSrc:'',
imgOpacity:1, imgOpacity:1,
opacityTime:500, opacityTime:500,
bannerTimer:null, bannerTimer:null,
card2ImgArr:[], card2ImgArr:[],
hideImgNum:0, hideImgNum:0,
currentImg:0,
showAllImg:false, showAllImg:false,
} }
}, },
watch:{
currentImg2(){
this.currentImg = this.currentImg2;
}
},
mounted(){ mounted(){
this.initBanner(); this.initBanner();
this.stateChangeCard2ImgArr(); this.stateChangeCard2ImgArr();
......
components/pc/fanCard.vue
...@@ -50,7 +50,7 @@ export default { ...@@ -50,7 +50,7 @@ export default {
src: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg', src: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
isFocus: true, isFocus: true,
isShow: false, isShow: false,
isBlacklist: true isBlacklist: false
} }
}, },
methods:{ methods:{
...@@ -65,7 +65,6 @@ export default { ...@@ -65,7 +65,6 @@ export default {
.fan-card__warp{ .fan-card__warp{
background-color: #fff; background-color: #fff;
.fan-card{ .fan-card{
width: 938*$length;
padding: 21*$length 24*$length; padding: 21*$length 24*$length;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px dashed #EFEFEF; border-bottom: 1px dashed #EFEFEF;
...@@ -80,11 +79,6 @@ export default { ...@@ -80,11 +79,6 @@ export default {
height: 48*$length; height: 48*$length;
width: 48*$length; width: 48*$length;
margin-right: 10*$length; margin-right: 10*$length;
> img{
width: 100%;
height: 100%;
@include border-radius(50%);
}
} }
.left__content{ .left__content{
text-align: left; text-align: left;
...@@ -109,13 +103,14 @@ export default { ...@@ -109,13 +103,14 @@ export default {
} }
.content-main{ .content-main{
@include fontStyle(12,17,500,#999,left); @include fontStyle(12,17,500,#999,left);
@extend %nowrap; height: auto;
} }
} }
} }
.fan-card__right{ .fan-card__right{
position: relative; position: relative;
width: 120*$length; width: 120*$length;
flex-shrink:0;
@extend %flex-row-spb; @extend %flex-row-spb;
>span{ >span{
@include fontStyle(14,20,500,#999,left); @include fontStyle(14,20,500,#999,left);
...@@ -144,6 +139,7 @@ export default { ...@@ -144,6 +139,7 @@ export default {
} }
} }
.fan-card__right2{ .fan-card__right2{
flex-shrink:0;
@include fontStyle(14,20,500,#999,left); @include fontStyle(14,20,500,#999,left);
} }
} }
......
components/pc/myAnswer.vue
...@@ -65,7 +65,7 @@ export default { ...@@ -65,7 +65,7 @@ export default {
} }
} }
.content-main{ .content-main{
width: 100%; width: 890*$length;
@include fontStyle(14,20,500,#333,left); @include fontStyle(14,20,500,#333,left);
@extend %nowrap; @extend %nowrap;
} }
......
components/pc/nav/navCard.vue
<template> <template>
<div class="nav-card-wrap"> <div class="nav-card__wrap">
<div class="nav-card" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave"> <div class="nav-card" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
<div class="nav-card__container"> <div class="nav-card__container">
<div <div
class="nav-card__label" class="nav-card__label"
:style="{backgroundColor: isBlue ? '#00AAE6' : '#fff'}" :style="{backgroundColor: isBlue ? '#00AAE6' : '#fff'}"
></div> ></div>
<nuxt-link tag="p" :to="{path:navAddress, query:{id:labelId}}" :style="{color: isBlue||fontColor ? '#00AAE6' : '#666'}"> <nuxt-link tag="p" :to="{path:navAddress, query:{id:labelId}}" :style="{color: isBlue || fontColor ? '#00AAE6' : '#666'}">
<slot></slot> <slot></slot>
</nuxt-link> </nuxt-link>
<div class="nav-card__menu" v-if="isShow===true && childList !== undefined" @mouseleave="handleMouseLeave"> <div class="nav-card__menu" v-if="isShow===true && childList !== undefined" >
<div class="arrow"></div> <div class="arrow"></div>
<div class="label-list-box"> <div class="label-list-box">
<nuxt-link <nuxt-link
class="label-list" class="label-list"
v-for="(item, key) in childList" v-for="(item, key) in childList"
:key="`${item}${key}`" :to="{path: item.address, query: {id: labelId, childId: item.childId}}"> :key="`${item}${key}`"
:to="{path: item.address, query: {id: labelId, childId: item.childId}}">
{{item.label}} {{item.label}}
</nuxt-link> </nuxt-link>
</div> </div>
...@@ -36,19 +37,15 @@ export default { ...@@ -36,19 +37,15 @@ export default {
data(){ data(){
return{ return{
fontColor: false, fontColor: false,
bgColor: '#fff',
isShow: false, isShow: false,
isBlue: false isBlue: false
} }
}, },
methods:{ created() {
handleMouseLeave(){ if (this.$route.query.id) {
this.isShow=false; this.isBlue = this.$route.query.id.indexOf(this.labelId) !== -1;
this.fontColor = false; } else {
}, this.isBlue = this.$route.path.indexOf(this.navAddress) !== -1;
handleMouseOver(){
this.isShow=true;
this.fontColor = true;
} }
}, },
watch:{ watch:{
...@@ -60,23 +57,21 @@ export default { ...@@ -60,23 +57,21 @@ export default {
} }
} }
}, },
created() { methods:{
console.log(this.$route.query.id); handleMouseLeave(){
if (this.$route.query.id) { this.isShow = false;
if (this.$route.query.id.indexOf(this.labelId) !== -1){ this.fontColor = false;
this.isBlue = true; },
} handleMouseOver(){
} else { this.isShow = true;
if (this.$route.path.indexOf(this.navAddress) !== -1){ this.fontColor = true;
this.isBlue = true;
}
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.nav-card-wrap{ .nav-card__wrap{
.nav-card{ .nav-card{
padding-bottom: 18*$length; padding-bottom: 18*$length;
.nav-card__container{ .nav-card__container{
......
components/pc/nav/navWrap.vue
...@@ -23,11 +23,6 @@ export default { ...@@ -23,11 +23,6 @@ export default {
list: Array, list: Array,
width: String, width: String,
height: String height: String
},
data() {
return {
}
} }
} }
</script> </script>
......
components/pc/pageFooter.vue
...@@ -13,25 +13,25 @@ ...@@ -13,25 +13,25 @@
</div> </div>
</div> </div>
<div class="footer-center-section1-center"> <div class="footer-center-section1-center">
<a href="">云顶书院官网</a> <a href="https://yundingshuyuan.com" target="_blank">云顶书院官网</a>
<a href="">代码托管平台官网</a> <a href="">代码托管平台官网</a>
</div> </div>
<div class="footer-center-section1-right"> <div class="footer-center-section1-right">
<div> <div>
<a href="">关于我们</a> <nuxt-link to="/web/about">关于我们</nuxt-link>
<a href="">加入我们</a> <a href="https://yundingshuyuan.com" target="_blank">加入我们</a>
</div> </div>
<div> <div>
<a href="">联系我们</a> <nuxt-link to="/web/contact">联系我们</nuxt-link>
<a href="">商务合作</a> <a href="">商务合作</a>
</div> </div>
<div> <div>
<a href="">版权声明</a> <nuxt-link to="/web/copyright">版权声明</nuxt-link>
<a href="">用户协议</a> <nuxt-link to="/web/agreement">用户协议</nuxt-link>
</div> </div>
<div> <div>
<a href="">投诉举报</a> <nuxt-link to="/web/report">投诉举报</nuxt-link>
<a href="">意见反馈</a> <nuxt-link to="/web/feedback">意见反馈</nuxt-link>
</div> </div>
</div> </div>
</div> </div>
......
components/pc/pageHeader.vue
...@@ -153,7 +153,6 @@ ...@@ -153,7 +153,6 @@
created(){ created(){
this.route = this.$route.name; this.route = this.$route.name;
console.log(this.$route)
this.progressShow = true; this.progressShow = true;
setTimeout(()=>{ setTimeout(()=>{
this.progressShow = false; this.progressShow = false;
......
components/pc/releaseCard.vue
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
showEmojiCard:false, showEmojiCard:false,
showTopicCard:false, showTopicCard:false,
showPhotoCard:false, showPhotoCard:false,
showVideoCard:true, showVideoCard:false,
lastPhoto:false, lastPhoto:false,
addFile:{}, addFile:{},
TopicValue:'', TopicValue:'',
......
components/pc/select/selectCard.vue
...@@ -24,11 +24,11 @@ ...@@ -24,11 +24,11 @@
</div> </div>
</transition> </transition>
</div> </div>
<button @click="handlePush">添加（{{result.length}}）</button> <button @click="handlePush">添加（{{result.size}}）</button>
</div> </div>
<div class="select-container__label-list"> <div class="select-container__label-list">
<label-wrap <label-wrap
v-for="(item, index) in result" v-for="(item, index) in Array.from(result)"
:info="item" :info="item"
:index="index" :index="index"
:key="`${index}${item}`" :key="`${index}${item}`"
...@@ -72,7 +72,7 @@ export default { ...@@ -72,7 +72,7 @@ export default {
isShow2: false, isShow2: false,
list: ['web', 'java', 'python'], list: ['web', 'java', 'python'],
searchList: [], searchList: [],
result: [], result: new Set(),
value: '' value: ''
} }
}, },
...@@ -85,6 +85,16 @@ export default { ...@@ -85,6 +85,16 @@ export default {
} }
}, },
}, },
watch: {
value: function (val) {
this.searchList = [];
this.list.forEach((item, index) => {
if (item.indexOf(val) >= 0) {
this.searchList.push(item)
}
});
}
},
methods: { methods: {
// 点击选中标签后 添加标签 // 点击选中标签后 添加标签
handleChange(e){ handleChange(e){
...@@ -97,16 +107,19 @@ export default { ...@@ -97,16 +107,19 @@ export default {
// 回车后，将搜索到的第一个标签选中 // 回车后，将搜索到的第一个标签选中
handleSearch(){ handleSearch(){
if (this.searchList.length) { if (this.searchList.length) {
this.result.push(this.searchList[0]) this.result.add(this.searchList[0]);
this.value = ''; this.value = '';
this.isShow = false; this.isShow = false;
this.isShow2 = false;
setTimeout(()=>{ setTimeout(()=>{
this.isShow = true this.isShow = true;
this.isShow2 = true;
}, 500) }, 500)
} }
}, },
// 点击确定
handlePush(){ handlePush(){
this.result.push(this.value); this.result.add(this.value);
this.isShow = false; this.isShow = false;
this.value = ''; this.value = '';
}, },
...@@ -116,21 +129,8 @@ export default { ...@@ -116,21 +129,8 @@ export default {
this.isShow2 = false; this.isShow2 = false;
}, },
handleShow(){ handleShow(){
console.log(this.isShow || this.isShow2);
this.isShow = true; this.isShow = true;
this.isShow2 = true; this.isShow2 = true;
console.log(this.isShow || this.isShow2);
}
},
watch: {
value: function (val) {
this.searchList = [];
this.list.forEach((item, index) => {
if (item.indexOf(val) >= 0) {
this.searchList.push(item)
}
});
console.log(this.searchList);
} }
} }
} }
......
components/pc/socialContactCard.vue
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<p class="pack-up" v-if="showBanner" @click="showBanner=false"> <p class="pack-up" v-if="showBanner" @click="showBanner=false">
收起 <yun-icon style="transform: rotate(180deg)" name="down_arrow" size="8px" pb="0px"></yun-icon> 收起 <yun-icon style="transform: rotate(180deg)" name="down_arrow" size="8px" pb="0px"></yun-icon>
</p> </p>
<banner v-if="showBanner" :currentImg="currentImg" style="padding-top: 16px" :autoPlay=false :bannerType=2 :imgArr="imgArr"></banner> <banner v-if="showBanner" :currentImg2="currentImg" style="padding-top: 16px" :autoPlay=false :bannerType=2 :imgArr="imgArr"></banner>
<div class="card-footer"> <div class="card-footer">
...@@ -106,18 +106,17 @@ ...@@ -106,18 +106,17 @@
time:'3小时前', time:'3小时前',
likeNum:10, likeNum:10,
imgArr:[ imgArr:[
'https://wx3.sinaimg.cn/mw690/704b3eeegy1gayf4rjomkj20u04u7qua.jpg', 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file',
// 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file', 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
// 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file', 'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
// 'https://s2.ax1x.com/2020/01/13/lHpvY4.png', 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
// 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg', 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file',
// 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file', 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
// 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file', 'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
// 'https://s2.ax1x.com/2020/01/13/lHpvY4.png', 'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
// 'https://s2.ax1x.com/2020/01/13/lHpvY4.png', 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
// 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file', 'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
// 'https://s2.ax1x.com/2020/01/13/lHpvY4.png', 'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
// 'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
], ],
showBanner:false, showBanner:false,
currentImg:0, currentImg:0,
......
components/pc/topicCard.vue
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<span class="right-title"># Java #</span> <span class="right-title"># Java #</span>
<span class="right-label" @click="handleFocus" :style="{color: fontColor}">{{focus}}</span> <span class="right-label" @click="handleFocus" :style="{color: fontColor}">{{focus}}</span>
</div> </div>
<p class="right-content">java是一门好的编程语言</p> <p class="right-content">java是一门好的编程语言编程语言</p>
<p class="right-footer">56万讨论 · 1.45亿阅读</p> <p class="right-footer">56万讨论 · 1.45亿阅读</p>
</div> </div>
</div> </div>
...@@ -54,14 +54,17 @@ export default { ...@@ -54,14 +54,17 @@ export default {
border-bottom:1px dashed #EFEFEF; border-bottom:1px dashed #EFEFEF;
@extend %flex-row-spb; @extend %flex-row-spb;
justify-content: flex-start; justify-content: flex-start;
align-items: start;
.topic-card-left{ .topic-card-left{
width: 100*$length; width: 100*$length;
height: 100*$length; height: 100*$length;
@extend %flex-row-spb; @extend %flex-row-spb;
flex-wrap: wrap; flex-wrap: wrap;
flex-shrink:0;
img{ img{
width: 100%; max-width: 100*$length;
height: 100%; max-height: 100*$length;
object-fit: contain;
} }
div{ div{
display: inline-block; display: inline-block;
...@@ -84,6 +87,7 @@ export default { ...@@ -84,6 +87,7 @@ export default {
} }
} }
.topic-card-right{ .topic-card-right{
margin-top: 20*$length;
margin-left: 16*$length; margin-left: 16*$length;
text-align: left; text-align: left;
.right-header{ .right-header{
...@@ -98,6 +102,7 @@ export default { ...@@ -98,6 +102,7 @@ export default {
.right-content{ .right-content{
margin-top: 8*$length; margin-top: 8*$length;
@include fontStyle(12,17,500,#666,left); @include fontStyle(12,17,500,#666,left);
height: auto;
} }
.right-footer{ .right-footer{
margin-top: 7*$length; margin-top: 7*$length;
......
layouts/blank.vue
<template> <template>
<transition name="fade-transform" mode="out-in">
<nuxt/> <nuxt/>
</transition>
</template> </template>
<script> <script>
......
layouts/only-header.vue
<template> <template>
<div class="bc-layout-container"> <div class="bc-layout-container">
<page-header></page-header> <page-header></page-header>
<transition name="fade-transform" mode="out-in">
<nuxt /> <nuxt />
</transition>
</div> </div>
</template> </template>
......
pages/answer/release/index.vue
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
></mavon-editor> ></mavon-editor>
</div> </div>
</div> </div>
<div class="select-content"> <div class="select__wrap">
<div> <div class="select-content">
<span>*</span> <span>*</span>
<select-card selectType="1"></select-card> <select-card selectType="1"></select-card>
</div> </div>
...@@ -158,16 +158,13 @@ export default { ...@@ -158,16 +158,13 @@ export default {
.answer-release { .answer-release {
width: 748*$length; width: 748*$length;
margin: 0 auto; margin: 0 auto;
.answer-release__header { .answer-release__header {
margin-top: 40*$length; margin-top: 40*$length;
@extend %flex-row-spb; @extend %flex-row-spb;
> span { > span {
color: #FF7474; color: #FF7474;
font-size: 6*$length; font-size: 6*$length;
} }
> input { > input {
@include fontStyle(14, 19, 500, #666, left); @include fontStyle(14, 19, 500, #666, left);
width: 726*$length; width: 726*$length;
...@@ -177,38 +174,33 @@ export default { ...@@ -177,38 +174,33 @@ export default {
@include border-radius(4*$length); @include border-radius(4*$length);
} }
} }
.answer-release__content { .answer-release__content {
margin-top: 32*$length; margin-top: 32*$length;
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: start; align-items: start;
> span { > span {
display: inline-block; display: inline-block;
margin-top: 18*$length; margin-top: 18*$length;
color: #FF7474; color: #FF7474;
font-size: 6*$length; font-size: 6*$length;
} }
.editor-container { .editor-container {
width: 723*$length; width: 723*$length;
height: 230*$length; height: 230*$length;
.editor { .editor {
min-height: 230*$length; min-height: 230*$length;
min-width: 723*$length; min-width: 723*$length;
} }
} }
} }
.select__wrap {
.select-content {
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: start; align-items: start;
margin-top: 32*$length; margin-top: 32*$length;
> div { .select-content{
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: start; align-items: start;
span { > span {
color: #FF7474; color: #FF7474;
font-size: 6*$length; font-size: 6*$length;
margin-right: 16*$length; margin-right: 16*$length;
...@@ -227,18 +219,17 @@ export default { ...@@ -227,18 +219,17 @@ export default {
@include fontStyle(12,16,500,#999,left); @include fontStyle(12,16,500,#999,left);
} }
> button { > button {
@include fontStyle(14,19,500,#fff,center);
width: 100*$length; width: 100*$length;
height: 40*$length;
background-color: #00AAE6; background-color: #00AAE6;
border: none; border: none;
@extend %cursorPointer; @extend %cursorPointer;
@include border-radius(4*$length); @include border-radius(4*$length);
@include fontStyle(14,40,500,#fff,center);
} }
.preview{ .preview{
margin-right: 16*$length;
color: #666; color: #666;
background-color: #fff; background-color: #fff;
margin-right: 16*$length;
@extend %animate-transition; @extend %animate-transition;
&:hover{ &:hover{
color: #fff; color: #fff;
......
pages/blog/release/index.vue
...@@ -21,18 +21,18 @@ ...@@ -21,18 +21,18 @@
> >
<div class="blog-release"> <div class="blog-release">
<div class="blog-release__header"> <div class="blog-release__header">
<div> <div class="header-content">
<span>*</span> <span>*</span>
<input type="text" placeholder="请输入文章标题"> <input type="text" placeholder="请输入文章标题">
</div> </div>
<div> <div class="header-content">
<div class="select-wrap"> <div class="select__wrap">
<span>*</span> <span>*</span>
<select-card selectType="2" :class-list="classList" placeholder="请选择文章分类"></select-card> <select-card selectType="2" :class-list="classList" placeholder="请选择文章分类"></select-card>
</div> </div>
<input type="text" placeholder="原文链接" style="width: 461px;"> <input type="text" placeholder="原文链接" style="width: 461px;">
</div> </div>
<div> <div class="header-content">
<span>*</span> <span>*</span>
<input type="text" placeholder="请用一句话介绍该文章"> <input type="text" placeholder="请用一句话介绍该文章">
</div> </div>
...@@ -54,15 +54,15 @@ ...@@ -54,15 +54,15 @@
></mavon-editor> ></mavon-editor>
</div> </div>
</div> </div>
<div class="select-content"> <div class="blog-release__select__wrap">
<div> <div class="select-content">
<span>*</span> <span>*</span>
<select-card selectType="1"></select-card> <select-card selectType="1"></select-card>
</div> </div>
<select-card selectType="2" :class-list="classList" placeholder="请选择问题分类"></select-card> <select-card selectType="2" :class-list="classList" placeholder="请选择问题分类"></select-card>
</div> </div>
<div class="choose-container"> <div class="choose-container">
<div> <div class="input-box__wrap">
<span>*</span> <span>*</span>
<div class="input-box"> <div class="input-box">
<input type="radio" id="公开" value="公开" v-model="way" name="way"> <input type="radio" id="公开" value="公开" v-model="way" name="way">
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
<label for="私密">私密</label> <label for="私密">私密</label>
</div> </div>
</div> </div>
<div> <div class="input-box__wrap">
<span>*</span> <span>*</span>
<div class="input-box"> <div class="input-box">
<input type="radio" id="开启评论" value="开启评论" v-model="comment" name="comment"> <input type="radio" id="开启评论" value="开启评论" v-model="comment" name="comment">
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
<label for="禁止评论">禁止评论</label> <label for="禁止评论">禁止评论</label>
</div> </div>
</div> </div>
<div> <div class="input-box__wrap">
<span>*</span> <span>*</span>
<div class="input-box"> <div class="input-box">
<input type="radio" id="可以转载" value="可以转载" v-model="reprint" name="reprint"> <input type="radio" id="可以转载" value="可以转载" v-model="reprint" name="reprint">
...@@ -97,11 +97,11 @@ ...@@ -97,11 +97,11 @@
</div> </div>
</div> </div>
<div class="blog-release__footer"> <div class="blog-release__footer">
<p class="add-box">上传封面 <p class="footer__left">上传封面
<img :src="imgSrc" alt=""> <img :src="imgSrc" alt="">
<input type="file" @change="e=>changeToUploadCover(e)" placeholder="上传项目封面图"> <input type="file" @change="e=>changeToUploadCover(e)" placeholder="上传项目封面图">
</p> </p>
<div> <div class="footer__right">
<p>已自动存为草稿</p> <p>已自动存为草稿</p>
<button class="preview" @click="readScreen">预览</button> <button class="preview" @click="readScreen">预览</button>
<button class="submit">提交</button> <button class="submit">提交</button>
...@@ -219,7 +219,7 @@ export default { ...@@ -219,7 +219,7 @@ export default {
margin: 0 auto; margin: 0 auto;
.blog-release__header { .blog-release__header {
margin-top: 40*$length; margin-top: 40*$length;
> div { .header-content{
@extend %flex-row-spb; @extend %flex-row-spb;
margin-bottom: 32*$length; margin-bottom: 32*$length;
> span { > span {
...@@ -227,14 +227,14 @@ export default { ...@@ -227,14 +227,14 @@ export default {
font-size: 6*$length; font-size: 6*$length;
} }
> input { > input {
@include fontStyle(14, 19, 500, #666, left);
width: 726*$length; width: 726*$length;
height: 46*$length;
padding: 14*$length 16*$length; padding: 14*$length 16*$length;
box-sizing: border-box;
background-color: #F4F8FA; background-color: #F4F8FA;
@include border-radius(4*$length); @include border-radius(4*$length);
@include fontStyle(14, 46, 500, #666, left);
} }
.select-wrap{ .select__wrap{
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: start; align-items: start;
> span { > span {
...@@ -264,14 +264,14 @@ export default { ...@@ -264,14 +264,14 @@ export default {
} }
} }
} }
.select-content { .blog-release__select__wrap {
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: start; align-items: start;
margin-top: 32*$length; margin-top: 32*$length;
> div { .select-content{
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: start; align-items: start;
span { > span {
color: #FF7474; color: #FF7474;
font-size: 6*$length; font-size: 6*$length;
margin-right: 16*$length; margin-right: 16*$length;
...@@ -281,15 +281,14 @@ export default { ...@@ -281,15 +281,14 @@ export default {
} }
.choose-container{ .choose-container{
@extend %flex-row-spb; @extend %flex-row-spb;
> div { .input-box__wrap{
@extend %flex-row-spb;
> span { > span {
display: inline-block;
margin-right: 16*$length; margin-right: 16*$length;
color: #FF7474; color: #FF7474;
font-size: 6*$length; font-size: 6*$length;
} }
.input-box { .input-box {
display: inline-block;
margin-right: 40*$length; margin-right: 40*$length;
line-height: 16*$length; line-height: 16*$length;
input[type="radio"] { input[type="radio"] {
...@@ -336,7 +335,7 @@ export default { ...@@ -336,7 +335,7 @@ export default {
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: flex-end; align-items: flex-end;
margin-top: 35*$length; margin-top: 35*$length;
.add-box{ .footer__left{
overflow: hidden; overflow: hidden;
width:196*$length; width:196*$length;
background-color: #F4F8FA; background-color: #F4F8FA;
...@@ -359,7 +358,7 @@ export default { ...@@ -359,7 +358,7 @@ export default {
object-fit: contain; object-fit: contain;
} }
} }
> div { .footer__right{
@extend %flex-row-spb; @extend %flex-row-spb;
justify-content: flex-end; justify-content: flex-end;
> p { > p {
......
pages/personal-center/like.vue
...@@ -71,57 +71,6 @@ ...@@ -71,57 +71,6 @@
width:938*$length; width:938*$length;
margin-top:16*$length; margin-top:16*$length;
border-radius: 4*$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
}
}
}
} }
} }
......
pages/personal-center/like/collect.vue
<template> <template>
<div> <div style="background-color: #fff">
<div class="container__tab"> <div class="container__tab">
<div class="tab__left"> <div class="tab__left">
<div class="left__item"> <div class="left__item">
......
pages/personal-center/like/index.vue deleted 100644 → 0
<template>
<div class="message-container">
<div class="message-container__l">
<nav-wrap
width="302px"
: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>
<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';
import NavWrap from "../../../components/pc/nav/navWrap";
export default {
data(){
return{
list: [
{
label: '我的喜欢',
address: '/personal-center/like',
id: '我的消息'
},
{
label: '我的收藏',
address: '/personal-center/collect',
id: '我的收藏'
}
],
selected:'项目'
}
},
components:{
ProjectCard,NavWrap
}
}
</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;
margin-top:16*$length;
}
.message-container__r{
overflow:hidden;
width:938*$length;
margin-top:16*$length;
border-radius: 4*$length;
background-color: #fff;
}
}
</style>
pages/personal-center/like/support.vue
<template> <template>
<div> <div style="background-color: #fff">
<div class="container__tab"> <div class="container__tab">
<div class="tab__left"> <div class="tab__left">
<div class="left__item"> <div class="left__item">
......
pages/personal-center/person.vue
...@@ -76,58 +76,6 @@ ...@@ -76,58 +76,6 @@
width:938*$length; width:938*$length;
margin-top:16*$length; margin-top:16*$length;
border-radius: 4*$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> </style>
pages/personal-center/person/black-list.vue
<template> <template>
<div> <div style="background-color: #fff">
<fan-card></fan-card> <fan-card></fan-card>
<fan-card></fan-card> <fan-card></fan-card>
<fan-card></fan-card> <fan-card></fan-card>
......
pages/personal-center/person/fans.vue
<template> <template>
<div> <div style="background-color: #fff">
<fan-card></fan-card>
<fan-card></fan-card>
<fan-card></fan-card> <fan-card></fan-card>
<fan-card></fan-card> <fan-card></fan-card>
<fan-card></fan-card> <fan-card></fan-card>
......
pages/personal-center/person/following.vue
<template> <template>
<div> <div style="background-color: #fff">
<fan-card></fan-card> <fan-card></fan-card>
<fan-card></fan-card> <fan-card></fan-card>
<fan-card></fan-card> <fan-card></fan-card>
......
pages/project/release/index.vue
...@@ -21,46 +21,46 @@ ...@@ -21,46 +21,46 @@
> >
<div class="blog-release"> <div class="blog-release">
<div class="blog-release__header"> <div class="blog-release__header">
<div> <div class="header-content">
<span>*</span> <span>*</span>
<input type="text" placeholder="请输入项目名称"> <input type="text" placeholder="请输入项目名称">
</div> </div>
<div> <div class="header-content">
<div class="select-wrap"> <div class="select__wrap">
<span>*</span> <span>*</span>
<select-card selectType="2" :class-list="classList" placeholder="请选择授权协议"></select-card> <select-card selectType="2" :class-list="classList" placeholder="请选择授权协议"></select-card>
</div> </div>
<div class="select-wrap"> <div class="select__wrap">
<span>*</span> <span>*</span>
<select-card selectType="2" :class-list="classList" placeholder="请选择开发语言"></select-card> <select-card selectType="2" :class-list="classList" placeholder="请选择开发语言"></select-card>
</div> </div>
<div class="select-wrap"> <div class="select__wrap">
<span>*</span> <span>*</span>
<select-card selectType="2" :class-list="classList" placeholder="请选择操作系统"></select-card> <select-card selectType="2" :class-list="classList" placeholder="请选择操作系统"></select-card>
</div> </div>
</div> </div>
<div> <div class="header-content">
<div> <div class="header-content__left">
<span>*</span> <span>*</span>
<input type="text" placeholder="项目所在地址链接" style="width: 461px;margin-right: 42px;"> <input type="text" placeholder="项目所在地址链接" style="width: 461px;">
</div> </div>
<div class="select-wrap"> <div class="select__wrap">
<span>*</span> <span>*</span>
<select-card selectType="2" :class-list="classList" placeholder="请选择授权协议"></select-card> <select-card selectType="2" :class-list="classList" placeholder="请选择授权协议"></select-card>
</div> </div>
</div> </div>
<div> <div class="header-content">
<input type="text" placeholder="项目文档链接" style="width: 461px;margin-left: 22px;"> <input type="text" placeholder="项目文档链接" style="width: 461px;margin-left: 22px;">
<div class="select-wrap"> <div class="select__wrap">
<span>*</span> <span>*</span>
<select-card selectType="2" :class-list="classList" placeholder="请选择项目类型"></select-card> <select-card selectType="2" :class-list="classList" placeholder="请选择项目类型"></select-card>
</div> </div>
</div> </div>
<div> <div class="header-content">
<input type="text" placeholder="项目官网链接" style="width: 461px;margin-left: 22px;"> <input type="text" placeholder="项目官网链接" style="width: 461px;margin-left: 22px;">
<select-card selectType="2" :class-list="classList" placeholder="请选择项目子类型"></select-card> <select-card selectType="2" :class-list="classList" placeholder="请选择项目子类型"></select-card>
</div> </div>
<div> <div class="header-content">
<span>*</span> <span>*</span>
<input type="text" placeholder="请用一句话介绍该项目"> <input type="text" placeholder="请用一句话介绍该项目">
</div> </div>
...@@ -83,11 +83,11 @@ ...@@ -83,11 +83,11 @@
</div> </div>
</div> </div>
<div class="blog-release__footer"> <div class="blog-release__footer">
<p class="add-box">上传封面 <p class="footer__left">上传封面
<img :src="imgSrc" alt=""> <img :src="imgSrc" alt="">
<input type="file" @change="e=>changeToUploadCover(e)"> <input type="file" @change="e=>changeToUploadCover(e)">
</p> </p>
<div> <div class="footer__right">
<p>已自动存为草稿</p> <p>已自动存为草稿</p>
<button class="preview" @click="readScreen">预览</button> <button class="preview" @click="readScreen">预览</button>
<button class="submit">提交</button> <button class="submit">提交</button>
...@@ -194,62 +194,53 @@ export default { ...@@ -194,62 +194,53 @@ export default {
margin: 24*$length auto 32*$length auto; margin: 24*$length auto 32*$length auto;
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: start; align-items: start;
.blog-release-container__l { .blog-release-container__l {
} }
.blog-release-container__r { .blog-release-container__r {
.blog-release { .blog-release {
width: 748*$length; width: 748*$length;
margin: 0 auto; margin: 0 auto;
.blog-release__header { .blog-release__header {
margin-top: 40*$length; margin-top: 40*$length;
> div { .header-content{
@extend %flex-row-spb; @extend %flex-row-spb;
margin-bottom: 32*$length; margin-bottom: 32*$length;
span { span{
color: #FF7474; color: #FF7474;
font-size: 6*$length; font-size: 6*$length;
margin-right: 16*$length;
} }
input { input {
@include fontStyle(14, 19, 500, #666, left);
width: 726*$length; width: 726*$length;
height: 46*$length;
padding: 14*$length 16*$length; padding: 14*$length 16*$length;
background-color: #F4F8FA; background-color: #F4F8FA;
@include border-radius(4*$length); @include border-radius(4*$length);
@include fontStyle(14, 46, 500, #666, left);
} }
.select-wrap{ .select__wrap{
width: 218*$length;
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: start;
> span { > span {
color: #FF7474; color: #FF7474;
font-size: 6*$length; font-size: 6*$length;
margin-right: 20*$length;
margin-top: 18*$length;
} }
} }
.header-content__left{
width: 483*$length;
@extend %flex-row-spb;
}
} }
} }
.blog-release__content { .blog-release__content {
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: start; align-items: start;
> span { > span {
display: inline-block;
margin-top: 18*$length; margin-top: 18*$length;
color: #FF7474; color: #FF7474;
font-size: 6*$length; font-size: 6*$length;
} }
.editor-container { .editor-container {
width: 723*$length; width: 723*$length;
height: 230*$length; height: 230*$length;
.editor { .editor {
min-height: 230*$length; min-height: 230*$length;
min-width: 723*$length; min-width: 723*$length;
...@@ -264,7 +255,7 @@ export default { ...@@ -264,7 +255,7 @@ export default {
align-items: flex-end; align-items: flex-end;
margin-top: 32*$length; margin-top: 32*$length;
margin-left: 20*$length; margin-left: 20*$length;
.add-box{ .footer__left{
position:relative; position:relative;
width:196*$length; width:196*$length;
background-color: #F4F8FA; background-color: #F4F8FA;
...@@ -289,7 +280,7 @@ export default { ...@@ -289,7 +280,7 @@ export default {
object-fit: contain; object-fit: contain;
} }
} }
> div { .footer__right{
@extend %flex-row-spb; @extend %flex-row-spb;
justify-content: flex-end; justify-content: flex-end;
> p { > p {
...@@ -297,13 +288,12 @@ export default { ...@@ -297,13 +288,12 @@ export default {
@include fontStyle(12,16,500,#999,left); @include fontStyle(12,16,500,#999,left);
} }
> button { > button {
@include fontStyle(14,19,500,#fff,center);
width: 100*$length; width: 100*$length;
height: 40*$length;
background-color: #00AAE6; background-color: #00AAE6;
border: none; border: none;
@extend %cursorPointer; @extend %cursorPointer;
@include border-radius(4*$length); @include border-radius(4*$length);
@include fontStyle(14,40,500,#fff,center);
} }
.preview{ .preview{
color: #666; color: #666;
......
pages/search.vue
...@@ -17,9 +17,9 @@ ...@@ -17,9 +17,9 @@
style="padding-bottom: 0px" style="padding-bottom: 0px"
></nav-wrap> ></nav-wrap>
</div> </div>
<div class="search-center__content" style="padding-bottom: 60px"> <div class="search-center__content">
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<nuxt-child></nuxt-child> <nuxt-child></nuxt-child>
</transition> </transition>
</div> </div>
<div class="search-center__right"> <div class="search-center__right">
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
background-color: #F4F8FA; background-color: #F4F8FA;
margin-top:10px; margin-top:10px;
margin-left: 15px; margin-left: 15px;
heigt:20*$length; height:20*$length;
display: inline-block; display: inline-block;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
......
pages/web.vue
...@@ -8,7 +8,9 @@ ...@@ -8,7 +8,9 @@
></nav-wrap> ></nav-wrap>
</div> </div>
<div class="web-center__content"> <div class="web-center__content">
<nuxt-child></nuxt-child> <transition name="fade-transform" mode="out-in">
<nuxt-child></nuxt-child>
</transition>
</div> </div>
</div> </div>
</div> </div>
......
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