CaiYuanYiTiHua/src/components/CloudQueryContent/index.vue

<template>
  <div class="modal-content-div">
    <div class="title-text">
      {{ compare ? '国家云查询结果(对比模式)' : '国家云查询结果' }}
      <Icon
        class="split-button"
        style="font-size: 20px"
        icon="bi:layout-split"
        @click="changeCompare"
      />
    </div>
    <div style="display: flex; width: 100%">
      <div :style="`display: block; width: ${compare ? '50%' : '100%'};`">
        <CloudQueryModal />
      </div>
      <div style="display: block; width: 50%; margin-left: 20px" v-if="compare">
        <CloudQueryModal />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits } from "vue"
import Icon from '@/components/Icon/Icon.vue';
import CloudQueryModal from './CloudQueryModal/index.vue';
import { useCloudQueryStore } from '@/store/modules/cloudquery';
import { LoadCloudQueryById } from '@/api/demo/cloudQuery'

const useCloudQuery = useCloudQueryStore();
const emits = defineEmits(['changeCompare'])
const compare = ref(false);
const info = ref({})
const changeCompare = () => {
  compare.value = !compare.value;
  console.log('compare.value', compare.value);
  emits('changeCompare', compare.value)
};
onMounted(() => {
  let id = useCloudQuery.getCloudQueryInfo.id
  LoadCloudQueryById({id}).then(res => {
    info.value = res
  })
})
</script>

<style lang="scss" scoped>
.modal-content-div {
  padding: 53px 20px 10px 20px;
  width: 100%;
  .title-text {
    display: flex;
    justify-content: center;
    font-size: 18px;
    color: #2f83d9;
    text-decoration: underline;
    font-weight: 600;
    position: relative;
  }
  .split-button {
    font-size: 20px;
    display: inline-flex;
    position: absolute;
    right: 8px;
    top: 2px;
    color: #000000a3;
    cursor: pointer;
  }
}
</style>