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