graduate-ui/src/views/Home/Index.vue

<template>
  <el-skeleton :loading="loading" animated>
    <el-row :gutter="8">
      <!-- 第一部分 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
        <el-card class="h-940px mb-10px">
          <el-card shadow="never" class="h-100%">

            <template #header>
              <div class="h-7 flex justify-between fw-800 text-20px">
                <span>基本信息</span>
              </div>
            </template>

            <el-row style="flex-wrap: wrap; ">
              <el-col v-for="(item, index) in projects" :key="`card-${index}`" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-card shadow="hover" class="mr-5px mt-5px " style="background-color:#2585a6 ">
                  <div class="flex items-center h-75px ">
                    <!-- <Icon :icon="item.icon" :size="25" class="mr-8px" /> -->
                    <Icon :icon="item.icon" :size="38" class="mr-8px " />

                    <span class="text-17px c-white">{{ item.name }}</span>
                  </div>
                  <div class="mb-18px text-32px c-white ml-20px text-center">{{ t(item.message) }}</div>
                  <!-- <div class="mt-12px flex justify-between text-12px text-gray-400">                                                                  </div> -->
                </el-card>
              </el-col>
            </el-row>
          </el-card>

          <el-card shadow="never" class=" h-100% mt-10px ">
            <template #header>
              <div class="h-5 flex justify-between fw-800 text-20px">
                <span>实时出勤统计</span>
              </div>
            </template>
            <el-card shadow="never" class="ml-2px  pr-10px  mt-10px" style="background-color:#33a3dc ;opacity: 0.8; ">
              <div class="h-70px flex items-center justify-center flex-wrap mt-10px c-white">
                <div class="px-25px text-center" style="margin: auto;">
                  <div class="mb-16px text-18px text-white ">打卡人数</div>
                  <CountTo class="text-28px" :start-val="0" :end-val="totalSate.normalNum" :duration="2600" />
                </div>
                <el-divider direction="vertical" border-style="dashed" />
                <div class="px-8px text-center" style="margin: auto;">
                  <div class="mb-16px text-18px text-white ">未打卡人数</div>
                  <CountTo class="text-28px" :start-val="0" :end-val="totalSate.errorNum" :duration="2600" />
                </div>
<!--                <el-divider direction="vertical" border-style="dashed" />-->
<!--                <div class="px-8px text-center" style="margin: auto;">-->
<!--                  <div class="mb-16px text-18px text-white ">请假人数</div>-->
<!--                  <CountTo class="text-28px" :start-val="0" :end-val="totalSate.excuseNum" :duration="2600" />-->
<!--                </div>-->
              </div>
            </el-card>
          </el-card>

          <el-card shadow="hover" class=" mt-10px">
            <template #header>
              <div class="h-5 flex justify-between fw-800 text-20px">
                <span>毕业条件达成统计</span>
              </div>
            </template>
            <el-skeleton :loading="loading" animated>
              <Echart :options="pieOptionsData" :height="250" />
            </el-skeleton>
          </el-card>
        </el-card>
      </el-col>
      <!-- 第二部分 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="7" class="h-480px">
        <!-- 第一个el-row -->
        <el-row :gutter="15">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-card shadow="never" class=" mb-10px h-465px ">
              <template #header>
                <div class="h-7 flex justify-between fw-800 text-20px">
                  <span>周出勤情况</span>
                </div>
              </template>
              <el-card shadow="hover" class=" h-365px ">
                <el-skeleton :loading="loading" animated >
                  <Echart :options="barOptionsData" :height="350" style="margin-top: -30px;"/>
                </el-skeleton>
              </el-card>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-card shadow="never" class="mb-10px h-465px ">
              <template #header>
                <div class="h-7 flex justify-between fw-800 text-20px">
                  <span>实时打卡状态</span>
                </div>
              </template>
              <div class="demo">
                <div class="table-header">
                          <div class="header">
                            <el-row class="shouye" style="border: none;">
                              <el-col :span="6" class="center text-18px" style="border: none;">
                                <div>姓名</div>
                              </el-col>
                              <el-col :span="6" class="center text-18px" style="border: none;">
                                <div>学号</div>
                              </el-col>
                              <el-col :span="6" class="center text-18px" style="border: none;">
                                <div>工作间</div>
                              </el-col>
                              <el-col :span="6" class="center text-18px" style="border: none;">
                                <div>打卡时间</div>
                              </el-col>
                              <!-- <el-col :span="10" class="center text-18px" style="border: none;">
                                <div>缺勤时间段</div>
                              </el-col> -->
                            </el-row>
                          </div>
                        </div>
                <vue3ScrollSeamless v-if="list.length > 0" class="scroll-wrap text-color" :classOptions="classOptions" :dataList="list">
                  <div v-if="list.length > 0">
                    <el-row
