设备管理页面

src/Layout/index.vue

@@ -26,6 +26,7 @@ const btnCut = () => {
         flex: 1;
         display: flex;
         flex-direction: column;
+        width: 85%;
     }
 }
 </style>

src/assets/font/iconfont.css

@@ -1,8 +1,12 @@
 @font-face {
   font-family: "iconfont"; /* Project id 5110769 */
-  src: url('iconfont.woff2?t=1768459731102') format('woff2'),
-       url('iconfont.woff?t=1768459731102') format('woff'),
-       url('iconfont.ttf?t=1768459731102') format('truetype');
+  src:
+    url("//at.alicdn.com/t/c/font_5110769_ml1r3nz6si.woff2?t=1769419532686")
+      format("woff2"),
+    url("//at.alicdn.com/t/c/font_5110769_ml1r3nz6si.woff?t=1769419532686")
+      format("woff"),
+    url("//at.alicdn.com/t/c/font_5110769_ml1r3nz6si.ttf?t=1769419532686")
+      format("truetype");
 }
 
 .iconfont {
@@ -13,6 +17,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shiyongcishu:before {
+  content: "\e6e8";
+}
+
+.icon-zuishouhuanyingdeyingyongchengxu:before {
+  content: "\e6e5";
+}
+
+.icon-zuishouhuanying:before {
+  content: "\e602";
+}
+
+.icon-yisheng1:before {
+  content: "\e813";
+}
+
 .icon-zongshu:before {
   content: "\e71e";
 }
@@ -56,4 +76,3 @@
 .icon-shebeipinpai1:before {
   content: "\e684";
 }
-

src/components/TableBox/index.vue

@@ -9,7 +9,9 @@ const props = defineProps<{
         <h3>
             <slot name="header"></slot>
         </h3>
+        <div class="main">
             <slot></slot>
+        </div>
         <div class="page">
             <el-pagination background :total="props.total" />
         </div>
@@ -23,12 +25,17 @@ const props = defineProps<{
         display: flex;
         justify-content: space-between;
         font-weight: 100;
-        padding: 20px 15px;
+        padding: 20px;
         border-bottom: 1px solid #ddd;
     }
 
+    .main {
+        padding: 0 10px;
+        width: 100%;
+    }
+
     .page {
-        padding: 20px 15px;
+        padding: 20px;
     }
 }
 </style>

src/router/index.ts

@@ -1,4 +1,8 @@
-import { createMemoryHistory, createRouter } from "vue-router";
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from "vue-router";
 import Layout from "@/Layout/index.vue";
 import Login from "@/views/login/index.vue";
 
@@ -38,7 +42,7 @@ const routes = [
 ];
 
 const router = createRouter({
-  history: createMemoryHistory(),
+  history: createWebHashHistory(),
   routes,
 });
 

src/views/device/index.vue

@@ -1,7 +1,284 @@
-<script setup lang='ts'></script>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import useCurrentInstance from "@/hooks/useCurrentInstance";
+const titleList = ref([
+    { icon: 'icon-shebeipinpai1', count: 93, title: "设备品牌数" },
+    { icon: 'icon-shebeigailan', count: 93, title: "设备型号数" },
+    { icon: 'icon-shiyongcishu', count: 3, title: "设备使用次数" },
+    { icon: 'icon-zuishouhuanyingdeyingyongchengxu', count: 'Codman', title: "最受欢迎品牌" },
+])
+const dialogVisible = ref(false)
+const tableData = ref([{
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+}])
+
+for (let index = 0; index < 10; index++) {
+    tableData.value.push({
+        date: '2016-05-03',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles',
+    },)
+
+}
+const brandDom = ref<HTMLDivElement | null>(null)
+const typeDom = ref<HTMLDivElement | null>(null)
+
+const { globalProperties } = useCurrentInstance()
+const rederBrand = () => {
+    const chart = globalProperties.$echarts.init(brandDom.value)
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            formatter: '{b} : {c} 台手术',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: "rgba(200, 200, 200, .1)"
+                }
+            }
+        },
+        grid: {
+            left: '5%',
+            bottom: '5%',
+            containLabel: true
+        },
+        color: {
+            type: 'linear',
+            y2: 1,
+            colorStops: [{
+                offset: '0', color: '#3063b0' // 0% 处的颜色
+            }, {
+                offset: '1', color: '#519ef8' // 100% 处的颜色
+            }],
+        },
+        xAxis: {
+            type: 'value'
+        },
+        yAxis: {
+            type: 'category',
+            data: ['美敦力', '贝朗蛇牌', '索菲萨', 'Codman']
+        },
+        series: [
+            {
+                data: [120, 200, 80, 70],
+                type: 'bar'
+            }
+        ]
+    };
+    chart.setOption(option)
+}
+const rederType = () => {
+    const chart = globalProperties.$echarts.init(typeDom.value)
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            formatter: '{b} : {c} 台手术',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: "rgba(200, 200, 200, .1)"
+                }
+            }
+        },
+        grid: {
+            left: '5%',
+            bottom: '5%',
+            containLabel: true
+        },
+        color: '#17a2b8',
+        xAxis: {
+            type: 'value'
+        },
+        yAxis: {
+            type: 'category',
+            data: ['FV434-T', 'SPVA', 'LPS50', 'SMB', 'FX434-T', 'SPVA-2010', '823832', '823114', '42866']
+        },
+
+        series: [
+            {
+                data: [20, 50, 100, 10, 120, 200, 150, 80, 70],
+                type: 'bar'
+            }
+        ]
+    };
+    chart.setOption(option)
+}
+onMounted(() => {
+    rederBrand()
+    rederType()
+})
+</script>
 <template>
