web_sh_audit/src/components/popup/LabelCasePopup.vue

<template>
  <MenuCard class="label-case" :menuData="menuData">
    <div class="label-case-inner">
      <div class="header">
        <div class="header-title">名称 :</div>
        <div class="header-input">
          <input type="text" v-model="nameInput" />
        </div>
      </div>
      <div class="top">
        <div class="top-title">标记点分类 :</div>
        <select class="top-select" v-model="selectVal">
          <option value="土地资源">土地资源</option>
          <option value="林业资源">林业资源</option>
          <option value="水资源">水资源</option>
        </select>
      </div>
      <div class="area">
        面积 ：&nbsp;&nbsp;
        <span v-if="targetArea === 0 || targetArea === ''">0</span>
        <span v-else>{{ targetArea }}</span>
      </div>
      <div class="distance">
        距离：&nbsp;&nbsp;
        <span v-if="targetDistance === 0 || !targetDistance">0</span>
        <span v-else>{{ parseFloat(targetDistance).toFixed(2) }}&nbsp;米</span>
      </div>
      <div class="center">
        <div class="center-title">描述 :</div>
        <div class="center-text">
          <textarea placeholder="请输入详细信息" v-model="textContent"></textarea>
        </div>
      </div>
      <div class="footer">
        <input type="button" value="取消" @click="cancelEvent" />
        <input type="button" value="保存" @click="saveEvent" />
      </div>
    </div>
  </MenuCard>
</template>
<script>
import MenuCard from "@/components/layout/MenuCard.vue";
/**
 * 标记疑点 - 辅助录入属性弹窗
 * @author: Gao Lu
 * @Date: 2022.11.22
 */
export default {
  name: "LabelCasePopup",
  components: { MenuCard },
  props: ["targetArea", "targetDistance"],
  data() {
    return {
      nameInput: "",
      menuData: {
        type: "chart",
        title: "添加标记",
        boxWidth: "380",
        boxHeight: "300"
      },
      selectVal: "土地资源",
      textContent: "",
      id: null,
      geojson: ""
    };
  },
  methods: {
    cancelEvent() {
      this.$emit("close");
    },
    saveEvent() {
      this.$emit("save");
    }
  }
};
</script>
<style lang="less" scoped>
.label-case {
  position: relative;
  cursor: auto;
  pointer-events: auto;
  &-inner {
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 300;
    color: #e6e6e6;
    // line-height: 36px;
    .header {
      height: 15%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      &-title {
        width: 37%;
        height: 100%;
        line-height: 37px;
      }
      &-input {
        width: 68%;
        height: 30px;
        input {
          height: 24px;
          background: none;
          border: 1px solid rgba(230, 230, 230, 0.8);
          border-radius: 3px;
          color: #fff;
          font-size: 14px;
          width: 165px;
        }
        // /deep/.el-input__inner {
        //   width: 93%;
        //   font-size: 15px;
        //   height: 30px;
        // }
      }
    }
    .top {
      height: 13%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      &-title {
        width: 35%;
        height: 100%;
        line-height: 37px;
      }
      &-select {
        width: 60%;
        height: 30px;
        border: 1px solid #818ca4;
        border-radius: 4px;
        background: transparent;
        color: rgba(230, 230, 230, 1);
        cursor: pointer;
        &:focus {
          border: none;
          border-radius: 1px;
        }
        option {
          cursor: pointer;
          background-color: rgba(0, 39, 77, 0.8);
          box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
          border: 1px solid rgba(47, 184, 255, 0.7);
        }
      }
    }
    .area {
      height: 10%;
      width: 100%;
      display: flex;
      align-items: center;
    }
    .center {
      height: 40%;
      width: 100%;
      &-title {
        width: 100%;
        height: 30px;
        line-height: 30px;
      }
      &-text {
        width: 100%;
        height: calc(95% - 30px);
        & textarea {
          width: 100%;
          height: 100%;
        }
      }
    }
    .footer {
      margin: 0 auto;
      width: 50%;
      height: 13%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      input {
        width: 50px;
        height: 25px;
        border-radius: 3px;
        border: none;
        cursor: pointer;
        color: #e6e6e6;
      }
      input:nth-child(1) {
        background: rgba(129, 140, 164, 1);
      }
      input:nth-child(2) {
        background-image: linear-gradient(to top, rgba(79, 172, 254, 1), rgba(0, 242, 254, 1));
      }
    }
  }
}
</style>