设备管理-视频设备管理
This commit is contained in:
parent
1213793812
commit
967768d96d
|
|
@ -58,6 +58,7 @@
|
||||||
"vue-count-to": "1.0.13",
|
"vue-count-to": "1.0.13",
|
||||||
"vue-cropper": "0.5.5",
|
"vue-cropper": "0.5.5",
|
||||||
"vue-meta": "2.4.0",
|
"vue-meta": "2.4.0",
|
||||||
|
"vue-qr": "^4.0.9",
|
||||||
"vue-router": "3.4.9",
|
"vue-router": "3.4.9",
|
||||||
"vuedraggable": "2.24.3",
|
"vuedraggable": "2.24.3",
|
||||||
"vuex": "3.6.0",
|
"vuex": "3.6.0",
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
printWidth: 120,
|
||||||
tabWidth: 4,
|
tabWidth: 4,
|
||||||
semi: false,
|
semi: false,
|
||||||
vueIndentScriptAndStyle: false,
|
vueIndentScriptAndStyle: false,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,471 @@
|
||||||
|
<template>
|
||||||
|
<!-- 视频设备管理 -->
|
||||||
|
<div class="app-container">
|
||||||
|
<el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline>
|
||||||
|
<el-form-item label="" prop="keyWord">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.keyWord"
|
||||||
|
placeholder="请输入搜索关键词"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="" prop="deviceStatus">
|
||||||
|
<el-select v-model="queryParams.deviceStatus" placeholder="设备状态" clearable>
|
||||||
|
<el-option v-for="item in deviceStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- 表单按钮 -->
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||||||
|
<el-button icon="el-icon-download" @click="handleExport">导出</el-button>
|
||||||
|
<el-button icon="el-icon-menu" @click="">下载二维码</el-button>
|
||||||
|
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
||||||
|
<el-button icon="el-icon-download" @click="">导入数据</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-table :data="tableList" fit highlight-current-row style="width: 100%">
|
||||||
|
<!-- 多选 -->
|
||||||
|
<!-- <el-table-column type="selection" width="55" align="center" @selection-change="selectionChange" /> -->
|
||||||
|
<el-table-column
|
||||||
|
type="index"
|
||||||
|
width="55"
|
||||||
|
label="序号"
|
||||||
|
align="center"
|
||||||
|
:index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
v-for="(column, index) in tableColumns"
|
||||||
|
show-overflow-tooltip
|
||||||
|
:key="column.prop"
|
||||||
|
:label="column.label"
|
||||||
|
:prop="column.prop"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
<!-- 插槽 -->
|
||||||
|
<template v-slot="scope" v-if="column.prop == 'qrCode'">
|
||||||
|
<span style="color: #409eff; cursor: pointer" @click="checkQrCode(scope.row)">查看</span>
|
||||||
|
</template>
|
||||||
|
<template v-slot="scope" v-else-if="column.prop == 'isAccess'">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<div class="dot" v-if="scope.row.isAccess == 1"></div>
|
||||||
|
<div class="dot-red" v-else></div>
|
||||||
|
<div>{{ scope.row.isAccess == 1 ? '是' : '否' }}</div>
|
||||||
|
<div
|
||||||
|
v-if="scope.row.isAccess == 1"
|
||||||
|
style="margin-left: 5px; color: #409eff; cursor: pointer"
|
||||||
|
@click="handleDetail(scope.row)"
|
||||||
|
>
|
||||||
|
查看配置
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-slot="scope" v-else-if="column.prop == 'deviceStatus'">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<div class="dot" v-if="scope.row.deviceStatus == 1"></div>
|
||||||
|
<div class="dot-red" v-else></div>
|
||||||
|
<div>{{ scope.row.deviceStatus == 1 ? '在用' : '闲置' }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<!-- 操作 -->
|
||||||
|
<el-table-column label="操作" align="center" width="255">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="warning" plain size="mini" icon="el-icon-set-up" @click="">调试</el-button>
|
||||||
|
<el-button type="primary" plain size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button type="danger" plain size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 弹框 -->
|
||||||
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
|
||||||
|
<el-form
|
||||||
|
ref="dialogForm"
|
||||||
|
:model="dialogForm"
|
||||||
|
label-width="170px"
|
||||||
|
:rules="dialogForm.isAccess == '1' ? dialogRules2 : dialogRules"
|
||||||
|
>
|
||||||
|
<el-form-item label="设备类型" prop="deviceType" v-if="showItem">
|
||||||
|
<el-select v-model="dialogForm.deviceType" placeholder="请选择设备类型" clearable style="width: 100%">
|
||||||
|
<el-option v-for="item in deviceTypeOpts" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备名称" prop="deviceName" v-if="showItem">
|
||||||
|
<el-input v-model="dialogForm.deviceName" placeholder="请输入设备名称" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="MACID" prop="macId" v-if="showItem">
|
||||||
|
<el-input v-model="dialogForm.macId" placeholder="请输入MACID" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="puid" prop="puId" v-if="showItem">
|
||||||
|
<el-input v-model="dialogForm.puId" placeholder="请输入puid" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否接入统一视频" prop="isAccess" v-if="showItem">
|
||||||
|
<el-radio-group v-model="dialogForm.isAccess" @input="changeIsAccess">
|
||||||
|
<el-radio-button label="1">是</el-radio-button>
|
||||||
|
<el-radio-button label="0">否</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="统一视频名称" prop="unifiedVideoName" v-if="dialogForm.isAccess == '1'">
|
||||||
|
<el-input
|
||||||
|
v-model="dialogForm.unifiedVideoName"
|
||||||
|
placeholder="请输入统一视频名称"
|
||||||
|
clearable
|
||||||
|
:disabled="!showItem"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="统一视频编码" prop="unifiedVideoCode" v-if="dialogForm.isAccess == '1'">
|
||||||
|
<el-input
|
||||||
|
v-model="dialogForm.unifiedVideoCode"
|
||||||
|
placeholder="请输入统一视频编码"
|
||||||
|
clearable
|
||||||
|
:disabled="!showItem"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="统一视频前端协议编码"
|
||||||
|
prop="unifiedVideoFrontEndProtocolCode"
|
||||||
|
v-if="dialogForm.isAccess == '1'"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="dialogForm.unifiedVideoFrontEndProtocolCode"
|
||||||
|
placeholder="请输入统一视频前端协议编码"
|
||||||
|
clearable
|
||||||
|
:disabled="!showItem"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="统一设备协议编码" prop="unifiedDeviceProtocolCode" v-if="dialogForm.isAccess == '1'">
|
||||||
|
<el-input
|
||||||
|
v-model="dialogForm.unifiedDeviceProtocolCode"
|
||||||
|
placeholder="请输入统一设备协议编码"
|
||||||
|
clearable
|
||||||
|
:disabled="!showItem"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark" v-if="showItem">
|
||||||
|
<el-input type="textarea" v-model="dialogForm.remark" placeholder="请输入备注" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">{{ showItem ? '取 消' : '关 闭' }}</el-button>
|
||||||
|
<el-button v-if="showItem" type="primary" @click="dialogConfirm">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 二维码弹框 -->
|
||||||
|
<el-dialog title="二维码查看" :visible.sync="qrVisible" width="36%">
|
||||||
|
<div style="text-align: center">
|
||||||
|
<vue-qr ref="qrCode" :text="qrData.qrCode" color-dark="#333" :size="390" :margin="10"></vue-qr>
|
||||||
|
<div>设备编号: {{ qrData.deviceNo }}</div>
|
||||||
|
<div>设备名称: {{ qrData.deviceName }}</div>
|
||||||
|
<!-- 下载 -->
|
||||||
|
<el-button type="primary" @click="downloadQrCode" style="margin-top: 20px">下 载</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import VueQr from 'vue-qr'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
VueQr,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showSearch: true,
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
keyWord: '', // 关键词
|
||||||
|
deviceStatus: '', // 设备状态
|
||||||
|
},
|
||||||
|
deviceStatusOptions: [
|
||||||
|
{ label: '再用', value: '1' },
|
||||||
|
{ label: '闲置', value: '2' },
|
||||||
|
], // 设备状态
|
||||||
|
total: 0, // 总条数
|
||||||
|
// 表头
|
||||||
|
tableColumns: [
|
||||||
|
{ label: '设备类型', prop: 'deviceType' },
|
||||||
|
{ label: '设备名称', prop: 'deviceName' },
|
||||||
|
{ label: 'MACID', prop: 'macId' },
|
||||||
|
{ label: 'puid', prop: 'puId' },
|
||||||
|
{ label: '二维码', prop: 'qrCode' },
|
||||||
|
{ label: '是否接入统一视频', prop: 'isAccess' },
|
||||||
|
{ label: '备注', prop: 'remark' },
|
||||||
|
{ label: '更新人', prop: 'updateBy' },
|
||||||
|
{ label: '更新时间', prop: 'updateTime' },
|
||||||
|
{ label: '设备状态', prop: 'deviceStatus' },
|
||||||
|
],
|
||||||
|
// 表格数据
|
||||||
|
tableList: [
|
||||||
|
{
|
||||||
|
deviceType: '设备类型设备类型设备类型设备类型设备类型',
|
||||||
|
deviceNo: '473829107443214',
|
||||||
|
deviceName: 'bns球机-1',
|
||||||
|
macId: 'MACID',
|
||||||
|
puId: 'puid',
|
||||||
|
qrCode: '1233456789',
|
||||||
|
isAccess: '1',
|
||||||
|
remark: '备注',
|
||||||
|
updateBy: '更新人',
|
||||||
|
updateTime: '更新时间',
|
||||||
|
deviceStatus: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deviceType: '设备类型',
|
||||||
|
deviceNo: '473829107443214',
|
||||||
|
deviceName: 'bns球机-2',
|
||||||
|
macId: 'MACID',
|
||||||
|
puId: 'puid',
|
||||||
|
qrCode: '1233456789',
|
||||||
|
isAccess: '0',
|
||||||
|
remark: '备注',
|
||||||
|
updateBy: '更新人',
|
||||||
|
updateTime: '更新时间',
|
||||||
|
deviceStatus: '0',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
qrVisible: false,
|
||||||
|
qrData: {
|
||||||
|
qrCode: '',
|
||||||
|
deviceNo: '',
|
||||||
|
deviceName: '',
|
||||||
|
},
|
||||||
|
dialogTitle: '新增',
|
||||||
|
dialogVisible: false,
|
||||||
|
showItem: true,
|
||||||
|
dialogForm: {
|
||||||
|
deviceType: '', // 设备类型
|
||||||
|
deviceName: '', // 设备名称
|
||||||
|
macId: '', // MACID
|
||||||
|
nationalStandardCode: '', // 国标编码
|
||||||
|
puId: '', // puid
|
||||||
|
isAccess: '0', // 是否接入统一视频
|
||||||
|
unifiedVideoName: '', // 统一视频名称
|
||||||
|
unifiedVideoCode: '', // 统一视频编码
|
||||||
|
unifiedVideoFrontEndProtocolCode: '', // 统一视频前端协议编码
|
||||||
|
unifiedDeviceProtocolCode: '', // 统一设备协议编码
|
||||||
|
remark: '', // 备注
|
||||||
|
},
|
||||||
|
deviceTypeOpts: [
|
||||||
|
{ label: '设备类型1', value: '1' },
|
||||||
|
{ label: '设备类型2', value: '2' },
|
||||||
|
],
|
||||||
|
dialogRules: {
|
||||||
|
deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
|
||||||
|
deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
|
||||||
|
nationalStandardCode: [{ required: true, message: '请输入国标编码', trigger: 'blur' }],
|
||||||
|
macId: [{ required: true, message: '请输入MACID', trigger: 'blur' }],
|
||||||
|
puId: [{ required: true, message: '请输入puid', trigger: 'blur' }],
|
||||||
|
isAccess: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择是否接入统一视频',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
dialogRules2: {
|
||||||
|
deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
|
||||||
|
deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
|
||||||
|
nationalStandardCode: [{ required: true, message: '请输入国标编码', trigger: 'blur' }],
|
||||||
|
macId: [{ required: true, message: '请输入MACID', trigger: 'blur' }],
|
||||||
|
puId: [{ required: true, message: '请输入puid', trigger: 'blur' }],
|
||||||
|
isAccess: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择是否接入统一视频',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
unifiedVideoName: [{ required: true, message: '请输入统一视频名称', trigger: 'blur' }],
|
||||||
|
unifiedVideoCode: [{ required: true, message: '请输入统一视频编码', trigger: 'blur' }],
|
||||||
|
unifiedVideoFrontEndProtocolCode: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入统一视频前端协议编码',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
unifiedDeviceProtocolCode: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入统一设备协议编码',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查询
|
||||||
|
handleQuery() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
// 重置
|
||||||
|
handleReset() {
|
||||||
|
this.queryParams.pageNum = 1
|
||||||
|
this.queryParams.pageSize = 10
|
||||||
|
this.$refs.queryForm.resetFields()
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
// 获取列表
|
||||||
|
async getList() {
|
||||||
|
console.log('列表-查询', this.queryParams)
|
||||||
|
try {
|
||||||
|
// const params = { ...this.queryParams }
|
||||||
|
// const res = await
|
||||||
|
// console.log('🚀 ~ 获取列表 ~ res:', res)
|
||||||
|
// this.tableList = res.rows
|
||||||
|
// this.total = res.total
|
||||||
|
} catch (error) {
|
||||||
|
console.log('🚀 ~ 获取列表 ~ error:', error)
|
||||||
|
this.tableList = []
|
||||||
|
this.total = 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 多选
|
||||||
|
selectionChange(val) {
|
||||||
|
console.log('selectionChange', val)
|
||||||
|
},
|
||||||
|
// 切换是否接入统一视频
|
||||||
|
changeIsAccess(val) {
|
||||||
|
console.log('changeIsAccess', val)
|
||||||
|
//清除表单校验
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.dialogForm.clearValidate()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 查看二维码
|
||||||
|
checkQrCode(row) {
|
||||||
|
console.log('查看二维码', row)
|
||||||
|
this.qrData = row
|
||||||
|
this.qrVisible = true
|
||||||
|
},
|
||||||
|
// 下载二维码
|
||||||
|
downloadQrCode() {
|
||||||
|
console.log('下载二维码')
|
||||||
|
const a = document.createElement('a') // 创建a标签
|
||||||
|
a.download = this.qrData.deviceName // 下载的文件名
|
||||||
|
a.href = this.$refs.qrCode.$el.src // 下载的路径
|
||||||
|
a.click()
|
||||||
|
},
|
||||||
|
// 新增
|
||||||
|
handleAdd() {
|
||||||
|
console.log('新增')
|
||||||
|
this.dialogTitle = '新增'
|
||||||
|
this.dialogVisible = true
|
||||||
|
this.dialogForm.isAccess = '0'
|
||||||
|
this.showItem = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.dialogForm.clearValidate()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
handleEdit(row) {
|
||||||
|
console.log('编辑', row)
|
||||||
|
this.dialogTitle = '编辑'
|
||||||
|
this.dialogVisible = true
|
||||||
|
this.dialogForm.isAccess = row.isAccess
|
||||||
|
this.showItem = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.dialogForm.clearValidate()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 查看配置
|
||||||
|
handleDetail(row) {
|
||||||
|
console.log('查看配置', row)
|
||||||
|
this.dialogTitle = '统一平台配置'
|
||||||
|
this.dialogVisible = true
|
||||||
|
this.dialogForm.isAccess = row.isAccess
|
||||||
|
this.showItem = false
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.dialogForm.clearValidate()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
handleDelete(row) {
|
||||||
|
console.log('删除', row)
|
||||||
|
this.$confirm('是否删除该数据?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}).then(async () => {
|
||||||
|
// const params = { }
|
||||||
|
// const res = await
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '删除成功!',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 导出数据
|
||||||
|
handleExport() {
|
||||||
|
try {
|
||||||
|
let fileName = `数据_${new Date().getTime()}.xLsx`
|
||||||
|
let url = ''
|
||||||
|
const params = { ...this.queryParams }
|
||||||
|
console.log('🚀 ~ 导出 ~ params:', params)
|
||||||
|
// this.derive(url, params, fileName)
|
||||||
|
} catch (error) {
|
||||||
|
console.log('导出数据失败', error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 弹框确认
|
||||||
|
dialogConfirm() {
|
||||||
|
console.log('dialogConfirm')
|
||||||
|
this.$refs.dialogForm.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.dialogVisible = false
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '操作成功!',
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #67c23a;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.dot-red {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #f56c6c;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue