|
|
@@ -23,46 +23,35 @@
|
|
|
<div class="center-big-box">
|
|
|
<div class="center-map-big-box" ref="centerBox">
|
|
|
<div class="evacuation-shade-map-big-box"
|
|
|
- v-if="mapData"
|
|
|
- :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;transform: scale('+mapData.zoomData+');margin-top:-'+mapData.height/2+'px;margin-left:-'+mapData.width/2+'px;'">
|
|
|
+ v-if="newMapData"
|
|
|
+ :style="'width:'+newMapData.width+'px;height:'+newMapData.height+'px;transform: scale('+newMapData.zoomData+');margin-top:-'+newMapData.height/2+'px;margin-left:-'+newMapData.width/2+'px;'">
|
|
|
<div class="evacuation-shade-map-box"
|
|
|
- :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;'">
|
|
|
-
|
|
|
- <!--:class="!item.planType && checkSubId ==item.subId ? 'room-type-one':(-->
|
|
|
- <!--item.planType && checkSubId !=item.subId ? 'room-type-two':(-->
|
|
|
- <!--item.planType && checkSubId ==item.subId ? 'room-type-three':(-->
|
|
|
- <!--!item.loginAdmin ? 'room-type-noe':''-->
|
|
|
- <!--)))"-->
|
|
|
+ :style="'width:'+newMapData.width+'px;height:'+newMapData.height+'px;'">
|
|
|
<div class="evacuation-shade-map-for-box for-map-box-one"
|
|
|
- v-for="(item,index) in mapData.mapList" :key="index" v-if="item.type == 1"
|
|
|
- :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
|
|
|
+ v-for="(item,index) in newMapData.mapList" :key="index" v-if="item.type == 1"
|
|
|
+ :style="'background:'+item.classifiedColor+';top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
|
|
|
<div class="evacuation-shade-map-min-box">
|
|
|
<!--名称/实验室名称-->
|
|
|
<el-tooltip class="item" effect="dark"
|
|
|
:content="item.roomType == '-99'?item.roomName:item.subName"
|
|
|
placement="top">
|
|
|
- <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-20)+'px;'">
|
|
|
+ <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-25)+'px;'">
|
|
|
{{item.roomType == '-99'?item.roomName:item.subName}}</p>
|
|
|
</el-tooltip>
|
|
|
<!--编号-->
|
|
|
- <el-tooltip class="item" effect="dark" :content="'('+item.roomNum+')'"
|
|
|
+ <el-tooltip class="item" effect="dark" :content="item.roomNum"
|
|
|
placement="top">
|
|
|
- <p class="map-for-num-p">({{item.roomNum}})</p>
|
|
|
+ <p class="map-for-num-p">{{item.roomNum}}</p>
|
|
|
</el-tooltip>
|
|
|
- <!--门-->
|
|
|
- <div class="position-box"
|
|
|
- :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
|
|
|
- v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
|
|
|
- :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="evacuation-shade-map-for-box for-map-box"
|
|
|
- v-for="(item,indexOne) in mapData.mapList" :key="indexOne" v-if="item.type == 2"
|
|
|
+ v-for="(item,indexOne) in newMapData.mapList" :key="indexOne" v-if="item.type == 2"
|
|
|
:style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
|
|
|
<div class="evacuation-shade-map-min-box"></div>
|
|
|
</div>
|
|
|
<div class="evacuation-shade-map-for-box for-map-box-two"
|
|
|
- v-for="(item,indexTwo) in mapData.mapList" :key="indexTwo" v-if="item.type == 3"
|
|
|
+ v-for="(item,indexTwo) in newMapData.mapList" :key="indexTwo" v-if="item.type == 3"
|
|
|
@click="shadeCheckRoomClick(item)"
|
|
|
:class="item.roomCheckType?'for-map-box-two-check':''"
|
|
|
:style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
|
|
|
@@ -71,6 +60,46 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="center-bottom-max-big-box scrollbar-x-box">
|
|
|
+ <div class="center-bottom-for-big-box" v-if="mapData.mapList[0]"
|
|
|
+ :class="mapData.id==floorId?'checkFloor':''"
|
|
|
+ @click="floorCheck(bigIndex)"
|
|
|
+ v-for="(mapData,bigIndex) in floorList" :key="mapData.id">
|
|
|
+ <div class="center-bottom-for-min-box">
|
|
|
+ <div class="evacuation-shade-map-big-box"
|
|
|
+ :style="'width:'+mapData.minWidth+'px;height:'+mapData.minHeight+'px;transform: scale('+mapData.minZoomData+');margin-top:-'+mapData.minHeight/2+'px;margin-left:-'+mapData.minWidth/2+'px;'">
|
|
|
+ <div class="evacuation-shade-map-box"
|
|
|
+ :style="'width:'+mapData.minWidth+'px;height:'+mapData.minHeight+'px;'">
|
|
|
+ <div class="evacuation-shade-map-for-box for-map-box-one"
|
|
|
+ v-for="(item,index) in mapData.mapList" :key="index" v-if="item.type == 1"
|
|
|
+ :style="'background:'+item.classifiedColor+';top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
|
|
|
+ <div class="evacuation-shade-map-min-box">
|
|
|
+ <!--名称/实验室名称-->
|
|
|
+ <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-25)+'px;'">
|
|
|
+ {{item.roomType == '-99'?item.roomName:item.subName}}</p>
|
|
|
+ <!--编号-->
|
|
|
+ <p class="map-for-num-p">{{item.roomNum}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="evacuation-shade-map-for-box for-map-box"
|
|
|
+ v-for="(item,indexOne) in newMapData.mapList" :key="indexOne" v-if="item.type == 2"
|
|
|
+ :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
|
|
|
+ <div class="evacuation-shade-map-min-box"></div>
|
|
|
+ </div>
|
|
|
+ <div class="evacuation-shade-map-for-box for-map-box-two"
|
|
|
+ v-for="(item,indexTwo) in newMapData.mapList" :key="indexTwo" v-if="item.type == 3"
|
|
|
+ @click="shadeCheckRoomClick(item)"
|
|
|
+ :class="item.roomCheckType?'for-map-box-two-check':''"
|
|
|
+ :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
|
|
|
+ <div class="evacuation-shade-map-min-box"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="max-for-name-p">{{mapData.name}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="center-bottom-for-big-box-position" ref="minForBox"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="right-big-box">
|
|
|
<div class="lv-max-box">
|
|
|
@@ -117,10 +146,13 @@
|
|
|
//小图缩放比例
|
|
|
minZoomData: null,
|
|
|
//地图数据
|
|
|
- mapData:null,
|
|
|
+ newMapData:null,
|
|
|
//地图窗口尺寸
|
|
|
mapBoxWidth:null,
|
|
|
mapBoxHeight:null,
|
|
|
+ //小地图窗口尺寸
|
|
|
+ minMapBoxWidth:null,
|
|
|
+ minMapBoxHeight:null,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -133,7 +165,13 @@
|
|
|
methods: {
|
|
|
//楼栋选择
|
|
|
buildingButton(index,minIndex){
|
|
|
- if(this.campusId != index && minIndex != this.buildingId){
|
|
|
+ console.log('index==',index)
|
|
|
+ console.log('minIndex==',minIndex)
|
|
|
+ console.log('campusId==',this.campusId)
|
|
|
+ console.log('buildingId==',this.buildingId)
|
|
|
+ if(this.campusId == this.buildingOptions[index].id && this.buildingId == this.buildingOptions[index].buildFloorVoList[minIndex].id){
|
|
|
+
|
|
|
+ }else{
|
|
|
this.getBuildOrFloorDetailList(this.buildingOptions[index].id,this.buildingOptions[index].buildFloorVoList[minIndex].id);
|
|
|
}
|
|
|
},
|
|
|
@@ -162,8 +200,13 @@
|
|
|
},
|
|
|
//获取楼层数据
|
|
|
getBuildOrFloorDetailList(campusId,buildingId) {
|
|
|
+ console.log('campusId',campusId)
|
|
|
+ console.log('buildingId',buildingId)
|
|
|
+ let self = this;
|
|
|
this.$set(this,'mapBoxWidth',parseInt(this.$refs.centerBox.getBoundingClientRect().width));
|
|
|
this.$set(this,'mapBoxHeight',parseInt(this.$refs.centerBox.getBoundingClientRect().height));
|
|
|
+ this.$set(this,'minMapBoxWidth',parseInt(this.$refs.minForBox.getBoundingClientRect().width));
|
|
|
+ this.$set(this,'minMapBoxHeight',parseInt(this.$refs.minForBox.getBoundingClientRect().height));
|
|
|
getBuildOrFloorDetailList({parentId : buildingId}).then((response) => {
|
|
|
if (response.code == 200) {
|
|
|
let list = [];
|
|
|
@@ -196,12 +239,21 @@
|
|
|
minList[x].typeId = response.data[i].buildFloorLayoutVoList[o].typeId;
|
|
|
}
|
|
|
}
|
|
|
+ for(let o=0;o<self.lvList.length;o++){
|
|
|
+ if(minList[x].classifiedId == self.lvList[o].id){
|
|
|
+ minList[x].classifiedColor = self.lvList[o].classifiedColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
let minObj = this.calculateMapMax(minList,this.mapBoxHeight,this.mapBoxWidth);
|
|
|
+ let minObjTwo = this.calculateMapMax(minList,this.minMapBoxHeight,this.minMapBoxWidth);
|
|
|
obj.width = minObj.maxWidth;
|
|
|
obj.height = minObj.maxHeight;
|
|
|
obj.zoomData = minObj.zoomData;
|
|
|
+ obj.minWidth = minObjTwo.maxWidth;
|
|
|
+ obj.minHeight = minObjTwo.maxHeight;
|
|
|
+ obj.minZoomData = minObjTwo.zoomData;
|
|
|
obj.mapList = JSON.parse(JSON.stringify(minList));
|
|
|
list.push(obj);
|
|
|
}
|
|
|
@@ -231,7 +283,7 @@
|
|
|
//选中楼层
|
|
|
floorCheck(index){
|
|
|
if(index != this.floorId){
|
|
|
- this.$set(this,'mapData',this.floorList[index]);
|
|
|
+ this.$set(this,'newMapData',this.floorList[index]);
|
|
|
this.$set(this,'floorId',this.floorList[index].id);
|
|
|
this.$forceUpdate;
|
|
|
}
|
|
|
@@ -283,14 +335,10 @@
|
|
|
let zoomNumOne = height / maxHeight;
|
|
|
if (parseInt(this.accMul(zoomNumOne, maxHeight)) <= height && parseInt(this.accMul(zoomNumOne, maxWidth)) <= width) {
|
|
|
zoomData = zoomNumOne;
|
|
|
- this.$set(this, 'zoomData', zoomNumOne);
|
|
|
- this.$set(this, 'minZoomData', zoomNumOne);
|
|
|
}
|
|
|
let zoomNumTwo = width / maxWidth;
|
|
|
if (parseInt(this.accMul(zoomNumTwo, maxHeight)) <= height && parseInt(this.accMul(zoomNumTwo, maxWidth)) <= width) {
|
|
|
zoomData = zoomNumTwo;
|
|
|
- this.$set(this, 'zoomData', zoomNumTwo);
|
|
|
- this.$set(this, 'minZoomData', zoomNumTwo);
|
|
|
}
|
|
|
return {maxWidth: maxWidth, maxHeight: maxHeight, zoomData: zoomData}
|
|
|
},
|
|
|
@@ -375,15 +423,21 @@
|
|
|
margin-top:rh(80);
|
|
|
margin-right:rw(40);
|
|
|
height: rh(975);
|
|
|
+ .for-building-box:nth-child(1){
|
|
|
+ border:none;
|
|
|
+ }
|
|
|
.for-building-box{
|
|
|
margin-bottom:rh(20);
|
|
|
+ border-top:rh(1) dashed #fff;
|
|
|
.item-name{
|
|
|
+ margin-top:rh(20);
|
|
|
flex:1;
|
|
|
display:block;
|
|
|
overflow:hidden;
|
|
|
text-overflow:ellipsis;
|
|
|
white-space:nowrap;
|
|
|
color:#fff;
|
|
|
+ font-size:rh(16);
|
|
|
line-height:rh(20);
|
|
|
margin-bottom:rh(20);
|
|
|
}
|
|
|
@@ -404,6 +458,7 @@
|
|
|
text-overflow:ellipsis;
|
|
|
white-space:nowrap;
|
|
|
color:#fff;
|
|
|
+ font-size:rh(14);
|
|
|
line-height:rh(20);
|
|
|
}
|
|
|
}
|
|
|
@@ -418,7 +473,10 @@
|
|
|
}
|
|
|
.center-big-box {
|
|
|
/*background: #fff;*/
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
.center-map-big-box {
|
|
|
margin-top: rh(80);
|
|
|
height: rh(600);
|
|
|
@@ -431,7 +489,7 @@
|
|
|
-webkit-user-select: none;
|
|
|
.evacuation-shade-map-box {
|
|
|
position: relative;
|
|
|
- border: 1px dashed #24D1F9;
|
|
|
+ border: 1px dashed #fff;
|
|
|
overflow: hidden;
|
|
|
.evacuation-shade-map-for-box {
|
|
|
position: absolute;
|
|
|
@@ -445,45 +503,25 @@
|
|
|
padding: 0 10px;
|
|
|
height: 20px;
|
|
|
line-height: 20px;
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 16px;
|
|
|
text-align: center;
|
|
|
- color: #24D1F9;
|
|
|
+ color: #fff;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.map-for-num-p {
|
|
|
+ margin-top:10px;
|
|
|
padding: 0 10px;
|
|
|
height: 20px;
|
|
|
line-height: 20px;
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 16px;
|
|
|
text-align: center;
|
|
|
- color: #24D1F9;
|
|
|
+ color: #fff;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
- .user-num-box {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- display: flex;
|
|
|
- img {
|
|
|
- width: 20px;
|
|
|
- height: 15px;
|
|
|
- margin: 10px;
|
|
|
- }
|
|
|
- p {
|
|
|
- line-height: 35px;
|
|
|
- font-size: 14px;
|
|
|
- color: #24D1F9;
|
|
|
- }
|
|
|
- }
|
|
|
- .user-num-one {
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- .user-num-two {
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
.position-box {
|
|
|
position: absolute;
|
|
|
font-size: 14px;
|
|
|
@@ -511,19 +549,21 @@
|
|
|
}
|
|
|
}
|
|
|
.for-map-box-one {
|
|
|
- background: rgba(7, 36, 54, 1);
|
|
|
- border: 1px solid #24D1F9;
|
|
|
+ /*background: rgba(7, 36, 54, 1);*/
|
|
|
+ border: 1px solid #fff;
|
|
|
}
|
|
|
.for-map-box {
|
|
|
/*background: rgba(1,16,32,1);*/
|
|
|
- background: rgba(6, 30, 48, 1);
|
|
|
+ /*background: rgba(6, 30, 48, 1);*/
|
|
|
}
|
|
|
.for-map-box-two {
|
|
|
- background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(5, 45, 43, 1);
|
|
|
+ /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 1);*/
|
|
|
+ background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 0);
|
|
|
background-size: 80px 80px;
|
|
|
}
|
|
|
.for-map-box-two-check {
|
|
|
- background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1);
|
|
|
+ /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1);*/
|
|
|
+ background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 0);
|
|
|
background-size: 80px 80px;
|
|
|
}
|
|
|
.room-type-one {
|
|
|
@@ -547,6 +587,158 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .center-bottom-max-big-box{
|
|
|
+ margin-top:rh(40);
|
|
|
+ width:rw(1270);
|
|
|
+ height:rh(220);
|
|
|
+ white-space: nowrap;
|
|
|
+ .center-bottom-for-big-box:nth-child(1){
|
|
|
+ margin-left:0;
|
|
|
+ }
|
|
|
+ .center-bottom-for-big-box{
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left:rw(20);
|
|
|
+ display: inline-block;
|
|
|
+ width:rw(300);
|
|
|
+ height:rh(200);
|
|
|
+ .center-bottom-for-min-box{
|
|
|
+ width:rw(300);
|
|
|
+ height:rh(160);
|
|
|
+ border:rh(1) solid #666;
|
|
|
+ position: relative;
|
|
|
+ .evacuation-shade-map-big-box {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ .evacuation-shade-map-box {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .evacuation-shade-map-for-box {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .evacuation-shade-map-min-box {
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .map-for-name-p {
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .map-for-num-p {
|
|
|
+ margin-top:10px;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .position-box {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 14px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .center-move-door-p-t {
|
|
|
+ background: url("../assets/image/icon_pmbjt_m.png") !important;
|
|
|
+ background-size: 100% !important;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ .center-move-door-p-b {
|
|
|
+ background: url("../assets/image/icon_pmbjt_m.png") !important;
|
|
|
+ background-size: 100% !important;
|
|
|
+ }
|
|
|
+ .center-move-door-p-l {
|
|
|
+ background: url("../assets/image/icon_pmbjt_m.png") !important;
|
|
|
+ background-size: 100% !important;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ .center-move-door-p-r {
|
|
|
+ background: url("../assets/image/icon_pmbjt_m.png") !important;
|
|
|
+ background-size: 100% !important;
|
|
|
+ transform: rotateZ(270deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .for-map-box-one {
|
|
|
+ /*background: rgba(7, 36, 54, 1);*/
|
|
|
+ border: 1px solid #fff;
|
|
|
+ }
|
|
|
+ .for-map-box {
|
|
|
+ /*background: rgba(1,16,32,1);*/
|
|
|
+ /*background: rgba(6, 30, 48, 1);*/
|
|
|
+ }
|
|
|
+ .for-map-box-two {
|
|
|
+ /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 1);*/
|
|
|
+ background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 0);
|
|
|
+ background-size: 80px 80px;
|
|
|
+ }
|
|
|
+ .for-map-box-two-check {
|
|
|
+ /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1);*/
|
|
|
+ background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 0);
|
|
|
+ background-size: 80px 80px;
|
|
|
+ }
|
|
|
+ .room-type-one {
|
|
|
+ //选中
|
|
|
+ background: rgba(30, 118, 142, 0.4);
|
|
|
+ }
|
|
|
+ .room-type-two {
|
|
|
+ //报警
|
|
|
+ background: rgba(232, 0, 0, 0.4);
|
|
|
+ box-shadow: 0 0 10px 1px #E80000 inset;
|
|
|
+ }
|
|
|
+ .room-type-three {
|
|
|
+ //选中报警
|
|
|
+ background: rgba(30, 118, 142, 0.4);
|
|
|
+ box-shadow: 0 0 10px 1px #E80000 inset;
|
|
|
+ }
|
|
|
+ .room-type-noe {
|
|
|
+ /*border:1px solid #666;*/
|
|
|
+ /*background: rgba(102,102,102,0.6);*/
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .max-for-name-p{
|
|
|
+ line-height:rh(40);
|
|
|
+ font-size:rh(18);
|
|
|
+ color:#fff;
|
|
|
+ text-align: center;
|
|
|
+ display:block;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .checkFloor{
|
|
|
+ .center-bottom-for-min-box{
|
|
|
+ border:rh(1) solid #1ED0F8!important;
|
|
|
+ }
|
|
|
+ .max-for-name-p{
|
|
|
+ color:#1ED0F8!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center-bottom-for-big-box-position{
|
|
|
+ position: absolute;
|
|
|
+ top:rh(9999);
|
|
|
+ left:rw(9999);
|
|
|
+ z-index: -100;
|
|
|
+ display: inline-block;
|
|
|
+ width:rw(300);
|
|
|
+ height:rh(160);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.right-big-box {
|
|
|
width: rw(290);
|
|
|
@@ -586,6 +778,24 @@
|
|
|
border-radius: 0;
|
|
|
background: rgba(255,255,255,0);
|
|
|
}
|
|
|
+ .scrollbar-x-box{
|
|
|
+ overflow-y: hidden;
|
|
|
+ overflow-x: scroll;
|
|
|
+ }
|
|
|
+ .scrollbar-x-box::-webkit-scrollbar{
|
|
|
+ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 4px;
|
|
|
+ }
|
|
|
+ .scrollbar-x-box::-webkit-scrollbar-thumb{
|
|
|
+ border-radius: 5px;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px #999;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .scrollbar-x-box::-webkit-scrollbar-track{
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
|
|
|
+ border-radius: 0;
|
|
|
+ background: rgba(255,255,255,0);
|
|
|
+ }
|
|
|
}
|
|
|
.main_t_b {
|
|
|
position: absolute;
|
dedsudiyu