wjl61901
1 year ago
commit
ca17ab28c3
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 383 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 206 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 223 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 940 B |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 503 B |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 140 KiB |
|
After Width: | Height: | Size: 170 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
@ -1,51 +1,402 @@
|
||||
<template>
|
||||
<div class="build_body">
|
||||
<div class="build_body" v-if="play">
|
||||
<!-- 头部 -->
|
||||
<div class="X1" @click="deleteinfo"></div>
|
||||
<div class="build_title">
|
||||
<div class="header_icon"></div>
|
||||
<div class="title_text">楼栋信息</div>
|
||||
</div>
|
||||
<!-- 模块内容 -->
|
||||
<div class="build_box">
|
||||
<div class="build_box_left"></div>
|
||||
<div>
|
||||
<div class="build_box_left">地址</div>
|
||||
<div class="build_box_left">所在网络</div>
|
||||
<div class="build_box_left">所在警务区</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="build_box_for"
|
||||
v-for="(item, index) in boxlist"
|
||||
:key="index"
|
||||
>
|
||||
<div class="build_box_right">{{ item.place }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 实有房屋 -->
|
||||
<ActualBuildingVue></ActualBuildingVue>
|
||||
<!-- 实有人口标题 -->
|
||||
<ActualPeopleVue></ActualPeopleVue>
|
||||
<!-- 房屋结构 -->
|
||||
<div class="structure">
|
||||
<div class="structure_icon"></div>
|
||||
<div class="structure_title">房屋结构</div>
|
||||
</div>
|
||||
<!-- 房屋类型 -->
|
||||
<div class="structure_type">
|
||||
<div class="type_name">房屋类型:</div>
|
||||
<div class="type_list">
|
||||
<div class="list1">-出租</div>
|
||||
<div class="list2">-住宅</div>
|
||||
<div class="list3">-商用</div>
|
||||
<div class="list4">-空置</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 1-5楼的按钮标签 -->
|
||||
<div class="floor">1-{{ floorlist.length }}楼</div>
|
||||
<!-- 彩色楼层 -->
|
||||
<div class="color_floor">
|
||||
<div
|
||||
class="color_floor_list"
|
||||
v-for="(item, index) in floorlist"
|
||||
:key="index"
|
||||
>
|
||||
<div class="f1">{{ item.floor1 }}</div>
|
||||
<div
|
||||
@click="floorinfo"
|
||||
class="f2"
|
||||
:style="{ backgroundImage: back_change1(item.type) }"
|
||||
>
|
||||
{{ item.floor2 }}
|
||||
</div>
|
||||
<div class="f3" :style="{ backgroundImage: back_change2(item.type1) }">
|
||||
{{ item.floor3 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
import ActualBuildingVue from './actualBuilding.vue'
|
||||
import ActualPeopleVue from './actualPeople.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ActualBuildingVue,
|
||||
ActualPeopleVue
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
play: '1',
|
||||
boxlist: [
|
||||
{ name: '地址', place: '射阳县五星街道解放南路110-3号5幢' },
|
||||
{ name: '所在网络', place: '登达花苑社区第八网格' },
|
||||
{ name: '所在警务区', place: '五星派出所第九警务区' }
|
||||
],
|
||||
floorlist: [
|
||||
{
|
||||
floor1: '7楼',
|
||||
floor2: '701室',
|
||||
floor3: '702室',
|
||||
type: '1',
|
||||
type1: '1'
|
||||
},
|
||||
{
|
||||
floor1: '6楼',
|
||||
floor2: '601室',
|
||||
floor3: '602室',
|
||||
type: '2',
|
||||
type1: '3'
|
||||
},
|
||||
{
|
||||
floor1: '5楼',
|
||||
floor2: '501室',
|
||||
floor3: '502室',
|
||||
type: '4',
|
||||
type1: '2'
|
||||
},
|
||||
{
|
||||
floor1: '4楼',
|
||||
floor2: '401室',
|
||||
floor3: '402室',
|
||||
type: '2',
|
||||
type1: '1'
|
||||
},
|
||||
{
|
||||
floor1: '3楼',
|
||||
floor2: '301室',
|
||||
floor3: '302室',
|
||||
type: '3',
|
||||
type1: '4'
|
||||
},
|
||||
{
|
||||
floor1: '2楼',
|
||||
floor2: '201室',
|
||||
floor3: '202室',
|
||||
type: '1',
|
||||
type1: '2'
|
||||
},
|
||||
{
|
||||
floor1: '1楼',
|
||||
floor2: '101室',
|
||||
floor3: '102室',
|
||||
type: '3',
|
||||
type1: '1'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
back_change1(type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
return `url(${require('@/assets/house-hza/bg22.png')})`
|
||||
case '2':
|
||||
return `url(${require('@/assets/house-hza/bg18.png')})`
|
||||
case '3':
|
||||
return `url(${require('@/assets/house-hza/bg19.png')})`
|
||||
case '4':
|
||||
return `url(${require('@/assets/house-hza/bg20.png')})`
|
||||
}
|
||||
},
|
||||
back_change2(type1) {
|
||||
switch (type1) {
|
||||
case '1':
|
||||
return `url(${require('@/assets/house-hza/bg22.png')})`
|
||||
case '2':
|
||||
return `url(${require('@/assets/house-hza/bg18.png')})`
|
||||
case '3':
|
||||
return `url(${require('@/assets/house-hza/bg19.png')})`
|
||||
case '4':
|
||||
return `url(${require('@/assets/house-hza/bg20.png')})`
|
||||
}
|
||||
},
|
||||
floorinfo() {
|
||||
console.log(123)
|
||||
this.$emit('floorinfo')
|
||||
},
|
||||
deleteinfo() {
|
||||
this.play = !this.play
|
||||
this.$emit('deleteinfo')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.people_type_list {
|
||||
font-size: 12px;
|
||||
}
|
||||
.type_number {
|
||||
font-size: 12px;
|
||||
margin-top: 0.5vh;
|
||||
margin-left: 2vw;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.build_body {
|
||||
width: 20vw;
|
||||
height: 15vh;
|
||||
background-color: #fff;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.X1 {
|
||||
width: 0.8vw;
|
||||
height: 1.8vh;
|
||||
// background-color: #fff;
|
||||
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: 20vw;
|
||||
width: 18vw;
|
||||
height: 3.5vh;
|
||||
display: flex;
|
||||
.header_icon {
|
||||
width: 1vw;
|
||||
height: 2vh;
|
||||
background-color: pink;
|
||||
margin-left: 1vw;
|
||||
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: 2vw;
|
||||
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_box {
|
||||
width: 20vw;
|
||||
height: 11.5vh;
|
||||
background-color: orange;
|
||||
margin-top: 1vh;
|
||||
width: 18vw;
|
||||
height: 12vh;
|
||||
margin-left: 1vw;
|
||||
display: flex;
|
||||
// background-color: #fff;
|
||||
.build_box_left {
|
||||
width: 5vw;
|
||||
height: 3.5vh;
|
||||
background-color: #04548a;
|
||||
padding-left: 0.5vw;
|
||||
color: antiquewhite;
|
||||
padding-top: 0.5vh;
|
||||
margin-bottom: 0.5vh;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
.build_box_for {
|
||||
// background-color: orange;
|
||||
width: 4vw;
|
||||
|
||||
.build_box_right {
|
||||
width: 13vw;
|
||||
height: 3.5vh;
|
||||
font-size: 12px;
|
||||
background-image: url(@/assets/house-hza/bg10.png);
|
||||
background-size: 100% 100%;
|
||||
// padding-top: 1vh;
|
||||
padding-left: 0.5vw;
|
||||
color: antiquewhite;
|
||||
margin-bottom: 0.5vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.structure {
|
||||
width: 18vw;
|
||||
height: 4vh;
|
||||
// background-color: orange;
|
||||
margin-left: 1vw;
|
||||
display: flex;
|
||||
|
||||
margin-top: 1vh;
|
||||
.structure_icon {
|
||||
width: 1vw;
|
||||
height: 2.2vh;
|
||||
background-image: url(@/assets/house-hza/bg17.png);
|
||||
background-size: 100% 100%;
|
||||
// background-color: pink;
|
||||
margin-top: 0.6vh;
|
||||
}
|
||||
.structure_title {
|
||||
color: antiquewhite;
|
||||
margin-left: 1vw;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 4vh;
|
||||
text-shadow: 0px 0px 10px #0b4672;
|
||||
letter-spacing: 2px;
|
||||
// background-color: #fff;
|
||||
}
|
||||
}
|
||||
.structure_type {
|
||||
height: 2vh;
|
||||
width: 18vw;
|
||||
// background-color: pink;
|
||||
margin-left: 1vw;
|
||||
display: flex;
|
||||
.type_name {
|
||||
width: 4vw;
|
||||
height: 2vh;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.type_list {
|
||||
width: 8vw;
|
||||
height: 2vh;
|
||||
// background-color: blueviolet;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
justify-content: space-between;
|
||||
.list1 {
|
||||
color: #00f5ff;
|
||||
}
|
||||
.list2 {
|
||||
color: #37fdc7;
|
||||
}
|
||||
.list3 {
|
||||
color: #ffc426;
|
||||
}
|
||||
.list4 {
|
||||
color: #ff4042;
|
||||
}
|
||||
}
|
||||
}
|
||||
.floor {
|
||||
width: 3.5vw;
|
||||
height: 2.5vh;
|
||||
background-color: #015f9c;
|
||||
margin-left: 1vw;
|
||||
margin-top: 1vh;
|
||||
color: #ecf4f9;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 2.5vh;
|
||||
justify-content: center;
|
||||
}
|
||||
.color_floor {
|
||||
width: 18vw;
|
||||
height: 15vh;
|
||||
margin-left: 1vw;
|
||||
overflow-y: auto;
|
||||
color: #fff;
|
||||
margin-top: 1vh;
|
||||
/* 定义滚动条样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #0b88cd;
|
||||
}
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(240, 240, 240, 0.5);
|
||||
}
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 0px rgba(37, 74, 237, 0.379);
|
||||
background-color: #043a61;
|
||||
}
|
||||
|
||||
.color_floor_list {
|
||||
width: 9vw;
|
||||
height: 3vh;
|
||||
// background-color: blueviolet;
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.f1 {
|
||||
font-size: 12px;
|
||||
}
|
||||
.f2 {
|
||||
width: 3vw;
|
||||
height: 2vh;
|
||||
font-size: 12px;
|
||||
margin-left: 0.5vw;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.f3 {
|
||||
width: 3vw;
|
||||
height: 2vh;
|
||||
background-size: 100% 100%;
|
||||
font-size: 12px;
|
||||
margin-left: 0.5vw;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,448 @@
|
||||
<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"
|
||||
v-for="(item, index) in boxlist"
|
||||
:key="index"
|
||||
>
|
||||
<div class="build_box_left">{{ item.name }}</div>
|
||||
<div
|
||||
class="build_box_right"
|
||||
:style="{ color: back_change(item.type) }"
|
||||
>
|
||||
{{ item.place }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 房主信息 -->
|
||||
<div class="build_title">
|
||||
<div class="header_icon"></div>
|
||||
<div class="title_text">房主信息</div>
|
||||
</div>
|
||||
<!-- 照片信息 -->
|
||||
<div class="housepeople_info">
|
||||
<div class="housepeople_info_left"></div>
|
||||
<div class="housepeople_info_right">
|
||||
<!-- -->
|
||||
<div
|
||||
class="info_right_for"
|
||||
v-for="(item, index) in namelist"
|
||||
:key="index"
|
||||
>
|
||||
<div class="for_left">{{ item.name }}</div>
|
||||
<div class="for_right">{{ item.place }}</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 实有人口 重点人员 户在人不在 -->
|
||||
<div class="people_bottom">
|
||||
<div class="people1_text">常驻人口</div>
|
||||
<div class="people1_number">5</div>
|
||||
</div>
|
||||
<div class="people1">
|
||||
<div class="dit"></div>
|
||||
<div class="people1_text">常驻人口</div>
|
||||
<div class="people1_number">5</div>
|
||||
</div>
|
||||
<div class="people1">
|
||||
<div class="dit"></div>
|
||||
<div class="people1_text">常驻人口</div>
|
||||
<div class="people1_number">5</div>
|
||||
</div>
|
||||
<!-- 滚动 -->
|
||||
<div class="roll_body">
|
||||
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
|
||||
<li v-for="item in roll_list" :key="item.id">
|
||||
<div class="roll_item_left">
|
||||
<div class="roll_item_pic">
|
||||
<img src="item.userPic" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="roll_item_right">
|
||||
<div class="person_type one_type">
|
||||
{{ item.type }}
|
||||
</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">
|
||||
{{ item.idcard }}
|
||||
</div>
|
||||
<div class="right_value_item">
|
||||
{{ item.houseHoldAddress }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FloorInform',
|
||||
data() {
|
||||
return {
|
||||
show: 'true',
|
||||
animateUp: false,
|
||||
boxlist: [
|
||||
{ name: '地址', place: '射阳县五星街道解放南路110-3号5幢' },
|
||||
{ name: '所在警务区', place: '住宅', type: '1' },
|
||||
{ name: '所在警务区', place: '出租', type: '2' },
|
||||
{ name: '所在警务区', place: '五星派出所第九警务区' }
|
||||
],
|
||||
namelist: [
|
||||
{ name: '姓名', place: '张三' },
|
||||
{ name: '联系电话', place: '13201754831' },
|
||||
{ name: '证件号码', place: '320723199912300059' },
|
||||
{ name: '户籍地址', place: '登达花苑社区西路' }
|
||||
],
|
||||
roll_list: [
|
||||
{
|
||||
username: '张三',
|
||||
phone: '13201754289',
|
||||
idcard: '320723199912300052',
|
||||
houseHoldAddress: '登达花苑社区西路'
|
||||
},
|
||||
{
|
||||
username: '张三',
|
||||
phone: '13201754289',
|
||||
idcard: '320723199912300052',
|
||||
houseHoldAddress: '登达花苑社区西路'
|
||||
},
|
||||
{
|
||||
username: '张三',
|
||||
phone: '13201754289',
|
||||
idcard: '320723199912300052',
|
||||
houseHoldAddress: '登达花苑社区西路'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.timer = setInterval(this.scrollAnimate, 2500)
|
||||
},
|
||||
methods: {
|
||||
back_change(type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
return `#37FDC7`
|
||||
case '2':
|
||||
return `#00F5FF`
|
||||
}
|
||||
},
|
||||
scrollAnimate() {
|
||||
this.animateUp = true
|
||||
setTimeout(() => {
|
||||
this.roll_list.push(this.roll_list[0])
|
||||
this.roll_list.shift()
|
||||
this.animateUp = false
|
||||
}, 500)
|
||||
},
|
||||
deleteinfo() {
|
||||
console.log(123)
|
||||
this.show = !this.show
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add {
|
||||
width: 20vw;
|
||||
height: 72vh;
|
||||
// background-color: #fff;
|
||||
background-image: url(../../../assets/house-hza/bg7.png);
|
||||
background-size: 100% 100%;
|
||||
padding-left: 1vw;
|
||||
.X2 {
|
||||
width: 0.8vw;
|
||||
height: 1.8vh;
|
||||
// background-color: #fff;
|
||||
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;
|
||||
// background-color: #fff;
|
||||
margin-top: 1vh;
|
||||
display: flex;
|
||||
margin-bottom: 1vh;
|
||||
.picture_left {
|
||||
width: 6vw;
|
||||
height: 18vh;
|
||||
background-color: pink;
|
||||
text-align: center;
|
||||
}
|
||||
.picture_right {
|
||||
width: 11.5vw;
|
||||
height: 18vh;
|
||||
// background-color: blue;
|
||||
margin-left: 0.5vw;
|
||||
|
||||
.build_box_for {
|
||||
display: flex;
|
||||
margin-bottom: 0.5vh;
|
||||
.build_box_left {
|
||||
width: 5vw;
|
||||
height: 3.2vh;
|
||||
background-color: #04548a;
|
||||
padding-left: 0.5vw;
|
||||
color: antiquewhite;
|
||||
padding-top: 0.5vh;
|
||||
font-size: 12px;
|
||||
// text-align: center;
|
||||
}
|
||||
.build_box_right {
|
||||
// background-color: #fff;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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-color: orange;
|
||||
}
|
||||
.housepeople_info_right {
|
||||
width: 13vw;
|
||||
height: 11vh;
|
||||
// background-color: pink;
|
||||
padding-left: 0.5vw;
|
||||
}
|
||||
.info_right_for {
|
||||
height: 2vh;
|
||||
width: 12.5vw;
|
||||
// background-color: blue;
|
||||
display: flex;
|
||||
margin-bottom: 1vh;
|
||||
.for_left {
|
||||
width: 3.5vw;
|
||||
height: 2vh;
|
||||
// background-color: orange;
|
||||
color: #ecf4f9;
|
||||
}
|
||||
.for_right {
|
||||
height: 2vh;
|
||||
width: 8vw;
|
||||
// background-color: #fff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.people_bottom {
|
||||
width: 18vw;
|
||||
height: 4vh;
|
||||
// background-color: orange;
|
||||
margin-left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 1vh;
|
||||
.people1 {
|
||||
width: 5.5vw;
|
||||
height: 4vh;
|
||||
// background-color: #fff;
|
||||
background-image: url(@/assets/house-hza/bg-6.png);
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
.people1_text {
|
||||
font-size: 12px;
|
||||
margin-top: 1vh;
|
||||
margin-left: 0.2vw;
|
||||
color: #ffffff;
|
||||
}
|
||||
.people1_number {
|
||||
margin-left: 0.8vw;
|
||||
margin-top: 0.5vh;
|
||||
font-size: 1.3rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.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;
|
||||
// background: #00f5ff;
|
||||
overflow: hidden;
|
||||
margin-top: 1vh;
|
||||
.marquee-list {
|
||||
width: 18vw;
|
||||
height: 24vh;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: 12vh;
|
||||
background: url('../../../assets/house-hza/bg-6.png');
|
||||
|
||||
background-size: 100% 100%;
|
||||
// margin-top: 1vh;
|
||||
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;
|
||||
background: #0b4672;
|
||||
margin-top: 1vh;
|
||||
// margin-top: 0.5vh;
|
||||
}
|
||||
}
|
||||
.roll_item_right {
|
||||
width: 14vw;
|
||||
height: 9vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
// background-color: #fff;
|
||||
|
||||
.person_type {
|
||||
position: absolute;
|
||||
width: 3vw;
|
||||
height: 2vh;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
color: #061122;
|
||||
text-align: center;
|
||||
line-height: 2vh;
|
||||
}
|
||||
.one_type {
|
||||
background: #ffc426;
|
||||
}
|
||||
.two_type {
|
||||
background: #00f5ff;
|
||||
}
|
||||
.three_type {
|
||||
background: #a357ff;
|
||||
}
|
||||
.right_text {
|
||||
width: 5vw;
|
||||
height: 9vh;
|
||||
// background-color: #fff;
|
||||
.right_text_item {
|
||||
width: 5vw;
|
||||
// margin-bottom: 1vh;
|
||||
height: 2.6vh;
|
||||
color: #ecf4f9;
|
||||
font-size: 10px;
|
||||
// text-align: center;
|
||||
// line-height: 2.6vh;
|
||||
}
|
||||
}
|
||||
.right_value {
|
||||
width: 8vw;
|
||||
height: 10vh;
|
||||
.right_value_item {
|
||||
width: 8vw;
|
||||
height: 2.6vh;
|
||||
color: #edf1f7;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
// line-height: 2.6vh;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.animate-up {
|
||||
transition: all 0.8s ease-in-out;
|
||||
transform: translateY(-20vh);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue