sl-sfy-safety/src/views/cameras/overview/components/CameraAddPopover.vue

<template>
  <el-card v-if="props.modelValue" class="pop-card">
    <template #header>
      <div class="flex justify-between items-center pop-head">
        <span class="pop-head-name">添加相机</span>
        <div class="flex pop-head-tabs">
          <div
            v-for="item in cameraAddType"
            :key="item.value"
            class="flex justify-center items-center tab-item"
            :class="{ 'tab-item-active': item.value === addType }"
            @click="addType = item.value"
          >
            {{ item.label }}
          </div>
        </div>
        <el-icon :size="16" class="mr-3" @click="updateValue(false)"><Close /></el-icon>
      </div>
    </template>
    <div class="pop-content flex justify-center items-center">
      <IPAddCamera v-if="addType === 'ip'" />
      <RangeAddCamera v-if="addType === 'ipRange'" />
      <span class="pop-footer">
        <el-button @click="updateValue(false)">取消</el-button>
        <el-button type="primary" @click="addCamera">确定</el-button>
      </span>
    </div>
  </el-card>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { cameraAddType } from '../constant';
  import { Close } from '@element-plus/icons-vue';
  import IPAddCamera from './AddCameraByIP.vue';
  import RangeAddCamera from './AddCameraByRange.vue';

  const props = defineProps<{ modelValue: boolean }>();

  const emits = defineEmits(['update:modelValue']);

  const addType = ref(cameraAddType[0].value);

  const updateValue = (value) => {
    emits('update:modelValue', value);
  };

  const addCamera = () => {};
</script>

<style scoped lang="scss">
  .pop-card {
    margin-left: 21px !important;
  }

  .pop-head {
    height: 56px;

    &-name {
      margin-left: 24px;
      font-size: 16px;
      font-weight: 500;
      color: #252525;
    }

    &-tabs {
      margin-top: 18px;

      :first-child {
        border-radius: 8px 0px 0px 0px;
      }

      :last-child {
        border-radius: 0px 8px 0px 0px;
      }
    }
  }

  .tab-item {
    width: 188px;
    height: 38px;
    background: #fafafa;
    border: 1px solid #d9d9d9;

    &-active {
      background: #e2eefe;
      border: 1px solid #1890ff;
    }
  }

  .pop-content {
    height: 566px;
  }

  .pop-footer {
    position: absolute;
    right: 24px;
    bottom: 27px;
    display: flex;
    justify-content: flex-end;
  }

  :deep(.el-card__header) {
    padding: 0;
  }
  :deep(.el-card__body) {
    padding: 0;
  }
</style>