Skip to content

B
beyond-clouds-front
Commit 32a32b8c by yanju
Options

pages

parent f3967649
Showing with 946 additions and 162 deletions
components/common/icon/src/icon.vue
......@@ -53,11 +53,9 @@
transition:.5s ease;
display:inline-block;
padding-bottom: 5*$length;
vertical-align: middle;
&:before{
display: inline-block;
height:100%;
vertical-align: middle;
}
}
</style>
components/pc/pageHeader.vue
......@@ -29,11 +29,13 @@
</p>
</div>
<div class="header-center-r" v-if="user_id">
<yun-icon name="add" color="#ccc" hoverColor="#8CD88C" @mouseover.native="showHideBox1=true"></yun-icon>
<yun-icon name="notification" color="#ccc" hoverColor="#F8A06F"></yun-icon>
<img class="user-photo" :src="photo" alt="" @mouseover="showHideBox2=true">
<yun-icon name="add" color="#ccc" hoverColor="#8CD88C"
@mouseover.native="changeStateShowBox(1)" @mouseleave.native="changeStateHideBox(1)"></yun-icon>
<yun-icon name="notification" color="#ccc" hoverColor="#F8A06F"
@mouseover.native="changeStateShowBox(3)" @mouseleave.native="changeStateHideBox(3)"></yun-icon>
<img class="user-photo" @mouseleave="changeStateHideBox(2)" :src="photo" alt="" @mouseover="changeStateShowBox(2)">
<transition name="fade">
<ul class="abs-box abs-box1" v-if="showHideBox1" @mouseleave="showHideBox1=false">
<ul class="abs-box abs-box1" v-if="showHideBox1" @mouseleave="changeStateHideBox(1)">
<li>发布项目</li>
<li>写博客</li>
<li>发表动态</li>
......@@ -42,7 +44,7 @@
</ul>
</transition>
<transition name="fade">
<ul class="abs-box abs-box2" v-if="showHideBox2" @mouseleave="showHideBox2=false">
<ul class="abs-box abs-box2" v-if="showHideBox2" @mouseleave="changeStateHideBox(2)">
<li>我的主页</li>
<li>我的喜欢</li>
<li>我的收藏</li>
......@@ -51,6 +53,9 @@
<li>安全退出</li>
</ul>
</transition>
<transition name="fade">
<alerts-card class="abs-box3" v-if="showHideBox3" @mouseleave.native="changeStateHideBox(3)"></alerts-card>
</transition>
</div>
</div>
......@@ -63,6 +68,9 @@
<script>
import AlertsCard from './alertsMessage/alertsCard';
export default {
name:'container-header',
data(){
......@@ -71,9 +79,62 @@
photo:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2575047779,2966283883&fm=26&gp=0.jpg',
showHideBox1:false,
showHideBox2:false,
showHideBox3:false,
searchValue:'',
hideBox1Time:null,
hideBox2Time:null,
hideBox3Time:null,
}
}
},
components:{
AlertsCard
},
mounted(){
},
methods:{
changeStateHideBox(...arg){
if(arg.indexOf(1)===0){
clearTimeout(this.hideBox1Time);
this.hideBox1Time = setTimeout(()=>{
this.showHideBox1=false
},800)
}
if(arg.indexOf(2)===0){
clearTimeout(this.hideBox2Time);
this.hideBox2Time = setTimeout(()=>{
this.showHideBox2=false
},800)
}
if(arg.indexOf(3)===0){
clearTimeout(this.hideBox3Time);
this.hideBox3Time = setTimeout(()=>{
this.showHideBox3=false
},800)
}
},
changeStateShowBox(...arg){
if(arg.indexOf(1)===0){
this.showHideBox1=true
this.showHideBox2=false
this.showHideBox3=false
}
if(arg.indexOf(2)===0){
this.showHideBox1=false
this.showHideBox2=true
this.showHideBox3=false
}
if(arg.indexOf(3)===0){
this.showHideBox1=false
this.showHideBox2=false
this.showHideBox3=true
}
},
},
}
</script>
......@@ -159,6 +220,13 @@
.abs-box2{
right:calc(-50% + 16px);
}
.abs-box3{
transition: .4s ease;
position:absolute;
top:74*$length;
background-color: #fff;
right:calc(-50% + 10px);
}
}
}
......
pages/detail.vue
<template>
<div class="dynamic-container">
<div class="dynamic-container__left">
<div class="detail-container">
<div class="detail-container__left">
<div class="article-container">
<div class="article__header">
<yun-avatar src="" name="" size="60px" border-r="4px" style="margin-right: 16px"></yun-avatar>
<div class="header-info">
<p class="title">项目的标题</p>
<div class="infos">
<div class="info-left">
<div class="icon-box">
<p class="icon">
<yun-icon name="hot" size="12px" color="#fff"></yun-icon>
</p>
</div>
<div class="dynamic-container__center">
<release-card></release-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<p class="icon">
<yun-icon name="like2" size="12px" color="#fff"></yun-icon>
</p>
</div>
<div class="label-box">
<p>前端</p>
<p>js</p>
<p>java</p>
<p>python</p>
</div>
</div>
<div class="info-right">
<p class="left">
jetris<span>·</span>4小时前
</p>
<div class="right">
<div class="icon-box">
<yun-icon name="star" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>4</span>
</div>
<div class="icon-box">
<yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>4</span>
</div>
<div class="icon-box">
<yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>4</span>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="article__introduce">
用户体验越来越在产品中受到重视。它是一个含义广泛的术语，百度定义是：用户体验（User Experience，简称UE/UX）是用户在使用产品过程中建立起来的一种纯主观感受。
</p>
<div class="article__content" v-html="innerHtml1">
</div>
<div class="dynamic-container__right">
<card-container title="话题热搜榜" label="换一换" more="更多">
</div>
<div class="article__like">
<yun-icon name="like_egg" class="egg"></yun-icon>
<yun-icon name="like1" class="heart"></yun-icon>
<p class="num">122</p>
</div>
<div class="article__footer">
<p class="link">原文链接：<a target="_blank" href="https://jetris.zcool.com.cn/"> <span>https://jetris.zcool.com.cn/</span></a></p>
<p class="report">举报</p>
<div class="project" v-if="false">
<p>
<yun-icon name="home" size="12px" style="margin-right: 5px"></yun-icon>项目首页
</p>
<p>
<yun-icon name="project" size="12px" style="margin-right: 5px"></yun-icon>项目文档
</p>
<p>
<yun-icon name="download" size="12px" style="margin-right: 5px"></yun-icon>项目下载
</p>
</div>
</div>
</div>
<div class="article-comment">
<textarea name="" id="" cols="30" rows="10" class="release-area"></textarea>
<div class="button-box">
<p>评论</p>
</div>
<div class="comments-header">
<p class="left">
<span>全部评论</span>
<span>9</span>
</p>
<div class="right">
<p>最新</p>
<p>楼层</p>
<p>点赞</p>
</div>
</div>
</div>
<comment-card></comment-card>
<comment-card></comment-card>
<comment-card></comment-card>
<comment-card></comment-card>
<comment-card></comment-card>
</div>
<div class="detail-container__right">
<user-card></user-card>
<card-container style="margin-top:16px" title="相关推荐" label="换一换" more="更多">
</card-container>
<card-container style="margin-top:16px" title="推荐用户" label="换一换" more="更多">
</card-container>
</div>
<div class="article-option">
<div class="option-item">
<yun-icon name="star" class="star"></yun-icon>
</div>
<div class="option-item">
<yun-icon name="like1" class="like"></yun-icon>
</div>
<div class="option-item">
<yun-icon name="comment" class="comment"></yun-icon>
</div>
<div class="share-word">分享</div>
<div class="option-item">
<embed src="../assets/svg/weibo.svg" width="18" height="21"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</div>
<div class="option-item">
<embed src="../assets/svg/wechat.svg" width="18" height="21"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</div>
<div class="option-item">
<embed src="../assets/svg/qq.svg" width="18" height="21"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</div>
</div>
</div>
</template>
......@@ -25,15 +142,22 @@
<script>
import ReleaseCard from '../components/pc/releaseCard';
import UserCard from '../components/pc/userCard';
import SocialContactCard from '../components/pc/socialContactCard';
import CardContainer from '../components/pc/cardContainer';
import CommentCard from '../components/pc/commentCard';
export default {
data(){
return{
innerHtml1 : `<div style="text-align: center;"><br></div><p style="text-align: center;">一</p><p>&nbsp; &nbsp; &nbsp; 环境不会因你而变，解决之道在于改变自己。</p><p>&nbsp; &nbsp; &nbsp; 二等奖毕竟不是一等奖，更没机会代表中国学子参加全球总决赛，从小到大当惯了学霸的赵力力，当然心有不甘。<br></p><p>&nbsp; &nbsp; &nbsp; 这里是“2019华为中国区大学生ICT大赛决赛颁奖典礼”。领奖台上，他和团队伙伴接受着大家的掌声。</p><p>&nbsp; &nbsp; &nbsp;&nbsp;<strong>背景墙上是大赛的宣传画，正在奔跑的人物剪影，以及赛事slogan：Connection（联接）、Glory（荣耀）、Future（未来）</strong>。</p><p>&nbsp; &nbsp; &nbsp; 更没人知道，两个月的经历如电影胶片，此刻一帧帧地在赵力力的脑海中闪回，或电光火石瞬间切换，或延时慢镜清晰定格。</p><p><br></p><p style="text-align: center;"><img src="https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/6a8a145a7e7548d088d3c1b92178a290-file" style="max-width:100%;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">二</p><p style="text-align: left;">&nbsp; &nbsp; &nbsp; 今年正上大二的赵力力，是一位典型的“00后”。生长、生活在这个ICT高速发展的时代，家里就经常购买、更新各类电子产品，在社会上更是眼见着信息技术迅猛地改变着身边的大事小情。一切令他吃惊、好奇，也让他享受、着迷。<br></p><p>&nbsp; &nbsp; &nbsp; 随后的发展皆是顺理成章。这位“科技迷”如愿就读一所工科名校，并选择了计算机工程专业；学校设立有“华为ICT学院”，他在第一时间就报名成为了学员。</p><p>&nbsp; &nbsp; &nbsp;&nbsp;<strong>赵力力其实是一个缩影，这一代年轻人耳濡目染，与信息技术有着天然的亲近感。</strong>这种无处不在的“联接”（Connection）伴随着他们成长，他们见证并参与信息时代一波又一波的大潮，经历着这个伟大时代种种日新月异的变化。</p><p style="text-align: center;"><br></p><p style="text-align: center;">三</p><section><p>&nbsp; &nbsp; &nbsp; 进入“华为ICT学院”学习，赵力力更有一种如鱼得水的舒畅感。<br></p></section><p>&nbsp; &nbsp; &nbsp; “华为ICT学院”的课程，是将最新的ICT技术及应用融入到教学中，以实践案例与项目为主，通过线上线下的学习以及实际操作，弥补高校缺少实际工程项目经验的短板，大大加强了产业与教育的结合。</p><p>&nbsp; &nbsp; &nbsp; 最新技术及发展趋势、实践与理论的紧密联系、重视实际操作——这些已经不仅仅是对学生们既有专业课程的有力补充，更是两者间的互融共生、相得益彰。</p><p>&nbsp; &nbsp; &nbsp; 赵力力清楚地记得，有一节课专门讲授机器人，老师从科幻电影谈到当前人工智能技术的发展现状，还指导同学们开发并动手制作一款智能芯片，尽管很初级、效果也很有限，但大家都兴奋无比，充满了热情。</p><p style="text-align: center;"><br></p><p style="text-align: center;">四</p><p>&nbsp; &nbsp; &nbsp; 两个月前，赵力力进入了大赛准备阶段。</p><p>&nbsp; &nbsp; &nbsp; 经过在“华为ICT学院”的学习，并通过“华为大学生ICT大赛”来进一步考察、检验学习效果，以赛促学、以赛促教、以赛促发展；同样，大赛内容与当今前沿技术结合紧密，体现了产业的趋势和技术的发展方向——大赛的目的很明确，同时也为同学们提供一个展示的舞台，让他们与业界最新技术及知识再一次进行直观的“联接”（Connection）。</p><p style="text-align: center;"><img src="https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/639b348ac55049088c3a7a3acde418ed-file" style="max-width:100%;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">五</p><section><p>&nbsp; &nbsp; &nbsp; “每一代年轻人都有着属于自己的青春和热血，在不同时间段都有着或近或远的奋斗目标。”</p></section><p>&nbsp; &nbsp; &nbsp; 步入大学之时，赵力力就立志日后成为一名机器人设计师。四年间的学习，正是他跬步累积的过程，每一点一滴的知识和见识，都会给他的理想添砖加瓦。</p><p>&nbsp; &nbsp; &nbsp; 身为团队的队长，与另外三位伙伴如何进行合理分工，如何达成有效配合及协作，如何在遇到困难时给伙伴们加油打气，并想办法继续推进，赵力力似乎一夜之间明白了什么是“团队精神”和“领导力”。</p><p>&nbsp; &nbsp; &nbsp; 打小就不甘人后的他，这次参加大赛给自己定了一个“小目标”，那就是夺得一等奖，并代表中国区角逐全球总决赛。</p><p>&nbsp; &nbsp; &nbsp; 所有的收获，都归于“荣耀”（Glory）——每次见到这个美妙的字眼，赵力力都会握紧拳头。</p><p><br></p><p style="text-align: center;">六</p><p>&nbsp; &nbsp; &nbsp; ICT行业一日千里，任何人、任何企业都不可能时时高居浪尖，只有开放和不断探索、与时俱进，方能紧抓潮流、不被时代抛弃。</p><p>&nbsp; &nbsp; &nbsp; 而今日积月累的学习，正是为了将来学以致用。赵力力也很清楚，学习、奋斗应该是一种常态，无论世事变幻，都需要保持这样积极的心态和状态。他那“学霸”的标签，也不是一日就炼成的。</p><p>&nbsp; &nbsp; &nbsp; 作为全球ICT产业的领军企业，华为在其三十年的发展历程中，努力将人力变成人才。人才的源头主要是学生，通过“华为ICT学院”的持续学习，以及“华为大学生ICT大赛”的考察，华为希望让学生从大学阶段就积极了解行业的最新技术，增强对行业的认识和理解，加强技能的提升，快速对接产业需求，同时注重实践及团队协作，进而不断培养出创新、创造型人才。</p><p>&nbsp; &nbsp; &nbsp; 不仅如此，华为还针对学生就业而积极投入，“华为ICT人才联盟双选会”即是这一决策的落地。其目的，在于搭建高校人才与企业的直接沟通平台，一方面推动校园人才从学生到职场的快速转身，另一方面帮助企业实现人才的吸纳和储备。</p><p>&nbsp; &nbsp; &nbsp; 今年大二的赵力力，还不着急考虑就业。不过，学长们积极参加“华为ICT人才联盟双选会”，他看到眼里，也在心里增添了一份踏实。</p><p>&nbsp; &nbsp; &nbsp; 而今青春洋溢、奋发向上的学生，将是ICT行业来日的希望和主力军。耕耘今朝、放眼未来（Future），华为的社会责任感、宏大布局以及务实行事，展露无遗。</p><p><br></p><p style="text-align: center;">七</p><p style="text-align: left;">&nbsp; &nbsp; &nbsp; “联接”（Connection）、“荣耀”（Glory）、“未来”（Future）——大赛的Slogan并非简单的口号，华为对其赋予了深入的内涵。<br></p><p style="text-align: left;"><br></p><p style="text-align: center;"><img src="https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/e41e2e3c68bf4d39b028d88a652d0889-file" style="max-width:100%;"><br></p><p style="text-align: left;"><br></p><p style="text-align: left;">&nbsp; &nbsp; &nbsp; 华为就是孜孜不倦的老师和园丁，围绕着学生们的“成长”和“就业”，采用“校企联合”模式，设立“华为ICT学院”、举办“华为大学生ICT大赛”以及“华为ICT人才联盟双选会”，构建出卓有成效的“育人”、“用人”平台，创造出更加肥沃的土壤、更加便利快速的生长环境，从而建立起人才生态建设的完整链条。<br></p><p>&nbsp; &nbsp; &nbsp; 而这，也正契合华为始终坚持的“平台+AI+生态”战略。<br></p><p style="text-align: center;"><br></p><p style="text-align: center;">八</p><p>&nbsp; &nbsp; &nbsp; 欢乐的颁奖典礼，还在继续着。领取完获奖证书和奖品，赵力力回到座位上，将掌声献给一等奖获得者。</p><p>&nbsp; &nbsp; &nbsp; “明年的下一届，我没准可以作为教练或者辅导员，支持学弟学妹们，拿回一等奖。”</p><p>&nbsp; &nbsp; &nbsp; 想到这里，他又笑了，这次他笑得很开心……</p><p><br></p>`
}
},
components:{
ReleaseCard,SocialContactCard,CardContainer
UserCard,SocialContactCard,CardContainer,CommentCard
},
}
......@@ -41,23 +165,463 @@
</script>
<style lang="scss" scoped>
.dynamic-container{
<style lang="scss" >
.detail-container{
width: $pageWidth;
margin:16*$length auto;
@extend %flex-row-spb;
align-items: flex-start;
.dynamic-container__left{
width:106*$length;
}
.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:814*$length;
height:60*$length;
@extend %flex-column-spb;
align-items:flex-start;
.title{
@include fontStyle(24,24,500,#222,left);
}
.infos{
@extend %flex-row-spb;
width:100%;
.info-left{
@extend %flex-row-spb;
> .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{
margin-left:5*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> p{
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;
.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{
li,ul,ol{
list-style: disc outside none;
}
ul,ol{
padding-left:40*$length
;
}
*{
word-wrap: break-word;
font-weight:500;
font-size:14*$font-size;
line-height:1.5;
}
b, strong{
font-weight: bold;
}
h1{
@include fontStyle(28,36,900,#333,start);
height:auto;
}
h2{
@include fontStyle(24,32,900,#333,start);
height:auto;
}
h3{
@include fontStyle(20,28,900,#333,start);
height:auto;
}
h4{
@include fontStyle(20,28,900,#333,start);
height:auto;
}
a{
color:#00AAE6;
}
p{
width:100%;
overflow: auto;
color:#333;
font-size: 14*$font-size;
line-height:24*$length;
word-wrap: break-word;
letter-spacing: 2*$length;
}
code{
width:100%;
background-color: #f1f1f1;
color:#000;
border-radius: 3*$length;
padding:3*$length 5*$length;
margin:0 3*$length;
}
pre{
line-height: 1.5;
padding: 15px;
background-color: #f1f1f1;
border-radius: 5px;
}
blockquote{
display: block;
border-left: 8*$length solid #d0e5f2;
padding: 5*$length 10*$length;
margin: 10*$length 0;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
}
table{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
font-size: 14*$font-size;
& tbody{
& tr{
}
}
}
img,
audio,
video{
max-width: 100%;
height: auto;
}
td {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3*$length 5*$length;
}
th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3*$length 5*$length;
}
}
.article__like{
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{
font-size: 62*$length;
color:#EFEFEF;
padding-bottom: 16*$length;
@extend %animate-transition;
}
.heart{
position: absolute;
font-size: 18*$length;
color:#CCCCCC;
left:24*$length;
top:10*$length;
@extend %animate-transition;
}
.num{
position: absolute;
@include fontStyle(12,19,500,#999,center);
left:0;
width:100%;
top:38*$length;
@extend %animate-transition;
}
}
.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;
}
}
}
}
}
.dynamic-container__center{
width:816*$length;
}
.dynamic-container__right{
.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;
}
&: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)
}
}
}
</style>
pages/dynamic/index.vue
<template>
<div class="dynamic-container">
<div class="dynamic-container__left">
<nav-wrap
width="106px"
height="480px"
:list="list"
></nav-wrap>
</div>
<div class="dynamic-container__center">
<release-card></release-card>
......@@ -29,12 +33,75 @@
import ReleaseCard from '../../components/pc/releaseCard';
import SocialContactCard from '../../components/pc/socialContactCard';
import CardContainer from '../../components/pc/cardContainer';
import NavWrap from "../../components/pc/nav/navWrap";
export default {
data(){
return{
list: [
{
label: '推荐',
address: '/dynamic',
id: '推荐'
},
{
label: '热门',
address: '/dynamic',
id: '热门'
},
{
label: '关注',
address: '/dynamic',
id: '关注'
},
{
label: '我的',
address: '/dynamic',
id: '我的'
},
{
label: '文字',
address: '/dynamic',
id: '文字'
},
{
label: '视频',
address: '/dynamic',
id: '视频'
},
{
label: '图片',
address: '/dynamic',
id: '图片'
},
{
label: '项目',
address: '/dynamic',
id: '项目'
},
{
label: '代码',
address: '/dynamic',
id: '代码'
},
],
}
},
components:{
ReleaseCard,SocialContactCard,CardContainer
ReleaseCard,SocialContactCard,CardContainer,NavWrap
},
}
......
pages/index.vue
<template>
<div class="container">
<div>
<h1 class="title">
</h1>
<card-container
title="最新回答"
label="换一换"
more="加载更多"
width="938px"
height="786px"
></card-container>
<card-container
title="热门项目"
label="更新"
more="更多项目"
width="302px"
height="446px"
></card-container>
<nav-wrap></nav-wrap>
<h2 class="subtitle" @click="showAlert">
beyond-clouds project
</h2>
<nav-wrap></nav-wrap>
</div>
</div>
<home></home>
</template>
<script>
import CardContainer from '../components/pc/cardContainer';
import NavWrap from '../components/pc/nav/navWrap';
import Home from './home';
export default {
data(){
......@@ -42,73 +15,10 @@ export default {
},
components:{
CardContainer,NavWrap
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
Home
mounted(){
// this.$popupbox();
// message 使用方法
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
<style scoped>
.container {
margin: 0 auto;
min-height: 300vh;
display: flex;
/*background-color: #fff;*/
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
pages/personal-center/account.vue
<template>
<div class="account-container">
<div class="account-container__l">
<nav-card :labelList="labelList"></nav-card>
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</div>
<div class="account-container__r">
<card-container style="margin-top: 16px" title="初次登录请提交登录密码" label="账号注册">
<card-container style="margin-top: 16px;padding-bottom: 32px" title="初次登录请提交登录密码" label="账号注册">
<div class="bind-account-item__wrap">
<div class="bind-account-item">
<div class="item__left">
......@@ -102,7 +106,7 @@
</div>
</card-container>
<card-container style="margin-top: 16px" title="账号绑定" >
<card-container style="margin-top: 16px;padding-bottom: 32px" title="账号绑定" >
<div class="bind-account-item__wrap">
<input type="text" placeholder="请输入密码">
<input type="text" placeholder="请再次确认密码">
......@@ -111,7 +115,7 @@
<p class="submit-button">保存</p>
</card-container>
<card-container style="margin-top: 16px" title="修改登录密码" label="忘记密码">
<card-container style="margin-top: 16px;padding-bottom: 32px" title="修改登录密码" label="忘记密码">
<div class="bind-account-item__wrap">
<input type="text" placeholder="请输入旧密码">
<input type="text" placeholder="请输入新密码">
......@@ -128,18 +132,30 @@
import NoticeCard from '../../components/pc/noticeCard';
import CardContainer from '../../components/pc/cardContainer';
import NavWrap from "../../components/pc/nav/navWrap";
export default {
data(){
return{
labelList: ['我的消息','私信'],
list: [
{
label: '基本资料',
address: '/personal-center/info',
id: '基本资料'
},
{
label: '账号安全',
address: '/personal-center/account',
id: '账号安全'
}
],
selected:'全部'
}
},
components:{
NoticeCard,CardContainer
NoticeCard,CardContainer,NavWrap
......@@ -185,6 +201,7 @@
@extend %flex-row-spb;
align-items: flex-start;
.account-container__l{
margin-top: 16*$length;
overflow:hidden;
width:302*$length;
}
......@@ -194,7 +211,8 @@
border-radius: 4*$length;
.bind-account-item__wrap{
width:726*$length;
margin:32*$length auto;
margin:32*$length auto 0;
@extend %flex-row-spb;
& input{
width:334*$length;
......@@ -255,7 +273,8 @@
border-radius: 4*$length;
background-color: #75D098;
@include fontStyle(14,48,500,#fff,center);
margin:32*$length auto;
margin:32*$length auto 0;
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
......
pages/personal-center/black-list/index.vue
<template>
<div class="message-container">
<div class="message-container__l">
<nav-card :labelList="labelList"></nav-card>
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</div>
<div class="message-container__r">
......@@ -20,18 +24,36 @@
import FanCard from '../../../components/pc/fanCard';
import NavWrap from "../../../components/pc/nav/navWrap";
export default {
data(){
return{
labelList: ['我的消息','私信'],
list: [
{
label: '我的关注',
address: '/personal-center/following',
id: '我的消息'
},
{
label: '我的粉丝',
address: '/personal-center/fans',
id: '我的粉丝'
},
{
label: '黑名单',
address: '/personal-center/black-list',
id: '黑名单'
},
],
selected:'项目'
}
},
components:{
FanCard
FanCard,NavWrap
},
......@@ -76,6 +98,7 @@
@extend %flex-row-spb;
align-items: flex-start;
.message-container__l{
margin-top:16*$length;
overflow:hidden;
width:302*$length;
}
......
pages/personal-center/collect/index.vue
<template>
<div class="message-container">
<div class="message-container__l">
<nav-card :labelList="labelList"></nav-card>
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</div>
<div class="message-container__r">
<div class="container__tab">
......@@ -55,18 +59,30 @@
import ProjectCard from '../../../components/pc/projectCard';
import NavWrap from "../../../components/pc/nav/navWrap";
export default {
data(){
return{
labelList: ['我的消息','私信'],
list: [
{
label: '我的喜欢',
address: '/personal-center/like',
id: '我的消息'
},
{
label: '我的收藏',
address: '/personal-center/collect',
id: '我的收藏'
}
],
selected:'项目'
}
},
components:{
ProjectCard
ProjectCard,NavWrap
},
......@@ -111,6 +127,8 @@
@extend %flex-row-spb;
align-items: flex-start;
.message-container__l{
margin-top:16*$length;
overflow:hidden;
width:302*$length;
}
......
pages/personal-center/fans/index.vue
<template>
<div class="message-container">
<div class="message-container__l">
<nav-card :labelList="labelList"></nav-card>
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</div>
<div class="message-container__r">
......@@ -20,18 +24,36 @@
import FanCard from '../../../components/pc/fanCard';
import NavWrap from "../../../components/pc/nav/navWrap";
export default {
data(){
return{
labelList: ['我的消息','私信'],
list: [
{
label: '我的关注',
address: '/personal-center/following',
id: '我的消息'
},
{
label: '我的粉丝',
address: '/personal-center/fans',
id: '我的粉丝'
},
{
label: '黑名单',
address: '/personal-center/black-list',
id: '黑名单'
},
],
selected:'项目'
}
},
components:{
FanCard
FanCard,NavWrap
},
......@@ -76,6 +98,7 @@
@extend %flex-row-spb;
align-items: flex-start;
.message-container__l{
margin-top:16*$length;
overflow:hidden;
width:302*$length;
}
......
pages/personal-center/following/index.vue
<template>
<div class="message-container">
<div class="message-container__l">
<nav-card :labelList="labelList"></nav-card>
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</div>
<div class="message-container__r">
......@@ -20,18 +24,36 @@
import FanCard from '../../../components/pc/fanCard';
import NavWrap from "../../../components/pc/nav/navWrap";
export default {
data(){
return{
labelList: ['我的消息','私信'],
list: [
{
label: '我的关注',
address: '/personal-center/following',
id: '我的消息'
},
{
label: '我的粉丝',
address: '/personal-center/fans',
id: '我的粉丝'
},
{
label: '黑名单',
address: '/personal-center/black-list',
id: '黑名单'
},
],
selected:'项目'
}
},
components:{
FanCard
FanCard,NavWrap
},
......@@ -76,6 +98,7 @@
@extend %flex-row-spb;
align-items: flex-start;
.message-container__l{
margin-top:16*$length;
overflow:hidden;
width:302*$length;
}
......
pages/personal-center/info.vue
<template>
<div class="info-container">
<div class="info-container__l">
<nav-card :labelList="labelList"></nav-card>
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</div>
<div class="info-container__r">
<card-container style="margin-top: 16px" title="个人信息">
<card-container style="margin-top: 16px;padding-bottom: 32px" title="个人信息">
<div class="info-account-item__wrap">
<yun-avatar size="90px" name="昵称"> </yun-avatar>
<p class="change-button">修改头像</p>
......@@ -65,7 +69,7 @@
<p class="submit-button">保存</p>
</card-container>
<card-container style="margin-top: 16px" title="联系方式" >
<card-container style="margin-top: 16px;padding-bottom: 32px" title="联系方式" >
<div class="info-account-item__wrap">
<input type="text" class="input1" placeholder="微信号">
......@@ -151,18 +155,30 @@
import NoticeCard from '../../components/pc/noticeCard';
import CardContainer from '../../components/pc/cardContainer';
import NavWrap from "../../components/pc/nav/navWrap";
export default {
data(){
return{
labelList: ['我的消息','私信'],
list: [
{
label: '基本资料',
address: '/personal-center/info',
id: '基本资料'
},
{
label: '账号安全',
address: '/personal-center/account',
id: '账号安全'
}
],
selected:'全部'
}
},
components:{
NoticeCard,CardContainer
NoticeCard,CardContainer,NavWrap
......@@ -193,6 +209,7 @@
@extend %flex-row-spb;
align-items: flex-start;
.info-container__l{
margin-top: 16*$length;
overflow:hidden;
width:302*$length;
}
......@@ -391,7 +408,7 @@
border-radius: 4*$length;
background-color: #75D098;
@include fontStyle(14,48,500,#fff,center);
margin:32*$length auto;
margin:32*$length auto 0;
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
......
pages/personal-center/like/index.vue
<template>
<div class="message-container">
<div class="message-container__l">
<nav-card :labelList="labelList"></nav-card>
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</div>
<div class="message-container__r">
<div class="container__tab">
......@@ -55,18 +59,30 @@
import ProjectCard from '../../../components/pc/projectCard';
import NavWrap from "../../../components/pc/nav/navWrap";
export default {
data(){
return{
labelList: ['我的消息','私信'],
list: [
{
label: '我的喜欢',
address: '/personal-center/like',
id: '我的消息'
},
{
label: '我的收藏',
address: '/personal-center/collect',
id: '我的收藏'
}
],
selected:'项目'
}
},
components:{
ProjectCard
ProjectCard,NavWrap
},
......@@ -113,6 +129,8 @@
.message-container__l{
overflow:hidden;
width:302*$length;
margin-top:16*$length;
}
.message-container__r{
overflow:hidden;
......
pages/personal-center/message.vue
<template>
<div class="message-container">
<div class="message-container__l">
<nav-card :labelList="labelList"></nav-card>
<nav-wrap
width="302px"
height="100px"
:list="list"
></nav-wrap>
</div>
<div class="message-container__r">
<div class="container__tab">
......@@ -55,18 +59,30 @@
import NoticeCard from '../../components/pc/noticeCard';
import NavWrap from "../../components/pc/nav/navWrap";
export default {
data(){
return{
labelList: ['我的消息','私信'],
list: [
{
label: '我的消息',
address: '/personal-center/message',
id: '我的消息'
},
{
label: '私信',
address: '/personal-center/message#',
id: '私信'
}
],
selected:'全部'
}
},
components:{
NoticeCard
NoticeCard,NavWrap
},
......@@ -111,6 +127,7 @@
@extend %flex-row-spb;
align-items: flex-start;
.message-container__l{
margin-top:16*$length;
overflow:hidden;
width:302*$length;
}
......
vim.exe.stackdump 0 → 100644
Stack trace:
Frame Function Args
00180232080 0018005D44E (0018021D639, 0018021DC39, 0018022E2F0, 000FFFFB720)
00180232080 00180046609 (C0C0C000008080, FF000000808080, FFFF000000FF00, FF00FF000000FF)
00180232080 00180046642 (0018021D616, 000000001E7, 0018022E2F0, 80808000C0C0C0)
00180232080 001800433C3 (00000000000, 00180232080, 7FFDD001888E, 001800004EC)
00180232080 0018006B581 (C0C0C000008080, FF000000808080, FFFF000000FF00, FF00FF000000FF)
00180232080 0018006C3CC (00000000000, 0010065D4A8, 00000000000, 00000000000)
00180232080 0018006E4E6 (00000000000, 00000000008, 0006C57D890, 00000000000)
00000000001 00180134FA6 (0010065D4A0, 00000000008, 00000000000, 00000000000)
00000000001 0018011C93B (0010065D4A0, 00000000008, 00000000000, 00000000000)
00000000001 001004F6234 (0010057387A, 00000000002, 00100663E98, 00100663E9C)
00000000001 0010057F413 (00000000008, 001006642E0, 00000000000, 00000000000)
00000000001 001005747F6 (00000000000, 0005A6D26A9, 0001772867C, 00000010000)
00000000001 001005D381B (00000000001, 0006B7E1F10, 00180053BD3, 00100666620)
00600049080 001005E0BAA (00000000020, 001802DA8E0, 00180047B96, 00180046BA0)
000FFFFCCB0 00180047C07 (00000000000, 00000000000, 00000000000, 00000000000)
00000000000 00180045873 (00000000000, 00000000000, 00000000000, 00000000000)
End of stack trace (more stack frames may be present)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment