|
|
|
@ -7,29 +7,94 @@ |
|
|
|
<div style=" width: 50%;"> |
|
|
|
<h2 style="color: #fff; width: 50%;">告警详情</h2> |
|
|
|
<div style="display: flex; flex-direction: column; margin: 0 10px 10px 40px; color: #3884d1;"> |
|
|
|
<span style=" margin: 0 0 10px 0 ;">设备类型：视频监控 </span> |
|
|
|
<span style=" margin: 0 0 10px 0 ">设备名称：视频监控 </span> |
|
|
|
<span style=" margin: 0 0 10px 0 ">设备编号:</span> |
|
|
|
<span style=" margin: 0 0 10px 0 ">报警时间：视频监控</span> |
|
|
|
<span style=" margin: 0 0 10px 0 ">报警状态：视频监控 </span> |
|
|
|
<span style=" margin: 0 0 10px 0 ">安装位置：视频监控 </span> |
|
|
|
<span style=" margin: 0 0 10px 0 ;">设备类型：{{ warnItem.baoxiu }} </span> |
|
|
|
<span style=" margin: 0 0 10px 0 ">设备名称：智能摄像头</span> |
|
|
|
<span style=" margin: 0 0 10px 0 ">设备编号: {{ warnItem.id }}</span> |
|
|
|
<span style=" margin: 0 0 10px 0 ">报警时间：{{ warnItem.date }}</span> |
|
|
|
<span style=" margin: 0 0 10px 0 ">报警状态：{{ warnItem.type }} </span> |
|
|
|
<span style=" margin: 0 0 10px 0 ">安装位置：{{ warnItem.address }} </span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style=" width: 50%;"> |
|
|
|
<h2 style="color: #fff; width: 50%;">实时画面</h2> |
|
|
|
|
|
|
|
<div class="video-right"> |
|
|
|
<img style="width:100%;height: 120px;" :src="warnItem.imgUrl?warnItem.imgUrl:require('../image/jiedaotu.jpg')" /> |
|
|
|
<div class="prism-big-play-btn" @click="videoPlay(warnItem.inspectCode)"> |
|
|
|
<div class="outter"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<h2 style="color: #fff;">处理</h2> |
|
|
|
<div style="display: flex; flex-direction: column; margin: 0 10px 10px 40px; color: #3884d1;"> |
|
|
|
<div style=" margin: 0 0 10px 0 ;"><span>处理方式：</span> |
|
|
|
<el-checkbox v-model="checked" style=" color: #3884d1;" class="round-checkbox">指派</el-checkbox> |
|
|
|
<el-checkbox v-model="checked" class="round-checkbox">完成</el-checkbox> |
|
|
|
<el-checkbox |
|
|
|
v-model="isAssigned" |
|
|
|
style="color: #3884d1;" |
|
|
|
class="round-checkbox" |
|
|
|
@change="handleCheck('assign')" |
|
|
|
> |
|
|
|
指派 |
|
|
|
</el-checkbox> |
|
|
|
<el-checkbox |
|
|
|
v-model="isCompleted" |
|
|
|
class="round-checkbox" |
|
|
|
@change="handleCheck('complete')" |
|
|
|
> |
|
|
|
完成 |
|
|
|
</el-checkbox> |
|
|
|
</div> |
|
|
|
<div style=" margin: 0 0 10px 0 "><span>处理部门：</span> |
|
|
|
<el-cascader |
|
|
|
ref="agencyIdArray" |
|
|
|
v-model.trim="agencyIdArray" |
|
|
|
:options="orgOptions" |
|
|
|
:props="orgOptionProps" |
|
|
|
:show-all-levels="false" |
|
|
|
class="select" |
|
|
|
popper-class="selectPopClass" |
|
|
|
@change="handleChangeAgency" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style=" margin: 0 0 10px 0 "><span>转办意见：</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div style=" margin: 0 0 10px 0 "> |
|
|
|
|
|
|
|
<el-input |
|
|
|
v-model.trim="form.content" |
|
|
|
:autosize="{ minRows: 5, maxRows: 10}" |
|
|
|
style="width: 50%;" |
|
|
|
maxlength="500" |
|
|
|
placeholder="请输入转办意见" |
|
|
|
type="textarea"/> |
|
|
|
</div> |
|
|
|
<span style=" margin: 0 0 10px 0 ">处理部门：视频监控 </span> |
|
|
|
<span style=" margin: 0 0 10px 0 ">转办意见:</span> |
|
|
|
<span style=" margin: 0 0 10px 0 ">图片/附件：视频监控</span> |
|
|
|
<div style=" margin: 0 0 10px 0 "><span>图片/附件：</span> |
|
|
|
<el-upload |
|
|
|
:action="uploadUlr" |
|
|
|
:before-upload="beforeUpload" |
|
|
|
:file-list="fileList" |
|
|
|
:headers="$getElUploadHeaders()" |
|
|
|
:limit="3" |
|
|
|
:on-preview="handleFileDownload" |
|
|
|
:on-remove="handleFileRemove" |
|
|
|
:on-success="handleFileSuccess" |
|
|
|
accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3" |
|
|
|
> |
|
|
|
<el-button :disabled="fileList.length === 3" size="small" type="primary">点击上传</el-button> |
|
|
|
<div slot="tip" class="el-upload__tip">支持图片、word、pdf</div> |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 按钮居中显示 --> |
|
|
|
<div style="display: flex; flex-direction: row; justify-content: center;"> |
|
|
|
<el-button size="small" style="width: 100px;" type="primary" @click="handleCancle">处理告警</el-button> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -38,22 +103,29 @@ |
|
|
|
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<video-dialog :showDialog="showVideoDialog" :monitorCode="monitorCode" @close="close"></video-dialog> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import {requestPost} from "@/js/dai/request"; |
|
|
|
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|
|
|
import videoDialog from "../Videosurveillance/cpts/videoDialog.vue" |
|
|
|
export default { |
|
|
|
name: "moreDialog", |
|
|
|
components: { |
|
|
|
Title, |
|
|
|
|
|
|
|
videoDialog |
|
|
|
}, |
|
|
|
props: { |
|
|
|
showInfo: { |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
|
|
|
|
warnItem: { |
|
|
|
type: Object, |
|
|
|
default: () => {} |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
@ -76,267 +148,38 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
], |
|
|
|
header: [ |
|
|
|
"设备类型", |
|
|
|
"设备编号", |
|
|
|
"设备位置", |
|
|
|
"操作", |
|
|
|
], |
|
|
|
list: [{ |
|
|
|
date: '2016-05-02', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-04', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1517 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-03', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1516 弄' |
|
|
|
},{ |
|
|
|
date: '2016-05-02', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-04', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1517 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1519 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-03', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1516 弄' |
|
|
|
}], |
|
|
|
equipmentListType: [{ |
|
|
|
value: '选项1', |
|
|
|
label: '黄金糕' |
|
|
|
}, { |
|
|
|
value: '选项2', |
|
|
|
label: '双皮奶' |
|
|
|
}, { |
|
|
|
value: '选项3', |
|
|
|
label: '蚵仔煎' |
|
|
|
}, { |
|
|
|
value: '选项4', |
|
|
|
label: '龙须面' |
|
|
|
}, { |
|
|
|
value: '选项5', |
|
|
|
label: '北京烤鸭' |
|
|
|
}], |
|
|
|
equipmentType: '', |
|
|
|
bubbleList: [ |
|
|
|
{ |
|
|
|
w: 8, |
|
|
|
x: 10 |
|
|
|
}, |
|
|
|
{ |
|
|
|
w: 9, |
|
|
|
x: 50 |
|
|
|
}, |
|
|
|
{ |
|
|
|
w: 4, |
|
|
|
x: 30 |
|
|
|
}, |
|
|
|
{ |
|
|
|
w: 5, |
|
|
|
x: 80 |
|
|
|
}, |
|
|
|
{ |
|
|
|
w: 4, |
|
|
|
x: 30 |
|
|
|
}, |
|
|
|
{ |
|
|
|
w: 4, |
|
|
|
x: 70 |
|
|
|
}, |
|
|
|
{ |
|
|
|
w: 6, |
|
|
|
x: 20 |
|
|
|
}, |
|
|
|
{ |
|
|
|
w: 8, |
|
|
|
x: 50 |
|
|
|
}, |
|
|
|
{ |
|
|
|
w: 4, |
|
|
|
x: 60 |
|
|
|
}, |
|
|
|
{ |
|
|
|
w: 6, |
|
|
|
x: 65 |
|
|
|
} |
|
|
|
], |
|
|
|
// list: [ |
|
|
|
// { |
|
|
|
// title: '常用功能', |
|
|
|
// children: [ |
|
|
|
// { |
|
|
|
// label: '物联一张图', |
|
|
|
// navigator: '' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: '居民选举', |
|
|
|
// navigator: '' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: '派件管理', |
|
|
|
// navigator: 'shequzhili-Delivery-index' |
|
|
|
// }, { |
|
|
|
// label: '社区宣传', |
|
|
|
// navigator: 'communityParty-comPromotion-index' |
|
|
|
// }, { |
|
|
|
// label: '社区活动', |
|
|
|
// navigator: 'volunteer-activityArchive-index' |
|
|
|
// } |
|
|
|
// ] |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// title: '人房管理', |
|
|
|
// children: [ |
|
|
|
// { |
|
|
|
// label: '房屋管理', |
|
|
|
// navigator: 'base-community-community' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: '居民信息', |
|
|
|
// navigator: 'base-resi' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: '居民分类', |
|
|
|
// navigator: 'base-classification' |
|
|
|
// }, { |
|
|
|
// label: '迁入记录', |
|
|
|
// navigator: 'base-huji-immigration-index' |
|
|
|
// }, { |
|
|
|
// label: '迁出记录', |
|
|
|
// navigator: 'plugins-change-changerelocation' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: '死亡记录', |
|
|
|
// navigator: 'plugins-change-changedeath' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: '虚拟网格居民', |
|
|
|
// navigator: 'base-virtualResi' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: '智能导入', |
|
|
|
// navigator: 'base-smartImport' |
|
|
|
// } |
|
|
|
// ] |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// title:'社区党建', |
|
|
|
// children:[ |
|
|
|
// { |
|
|
|
// label: '党组织管理', |
|
|
|
// navigator: 'communityParty-partyOrg-orgTree' |
|
|
|
// },{ |
|
|
|
// label: '党员信息', |
|
|
|
// navigator: 'communityParty-members-memberList' |
|
|
|
// },{ |
|
|
|
// label: '联建单位', |
|
|
|
// navigator: 'communityParty-regionalParty-units' |
|
|
|
// },{ |
|
|
|
// label: '联建活动', |
|
|
|
// navigator: 'communityParty-regionalParty-activitys' |
|
|
|
// },{ |
|
|
|
// label: '社区宣传', |
|
|
|
// navigator: 'communityParty-comPromotion-index' |
|
|
|
// },{ |
|
|
|
// label: '社区活动', |
|
|
|
// navigator: 'communityParty-activity-index' |
|
|
|
// } |
|
|
|
// ] |
|
|
|
// } |
|
|
|
// ], |
|
|
|
agencyIdArray: [], |
|
|
|
orgOptions: [], |
|
|
|
orgOptionProps: { |
|
|
|
multiple: false, |
|
|
|
value: 'agencyId', |
|
|
|
label: 'agencyName', |
|
|
|
children: 'subAgencyList', |
|
|
|
checkStrictly: true |
|
|
|
}, |
|
|
|
loading: false, |
|
|
|
loading1: false, |
|
|
|
user: this.$store.state.user |
|
|
|
user: this.$store.state.user, |
|
|
|
form: { |
|
|
|
operationType: "5", //处理方式[0:已回复 5、指派 6、完成并回复] |
|
|
|
content: "",//转办意见 |
|
|
|
timeLimit: "",//办结时限 |
|
|
|
categoryId: "",//事件分类 |
|
|
|
deptId: "", //指派部门 |
|
|
|
deptName: "", |
|
|
|
categoryList: [], |
|
|
|
files: [] //附件 |
|
|
|
}, |
|
|
|
|
|
|
|
fileList: [], |
|
|
|
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile", |
|
|
|
isAssigned: false, |
|
|
|
isCompleted: false, |
|
|
|
showVideoDialog:false, |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
watch: { |
|
|
|
showInfo: { |
|
|
|
handler(val) { |
|
|
|
if (val) { |
|
|
|
this.bubbleList.forEach((i, index) => { |
|
|
|
this.$set( |
|
|
|
i, |
|
|
|
'c', |
|
|
|
this.forArrayValue( |
|
|
|
[ |
|
|
|
'rgba(255,255,255,0.2)', |
|
|
|
'rgba(255,255,255,0.4)', |
|
|
|
'rgba(255,255,255,0.6)' |
|
|
|
], |
|
|
|
index |
|
|
|
) |
|
|
|
) |
|
|
|
}) |
|
|
|
console.log(this.bubbleList); |
|
|
|
} else { |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
immediate: true, |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
@ -370,8 +213,128 @@ export default { |
|
|
|
// handelClickNavigator(navigator) { |
|
|
|
// this.$emit('handelClickNavigator', navigator) |
|
|
|
// } |
|
|
|
handleChangeAgency(val) { |
|
|
|
let obj = this.$refs["agencyIdArray"].getCheckedNodes()[0].data |
|
|
|
if (obj) { |
|
|
|
this.form.orgType = obj.level === 'grid' ? 'grid' : 'agency' |
|
|
|
this.form.deptId = obj.agencyId |
|
|
|
this.form.deptName = obj.agencyName |
|
|
|
} else { |
|
|
|
this.form.orgType = '' |
|
|
|
this.form.orgId = '' |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
close(){ |
|
|
|
this.showVideoDialog = false; |
|
|
|
}, |
|
|
|
|
|
|
|
//组织机构树 |
|
|
|
async getOrgTreeList() { |
|
|
|
const url = "/gov/org/customeragency/agencygridtree" |
|
|
|
let params = { |
|
|
|
agencyId: this.agencyId, |
|
|
|
purpose: "query" |
|
|
|
} |
|
|
|
const {data, code, msg} = await requestPost(url, params) |
|
|
|
if (code === 0) { |
|
|
|
this.orgOptions = [] |
|
|
|
this.orgOptions.push(data) |
|
|
|
} else { |
|
|
|
this.$message.error(msg) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
beforeUpload(file) { |
|
|
|
const array = file.name.split("."); |
|
|
|
const extension = array[array.length - 1]; |
|
|
|
const formatarray = [ |
|
|
|
"jpg", |
|
|
|
"png", |
|
|
|
"jpeg", |
|
|
|
"bmp", |
|
|
|
"mp4", |
|
|
|
"wma", |
|
|
|
"m4a", |
|
|
|
"mp3", |
|
|
|
"doc", |
|
|
|
"docx", |
|
|
|
"xls", |
|
|
|
"xlsx", |
|
|
|
"pdf", |
|
|
|
]; |
|
|
|
if (formatarray.indexOf(extension) === -1) { |
|
|
|
this.$message.error("只支持图片、word、pdf"); |
|
|
|
return false; |
|
|
|
} |
|
|
|
}, |
|
|
|
handleFileRemove(file) { |
|
|
|
if (file && file.status === "success") { |
|
|
|
this.fileList.splice( |
|
|
|
this.fileList.findIndex((item) => item.uid === file.uid), |
|
|
|
1 |
|
|
|
); |
|
|
|
} |
|
|
|
}, |
|
|
|
handleFileSuccess(res, file) { |
|
|
|
if (res.code === 0 && res.msg === "success") { |
|
|
|
const array = file.name.split("."); |
|
|
|
const fileType = array[array.length - 1]; |
|
|
|
const picArray = ["jpg", "png", "jpeg", "bmp"]; |
|
|
|
const videoarray = ["mp4", "wma", "m4a"]; |
|
|
|
const docArray = ["doc", "docx", "xls", "xlsx", "pdf"]; |
|
|
|
const mp3Array = ["mp3"]; |
|
|
|
|
|
|
|
if (picArray.indexOf(fileType) > -1) { |
|
|
|
file.attachmentFormat = "image"; |
|
|
|
} else if (videoarray.indexOf(fileType) > -1) { |
|
|
|
file.attachmentFormat = "video"; |
|
|
|
} else if (docArray.indexOf(fileType) > -1) { |
|
|
|
file.attachmentFormat = "doc"; |
|
|
|
} else if (mp3Array.indexOf(fileType) > -1) { |
|
|
|
file.attachmentFormat = "voice"; |
|
|
|
} |
|
|
|
|
|
|
|
file.url = res.data.url; |
|
|
|
file.type = fileType; |
|
|
|
|
|
|
|
file.attachmentName = file.name; |
|
|
|
file.attachmentType = file.type; |
|
|
|
file.attachmentUrl = file.url; |
|
|
|
|
|
|
|
this.fileList.push(file); |
|
|
|
} else this.$message.error(res.msg); |
|
|
|
}, |
|
|
|
//下载 |
|
|
|
handleFileDownload(file) { |
|
|
|
var a = document.createElement("a"); |
|
|
|
var event = new MouseEvent("click"); |
|
|
|
a.download = file.name; |
|
|
|
a.target = '_blank'; |
|
|
|
a.href = file.url; |
|
|
|
a.dispatchEvent(event); |
|
|
|
}, |
|
|
|
|
|
|
|
handleCancle () { |
|
|
|
this.$message.success("操作成功"); |
|
|
|
this.$emit('handleCancle') |
|
|
|
}, |
|
|
|
|
|
|
|
handleCheck(type) { |
|
|
|
if (type === 'assign') { |
|
|
|
this.isCompleted = !this.isAssigned; |
|
|
|
} else if (type === 'complete') { |
|
|
|
this.isAssigned = !this.isCompleted; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
videoPlay(code) { |
|
|
|
this.showVideoDialog = true; |
|
|
|
this.monitorCode = code |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getOrgTreeList(); |
|
|
|
console.log('showDialog:', this.showDialog); // 输出 showDialog 的值 |
|
|
|
console.log('type:', this.type); // 输出 type 的值 |
|
|
|
} |
|
|
|
@ -651,4 +614,66 @@ section { |
|
|
|
transform: scale(1); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.video-right { |
|
|
|
position: relative; |
|
|
|
background: #000; |
|
|
|
width: 50%; |
|
|
|
.prism-big-play-btn { |
|
|
|
position: absolute; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
left: 50%; |
|
|
|
top: 50%; |
|
|
|
width: 32px; |
|
|
|
height: 32px; |
|
|
|
background: url("../image/vidio.png") no-repeat; |
|
|
|
background-size: contain; |
|
|
|
cursor: pointer; |
|
|
|
.outter { |
|
|
|
border: 7px solid rgba(255, 255, 255, 0.51); |
|
|
|
width: 32px; |
|
|
|
height: 32px; |
|
|
|
border-radius: 100%; |
|
|
|
position: absolute; |
|
|
|
box-sizing: border-box; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
.outter:hover { |
|
|
|
content: ""; |
|
|
|
width: 80px; |
|
|
|
height: 80px; |
|
|
|
position: absolute; |
|
|
|
left: 25%; |
|
|
|
top: 50%; |
|
|
|
margin-left: -40px; |
|
|
|
margin-top: -40px; |
|
|
|
border-radius: 50%; |
|
|
|
//a1为经过@keyframes 规则建立的动画名称，可本身定义web |
|
|
|
// a2 为动画时常 ，例如：1s 2s 可自行规定浏览器 |
|
|
|
// a3 为css自带的动画效果，有以下几个： |
|
|
|
// 类名称+持续时间+（变化方式,延迟时间，重复次数（infinite循环），重复方式，开始结束的状态） |
|
|
|
animation: warn 1s ease-out 0s infinite; |
|
|
|
} |
|
|
|
// 在warn方法里,用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 |
|
|
|
// 0% 是动画的开始，100% 是动画的完成，建议使用百分比，会更加详细： |
|
|
|
@keyframes warn { |
|
|
|
0% { |
|
|
|
// transform: scale表示缩放，值表示倍数，可以指定X/Y轴 |
|
|
|
transform: scale(0.5); |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
30% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
transform: scale(1.4); |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
duanliangtao
10 months ago
