web_sh_audit/src/components/popup/CaseAuditPopup.vue

<template>
  <MenuCard class="case-audit" :menuData="menuData">
    <div class="case-audit-inner">
      <div class="top-law">
        <a style="cursor: pointer">》点此查看相关法律法规&nbsp;&nbsp;</a>
      </div>
      <!-- 未激活疑点审计 -->
      <div v-if="status === 'normal'" class="center-table" style="height: 91%">
        <div
          class="center-table-item-normal"
          v-for="item in tableArr"
          :key="item.id"
        >
          <div class="leftcell">{{ item.name }}</div>
          <div class="rightcell">{{ item.content }}</div>
        </div>
      </div>
      <!-- 激活疑点审计 -->
      <div v-if="status === 'special'" class="center-table">
        <div
          class="center-table-item-special"
          v-for="item in tableArr"
          :key="item.id"
        >
          <div class="leftcell">{{ item.name }}</div>
          <div class="rightcell">{{ item.content }}</div>
        </div>
        <div class="center-table-item-special">
          <div class="leftcell">疑点性质</div>
          <div class="rightcell">
            <select class="select-box">
              <option value="isTrue">疑点</option>
              <option value="isFalse">非疑点</option>
            </select>
            <!-- <NewSelect
              style="width: 120px; height: 30px"
              v-model="selectVal"
              :options="selectOptions"
              :value="selectVal"
            /> -->
          </div>
        </div>
      </div>
      <div v-if="status === 'special'" class="footer-btn">
        <input
          class="audit-popup-btn"
          type="button"
          value="修改"
          @click="modifyEvent"
        />
        <input
          class="audit-popup-btn"
          type="button"
          value="确认"
          @click="confirmEvent"
        />
      </div>
    </div>
  </MenuCard>
</template>
<script>
import MenuCard from "@/components/layout/MenuCard.vue";
import NewSelect from "@/components/common/NewSelect.vue";
/**
 * 疑点审计弹窗
 *
 * 点击地图上的疑点板块时 - 会出现疑点性质一栏
 */
export default {
  name: "CaseAuditPopup",
  components: { MenuCard, NewSelect },
  data() {
    return {
      menuData: {
        type: "chart",
        title: "属性",
        boxWidth: "300",
        boxHeight: "320",
      },
      // status: "special",
      tableArr: [
        { id: 1, name: "版本", content: "2017年部" },
        { id: 2, name: "面积", content: "888.4567" },
        { id: 3, name: "性质", content: "林地 硬化地表" },
        { id: 4, name: "异常", content: "疑似基本农田被侵占" },
      ],
      selectVal: "疑点",
      selectOptions: [
        { value: "疑点", label: "疑点" },
        { value: "非疑点", label: "非疑点" },
      ],
    };
  },
  props:['status'],
  methods: {
    modifyEvent() {
      console.log("modify");
    },
    confirmEvent() {
      console.log("confirm");
    },
  },
};
</script>
<style lang="less" scoped>
.case-audit {
  cursor: auto;
  &-inner {
    width: 100%;
    height: 100%;
    .top-law {
      width: 100%;
      height: 10%;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 300;
      font-style: italic;
      text-decoration: underline;
      display: flex;
      justify-content: flex-end;
      color: #4dc3ff;
    }
    .center-table {
      width: 100%;
      height: 70%;
      // border: 1px solid #818ca4;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: rgba(230, 230, 230, 1);
      font-size: 15px;
      &-item-normal,
      &-item-special {
        width: 100%;
        border-top: 1px solid #818ca4;
        border-left: 1px solid #818ca4;
        &:last-child {
          border-bottom: 1px solid #818ca4;
        }
        display: flex;
        .leftcell {
          width: 35%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid #818ca4;
        }
        .rightcell {
          width: 65%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid #818ca4;
          .select-box {
            width: 120px;
            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 {
              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);
            }
          }
        }
      }
      &-item-normal {
        height: 23%;
      }
      &-item-special {
        height: 17%;
      }
    }
    .footer-btn {
      margin: 0 auto;
      width: 50%;
      height: 20%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 15px;
      input {
        width: 60px;
        height: 30px;
        border-radius: 3px;
        border: none;
        color: #fff;
        cursor: pointer;
      }
      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>