888 lines
21 KiB
Vue
888 lines
21 KiB
Vue
<template>
|
||
<div class="map">
|
||
<div id="map" ref="rootmap" />
|
||
<div class="community-info" v-show="isShowInfo">
|
||
<div class="community-info__close" title="关闭" @click="closeInfo">
|
||
<i class="iconClean iconfont"></i>
|
||
</div>
|
||
<div class="community-info__header">
|
||
<div class="user" :style="userStyle">
|
||
<span>{{ formatName(info.name) }}</span>
|
||
</div>
|
||
<h2>{{ info.name }}</h2>
|
||
<h3>{{ info.gpsDesc }}</h3>
|
||
<p>最后更新时间：{{ info.lastUpdateTime }}</p>
|
||
<div class="community-info__header--status">
|
||
<div :style="{color: info.onlineStatus === '1' ? '#2EA222' : '#F46' }">
|
||
<i class="iconfont iconzhuangtai"></i>
|
||
<span>设备{{ info.onlineStatus === '1' ? '在线' : '离线' }}</span>
|
||
</div>
|
||
<div>
|
||
<i class="iconfont icondianliang"></i>
|
||
<span>剩余{{ info.electricQuantity }}%</span>
|
||
</div>
|
||
</div>
|
||
<div class="community-info__header--info">
|
||
<div class="community-info__header--info-item" v-for="(item, index) in testItem" :key="item.name" v-if="index !== 0">
|
||
<div class="left">
|
||
<div :style="{backgroundColor: item.color}">
|
||
<i :class="item.icon" class="iconfont"></i>
|
||
</div>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
<i :style="{color: (testData[index] && testData[index].abnormalStatus === '1') ? '#F46' : ''}">{{ testData[index] ? testData[index].itemValue : '-' }}{{ index === '1' ? '℃' : '' }}</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="community-info__wrapper">
|
||
<div class="community-info__title">
|
||
<h2>人员信息</h2>
|
||
<span :style="userStatusColor">{{ userStatus }}</span>
|
||
</div>
|
||
<div class="community-info__item">
|
||
<label>姓名</label>
|
||
<span>{{ info.name}}</span>
|
||
</div>
|
||
<div class="community-info__item">
|
||
<label>性别</label>
|
||
<span>{{ info.sex === '1' ? '男' : '女' }}</span>
|
||
</div>
|
||
<div class="community-info__item">
|
||
<label>年龄</label>
|
||
<span>{{ info.age }}</span>
|
||
</div>
|
||
<div class="community-info__item">
|
||
<label>所属地区</label>
|
||
<span>{{ info.areaName }}</span>
|
||
</div>
|
||
<div class="community-info__item">
|
||
<label>联系电话</label>
|
||
<span>{{ info.phone }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||
import {mapState} from 'vuex'
|
||
|
||
export default {
|
||
name: 'AppMonitorMapDv',
|
||
label: '监护地图',
|
||
provide() {
|
||
return {
|
||
root: this
|
||
}
|
||
},
|
||
props: {
|
||
instance: Function,
|
||
dict: Object
|
||
},
|
||
data() {
|
||
return {
|
||
map: null,
|
||
community: '',
|
||
isShowInfo: false,
|
||
info: {},
|
||
satellite: null,
|
||
zoom: 11,
|
||
choosedId: '',
|
||
testItem: [{
|
||
name: '体温',
|
||
icon: 'icontiwen',
|
||
color: '#6BA3DB'
|
||
}, {
|
||
name: '心率',
|
||
icon: 'iconxinlv',
|
||
color: '#72BB5C'
|
||
}, {
|
||
name: '血压',
|
||
icon: 'iconxueya',
|
||
color: '#7577CB'
|
||
}, {
|
||
name: '血氧',
|
||
icon: 'iconxueyang',
|
||
color: '#FF5656'
|
||
}],
|
||
testData: [],
|
||
center: []
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['user']),
|
||
|
||
userStatus () {
|
||
if (this.info.abnormalStatus === '2') {
|
||
return '求助'
|
||
}
|
||
|
||
if (this.info.abnormalStatus === '1') {
|
||
return '异常'
|
||
}
|
||
|
||
if (this.info.abnormalStatus === '0') {
|
||
return '正常'
|
||
}
|
||
|
||
return '-'
|
||
},
|
||
|
||
userStatusColor () {
|
||
if (this.info.abnormalStatus === '2') {
|
||
return {
|
||
color: '#FF69DD',
|
||
border: '1px solid #FF69DD'
|
||
}
|
||
}
|
||
|
||
if (this.info.abnormalStatus === '1') {
|
||
return {
|
||
color: '#FF6969',
|
||
border: '1px solid #FF6969'
|
||
}
|
||
}
|
||
|
||
return {
|
||
color: '#22FF81',
|
||
border: '1px solid #22FF81'
|
||
}
|
||
},
|
||
|
||
userStyle () {
|
||
if (this.info.abnormalStatus === '2') {
|
||
return {
|
||
background: 'rgba(96,8,102,0.80)',
|
||
border: '1px solid #FF69DD',
|
||
boxShadow: '0 4px 4px 0 #000000, inset 0 0 8px 4px #C312CA'
|
||
}
|
||
}
|
||
|
||
if (this.info.abnormalStatus === '1') {
|
||
return {
|
||
background: 'rgba(79,14,7,0.80)',
|
||
border: '1px solid #FF6969',
|
||
boxShadow: '0 4px 4px 0 #000000, inset 0 0 8px 4px #C60E0E'
|
||
}
|
||
}
|
||
|
||
return {
|
||
background: 'rgba(8,73,35,0.80)',
|
||
border: '1px solid #22FF81',
|
||
boxShadow: '0 4px 4px 0 #000000, inset 0 0 8px 4px #15BE55'
|
||
}
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.getCorpLocation()
|
||
},
|
||
|
||
methods: {
|
||
getIdInfo (UUserCard, num) {
|
||
if (num == 1) {
|
||
var birth = UUserCard.substring(6, 10) + '-' + UUserCard.substring(10, 12) + '-' + UUserCard.substring(12, 14)
|
||
return birth
|
||
}
|
||
if (num == 2) {
|
||
if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
|
||
return '1'
|
||
} else {
|
||
return '0'
|
||
}
|
||
}
|
||
|
||
if (num == 3) {
|
||
var myDate = new Date()
|
||
var month = myDate.getMonth() + 1
|
||
var day = myDate.getDate()
|
||
var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
|
||
if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
|
||
age ++
|
||
}
|
||
|
||
return age
|
||
}
|
||
},
|
||
|
||
getCorpLocation(){
|
||
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
|
||
if(res.code==0){
|
||
this.initMap(res.data);
|
||
}
|
||
})
|
||
},
|
||
|
||
getList () {
|
||
this.instance.post(`/app/appintelligentguardianshipdevice/list`, null, {
|
||
params: {
|
||
size: 8000,
|
||
current: 1
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
const points = res.data.records.map(item => {
|
||
return {
|
||
...item,
|
||
lnglat: [item.lng, item.lat],
|
||
id: item.id,
|
||
corpId: item.corpId,
|
||
areaName:item.areaName,
|
||
name: item.name
|
||
}
|
||
})
|
||
|
||
this.addMakert(points)
|
||
|
||
if (this.$route.query.id) {
|
||
this.onTreeChange({
|
||
type: '1',
|
||
deviceId: this.$route.query.id,
|
||
lng: this.$route.query.lng,
|
||
lat: this.$route.query.lat
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
formatName (str) {
|
||
if (!str) return ''
|
||
|
||
return str.substr(str.length - 2)
|
||
},
|
||
|
||
getInfo (id) {
|
||
this.instance.post(`/app/appintelligentguardianshipdevice/queryMonitorList?deviceId=${id}&type=1`).then(res => {
|
||
if (res.code === 0) {
|
||
let obj = {}
|
||
this.testData = res.data.records.forEach(item => {
|
||
obj[item.item] = item
|
||
})
|
||
|
||
this.testData = obj
|
||
}
|
||
})
|
||
this.instance.post(`/app/appintelligentguardianshipdevice/queryDetailById?id=${id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.info = res.data
|
||
this.info.age = this.getIdInfo(res.data.idNumber, 3)
|
||
this.isShowInfo = true
|
||
}
|
||
})
|
||
},
|
||
|
||
toCenter() {
|
||
this.map.setZoomAndCenter(this.zoom, this.center, false, 600)
|
||
},
|
||
|
||
renderClusterMarker(context) {
|
||
let el = `<div class="polymeric">
|
||
<div class="polymeric-container">
|
||
<p>${context.count}</p>
|
||
</div>
|
||
</div>`
|
||
|
||
let offset = new AMap.Pixel(-9, -9)
|
||
context.marker.setContent(el)
|
||
context.marker.setOffset(offset)
|
||
context.marker.lnglat = context.clusterData[0].lnglat
|
||
|
||
context.marker.on('click', e => {
|
||
this.map.setZoomAndCenter(this.map.getZoom() + 3, e.target.lnglat, false, 500)
|
||
})
|
||
},
|
||
|
||
renderMarker(context) {
|
||
const buildId = context.data[0].id
|
||
|
||
let el = `<div class="mark mark${context.data[0].abnormalStatus}" id="buildId-${buildId}">
|
||
<div class="mark-contaienr">
|
||
<span>${context.data[0].name}</span>
|
||
</div>
|
||
</div>`
|
||
|
||
context.marker.setContent(el);
|
||
context.marker.setAnchor("center")
|
||
context.marker.id = `${buildId}`
|
||
context.marker.data = JSON.stringify(context.data[0])
|
||
context.marker.lnglat = context.data[0].lnglat
|
||
|
||
context.marker.on('click', e => {
|
||
this.choosedId = e.target.id
|
||
this.getInfo(e.target.id)
|
||
context.marker.setContent(el);
|
||
document.querySelectorAll('.mark').forEach(el => {
|
||
el.classList.remove('mark-active')
|
||
})
|
||
document.querySelector(`#buildId-${e.target.id}`).add('mark-active')
|
||
this.map.setZoomAndCenter(this.map.getZoom() + 0.000000001, e.target.lnglat, false, 300)
|
||
})
|
||
},
|
||
|
||
closeInfo () {
|
||
this.info = {}
|
||
this.isShowInfo = false
|
||
this.choosedId = ''
|
||
this.map.setZoom(this.map.getZoom() + 0.0001)
|
||
},
|
||
|
||
addMakert(points) {
|
||
new AMap.MarkerClusterer(this.map, points, {
|
||
gridSize: 60,
|
||
maxZoom: 15,
|
||
clusterByZoomChange: false,
|
||
renderClusterMarker: this.renderClusterMarker,
|
||
renderMarker: this.renderMarker
|
||
})
|
||
},
|
||
|
||
initMap({lng,lat}) {
|
||
this.center = [lng,lat];
|
||
AMapLoader.load({
|
||
key: '54a02a43d9828a8f9cd4f26fe281e74e',
|
||
version: '2.0',
|
||
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.MarkerClusterer'],
|
||
AMapUI: {
|
||
version: '1.1',
|
||
plugins: []
|
||
}
|
||
}).then((AMap) => {
|
||
this.map = new AMap.Map('map', {
|
||
resizeEnable: true,
|
||
zooms: [6, 20],
|
||
center: [lng, lat],
|
||
zoom: this.zoom,
|
||
mapStyle: 'amap://styles/40f6fba77127e061a058f670433a67ec'
|
||
})
|
||
this.satellite = new AMap.TileLayer.Satellite()
|
||
this.getList()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.map {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
|
||
.community-info {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
width: 400px;
|
||
max-height: calc(100% - 20px);
|
||
overflow-y: overlay;
|
||
overflow-x: hidden;
|
||
z-index: 111;
|
||
background: rgba(7,11,35,0.50);
|
||
border: 1px solid #14345F;
|
||
|
||
.community-info__close {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
padding: 16px 12px 0 12px;
|
||
font-size: 16px;
|
||
color: #8899bb;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 1px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
border-radius: 6px;
|
||
background: rgba(144, 147, 153, .5);
|
||
}
|
||
|
||
.community-info__header {
|
||
padding-top: 40px;
|
||
text-align: center;
|
||
|
||
.user {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 50px;
|
||
height: 50px;
|
||
margin: 0 auto 8px;
|
||
border-radius: 50%;
|
||
background: #2266FF;
|
||
|
||
span {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
h2 {
|
||
line-height: 24px;
|
||
margin-bottom: 12px;
|
||
font-weight: Bold;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
h3, p {
|
||
width: 300px;
|
||
line-height: 22px;
|
||
margin: 0 auto 4px;
|
||
font-size: 13px;
|
||
color: #82C5FF;
|
||
text-align: center;
|
||
font-weight: normal;
|
||
}
|
||
|
||
& > h3 {
|
||
line-height: 1.4;
|
||
color: #82C5FF;
|
||
}
|
||
|
||
.community-info__header--info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0 20px;
|
||
|
||
.community-info__header--info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 174px;
|
||
height: 56px;
|
||
margin-bottom: 10px;
|
||
padding: 0 12px;
|
||
background-image: linear-gradient(270deg, rgba(119,169,255,0.20) 0%, rgba(66,112,255,0.50) 100%);
|
||
border-radius: 4px;
|
||
|
||
&:nth-of-type(2n - 1) {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
& > i {
|
||
position: relative;
|
||
top: 2px;
|
||
font-style: normal;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span {
|
||
font-size: 14px;
|
||
color: rgba(130, 197, 255, 1);
|
||
}
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 8px;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background: #6BA3DB;
|
||
|
||
i {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.community-info__header--status {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #74FF66;
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
}
|
||
|
||
div:first-child {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
i {
|
||
position: relative;
|
||
margin-right: 2px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
div:last-child {
|
||
color: #fff;
|
||
|
||
span {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.community-info__wrapper {
|
||
padding: 0 20px 40px;
|
||
|
||
.community-info__title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
|
||
h2 {
|
||
position: relative;
|
||
width: 169px;
|
||
padding: 0 20px;
|
||
font-size: 15px;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
background: url(https://cdn.cunwuyun.cn/dvcp/ply/title-bg.png) no-repeat;
|
||
background-size: 169px 30px;
|
||
background-position-y: -5px;
|
||
background-position-x: -10px;
|
||
}
|
||
|
||
span {
|
||
width: 52px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
border-radius: 12px;
|
||
}
|
||
}
|
||
|
||
.community-info__item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 40px;
|
||
padding: 0 12px;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
background: transparent;
|
||
|
||
&:nth-of-type(2n) {
|
||
background-image: linear-gradient(270deg, rgba(119,169,255,0.20) 0%, rgba(66,112,255,0.50) 100%);
|
||
}
|
||
|
||
span {
|
||
max-width: 70%;
|
||
text-align: right;
|
||
}
|
||
|
||
label {
|
||
flex-shrink: 1;
|
||
color: rgba(130, 197, 255, 1);
|
||
}
|
||
}
|
||
|
||
&.community-info__wrapper--last {
|
||
.community-info__item {
|
||
background: #fff;
|
||
|
||
&:nth-of-type(2n) {
|
||
background: #F3F6F9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep( .ol-zoom ){
|
||
display: none !important;
|
||
top: inherit !important;
|
||
bottom: 0.5em !important;
|
||
}
|
||
|
||
div {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#map {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
:deep( .amap-logo), :deep( .amap-copyright ){
|
||
display: none !important;
|
||
}
|
||
|
||
:deep( .amap-icon ){
|
||
width: 40px !important;
|
||
height: 40px !important;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.no-more {
|
||
display: block;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
margin-top: 2px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #999;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.community {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
height: 28px;
|
||
padding: 0 10px;
|
||
background: #0F8F64;
|
||
border-radius: 26px;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
|
||
&.color1 {
|
||
background: #2266FF;
|
||
|
||
em:after {
|
||
border-top-color: #2266FF !important;
|
||
}
|
||
}
|
||
|
||
&.color2 {
|
||
background: #F46159;
|
||
|
||
em:after {
|
||
border-top-color: #F46159 !important;
|
||
}
|
||
}
|
||
|
||
em {
|
||
position: absolute;
|
||
bottom: -6px;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
|
||
&::after {
|
||
position: absolute;
|
||
bottom: -6px;
|
||
left: 0;
|
||
width: 0;
|
||
height: 0;
|
||
border: 6px solid #0F8F64;
|
||
border-bottom-color: transparent;
|
||
border-left-color: transparent;
|
||
border-right-color: transparent;
|
||
transform: translate(-50%, 0);
|
||
overflow: hidden;
|
||
content: ' ';
|
||
}
|
||
}
|
||
|
||
i {
|
||
padding-right: 2px;
|
||
position: relative;
|
||
color: #ffc928;
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
:deep( .polymeric ){
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 62px;
|
||
height: 62px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
&.polymeric-active {
|
||
.polymeric-container {
|
||
background: #F46159;
|
||
}
|
||
|
||
&::after {
|
||
background-color: #F46159;
|
||
}
|
||
}
|
||
|
||
&::after {
|
||
position: absolute;
|
||
z-index: -1;
|
||
width: 62px;
|
||
height: 62px;
|
||
border-radius: 50%;
|
||
-webkit-animation: warn 1s ease-out 0s infinite;
|
||
animation: warn 1s ease-out 0s infinite;
|
||
background-color: rgba(15, 143, 100, 1);
|
||
transform: translate(-50%, -50%);
|
||
content: " ";
|
||
}
|
||
|
||
.polymeric-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 62px;
|
||
height: 62px;
|
||
border-radius: 50%;
|
||
background: rgba(15, 143, 100, 1);
|
||
|
||
p {
|
||
text-align: center;
|
||
width: 58px;
|
||
color: #fff;
|
||
font-size: 18px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
p:first-child{
|
||
font-size: 14px;
|
||
}
|
||
|
||
h2 {
|
||
color: #fff;
|
||
font-weight: normal;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep( .mark){
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
user-select: none;
|
||
cursor: pointer;
|
||
width: 56px;
|
||
height: 56px;
|
||
background: rgba(108,94,14,0.80);
|
||
border: 1px solid #FFDF54;
|
||
box-shadow: 0 4px 4px 0 #000000, inset 0 0 8px 4px #D1A818;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
text-shadow: 0 2px 4px rgba(0,0,0,0.50);
|
||
|
||
&.mark0 {
|
||
background: rgba(8,73,35,0.80);
|
||
border: 1px solid #22FF81;
|
||
box-shadow: 0 4px 4px 0 #000000, inset 0 0 8px 4px #15BE55;
|
||
}
|
||
|
||
&.mark1 {
|
||
background: rgba(79,14,7,0.80);
|
||
border: 1px solid #FF6969;
|
||
box-shadow: 0 4px 4px 0 #000000, inset 0 0 8px 4px #C60E0E;
|
||
}
|
||
|
||
&.mark2 {
|
||
background: rgba(96,8,102,0.80);
|
||
border: 1px solid #FF69DD;
|
||
box-shadow: 0 4px 4px 0 #000000, inset 0 0 8px 4px #C312CA;
|
||
}
|
||
|
||
.mark-contaienr {
|
||
width: 56px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
}
|
||
|
||
// &.mark1::after {
|
||
// position: absolute;
|
||
// z-index: -1;
|
||
// width: 100px;
|
||
// height: 100px;
|
||
// border-radius: 50%;
|
||
// -webkit-animation: warn 1s ease-out 0s infinite;
|
||
// animation: warn 1s ease-out 0s infinite;
|
||
// background-color: #FF6969;
|
||
// transform: translate(-50%, -50%);
|
||
// content: " ";
|
||
// }
|
||
|
||
// &.mark2::after {
|
||
// position: absolute;
|
||
// z-index: -1;
|
||
// width: 100px;
|
||
// height: 100px;
|
||
// border-radius: 50%;
|
||
// -webkit-animation: warn 1s ease-out 0s infinite;
|
||
// animation: warn 1s ease-out 0s infinite;
|
||
// background-color: #FF69DD;
|
||
// transform: translate(-50%, -50%);
|
||
// content: " ";
|
||
// }
|
||
}
|
||
|
||
@-webkit-keyframes warn {
|
||
0% {
|
||
transform: scale(.5);
|
||
opacity: 1
|
||
}
|
||
|
||
30% {
|
||
opacity: .5
|
||
}
|
||
|
||
to {
|
||
transform: scale(1.8);
|
||
opacity: 0
|
||
}
|
||
}
|
||
|
||
@keyframes warn {
|
||
0% {
|
||
transform: scale(.5);
|
||
opacity: 1
|
||
}
|
||
|
||
30% {
|
||
opacity: .5
|
||
}
|
||
|
||
to {
|
||
transform: scale(1.4);
|
||
opacity: 0
|
||
}
|
||
}
|
||
</style>
|