<template>
  <div class="ThirdPartyServe">
    <div class="title-style">服务名称</div>
    <a-input style="margin-bottom: 20px;" class="input-style" v-model:value="name" placeholder="请输入服务名称" size="large"/>
    <div class="title-style">服务类型</div>
    <a-select
    class="input-style"
      style="margin-bottom: 20px;"
      v-model:value="type"
      placeholder="请选择服务类型"
      size="large"
    >
      <a-select-option value="aa">WMTS OGC Web服务</a-select-option>
      <a-select-option value="bb">WMS OGC Web服务</a-select-option>
      <a-select-option value="cc">ArcGIS REST服务</a-select-option>
      <a-select-option value="dd">矢量瓦片服务服务(Mapbox)</a-select-option>
      <a-select-option value="ee">X,Y,Z瓦片服务</a-select-option>
    </a-select>
    <div class="title-style">服务地址</div>
    <a-textarea style="margin-bottom: 20px;" v-model:value="address" placeholder="请输入服务地址" :rows="3" size="large"/>
    <div class="title-style">要素类型</div>
    <a-input style="margin-bottom: 68px" class="input-style" v-model:value="elementType" placeholder="请输入要素类型" size="large"/>
    <div class="footer">
      <div class="footer-button">
        <a-button style="width: 147px;margin-right: 25px" size="large">取消</a-button>
        <a-button style="width: 147px;" type="primary" size="large">确定</a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const name = ref("")
const type = ref("aa")
const address = ref("")
const elementType = ref("")
</script>

<style lang="scss" scoped>
.ThirdPartyServe{
  padding: 60px 256px;
  .title-style{
    font-size: 20px;
    color: #000000;
    margin-bottom: 9px;
  }
  .input-style{
    width: 663px;
  }
  .footer{
    display: flex;
    justify-content: flex-end;
  }
}
</style>
