数据大屏
This commit is contained in:
parent
1e18828985
commit
9682eadf4f
|
@ -125,15 +125,43 @@
|
|||
<p>预制棒</p>
|
||||
<p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<p>总量</p>
|
||||
<p> <span class="numberFont">140</span><span class="numberUnit">件</span></p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="cilckInfoBlock" class="inforBlock clickBlock" v-show="clickVisible">
|
||||
<div class="border_corner border_left_top"></div>
|
||||
<div class="border_corner border_right_top"></div>
|
||||
<div class="border_corner border_left_bottom"></div>
|
||||
<div class="border_corner border_right_bottom"></div>
|
||||
<p class="title">{{currentObj.deptName}}</p>
|
||||
<div class="infoCantier">
|
||||
<div class="leftBlock">
|
||||
<el-progress width="100" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
|
||||
id="dashbordProcess" />
|
||||
<p style="text-align:center">完成进度</p>
|
||||
</div>
|
||||
<div class="rightBlock">
|
||||
<div>
|
||||
<p>昨日产量</p>
|
||||
<p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
|
||||
</div>
|
||||
<div class="countWrap">
|
||||
<div>
|
||||
<p>预制管</p>
|
||||
<p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p>预制棒</p>
|
||||
<p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CircleClose class="circleClose" @click="circleClose"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
|
@ -183,14 +211,16 @@ export default {
|
|||
loadedPercent: 0,
|
||||
currentLightMesh: null,
|
||||
infoVisibel: false,
|
||||
clickVisible:false,
|
||||
updateTime: '2023-08-17 16:00:00',
|
||||
nodesLists: {
|
||||
'单身宿舍.004_primitive3': { total: '0', elec: '0', name: '办公楼' },
|
||||
'立方体.024_primitive1': { total: '0', elec: '0', name: '成型10车间' },
|
||||
'立方体.034_primitive1': { total: '0', elec: '0', name: '配料8车间' },
|
||||
'立方体.026_primitive1': { total: '0', elec: '0', name: '成型7车间' },
|
||||
'立方体.025_primitive1': { total: '0', elec: '0', name: '加工6车间' },
|
||||
'单身宿舍.004_primitive3': '办公楼',
|
||||
'立方体.024_primitive1':'成型10车间',
|
||||
'立方体.034_primitive1': '配料8车间',
|
||||
'立方体.026_primitive1': '成型7车间',
|
||||
'立方体.025_primitive1': '加工6车间',
|
||||
},
|
||||
objs:{ total: '0', elec: '0' },
|
||||
currentTime:'',
|
||||
currentWeek:'',
|
||||
currentDay:'',
|
||||
|
@ -198,8 +228,12 @@ export default {
|
|||
start_date:'',
|
||||
end_date:'',
|
||||
dialogData:{
|
||||
deptName:'办公楼'
|
||||
deptName:''
|
||||
},
|
||||
currentObj:{
|
||||
deptName:''
|
||||
},
|
||||
heightTimer:null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
@ -230,8 +264,6 @@ export default {
|
|||
let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));//本周周日
|
||||
this.start_date = first.getFullYear()+'-'+(first.getMonth()+1)+'-'+first.getDate();
|
||||
this.end_date = last.getFullYear()+'-'+(last.getMonth()+1)+'-'+last.getDate();
|
||||
console.log(this.start_date)
|
||||
console.log(this.end_date);
|
||||
this.getsaleOut();
|
||||
},
|
||||
methods: {
|
||||
|
@ -241,8 +273,8 @@ export default {
|
|||
query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"},
|
||||
};
|
||||
that.$API.bi.dataset.exec.req('3448456854219546624', obj).then((res) => {
|
||||
console.log(res);
|
||||
debugger;
|
||||
// console.log(res);
|
||||
// debugger;
|
||||
});
|
||||
},
|
||||
showTime() {
|
||||
|
@ -310,7 +342,7 @@ export default {
|
|||
camera.upperRadiusLimit = 6;
|
||||
// 灯光
|
||||
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
|
||||
light.intensity = 0.8;
|
||||
light.intensity = 3;
|
||||
// 全屏GUI
|
||||
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
|
||||
that.myui = advancedTexture;
|
||||
|
@ -329,7 +361,7 @@ export default {
|
|||
button_main.color = "white";
|
||||
button_main.cornerRadius = 20;
|
||||
button_main.background = "green";
|
||||
button_main.top='80px';
|
||||
button_main.top='100px';
|
||||
button_main.left='0px';
|
||||
control_main.addControl(button_main)
|
||||
button_main.onPointerClickObservable.add(() => {
|
||||
|
@ -358,47 +390,59 @@ export default {
|
|||
mesh_name.color = 'white';
|
||||
mesh_name.fontSize = '14px';
|
||||
mesh_rect.addControl(mesh_name);
|
||||
|
||||
var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon4.glb";
|
||||
BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
|
||||
// var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb";
|
||||
BABYLON.SceneLoader.Append('glb/', "photon4.glb", scene, function (scene) {
|
||||
console.log(scene)
|
||||
// BABYLON.SceneLoader.Append('glb/', "photon4.glb", scene, function (scene) {
|
||||
// console.log(scene)
|
||||
//关闭灯光
|
||||
// scene.lights[1].setEnabled(false);
|
||||
engine.hideLoadingUI()
|
||||
// let arrKey = [];
|
||||
// for (let key in that.nodesLists) {
|
||||
// // const value = that.nodesLists[key];
|
||||
// const mesh = scene.getMeshByName(key);
|
||||
// if (mesh) {
|
||||
// console.log('000000000000');
|
||||
// console.log(mesh);
|
||||
// arrKey.push(key);
|
||||
// }
|
||||
// let heightI = 0;
|
||||
// that.heightTimer = setInterval(() => {
|
||||
// let heightKey = arrKey[heightI];
|
||||
// const meshTimer = scene.getMeshByName(heightKey);
|
||||
// const hl1Timer = new BABYLON.HighlightLayer("hl1Timer", scene);
|
||||
|
||||
// mesh.actionManager.registerAction(
|
||||
// // new BABYLON.ExecuteCodeAction(trigger, func, condition)
|
||||
// )
|
||||
// mesh.onPointerDownObservable.add(() => {
|
||||
// console.log('111111111111');
|
||||
// console.log(camera.target);
|
||||
// console.log(mesh.position);
|
||||
// debugger;
|
||||
// if (camera.target != mesh.position) {
|
||||
// // console.log('fly to')
|
||||
// // 计算新的相机位置
|
||||
// let position = mesh._parentNode._position
|
||||
// if(mesh._parentNode.id=='__root__'){
|
||||
// position = mesh.position
|
||||
// if (meshTimer) {
|
||||
// if (that.nodesLists[heightKey]) {
|
||||
// hl1Timer.removeAllMeshes();
|
||||
// if (highlightLayer) {
|
||||
// highlightLayer.removeAllMeshes();
|
||||
// }
|
||||
// const cameraPosition = new BABYLON.Vector3(
|
||||
// mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
|
||||
// mesh.position.y + 9 * Math.cos(camera.beta),
|
||||
// mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI)
|
||||
// );
|
||||
// var ease = new BABYLON.CubicEase();
|
||||
// ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
|
||||
// BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
|
||||
// BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
|
||||
// that.getDeptDetail(that.nodesLists[heightKey])
|
||||
// // 在选中的 meshTimer 上添加高亮效果
|
||||
// highlightLayer.addMesh(meshTimer, new BABYLON.Color3(0.1, 0.9, 0.9));
|
||||
// that.currentLightMesh = meshTimer;
|
||||
// mesh_rect.linkWithMesh(meshTimer);
|
||||
// let name = meshTimer.name.split('_')[0];
|
||||
// mesh_name.text = name;
|
||||
// that.infoVisibel = true;
|
||||
// hl1Timer.addMesh(meshTimer, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
|
||||
// hl1Timer.blurVerticalSize = 5;
|
||||
// hl1Timer.blurHorizontalSize = 5;
|
||||
// function worldToScreen(point, camera, scene, engine) {
|
||||
// return BABYLON.Vector3.Project(point,
|
||||
// BABYLON.Matrix.Identity(),
|
||||
// scene.getTransformMatrix(),
|
||||
// camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
|
||||
// }
|
||||
// })
|
||||
// var pos = worldToScreen(meshTimer.absolutePosition, camera, scene, engine);
|
||||
// let infoBlock = document.getElementById('inforBlock');
|
||||
// infoBlock.style.left = (Math.floor(pos.x)) + 'px';
|
||||
// infoBlock.style.top = (Math.floor(pos.y) - 250) + 'px';
|
||||
// }
|
||||
// }
|
||||
// heightI+=1;
|
||||
// // if(heightI>4){
|
||||
// // heightI=0
|
||||
// // }
|
||||
// }, 1000);
|
||||
},
|
||||
//进度条
|
||||
function (evt) {
|
||||
|
@ -418,7 +462,7 @@ export default {
|
|||
checkbox.isChecked = false;
|
||||
checkbox.marginLeft = '16px'
|
||||
checkbox.color = "green";
|
||||
checkbox.top='80px';
|
||||
checkbox.top='100px';
|
||||
checkbox.onIsCheckedChangedObservable.add(function (value) {
|
||||
if (value) {
|
||||
camera.useAutoRotationBehavior = true;
|
||||
|
@ -432,10 +476,11 @@ export default {
|
|||
header.width = "80px";
|
||||
header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
|
||||
header.color = "white";
|
||||
header.top='80px';
|
||||
header.top='100px';
|
||||
control_main.addControl(header);
|
||||
// 添加抓取事件
|
||||
const hl1 = new BABYLON.HighlightLayer("hl1", scene);
|
||||
const hl1Click = new BABYLON.HighlightLayer("hl1Click", scene);
|
||||
canvas.addEventListener('mousemove', (event) => {
|
||||
// 使用 scene.pick 检测鼠标拾取
|
||||
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
|
||||
|
@ -447,27 +492,12 @@ export default {
|
|||
}
|
||||
if (pickResult.hit) {
|
||||
const mesh = pickResult.pickedMesh;
|
||||
// if (camera.target != mesh.position) {
|
||||
// // console.log('fly to')
|
||||
// // 计算新的相机位置
|
||||
// let position = mesh._parentNode._position
|
||||
// if(mesh._parentNode.id=='__root__'){
|
||||
// position = mesh.position
|
||||
// }
|
||||
// const cameraPosition = new BABYLON.Vector3(
|
||||
// mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
|
||||
// mesh.position.y + 9 * Math.cos(camera.beta),
|
||||
// mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI)
|
||||
// );
|
||||
// var ease = new BABYLON.CubicEase();
|
||||
// ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
|
||||
// BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
|
||||
// BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
|
||||
// }
|
||||
highlightLayer.removeAllMeshes();
|
||||
let key = mesh.name;
|
||||
if (that.nodesLists[key]) {
|
||||
that.getDeptDetail(that.nodesLists[key].name)
|
||||
hl1.removeAllMeshes();
|
||||
highlightLayer.removeAllMeshes();
|
||||
that.getDeptDetail(that.nodesLists[key])
|
||||
//单身宿舍.003_primitive3
|
||||
// 在选中的 mesh 上添加高亮效果
|
||||
highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
|
||||
|
@ -476,7 +506,7 @@ export default {
|
|||
let name = mesh.name.split('_')[0];
|
||||
mesh_name.text = name;
|
||||
// mesh_rect.isVisible = true;
|
||||
that.infoVisibel = true;
|
||||
|
||||
hl1.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
|
||||
hl1.blurVerticalSize = 5;
|
||||
hl1.blurHorizontalSize = 5;
|
||||
|
@ -500,17 +530,27 @@ export default {
|
|||
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
|
||||
if (pickResult.hit) {
|
||||
const mesh = pickResult.pickedMesh;
|
||||
console.log('mesh',mesh)
|
||||
if(that.nodesLists[mesh.name]){
|
||||
hl1Click.removeAllMeshes();
|
||||
highlightLayer.removeAllMeshes();
|
||||
|
||||
highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
|
||||
hl1Click.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
|
||||
hl1Click.blurVerticalSize = 5;
|
||||
hl1Click.blurHorizontalSize = 5;
|
||||
that.currentObj.deptName = that.nodesLists[mesh.name];
|
||||
if (camera.target != mesh.position) {
|
||||
console.log('fly to')
|
||||
that.clickVisible = true;
|
||||
// 计算新的相机位置
|
||||
let position = mesh._parentNode._position
|
||||
if (mesh._parentNode.id == '__root__') {
|
||||
position = mesh.position
|
||||
}
|
||||
const cameraPosition = new BABYLON.Vector3(
|
||||
mesh.position.x + 2.5 * Math.sin(camera.beta) * Math.cos(1.8*Math.PI),
|
||||
mesh.position.y + 2.5 * Math.cos(camera.beta),
|
||||
mesh.position.z + 2.5 * Math.sin(camera.beta) * Math.sin(1.8*Math.PI)
|
||||
position.x + 1.8 * Math.sin(camera.beta),
|
||||
position.y + 4 * Math.cos(camera.beta),
|
||||
position.z - 0.2 * Math.sin(camera.beta)
|
||||
);
|
||||
var ease = new BABYLON.CubicEase();
|
||||
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
|
||||
|
@ -518,6 +558,7 @@ export default {
|
|||
BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return scene;
|
||||
};
|
||||
|
@ -528,13 +569,18 @@ export default {
|
|||
});
|
||||
this.engine = engine;
|
||||
this.scene = scene;
|
||||
console.log('scene:',scene)
|
||||
// console.log('scene:',scene)
|
||||
window.addEventListener("resize", function () {
|
||||
engine.resize();
|
||||
});
|
||||
},
|
||||
getDeptDetail(name){
|
||||
if(this.currentObj.deptName==name&&this.clickVisible){
|
||||
this.dialogData.deptName = name;
|
||||
}else{
|
||||
this.infoVisibel = true;
|
||||
this.dialogData.deptName = name;
|
||||
}
|
||||
},
|
||||
initChart() {
|
||||
//左1
|
||||
|
@ -621,7 +667,7 @@ export default {
|
|||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: "交付数",
|
||||
name: "交付数(个)",
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
|
@ -793,7 +839,7 @@ export default {
|
|||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: "数量(个)",
|
||||
name: "合格数(个)",
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
|
@ -943,7 +989,7 @@ export default {
|
|||
|
||||
},
|
||||
yAxis: {
|
||||
name: '温度',
|
||||
name: '合格率(%)',
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
|
@ -1229,7 +1275,6 @@ export default {
|
|||
},
|
||||
labelLine: {
|
||||
lineStyle: {
|
||||
// type: [6]
|
||||
},
|
||||
length: 2,
|
||||
length2: 5
|
||||
|
@ -1259,6 +1304,10 @@ export default {
|
|||
};
|
||||
pieChart.setOption(pieoption);
|
||||
},
|
||||
circleClose(){
|
||||
this.clickVisible = false;
|
||||
this.currentObj.deptName = '';
|
||||
},
|
||||
},
|
||||
beforeDestoryed() {
|
||||
clearInterval(timerTime);
|
||||
|
@ -1268,12 +1317,6 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/* @font-face {
|
||||
font-family: 'youShe';
|
||||
src: url('./youShe.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
} */
|
||||
@font-face {
|
||||
font-family: 'myfont'; /* 字体名称 */
|
||||
src: url('../../style/youShe.ttf'); /* 字体文件相对路径 */
|
||||
|
@ -1284,7 +1327,6 @@ font-style: normal;
|
|||
}
|
||||
|
||||
.pageHeader {
|
||||
/* height: 70px; */
|
||||
font-size: 32px;
|
||||
background: none;
|
||||
border-bottom: none;
|
||||
|
@ -1367,7 +1409,6 @@ font-style: normal;
|
|||
.row-item {
|
||||
height: 40px !important;
|
||||
line-height: 40px !important;
|
||||
/* background-color:rgb(10,63,68)!important; */
|
||||
}
|
||||
|
||||
#scrollTable>.hader {
|
||||
|
@ -1397,95 +1438,6 @@ font-style: normal;
|
|||
font-size: 30px;
|
||||
}
|
||||
|
||||
.inforBlock {
|
||||
left: 60%;
|
||||
top: 30%;
|
||||
width: 420px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
|
||||
|
||||
/* border:1px solid rgba(1,235,239,.2); */
|
||||
.border_corner {
|
||||
z-index: 2500;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 2px solid rgba(54, 217, 187, 1);
|
||||
}
|
||||
|
||||
.border_left_top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.border_right_top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.border_left_bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.border_right_bottom {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
top: -45px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
/* margin-bottom:20px;
|
||||
display: inline-block;
|
||||
border-bottom: 3px solid green;
|
||||
padding: 0 5px 5px; */
|
||||
}
|
||||
|
||||
.infoCantier {
|
||||
display: flex;
|
||||
|
||||
.leftBlock {
|
||||
width: 100px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.rightBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.countWrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 280px;
|
||||
margin-top: 10px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.numberFont {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
|
@ -1515,25 +1467,19 @@ font-style: normal;
|
|||
.totalNumWrap{
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
img{
|
||||
}
|
||||
.totalNumWrap>img{
|
||||
width: 10vw;
|
||||
}
|
||||
}
|
||||
.totalNumWrap_green{
|
||||
.totalNumber{
|
||||
.totalNumWrap_green>.totalNumber{
|
||||
color: rgb(5,245,2);
|
||||
}
|
||||
}
|
||||
.totalNum_orange{
|
||||
.totalNumber{
|
||||
.totalNum_orange>.totalNumber{
|
||||
color: orange;
|
||||
}
|
||||
}
|
||||
.totalNum_blue{
|
||||
.totalNumber{
|
||||
.totalNum_blue>.totalNumber{
|
||||
color: rgb(2,245,242);
|
||||
}
|
||||
}
|
||||
.totalNumber{
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
|
@ -1545,11 +1491,110 @@ font-style: normal;
|
|||
.totalNumText{
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
font-size: 0.7vw;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.inforBlock {
|
||||
left: 60%;
|
||||
top: 30%;
|
||||
width: 420px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
|
||||
}
|
||||
.inforBlock.clickBlock{
|
||||
left: 50%;
|
||||
width: 630px;
|
||||
height: 225px;
|
||||
padding:40px;
|
||||
font-size:16px;
|
||||
transform:translateX(-50%)
|
||||
}
|
||||
.inforBlock>.border_corner {
|
||||
z-index: 2500;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 2px solid rgba(54, 217, 187, 1);
|
||||
}
|
||||
|
||||
.inforBlock>.border_left_top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.inforBlock>.border_right_top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.inforBlock>.border_left_bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.inforBlock>.border_right_bottom {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.inforBlock>.title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
top: -45px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.inforBlock>.infoCantier {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.infoCantier>.leftBlock {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.infoCantier>.rightBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.infoCantier>.rightBlock>.countWrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 280px;
|
||||
margin-top: 10px
|
||||
}
|
||||
/* .clickBlock{
|
||||
position:relative;
|
||||
} */
|
||||
.circleClose{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue