独树的风
10 months ago
parent
bf1be358e4
commit
0c6c9b0c01
@ -0,0 +1,553 @@
|
|||||||
|
<template>
|
||||||
|
<div class="add" v-if="show">
|
||||||
|
<!-- 户室信息 -->
|
||||||
|
<div class="X2" @click="deleteinfo"></div>
|
||||||
|
<div class="build_title">
|
||||||
|
<div class="header_icon"></div>
|
||||||
|
<div class="title_text">户室信息</div>
|
||||||
|
</div>
|
||||||
|
<!-- 室内图片 -->
|
||||||
|
<div class="build_picture">
|
||||||
|
<div class="picture_left"></div>
|
||||||
|
<div class="picture_right">
|
||||||
|
<div class="build_box_for">
|
||||||
|
<div class="left">
|
||||||
|
<div class="build_box_left">地址</div>
|
||||||
|
<div class="build_box_left">所在网格</div>
|
||||||
|
<div class="build_box_left">房屋类型</div>
|
||||||
|
<div class="build_box_left">是否出租</div>
|
||||||
|
<div class="build_box_left">所在警务区</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div
|
||||||
|
class="build_box_right"
|
||||||
|
:style="{ color: back_change() }"
|
||||||
|
:title="roll_list.homeInfo.address"
|
||||||
|
>
|
||||||
|
{{ roll_list.homeInfo.address }}
|
||||||
|
</div>
|
||||||
|
<div class="build_box_right" :style="{ color: back_change() }">
|
||||||
|
{{ houseValue.policeStationCode || '320924760101' }}
|
||||||
|
</div>
|
||||||
|
<div class="build_box_right" :style="{ color: back_change('1') }">
|
||||||
|
{{ roll_list.homeInfo.type }}
|
||||||
|
</div>
|
||||||
|
<div class="build_box_right" :style="{ color: back_change('2') }">
|
||||||
|
{{ roll_list.homeInfo.isRent }}
|
||||||
|
</div>
|
||||||
|
<div class="build_box_right" :style="{ color: back_change() }">
|
||||||
|
{{ houseValue.policeDistrictCode || '320924760101' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 房主信息 -->
|
||||||
|
<div class="build_title">
|
||||||
|
<div class="header_icon"></div>
|
||||||
|
<div class="title_text">房主信息</div>
|
||||||
|
</div>
|
||||||
|
<!-- 照片信息 -->
|
||||||
|
<div class="housepeople_info">
|
||||||
|
<img
|
||||||
|
v-if="roll_list.actualUserInfo?.userPic"
|
||||||
|
class="housepeople_info_left"
|
||||||
|
:src="baseUrl + roll_list.actualUserInfo.userPic"
|
||||||
|
/>
|
||||||
|
<img v-else class="housepeople_info_left" :src="img" />
|
||||||
|
<div class="housepeople_info_right">
|
||||||
|
<div class="info_right_for">
|
||||||
|
<div class="for_left">姓名</div>
|
||||||
|
<div class="for_right">
|
||||||
|
{{ roll_list.actualUserInfo?.userName || '' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info_right_for">
|
||||||
|
<div class="for_left">联系电话</div>
|
||||||
|
<div class="for_right">
|
||||||
|
{{ roll_list.actualUserInfo?.phone || '' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info_right_for">
|
||||||
|
<div class="for_left">证件号码</div>
|
||||||
|
<div
|
||||||
|
class="for_right"
|
||||||
|
@click="jumpRecord(roll_list.actualUserInfo?.idCard)"
|
||||||
|
>
|
||||||
|
{{ roll_list.actualUserInfo?.idCard || '' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info_right_for">
|
||||||
|
<div class="for_left">户籍地址</div>
|
||||||
|
<div class="for_right">
|
||||||
|
{{ roll_list.actualUserInfo?.houseHoldAddress || '' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 实有人口 重点人员 户在人不在 -->
|
||||||
|
<div class="people_bottom">
|
||||||
|
<div class="people1">
|
||||||
|
<div class="dit"></div>
|
||||||
|
<div class="people1_text">实有人口</div>
|
||||||
|
<div class="people1_number">
|
||||||
|
{{ roll_list.userInfos === null ? 0 : roll_list.userInfos.length }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="people1">
|
||||||
|
<div class="dit"></div>
|
||||||
|
<div class="people1_text">重点人员</div>
|
||||||
|
<div class="people1_number">
|
||||||
|
{{
|
||||||
|
roll_list.impUserInfos === null ? 0 : roll_list.impUserInfos.length
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="people1">
|
||||||
|
<div class="dit"></div>
|
||||||
|
<div class="people1_text">户在人不在</div>
|
||||||
|
<div class="people1_number">
|
||||||
|
{{
|
||||||
|
roll_list.householdInUserInfos === null
|
||||||
|
? 0
|
||||||
|
: roll_list.householdInUserInfos.length
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 滚动 -->
|
||||||
|
<div class="roll_body" v-if="roll_list.userInfos !== null">
|
||||||
|
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
|
||||||
|
<li
|
||||||
|
v-for="item in roll_list.userInfos"
|
||||||
|
:key="item.id"
|
||||||
|
@mouseenter="stop()"
|
||||||
|
@mouseleave="start()"
|
||||||
|
>
|
||||||
|
<div class="roll_item_left">
|
||||||
|
<div class="roll_item_pic">
|
||||||
|
<img
|
||||||
|
class="peopleImg"
|
||||||
|
:src="item.userPic ? `${baseUrl + item.userPic}` : img"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="roll_item_right">
|
||||||
|
<div class="person_type one_type" v-if="item.actualUserTypeCn">
|
||||||
|
{{ item.actualUserTypeCn }}
|
||||||
|
</div>
|
||||||
|
<!-- 信息展示 -->
|
||||||
|
<div class="right_text">
|
||||||
|
<div class="right_text_item">人员姓名:</div>
|
||||||
|
<div class="right_text_item">联系电话:</div>
|
||||||
|
<div class="right_text_item">证件号码:</div>
|
||||||
|
<div class="right_text_item">户籍地址:</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_value">
|
||||||
|
<div class="right_value_item">{{ item.userName }}</div>
|
||||||
|
<div class="right_value_item">{{ item.phone }}</div>
|
||||||
|
<div class="right_value_item" @click="jumpRecord(item.idCard)">
|
||||||
|
{{ item.idCard }}
|
||||||
|
</div>
|
||||||
|
<div class="right_value_item">
|
||||||
|
{{ item.houseHoldAddress }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="roll_body" v-else>
|
||||||
|
<ul class="marquee-list">
|
||||||
|
<li>
|
||||||
|
<div class="roll_item_left">
|
||||||
|
<div class="roll_item_pic">
|
||||||
|
<img class="peopleImg" :src="img" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="roll_item_right">
|
||||||
|
<div class="right_text">
|
||||||
|
<div class="right_text_item">人员姓名:</div>
|
||||||
|
<div class="right_text_item">联系电话:</div>
|
||||||
|
<div class="right_text_item">证件号码:</div>
|
||||||
|
<div class="right_text_item">户籍地址:</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_value">
|
||||||
|
<div class="right_value_item"></div>
|
||||||
|
<div class="right_value_item"></div>
|
||||||
|
<div class="right_value_item"></div>
|
||||||
|
<div class="right_value_item"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { jumpSyetem } from '@/utils/jumpSystem'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'FloorInform',
|
||||||
|
props: {
|
||||||
|
houseValue: {
|
||||||
|
type: Object
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
animateUp: false,
|
||||||
|
baseUrl: 'http://50.146.63.224:8118',
|
||||||
|
roll_list: {},
|
||||||
|
img: require('@/assets/picture/icon_householder.png'),
|
||||||
|
timer: null,
|
||||||
|
unit: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
open(val, roomInfo) {
|
||||||
|
console.log(val, roomInfo, '户室组件接收的数据')
|
||||||
|
this.unit = val
|
||||||
|
this.roll_list = roomInfo
|
||||||
|
this.show = true
|
||||||
|
if (roomInfo.userInfos && roomInfo.userInfos.length > 2) {
|
||||||
|
this.clearTimer()
|
||||||
|
this.scrollAnimate()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
back_change(type) {
|
||||||
|
switch (type) {
|
||||||
|
case '1':
|
||||||
|
return `#37FDC7`
|
||||||
|
case '2':
|
||||||
|
return `#00F5FF`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scrollAnimate() {
|
||||||
|
console.log(
|
||||||
|
this.roll_list.userInfos !== null && this.roll_list.userInfos.length > 2
|
||||||
|
)
|
||||||
|
if (
|
||||||
|
this.roll_list.userInfos !== null &&
|
||||||
|
this.roll_list.userInfos.length > 2
|
||||||
|
) {
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this.animateUp = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.roll_list.userInfos.push(this.roll_list.userInfos[0])
|
||||||
|
this.roll_list.userInfos.shift()
|
||||||
|
this.animateUp = false
|
||||||
|
}, 500)
|
||||||
|
}, 4000)
|
||||||
|
} else {
|
||||||
|
this.timer = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clearTimer() {
|
||||||
|
if (this.timer) {
|
||||||
|
clearInterval(this.timer)
|
||||||
|
this.timer = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deleteinfo() {
|
||||||
|
this.show = false
|
||||||
|
clearInterval(this.timer)
|
||||||
|
},
|
||||||
|
stop() {
|
||||||
|
clearInterval(this.timer)
|
||||||
|
},
|
||||||
|
start() {
|
||||||
|
if (this.roll_list.userInfos && this.roll_list.userInfos.length > 2) {
|
||||||
|
this.scrollAnimate()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
jumpRecord(card) {
|
||||||
|
jumpSyetem(card)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.clearTimer()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.add {
|
||||||
|
position: absolute;
|
||||||
|
top: 0vh;
|
||||||
|
left: 20vw;
|
||||||
|
width: 20vw;
|
||||||
|
height: 72vh;
|
||||||
|
background: $popupBack url('@/assets/house-hza/bg7.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding-left: 1vw;
|
||||||
|
|
||||||
|
.X2 {
|
||||||
|
width: 0.8vw;
|
||||||
|
height: 1.8vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.5vh;
|
||||||
|
right: 0.5vw;
|
||||||
|
background-image: url('@/assets/house-hza/bg9.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
&:hover {
|
||||||
|
background-color: #07e2d0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.build_title {
|
||||||
|
width: 18vw;
|
||||||
|
height: 3.5vh;
|
||||||
|
display: flex;
|
||||||
|
.header_icon {
|
||||||
|
width: 1vw;
|
||||||
|
height: 2vh;
|
||||||
|
margin-top: 1.7vh;
|
||||||
|
background-image: url('@/assets/house-hza/bg17.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.title_text {
|
||||||
|
width: 20vw;
|
||||||
|
height: 3.5vh;
|
||||||
|
color: antiquewhite;
|
||||||
|
margin-left: 1vw;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 3.5vh;
|
||||||
|
text-shadow: 0px 0px 10px #0b4672;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-top: 1vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.build_picture {
|
||||||
|
width: 18vw;
|
||||||
|
height: 18vh;
|
||||||
|
margin-top: 1vh;
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
.picture_left {
|
||||||
|
width: 6vw;
|
||||||
|
height: 18vh;
|
||||||
|
background: url('@/assets/icon_house_slices/icon_house@2x.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.picture_right {
|
||||||
|
width: 11.5vw;
|
||||||
|
height: 18vh;
|
||||||
|
margin-left: 0.5vw;
|
||||||
|
|
||||||
|
.build_box_for {
|
||||||
|
display: flex;
|
||||||
|
width: 11vw;
|
||||||
|
.left {
|
||||||
|
width: 4vw;
|
||||||
|
height: 18vh;
|
||||||
|
}
|
||||||
|
.build_box_left {
|
||||||
|
width: 4vw;
|
||||||
|
height: 3.2vh;
|
||||||
|
background-color: #04548a;
|
||||||
|
padding-left: 0.5vw;
|
||||||
|
color: antiquewhite;
|
||||||
|
padding-top: 0.5vh;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.build_box_right {
|
||||||
|
width: 7.5vw;
|
||||||
|
height: 3.2vh;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
background-image: url('@/assets/house-hza/bg10.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding-top: 0.5vh;
|
||||||
|
padding-left: 0.5vw;
|
||||||
|
color: antiquewhite;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.housepeople_info {
|
||||||
|
width: 18vw;
|
||||||
|
height: 13vh;
|
||||||
|
background-color: #05385d;
|
||||||
|
margin-top: 1vh;
|
||||||
|
padding-top: 1vh;
|
||||||
|
padding-left: 1vh;
|
||||||
|
display: flex;
|
||||||
|
.housepeople_info_left {
|
||||||
|
width: 4vw;
|
||||||
|
height: 11vh;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.housepeople_info_right {
|
||||||
|
width: 13vw;
|
||||||
|
height: 11vh;
|
||||||
|
padding-left: 0.5vw;
|
||||||
|
}
|
||||||
|
.info_right_for {
|
||||||
|
height: 2vh;
|
||||||
|
width: 12.5vw;
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
.for_left {
|
||||||
|
width: 3.5vw;
|
||||||
|
height: 2vh;
|
||||||
|
color: #ecf4f9;
|
||||||
|
}
|
||||||
|
.for_right {
|
||||||
|
height: 2vh;
|
||||||
|
width: 8vw;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.people_bottom {
|
||||||
|
width: 18vw;
|
||||||
|
height: 4vh;
|
||||||
|
margin-left: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 1vh;
|
||||||
|
.people1 {
|
||||||
|
width: 5.5vw;
|
||||||
|
height: 4vh;
|
||||||
|
background-image: url('@/assets/house-hza/bg-6.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
.people1_text {
|
||||||
|
font-size: 0.6vw;
|
||||||
|
margin-top: 1vh;
|
||||||
|
margin-left: 0.2vw;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.people1_number {
|
||||||
|
margin-left: 0.8vw;
|
||||||
|
margin-top: 0.5vh;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dit {
|
||||||
|
width: 0.3vw;
|
||||||
|
height: 0.6vh;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #00f5ff;
|
||||||
|
margin-top: 0.8vw;
|
||||||
|
margin-left: 0.5vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.roll_body {
|
||||||
|
width: 18vw;
|
||||||
|
height: 24vh;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 1vh;
|
||||||
|
.marquee-list {
|
||||||
|
padding: 0;
|
||||||
|
width: 18vw;
|
||||||
|
height: 24vh;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
background: url('@/assets/house-hza/bg-6.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.5vh;
|
||||||
|
.roll_item_left {
|
||||||
|
width: 5vw;
|
||||||
|
height: 11vh;
|
||||||
|
margin-left: 0.5vw;
|
||||||
|
.roll_item_pic {
|
||||||
|
width: 4vw;
|
||||||
|
height: 9vh;
|
||||||
|
margin-top: 1vh;
|
||||||
|
.peopleImg {
|
||||||
|
width: 4vw;
|
||||||
|
height: 9vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.roll_item_right {
|
||||||
|
width: 14vw;
|
||||||
|
height: 9vh;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
.person_type {
|
||||||
|
position: absolute;
|
||||||
|
width: 3.5vw;
|
||||||
|
height: 2vh;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
color: #061122;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2vh;
|
||||||
|
font-size: 0.6vw;
|
||||||
|
}
|
||||||
|
.one_type {
|
||||||
|
background: #ffc426;
|
||||||
|
}
|
||||||
|
.two_type {
|
||||||
|
background: #00f5ff;
|
||||||
|
}
|
||||||
|
.three_type {
|
||||||
|
background: #a357ff;
|
||||||
|
}
|
||||||
|
.right_text {
|
||||||
|
width: 5vw;
|
||||||
|
height: 9vh;
|
||||||
|
.right_text_item {
|
||||||
|
width: 5vw;
|
||||||
|
height: 2.6vh;
|
||||||
|
color: #ecf4f9;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right_value {
|
||||||
|
width: 8vw;
|
||||||
|
height: 10vh;
|
||||||
|
.right_value_item {
|
||||||
|
width: 8vw;
|
||||||
|
height: 2.6vh;
|
||||||
|
color: #edf1f7;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: left;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
&:nth-child(3) {
|
||||||
|
color: #00f5ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-up {
|
||||||
|
transition: all 0.8s ease-in-out;
|
||||||
|
transform: translateY(-20vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
<template>
|
||||||
|
<div class="detail">
|
||||||
|
<div class="contents">
|
||||||
|
<div class="fy-center row">
|
||||||
|
<div class="label fy-center">人员姓名</div>
|
||||||
|
<div class="content line-1">{{ data.impUserName }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="fy-center row">
|
||||||
|
<div class="label fy-center">证件号码</div>
|
||||||
|
<div class="content line-1">{{ data.impUserIdCard }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="fy-center row">
|
||||||
|
<div class="label fy-center">人员类型</div>
|
||||||
|
<div class="content line-1">{{ data.impUserSubTypeCn }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="fy-center row">
|
||||||
|
<div class="label fy-center">定位时间</div>
|
||||||
|
<div class="content line-1">
|
||||||
|
{{ data.kv.定位时间 || data.warningTime }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="fy-center row">
|
||||||
|
<div class="label fy-center">经过位置</div>
|
||||||
|
<div class="content line-1">{{ data}}</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="fy-center row">
|
||||||
|
<div class="label fy-center">活动信息</div>
|
||||||
|
<div class="content line-1">{{ data.activityMessage }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="fy-center row">
|
||||||
|
<div class="label fy-center warning">异常信息</div>
|
||||||
|
<div class="content line-1 warning">{{ data.kv.异常信息 }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
data: Object
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.detail {
|
||||||
|
position: relative;
|
||||||
|
color: white;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
.contents {
|
||||||
|
width: 100%;
|
||||||
|
.row {
|
||||||
|
margin-top: 0.4vh;
|
||||||
|
display: flex;
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 6vw;
|
||||||
|
height: 44px;
|
||||||
|
background-color: #093979;
|
||||||
|
margin-right: 1px;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding-left: 12px;
|
||||||
|
height: 44px;
|
||||||
|
line-height: 44px;
|
||||||
|
background-color: rgba(9, 57, 121, 0.3);
|
||||||
|
&.even {
|
||||||
|
background-color: rgba(9, 57, 121, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
&:last-child .warning {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
&:last-child .line-1 {
|
||||||
|
overflow: auto;
|
||||||
|
text-overflow: clip;
|
||||||
|
white-space: normal;
|
||||||
|
flex: 1;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// .h-144 {
|
||||||
|
// height: 14.4vh;
|
||||||
|
// }
|
||||||
|
// .w-530 {
|
||||||
|
// width: 530px;
|
||||||
|
// }
|
||||||
|
// .ml-12 {
|
||||||
|
// margin-left: 0.6vw;
|
||||||
|
// }
|
||||||
|
// .overflow-auto {
|
||||||
|
// // overflow: auto;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue