112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="example-container" v-for="article in articleList" :key="article.title">
|
|
<h3 >{{ article.title }}</h3>
|
|
<el-row>
|
|
<el-col :span="6" v-for="(item,index) in article.ex" :key="item.name" :offset="index > 0 ? 1 : 0">
|
|
<el-card :body-style="{ padding: '0px' }" >
|
|
<div class="img-box">
|
|
<img :src="item.image" class="image">
|
|
</div>
|
|
<div style="cursor: pointer;padding: 14px;" @click="lookEx(item.path)">
|
|
<span class="example" >{{ item.name }}</span>
|
|
<div class="bottom clearfix">
|
|
<time class="time">{{ currentDate }}</time>
|
|
<!-- <el-button type="text" class="button"></el-button> -->
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
articleList:[
|
|
{
|
|
title:"Cesium",
|
|
ex:[
|
|
{name:"动态气泡弹窗",path:"/example/cesium/overViewer.html",image: require("../public/images/bubble.png")},
|
|
{name:"倾斜模型逻辑单体化",path:"/example/cesium/single.html",image: require("../public/images/single.png")},
|
|
// {name:"info测试",path:"/example/cesium/info.html",image: require("../public/images/osm-building.png")},
|
|
{name:"轨迹播放(第一人称视角)",path:"/example/cesium/flyPath.html",image: require("../public/images/flypath.png")},
|
|
]
|
|
},
|
|
// {
|
|
// title:"Echarts",
|
|
// ex:[
|
|
// {name:"3D 行政区下钻",path:"/example/echarts/3dcharts.html",image: require("../public/images/osm-building.png")},
|
|
// ]
|
|
// },
|
|
// {
|
|
// title:"Openlayer",
|
|
// ex:[
|
|
// {name:"轨迹播放",path:"/example/cesium/info.html",image:require("../public/images/osm-building.png")}
|
|
// ]
|
|
// },
|
|
],
|
|
currentDate: new Date()
|
|
};
|
|
},
|
|
methods:{
|
|
lookEx(path){
|
|
// window.open(path, '_blank');
|
|
this.$router.push(path)
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style scoped lang="stylus">
|
|
.example-container{
|
|
|
|
margin: 0 auto;
|
|
.example-title{
|
|
cursor: pointer;
|
|
}
|
|
.example-title:hover{
|
|
color:'#999999';
|
|
}
|
|
}
|
|
.time {
|
|
font-size: 13px;
|
|
color: #999;
|
|
}
|
|
|
|
.bottom {
|
|
margin-top: 13px;
|
|
line-height: 12px;
|
|
}
|
|
|
|
.button {
|
|
padding: 0;
|
|
float: right;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
|
|
.clearfix:after {
|
|
clear: both
|
|
}
|
|
|
|
.img-box{
|
|
width: 280px;
|
|
height: 175px;
|
|
}
|
|
</style>
|