-    <div class="equipment">
-        <h1>设备管理</h1>
+    <div class="data">
+        <ul>
+            <li class="box_shadow" v-for="item in titleList">
+                <i :class="['iconfont', item.icon]"></i>
+                <div>
+                    <h2>{{ item.count }}</h2>
+                    <text>{{ item.title }}</text>
+                </div>
+            </li>
+        </ul>
+        <div class="chart">
+            <div class="box_shadow">
+                <h3>设备品牌使用统计</h3>
+                <div ref="brandDom"></div>
+            </div>
+            <div class="box_shadow">
+                <h3>设备型号分布</h3>
+                <div ref="typeDom"></div>
+            </div>
+        </div>
+        <TableBox :total="100">
+            <template #header>
+                最近手术记录 <el-button size="small" type="primary">查看全部</el-button>
+            </template>
+            <el-table stripe :data="tableData" height="480">
+                <el-table-column prop="date" label="品牌" width="120" />
+                <el-table-column prop="name" label="型号" width="150" />
+                <el-table-column prop="name" label="设备名称" width="150" />
+                <el-table-column prop="name" label="设备类型" />
+                <el-table-column prop="name" label="使用次数" width="150" />
+                <el-table-column prop="name" label="最近使用" width="150" />
+                <el-table-column prop="name" label="平均初始压力" width="150" />
+                <el-table-column label="name" width="180">
+                    <template #default="scope">
+                        <el-tag>{{ scope.row.name }}</el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column fixed="right" label="操作" align="center" width="150">
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="dialogVisible = true">
+                            查看详情
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </TableBox>
+        <el-dialog v-model="dialogVisible" title="手术详情" width="1000px" @close="dialogVisible = false">
+            <div class="basic_info">
+                <div class="list">
+                    <div>
+                        <div>品牌</div>
+                        <p>Codman</p>
+                        <div>型号</div>
+                        <p>823832</p>
+                    </div>
+                    <div>
+                        <div>设备名称</div>
+                        <p>强生</p>
+                        <div>设备类型</div>
+                        <p>阀门</p>
+                    </div>
+                    <div>
+                        <div>使用次数</div>
+                        <p>61</p>
+                        <div>最近使用</div>
+                        <p>2025-07-25</p>
+                    </div>
+                    <div>
+                        <div>平均初始压力</div>
+                        <p>119</p>
+                    </div>
+                </div>
+                <h3>植入设备信息</h3>
+                <el-table :data="tableData" border style="width: 100%">
+                    <el-table-column prop="date" label="手术日期" width="150" />
+                    <el-table-column prop="name" label="患者姓名" width="150" />
+                    <el-table-column prop="address" label="手术医生" width="150" />
+                    <el-table-column prop="address" label="分流方式" />
+                    <el-table-column prop="address" label="初始压力" />
+                </el-table>
+            </div>
+        </el-dialog>
     </div>
 </template>
