右侧面板搭建

src/views/index.vue

@@ -88,6 +88,7 @@ function setActive (index,item) {
   background-size: 100% 100%;
   position: relative;
   margin: 0 !important;
+  overflow: hidden;
 }
 
 

src/views/right/components/common/rightMaxTitleContent.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="default-max-title">
+    <div class="text-box">{{ title }}</div>
+    <slot></slot>
+
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.default-max-title {
+  width: 100%;
+  height: 60px;
+  background-image: url("../../../../assets/img/一级标题样式(19).png");
+  background-size: 100% 100%;
+  padding-left: 50px;
+  .text-box {
+    font-family: YouSheBiaoTiHei;
+    font-size: 26px;
+    font-weight: bold;
+    color: #f6f9fe;
+    text-shadow: 0px 0px 7px rgba(75, 180, 229, 0.25),
+      0px 2px 8px rgba(5, 28, 55, 0.42);
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    background: linear-gradient(to bottom, #ffffff 4%, #49ffff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+}
+</style>

src/views/right/components/reportHandle/index.vue

@@ -1,9 +1,78 @@
 <template>
-  <div class="report-handle-box"></div>
+  <div class="report-handle-box">
+    <rightMaxTitleContent title="风险研判">
+      <div class="button-box">
+        <div
+          class="button-item"
+          v-for="item in titleList"
+          :key="item.value"
+          :class="{ active: activeTopTime == item.value }"
+          @click="handleTimeClick(item)"
+        >
+          <span class="content">{{ item.name }}</span>
+        </div>
+      </div>
+    </rightMaxTitleContent>
+  </div>
 </template>
 
-<script lang="scss" scoped>
-.report-handle-box{
-    
-}
+<script setup>
+import { ref } from "vue";
+import rightMaxTitleContent from "../common/rightMaxTitleContent.vue";
+const activeTopTime = ref("日");
+const titleList = [
+  { name: "日", value: "日" },
+  { name: "月", value: "月" },
+  { name: "年", value: "年" },
+];
+
+const handleTimeClick = (item) => {
+  activeTopTime.value = item.value;
+};
 </script>
+
+<style lang="scss" scoped>
+.report-handle-box {
+  height: 100%;
+  .button-box {
+    position: absolute;
+    display: flex;
+    top: 0;
+    right: 74px;
+    .button-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 45px;
+      height: 24px;
+      border-radius: 4px 4px 4px 4px;
+      border: 1px solid rgba(111, 229, 255, 0.3);
+      margin-left: 15px;
+      cursor: pointer;
+      &.active {
+        background: linear-gradient(
+          90deg,
+          #59a7da 0%,
+          rgba(22, 116, 178, 0) 100%
+        );
+
+        border: 1px solid #6fe5ff;
+        .content {
+          color: #08ffe5;
+        }
+      }
+      .content {
+        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+        font-weight: normal;
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 16px;
+        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+      }
+    }
+  }
+}
+</style>

src/views/right/index.vue

@@ -7,7 +7,7 @@
 <script setup>
 import { ref, watch, reactive, toRefs, onBeforeMount, onMounted } from "vue";
 import reportHandle from "./components/reportHandle/index.vue";
-import handleProcess from './components/handleProcess/index.vue'
+import handleProcess from "./components/handleProcess/index.vue";
 import { useCommonStore } from "@/store/common.js";
 let commonStore = useCommonStore();
 
@@ -25,6 +25,10 @@ watch(
 </script>
 <style lang="scss" scoped>
 .right_container {
+  box-sizing: border-box;
   color: aliceblue;
+  * {
+    box-sizing: border-box;
+  }
 }
 </style>