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

  <!-- <div>
                                                                  <el-card shadow="never">
                                                                    <el-skeleton :loading="loading" animated>
                                                                      <el-row :gutter="16" justify="space-between">
                                                                        <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                                                                          <div class="flex items-center">
                                                                            <el-avatar :src="avatar" :size="70" class="mr-16px">
                                                                              <img src="@/assets/imgs/avatar.gif" alt="" />
                                                                            </el-avatar>
                                                                            <div>
                                                                              <div class="text-20px">
                                                                                {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
                                                                              </div>
                                                                              <div class="mt-10px text-14px text-gray-500">
                                                                                {{ t('workplace.toady') }}，20℃ - 32℃！
                                                                              </div>
                                                                            </div>
                                                                          </div>
                                                                        </el-col>
                                                                        <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                                                                          <div class="h-70px flex items-center justify-end lt-sm:mt-10px">
                                                                            <div class="px-8px text-right">
                                                                              <div class="mb-16px text-14px text-gray-400">{{ t('workplace.project') }}</div>
                                                                              <CountTo class="text-20px" :start-val="0" :end-val="totalSate.project" :duration="2600" />
                                                                            </div>
                                                                            <el-divider direction="vertical" />
                                                                            <div class="px-8px text-right">
                                                                              <div class="mb-16px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
                                                                              <CountTo class="text-20px" :start-val="0" :end-val="totalSate.todo" :duration="2600" />
                                                                            </div>
                                                                            <el-divider direction="vertical" border-style="dashed" />
                                                                            <div class="px-8px text-right">
                                                                              <div class="mb-16px text-14px text-gray-400">{{ t('workplace.access') }}</div>
                                                                              <CountTo class="text-20px" :start-val="0" :end-val="totalSate.access" :duration="2600" />
                                                                            </div>
                                                                          </div>
                                                                        </el-col>
                                                                      </el-row>
                                                                    </el-skeleton>
                                                                  </el-card>
                                                                </div> -->
  <!-- 日期
                                                                                                  <div class="mt-16px text-12px text-gray-400">
                                                                                                    {{ formatTime(item.date, 'yyyy-MM-dd') }}
                                                                                                  </div> -->
  <!-- 更多<el-link type="primary" :underline="false" href="https://github.com/yudaocode" target="_blank"> {{
                                                    t('action.more') }}
                                                  </el-link> -->

<template>
  <el-skeleton :loading="loading" animated>
    <el-row :gutter="8">
      <!-- 第一部分 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
        <el-card style="height: 99%;">
          <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-90px ">
                    <!-- <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">
                                                                                   
                                                                                    <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
                                                                                  </div> -->
                </el-card>
              </el-col>
            </el-row>
          </el-card>
  
          <el-card shadow="never" class=" h-100% mt-20px ">
            <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-8px text-right">
                  <div class="mb-10px text-20px text-white ">当日出勤情况</div>
                </div>
                <el-divider direction="vertical" style="border-left-black" />
                <div class="px-25px text-center">
                  <div class="mb-16px text-18px text-white ">正常人数</div>
                  <CountTo class="text-20px" :start-val="0" :end-val="totalSate.normal" :duration="2600" />
                </div>
                <el-divider direction="vertical" border-style="dashed" />
                <div class="px-8px text-center">
                  <div class="mb-16px text-18px text-white ">异常人数</div>
                  <CountTo class="text-20px" :start-val="0" :end-val="totalSate.unusual" :duration="2600" />
                </div>
              </div>
            </el-card>
          </el-card>
  
          <el-card shadow="hover" class="mb-8px   mt-30px">
            <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="14" :xl="10">
        <!-- 第一个el-row -->
        <el-row :gutter="15">
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-card shadow="never" class="ml-10px h-480px ">
              <template #header>
                <div class="h-5 flex justify-between fw-800 text-20px">
                  <span>周出勤情况</span>
                </div>
              </template>
              <el-card shadow="hover" class="mt-1px h-380px ">
                <el-skeleton :loading="loading" animated>
                  <Echart :options="barOptionsData" :height="350" />
                </el-skeleton>
              </el-card>
            </el-card>
          </el-col>
  
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="10">
            <el-card shadow="never">
              <template #header>
                <div class="h-5 flex justify-between fw-800 text-20px">
                  <span>实时打卡状态</span>
                </div>
              </template>
              <div class="demo">
                <vue3ScrollSeamless 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="7" class="center"
                        style="display: flex; justify-content: center; align-items: center; padding: 6px;">
                        <div>{{ item.trainNumber }}</div>
                      </el-col>
                      <el-col :span="6" class="center"
                        style="display: flex; justify-content: center; align-items: center; padding: 6px;">
                        <div>{{ item.destination }}</div>
                      </el-col>
                      <el-col :span="6" class="center"
                        style="display: flex; justify-content: center; align-items: center; padding: 6px;">
                        <div>{{ item.departureTime }}</div>
                      </el-col>
                      <el-col :span="5" class="center"
                        style="display: flex; justify-content: center; align-items: center; padding: 6px;">
                        <div>{{ item.status }}</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>
            </el-card>
  
          </el-col>
        </el-row>
  
        <!-- 第二个el-row -->
        <el-row class="mt-12px" :gutter="15" align="center">
          <el-col :xs="24" :sm="24" :md="24" :lg="13" :xl="7">
            <el-card shadow="never" class="mt-1px h-480px ml-10px" style="border: none;"> <!-- 移除 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="8" 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-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 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.destination }}</div>
                      </el-col>
                      <el-col :span="6" class="center" style="padding: 10px; border: none;">
                        <div>{{ item.trainNumber }}</div>
                      </el-col>
                      <el-col :span="6" class="center" style="padding: 10px; border: none;">
                        <div>{{ item.departureTime }}</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>
            </el-card>
  
          </el-col>
  
          <el-col :xs="24" :sm="24" :md="24" :lg="11" :xl="7">
            <el-card shadow="never" class="mr-8px mt-1px h-480px ">
              <template #header>
                <div class="h-7 flex justify-between fw-800 text-20px">
                  <span>学生毕业条件达成率</span>
                </div>
              </template>
              <div class="demoss">
                <!-- <div class="table-header">
                          <div class="header">
                            <el-row class="shouye">
                              <el-col :span="12" class="center text-18px">
                                <div>工作间</div>
                              </el-col>
                              <el-col :span="15" class="center  text-18px ">
                                <div>学生毕业条件达成率</div>
                              </el-col>
                            </el-row>
                          </div>
                        </div> -->
  
                <vue3ScrollSeamless class="scroll-wrapss  text-color" :classOptions="list1Options" :dataList="list1">
                  <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.destination }}</div>
                      </el-col>
                      <el-col :span="12" class="center" style="padding: 8px;">
                        <div>{{ item.departureNumber }}</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 { set } from 'lodash-es'