v-for="(item, i) of list" :key="i" class="shouye"
                      style="margin-bottom: 10px; display: flex; justify-content: center;">
                      <el-col
:span="6" class="center"
                        style="display: flex; justify-content: center; align-items: center; padding: 6px;">
                        <div>{{ item.studentName }}</div>
                      </el-col>
                      <el-col
:span="6" class="center"
                        style="display: flex; justify-content: center; align-items: center; padding: 6px;">
                        <div>{{ item.userNumber }}</div>
                      </el-col>
                      <el-col
:span="6" class="center"
                        style="display: flex; justify-content: center; align-items: center; padding: 6px;">
                        <div>{{ item.daptName }}</div>
                      </el-col>
                      <el-col
:span="6" class="center"
                        style="display: flex; justify-content: center; align-items: center; padding: 6px;">
                        <div>{{ formatDate(item.clockInTime) }}</div>
                      </el-col>
                    </el-row>
                  </div>
                  <!-- <div v-if="list.length == 0"
                    style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
                    暂无预测记录
                  </div> -->
                </vue3ScrollSeamless>
                <div v-if="list.length == 0" style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; margin-top: -230px;">
                  <el-empty description="暂无数据"/>
                </div>
              </div>
            </el-card>

          </el-col>
        </el-row>
      </el-col>
              <!-- 第二个el-row -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="7">
        <el-row :gutter="15" align="center">
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="24">
            <el-card shadow="never" class=" h-465px mb-10px "> <!-- 移除 el-card 的边框 -->
              <template #header>
                <div class="h-7 flex justify-between fw-800 text-20px">
                  <span>缺勤预警</span>
                </div>
              </template>

              <div class="demos">
                <div class="table-header">
                          <div class="header">
                            <el-row class="shouye" style="border: none;">
                              <el-col :span="6" class="center text-18px" style="border: none;">
                                <div>姓名</div>
                              </el-col>
                              <el-col :span="6" class="center text-18px" style="border: none;">
                                <div>学号</div>
                              </el-col>
                              <el-col :span="6" class="center text-18px" style="border: none;">
                                <div>工作间</div>
                              </el-col>
                              <el-col :span="6" class="center text-18px" style="border: none;">
                                <div>导师</div>
                              </el-col>
                              <!-- <el-col :span="10" class="center text-18px" style="border: none;">
                                <div>缺勤时间段</div>
                              </el-col> -->
                            </el-row>
                          </div>
                        </div>

                <vue3ScrollSeamless v-if="list2.length > 0" class="scroll-wraps text-color" :classOptions="class2Options" :dataList="list2">
                  <div v-if="list2.length > 0">
                    <el-row v-for="(item, i) of list2" :key="i" class="shouye" >
                      <!-- <el-col :span="6" class="center" style="padding: 10px; border: none;">
                        <div>{{ item.ID }}</div>
                      </el-col> -->
                      <el-col :span="6" class="center" style="padding: 10px; border: none;">
                        <div>{{ item.studentName }}</div>
                      </el-col>
                      <el-col :span="6" class="center" style="padding: 10px; border: none;">
                        <div>{{ item.userNumber }}</div>
                      </el-col>
                      <el-col :span="6" class="center" style="padding: 10px; border: none;">
                        <div>{{ item.deptName }}</div>
                      </el-col>
                      <el-col :span="6" class="center" style="padding: 10px; border: none;">
                        <div>{{ item.supervisor }}</div>
                      </el-col>
                    </el-row>
                  </div>
                  <!-- <div v-if="list2.length == 0"
                    style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
                    暂无预测记录
                  </div> -->
                </vue3ScrollSeamless>
                <div v-if="list2.length == 0" style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; margin-top: -230px;">
                  <el-empty description="暂无数据"/>
                </div>
              </div>
            </el-card>

          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="24">
            <el-card shadow="never" class=" mt-1px h-465px ">
              <template #header>
                <div class="h-7 flex justify-between fw-800 text-20px">
                  <span>学生毕业条件达成率</span>
                </div>
              </template>
        
              <div class="demoss">
                <div class="header">
                <el-row class="shouye h-25px" style="border: none;">
                  <el-col :span="12" class="center text-18px" style="border: none;padding: 8px;margin-left: 5px; margin-top: -5px;">
                    <div>工作间</div>
                  </el-col>
                  <el-col :span="12" class="center text-18px" style="border: none;padding: 8px;margin-left: -35px; margin-top: -5px;">
                    <div>达成率</div>
                  </el-col>
                </el-row>
              </div>
                <vue3ScrollSeamless class="scroll-wrapss  text-color" :classOptions="list1Options" :dataList="list1" v-if="list1.length > 0">
                  <div v-if="list1.length > 0">
                    <el-row v-for="(item, i) of list1" :key="i" class="shouye" :style="{ marginBottom: '10px' }">
                      <!-- 增加行与行之间的间距 -->
                      <el-col :span="12" class="center" style="padding: 8px;"> <!-- 增加内边距 -->
                        <div>{{ item.name }}</div>
                      </el-col>
                      <el-col :span="12" class="center" style="padding: 8px;">
                        <div>{{ item.graduationRate }}%</div>
                      </el-col>
                    </el-row>
                  </div>
                  <div
