<template>
|
<div class="YunweiBlock-wrap">
|
<svg
|
class="yunweiSvg"
|
xmlns="http://www.w3.org/2000/svg"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
width="369px" height="724.5px"
|
viewBox="0 0 369 724.5">
|
<defs>
|
<linearGradient id="PSgrad_0" x1="69.466%" x2="0%" y1="0%" y2="71.934%">
|
<stop offset="0%" stop-color="rgb(8,95,148)" stop-opacity="1" />
|
<stop offset="92%" stop-color="rgb(9,39,73)" stop-opacity="1" />
|
</linearGradient>
|
<filter id="strong-inner">
|
<feFlood flood-color="rgba(0, 59, 97, 0.3)" floodOpacity="0.2"/>
|
<feComposite operator="out" in2="SourceGraphic" />
|
<feMorphology operator="dilate" radius="1"/>
|
<feGaussianBlur stdDeviation="2" />
|
<feComposite operator="atop" in2="SourceGraphic"/>
|
</filter>
|
</defs>
|
<path
|
filter="url(#strong-inner)"
|
opacity="1" fill="rgba(10, 10, 26, 0.9)"
|
d="M346.724,718.500 L29.788,718.500 L6.000,695.703 L6.000,20.881 L24.574,1.500 L349.320,1.500 L366.000,17.485 L366.000,698.386 L346.724,718.500 Z"/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M6.000,21.500 L24.000,1.500 L53.000,1.500 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M196.000,1.500 L286.000,1.500 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M366.000,62.500 L366.000,174.500 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M8.000,212.500 L8.000,414.500 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M6.000,661.500 L6.000,696.500 L29.000,718.500 L266.000,718.500 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M366.000,648.500 L366.000,698.500 L347.000,719.500 L325.000,719.500 "/>
|
</svg>
|
<div class="YunweiBlock-wrap-inside">
|
<div class="YunweiBlock-title">
|
<h1>运维日志</h1>
|
<div class="zhuangshi">
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
</div>
|
</div>
|
<div class="YunweiBlock-main">
|
<div class="datePicker-box">
|
<el-date-picker
|
v-model="value1"
|
type="date"
|
placeholder="选择日期">
|
</el-date-picker>
|
</div>
|
<div class="YunweiBlock-table">
|
<dv-scroll-board :config="ywTableConfig" style="width:500px;height:220px" />
|
<!--<el-table
|
style="width: 100%"
|
:header-cell-class-name="headerCellName"
|
stripe
|
:data="tableData">
|
<el-table-column
|
prop="content1"
|
label="内容"
|
show-overflow-tooltip
|
align="right"
|
header-align="center"
|
min-width="60">
|
</el-table-column>
|
<el-table-column
|
prop="data"
|
label="日期"
|
show-overflow-tooltip
|
align="right"
|
header-align="center"
|
min-width="40">
|
</el-table-column>
|
</el-table>-->
|
</div>
|
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import {animateShanFlash} from '@/utils/animateShanFlash'
|
export default {
|
name: "YunweiBlock",
|
data() {
|
return {
|
value1:'',
|
ywTableConfig: {
|
header: ['内容','日期'],
|
headerBGC: 'rgba(255, 255, 255, 0)',
|
oddRowBGC: 'rgba(0,213,255,0.08)',
|
evenRowBGC: 'rgba(255, 255, 255, 0)',
|
// indexHeader: '#',
|
// index: 'true',
|
align:'center',
|
hoverPause: 'true',
|
columnWidth: ['70%','30%'],
|
data: [
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
['3号服务器异常，报警错误', '2023-03-06',],
|
],
|
rowNum: 14
|
},
|
tableData: [{
|
content1:'3号服务器异常，报警错误',
|
data:'2023-03-06'
|
},{
|
content1:'3号服务器异常，报警错误',
|
data:'2023-03-06'
|
},{
|
content1:'3号服务器异常，报警错误',
|
data:'2023-03-06'
|
}]
|
}
|
},
|
mounted() {
|
this.loading()
|
},
|
methods: {
|
loading() {
|
const tl = this.gsap.timeline({defaults: {duration: 0.8}})
|
animateShanFlash('.zhuangshi span',{
|
duration: 1,
|
})
|
tl.from('.YunweiBlock-wrap',{
|
x: '-200',
|
autoAlpha: 0,
|
duration:0.8,
|
// ease: 'power2.out',
|
delay:0.5,
|
ease:'back.out(1.7)',
|
})
|
},
|
headerCellName(obj) {
|
return 'kehuxinxiBox'
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.datePicker-box{
|
width: 100%;
|
margin: 0.078125rem /* 15/192 */ 0 0.0521rem /* 10/192 */ 0;
|
height: 0.1771rem /* 34/192 */;
|
.el-input{
|
background-color: transparent;
|
border: 1px solid #1681af;
|
color: #fff;
|
height: 100%;
|
}
|
.el-input__icon{
|
line-height: 0.1771rem /* 34/192 */;
|
}
|
.el-input__inner{
|
background-color: transparent;
|
border:0;
|
height: 100%;
|
color: #fff;
|
}
|
.el-date-editor.el-input{
|
width: 100% !important;
|
}
|
|
}
|
.YunweiBlock-table{
|
width: 100%;
|
height: calc(100% - 0.3125rem /* 60/192 */);
|
.dv-scroll-board{
|
width: 100% !important;
|
height: 100%!important;
|
}
|
.header-item{
|
width: 50%;
|
display: flex;
|
justify-content: center;
|
}
|
.dv-scroll-board .rows .ceil{
|
font-size: 0.0677rem /* 13/192 */;
|
}
|
.el-table__fixed-right-patch{
|
background-color: transparent;
|
border-bottom:none;
|
}
|
.el-table__fixed-right::before, .el-table__fixed::before{
|
height: 0;
|
}
|
.el-table, .el-table__expanded-cell{
|
background-color: transparent;
|
}
|
.el-table tr,.el-table th.el-table__cell{
|
background-color: transparent;
|
}
|
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
border-bottom: 0;
|
}
|
.el-table::before{
|
height: 0;
|
}
|
.el-table td.el-table__cell div{
|
color: #fff;
|
font-size: 0.0729rem /* 14/192 */;
|
}
|
.el-table_1_column_1{
|
.cell{
|
color: #fff!important;
|
}
|
}
|
.el-table tr:hover,.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
background: rgba(0,213,255,0.08);
|
}
|
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
|
background: rgba(0,213,255,0.08);
|
}
|
.el-table th.el-table__cell>.cell{
|
color: #fff;
|
}
|
.el-table__row{
|
cursor: pointer;
|
}
|
}
|
|
</style>
|
<style lang="scss" scoped>
|
h1,h2,h3,h4{
|
margin:0;
|
padding:0;
|
}
|
.YunweiBlock-wrap{
|
width: 1.8229rem /* 350/192 */;
|
height: 100%;
|
.yunweiSvg{
|
width: 100%;
|
height: 100%;
|
}
|
.YunweiBlock-wrap-inside{
|
position: absolute;
|
left: 0.1042rem /* 20/192 */;
|
top: 0.1042rem /* 20/192 */;
|
right: 0.1042rem /* 20/192 */;
|
bottom: 0.1042rem /* 20/192 */;
|
}
|
.YunweiBlock-title{
|
width: 1.6146rem /* 310/192 */;
|
height: 0.2083rem /* 40/192 */;
|
background: url('../../../assets/img/yunwei-title.png') no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
position: relative;
|
h1{
|
color: #fff;
|
font-size: 0.0833rem /* 16/192 */;
|
margin-left: 0.0521rem /* 10/192 */;
|
}
|
.zhuangshi{
|
position: absolute;
|
left: 1.1458rem /* 220/192 */;
|
top:50%;
|
transform: translateY(-50%);
|
display: flex;
|
span{
|
display: block;
|
width: 0.0521rem /* 10/192 */;
|
height: 2px;
|
background:#3bb4c2;
|
margin:0 2px;
|
}
|
}
|
}
|
.YunweiBlock-main{
|
width: 100%;
|
height: calc(100% - 0.234375rem /* 45/192 */);
|
}
|
}
|
</style>
|