import { EChartsOption, List } from 'echarts'
import { formatTime } from '@/utils'

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 { center } from "diagram-js/lib/util/PositionUtil";

import { reactive, onMounted, watchEffect } from "vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";

import * as UserApi from '@/api/system/user'
import { on } from 'events'

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
let pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
  project: 0,
  access: 0,
  todo: 0
})

const detail = reactive({
  "deptNum": undefined,
  "teacherNum": undefined,
  "studentNum": undefined
})

const getCount = async () => {
  const data = {
    project: 40,
    access: 2340,
    todo: 10,
    college: 80,
    normal: 125,
    unusual: 5
  }
  totalSate = Object.assign(totalSate, data)
}

// 获取项目数
let projects = reactive<Project[]>([])
const getProject = async () => {
  // console.log("getProject",detail.deptNum);

  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 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);
};


let barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption

// 周活跃量
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 list = reactive([
  { trainNumber: '张一', destination: '101', departureTime: '09:00', status: '准点' },
  { trainNumber: '张二', destination: '102', departureTime: '09:15', status: '准点' },
  { trainNumber: '张三', destination: '103', departureTime: '09:30', status: '晚点' },
  { trainNumber: '张四', destination: '104', departureTime: '09:45', status: '准点' },
  { trainNumber: '张五', destination: '105', departureTime: '10:00', status: '准点' },
  { trainNumber: '李一', destination: '201', departureTime: '10:15', status: '准点' },
  { trainNumber: '李二', destination: '202', departureTime: '10:30', status: '晚点' },
  { trainNumber: '李三', destination: '203', departureTime: '10:45', status: '准点' },
  { trainNumber: '李四', destination: '204', departureTime: '11:00', status: '晚点' },
  { trainNumber: '李五', destination: '205', departureTime: '11:15', status: '准点' },
  { trainNumber: '王一', destination: '301', departureTime: '11:30', status: '准点' },
  { trainNumber: '王二', destination: '302', departureTime: '11:45', status: '准点' },
  { trainNumber: '王三', destination: '303', departureTime: '12:00', status: '晚点' },
  { trainNumber: '王四', destination: '304', departureTime: '12:15', status: '准点' },
  { trainNumber: '王五', destination: '305', departureTime: '12:30', status: '准点' },
  { trainNumber: '王六', destination: '306', departureTime: '12:45', status: '准点' },
  { trainNumber: '王七', destination: '307', departureTime: '13:00', status: '晚点' }

]);
const classOptions = reactive({
  step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
  limitMoveNum: list.length,//无缝滚动列表元素的长度，一般设置为列表的长度
  direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。

});

