<template>
|
<div class="cesium-example">
|
<!-- 主图 cesium 容器 -->
|
<div ref="cesiumContainer" id="cesiumContainer"></div>
|
<!-- 相机视角容器 -->
|
<div ref="cesiumCamera" id="cesiumCamera"></div>
|
<!-- botton -->
|
<div class="cesiumBotton">
|
<div class="cesiumButtonGroup">
|
<el-button id="groundPoi" @click="addGroundPoi()" type="primary">地面点</el-button>
|
<!-- <el-button id="groundPoi" @click="addGroundPoi()" type="primary">停留时间</el-button> -->
|
<el-input v-model="mergeNumber" placeholder="请输入合并范围" type="number" style="width: 150px;"></el-input>
|
<el-button @click="mergePoint()" type="success">合并</el-button>
|
<el-button @click="renderData()" type="success">数据渲染</el-button>
|
|
</div>
|
</div>
|
|
<!-- 动态坐标、动态相机参数显示 -->
|
<!-- <div id="moveResult" class="moveResult">
|
<div id="moveResultCon" class="moveResultCon"></div>
|
<div class="box_lt"></div><div class="box_lb"></div><div class="box_rt"></div><div class="box_rb"></div>
|
</div> -->
|
<div id="cammoveResult" class="cammoveResult">
|
<div id="cammoveResultCon" class="cammoveResultCon"></div>
|
<div class="box_lt"></div><div class="box_lb"></div><div class="box_rt"></div><div class="box_rb"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
let cameraPostion;
|
let cameraHeading;
|
let cameraPitch;
|
let cameraRoll;
|
let viewerM;
|
let viewerC;
|
let counter = 0;
|
let globalon = 125.1949
|
let globalat = 46.5143
|
let pois = [globalon, globalat,0]
|
|
// let pois = [0, 0,0]
|
let holdingPosition;
|
let rightKeyMove = false
|
let distance = 100;
|
export default {
|
props: {
|
towerUrl: {
|
type: String,
|
default() {
|
return ''
|
}
|
},
|
},
|
data(){
|
return{
|
moveSpeed: 1,
|
speedMultiplier: 5,
|
slowMultiplier: 0.2,
|
keyState: {
|
w: false,
|
s: false,
|
a: false,
|
d: false,
|
q: false,
|
e: false,
|
up: false,
|
down: false,
|
left: false,
|
right: false,
|
shift: false,
|
ctrl: false,
|
space: false,
|
},
|
animationFrameId: null,
|
mergeNumber:null
|
}
|
},
|
mounted(){
|
console.log('111111111111111111')
|
this.initCesium();
|
},
|
beforeDestroy() {
|
this.removeKeyboardEvents();
|
if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);
|
if (viewerC) viewerC.destroy();
|
},
|
methods:{
|
initCesium() {
|
viewerM = this.initViewer(this.$refs.cesiumContainer.id);
|
viewerC = this.initViewer(this.$refs.cesiumCamera.id);
|
// 💡 在这里继续调用 measure.js / camera.js / botton.js 等逻辑
|
// 例如：window.registerMeasureTools(viewerM)
|
setTimeout(()=>{
|
this.loadModel()
|
this.addSyncListener()
|
this.registerKeyboardEvents();
|
|
let control = viewerC.scene.screenSpaceCameraController;
|
control.enableRotate = false;
|
control.enableTranslate = false;
|
control.enableZoom = false;
|
control.enableTilt = false;
|
control.enableLook = false;
|
this.cammove_measure_point();
|
},1000)
|
},
|
|
/**
|
* groundPoi 按钮点击处理
|
*/
|
handleGroundPoi() {
|
if (typeof window.handleGroundPoi === "function") {
|
window.handleGroundPoi(viewerM, viewerC);
|
}
|
// 其他自定义逻辑...
|
},
|
initViewer(cesiumId){
|
//cesium全球30米分辨率地形资源token
|
let imageryProvider1 = new Cesium.TileMapServiceImageryProvider({
|
url: `https://192.168.1.2:9999/daqing/dom-sea/`,
|
});
|
let viewer = new Cesium.Viewer(cesiumId, {
|
fullscreenButton: false,
|
homeButton: false,
|
timeline: false,
|
geocoder: false,
|
scene3DOnly: true,
|
sceneModePicker: false,
|
baseLayerPicker: false,
|
shouldAnimate: false,
|
navigationHelpButton: false,
|
navigationInstructionsInitiallyVisible: false,
|
imageryProvider: imageryProvider1,
|
// imageryProvider: false,
|
shadows: false,
|
animation: false,
|
infoBox: false,
|
timeline: false,
|
selectionIndicator: false ,
|
fullscreenButton: false,
|
vrButton: false,
|
});
|
// 关闭天空盒效果
|
// viewer.scene.skyAtmosphere = undefined; // 或者设置为 null
|
|
// // 关闭光照效果
|
// viewer.scene.globe.enableLighting = false; // 关闭光照效果
|
window.viewer = viewer;
|
// viewer.imageryLayers.add(bdtvectoranoimagery);
|
viewer._cesiumWidget._creditContainer.style.display="none";
|
return viewer;
|
|
},
|
loadModel(){
|
const modelUrl = this.towerUrl; // GLB模型路径
|
// 沿原点坐标和地面点坐标方向上选取空中点的距离
|
//初始化相机窗口视角参数
|
cameraPostion = viewerM.camera.position
|
cameraHeading = viewerM.camera.heading;
|
cameraPitch = viewerM.camera.pitch;
|
cameraRoll = viewerM.camera.roll;
|
|
// 设置视角，使其默认查看某个地理位置
|
viewerM.scene.camera.setView({
|
destination: Cesium.Cartesian3.fromDegrees(globalon, globalat, 349.0), // 以经纬度设置位置（例如：大庆龙兴路）
|
// destination: Cesium.Cartesian3.fromDegrees(0.0005, 0.0017, 207.8), // 以经纬度设置位置（例如：大庆龙兴路）
|
orientation: {
|
heading: Cesium.Math.toRadians(194.65), // 方向
|
pitch: Cesium.Math.toRadians(-31.43), // 俯角
|
roll: 0
|
}
|
});
|
|
//创建模型
|
const glbModelPoi = Cesium.Cartesian3.fromDegrees(pois[0], pois[1],pois[2]);
|
const heading = Cesium.Math.toRadians(0);
|
const pitch = Cesium.Math.toRadians(0);
|
const roll = Cesium.Math.toRadians(0);
|
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
|
const orientations = Cesium.Transforms.headingPitchRollQuaternion(glbModelPoi, hpr);
|
this.creatModel(glbModelPoi,orientations,modelUrl,viewerM);
|
this.creatModel(glbModelPoi,orientations,modelUrl,viewerC);
|
},
|
creatModel(position,orientations,url,viewer){
|
viewer.entities.add({
|
id: "tower",
|
position: position,
|
orientation: orientations,
|
model: {
|
uri: url,
|
scale: 20,
|
shadows: Cesium.ShadowMode.DISABLED,
|
imageBasedLightingFactor: new Cesium.Cartesian2(1, 0.5)
|
}
|
});
|
},
|
addSyncListener() {
|
// 存下回调以便销毁
|
// this._preRenderCallback = () => this.syncViewer();
|
viewerM.scene.preRender.addEventListener( this.syncViewer());
|
},
|
syncViewer(){
|
console.log(viewerM.camera)
|
viewerC.camera.flyTo({
|
destination: viewerM.camera.position,
|
orientation: {
|
heading: viewerM.camera.heading,
|
pitch: viewerM.camera.pitch,
|
roll: cameraRoll
|
},
|
duration: 0.0 // 设置为 0.0 以立即完成同步
|
});
|
},
|
creatPin(id, position, font, color, viewer) {
|
let pinBuilder = new Cesium.PinBuilder();
|
let addPin = viewer.entities.getById(id);
|
if (addPin == undefined) {
|
viewer.entities.add({
|
id: id,
|
position: position,
|
billboard: {
|
image: pinBuilder.fromText(font, color, 36).toDataURL(),
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
}
|
});
|
} else {
|
addPin.position = position;
|
}
|
},
|
addGroundPoi() {
|
let createPinHandler = new Cesium.ScreenSpaceEventHandler(viewerM.canvas);
|
let _this = this
|
createPinHandler.setInputAction(function (click) {
|
let cartesian = viewerM.scene.pickPosition(click.position);
|
if (Cesium.defined(cartesian)) {
|
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
let height = cartographic.height;//模型高度
|
if(Number(height)<0){
|
let ray = viewerM.camera.getPickRay(click.position);
|
cartesian = viewerM.scene.globe.pick(ray,viewerM.scene);
|
}
|
cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
let lng = Cesium.Math.toDegrees(cartographic.longitude);
|
let lat = Cesium.Math.toDegrees(cartographic.latitude);
|
height = cartographic.height;
|
console.log(lng+','+lat+','+height)
|
}
|
|
//在两个窗口创建标注
|
_this.creatPin("groundPoiId"+counter,cartesian.clone(),`观${counter}`,Cesium.Color.BLUE,viewerM);
|
_this.creatPin("groundPoiId"+counter,cartesian.clone(),`观${counter}`,Cesium.Color.BLUE,viewerC);
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
// 右键点击结束监听，并创建空中点
|
createPinHandler.setInputAction(function (click) {
|
// 获取实体
|
const groupEntity = viewerM.entities.getById("groundPoiId"+counter);
|
const groupPosition = groupEntity.position.getValue(Cesium.JulianDate.now());
|
if (groupPosition) {
|
// 如果位置存在，将其转换为经纬度
|
const cartographic = Cesium.Cartographic.fromCartesian(groupPosition);
|
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
const latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
const height = cartographic.height;
|
//根据两点坐标计算方位角
|
const positionA = Cesium.Cartesian3.fromDegrees(pois[0],pois[1],height);
|
holdingPosition = Cesium.Cartesian3.fromDegrees(longitude,latitude,height);
|
// 计算方向向量
|
const direction = Cesium.Cartesian3.subtract(holdingPosition, positionA, new Cesium.Cartesian3());
|
/**计算沿方向向量移动的点**/
|
const normalize = Cesium.Cartesian3.normalize(direction,new Cesium.Cartesian3());
|
//根据偏移量求偏移向量
|
const scalerNormalize = Cesium.Cartesian3.multiplyByScalar(normalize,distance,new Cesium.Cartesian3());
|
const tagert = Cesium.Cartesian3.add(holdingPosition,scalerNormalize,new Cesium.Cartesian3());
|
console.log(Cesium.Cartographic.fromCartesian(tagert))
|
_this.creatPin("aerialPoiId"+counter,tagert,`空${counter}`,Cesium.Color.RED,viewerM);
|
_this.updateCameraMovement();
|
//结束右键监听
|
createPinHandler.destroy();
|
//结束主图联动鹰眼监听
|
viewerM.scene.preRender.removeEventListener(_this.syncViewer());
|
_this.changeCamera(tagert,_this.azimuthtwopoi(longitude,latitude,pois[0],pois[1]));
|
rightKeyMove = true
|
counter += 1;
|
}
|
console.log('右键点击监听已停止');
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK); // 监听右键点击
|
},
|
azimuthtwopoi(x1, y1, x2, y2) {
|
let result;
|
let a = Math.abs(Math.atan((y2 - y1) / (x2 - x1))) * 180 / Math.PI;
|
if ((x2 - x1) < 0) {
|
if ((y2 - y1) > 0) {
|
result = a + 270;
|
} else {
|
result = 90 - a + 180;
|
}
|
} else {
|
if ((y2 - y1) > 0) {
|
result = 90 - a;
|
} else {
|
result = a + 90;
|
}
|
}
|
return result;
|
},
|
changeCamera(position,heading){
|
console.log(position)
|
console.log(heading)
|
viewerC.camera.flyTo({
|
destination: position,
|
orientation: {
|
heading: Cesium.Math.toRadians(heading),
|
pitch: 0,
|
roll: 0
|
},
|
duration: 0.0 // 设置为 0.0 以立即完成同步
|
});
|
},
|
registerKeyboardEvents() {
|
window.addEventListener("keydown", this.onKeyDown);
|
window.addEventListener("keyup", this.onKeyUp);
|
},
|
removeKeyboardEvents() {
|
window.removeEventListener("keydown", this.onKeyDown);
|
window.removeEventListener("keyup", this.onKeyUp);
|
},
|
onKeyDown(event) {
|
const key = event.key;
|
const lower = key.toLowerCase();
|
switch (lower) {
|
case "w":
|
this.keyState.w = true;
|
break;
|
case "s":
|
this.keyState.s = true;
|
break;
|
case "a":
|
this.keyState.a = true;
|
break;
|
case "d":
|
this.keyState.d = true;
|
break;
|
case "q":
|
this.keyState.q = true;
|
break;
|
case "e":
|
this.keyState.e = true;
|
break;
|
case " ": // Space
|
this.keyState.space = true;
|
event.preventDefault();
|
break;
|
case "shift":
|
this.keyState.shift = true;
|
break;
|
case "control":
|
this.keyState.ctrl = true;
|
event.preventDefault();
|
break;
|
}
|
|
// Arrow keys & mode toggle
|
switch (key) {
|
case "ArrowUp":
|
this.keyState.up = true;
|
break;
|
case "ArrowDown":
|
this.keyState.down = true;
|
break;
|
case "ArrowLeft":
|
this.keyState.left = true;
|
break;
|
case "ArrowRight":
|
this.keyState.right = true;
|
break;
|
case "1":
|
viewerC.scene.mode = Cesium.SceneMode.SCENE3D;
|
break;
|
case "3":
|
viewerC.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;
|
break;
|
}
|
},
|
onKeyUp(event) {
|
//键盘抬起进行更新左侧空中点pin
|
//获取右侧相机
|
if(rightKeyMove){
|
const camera = viewerC.camera;
|
const carto = Cesium.Cartographic.fromCartesian(camera.position);
|
//右侧相机视角转化为经纬度
|
const lon = Cesium.Math.toDegrees(carto.longitude);
|
const lat = Cesium.Math.toDegrees(carto.latitude);
|
const height = carto.height;
|
const position = Cesium.Cartesian3.fromDegrees(lon, lat, height)
|
let pinBuilder = new Cesium.PinBuilder();
|
const groupEntity = viewerM.entities.getById("aerialPoiId"+(counter-1));
|
//左侧地图同步更新pin空中点位置
|
if (groupEntity == undefined) {
|
viewer.entities.add({
|
id: `aerialPoiId+${(counter-1)}`,
|
position: position,
|
billboard: {
|
image: pinBuilder.fromText(font, color, 36).toDataURL(),
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
}
|
});
|
} else {
|
groupEntity.position = position;
|
}
|
console.log(groupEntity)
|
}
|
const key = event.key;
|
const lower = key.toLowerCase();
|
switch (lower) {
|
case "w":
|
this.keyState.w = false;
|
break;
|
case "s":
|
this.keyState.s = false;
|
break;
|
case "a":
|
this.keyState.a = false;
|
break;
|
case "d":
|
this.keyState.d = false;
|
break;
|
case "q":
|
this.keyState.q = false;
|
break;
|
case "e":
|
this.keyState.e = false;
|
break;
|
case " ":
|
this.keyState.space = false;
|
this.resetView();
|
break;
|
case "shift":
|
this.keyState.shift = false;
|
break;
|
case "control":
|
this.keyState.ctrl = false;
|
break;
|
}
|
|
switch (key) {
|
case "ArrowUp":
|
this.keyState.up = false;
|
break;
|
case "ArrowDown":
|
this.keyState.down = false;
|
break;
|
case "ArrowLeft":
|
this.keyState.left = false;
|
break;
|
case "ArrowRight":
|
this.keyState.right = false;
|
break;
|
case "r":
|
this.resetPitch(30);
|
break;
|
case "f":
|
this.resetPitch();
|
break;
|
case "v":
|
this.resetPitch(-30);
|
break;
|
}
|
},
|
updateCameraMovement() {
|
const camera = viewerC.camera;
|
// Adjust speed by modifiers
|
let currentSpeed = this.moveSpeed;
|
if (this.keyState.shift) currentSpeed *= this.speedMultiplier;
|
if (this.keyState.ctrl) currentSpeed *= this.slowMultiplier;
|
|
const deltaTime = 1.0; // simplified frame delta
|
|
// WASD / QE
|
if (this.keyState.w) this.uavMoveForward(1);
|
if (this.keyState.s) this.uavMoveForward(-1);
|
if (this.keyState.a) camera.moveLeft(currentSpeed * deltaTime);
|
if (this.keyState.d) camera.moveRight(currentSpeed * deltaTime);
|
if (this.keyState.q) camera.moveUp(currentSpeed * deltaTime);
|
if (this.keyState.e) camera.moveDown(currentSpeed * deltaTime);
|
|
// Arrow‑key rotation
|
let rotSpeed = 1;
|
if (this.keyState.shift) rotSpeed *= this.speedMultiplier;
|
if (this.keyState.ctrl) rotSpeed *= this.slowMultiplier;
|
if (holdingPosition) {
|
const distance = Cesium.Cartesian3.distance(holdingPosition, camera.position);
|
const surroundSpeed = 0.005; //环绕速度,角度
|
let cameraHeading = camera.heading;
|
let cameraPitch = camera.pitch;
|
if (this.keyState.up) cameraPitch -= surroundSpeed;
|
if (this.keyState.down) cameraPitch += surroundSpeed;
|
if (this.keyState.left) cameraHeading += surroundSpeed
|
if (this.keyState.right) cameraHeading -= surroundSpeed
|
viewerC.camera.lookAt(holdingPosition, new Cesium.HeadingPitchRange(cameraHeading, cameraPitch, distance));
|
viewerC.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
|
} else {
|
if (this.keyState.up) camera.lookUp(rotateAmount);
|
if (this.keyState.down) camera.lookDown(rotateAmount);
|
if (this.keyState.left) camera.lookLeft(rotateAmount);
|
if (this.keyState.right) camera.lookRight(rotateAmount);
|
}
|
this.resetRoll();
|
// Schedule next frame
|
this.animationFrameId = requestAnimationFrame(this.updateCameraMovement);
|
},
|
calculateDestinationPoint(lon1, lat1, bearing, distance, radius = 6371000) {
|
const toRad = (d) => d * Math.PI / 180;
|
const toDeg = (r) => r * 180 / Math.PI;
|
|
const lat1Rad = toRad(lat1);
|
const lon1Rad = toRad(lon1);
|
const bearingRad = bearing;
|
const angularDistance = distance / radius;
|
|
const lat2Rad = Math.asin(
|
Math.sin(lat1Rad) * Math.cos(angularDistance) +
|
Math.cos(lat1Rad) * Math.sin(angularDistance) * Math.cos(bearingRad)
|
);
|
const lon2Rad = lon1Rad + Math.atan2(
|
Math.sin(bearingRad) * Math.sin(angularDistance) * Math.cos(lat1Rad),
|
Math.cos(angularDistance) - Math.sin(lat1Rad) * Math.sin(lat2Rad)
|
);
|
const lon2Norm = ((lon2Rad + 3 * Math.PI) % (2 * Math.PI)) - Math.PI;
|
|
return { lon: toDeg(lon2Norm), lat: toDeg(lat2Rad) };
|
},
|
uavMoveForward(speed) {
|
const camera = viewerC.camera;
|
const carto = Cesium.Cartographic.fromCartesian(camera.position);
|
const lon = Cesium.Math.toDegrees(carto.longitude);
|
const lat = Cesium.Math.toDegrees(carto.latitude);
|
const height = carto.height;
|
const dest = this.calculateDestinationPoint(lon, lat, camera.heading, speed);
|
camera.setView({
|
destination: Cesium.Cartesian3.fromDegrees(dest.lon, dest.lat, height),
|
orientation: {
|
heading: camera.heading,
|
pitch: camera.pitch,
|
roll: 0,
|
},
|
});
|
},
|
resetRoll() {
|
const camera = viewerC.camera;
|
camera.setView({
|
destination: camera.destination,
|
orientation: {
|
heading: camera.heading,
|
pitch: camera.pitch,
|
roll: 0,
|
},
|
});
|
},
|
|
resetPitch(amount) {
|
if (amount === undefined) amount = 0.1;
|
const camera = viewerC.camera;
|
camera.setView({
|
destination: camera.destination,
|
orientation: {
|
heading: camera.heading,
|
pitch: Cesium.Math.toRadians(amount),
|
roll: 0,
|
},
|
});
|
},
|
|
resetView() {
|
// Fly back to the initial view (home) in 1 second
|
viewerC.camera.flyHome(1.0);
|
},
|
move_measure_point(){
|
CesiumSurvey.measureMovePoint(viewerM,'moveResultCon');
|
},
|
cammove_measure_point(){
|
CesiumSurvey.cammeasureMovePoint(viewerM,'cammoveResultCon');
|
},
|
renderData(){
|
this.$emit('renderData',viewerM)
|
},
|
mergePoint(){
|
let allEntities = viewerM.entities.values; // 所有实体对象组成的数组
|
const grouped = {};
|
//所有实体对象组成的数组转换成左侧树需要的格式
|
allEntities.forEach(item => {
|
const match = item.id.match(/(groundPoiId|aerialPoiId)(\d+)/);
|
if (match) {
|
const type = match[1]; // groundPoiId or aerialPoiId
|
const index = match[2];
|
if (!grouped[index]) grouped[index] = {};
|
grouped[index][type] = item.position;
|
}
|
})
|
const result = Object.keys(grouped).map((key, idx) => {
|
const group = grouped[key];
|
const positionGround = group.groundPoiId.getValue(Cesium.JulianDate.now())
|
const positionAerialPo = group.aerialPoiId.getValue(Cesium.JulianDate.now())
|
const groundPos = Cesium.Cartographic.fromCartesian(positionGround);
|
const aerialPos = Cesium.Cartographic.fromCartesian(positionAerialPo);
|
return {
|
id: this.genId(),
|
label: `地面点${idx}`,
|
longitude: Cesium.Math.toDegrees(groundPos.longitude),
|
latitude: Cesium.Math.toDegrees(groundPos.latitude),
|
height: groundPos.height,
|
children: [
|
{
|
id: this.genId(),
|
label: `空中点${idx}`,
|
longitude: Cesium.Math.toDegrees(aerialPos.longitude),
|
latitude: Cesium.Math.toDegrees(aerialPos.latitude),
|
height: aerialPos.height
|
}
|
]
|
};
|
});
|
this.$emit('mergePoint',result,this.mergeNumber,viewerM)
|
},
|
genId() {
|
return (Date.now().toString(16) + Math.random().toString(16).slice(2, 10)).slice(0, 16);
|
},
|
convertPosition(position) {
|
const cartesian = new Cesium.Cartesian3(position.x, position.y, position.z);
|
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
return {
|
longitude: Cesium.Math.toDegrees(cartographic.longitude),
|
latitude: Cesium.Math.toDegrees(cartographic.latitude),
|
height: cartographic.height
|
};
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
.cesium-example{
|
height: calc(100vh - 185px);
|
}
|
#cesiumContainer {
|
margin: 0;
|
padding: 0;
|
width: 60%;
|
height: calc(100vh - 205px);
|
}
|
#cesiumCamera {
|
position: absolute;
|
z-index: 2;
|
background-color: rgba(47, 53, 60, 1);
|
padding: 0 5px;
|
right: 0px;
|
top: 0px;
|
margin: 0;
|
width: 33%;
|
height: calc(100vh - 400px);
|
border: 1px solid #000;
|
}
|
.cesiumBotton {
|
position: absolute;
|
z-index: 2;
|
background-color: rgb(239, 242, 245);
|
/* padding: 0 5px; */
|
margin-top: 10px;
|
right: 0px;
|
bottom: 30px;
|
margin: 0;
|
width: 33%;
|
height: calc(30% - 30px);
|
}
|
.cesiumButtonGroup{
|
margin-top: 10px;
|
margin-left: 10px;
|
}
|
.moveResult{position:absolute;z-index:2;background-color:rgba(47,53,60,1);padding:0 5px;right:50%;bottom:30px;
|
border:1px solid rgba(255,255,255,.1);box-sizing:content-box;width:220px;height:30px;font-size:14px;text-align:center}
|
.cammoveResult{position:absolute;z-index:2;background-color:rgba(47,53,60,1);padding:0 5px;right:calc(50% - 40px);bottom:30px;
|
border:1px solid rgba(255,255,255,.1);box-sizing:content-box;width:400px;height:30px;font-size:14px;text-align:center}
|
.moveResultCon{margin-top:4px}
|
.cammoveResultCon{margin-top:4px;color: white;}
|
.box_lt{width:10px;height:10px;position:absolute;border-top:2px solid #00d3e7;border-left:2px solid #00d3e7;left:0px;top:0px;}
|
.box_rt{width:10px;height:10px;position:absolute;border-top:2px solid #00d3e7;border-right:2px solid #00d3e7;right:0px;top:0px;}
|
.box_rb{width:10px;height:10px;position:absolute;border-bottom:2px solid #00d3e7;border-right:2px solid #00d3e7;right:0px;bottom:0px;}
|
.box_lb{width:10px;height:10px;position:absolute;border-bottom:2px solid #00d3e7;border-left:2px solid #00d3e7;left:0px;bottom:0px;}
|
</style>
|