-<style scoped></style>
+<style scoped>
+.data {
+    h3 {
+        font-weight: 100;
+        padding: 20px;
+        border-bottom: 1px solid #ddd;
+    }
+
+    ul {
+        display: flex;
+        justify-content: space-between;
+        gap: 20px;
+
+        li {
+            display: flex;
+            flex: 1;
+            height: 120px;
+            padding: 20px;
+            align-self: center;
+            gap: 15px;
+
+            i {
+                font-size: 45px;
+            }
+
+            h2 {
+                font-size: 30px;
+
+            }
+
+            text {
+                color: #666;
+            }
+        }
+    }
+
+    .chart {
+        display: flex;
+        gap: 20px;
+        margin-top: 20px;
+
+        >div {
+            flex: 1;
+            height: 400px;
+
+
+            >div {
+                width: 100%;
+                height: 330px;
+            }
+        }
+    }
+
+    .basic_info {
+        .list {
+            border: 1px solid #ebeef5;
+            border-bottom: none;
+
+            >div {
+                display: flex;
+                border-bottom: 1px solid #ebeef5;
+
+                >div {
+                    width: 200px;
+                    padding: 10px;
+                    background-color: #f5f7fa;
+                    border-right: 1px solid #ebeef5;
+                }
+
+                p {
+                    flex: 1;
+                    padding: 10px;
+
+                    &:first-of-type {
+                        border-right: 1px solid #ebeef5;
+                    }
+                }
+            }
+        }
+
+        h3 {
+            font-size: 15px;
+            margin: 20px 0;
+        }
+    }
+}
+</style>

src/views/login/index.vue

@@ -1,5 +1,83 @@
-<script setup lang='ts'></script>
+<script setup lang='ts'>
+import { ref } from 'vue';
+import { User, Lock } from '@element-plus/icons-vue'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+interface RuleForm {
+    username: string
+    password: string
+}
+const ruleFormRef = ref<FormInstance>()
+const form = ref<RuleForm>({
+    username: "",
+    password: ""
+})
+const rules = ref<FormRules<RuleForm>>({
+    username: [{
+        required: true,
+        message: '请输入账号',
+        trigger: 'blur'
+    }],
+    password: [{
+        required: true,
+        message: '请输入密码',
+        trigger: 'blur'
+    }]
+})
+const loginBtn = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate((valid) => {
+        if (valid) {
+            ElMessage({
+                message: '登录成功',
+                type: 'success',
+            })
+        } else {
+            ElMessage({
+                message: '请输入账号密码',
+                type: 'warning',
+            })
+        }
+    })
+}
+</script>
 <template>
-    <h1>登录页</h1>
+    <div class="login">
+        <div class="form">
+            <el-card>
+                <h2>调压通后台管理系统</h2>
+                <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="auto" size="large">
+                    <el-form-item prop="username">
+                        <el-input v-model="form.username" :prefix-icon="User" placeholder="用户名" />
+                    </el-form-item>
+                    <el-form-item prop="password">
+                        <el-input v-model="form.password" type="password" :prefix-icon="Lock" placeholder="密码" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button style="width: 100%;" type="primary" @click="loginBtn(ruleFormRef)">登录</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-card>
+        </div>
+    </div>
 </template>
-<style lang='scss' scoped></style>
+<style scoped>
+.login {
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+
+    .form {
+        text-align: center;
+        width: 380px;
+        margin: calc(25% - 150px) auto;
+
+        h2 {
+            font-size: 24px;
+            font-weight: 400;
+            margin: 20px 0;
+        }
+    }
+
+
+}
+</style>

src/views/overview/index.vue

