69 lines
1.7 KiB
Vue
69 lines
1.7 KiB
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 } 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 compare = ref(false);
|
||
|
|
const info = ref({})
|
||
|
|
const changeCompare = () => {
|
||
|
|
compare.value = !compare.value;
|
||
|
|
console.log('compare.value', 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>
|