v-if="list1.length == 0"
                    style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
                    暂无预测记录
                  </div>
                </vue3ScrollSeamless>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-skeleton>
</template>

<script lang="ts" setup>
import { EChartsOption, List } from 'echarts'
import { formatTime } from '@/utils'
import {formatDate} from "@/utils/formatTime";
import { useUserStore } from '@/store/modules/user'
import { useWatermark } from '@/hooks/web/useWatermark'
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
import { pieOptions, barOptions } from './echarts-data'
import { reactive, onMounted, watchEffect } from "vue";
import {vue3ScrollSeamless} from "vue3-scroll-seamless";
import * as UserApi from '@/api/system/user'
import * as  DeptApi from '@/api/system/dept'
import  { StudentAttendanceApi } from '@/api/system/studentAttendance'

defineOptions({ name: 'Home' })

const { t } = useI18n()
const userStore = useUserStore()
const { setWatermark } = useWatermark()
const loading = ref(true)
const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname



/*基本信息*/
const detail = reactive({
  deptNum: undefined,
  teacherNum: undefined,
  studentNum: undefined
})
const getDetail = async () => {
  const data = await UserApi.getDetail()
  console.log("基本信息", data);
  detail.deptNum = data.deptNum
  detail.teacherNum = data.teacherNum
  detail.studentNum = data.studentNum
}
// 获取项目数
let projects = reactive<Project[]>([])
const getProject = async () => {
  const data = [
    {
      name: '学院工作间数量',
      icon: 'svg-icon:gzs',
      message: String(detail.deptNum) + '个',
      time: new Date()
    },
    {
      name: '导师数量',
      icon: 'svg-icon:ds',
      message: String(detail.teacherNum) + '人',
      time: new Date()
    },
    {
      name: '在校生数量',
      icon: 'svg-icon:zxs',
      message: String(detail.studentNum) + '人',
      time: new Date()
    }

  ]
  projects = Object.assign(projects, data)
}


