264 lines
6.9 KiB
Vue
264 lines
6.9 KiB
Vue
|
<template>
|
|||
|
|
<div class="part2-container">
|
|||
|
|
<div
|
|||
|
|
class="major aos-init aos-animate"
|
|||
|
|
data-aos="fade-up"
|
|||
|
|
data-aos-delay="50"
|
|||
|
|
data-aos-anchor-placement="top-bottom"
|
|||
|
|
>
|
|||
|
|
— 推荐文章 —
|
|||
|
|
</div>
|
|||
|
|
<el-carousel
|
|||
|
|
height="220px"
|
|||
|
|
:loop="true"
|
|||
|
|
:interval="2000"
|
|||
|
|
:style="{ 'z-index': 0 }"
|
|||
|
|
:type="fits ? 'card' : ''"
|
|||
|
|
>
|
|||
|
|
<el-carousel-item v-for="article in acticleSet" :key="article.pageInfo.key">
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :xs="24" :sm="8">
|
|||
|
|
<div
|
|||
|
|
class="photo-container"
|
|||
|
|
@click="toDetail(article.pageInfo.path)"
|
|||
|
|
>
|
|||
|
|
<img :src="article.url" class="photo" />
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :xs="24" :sm="16">
|
|||
|
|
<div
|
|||
|
|
style="padding: 14px" class="abstract-container"
|
|||
|
|
@click="toDetail(article.pageInfo.path)"
|
|||
|
|
>
|
|||
|
|
<span class="abstract-title">{{article.title}}</span>
|
|||
|
|
<p class="absstract-body">
|
|||
|
|
{{article.content}}
|
|||
|
|
</p>
|
|||
|
|
<PageInfo :pageInfo="article.pageInfo" currentTag=""> </PageInfo>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-carousel-item>
|
|||
|
|
<!-- <el-carousel-item>
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :xs="24" :sm="8">
|
|||
|
|
<div
|
|||
|
|
class="photo-container"
|
|||
|
|
@click="toDetail(olPageInfo.path)"
|
|||
|
|
>
|
|||
|
|
<img :src="olXmindUrl" class="photo" />
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :xs="24" :sm="16">
|
|||
|
|
<div
|
|||
|
|
style="padding: 14px" class="abstract-container"
|
|||
|
|
@click="toDetail(olPageInfo.path)"
|
|||
|
|
>
|
|||
|
|
<span class="abstract-title">OpenLayers 小记</span>
|
|||
|
|
<p class="absstract-body">
|
|||
|
|
OpenLayers 是的一个模块化、高性能且功能丰富的WebGIS客户端的JS库，用于显示地图和空间数据以及交互操作。
|
|||
|
|
</p>
|
|||
|
|
<PageInfo :pageInfo="olPageInfo" currentTag=""> </PageInfo>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-carousel-item> -->
|
|||
|
|
|
|||
|
|
</el-carousel>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import PageInfo from "../PageInfo";
|
|||
|
|
export default {
|
|||
|
|
components: { PageInfo },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
fits: true,
|
|||
|
|
acticleSet:[
|
|||
|
|
{
|
|||
|
|
url: require("../../../public/images/geoserver2023.png"),
|
|||
|
|
title: 'GeoServer与OGC小记',
|
|||
|
|
content: 'GeoServer是用Java编写的开放源代码的地图服务器，允许用户共享和编辑地理空间数据。GeoServer 是参考开放地理空间联盟（OGC）的相关标准实现的。',
|
|||
|
|
pageInfo: {
|
|||
|
|
frontmatter: {
|
|||
|
|
author: "ac",
|
|||
|
|
categories: ["GIS"],
|
|||
|
|
date: "2020-03-25T00:00:00.000Z",
|
|||
|
|
tags: ["GeoServer"],
|
|||
|
|
title: "GeoServer小记",
|
|||
|
|
},
|
|||
|
|
key: "v-25952a80",
|
|||
|
|
path: "/article/gis/geoserver/geoserverxmind.html",
|
|||
|
|
regularPath: "/article/gis/geoserver/geoserverxmind.html",
|
|||
|
|
relativePath: "article/gis/geoserver/geoserverxmind.md",
|
|||
|
|
title: "GeoServer小记",
|
|||
|
|
}
|
|||
|
|
},{
|
|||
|
|
url: require("../../../public/images/openlayers.png"),
|
|||
|
|
title: 'OpenLayers 小记',
|
|||
|
|
content: 'OpenLayers 是的一个模块化、高性能且功能丰富的WebGIS客户端的JS库，用于显示地图和空间数据以及交互操作。',
|
|||
|
|
pageInfo: {
|
|||
|
|
frontmatter: {
|
|||
|
|
author: "ac",
|
|||
|
|
categories: ["GIS"],
|
|||
|
|
date: "2020-12-02T00:00:00.000Z",
|
|||
|
|
tags: ["OpenLayers"],
|
|||
|
|
title: "OpenLayers 小记",
|
|||
|
|
},
|
|||
|
|
key: "v-25952a810",
|
|||
|
|
path: "/article/gis/openlayers/olxmindnew.html",
|
|||
|
|
regularPath: "/article/gis/openlayers/olxmindnew.html",
|
|||
|
|
relativePath: "article/gis/openlayers/olxmindnew.md",
|
|||
|
|
title: "OpenLayers 小记",
|
|||
|
|
}
|
|||
|
|
},{
|
|||
|
|
url: require("../../../public/images/cesiumjsxmind_new.png"),
|
|||
|
|
title: 'CesiumJS 小记',
|
|||
|
|
content: 'CesiumJS是一个开源的用于创建具有最佳性能、精度、视觉质量和易用性的世界级3D场景地图的JavaScript库。',
|
|||
|
|
pageInfo: {
|
|||
|
|
frontmatter: {
|
|||
|
|
author: "ac",
|
|||
|
|
categories: ["GIS"],
|
|||
|
|
date: "2020-12-02T00:00:00.000Z",
|
|||
|
|
tags: ["CesiumJS"],
|
|||
|
|
title: "CesiumJS 小记",
|
|||
|
|
},
|
|||
|
|
key: "v-25952a820",
|
|||
|
|
path: "/article/gis/cesiumjs/cesiumjs.html",
|
|||
|
|
regularPath: "/article/gis/cesiumjs/cesiumjs.html",
|
|||
|
|
relativePath: "article/gis/cesiumjs/cesiumjs.md",
|
|||
|
|
title: "CesiumJS 小记"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.changeWin();
|
|||
|
|
window.onresize = () => {
|
|||
|
|
//当窗口发生改变时触发
|
|||
|
|
this.changeWin();
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
toDetail(path) {
|
|||
|
|
this.$router.push(path);
|
|||
|
|
},
|
|||
|
|
changeWin() {
|
|||
|
|
let w = document.body.clientWidth;
|
|||
|
|
this.fits = w > 768;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="stylus">
|
|||
|
|
.time {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom {
|
|||
|
|
margin-top: 13px;
|
|||
|
|
line-height: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button {
|
|||
|
|
padding: 0;
|
|||
|
|
float: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image {
|
|||
|
|
width: 100%;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.clearfix:before, .clearfix:after {
|
|||
|
|
display: table;
|
|||
|
|
content: '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.clearfix:after {
|
|||
|
|
clear: both;
|
|||
|
|
}
|
|||
|
|
.part2-container{
|
|||
|
|
text-align center
|
|||
|
|
.major{
|
|||
|
|
font-size 1.6rem
|
|||
|
|
margin-bottom 1.8rem
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.photo-container {
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 10px;
|
|||
|
|
.photo {
|
|||
|
|
height: 200px;
|
|||
|
|
width: 100%;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
image-rendering: auto;
|
|||
|
|
image-rendering: crisp-edges;
|
|||
|
|
image-rendering: pixelated;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.abstract-container{
|
|||
|
|
text-align left
|
|||
|
|
.abstract-title {
|
|||
|
|
position: relative;
|
|||
|
|
font-size: 1.28rem;
|
|||
|
|
line-height: 46px;
|
|||
|
|
display: inline-block;
|
|||
|
|
|
|||
|
|
&:after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 2px;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
background-color: $accentColor;
|
|||
|
|
visibility: hidden;
|
|||
|
|
-webkit-transform: scaleX(0);
|
|||
|
|
transform: scaleX(0);
|
|||
|
|
transition: 0.3s ease-in-out;
|
|||
|
|
}
|
|||
|
|
// &:hover a
|
|||
|
|
// color $accentColor
|
|||
|
|
&:hover:after {
|
|||
|
|
visibility: visible;
|
|||
|
|
-webkit-transform: scaleX(1);
|
|||
|
|
transform: scaleX(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-carousel__item h3 {
|
|||
|
|
color: #99a9bf;
|
|||
|
|
font-size: 14px;
|
|||
|
|
opacity: 0.75;
|
|||
|
|
line-height: 200px;
|
|||
|
|
margin: 0;
|
|||
|
|
border: solid 1px gray;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-carousel__item:nth-child(2n) {
|
|||
|
|
background-color: var(--background-color);
|
|||
|
|
box-shadow: var(--box-shadow);
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
border: solid 1px #e0e0e0;
|
|||
|
|
&:hover {
|
|||
|
|
box-shadow: var(--box-shadow-hover);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-carousel__item:nth-child(2n + 1) {
|
|||
|
|
background-color: var(--background-color);
|
|||
|
|
box-shadow: var(--box-shadow);
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
border: solid 1px #e0e0e0;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
box-shadow: var(--box-shadow-hover);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|