init2

src/components/TitleHeader/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="title_container">
+    <div class="title">{{ title }}</div>
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+const props = defineProps({
+  title: {} //标题
+})
+</script>
+<style lang="scss" scoped>
+.title_container {
+  width: 100%;
+  min-width: 300px;
+  height: 54px;
+  display: flex;
+  justify-content: space-between;
+  background: url('../../assets/img/一级标题样式(1).png') no-repeat;
+  // background-size: 100% 100%;
+
+  .title {
+    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+    font-weight: 400;
+    font-size: 26px;
+    color: #f6f9fe;
+    line-height: 30px;
+    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;
+    font-weight: bold;
+    /* 加粗字体 */
+    margin-left: 36px;
+    /* 金属光泽渐变效果 */
+    background: linear-gradient(to top, #49ffff 4%, #e2ffff 100%);
+    -webkit-background-clip: text;
+    /* 文字应用渐变 */
+    background-clip: text;
+
+    /* 使文字透明，背景渐变会应用到文字 */
+    color: transparent;
+
+    /* 光泽效果：文本阴影 */
+    text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);
+
+    /* 给文字加一些柔和的过渡效果 */
+    transition: all 0.3s ease;
+    font-style: italic;
+    transform: skewX(-5deg);
+    /* 自定义水平方向倾斜 */
+  }
+}
+</style>

src/store/modules/user.js

@@ -1,16 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useUserStore = defineStore({
-  id: 'user',
-  state: () => {
-    return {
-      name: '',
-      age:20
-    }
-  },
-  // 使用插件的配置选项
-  persist: {
-    key: 'user-store',// 自定义存储的键名
-    storage: localStorage // 可以改为sessionStorage
-  }
-})

src/views/index.vue

@@ -18,12 +18,15 @@
         </div>
       </div>
     </div>
+    <!-- 两侧 -->
     <div class="home_content_left">
       <LeftPage :activeIndex="activeIndex"></LeftPage>
     </div>
     <div class="home_content_right">
       <RightPage :activeIndex="activeIndex"></RightPage>
     </div>
+
+    
   </div>
 </template>
 <script setup>

src/views/left/comp/BigDangerTable.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="container">
+   风险列表大列表
+  </div>
+</template>
+<script setup>
+import { ref, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+
+
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/left/comp/LeftTabBody.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="body_container">
+    <TitleHeader :title="'风险报告'"></TitleHeader>
+  </div>
+</template>
+<script setup>
+// import TitleHeader from '../../../components/TitleHeader'
+import TitleHeader from '../../../components/TitleHeader'
+import { ref, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+
+
+</script>
+<style lang="scss" scoped>
+.body_container{
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/left/index.vue

@@ -9,12 +9,23 @@
             }}</div>
         </div>
       </div>
+
     </div>
     <!-- 左侧主题内容 -->
-    <div class="left_container_header-left_content"></div>
+    <div class="left_container_header-left_content">
+      <!-- 1.初始化内容 -->
+      <LeftTabBody></LeftTabBody>
+
+      <!-- 2.风险列表大列表 -->
+      <BigDangerTable></BigDangerTable>
+
+    </div>
   </div>
 </template>
 <script setup>
+import LeftTabBody from './comp/LeftTabBody'
+import BigDangerTable from './comp/BigDangerTable'
+
 import { ref, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
 
 
@@ -88,5 +99,10 @@ function setActive (index) {
       /* 悬浮时略微放大 */
     }
   }
+
+  .left_container_header-left_content{
+    height: calc(100% - 30px);
+    width: 100%;
+  }
 }
 </style>

vite.config.js

@@ -19,9 +19,9 @@ export default defineConfig({
       '~': path.resolve(__dirname, './'),
       // 设置别名
       '@': path.resolve(__dirname, './src')
-    }
+    },
     // https://cn.vitejs.dev/config/#resolve-extensions
-    // extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
   },
 
   optimizeDeps: {
@@ -51,7 +51,7 @@ export default defineConfig({
       plugins: [
         postcsspxtoviewport({
           unitToConvert: 'px', // 要转化的单位
-          // viewportHeight: 1087, // 可选，视口高度，通常不需要设置
+          // viewportHeight: 1080, // 可选，视口高度，通常不需要设置
           viewportWidth: 3840, // UI设计稿的宽度
           unitPrecision: 4, // 转换后的精度，即小数点位数
           propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换