/**实时出勤统计 */
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
  normalNum: 0,
  errorNum: 0,
  excuseNum: 0,
})
const getCount = async () => {
  const data = await StudentAttendanceApi.getDayAttendance()
  console.log("实时出勤统计", data);
  totalSate = Object.assign(totalSate, data)
}

// /**毕业达成统计 */
let pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
const getGraduateCount = async () => {
  const data = await UserApi.getGraduateCount()
  console.log("毕业达成统计", data);
  const studentNum = data.studentNum;
  const graduateNum = data.graduateNum;
  const options = {
    title: {
      text: null,
      left: 'center',
      top: '20px'
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '10%',  // 顶部位置
      left: 'left', // 左侧位置
    },
    series: [
      {
        type: 'pie',
        radius: ['120px', '70px'], // 设定内圈和外圈半径
        center: ['50%', '85%'], // 中心位置
        startAngle: 180,
        endAngle: 360,
        data: [
          {
            value: graduateNum, // 畢業生数量
            name: '已达成', // 国际化名称或直接用字符串 '毕业生'
            label: {
              show: true,
              position: 'outside',  // 拉出标注
              formatter: '{b}: {c}', // 显示名称和数值
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              show: true,
              length: 75,
              length2: 10,
              smooth: true,
              lineDash: [5, 5],
            },
          },
          {
            value: studentNum, // 在校生数量（总在校生减去毕业生）
            name: '未达成', // 国际化名称或直接用字符串 '在校生'
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}: {c}',
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              show: true,
              length: 75,
              length2: 10,
              smooth: true,
              lineDash: [5, 5],
            },
          },
        ],
        itemStyle: {
          // 设置饼图的颜色
          color: function (params) {
            const colorList = ['#2585a6','#5cb5e3' ]; // 定义颜色数组
            return colorList[params.dataIndex]; // 根据数据索引返回对应的颜色
          }
        }
      },
    ],
  };

//   // set(
//   //   pieOptionsData,
//   //   'legend.data',
//   //   data.map((v) => t(v.name))
//   // );

  pieOptionsData = Object.assign(pieOptionsData, options);
};

/**周出勤情况 */
let barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
const getWeekend = async () => {
    const data = await StudentAttendanceApi.getWeekendAttendance();
    console.log("周出勤情况", data);
    const normalData = data.dailyNormalList
    const errorData = data.dailyErrorList;
    const excuseData = data.dailyExcuseList;
    barOptionsData.series[0].data = normalData;
    barOptionsData.series[1].data = errorData;
    barOptionsData.series[2].data = excuseData;
};

/**缺勤预警 */
let list2 = reactive([]);
const getStudentAttendanceError = async () => {
  const data = await StudentAttendanceApi.getDayStudentErrorAttendance()
  console.log("缺勤列表", data);
  list2.splice(0, list2.length, ...data);
}
const class2Options = reactive({
  step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
  limitMoveNum: list2.length,//无缝滚动列表元素的长度，一般设置为列表的长度
  direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
});

/**实时打卡状态 */
//打卡滚动列表
const list = reactive([]);
const getStudentAttendance = async () => {
  const data = await StudentAttendanceApi.getDayStudentAttendance()
  console.log("打卡列表", data);
  list.splice(0, list.length, ...data);
}
const classOptions = reactive({
  step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
  limitMoveNum: list.length,//无缝滚动列表元素的长度，一般设置为列表的长度
  direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。

});

/** 学生毕业条件达成率 */
//在线情况滚动列表
const list1 = reactive([]);
const getGraduationSource = async () => {
  const data = await DeptApi.getGraduationSource()
  console.log("毕业条件达成率", data);
  list1.splice(0, list1.length,  ...data);
}
const list1Options = reactive({
  step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
  limitMoveNum: list1.length,//无缝滚动列表元素的长度，一般设置为列表的长度
  direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
});

onMounted(() => {
  getDetail()
  getWeekend()
  getProject()
  getCount()
  getStudentAttendanceError()
  getStudentAttendance()
  getGraduationSource()
  getGraduateCount()
})



