<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"
    >
      —&nbsp;推荐文章&nbsp;—
    </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>