<template>
  <div class="tufu_select" ref="tufu_select">
    <span style="-webkit-text-stroke: 1px black;
    font-size: 20px;
    color: white;
    font-weight: bold;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;">图幅比例尺</span>
    <el-select v-model="value" size="small" :popper-append-to-body="false"
      style="width: 100px; vertical-align: middle; display: inline-block;" placeholder="请选择" @change="handleChange">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>

<script>

export default {
  name: "tufu",
  data() {
    return {
      options: [
        { value: "1:100万", label: "1:100万" },
        { value: "1:50万", label: "1:50万" },
        { value: "1:25万", label: "1:25万" },
        { value: "1:10万", label: "1:10万" },
        { value: "1:5万", label: "1:5万" },
        { value: "1:2.5万", label: "1:2.5万" },
        { value: "1:1万", label: "1:1万" },
        { value: "1:5000", label: "1:5000" },
      ],
      value: "1:100万"
    };
  },
  watch: {

  },
  methods: {
    handleChange(value) {
      YJ.Global.SheetIndexShangeScale(window.Earth1, value)
    }
  },
};
</script>

<style lang="scss">
.tufu_select {
  display: flex;
  align-items: center;
  justify-content: center;

  .el-range-editor.is-active .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner,
  .el-input.is-active .el-input__inner,
  .el-input__inner:focus {
    border-color: rgba(0, 255, 255, 1);
  }

  .el-input__inner {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid rgba(0, 255, 255, 1);
  }

  .el-select-dropdown {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 255, 255, 1);

    .el-select-dropdown__item {
      color: white;
      text-align: center;
    }

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      color: rgba(0, 255, 255, 1);
      background-color: rgba(0, 255, 255, .5);
    }
  }
}
</style>
