Skip to content

B
beyond-clouds-front
Commit a8fbaaef by yanju
Options

Merge branch 'fix-issue#15' into 'master' 

动态点赞修改

See merge request pigbigbig/beyond-clouds-front!138
parents 333fb0d1 e9ccddeb
Showing with 634 additions and 1506 deletions
assets/base.scss
@import 'common.scss';
%detail-container{
.detail-container__left{
.article-container{
width:938*$length;
padding:35*$length 24*$length;
box-sizing: border-box;
background-color: #fff;
border-radius: 4*$length;
overflow: hidden;
.article__header{
@extend %flex-row-spb;
.header-info{
width:100%;
@extend %flex-column-spb;
align-items:flex-start;
.title{
@extend %flex-row-spb;
justify-content: flex-start;
@include fontStyle(24,28,500,#222,left);
height:auto;
.solved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:
#e7faf0;
border: 1px solid
#d0f5e0;
color:
#13ce66;
border-radius: 4*$length;
}
.unsolved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:#f4f4f5;
border:1px solid #e9e9eb;
color:#909399;
border-radius: 4*$length;
}
}
.infos{
margin-top: 13*$length;
@extend %flex-row-spb;
width:100%;
.info-left{
@extend %flex-row-spb;
justify-content: flex-start;
flex: 1;
> .icon-box{
margin-right:15*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> .icon{
margin-right:10*$length;
width:20*$length;
height:20*$length;
border-radius:2*$length;
@extend %flex-column-center;
background-color: #FF7474;
}
}
> .label-box{
flex-wrap: wrap;
margin-left:5*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> p{
margin-bottom: 8*$length;
margin-right:10*$length;
padding:2*$length 8*$length;
background-color: #F4F8FA;
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
background-color:rgba(0,170,230,.2);
color:rgba(0,170,230,1);
}
}
}
}
.info-right{
@extend %flex-row-spb;
flex-shrink: 0;
.left{
@include fontStyle(12,16,500,#999,left);
> span{
margin: 0 3*$length;
}
}
.right{
margin-left: 38*$length;
@extend %flex-row-spb;
justify-content: flex-start;
.icon-box{
@extend %inlineBlockV;
margin-right: 17*$length;
> span{
@include fontStyle(14,19,500,#ccc,left);
margin-left:5*$length;
vertical-align: top;
}
}
}
}
}
}
}
.article__introduce{
@include fontStyle(14,24,500,#666,left);
height:auto;
box-sizing: border-box;
padding:14*$length 14*$length;
margin-top:32*$length;
background-color: #F4F8FA;
border-radius: 4*$length;
}
.article__content{
@extend %article-content;
}
.article__like1{
margin:60*$length auto 30*$length;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#EFEFEF;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: relative;
font-size: 18*$length;
color:#CCCCCC;
@extend %animate-transition;
z-index: 101;
}
.num{
position: relative;
@include fontStyle(12,19,500,#999,center);
width:100%;
@extend %animate-transition;
z-index: 101;
}
}
.article__like2{
margin:60*$length auto 30*$length;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#FF7474;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: relative;
font-size: 18*$length;
color:#fff;
@extend %animate-transition;
z-index: 101;
}
.num{
position: relative;
@include fontStyle(12,19,500,#fff,center);
width:100%;
@extend %animate-transition;
z-index: 101;
}
}
.article__praise-member{
width:652*$length;
margin:20*$length auto;
@extend %flex-row-spb;
justify-content: flex-start;
flex-wrap: wrap;
.more-member{
margin-bottom: 28*$length;
width:40*$length;
height:40*$length;
background-color: #00AAE6;
border-radius:50%;
@include fontStyle(12,40,500,#fff,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover {
transform: scale(1.2);
filter:brightness(110%);
}
@keyframes more-member__hover{
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
}
}
.article__footer{
height:34*$length;
width:100%;
position:relative;
@extend %flex-row-spb;
.link{
@include fontStyle(12,34,500,#666,left);
a{
&:hover{
color:#00AAE6
}
}
}
.report{
@extend %cursorPointer;
@include fontStyle(12,34,500,#999,left);
&:hover{
color:#00AAE6
}
}
.project{
position:absolute;
left:0;
right:0;
width:332*$length;
margin:0 auto;
@extend %flex-row-spb;
p{
width: 100*$length;
height:34*$length;
border-radius: 4*$length;
background-color: #00AAE6;
@extend %cursorPointer;
@extend %animate-transition;
@include fontStyle(14,34,500,#fff,center);
&:hover{
filter:brightness(1.1);
}
}
}
}
}
.article-comment{
width:938*$length;
padding:18*$length 24*$length;
box-sizing: border-box;
background-color: #fff;
border-radius: 4*$length;
overflow: hidden;
margin-top: 16*$length;
.release-area{
width:890*$length;
padding:14*$length 16*$length;
background-color: #F4F8FA;
border:1px solid #EFEFEF;
border-radius:4*$length;
@include fontStyle(12,22,500,#666666,left);
height:66*$length;
}
.button-box{
height:34*$length;
@extend %flex-row-spb;
justify-content: flex-end;
margin-top: 16*$length;
p{
width:100*$length;
background-color: #00AAE6;
border-radius: 4*$length;
@include fontStyle(12,34,500,#fff,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
filter: brightness(110%);
}
}
}
.comments-header{
padding-top: 16*$length;
margin-top: 24*$length;
border-top: 1px solid #EFEFEF;
@extend %flex-row-spb;
.left{
@include fontStyle(12,16,500,#A7A7A7,left);
span{
margin-right: 8*$length;
}
}
.right{
@extend %flex-row-spb;
p{
@include fontStyle(12,16,500,#A7A7A7,left);
margin-left:20*$length;
@extend %cursorPointer;
&:hover{
color:#000;
}
}
}
}
}
}
.detail-container__right{
width:302*$length;
.right__hot-item{
padding:8*$length 16*$length;
width:302*$length;
height:64*$length;
box-sizing: border-box;
@extend %cursorPointer;
@extend %flex-row-spb;
justify-content: flex-start;
&:hover{
.right__hot-item__content{
p{
color: rgba(0,170,230,1)
}
h6{
color: rgba(0,170,230,.8)
}
}
}
.right__hot-item__content{
margin-left:10*$length;
width:210*$length;
p{
@include fontStyle(14,19,500,#2F2F2F,left);
@extend %nowrap;
@extend %animate-transition;
}
h6{
margin-top:10*$length;
@include fontStyle(12,16,500,#999999,left);
@extend %nowrap;
@extend %animate-transition;
}
}
.right__hot-item__cover{
width:48*$length;
height:48*$length;
border-radius: 4*$length;
@extend %flex-row-center;
img{
max-width: 100%;
max-height: 100%;
}
}
}
}
.article-option{
position:fixed;
top:50%;
left:calc((100% - 1256px)/2 - 56px);
height:356*$length;
width:40*$length;
margin-top:-178*$length;
@extend %flex-column-spb;
.option-item{
width:40*$length;
height:40*$length;
border-radius: 4*$length;
background-color: #fff;
@extend %cursorPointer;
@extend %flex-row-center;
i{
@extend %animate-transition;
color:#CCCCCC;
font-size: 12px;
}
.likeActive{
color:#FF7474
}
&:hover{
.star{
color:#F8A06F
}
.like{
color:#FF7474
}
.comment{
color:#59CBF4
}
}
embed{
@extend %cursorPointer;
filter:grayscale(0%);
@extend %animate-transition;
&:hover{
filter:grayscale(0%);
}
}
.star{
&:hover{
color:#F8A06F
}
}
.like{
&:hover{
color:#FF7474
}
}
.comment{
&:hover{
color:#59CBF4
}
}
}
.share-word{
@include fontStyle(12,16,500,#B4B4B4,center)
}
}
}
components/common/auto-textarea/index.js
import AutoTextarea from './src/main';
AutoTextarea.install = function (Vue) {
Vue.component(AutoTextarea.name,AutoTextarea)
}
export default AutoTextarea
components/common/auto-textarea/src/main.vue
......@@ -24,7 +24,7 @@
<script>
export default {
name:'autoTextarea',
name:'yunTextarea',
data(){
return {
temp_value:(()=>{
......
components/common/editor/index.js 0 → 100644
import yunEditor from './src/main';
import YunVideo from "../video/src/main";
yunEditor.install = function (Vue) {
Vue.component(yunEditor.name,yunEditor)
}
export default yunEditor
components/common/editor/src/main.vue 0 → 100644
<template>
<div>
<yun-textarea ref="vNoteTextarea" placeholder="placeholder"
class="content-input" fontSize="14px"
style="border:1px solid black;width:200px"
lineHeight="1.5" v-model="d_value" fullHeight
></yun-textarea>
<yun-video dataSrc=" http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></yun-video>
<div class="height"></div>
</div>
</template>
<script>
export default {
name:'yunEditor',
data(){
return{
d_value:''
}
}
}
</script>
<style lang="scss">
.height{
height:900px;
& textarea{
width:768*$length;
border:1px solid #EFEFEF;
border-radius:4*$length;
padding:11*$length 14*$length;
background-color: #F9FBFC;
@include fontStyle(14,22,500,#999,start);
height:120*$length;
}
}
</style>
components/common/video/index.js 0 → 100644
import YunVideo from './src/main';
YunVideo.install = function (Vue) {
Vue.component(YunVideo.name,YunVideo)
}
export default YunVideo
components/pc/socialContactCard.vue
......@@ -98,7 +98,7 @@
<p class="like1">赞({{praiseNum}})</p>
</div>
<div class="abs_down-arrow" @click="showPraiseCon=!showPraiseCon">
<div class="abs_down-arrow" @click="showPraiseCon=!showPraiseCon" v-if="praiseList.length>0">
<yun-icon :class="returnItem4IconClass" size="8px" name="down_arrow"></yun-icon>
</div>
</div>
......@@ -178,7 +178,7 @@
praiseList:[],
praiseTotal:0,
showAllPraise:true,
showPraiseCon:false,
showPraiseCon:true,
}
},
......@@ -198,7 +198,7 @@
if(this.pictures.length===1){
if(process.browser){
let src = this.pictures[0];
let img = new this.$Image();
let img = new Image();
img.src = src;
return img.height / img.width > 1.33;
}
......@@ -251,17 +251,10 @@
}
},
watch:{
showPraiseCon(val){
if(val===true){
this.dataGetPraiseList();
}
}
},
created(){
this.dateGet2Info();
this.dataGetPraiseList();
if(process.browser){
document.addEventListener('click',(e)=>{
if(this.$refs.deleteButton){
......@@ -426,6 +419,7 @@
})
this.praised = true;
this.praiseNum = this.praiseNum +1;
this.dataGetPraiseList();
}else if(response.code===1000){
this.$message({
type:'warning',
......@@ -445,6 +439,8 @@
})
this.praised = false;
this.praiseNum = this.praiseNum -1;
this.dataGetPraiseList();
}else if(response.code===1000){
this.$message({
type:'warning',
......@@ -859,10 +855,10 @@
@extend %flex-row-center;
p{
margin-left:8*$length;
@include fontStyle(12,16,500,#666,center);
@include fontStyle(12,16,500,#FF7474,center);
}
i{
color:#ccc;
color:#FF7474;
padding-bottom: 2px;
}
}
......
nuxt.config.js
......@@ -57,7 +57,9 @@ module.exports = {
{src:'~/plugins/yunCropper.js',ssr:false},
{src:'~/plugins/yunAvatar.js',ssr:true},
{src:'~/plugins/yunInput.js',ssr:true},
{src:'~/plugins/imageInfo.js',ssr:false},
{src:'~/plugins/yunVideo.js',ssr:false},
{src:'~/plugins/yunTextarea.js',ssr:true},
{src:'~/plugins/yunEditor.js',ssr:false},
],
/*
** Nuxt.js dev-modules
......
pages/answer/detail/_id.vue
......@@ -326,489 +326,14 @@
<style lang="scss" >
.detail-container{
.detail-container {
width: $pageWidth;
margin:16*$length auto;
margin: 16*$length auto;
@extend %flex-row-spb;
align-items: flex-start;
.detail-container__left{
.article-container{
width:938*$length;
padding:35*$length 24*$length;
box-sizing: border-box;
background-color: #fff;
border-radius: 4*$length;
overflow: hidden;
.article__header{
@extend %flex-row-spb;
.header-info{
width:100%;
@extend %flex-column-spb;
align-items:flex-start;
.title{
@extend %flex-row-spb;
justify-content: flex-start;
@include fontStyle(24,28,500,#222,left);
height:auto;
.solved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:
#e7faf0;
border: 1px solid
#d0f5e0;
color:
#13ce66;
border-radius: 4*$length;
}
.unsolved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:#f4f4f5;
border:1px solid #e9e9eb;
color:#909399;
border-radius: 4*$length;
}
}
.infos{
margin-top: 13*$length;
@extend %flex-row-spb;
width:100%;
.info-left{
@extend %flex-row-spb;
justify-content: flex-start;
flex: 1;
> .icon-box{
margin-right:15*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> .icon{
margin-right:10*$length;
width:20*$length;
height:20*$length;
border-radius:2*$length;
@extend %flex-column-center;
background-color: #FF7474;
}
}
> .label-box{
flex-wrap: wrap;
margin-left:5*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> p{
margin-bottom: 8*$length;
margin-right:10*$length;
padding:2*$length 8*$length;
background-color: #F4F8FA;
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
background-color:rgba(0,170,230,.2);
color:rgba(0,170,230,1);
}
}
}
}
.info-right{
@extend %flex-row-spb;
flex-shrink: 0;
.left{
@include fontStyle(12,16,500,#999,left);
> span{
margin: 0 3*$length;
}
}
.right{
margin-left: 38*$length;
@extend %flex-row-spb;
justify-content: flex-start;
.icon-box{
@extend %inlineBlockV;
margin-right: 17*$length;
> span{
@include fontStyle(14,19,500,#ccc,left);
margin-left:5*$length;
vertical-align: top;
}
}
}
}
}
}
}
.article__introduce{
@include fontStyle(14,24,500,#666,left);
height:auto;
box-sizing: border-box;
padding:14*$length 14*$length;
margin-top:32*$length;
background-color: #F4F8FA;
border-radius: 4*$length;
}
.article__content{
@extend %article-content;
}
.article__like1{
margin:60*$length auto;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#EFEFEF;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: relative;
font-size: 18*$length;
color:#CCCCCC;
@extend %animate-transition;
z-index: 101;
}
.num{
position: relative;
@include fontStyle(12,19,500,#999,center);
width:100%;
@extend %animate-transition;
z-index: 101;
}
}
.article__like2{
margin:60*$length auto;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#FF7474;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: relative;
font-size: 18*$length;
color:#fff;
@extend %animate-transition;
z-index: 101;
}
.num{
position: relative;
@include fontStyle(12,19,500,#fff,center);
width:100%;
@extend %animate-transition;
z-index: 101;
}
}
.article__praise-member{
width:652*$length;
margin:40*$length auto;
@extend %flex-row-spb;
justify-content: flex-start;
flex-wrap: wrap;
.more-member{
margin-bottom: 28*$length;
width:40*$length;
height:40*$length;
background-color: #00AAE6;
border-radius:50%;
@include fontStyle(12,40,500,#fff,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover {
transform: scale(1.2);
filter:brightness(110%);
}
@keyframes more-member__hover{
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
}
}
.article__footer{
height:34*$length;
width:100%;
position:relative;
@extend %flex-row-spb;
.link{
@include fontStyle(12,34,500,#666,left);
a{
&:hover{
color:#00AAE6
}
}
}
.report{
@extend %cursorPointer;
@include fontStyle(12,34,500,#999,left);
&:hover{
color:#00AAE6
}
}
.project{
position:absolute;
left:0;
right:0;
width:332*$length;
margin:0 auto;
@extend %flex-row-spb;
p{
width: 100*$length;
height:34*$length;
border-radius: 4*$length;
background-color: #00AAE6;
@extend %cursorPointer;
@extend %animate-transition;
@include fontStyle(14,34,500,#fff,center);
&:hover{
filter:brightness(1.1);
}
}
}
}
}
.article-comment{
width:938*$length;
padding:18*$length 24*$length;
box-sizing: border-box;
background-color: #fff;
border-radius: 4*$length;
overflow: hidden;
margin-top: 16*$length;
.release-area{
width:890*$length;
padding:14*$length 16*$length;
background-color: #F4F8FA;
border:1px solid #EFEFEF;
border-radius:4*$length;
@include fontStyle(12,22,500,#666666,left);
height:66*$length;
}
.button-box{
height:34*$length;
@extend %flex-row-spb;
justify-content: flex-end;
margin-top: 16*$length;
p{
width:100*$length;
background-color: #00AAE6;
border-radius: 4*$length;
@include fontStyle(12,34,500,#fff,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
filter: brightness(110%);
}
}
}
.comments-header{
padding-top: 16*$length;
margin-top: 24*$length;
border-top: 1px solid #EFEFEF;
@extend %flex-row-spb;
.left{
@include fontStyle(12,16,500,#A7A7A7,left);
span{
margin-right: 8*$length;
}
}
.right{
@extend %flex-row-spb;
p{
@include fontStyle(12,16,500,#A7A7A7,left);
margin-left:20*$length;
@extend %cursorPointer;
&:hover{
color:#000;
}
}
}
}
}
}
.detail-container__right{
width:302*$length;
}
.article-option{
position:fixed;
top:50%;
left:calc((100% - 1256px)/2 - 56px);
height:356*$length;
width:40*$length;
margin-top:-178*$length;
@extend %flex-column-spb;
.option-item{
width:40*$length;
height:40*$length;
border-radius: 4*$length;
background-color: #fff;
@extend %cursorPointer;
@extend %flex-row-center;
i{
@extend %animate-transition;
color:#CCCCCC;
font-size: 12px;
}
.likeActive{
color:#FF7474
}
&:hover{
.star{
color:#F8A06F
}
.like{
color:#FF7474
}
.comment{
color:#59CBF4
}
}
embed{
@extend %cursorPointer;
filter:grayscale(0%);
@extend %animate-transition;
&:hover{
filter:grayscale(0%);
}
}
.star{
&:hover{
color:#F8A06F
}
}
.like{
&:hover{
color:#FF7474
}
}
.comment{
&:hover{
color:#59CBF4
}
}
}
.share-word{
@include fontStyle(12,16,500,#B4B4B4,center)
}
}
@extend %detail-container;
}
</style>
pages/blog/detail/_id.vue
......@@ -334,539 +334,13 @@
<style lang="scss" >
.detail-container{
.detail-container {
width: $pageWidth;
margin:16*$length auto;
margin: 16*$length auto;
@extend %flex-row-spb;
align-items: flex-start;
.detail-container__left{
.article-container{
width:938*$length;
padding:35*$length 24*$length;
box-sizing: border-box;
background-color: #fff;
border-radius: 4*$length;
overflow: hidden;
.article__header{
@extend %flex-row-spb;
.header-info{
width:100%;
@extend %flex-column-spb;
align-items:flex-start;
.title{
@extend %flex-row-spb;
justify-content: flex-start;
@include fontStyle(24,28,500,#222,left);
height:auto;
.solved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:
#e7faf0;
border: 1px solid
#d0f5e0;
color:
#13ce66;
border-radius: 4*$length;
}
.unsolved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:#f4f4f5;
border:1px solid #e9e9eb;
color:#909399;
border-radius: 4*$length;
}
}
.infos{
margin-top: 13*$length;
@extend %flex-row-spb;
width:100%;
.info-left{
@extend %flex-row-spb;
justify-content: flex-start;
flex: 1;
> .icon-box{
margin-right:15*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> .icon{
margin-right:10*$length;
width:20*$length;
height:20*$length;
border-radius:2*$length;
@extend %flex-column-center;
background-color: #FF7474;
}
}
> .label-box{
flex-wrap: wrap;
margin-left:5*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> p{
margin-bottom: 8*$length;
margin-right:10*$length;
padding:2*$length 8*$length;
background-color: #F4F8FA;
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
background-color:rgba(0,170,230,.2);
color:rgba(0,170,230,1);
}
}
}
}
.info-right{
@extend %flex-row-spb;
flex-shrink: 0;
.left{
@include fontStyle(12,16,500,#999,left);
> span{
margin: 0 3*$length;
}
}
.right{
margin-left: 38*$length;
@extend %flex-row-spb;
justify-content: flex-start;
.icon-box{
@extend %inlineBlockV;
margin-right: 17*$length;
> span{
@include fontStyle(14,19,500,#ccc,left);
margin-left:5*$length;
vertical-align: top;
}
}
}
}
}
}
}
.article__introduce{
@include fontStyle(14,24,500,#666,left);
height:auto;
box-sizing: border-box;
padding:14*$length 14*$length;
margin-top:32*$length;
background-color: #F4F8FA;
border-radius: 4*$length;
}
.article__content{
@extend %article-content;
}
.article__like1{
margin:60*$length auto;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#EFEFEF;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: relative;
font-size: 18*$length;
color:#CCCCCC;
@extend %animate-transition;
z-index: 101;
}
.num{
position: relative;
@include fontStyle(12,19,500,#999,center);
width:100%;
@extend %animate-transition;
z-index: 101;
}
}
.article__like2{
margin:60*$length auto;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#FF7474;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: relative;
font-size: 18*$length;
color:#fff;
@extend %animate-transition;
z-index: 101;
}
.num{
position: relative;
@include fontStyle(12,19,500,#fff,center);
width:100%;
@extend %animate-transition;
z-index: 101;
}
}
.article__praise-member{
width:652*$length;
margin:40*$length auto;
@extend %flex-row-spb;
justify-content: flex-start;
flex-wrap: wrap;
.more-member{
margin-bottom: 28*$length;
width:40*$length;
height:40*$length;
background-color: #00AAE6;
border-radius:50%;
@include fontStyle(12,40,500,#fff,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover {
transform: scale(1.2);
filter:brightness(110%);
}
@keyframes more-member__hover{
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
}
}
.article__footer{
height:34*$length;
width:100%;
position:relative;
@extend %flex-row-spb;
.link{
@include fontStyle(12,34,500,#666,left);
a{
&:hover{
color:#00AAE6
}
}
}
.report{
@extend %cursorPointer;
@include fontStyle(12,34,500,#999,left);
&:hover{
color:#00AAE6
}
}
.project{
position:absolute;
left:0;
right:0;
width:332*$length;
margin:0 auto;
@extend %flex-row-spb;
p{
width: 100*$length;
height:34*$length;
border-radius: 4*$length;
background-color: #00AAE6;
@extend %cursorPointer;
@extend %animate-transition;
@include fontStyle(14,34,500,#fff,center);
&:hover{
filter:brightness(1.1);
}
}
}
}
}
.article-comment{
width:938*$length;
padding:18*$length 24*$length;
box-sizing: border-box;
background-color: #fff;
border-radius: 4*$length;
overflow: hidden;
margin-top: 16*$length;
.release-area{
width:890*$length;
padding:14*$length 16*$length;
background-color: #F4F8FA;
border:1px solid #EFEFEF;
border-radius:4*$length;
@include fontStyle(12,22,500,#666666,left);
height:66*$length;
}
.button-box{
height:34*$length;
@extend %flex-row-spb;
justify-content: flex-end;
margin-top: 16*$length;
p{
width:100*$length;
background-color: #00AAE6;
border-radius: 4*$length;
@include fontStyle(12,34,500,#fff,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
filter: brightness(110%);
}
}
}
.comments-header{
padding-top: 16*$length;
margin-top: 24*$length;
border-top: 1px solid #EFEFEF;
@extend %flex-row-spb;
.left{
@include fontStyle(12,16,500,#A7A7A7,left);
span{
margin-right: 8*$length;
}
}
.right{
@extend %flex-row-spb;
p{
@include fontStyle(12,16,500,#A7A7A7,left);
margin-left:20*$length;
@extend %cursorPointer;
&:hover{
color:#000;
}
}
}
}
}
}
.detail-container__right{
width:302*$length;
.right__hot-item{
padding:8*$length 16*$length;
width:302*$length;
height:64*$length;
box-sizing: border-box;
@extend %cursorPointer;
@extend %flex-row-spb;
justify-content: flex-start;
&:hover{
.right__hot-item__content{
p{
color: rgba(0,170,230,1)
}
h6{
color: rgba(0,170,230,.8)
}
}
}
.right__hot-item__content{
margin-left:10*$length;
width:210*$length;
p{
@include fontStyle(14,19,500,#2F2F2F,left);
@extend %nowrap;
@extend %animate-transition;
}
h6{
margin-top:10*$length;
@include fontStyle(12,16,500,#999999,left);
@extend %nowrap;
@extend %animate-transition;
}
}
.right__hot-item__cover{
width:48*$length;
height:48*$length;
border-radius: 4*$length;
@extend %flex-row-center;
img{
max-width: 100%;
max-height: 100%;
}
}
}
}
.article-option{
position:fixed;
top:50%;
left:calc((100% - 1256px)/2 - 56px);
height:356*$length;
width:40*$length;
margin-top:-178*$length;
@extend %flex-column-spb;
.option-item{
width:40*$length;
height:40*$length;
border-radius: 4*$length;
background-color: #fff;
@extend %cursorPointer;
@extend %flex-row-center;
i{
@extend %animate-transition;
color:#CCCCCC;
font-size: 12px;
}
.likeActive{
color:#FF7474
}
&:hover{
.star{
color:#F8A06F
}
.like{
color:#FF7474
}
.comment{
color:#59CBF4
}
}
embed{
@extend %cursorPointer;
filter:grayscale(0%);
@extend %animate-transition;
&:hover{
filter:grayscale(0%);
}
}
.star{
&:hover{
color:#F8A06F
}
}
.like{
&:hover{
color:#FF7474
}
}
.comment{
&:hover{
color:#59CBF4
}
}
}
.share-word{
@include fontStyle(12,16,500,#B4B4B4,center)
}
}
@extend %detail-container;
}
</style>
pages/project/detail/_id.vue
......@@ -310,494 +310,15 @@
<style lang="scss" >
.detail-container{
.detail-container {
width: $pageWidth;
margin:16*$length auto;
margin: 16*$length auto;
@extend %flex-row-spb;
align-items: flex-start;
.detail-container__left{
.article-container{
width:938*$length;
padding:35*$length 24*$length;
box-sizing: border-box;
background-color: #fff;
border-radius: 4*$length;
overflow: hidden;
.article__header{
@extend %flex-row-spb;
.header-info{
width:100%;
@extend %flex-column-spb;
align-items:flex-start;
.title{
@extend %flex-row-spb;
justify-content: flex-start;
@include fontStyle(24,28,500,#222,left);
height:auto;
.solved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:
#e7faf0;
border: 1px solid
#d0f5e0;
color:
#13ce66;
border-radius: 4*$length;
}
.unsolved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:#f4f4f5;
border:1px solid #e9e9eb;
color:#909399;
border-radius: 4*$length;
}
}
.infos{
margin-top: 13*$length;
@extend %flex-row-spb;
width:100%;
.info-left{
@extend %flex-row-spb;
justify-content: flex-start;
flex: 1;
> .icon-box{
margin-right:15*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> .icon{
margin-right:10*$length;
width:20*$length;
height:20*$length;
border-radius:2*$length;
@extend %flex-column-center;
background-color: #FF7474;
}
}
> .label-box{
flex-wrap: wrap;
margin-left:5*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> p{
margin-bottom: 8*$length;
margin-right:10*$length;
padding:2*$length 8*$length;
background-color: #F4F8FA;
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
background-color:rgba(0,170,230,.2);
color:rgba(0,170,230,1);
}
}
}
}
.info-right{
@extend %flex-row-spb;
flex-shrink: 0;
.left{
@include fontStyle(12,16,500,#999,left);
> span{
margin: 0 3*$length;
}
}
.right{
margin-left: 38*$length;
@extend %flex-row-spb;
justify-content: flex-start;
.icon-box{
@extend %inlineBlockV;
margin-right: 17*$length;
> span{
@include fontStyle(14,19,500,#ccc,left);
margin-left:5*$length;
vertical-align: top;
}
}
}
}
}
}
}
.article__introduce{
@include fontStyle(14,24,500,#666,left);
height:auto;
box-sizing: border-box;
padding:14*$length 14*$length;
margin-top:32*$length;
background-color: #F4F8FA;
border-radius: 4*$length;
}
.article__content{
@extend %article-content;
}
.article__like1{
margin:60*$length auto;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#EFEFEF;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: relative;
font-size: 18*$length;
color:#CCCCCC;
@extend %animate-transition;
z-index: 101;
}
.num{
position: relative;
@include fontStyle(12,19,500,#999,center);
width:100%;
@extend %animate-transition;
z-index: 101;
}
}
.article__like2{
margin:60*$length auto;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#FF7474;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: relative;
font-size: 18*$length;
color:#fff;
@extend %animate-transition;
z-index: 101;
}
.num{
position: relative;
@include fontStyle(12,19,500,#fff,center);
width:100%;
@extend %animate-transition;
z-index: 101;
}
}
.article__praise-member{
width:652*$length;
margin:40*$length auto;
@extend %flex-row-spb;
justify-content: flex-start;
flex-wrap: wrap;
.more-member{
margin-bottom: 28*$length;
width:40*$length;
height:40*$length;
background-color: #00AAE6;
border-radius:50%;
@include fontStyle(12,40,500,#fff,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover {
transform: scale(1.2);
filter:brightness(110%);
}
@keyframes more-member__hover{
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
}
}
.article__footer{
height:34*$length;
width:100%;
position:relative;
@extend %flex-row-spb;
.link{
@include fontStyle(12,34,500,#666,left);
a{
&:hover{
color:#00AAE6
}
}
}
.report{
@extend %cursorPointer;
@include fontStyle(12,34,500,#999,left);
&:hover{
color:#00AAE6
}
}
.project{
position:absolute;
left:0;
right:0;
width:332*$length;
margin:0 auto;
@extend %flex-row-spb;
p{
width: 100*$length;
height:34*$length;
border-radius: 4*$length;
background-color: #00AAE6;
@extend %cursorPointer;
@extend %animate-transition;
@include fontStyle(14,34,500,#fff,center);
a{
color:#fff;
}
&:hover{
filter:brightness(1.1);
}
}
}
}
}
.article-comment{
width:938*$length;
padding:18*$length 24*$length;
box-sizing: border-box;
background-color: #fff;
border-radius: 4*$length;
overflow: hidden;
margin-top: 16*$length;
.release-area{
width:890*$length;
padding:14*$length 16*$length;
background-color: #F4F8FA;
border:1px solid #EFEFEF;
border-radius:4*$length;
@include fontStyle(12,22,500,#666666,left);
height:66*$length;
}
.button-box{
height:34*$length;
@extend %flex-row-spb;
justify-content: flex-end;
margin-top: 16*$length;
p{
width:100*$length;
background-color: #00AAE6;
border-radius: 4*$length;
@include fontStyle(12,34,500,#fff,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
filter: brightness(110%);
}
}
}
.comments-header{
padding-top: 16*$length;
margin-top: 24*$length;
border-top: 1px solid #EFEFEF;
@extend %flex-row-spb;
.left{
@include fontStyle(12,16,500,#A7A7A7,left);
span{
margin-right: 8*$length;
}
}
.right{
@extend %flex-row-spb;
p{
@include fontStyle(12,16,500,#A7A7A7,left);
margin-left:20*$length;
@extend %cursorPointer;
&:hover{
color:#000;
}
}
}
}
}
}
.detail-container__right{
width:302*$length;
}
.article-option{
position:fixed;
top:50%;
left:calc((100% - 1256px)/2 - 56px);
height:356*$length;
width:40*$length;
margin-top:-178*$length;
@extend %flex-column-spb;
.option-item{
width:40*$length;
height:40*$length;
border-radius: 4*$length;
background-color: #fff;
@extend %cursorPointer;
@extend %flex-row-center;
i{
@extend %animate-transition;
color:#CCCCCC;
font-size: 12px;
}
.likeActive{
color:#FF7474
}
&:hover{
.star{
color:#F8A06F
}
.like{
color:#FF7474
}
.comment{
color:#59CBF4
}
}
embed{
@extend %cursorPointer;
filter:grayscale(0%);
@extend %animate-transition;
&:hover{
filter:grayscale(0%);
}
}
.star{
&:hover{
color:#F8A06F
}
}
.like{
&:hover{
color:#FF7474
}
}
.comment{
&:hover{
color:#59CBF4
}
}
}
.share-word{
@include fontStyle(12,16,500,#B4B4B4,center)
}
}
@extend %detail-container;
}
</style>
plugins/yunEditor.js 0 → 100644
import yunEditor from '../components/common/editor';
import Vue from 'vue';
Vue.use(yunEditor);
plugins/yunTextarea.js 0 → 100644
import YunTextarea from '../components/common/auto-textarea';
import Vue from 'vue';
Vue.use(YunTextarea)
plugins/yunVideo.js
import YunVideo from '../components/common/video/src/main.vue';
import YunVideo from '../components/common/video';
import Vue from 'vue';
Vue.use(YunVideo)
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