// // 获取通知公告
// let notice = reactive<Notice[]>([])
// const getNotice = async () => {
//   const data = [
//     {
//       title: '系统支持 JDK 8/17/21，Vue 2/3',
//       type: '通知',
//       keys: ['通知', '8', '17', '21', '2', '3'],
//       date: new Date()
//     },
//     {
//       title: '后端提供 Spring Boot 2.7/3.2 + Cloud 双架构',
//       type: '公告',
//       keys: ['公告', 'Boot', 'Cloud'],
//       date: new Date()
//     },
//     {
//       title: '全部开源，个人与企业可 100% 直接使用，无需授权',
//       type: '通知',
//       keys: ['通知', '无需授权'],
//       date: new Date()
//     },
//     {
//       title: '国内使用最广泛的快速开发平台，超 300+ 人贡献',
//       type: '公告',
//       keys: ['公告', '最广泛'],
//       date: new Date()
//     }
//   ]
//   notice = Object.assign(notice, data)
// }

// // 获取基本信息
// let basic = reactive<Basic[]>([])
// const getBasic = async () => {
//   const data = [
//     {
//       title: '学院工作间数量',
//       type: '通知',
//       keys: ['通知', '8', '17', '21', '2', '3'],
//       date: new Date()
//     },
//     {
//       title: '硕士研究生数量',
//       type: '公告',
//       keys: ['公告', 'Boot', 'Cloud'],
//       date: new Date()
//     },
//     {
//       title: '博士研究生数量',
//       type: '通知',
//       keys: ['通知', '无需授权'],
//       date: new Date()
//     },
//     {
//       title: '硕士研究生导师数量',
//       type: '公告',
//       keys: ['公告', '最广泛'],
//       date: new Date()
//     },
//     {
//       title: '博士生导师数量',
//       type: '公告',
//       keys: ['公告', '最广泛'],
//       date: new Date()
//     }

//   ]
//   basic = Object.assign(basic, data)
// }


// 获取快捷入口
// let shortcut = reactive<Shortcut[]>([])

// const getShortcut = async () => {
//   const data = [
//     {
//       name: 'Github',
//       icon: 'akar-icons:github-fill',
//       url: 'github.io'
//     },
//     {
//       name: 'Vue',
//       icon: 'logos:vue',
//       url: 'vuejs.org'
//     },
//     {
//       name: 'Vite',
//       icon: 'vscode-icons:file-type-vite',
//       url: 'https://vitejs.dev/'
//     },
//     {
//       name: 'Angular',
//       icon: 'logos:angular-icon',
//       url: 'github.io'
//     },
//     {
//       name: 'React',
//       icon: 'logos:react',
//       url: 'github.io'
//     },
//     {
//       name: 'Webpack',
//       icon: 'logos:webpack',
//       url: 'github.io'
//     }
//   ]
//   shortcut = Object.assign(shortcut, data)
// }

// 用户来源
// const getUserAccessSource = async () => {
//   const data = [
//     { value: 1048, name: '达成人数' },
//     { value: 735, name: '未达成人数' },
//   ];

//   const options = {
//     title: {
//       text: null,
//       left: 'center',
//       top: '20px'
//     },
//     tooltip: {
//       trigger: 'item',
//     },
//     legend: {
//       top: '10%',  // 顶部位置
//       left: 'left', // 左侧位置
//     },
//     series: [
//       {
//         type: 'pie',
//         radius: ['120px', '70px'], // 设定内圈和外圈半径
//         center: ['50%', '85%'], // 中心位置
//         startAngle: 180,
//         endAngle: 360,
//         data: data.map(v => ({
//           value: v.value,
//           name: t(v.name),
//           label: {
//             show: true,
//             position: 'outside',  // 拉出标注
//             formatter: '{b}: {c}', // 显示名称和数值
//             // 可以自定义引线的样式
//             emphasis: {
//               show: true,
//             },
//           },
//           // 自定义引线样式
//           labelLine: {
//             show: true,
//             length: 75, // 引线长度
//             length2: 10, // 后半段引线的长度
//             smooth: true, // 引线是否平滑
//             lineDash: [5, 5], // 引线虚线样式
//           },
//         })),
//         itemStyle: {
//           // 设置饼图的颜色
//           color: function (params) {
//             const colorList = ['#94d6da', '#00a6ac']; // 定义颜色数组
//             return colorList[params.dataIndex]; // 根据数据索引返回对应的颜色
//           }
//         }
//       },
//     ],
//   };

