673 lines
17 KiB
Vue
673 lines
17 KiB
Vue
<template>
|
|
<div class="home-blog">
|
|
<!-- 背景加头像展示 -->
|
|
<!-- <div class="hero" :style="{ ...bgImageStyle }"> -->
|
|
<div class="hero">
|
|
<!-- <div><canvas id="worldwindcvn"></canvas></div> -->
|
|
<div id="cesiumContainer"></div>
|
|
<div id="intro">
|
|
|
|
<ModuleTransition>
|
|
<img
|
|
class="hero-img"
|
|
v-if="recoShowModule && $frontmatter.heroImage"
|
|
:style="heroImageStyle || {}"
|
|
:src="$withBase($frontmatter.heroImage)"
|
|
alt="hero"
|
|
/>
|
|
</ModuleTransition>
|
|
|
|
<ModuleTransition delay="0.04">
|
|
<div class="inner">
|
|
<h1 v-if="recoShowModule && $frontmatter.heroText !== null" style="color: white">
|
|
{{ $frontmatter.heroText || $title || 'vuePress-theme-reco' }}
|
|
</h1>
|
|
</div>
|
|
</ModuleTransition>
|
|
|
|
<ModuleTransition delay="0.08">
|
|
<p v-if="recoShowModule && $frontmatter.tagline !== null" class="description" style="color: white">
|
|
{{ $frontmatter.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}
|
|
</p>
|
|
</ModuleTransition>
|
|
<ModuleTransition>
|
|
<a id="down" href="#down">
|
|
<canvas id="downCanvas" width="30" height="50">
|
|
</canvas>
|
|
</a>
|
|
</ModuleTransition>
|
|
</div>
|
|
</div>
|
|
<!-- 简介 -->
|
|
<ModuleTransition>
|
|
<IntroContainer>
|
|
<subject-info></subject-info>
|
|
</IntroContainer>
|
|
</ModuleTransition>
|
|
<!-- 推荐文章 -->
|
|
<ModuleTransition>
|
|
<IntroContainer>
|
|
<recommend></recommend>
|
|
</IntroContainer>
|
|
</ModuleTransition>
|
|
<!-- 测试模块 -->
|
|
<ModuleTransition>
|
|
<!-- <canvas id="worldwindcvn"></canvas> -->
|
|
</ModuleTransition>
|
|
<!-- 博客展示 -->
|
|
<ModuleTransition delay="0.16">
|
|
<div v-show="recoShowModule" class="home-blog-wrapper">
|
|
<div class="blog-list">
|
|
<!-- 博客列表 -->
|
|
<note-abstract
|
|
:data="$recoPosts"
|
|
:currentPage="currentPage"></note-abstract>
|
|
<!-- 分页 -->
|
|
<pagation
|
|
class="pagation"
|
|
:total="$recoPosts.length"
|
|
:currentPage="currentPage"
|
|
@getCurrentPage="getCurrentPage" />
|
|
</div>
|
|
<div class="info-wrapper">
|
|
<PersonalInfo/>
|
|
<h4><i class="iconfont reco-category"></i> {{homeBlogCfg.category}}</h4>
|
|
<ul class="category-wrapper">
|
|
<li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
|
|
<router-link :to="item.path">
|
|
<span class="category-name">{{ item.name }}</span>
|
|
<span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
<hr>
|
|
<h4 v-if="$tags.list.length !== 0"><i class="iconfont reco-tag"></i> {{homeBlogCfg.tag}}</h4>
|
|
<TagList @getCurrentTag="getPagesByTags" />
|
|
<h4 v-if="$themeConfig.friendLink && $themeConfig.friendLink.length !== 0"><i class="iconfont reco-friend"></i> {{homeBlogCfg.friendLink}}</h4>
|
|
<FriendLink />
|
|
</div>
|
|
</div>
|
|
</ModuleTransition>
|
|
|
|
<ModuleTransition delay="0.24">
|
|
<Content v-show="recoShowModule" class="home-center" custom/>
|
|
</ModuleTransition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TagList from '@theme/components/TagList'
|
|
import FriendLink from '@theme/components/FriendLink'
|
|
import NoteAbstract from '@theme/components/NoteAbstract'
|
|
import pagination from '@theme/mixins/pagination'
|
|
import ModuleTransition from '@theme/components/ModuleTransition'
|
|
import PersonalInfo from '@theme/components/PersonalInfo'
|
|
import { getOneColor } from '@theme/helpers/other'
|
|
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
|
|
import IntroContainer from "./Custom/IntroContainer";
|
|
import SubjectInfo from './Custom/SubjectInfo';
|
|
import Recommend from './Custom/Recommend';
|
|
|
|
|
|
|
|
import AOS from 'aos'
|
|
// import WorldWind from 'worldwindjs'
|
|
export default {
|
|
mixins: [pagination, moduleTransitonMixin],
|
|
components: { NoteAbstract, TagList, FriendLink, ModuleTransition, PersonalInfo,IntroContainer ,SubjectInfo,Recommend},
|
|
data () {
|
|
return {
|
|
recoShow: false,
|
|
currentPage: 1,
|
|
tags: []
|
|
}
|
|
},
|
|
computed: {
|
|
homeBlogCfg () {
|
|
return this.$recoLocales.homeBlog
|
|
},
|
|
actionLink () {
|
|
const {
|
|
actionLink: link,
|
|
actionText: text
|
|
} = this.$frontmatter
|
|
|
|
return {
|
|
link,
|
|
text
|
|
}
|
|
},
|
|
heroImageStyle () {
|
|
return this.$frontmatter.heroImageStyle || {}
|
|
},
|
|
bgImageStyle () {
|
|
const initBgImageStyle = {
|
|
textAlign: 'center',
|
|
overflow: 'hidden',
|
|
background: `
|
|
url(${this.$frontmatter.bgImage
|
|
? this.$withBase(this.$frontmatter.bgImage)
|
|
: require('../images/bg.svg')}) center/cover no-repeat
|
|
`
|
|
}
|
|
const {
|
|
bgImageStyle
|
|
} = this.$frontmatter
|
|
|
|
return bgImageStyle ? { ...initBgImageStyle, ...bgImageStyle } : initBgImageStyle
|
|
},
|
|
heroHeight () {
|
|
return document.querySelector('.hero').clientHeight
|
|
}
|
|
},
|
|
mounted () {
|
|
this.recoShow = true
|
|
this._setPage(this._getStoragePage())
|
|
this.drawDown();
|
|
AOS.init({
|
|
duration: 1000,
|
|
});
|
|
// this.initWorldwind();
|
|
this.initCesium();
|
|
},
|
|
methods: {
|
|
initCesium () {
|
|
let Cesium = this.$cesium;
|
|
window.CESIUM_BASE_URL = '/cesium'
|
|
|
|
Cesium.Ion.defaultAccessToken =
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjI2ZjVjMS0zZTFjLTQ3MDAtYTZlZC02YWFjOWQwNzBjNjIiLCJpZCI6ODM1NTQsImlhdCI6MTY0NTY1NzYzM30.IPqS_sM-s_vzNnK0EAiTy6kpYP5RBYkuMgbqJtKQkPw";
|
|
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|
geocoder:false,//位置查找
|
|
homeButton:false,//视图返回初始位置
|
|
sceneModePicker:false,//视角选择器
|
|
baseLayerPicker:false,//底图选择器
|
|
navigationHelpButton:false,//导航帮助按钮
|
|
animation:false,//动画控制器
|
|
creditContainer:document.createElement("div"),//版权显示
|
|
timeline:false,//时间线
|
|
fullscreenButton:false,//全屏控件
|
|
vrButton:false,
|
|
skyBox:false
|
|
});
|
|
viewer.scene.globe.showGroundAtmosphere = true;// 打开大气层
|
|
viewer.scene.globe.enableLighting = true;// 打开时间光照
|
|
viewer.imageryLayers.removeAll();//清除影像图层集合中的图层
|
|
// 添加白天的影像图层
|
|
const dayLayer = viewer.imageryLayers.addImageryProvider(
|
|
// new Cesium.ArcGisMapServerImageryProvider({
|
|
// url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
|
|
// })
|
|
new Cesium.SingleTileImageryProvider({
|
|
url: "./images/BMNG_world.topo.bathy.200405.3.2048x1024.jpg",
|
|
rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
|
|
})
|
|
);
|
|
|
|
dayLayer.dayAlpha = 1.0;
|
|
dayLayer.nightAlpha = 0.0;
|
|
// 添加夜晚的影像图层
|
|
const nightLayer = viewer.imageryLayers.addImageryProvider(
|
|
// new Cesium.IonImageryProvider({
|
|
// assetId: 3812,
|
|
// })
|
|
new Cesium.SingleTileImageryProvider({
|
|
url: "./images/dnb_land_ocean_ice_2012.png",
|
|
rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
|
|
})
|
|
);
|
|
// nightLayer.alpha = 0;
|
|
nightLayer.dayAlpha = 0.0;
|
|
nightLayer.nightAlpha = 1.0;
|
|
nightLayer.brightness = 1.5
|
|
viewer.clock.multiplier = 4000;
|
|
viewer.clock.shouldAnimate = true;
|
|
// window.viewer = viewer;
|
|
// 设置相机视角
|
|
viewer.camera.setView({
|
|
destination: new Cesium.Cartesian3(11003440.120415999, 7527767.772270756, 5908317.429410059),
|
|
orientation: {
|
|
heading: 6.132482024698851, // east, default value is 0.0 (north)
|
|
pitch: -1.1287467794211539, // default value (looking down)
|
|
roll: 6.28264515992548, // default value
|
|
},
|
|
});
|
|
},
|
|
//绘制向下剪头
|
|
drawDown() {
|
|
var c = document.getElementById("downCanvas"),
|
|
cxt = c.getContext("2d");
|
|
cxt.beginPath();
|
|
cxt.moveTo(5, 20);
|
|
cxt.lineTo(15, 32.5);
|
|
cxt.lineTo(25, 20);
|
|
cxt.lineWidth = 5;
|
|
cxt.strokeStyle = "white";
|
|
cxt.stroke();
|
|
},
|
|
initWorldwind(){
|
|
let WorldWind = window.WorldWind;
|
|
WorldWind.configuration.baseUrl = "https://files.worldwind.arc.nasa.gov/artifactory/web/0.9.0/";
|
|
//创建一个worldwindow对象
|
|
let wwd = new WorldWind.WorldWindow("worldwindcvn");
|
|
let atmosphereLayer = new WorldWind.AtmosphereLayer();
|
|
let starFieldLayer = new WorldWind.StarFieldLayer();
|
|
wwd.addLayer(new WorldWind.BMNGLayer(null));
|
|
wwd.addLayer(starFieldLayer); //IMPORTANT: add the starFieldLayer before the atmosphereLayer
|
|
wwd.addLayer(atmosphereLayer);
|
|
|
|
let startCamera = {
|
|
latitude: 89.983,
|
|
longitude: 34.551,
|
|
range: 10000e3,
|
|
heading: 0,
|
|
tilt: 90,
|
|
};
|
|
let dollyCamera = {
|
|
range: 9000e3,
|
|
tilt: 0,
|
|
};
|
|
let navigator = wwd.navigator;
|
|
//设置相机的位置
|
|
navigator.lookAtLocation = new WorldWind.Location(startCamera.latitude, startCamera.longitude);
|
|
//设置相机的距离
|
|
navigator.range = startCamera.range;
|
|
//设置相机的航向（屏幕旋转），从北极顺时针方向开始
|
|
navigator.heading = startCamera.heading;
|
|
//设置相机的倾斜程度
|
|
navigator.tilt = startCamera.tilt;
|
|
|
|
// let timeStamp = Date.now();
|
|
let timeStamp = 1516600944119;
|
|
// Update the Sun position in 3 minute steps, every 64 ms in real time. Then redraw the scene.
|
|
setInterval(function () {
|
|
timeStamp += 180 * 1000;
|
|
atmosphereLayer.time = new Date(timeStamp);
|
|
wwd.redraw();
|
|
}, 64);
|
|
|
|
},
|
|
// 获取当前页码
|
|
getCurrentPage (page) {
|
|
this._setPage(page)
|
|
setTimeout(() => {
|
|
window.scrollTo(0, this.heroHeight)
|
|
}, 100)
|
|
},
|
|
// 根据分类获取页面数据
|
|
getPages () {
|
|
let pages = this.$site.pages
|
|
pages = pages.filter(item => {
|
|
const { home, date } = item.frontmatter
|
|
return !(home == true || date === undefined)
|
|
})
|
|
// reverse()是为了按时间最近排序排序
|
|
this.pages = pages.length == 0 ? [] : pages
|
|
},
|
|
getPagesByTags (tagInfo) {
|
|
this.$router.push({ path: tagInfo.path })
|
|
},
|
|
_setPage (page) {
|
|
this.currentPage = page
|
|
this.$page.currentPage = page
|
|
this._setStoragePage(page)
|
|
},
|
|
getOneColor
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
|
|
|
|
@-webkit-keyframes h2css {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-moz-keyframes h2css {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-o-keyframes h2css {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes h2css {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes h2before {
|
|
0% {
|
|
width: 0%;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
@-moz-keyframes h2before {
|
|
0% {
|
|
width: 0%;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
@-o-keyframes h2before {
|
|
0% {
|
|
width: 0%;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
@keyframes h2before {
|
|
0% {
|
|
width: 0%;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
#worldwindcvn,#cesiumContainer{
|
|
background-color black
|
|
width 100%
|
|
height 100vh
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
}
|
|
.hero .inner{
|
|
position: relative;
|
|
z-index: 5;
|
|
width: 175px;
|
|
margin 0 auto 1rem
|
|
|
|
}
|
|
.hero .inner:before{
|
|
left 0
|
|
}
|
|
.hero .inner:after{
|
|
right 0
|
|
}
|
|
.hero .inner:before,.inner:after{
|
|
background: #fff;
|
|
content: '';
|
|
display: block;
|
|
height: 2px;
|
|
position: absolute;
|
|
width: 100%;
|
|
-moz-animation: h2before 1.35s ease;
|
|
-webkit-animation: h2before 1.35s ease;
|
|
-ms-animation: h2before 1.35s ease;
|
|
animation: h2before 1.35s ease;
|
|
}
|
|
.hero .inner h1{
|
|
-moz-animation: h2css 0.85s ease;
|
|
-webkit-animation: h2css 0.85s ease;
|
|
-ms-animation: h2css 0.85s ease;
|
|
animation: h2css 0.85s ease;
|
|
font-size: 24px;
|
|
display: block;
|
|
padding: 10px 30px;
|
|
opacity: 1;
|
|
}
|
|
//向下动态剪头 start
|
|
@-moz-keyframes myMove {
|
|
0% {padding-top:30px;}
|
|
100% {padding-top:50px;}
|
|
}
|
|
@-webkit-keyframes myMove {
|
|
0% {padding-top:30px;}
|
|
100% {padding-top:50px;}
|
|
}
|
|
@-o-keyframes myMove {
|
|
0% {padding-top:30px;}
|
|
100% {padding-top:50px;}
|
|
}
|
|
@keyframes myMove {
|
|
0% {padding-top:30px;}
|
|
100% {padding-top:50px;}
|
|
}
|
|
#down {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 100%
|
|
top: 86vh;
|
|
left: 0;
|
|
// margin-left: -15px;
|
|
-moz-animation: myMove 1s linear infinite alternate;
|
|
-webkit-animation: myMove 1s linear infinite alternate;
|
|
-o-animation: myMove 1s linear infinite alternate;
|
|
animation: myMove 1s linear infinite alternate;
|
|
}
|
|
// 向下动态剪头 end
|
|
|
|
.home-blog {
|
|
padding: 0;
|
|
margin: 0px auto;
|
|
.hero {
|
|
//margin $navbarHeight auto 0
|
|
position relative
|
|
box-sizing border-box
|
|
padding 0 20px
|
|
height 100vh
|
|
display flex
|
|
align-items center
|
|
justify-content center
|
|
#intro{
|
|
width 100%
|
|
z-index 2
|
|
user-select none
|
|
}
|
|
.hero-img {
|
|
max-width: 300px;
|
|
margin: 0 auto 1.5rem
|
|
}
|
|
|
|
h1 {
|
|
display: block;
|
|
margin:0 auto 0.6rem;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.description {
|
|
margin: 1.8rem auto;
|
|
font-size: 1.6rem;
|
|
line-height: 1.3;
|
|
text-align: center;
|
|
}
|
|
.icon-angle-down {
|
|
font-family: "iconfont" !important;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
cursor: pointer;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
color: #eee;
|
|
font-size: 2.5rem;
|
|
opacity: .8;
|
|
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,.15);
|
|
-webkit-animation: arrow 1.3s linear infinite;
|
|
animation: arrow 1.3s linear infinite;
|
|
}
|
|
.icon-angle-down:before {
|
|
content: "\ef19";
|
|
}
|
|
}
|
|
.home-blog-wrapper {
|
|
display flex
|
|
align-items: flex-start;
|
|
margin 20px auto 0
|
|
padding 0 20px
|
|
max-width $homePageWidth
|
|
.blog-list {
|
|
flex auto
|
|
width 0
|
|
.abstract-wrapper {
|
|
.abstract-item:last-child {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
.info-wrapper {
|
|
position -webkit-sticky;
|
|
position sticky;
|
|
top 70px
|
|
overflow hidden
|
|
transition all .3s
|
|
margin-left 15px
|
|
flex 0 0 300px
|
|
height auto
|
|
box-shadow var(--box-shadow)
|
|
border-radius $borderRadius
|
|
box-sizing border-box
|
|
padding 0 15px
|
|
background var(--background-color)
|
|
&:hover {
|
|
box-shadow var(--box-shadow-hover)
|
|
}
|
|
h4 {
|
|
color var(--text-color)
|
|
}
|
|
.category-wrapper {
|
|
list-style none
|
|
padding-left 0
|
|
.category-item {
|
|
margin-bottom .4rem
|
|
padding: .4rem .8rem;
|
|
transition: all .5s
|
|
border-radius $borderRadius
|
|
box-shadow var(--box-shadow)
|
|
background-color var(--background-color)
|
|
&:hover {
|
|
transform scale(1.04)
|
|
a {
|
|
color $accentColor
|
|
}
|
|
}
|
|
a {
|
|
display flex
|
|
justify-content: space-between
|
|
color var(--text-color)
|
|
.post-num {
|
|
width 1.6rem;
|
|
height 1.6rem
|
|
text-align center
|
|
line-height 1.6rem
|
|
border-radius $borderRadius
|
|
background #eee
|
|
font-size 13px
|
|
color #fff
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $MQMobile) {
|
|
.home-blog {
|
|
.hero {
|
|
//height 450px
|
|
height 100vh
|
|
img {
|
|
max-height: 210px;
|
|
margin: 2rem auto 1.2rem;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 auto 1.2rem ;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.description {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.action-button {
|
|
font-size: 1rem;
|
|
padding: 0.6rem 1.2rem;
|
|
}
|
|
}
|
|
.home-blog-wrapper {
|
|
display block!important
|
|
.blog-list {
|
|
width auto
|
|
}
|
|
.info-wrapper {
|
|
// display none!important
|
|
margin-left 0
|
|
.personal-info-wrapper {
|
|
display none
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $MQMobileNarrow) {
|
|
.home-blog {
|
|
.hero {
|
|
//height 450px
|
|
height 100vh
|
|
img {
|
|
max-height: 210px;
|
|
margin: 2rem auto 1.2rem;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 auto 1.1rem ;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h1, .description, .action {
|
|
// margin: 1.2rem auto;
|
|
}
|
|
|
|
.description {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.action-button {
|
|
font-size: 1rem;
|
|
padding: 0.6rem 1.2rem;
|
|
}
|
|
}
|
|
|
|
.home-blog-wrapper {
|
|
display block!important
|
|
.blog-list {
|
|
width auto
|
|
}
|
|
.info-wrapper {
|
|
// display none!important
|
|
margin-left 0
|
|
.personal-info-wrapper {
|
|
display none
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|