<template>
  <div class="upload_type_container">
      <div class="upload-item box2">
          <p class="upload-title">ShpFile数据</p>
          <p class="upload-desc">
              ESRI Shapefile（shp），或简称shapefile，是美国环境系统研究所公司（ESRI）开发的一种空间数据开放格式。上传时请先配置地理空间信息。
          </p>
          <p class="upload-button">
              <el-button type="primary" icon="el-icon-upload" size="small" @click="$router.push({'path':'/shp_data_upload'})">开始上传</el-button>
          </p>
          <p class="upload-icon">
              <img src="/images/shp-file.png" alt="">
          </p>
      </div>
      <div class="upload-item box1">
          <p class="upload-title">Excel数据</p>
          <p class="upload-desc">
              Microsoft Excel是Microsoft为使用Windows和Apple Macintosh操作系统的电脑编写的一款电子表格软件。上传时请使用系统提供的Excel文件模板。
          </p>
          <p class="upload-button">
              <el-button type="primary" size="small" icon="el-icon-upload" @click="$router.push({'path':'/excel_data_upload'})">开始上传</el-button>
          </p>
          <p class="upload-icon">
              <img src="/images/excel-file.png" alt="">
          </p>
      </div>
      
  </div>
</template>

<script>
  export default {
    name: 'upload_type_selected',
  }
</script>

<style scoped>
  .upload_type_container{
      width:100%;
      height:100%;
  }
  .upload-item {
      padding:40px;
      cursor:pointer;
      transition:all 0.35s;;
  }
  .upload-item:hover{
      top: calc( 50% - 8px);
  }

.box1{
      width:500px;
      height:600px;
      background:#162258;
      position:absolute;
      top:50%;
      left:53%;
      transform: translate(0,-50%);
  }

.box2{
    width:500px;
    height:600px;
    background:#162258;
    position:absolute;
    top:50%;
    right:53%;
    transform: translate(0,-50%);

}

.upload-item .upload-title{
    font-size:24px;
    font-weight:bold;
    color:#fff;
}

.upload-desc{
    margin:22px 0px;
    font-size:14px;
    color:#ccc;
    line-height:22px;
}

.upload-icon{
    margin-top:100px;
    text-align:center;
}

.upload-icon img{
    width:220px;
}

::v-deep .el-button{
    border-radius:0px;
    letter-spacing: 1px;
}
</style>