@@ -24,8 +24,8 @@ for (let index = 0; index < 10; index++) {
 const pieDom = ref<HTMLDivElement | null>(null)
 const barDom = ref<HTMLDivElement | null>(null)
 
+const { globalProperties } = useCurrentInstance()
 const rederPie = () => {
-    const { globalProperties } = useCurrentInstance()
     const chart = globalProperties.$echarts.init(pieDom.value)
     const option = {
         title: [
@@ -104,7 +104,6 @@ const rederPie = () => {
     chart.setOption(option)
 }
 const rederBar = () => {
-    const { globalProperties } = useCurrentInstance()
     const chart = globalProperties.$echarts.init(barDom.value)
     const option = {
         tooltip: {
@@ -178,13 +177,14 @@ onMounted(() => {
                 最近手术记录 <el-button size="small" type="primary">查看全部</el-button>
             </template>
             <el-table stripe :data="tableData" height="480">
-                <el-table-column prop="date" label="日期" width="180" />
-                <el-table-column prop="name" label="姓名" width="180" />
-                <el-table-column prop="name" label="手术医生" width="180" />
+                <el-table-column prop="date" label="手术日期" width="120" />
+                <el-table-column prop="name" label="患者姓名" width="150" />
+                <el-table-column prop="name" label="手术医生" width="150" />
                 <el-table-column prop="name" label="手术名称" />
-                <el-table-column prop="name" label="脑积水类型" width="180" />
-                <el-table-column prop="name" label="当前阀门压力" width="180" />
-                <el-table-column fixed="right" label="操作" align="center" width="180">
+                <el-table-column prop="name" label="脑积水类型" width="150" />
+                <el-table-column prop="name" label="初始压力" width="150" />
+                <el-table-column prop="name" label="当前阀门压力" width="150" />
+                <el-table-column fixed="right" label="操作" align="center" width="150">
                     <template #default>
                         <el-button link type="primary" size="small">
                             查看详情
@@ -200,7 +200,7 @@ onMounted(() => {
 .data {
     h3 {
         font-weight: 100;
-        padding: 20px 15px;
+        padding: 20px;
         border-bottom: 1px solid #ddd;
     }
 

src/views/surgery/index.vue

@@ -1,7 +1,303 @@
-<script setup lang='ts'></script>
+<script setup lang='ts'>
+import { nextTick, onMounted, ref } from 'vue';
+import useCurrentInstance from "@/hooks/useCurrentInstance";
+const { globalProperties } = useCurrentInstance()
+
+const form = ref({
+    name: "",
+    date: "",
+    id: "",
+    departments: ""
+})
+const options = ref([
+    { value: 1, label: "1" },
+    { value: 2, label: "2" }
+])
+const tableData = ref([{
+    date: '2016-05-03',
+    name: '张三',
+    address: '啊啊啊啊',
+}])
+
+const activeName = ref("info")
+const dialogVisible = ref(false)
+const lineDom = ref(null)
+const rederLine = () => {
+    const chart = globalProperties.$echarts.init(lineDom.value)
+    // return   
+    const option = {
+        grid: {
+            left: "5%",
+            right: "5%"
+        },
+        xAxis: {
+            type: 'category',
+            data: ['2026/07/08', '2026/07/08', '2026/07/08', '2026/07/08'],
+            axisLabel: {
+                rotate: 50
+            }
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: [820, 932, 901, 934],
+                type: 'line',
+                smooth: true
+            }
+        ]
+    };
+    chart.setOption(option)
+}
+onMounted(() => {
+})
+const openDialog = () => {
+    nextTick(() => {
+        rederLine()
+    })
+}
+</script>
 <template>
     <div class="surgery">
-        <h1>手术记录</h1>
+        <el-card>
+            <el-form class="form" :inline="true" :model="form" label-width="90px">
+                <el-form-item label="病人姓名">
+                    <el-input v-model="form.name" />
+                </el-form-item>
+                <el-form-item label="住院ID">
+                    <el-input v-model="form.id" />
+                </el-form-item>
+                <el-form-item label="科室">
+                    <el-select v-model="form.departments" placeholder="选择科室">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="原发病">
+                    <el-select v-model="form.departments" placeholder="选择科室">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="脑积水类型">
+                    <el-select v-model="form.departments" placeholder="选择科室">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="手术医生">
+                    <el-select v-model="form.departments" placeholder="选择科室">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="分流方式">
+                    <el-select v-model="form.departments" placeholder="选择科室">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="分流品牌">
+                    <el-select v-model="form.departments" placeholder="选择科室">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="脑压类型">
+                    <el-select v-model="form.departments" placeholder="选择科室">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="阀门类型">
+                    <el-select v-model="form.departments" placeholder="选择科室">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="调压次数">
+                    <el-select v-model="form.departments" placeholder="选择科室">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="日期" style="width: 430px;">
+                    <el-date-picker v-model="form.date" type="daterange" start-placeholder="选择开始日期"
+                        end-placeholder="选择结束日期" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary">搜索</el-button>
+                    <el-button>重置</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <TableBox :total="100">
+            <template #header>
+                手术记录列表
+                <div>
+                    <el-button type="primary">导出数据</el-button>
+                    <el-button>刷新</el-button>
+                </div>
+            </template>
+            <el-table stripe :data="tableData" height="480">
+                <el-table-column fixed="left" prop="date" label="手术日期" width="120" />
+                <el-table-column fixed="left" prop="name" label="患者姓名" width="100" />
+                <el-table-column prop="name" label="住院ID" width="100" />
+                <el-table-column prop="name" label="原发病" width="180" />
+                <el-table-column prop="name" label="脑积水类型" width="100" />
+                <el-table-column prop="name" label="脑压类型" width="180" />
+                <el-table-column prop="name" label="分流方式" width="180" />
+                <el-table-column prop="name" label="分流品牌" width="180" />
+                <el-table-column prop="name" label="阀门型号" width="180" />
+                <el-table-column prop="name" label="是否抗磁" width="180" />
+                <el-table-column prop="name" label="术前腰穿压力" width="180" />
+                <el-table-column prop="name" label="初始压力" width="180" />
+                <el-table-column prop="name" label="当前阀门压力" width="180" />
+                <el-table-column prop="name" label="调压次数" width="180" />
+                <el-table-column prop="name" label="手术医生" width="180" />
+                <el-table-column prop="name" label="手术次数" width="180" />
+                <el-table-column fixed="right" label="手术详情" align="center" width="80">
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="dialogVisible = true">
+                            查看详情
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </TableBox>
+        <el-dialog v-model="dialogVisible" title="手术详情" width="1000px" @close="dialogVisible = false"
+            @opened="openDialog">
+            <el-tabs v-model="activeName">
+                <el-tab-pane label="基本信息" name="info">
+                    <div class="basic_info">
+                        <ul>
+                            <li>
+                                <div>患者姓名</div>
+                                <p>张镇烔</p>
+                                <div>住院ID</div>
+                                <p>20014268</p>
+                            </li>
+                            <li>
+                                <div>身份证号</div>
+                                <p>张镇烔</p>
+                                <div>手机号</div>
+                                <p>20014268</p>
+                            </li>
+                            <li>
+                                <div>身份证号</div>
+                                <p>张镇烔</p>
+                                <div>手机号</div>
+                                <p>20014268</p>
+                            </li>
+                            <li>
+                                <div>最后调压时间</div>
+                                <p></p>
+                            </li>
+                        </ul>
+                        <h3>植入设备信息</h3>
+                        <el-table :data="tableData" border style="width: 100%">
+                            <el-table-column prop="date" label="品牌" width="150" />
+                            <el-table-column prop="name" label="型号" width="150" />
+                            <el-table-column prop="address" label="设备名称" />
+                            <el-table-column prop="address" label="分流方式" width="180" />
+                            <el-table-column prop="address" label="初始压力" width="180" />
+                        </el-table>
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="调压记录" name="record">
+                    <div v-if="true">
+                        <el-alert title="共调压 4 次，当前阀门压力 80mmH2O，设备型号 Codman 823832" type="info" :closable="false" />
+                        <div class="charts" ref="lineDom"></div>
+                        <el-table :data="tableData" border style="width: 100%">
+                            <el-table-column prop="date" label="调压时间" width="180" />
+                            <el-table-column prop="name" label="调整压力" width="130">
+                                <template #default="scope">
+                                    <el-tag>{{ scope.row.name }}</el-tag>
+                                </template>
+                            </el-table-column>>
+                            <el-table-column prop="address" label="调压原因" />
+                        </el-table>
+                    </div>
+                    <el-empty v-else description="暂无调压记录" />
+                </el-tab-pane>
+                <el-tab-pane label="手术影响" name="affect">
+                    <div class="affect" v-if="true">
+                        <div v-for="value in 5">
+                            <video controls preload="auto"
+                                src="https://bestshuxing.com/upload/2025/07/14/6874f78e-0145-d040-0013-c2e021c0998f.mp4">你的浏览器暂不支持播放该视频
+                            </video>
+                            <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
+                        </div>
+                    </div>
+                    <el-empty v-else description="暂无术前影像" />
+                </el-tab-pane>
+            </el-tabs>
+        </el-dialog>
     </div>
 </template>
-<style scoped></style>
+<style scoped>
+:deep(.el-form-item__content) {
+    width: 190px;
+}
+
+.surgery {
+
+    /* .form {
+        padding-top: 20px;
+    } */
+    .basic_info {
+        ul {
+            border: 1px solid #ebeef5;
+            border-bottom: none;
+
+            li {
+                display: flex;
+                border-bottom: 1px solid #ebeef5;
+
+                div {
+                    width: 200px;
+                    padding: 10px;
+                    background-color: #f5f7fa;
+                    border-right: 1px solid #ebeef5;
+                }
+
+                p {
+                    flex: 1;
+                    padding: 10px;
+
+                    &:first-of-type {
+                        border-right: 1px solid #ebeef5;
+                    }
+                }
+            }
+        }
+
+        h3 {
+            font-size: 15px;
+            margin: 20px 0;
+        }
+    }
+
+    .charts {
+        margin: 20px 0;
+        width: 960px;
+        height: 300px;
+    }
+
+    .affect {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px;
+
+        >div {
+            width: 23%;
+            border-radius: 10px;
+            overflow: hidden;
+            border: 1px solid #ddd;
+
+            video {
+                height: 150px;
+                width: 100%;
+                object-fit: cover;
+            }
+
+            p {
+                padding: 0 10px 8px;
+                line-height: 17px;
+            }
+        }
+    }
+}
+</style>