Skip to content

B
beyond-clouds-front
Commit 87f86efd by yanju
Options

home.vue

parent 93912b72
Showing with 167 additions and 43 deletions
action/utils/dataConvert.js 0 → 100644
function dateConvert(time){
let newDate = new Date(time);
let year = newDate.getFullYear();
let month = newDate.getMonth()+1;
let day = newDate.getDate();
let hour = newDate.getHours();
let min = newDate.getMinutes();
let sec = newDate.getSeconds();
return `${year}-${month}-${day} ${hour}:${min}:${sec}`
}
export {dateConvert};
components/pc/projectCard.vue
<template>
<div class="project-card__wrap">
<template >
<div class="project-card__wrap" v-if="cardId">
<div class="project-card" @click="$router.push('/detail')">
<div class="project-card__left">
<div class="project-card__header">
<p class="title">开源社区</p>
<p class="title">{{cardName}}</p>
<div class="icon-box">
<p class="icon">
<p class="icon1">
<yun-icon name="hot" size="12px" color="#fff"></yun-icon>
</p>
<p class="icon">
<p class="icon2">
<yun-icon name="like2" size="12px" color="#fff"></yun-icon>
</p>
</div>
<div class="label-box" v-if="cardType===1">
<p>前端</p>
<p>js</p>
<p>java</p>
<p>python</p>
<p v-for="(val,index) in cardTags">{{val.tagName}}</p>
</div>
</div>
<p class="project-card__body">
引言 如今我们所处的时代，是 <span># 移动互联网时代 #</span> ，也可以说是视无铁也知什别立目百效得革金，提出频时代。从快播到抖音，从“三生三世...
引言 如今我们所处的时代，是 <span># 移动互联网时代 #</span> ，也可以说是视无铁也知什别立目百效得革金，提出频时代。从快播到抖音，从“三生三世...
引言 如今我们所处的时代，是 <span># 移动互联网时代 #</span> ，也可以说是视无铁也知什别立目百效得革金，提出频时代。从快播到抖音，从“三生三世...
{{cardIntro}}
</p>
<div class="project-card__footer" v-if="cardType!==3">
<p class="info-left">
jetris<span>·</span>4小时前
{{cardUser}}<span>·</span>{{cardTime}}
</p>
<div class="info-right">
<div class="icon-box">
<div class="icon-box" v-if="cardStar">
<yun-icon name="star" size="12px" vertical="top" color="#ccc"></yun-icon>
<span>4</span>
<span>{{cardStar}}</span>
</div>
<div class="icon-box">
<div class="icon-box" v-if="cardLike">
<yun-icon name="like1" size="12px" vertical="top" color="#ccc"></yun-icon>
<span>4</span>
<span>{{cardLike}}</span>
</div>
<div class="icon-box">
<div class="icon-box" v-if="cardView">
<yun-icon name="view" size="12px" vertical="top" color="#ccc"></yun-icon>
<span>4</span>
<span>{{cardView}}</span>
</div>
</div>
<div class="label-box" v-if="cardType===2">
<p>前端</p>
<p>js</p>
<p>java</p>
<p>python</p>
<p v-for="(val,index) in cardTags">{{val.tagName}}</p>
</div>
</div>
</div>
......@@ -67,16 +58,66 @@
<script>
import {dateConvert} from "../../action/utils/dataConvert";
export default {
name:'projectCard',
props:{
info:{
type:Object,
default: () => ({})
}
},
data(){
return{
src:'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
src:'',
cardType:3, //（props）1、项目 2、博客 3、资讯
info:{} //(props)
cardName:'',
cardIntro:'',
cardId:'',
cardTags:[],
cardTime:'',
cardUser:'',
cardStar:'',
cardLike:'',
cardView:'',
}
},
created(){
this.dateGet2Info();
},
methods:{
dateGet2Info(){
let info = this.info;
if(this.info.blogId){
this.cardName = info.blogTitle;
this.cardIntro = info.blogAbstract;
this.cardId = info.blogId;
this.src = info.cover;
this.cardTags = info.tags;
this.cardTime = dateConvert(info.createTime);
this.cardUser = info.userId;
this.cardType = 2;
}
if(this.info.projectId){
this.cardName = info.projectName;
this.cardIntro = info.projectDescription;
this.cardId = info.projectId;
this.src = info.cover;
this.cardTags = info.tags;
this.cardTime = dateConvert(info.createTime);
this.cardUser = info.author;
this.cardType = 1;
}
},
},
}
</script>
......@@ -107,7 +148,7 @@
margin-left:15*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> .icon{
> .icon1{
margin-right:10*$length;
width:20*$length;
height:20*$length;
......@@ -115,6 +156,14 @@
@extend %flex-column-center;
background-color: #FF7474;
}
> .icon2{
background-color: #F8A06F;
margin-right:10*$length;
width:20*$length;
height:20*$length;
border-radius:2*$length;
@extend %flex-column-center;
}
}
> .label-box{
......
nuxt.config.js
......@@ -34,7 +34,7 @@ module.exports = {
** Plugins to load before mounting the App
*/
plugins: [
'@/plugins/axios',
'~/plugins/axios',
{src:'~/plugins/mavonEditor.js',ssr:false},
{src:'~/plugins/cropper.js',ssr:false},
{src:'~/plugins/messageBox.js',ssr:false},
......@@ -57,6 +57,12 @@ module.exports = {
modules: [
'@nuxtjs/axios',
],
router: {
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
},
/*
** Build configuration
*/
......
pages/detail.vue
......@@ -150,12 +150,34 @@
export default {
asyncData ({ $axios }) {
return $axios.$get('/api/blogs?page=1&size=10').then((response) => {
if (response.code === 0) {
const blogs = response.data.dataList
.map(blog => blog.blogTitle)
.reduce((previousValue, currentValue, index) => {
if (index === 1) {
previousValue = `<li>${previousValue}</li>`
}
return previousValue + `<li>${currentValue}</li>`
})
const blogHtml = `<h6>服务端渲染测试，右键查看源码看看能不能找到我</h6><ul>${blogs}</ul>`
return {
blogHtml
}
}
})
},
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>`
}
},
created(){
console.log(this.blogHtml)
},
components:{
UserCard,SocialContactCard,CardContainer,CommentCard
},
......
pages/home.vue
......@@ -3,14 +3,10 @@
<div class="home-container__l">
<banner :imgArr="imgArr" style="margin-top: 40px"></banner>
<card-container style="margin-top: 40px" title="项目推荐" label="换一换" more="加载更多">
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card v-for="(val,index) in projectList" :info="val"></project-card>
</card-container>
<card-container style="margin-top: 16px" title="精选博文" label="换一换" more="加载更多">
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card v-for="(val,index) in blogList" :info="val"></project-card>
</card-container>
</div>
<div class="home-container__r">
......@@ -28,6 +24,7 @@
</card-container>
</div>
</div>
</template>
......@@ -37,8 +34,28 @@
import Banner from '../components/pc/banner';
import CardContainer from '../components/pc/cardContainer';
import ProjectCard from '../components/pc/projectCard';
import config from '../action/config';
export default {
async asyncData ({ $axios }) {
let blogList = await $axios.$get(config.api.get.Blog.list,{
params:{
page:1,
size:3,
}
});
let projectList = await $axios.$get(config.api.get.Project.list,{
params:{
page:1,
size:3,
}
});
return {blogList:blogList.data.dataList,projectList:projectList.data.dataList}
},
data(){
return{
imgArr:[
......@@ -50,7 +67,6 @@
'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',
],
}
},
......@@ -60,10 +76,29 @@
},
methods:{
showAlert(){
//获取数据
dataGetFunctionName(){
this.$axios.$get(config.api.get.Project.list,{
params:{
page:1,
size:1
}
}).then((response)=>{
//处理response
})
},
//提交数据
dataPostFunctionName(){
this.$axios.$post(config.api.post.Project.release,{
title:'',
}).then((response)=>{
//处理response
})
},
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
......@@ -75,15 +110,11 @@
// });
// }
});
}
},
},
mounted(){
// this.$popupbox();
// message 使用方法
this.dataPostFunctionName();
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
......
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