feat(securitySurveillance): 添加视频监控、设备状态和视频管理组件
新增视频监控组件(spjk.vue)支持实时视频展示与布局切换 添加设备状态组件(sbzt.vue)显示设备在线状态和报警信息 实现视频管理组件(spgl.vue)包含存储状态图表和录像设置 引入多个SVG图标资源用于界面交互 优化字体文件格式和样式
This commit is contained in:
@ -11,6 +11,7 @@
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// 思源字体
|
||||
// @font-face {
|
||||
// font-family: 'SourceHanSansCN-Bold';
|
||||
@ -56,6 +57,7 @@
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'SourceHanSansCN-Bold';
|
||||
// src: url('./ReflectTi/SourceHanSerifCN-Bold.otf');//暂时没用
|
||||
@ -110,6 +112,8 @@
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
//阿里黑体
|
||||
@font-face {
|
||||
font-family: 'AlimamaShuHeiTi-Bold';
|
||||
@ -117,6 +121,7 @@
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Alibaba-PuHuiTi-Heavy';
|
||||
// src: url('./Alibaba/Alibaba-PuHuiTi-Heavy.otf');//暂时没用
|
||||
@ -135,6 +140,7 @@
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Alibaba-PuHuiTi-Regular';
|
||||
// src: url('./Alibaba/Alibaba-PuHuiTi-Regular.otf');//暂时没用
|
||||
@ -148,18 +154,19 @@
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'D-Din';
|
||||
font-family: 'D-Din';
|
||||
src: url('./D-Din//D-DIN.ttf');
|
||||
font-weight: normal;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto-Regular'; //Roboto
|
||||
src: url('./Roboto//Roboto-Regular.ttf');
|
||||
font-weight: normal;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
}
|
||||
149
src/views/securitySurveillance/components/sbzt.vue
Normal file
149
src/views/securitySurveillance/components/sbzt.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<el-card style="border-radius: 15px;">
|
||||
<el-row gutter="35">
|
||||
<el-col :span="8" class="status-card">
|
||||
<div class="title">设备状态</div>
|
||||
<!-- gutter设置为20，创建左右间隙 -->
|
||||
<el-row gutter="20" style="width: 100%;">
|
||||
<!-- 一行2个，每个占12格（24/2=12） -->
|
||||
<el-col :span="12">
|
||||
<div class="item">
|
||||
<div class="status">在线</div>
|
||||
<div class="count" style="color: rgba(0, 184, 122, 1);">56</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="item">
|
||||
<div class="status">离线</div>
|
||||
<div class="count" style="color: rgba(102, 102, 102, 1);">10</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="item">
|
||||
<div class="status">网络延迟</div>
|
||||
<div class="count" style="color: rgba(255, 208, 35, 1);">8</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="item">
|
||||
<div class="status">故障</div>
|
||||
<div class="count" style="color: rgba(227, 39, 39, 1);">1</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="16" class="alarm-card">
|
||||
<div class="title">最近报警</div>
|
||||
<el-row class="list">
|
||||
<el-col>
|
||||
<div class="item red">
|
||||
<div class="sub-title">
|
||||
异常移动检测
|
||||
</div>
|
||||
<div class="content">
|
||||
A区b栋102 | 今天08:23
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="item yellow">
|
||||
<div class="sub-title">
|
||||
设备连接不稳定
|
||||
</div>
|
||||
<div class="content">
|
||||
A区b栋102 | 今天08:23
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="item red">
|
||||
<div class="sub-title">
|
||||
异常移动检测
|
||||
</div>
|
||||
<div class="content">
|
||||
A区b栋102 | 今天08:23
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
<style scoped>
|
||||
.title {
|
||||
font-family: "Alibaba-PuHuiTi-Bold";
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 24px;
|
||||
color: rgb(0, 30, 59);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
|
||||
.item {
|
||||
background: rgba(245, 245, 245, 0.2);
|
||||
border: 1px solid rgba(230, 233, 238, 1);
|
||||
margin-bottom: 20px;
|
||||
border-radius: 15px;
|
||||
padding: 15px 30px;
|
||||
text-align: center;
|
||||
|
||||
.status {
|
||||
color: rgba(175, 175, 175, 1);
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alarm-card {
|
||||
.item {
|
||||
border: 1px solid #E6E9EE;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.red {
|
||||
::v-deep::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: rgba(227, 39, 39, 1);
|
||||
height: 100%;
|
||||
width: 7px;
|
||||
border-radius: 7px 0px 0px 7px;
|
||||
top: 0;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.yellow {
|
||||
::v-deep::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: rgba(255, 208, 35, 1);
|
||||
height: 100%;
|
||||
width: 7px;
|
||||
border-radius: 7px 0px 0px 7px;
|
||||
top: 0;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script setup></script>
|
||||
320
src/views/securitySurveillance/components/spgl.vue
Normal file
320
src/views/securitySurveillance/components/spgl.vue
Normal file
@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<el-card style="border-radius: 15px;">
|
||||
<div class="title-box">
|
||||
视频管理
|
||||
</div>
|
||||
<el-row class="cunchu">
|
||||
<el-col>
|
||||
<div class="subtitle">存储状态</div>
|
||||
</el-col>
|
||||
<el-col style="position: relative;">
|
||||
<div ref="chartRef" style="height: 220px;width: 100%;"></div>
|
||||
<div class="text">别担心，还有很多存储空间</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col class="lxcc">
|
||||
<div class="top">
|
||||
<div class="subtitle">录像存储设置</div>
|
||||
<div class="edit">编辑</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
存储模式
|
||||
</div>
|
||||
<div class="text">
|
||||
循环覆盖
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
保留天数
|
||||
</div>
|
||||
<div class="text">
|
||||
30天
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
录像质量
|
||||
</div>
|
||||
<div class="text">
|
||||
高清（1080P）
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
备份记录
|
||||
</div>
|
||||
<div class="text">
|
||||
开启
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
备份时间
|
||||
</div>
|
||||
<div class="text">
|
||||
每日02:00
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<div class="subtitle">历史视频查询</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-select placeholder="全部摄像头">
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-date-picker v-model="value1" type="daterange" range-separator="至" style="width: 100%;"
|
||||
start-placeholder="开始" end-placeholder="结束" :size="size" />
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button type="primary">搜索</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-table :data="data" height="200px" max-height="200px">
|
||||
<el-table-column label="摄像头" prop="name" width="100">
|
||||
</el-table-column>
|
||||
<el-table-column label="日期" prop="date" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column label="时长" prop="duration">
|
||||
</el-table-column>
|
||||
<el-table-column label="大小" prop="size">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="100">
|
||||
<template #default="scope">
|
||||
<div class="svg-icon">
|
||||
<img src="/assets/svg/play.svg" alt="">
|
||||
<img src="/assets/svg/download.svg" alt="">
|
||||
<img src="/assets/svg/delete.svg" alt=""></img>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination" v-if="activeTab !== 'record'">
|
||||
<el-pagination layout="prev, pager, next, jumper" :total="totalRecords"
|
||||
v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
|
||||
@current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.title-box {
|
||||
font-family: "Alibaba-PuHuiTi-Bold";
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 24px;
|
||||
color: rgba(0, 30, 59, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
color: #001E3B;
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
|
||||
::v-deep::before {
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
background-color: rgba(24, 109, 245, 1);
|
||||
top: 50%;
|
||||
left: -8px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.cunchu {
|
||||
.text {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
width: 100%;
|
||||
color: rgba(113, 128, 150, 1);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.lxcc {
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.edit {
|
||||
color: rgba(0, 30, 59, 1);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #F2F8FC;
|
||||
border-radius: 10px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #E3EDFF;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
const chartRef = ref(null);
|
||||
let myChart = null;
|
||||
const pageSize = ref(20);
|
||||
const totalRecords = ref(100);
|
||||
const initChart = () => {
|
||||
myChart = echarts.init(chartRef.value);
|
||||
var option = {
|
||||
// 调整图表整体位置，向上移动以减少底部空白
|
||||
// 添加首尾单位标识
|
||||
graphic: [
|
||||
// 起始单位 (0TB)
|
||||
{
|
||||
type: 'text',
|
||||
left: '24%',
|
||||
top: '50%', // 上移文本位置
|
||||
style: {
|
||||
text: '0TB',
|
||||
fontSize: 14,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
// 结束单位 (10TB)
|
||||
{
|
||||
type: 'text',
|
||||
right: '24%',
|
||||
top: '50%', // 上移文本位置
|
||||
style: {
|
||||
text: '10TB',
|
||||
fontSize: 14,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
// 中间显示当前值和百分比（换行显示）
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '40%', // 调整到48%位置
|
||||
style: {
|
||||
text: '6.68TB\n48%',
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center',
|
||||
lineHeight: 20 // 增加行高以确保换行效果
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
radius: '85%', // 适当减小半径
|
||||
center: ['50%', '50%'], // 上移图表中心位置
|
||||
startAngle: 170, // 开始角度（左侧）
|
||||
endAngle: 10, // 结束角度（右侧）
|
||||
max: 10, // 最大值设置为10TB
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 40, // 保持条的粗细
|
||||
color: [
|
||||
[0.67, '#4863FF'], // 当前值6.7TB对应67%
|
||||
[1, '#E5E7EB'] // 未用部分颜色
|
||||
]
|
||||
}
|
||||
},
|
||||
// 隐藏所有刻度相关元素
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
// 隐藏指针
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
// 隐藏默认详情
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
// 当前值（6.7TB）
|
||||
data: [{ value: 6.7 }]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
};
|
||||
|
||||
// 监听窗口大小变化，重新绘制图表
|
||||
const handleResize = () => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
}
|
||||
};
|
||||
const data = computed(() => {
|
||||
return Array.from({ length: 10 }, (_, i) => ({
|
||||
name: `摄像头${i + 1}`,
|
||||
date: '25.03.12-10:00',
|
||||
duration: '4小时',
|
||||
size: '2.4GB'
|
||||
}));
|
||||
});
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
// 组件卸载时移除事件监听
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
</script>
|
||||
@ -1,19 +1,177 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-card style="width: 100%;border-radius: 12px;">
|
||||
<el-row style="height: 100%;">
|
||||
<el-card style="width: 100%;border-radius: 12px;height: 100%;">
|
||||
<div style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
|
||||
<TitleComponent title="实时视频监控" subtitle="查看所有已完成的巡检记录，跟进巡检报告" fontLevel="2" />
|
||||
<TitleComponent title="实时视频监控" subtitle="查看所有已完成的巡检记录，跟进巡检报告" />
|
||||
<span style="color: rgba(24, 109, 245, 1);display: flex;align-items: center; cursor: pointer;">
|
||||
<span>
|
||||
2025/06/30 12:00
|
||||
刷新数据
|
||||
</span>
|
||||
<el-icon>
|
||||
<refresh />
|
||||
<Refresh />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="video-container">
|
||||
<el-row gutter="20">
|
||||
<!-- 扩展布局：左侧大视频 + 右侧小视频列 -->
|
||||
<template v-if="isExpanded">
|
||||
<!-- 左侧大视频（占 16 列） -->
|
||||
<el-col :span="16">
|
||||
<div class="item large" @click="() => { isExpanded = false; }">
|
||||
<img :src="videoList[activeIndex].url" alt="">
|
||||
<div class="title" v-if="isExpanded"
|
||||
style="display: flex;justify-content: space-between;">
|
||||
<div class="text">
|
||||
{{ videoList[activeIndex].name }}
|
||||
</div>
|
||||
<div class="tools">
|
||||
<img src="/assets/svg/huanyuan.svg" alt=""></img>
|
||||
<img src="/assets/svg/quanpin.svg" alt=""></img>
|
||||
<img src="/assets/svg/jietu.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="title" v-else>{{ videoList[activeIndex].name }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- 右侧小视频列（占 8 列） -->
|
||||
<el-col :span="8">
|
||||
<el-row gutter="20">
|
||||
<el-col :span="24" v-for="i in 3" :key="i">
|
||||
<div class="item small" @click="() => {
|
||||
activeIndex = videoList.length - 3 + i - 1;
|
||||
}">
|
||||
<img :src="videoList[videoList.length - 3 + i - 1].url" alt="">
|
||||
<div class="title">{{ videoList[videoList.length - 3 + i - 1].name }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<!-- 普通布局：所有视频均匀排列 -->
|
||||
<template v-else>
|
||||
<el-col :span="8" v-for="(item, index) in videoList" :key="index">
|
||||
<div class="item" @click="() => {
|
||||
activeIndex = index;
|
||||
isExpanded = true;
|
||||
}">
|
||||
<img :src="item.url" alt="">
|
||||
<div class="title">{{ item.name }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</template>
|
||||
</el-row>
|
||||
<el-row v-if="isExpanded">
|
||||
<div class="pagination" v-if="activeTab !== 'record'">
|
||||
<el-pagination layout="prev, pager, next, jumper, sizes" :total="totalRecords"
|
||||
v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
|
||||
@current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</template>
|
||||
<script setup></script>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
import TitleComponent from '@/components/TitleComponent';
|
||||
const activeIndex = ref(-1); // 初始无选中，选中后为对应索引
|
||||
const isExpanded = ref(false); // 初始为普通布局
|
||||
const pageSize = ref(20);
|
||||
const totalRecords = ref(100);
|
||||
const videoList = ref([
|
||||
{
|
||||
name: 'A区d厂',
|
||||
url: 'https://img.js.design/assets/img/68c144e8ba276a0e8a4a55c2.jpeg#bab7e2e06aae943525cacb13bd63e30d'
|
||||
},
|
||||
{
|
||||
name: 'A区d厂',
|
||||
url: 'https://img.js.design/assets/img/68c144efb5e8b987e5ca6462.jpeg#5523cf094b2f8c3a79ea4eb330c99a30'
|
||||
},
|
||||
{
|
||||
name: 'A区d厂',
|
||||
url: 'https://img.js.design/assets/img/68c144fbbad414f81995e90c.webp#230d8ca5ca39982518439db26e0ea899'
|
||||
},
|
||||
{
|
||||
name: 'A区d厂',
|
||||
url: 'https://img.js.design/assets/img/68c1450640d5d2a02e2540b2.webp#adad2379a0b04d6968364e4fb1133f77'
|
||||
},
|
||||
{
|
||||
name: 'A区d厂',
|
||||
url: 'https://img.js.design/assets/img/68c14543d56431f9d6f6808e.webp#16f0a0d8fab4f8ff3b39b04bfabac054'
|
||||
},
|
||||
{
|
||||
name: 'A区d厂',
|
||||
url: 'https://img.js.design/assets/img/68c14578d56431f9d6f68981.jpg#e77150417f28a971be4846eb0be90373'
|
||||
},
|
||||
{
|
||||
name: 'A区d厂',
|
||||
url: 'https://img.js.design/assets/img/68c145e03f22157da619a7ce.png#546ff44289a22bf175e1eca1f69cd8f9'
|
||||
},
|
||||
{
|
||||
name: 'A区d厂',
|
||||
url: 'https://img.js.design/assets/img/68c1461fb5e8b987e5caa293.jpeg#870e4d2b88b487ecb8f2f0b956c45c08'
|
||||
},
|
||||
{
|
||||
name: 'A区d厂',
|
||||
url: 'https://img.js.design/assets/img/68c1462dcbf9ed2271880b95.webp#ae7ae94ca84ce980e2d2281869335f06'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.video-container {
|
||||
|
||||
.item {
|
||||
height: 220px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
border: 2px solid rgba(45, 119, 249, 1);
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
padding: 5px 0;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.73) 0%, rgba(0, 0, 0, 0.33) 100%);
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// 大视频样式（高度与右侧三个小视频总高度对齐，考虑间距）
|
||||
.large {
|
||||
height: calc(220px * 3 + 20px * 2); // 高度为3个小视频高度加上2个间距
|
||||
|
||||
.tools {
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 小视频样式（保持原高度，适配右侧单列）
|
||||
.small {
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -27,11 +27,18 @@
|
||||
<el-row>
|
||||
<Top />
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="18" style="margin-top: 20px;">
|
||||
<el-row style="margin-top: 20px;" :gutter="25">
|
||||
<el-col :span="18">
|
||||
<Spjk />
|
||||
</el-col>
|
||||
<el-col :span="6">1</el-col>
|
||||
<el-col :span="6">
|
||||
<Spgl />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col>
|
||||
<Sbzt />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
@ -46,4 +53,6 @@
|
||||
import TitleComponent from "@/components/TitleComponent";
|
||||
import Top from "./components/top"
|
||||
import Spjk from "./components/spjk"
|
||||
import Spgl from "./components/spgl";
|
||||
import Sbzt from "./components/sbzt";
|
||||
</script>
|
||||
Reference in New Issue
Block a user