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> |