EOC-UI/src/views/right/components/handleProcess/comp/emergencyManage.vue

<template>
  <div class="emergency-manage">
    <rightMediumTitleContent title="风险处置分析">
      <div class="right-button-box" @click="handleClose">
        <img
          class="image-box"
          src="../../../../../assets/img/a-shouqi1 1@2x.png"
        />收起
      </div>
    </rightMediumTitleContent>
  </div>
</template>

<script setup>
import rightMediumTitleContent from "../../common/RightMediumTitleContent.vue";
import { useRightPanelStore } from "@/store/rightPanel";
const rightPanelStore = useRightPanelStore();
const handleClose = () => {
  rightPanelStore.emergencyVisible = false;
};
</script>

<style lang="scss" scoped>
.emergency-manage {
  position: fixed;
  top: 120px;
  right: 600px;
  width: 554px;
  height: 936px;
  background: linear-gradient(180deg, #244d86 2%, #0a121e 100%);
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
  border-radius: 0px 0px 0px 0px;
  z-index: 99;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(0, 150, 255, 1),
      rgba(7, 108, 208, 1)
    )
    1 1;
  .right-button-box {
    position: absolute;
    display: flex;
    align-items: center;
    right: 10px;
    top: 50%;
    cursor: pointer;
    transform: translateY(-80%);
    color: #08ffe5;
    font-size: 18px;
    .image-box {
      width: 20px;
      height: 18px;
      margin-right: 5px;
    }
  }
  &::after {
    position: absolute;
    content: "";
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 2px;
    background-image: url("../../../../../assets/img/image-bottom.png");
    background-size: 100% 100%;
  }
}
</style>