//在线情况滚动列表
const list1 = reactive([
  { destination: '101', departureNumber: '98%' },
  { destination: '102', departureNumber: '94%' },
  { destination: '103', departureNumber: '96%' },
  { destination: '104', departureNumber: '98%' },
  { destination: '105', departureNumber: '93%' },
  { destination: '201', departureNumber: '97%' },
  { destination: '202', departureNumber: '95%' },
  { destination: '203', departureNumber: '98%' },
  { destination: '204', departureNumber: '96%' },
  { destination: '205', departureNumber: '94%' },
  { destination: '301', departureNumber: '97%' },
  { destination: '302', departureNumber: '96%' },
  { destination: '303', departureNumber: '95%' },
  { destination: '304', departureNumber: '97%' },
  { destination: '305', departureNumber: '98%' },
  { destination: '306', departureNumber: '99%' },
  { destination: '307', departureNumber: '96%' }

]);
const list1Options = reactive({
  step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
  limitMoveNum: list1.length,//无缝滚动列表元素的长度，一般设置为列表的长度
  direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。

});

const list2 = reactive([
  { trainNumber: '张一', destination: '101', departureTime: '09:00', ID: '10' },
  { trainNumber: '张二', destination: '102', departureTime: '09:15', ID: '15' },
  { trainNumber: '张三', destination: '103', departureTime: '09:30', ID: '13' },
  { trainNumber: '张四', destination: '104', departureTime: '09:45', ID: '18' },
  { trainNumber: '张五', destination: '105', departureTime: '10:00', ID: '19' },
  { trainNumber: '李一', destination: '201', departureTime: '10:15', ID: '12' },
  { trainNumber: '李二', destination: '202', departureTime: '10:30', ID: '02' },
  { trainNumber: '李三', destination: '203', departureTime: '10:45', ID: '09' },
  { trainNumber: '李四', destination: '204', departureTime: '11:00', ID: '16' },
  { trainNumber: '李五', destination: '205', departureTime: '11:15', ID: '20' },
  { trainNumber: '王一', destination: '301', departureTime: '11:30', ID: '28' },
  { trainNumber: '王二', destination: '302', departureTime: '11:45', ID: '36' },
  { trainNumber: '王三', destination: '303', departureTime: '12:00', ID: '07' },
  { trainNumber: '王四', destination: '304', departureTime: '12:15', ID: '41' },
  { trainNumber: '王五', destination: '305', departureTime: '12:30', ID: '15' },
  { trainNumber: '王六', destination: '306', departureTime: '12:45', ID: '22' },
  { trainNumber: '王七', destination: '307', departureTime: '13:00', ID: '27' }

]);
const class2Options = reactive({
  step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
  limitMoveNum: list2.length,//无缝滚动列表元素的长度，一般设置为列表的长度
  direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。

});

const getDetail = async () => {
  loading.value = true
  try {
    // const D = await UserApi.getDetail();
    // detail.deptNum = D.deptNum
    // detail.studentNum = D.studentNum
    // detail.teacherNum = D.teacherNum


  } finally {
    loading.value = false
  }
}

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

// watchEffect(detail => {
//   console.log('detail', detail)
//   getBasic()
// })

// onMounted(() => {

// })

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: 95%;
  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>