<template> <div id="ZHHM_JCFX"> <div :class="[ 'LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft', ]" ></div> <div :class="[ 'RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight', ]" ></div> </div> </template> <script setup name="ZHHM_JCFX"> import { ref, reactive, toRefs, onMounted } from "vue"; const AllData = reactive({}); onMounted(() => {}); </script> <style lang="scss" scoped> #ZHHM_JCFX { width: 100%; height: 100%; .LeftBox { width: 450px; height: calc(100% - 98px); position: absolute; left: 10px; top: 70px; background: linear-gradient( 0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100% ); border-radius: 6px; border: 1px solid #47eef3; box-sizing: border-box; padding: 10px; box-shadow: inset 0 0 5px 5px #47eef38a; } .RightBox { width: 450px; height: calc(100% - 98px); position: absolute; right: 10px; top: 70px; background: linear-gradient( 0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100% ); border-radius: 6px; border: 1px solid #47eef3; box-sizing: border-box; padding: 10px; box-shadow: inset 0 0 5px 5px #47eef38a; } } </style>