Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx
This commit is contained in:
guanj
@@ -1,597 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="pd10">
|
|
||||||
<div v-show="flg" v-loading="loading" element-loading-text="数据加载中">
|
|
||||||
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
|
||||||
<el-form-item>
|
|
||||||
<Timeinterval ref="interval" :interval="3"></Timeinterval>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="float: right">
|
|
||||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
|
|
||||||
<el-button type="primary" @click="backups">文件备份</el-button>
|
|
||||||
<!-- <el-button type="primary" @click="restore">文件恢复</el-button> -->
|
|
||||||
<el-button type="primary" @click="details">统计</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="text" @click="closeHandle">
|
|
||||||
条件筛选
|
|
||||||
<i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div class="container" id="container">
|
|
||||||
<i @click="closeHandle" class="el-icon-circle-close coles"></i>
|
|
||||||
<el-form :inline="true" :model="formData" label-width="90px" class="">
|
|
||||||
<el-form-item label="用户名:">
|
|
||||||
<el-select v-model="formData.loginName" placeholder="用户名" clearable filterable>
|
|
||||||
<el-option
|
|
||||||
v-for="item in userName"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.loginName"
|
|
||||||
:value="item.loginName"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="事件类型:">
|
|
||||||
<el-select v-model="formData.type" placeholder="事件类型" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="item in eventType"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.id"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="操作类型:">
|
|
||||||
<el-select v-model="formData.operateType" placeholder="操作类型" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="item in operationType"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.value"
|
|
||||||
:value="item.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="操作结果:">
|
|
||||||
<el-select v-model="formData.result" placeholder="操作结果" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="item in resultList"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.id"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<vxe-table
|
|
||||||
size="mini"
|
|
||||||
stripe
|
|
||||||
:row-config="{ isCurrent: true, isHover: true }"
|
|
||||||
border
|
|
||||||
ref="management"
|
|
||||||
@sort-change="sortChangeEvent"
|
|
||||||
header-cell-class-name="table_header"
|
|
||||||
show-overflow="tooltip"
|
|
||||||
:data="datamock"
|
|
||||||
style="width: 100%"
|
|
||||||
:height="vh + 'px'"
|
|
||||||
>
|
|
||||||
<vxe-table-column
|
|
||||||
field="time"
|
|
||||||
title="操作时间"
|
|
||||||
align="center"
|
|
||||||
sortable
|
|
||||||
width="160"
|
|
||||||
show-overflow
|
|
||||||
></vxe-table-column>
|
|
||||||
<vxe-table-column field="userName" title="操作人员" align="center" width="120"></vxe-table-column>
|
|
||||||
<vxe-table-column
|
|
||||||
field="operate"
|
|
||||||
title="操作类型"
|
|
||||||
align="center"
|
|
||||||
sortable
|
|
||||||
width="220"
|
|
||||||
></vxe-table-column>
|
|
||||||
<vxe-table-column field="describe" title="事件描述" align="center"></vxe-table-column>
|
|
||||||
<vxe-table-column field="type" title="事件类型" align="center" sortable width="120"></vxe-table-column>
|
|
||||||
<vxe-table-column
|
|
||||||
field="result"
|
|
||||||
title="操作结果"
|
|
||||||
align="center"
|
|
||||||
sortable
|
|
||||||
width="120"
|
|
||||||
></vxe-table-column>
|
|
||||||
<vxe-table-column field="ip" title="操作IP" width="150" align="center"></vxe-table-column>
|
|
||||||
<vxe-table-column field="level" title="事件等级" align="center" sortable width="120"></vxe-table-column>
|
|
||||||
</vxe-table>
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
align="right"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
:current-page="formData.pageNum"
|
|
||||||
:page-sizes="[100, 200, 300, 500, 1000]"
|
|
||||||
:page-size="formData.pageSize"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="total"
|
|
||||||
class="mt10"
|
|
||||||
></el-pagination>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="!flg" v-loading="loading1" element-loading-text="数据加载中">
|
|
||||||
<el-form :inline="true" :model="formLine" class="demo-form-inline">
|
|
||||||
<el-form-item>
|
|
||||||
<Time ref="intervaltime" :interval="3"></Time>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="OnSubmit" icon="el-icon-search">查询</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="position: absolute; right: 10px; float: right">
|
|
||||||
<el-button type="primary" icon="el-icon-download" @click="exportEventstatistics">导出</el-button>
|
|
||||||
<el-button type="primary" @click="back">返回</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="text" @click="closeHandle1">
|
|
||||||
条件筛选
|
|
||||||
<i :class="!view1 ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div class="container" id="container1">
|
|
||||||
<i @click="closeHandle1" class="el-icon-circle-close coles"></i>
|
|
||||||
<el-form :inline="true" :model="formData" label-width="90px" class="">
|
|
||||||
<el-form-item label="用户名:">
|
|
||||||
<el-select v-model="formLine.loginName" placeholder="用户名" clearable filterable>
|
|
||||||
<el-option
|
|
||||||
v-for="item in userName"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.loginName"
|
|
||||||
:value="item.loginName"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="事件类型:">
|
|
||||||
<el-select v-model="formLine.type" placeholder="用户名" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="item in eventType"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.id"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="操作类型:">
|
|
||||||
<el-select v-model="formLine.operateType" placeholder="用户名" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="item in operationType"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.value"
|
|
||||||
:value="item.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<vxe-table
|
|
||||||
size="mini"
|
|
||||||
:row-config="{ isCurrent: true, isHover: true }"
|
|
||||||
border
|
|
||||||
ref="management1"
|
|
||||||
header-cell-class-name="table_header"
|
|
||||||
:data="statisticsData"
|
|
||||||
style="width: 100%"
|
|
||||||
:height="vh + 'px'"
|
|
||||||
>
|
|
||||||
<vxe-table-column field="loginName" title="操作人员" align="center"></vxe-table-column>
|
|
||||||
<vxe-table-column field="operateType" title="事件类型" align="center"></vxe-table-column>
|
|
||||||
<vxe-table-column field="count" title="事件总数" align="center"></vxe-table-column>
|
|
||||||
</vxe-table>
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
align="right"
|
|
||||||
@size-change="handleSizeChange1"
|
|
||||||
@current-change="handleCurrentChange1"
|
|
||||||
:current-page="formLine.pageNum"
|
|
||||||
:page-sizes="[20, 30, 40, 50, 100]"
|
|
||||||
:page-size="formLine.pageSize"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="statisticsTotal"
|
|
||||||
class="mt10"
|
|
||||||
></el-pagination>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<MqttWs v-if="showMqtt" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
|
||||||
import Time from '@/views/components/Time.vue'
|
|
||||||
import {
|
|
||||||
getAllUserList,
|
|
||||||
getAuditLog,
|
|
||||||
censusAuditLog,
|
|
||||||
logFileWriter,
|
|
||||||
recoverLogFile,
|
|
||||||
getMemoInfo,
|
|
||||||
getSysConfig
|
|
||||||
} from '@/api/AuditManagement/AuditManagement'
|
|
||||||
import MqttWs from '@/components/Mqtt/mqttWs.vue'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
Timeinterval,
|
|
||||||
Time,
|
|
||||||
MqttWs
|
|
||||||
},
|
|
||||||
props: {},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
loading1: false,
|
|
||||||
view: false,
|
|
||||||
view1: false,
|
|
||||||
flg: true,
|
|
||||||
showMqtt:false,
|
|
||||||
zoom: '', //图表焦点校验
|
|
||||||
vh: undefined,
|
|
||||||
formData: {
|
|
||||||
loginName: '', //用户名
|
|
||||||
type: '', //事件类型
|
|
||||||
operateType: '', //操作类型
|
|
||||||
result: null,
|
|
||||||
searchBeginTime: '', //开始
|
|
||||||
searchEndTime: '', //结束
|
|
||||||
sortBy: '',
|
|
||||||
sortName: '',
|
|
||||||
orderBy: '',
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 100
|
|
||||||
},
|
|
||||||
formLine: {
|
|
||||||
loginName: '', //用户名
|
|
||||||
type: '', //事件类型
|
|
||||||
operateType: '', //操作类型
|
|
||||||
searchBeginTime: '', //开始
|
|
||||||
searchEndTime: '', //结束
|
|
||||||
sortBy: '',
|
|
||||||
sortName: '',
|
|
||||||
orderBy: '',
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 20
|
|
||||||
},
|
|
||||||
item: ['', ''],
|
|
||||||
item1: ['', ''],
|
|
||||||
userName: [], //
|
|
||||||
resultList: [
|
|
||||||
{ id: 1, label: '成功' },
|
|
||||||
{ id: 0, label: '失败' }
|
|
||||||
],
|
|
||||||
datamock: [],
|
|
||||||
statisticsData: [],
|
|
||||||
eventType: [
|
|
||||||
{
|
|
||||||
id: 0,
|
|
||||||
label: '业务事件类型'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
label: '系统事件类型'
|
|
||||||
}
|
|
||||||
], //事件类型
|
|
||||||
operationType: [
|
|
||||||
{ id: 1, value: '查询' },
|
|
||||||
{ id: 2, value: '新增' },
|
|
||||||
{ id: 3, value: '更新' },
|
|
||||||
{ id: 4, value: '删除' },
|
|
||||||
{ id: 5, value: '认证' },
|
|
||||||
{ id: 6, value: '注销' },
|
|
||||||
{ id: 7, value: '上传' },
|
|
||||||
{ id: 8, value: '下载' },
|
|
||||||
{ id: 9, value: '越权访问' }
|
|
||||||
], //操作类型
|
|
||||||
timeFlag: '',
|
|
||||||
total: undefined,
|
|
||||||
statisticsTotal: undefined
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.search()
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.zoom = 1 / document.body.style.zoom
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.zoom = 1 / document.body.style.zoom
|
|
||||||
})
|
|
||||||
if(process.env.VUE_APP_HB == 'hbqr'){
|
|
||||||
this.showMqtt = JSON.parse(window.sessionStorage.getItem('Info')).roleCode.includes('audit_manager')
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setHeight()
|
|
||||||
window.addEventListener('resize', this.setHeight)
|
|
||||||
this.onSubmit()
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
window.removeEventListener('resize', this.setHeight)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setHeight() {
|
|
||||||
this.vh = window.sessionStorage.getItem('appheight') - 95
|
|
||||||
},
|
|
||||||
//条件筛选
|
|
||||||
closeHandle() {
|
|
||||||
if (this.view) {
|
|
||||||
this.view = false
|
|
||||||
} else {
|
|
||||||
this.view = true
|
|
||||||
}
|
|
||||||
//console.log('关闭和展开');
|
|
||||||
const dom = document.getElementById('container')
|
|
||||||
const closeDom = document.getElementsByClassName('close')[0]
|
|
||||||
if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
|
|
||||||
dom.className = 'container expend'
|
|
||||||
} else {
|
|
||||||
dom.className = 'container close-container'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
closeHandle1() {
|
|
||||||
if (this.view1) {
|
|
||||||
this.view1 = false
|
|
||||||
} else {
|
|
||||||
this.view1 = true
|
|
||||||
}
|
|
||||||
//console.log('关闭和展开');
|
|
||||||
const dom = document.getElementById('container1')
|
|
||||||
const closeDom = document.getElementsByClassName('close')[0]
|
|
||||||
if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
|
|
||||||
dom.className = 'container expend'
|
|
||||||
} else {
|
|
||||||
dom.className = 'container close-container'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//统计
|
|
||||||
details() {
|
|
||||||
this.flg = false
|
|
||||||
setTimeout(() => {
|
|
||||||
this.OnSubmit()
|
|
||||||
}, 0)
|
|
||||||
},
|
|
||||||
OnSubmit() {
|
|
||||||
this.loading1 = true
|
|
||||||
this.item1 = this.$refs.intervaltime.timeValue
|
|
||||||
this.formLine.searchBeginTime = this.item1[0]
|
|
||||||
this.formLine.searchEndTime = this.item1[1]
|
|
||||||
censusAuditLog(this.formLine).then(res => {
|
|
||||||
this.statisticsData = res.data.records
|
|
||||||
this.statisticsTotal = res.data.total
|
|
||||||
this.loading1 = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 排序
|
|
||||||
sortChangeEvent({ column, field, order }) {
|
|
||||||
this.formData.sortName = column.title
|
|
||||||
this.formLine.sortName = column.title
|
|
||||||
this.formData.sortBy = field == 'operate' ? 'operate_type' : field == 'time' ? 'create_time' : field
|
|
||||||
this.formLine.sortBy = field == 'operate' ? 'operate_type' : field == 'time' ? 'create_time' : field
|
|
||||||
this.formData.orderBy = order
|
|
||||||
this.formLine.orderBy = order
|
|
||||||
this.onSubmit()
|
|
||||||
},
|
|
||||||
//下拉框查询
|
|
||||||
search() {
|
|
||||||
getAllUserList().then(res => {
|
|
||||||
this.userName = res.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//返回
|
|
||||||
back() {
|
|
||||||
this.flg = true
|
|
||||||
this.onSubmit()
|
|
||||||
},
|
|
||||||
//查询
|
|
||||||
onSubmit() {
|
|
||||||
this.loading = true
|
|
||||||
this.item = this.$refs.interval.timeValue
|
|
||||||
this.formData.searchBeginTime = this.item[0]
|
|
||||||
this.formData.searchEndTime = this.item[1]
|
|
||||||
getAuditLog(this.formData).then(res => {
|
|
||||||
this.datamock = res.data.records
|
|
||||||
this.total = res.data.total
|
|
||||||
this.loading = false
|
|
||||||
this.getLogSize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
//查询日志大小
|
|
||||||
getLogSize(){
|
|
||||||
getMemoInfo().then(res => {
|
|
||||||
getSysConfig().then(re=>{
|
|
||||||
if (res.data>re.data.logSize) {
|
|
||||||
this.$message({
|
|
||||||
showClose: true,
|
|
||||||
duration: 0,
|
|
||||||
message: '日志表存储空间已超过'+re.data.logSize+'(M)请及时备份清理!',
|
|
||||||
type: 'warning'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
//备份
|
|
||||||
backups() {
|
|
||||||
this.loading = true
|
|
||||||
logFileWriter().then(res => {})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$message({
|
|
||||||
type: 'success',
|
|
||||||
message: '文件备份成功'
|
|
||||||
})
|
|
||||||
this.loading = false
|
|
||||||
}, 50000)
|
|
||||||
},
|
|
||||||
//恢复
|
|
||||||
restore() {
|
|
||||||
this.loading = true
|
|
||||||
recoverLogFile().then(res => {})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$message({
|
|
||||||
type: 'success',
|
|
||||||
message: '文件恢复成功'
|
|
||||||
})
|
|
||||||
this.loading = false
|
|
||||||
}, 50000)
|
|
||||||
},
|
|
||||||
//每页条数改变时触发 选择一页显示多少行
|
|
||||||
handleSizeChange(val) {
|
|
||||||
this.formData.pageSize = val
|
|
||||||
this.onSubmit()
|
|
||||||
},
|
|
||||||
//当前页改变时触发 跳转其他页
|
|
||||||
handleCurrentChange(val) {
|
|
||||||
this.formData.pageNum = val
|
|
||||||
this.onSubmit()
|
|
||||||
},
|
|
||||||
//每页条数改变时触发 选择一页显示多少行
|
|
||||||
handleSizeChange1(val) {
|
|
||||||
this.formLine.pageSize = val
|
|
||||||
this.OnSubmit()
|
|
||||||
},
|
|
||||||
//当前页改变时触发 跳转其他页
|
|
||||||
handleCurrentChange1(val) {
|
|
||||||
this.formLine.pageNum = val
|
|
||||||
this.OnSubmit()
|
|
||||||
},
|
|
||||||
//导出
|
|
||||||
exportEvent() {
|
|
||||||
getAuditLog({
|
|
||||||
loginName: this.formData.loginName,
|
|
||||||
type: this.formData.type,
|
|
||||||
operateType: this.formData.operateType,
|
|
||||||
searchBeginTime: this.formData.searchBeginTime,
|
|
||||||
searchEndTime: this.formData.searchEndTime,
|
|
||||||
sortBy: this.formData.sortBy,
|
|
||||||
sortName: this.formData.sortName,
|
|
||||||
orderBy: this.formData.orderBy,
|
|
||||||
export:true,
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: this.total
|
|
||||||
}).then(res => {
|
|
||||||
this.$refs.management.exportData({
|
|
||||||
filename: 'export', // 文件名字
|
|
||||||
sheetName: 'Sheet1',
|
|
||||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
|
||||||
useStyle: true,
|
|
||||||
data: res.data.records // 数据源 // 过滤那个字段导出
|
|
||||||
// columnFilterMethod: function (column, $columnIndex) {
|
|
||||||
// return !(column.$columnIndex === 0);
|
|
||||||
// },
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
exportEventstatistics() {
|
|
||||||
censusAuditLog({
|
|
||||||
loginName: this.formLine.loginName,
|
|
||||||
type: this.formLine.type,
|
|
||||||
operateType: this.formLine.operateType,
|
|
||||||
searchBeginTime: this.formLine.searchBeginTime,
|
|
||||||
searchEndTime: this.formLine.searchEndTime,
|
|
||||||
pageNum: 1,
|
|
||||||
export:true,
|
|
||||||
pageSize: this.statisticsTotal
|
|
||||||
}).then(res => {
|
|
||||||
this.$refs.management1.exportData({
|
|
||||||
filename: 'export', // 文件名字
|
|
||||||
sheetName: 'Sheet1',
|
|
||||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
|
||||||
useStyle: true,
|
|
||||||
data: res.data.records // 数据源 // 过滤那个字段导出
|
|
||||||
// columnFilterMethod: function (column, $columnIndex) {
|
|
||||||
// return !(column.$columnIndex === 0);
|
|
||||||
// },
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {},
|
|
||||||
|
|
||||||
watch: {}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
@import url('../../../styles/comStyle.less');
|
|
||||||
::v-deep .el-form-item--small .el-form-item__content,
|
|
||||||
.el-form-item--small .el-form-item__label {
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
::v-deep .vxe-table .cell {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.svgIcon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
}
|
|
||||||
.back {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
/* margin: auto; */
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 2000;
|
|
||||||
width: 50%;
|
|
||||||
height: 0;
|
|
||||||
overflow: auto;
|
|
||||||
background-color: #e4e7ebb9;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
-radius: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 隐藏滚动条 */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.expend {
|
|
||||||
animation: expend ease 5s forwards;
|
|
||||||
}
|
|
||||||
.close-container {
|
|
||||||
animation: no-expend ease 1s forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes expend {
|
|
||||||
from {
|
|
||||||
top: 0;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
top: 0;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes no-expend {
|
|
||||||
from {
|
|
||||||
top: 0;
|
|
||||||
height: 20%;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
top: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.coles {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user