//   set(
//     pieOptionsData,
//     'legend.data',
//     data.map((v) => t(v.name))
//   );

//   pieOptionsData = Object.assign(pieOptionsData, options);
// };




// 周活跃量
// const getWeeklyUserActivity = async () => {
//   const data = [
//     { value: 13253, name: '异常人数' },
//     { value: 34235, name: '正常人数' },
//   ];

//   const options = {
//     title: {
//       text: null,
//     },
//     tooltip: {
//       trigger: 'item',
//     },
//     grid: {
//       left: '80px',
//       top: '10px',  // 上方偏移
//     },
//     series: [
//       {
//         name: '人数',
//         type: 'bar',
//         barWidth: '40%', // 设置柱子的宽度为40%
//         data: data.map((v) => v.value), // 设置Y轴数据
//         itemStyle: {
//           // 设置每个柱状的颜色
//           color: function (params) {
//             const colorList = ['#145b7d', '#33a3dc']; // 定义颜色数组
//             return colorList[params.dataIndex]; // 根据数据索引返回对应的颜色
//           }
//         }
//       }
//     ]
//   };

//   set(
//     barOptionsData,
//     'xAxis.data',
//     data.map((v) => t(v.name))
//   );

//   barOptionsData = Object.assign(barOptionsData, options);
// };

const getAllApi = async () => {
  await Promise.all([
    await getDetail(),
    getCount(),
    getProject(),
    getWeekend(),
    getStudentAttendanceError(),
    getStudentAttendance(),
    getGraduationSource(),
    getGraduateCount(),
    // getNotice(),
    // getBasic(),
    // getShortcut(),
    // getUserAccessSource(),
    // getWeeklyUserActivity()
  ])
  loading.value = false
}

getAllApi()
</script>

<style scoped>
.center {
  text-align: center;
}

/* 滚动列表 */
.title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  margin-bottom: 30px;
}

.title {
  font-size: 19px;
}

.demo {
  width: 99%;
  height: 362px;
}

.demos {
  width: 95%;
  height: 100%;
}

.demoss {
  width: 95%;
  height: 100%;
}

.scroll-wrap {
  width: 100%;
  height: 330px;
  margin: 0 auto;
  overflow: hidden;
  /* background-color: #feeeed; */
  opacity: 0.6;
  font-size: 15px;
  margin-top: 20px;
  margin-left: 18px;

}

.scroll-wraps {
  width: 101%;
  height: 350px;
  margin: 0 auto;
  overflow: hidden;
  opacity: 0.6;
  font-size: 15px;
  border: none;
  margin-top: 20px;

}

.scroll-wrapss {
  width: 90%;
  height: 350px;
  margin: 0 auto;
  overflow: hidden;
  /* background-color: rgba(198, 204, 238, 0.3); */
  /* background-color: #feeeed; */
  opacity: 0.6;
  font-size: 15px;
  margin-top: 10px;

}

/* 轮播图的导航条
.table-header {
  font-family: Arial, sans-serif;
  height: 30px;
  display: flex;
  align-items: center;
  border: 1px solid;
  width: 280px;
  flex-wrap: nowrap;
  padding-right: 10px;
}

.header {
  width: 660px;
  font-size: 16px;
} */

.border {
  border: 1px solid;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;

}

/* .text-color {
 color: rgb(15, 131, 233);
} */



.shouye {
  flex-wrap: nowrap;
  border-bottom: 1px solid;
}

::v-deep .el-divider.el-divider--vertical {
  border-left: 1px solid white;
}
</style>