<template>
|
<div style="height: 100%; background: transparent">
|
<el-collapse v-model="activeName" accordion>
|
<el-collapse-item title="坐标定位" name="1">
|
<el-form :inline="true" style="font-color: 0; text-align: center" label-position="right">
|
<el-form-item label="经度:" class="input-item">
|
<el-input size="small" placeholder="请输入内容" v-model="longitude" clearable>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="纬度:" class="input-item">
|
<el-input size="small" placeholder="请输入内容" v-model="latitude" clearable>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="高度:" class="input-item">
|
<el-input size="small" placeholder="请输入内容" v-model="altitude" clearable>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<div class="buttongroups">
|
<el-button size="small" @click="getCoordinate">图上拾取</el-button>
|
<el-button size="small" @click="locationCoordinate">坐标定位</el-button>
|
<!-- <el-button size="small" @click="getCameraParams">当前相机位置</el-button> -->
|
</div>
|
</el-collapse-item>
|
<el-collapse-item title="飞行漫游" name="2">
|
<div class="buttongroups">
|
<el-button size="small" @click="drawPath">地面漫游</el-button>
|
<el-button size="small" @click="setPointFly">定点绕飞</el-button>
|
</div>
|
<el-divider></el-divider>
|
|
<el-form :inline="true" style="color: white; text-align: left; width: 100%; padding: 15px" label-position="right">
|
<el-form-item label="键盘漫游速度：" class="input-item" style="display: flex;flex-direction: column;align-items: center;">
|
<el-slider v-model="plusvalue" :min="-3" :max="4" :format-tooltip="formatSpeedTip" style="width:160px"
|
:step="1" @change="speedChange" :marks="speedMarks"></el-slider>
|
</el-form-item>
|
</el-form>
|
<!-- <div style="margin-left:20px;color:white">键盘手动漫游</div>
|
<div class="buttongroups">
|
<el-button size="small" @click="startKeyCamera">启动键盘</el-button>
|
<el-button size="small" @click="stopKeyCamera">停止键盘</el-button>
|
</div> -->
|
</el-collapse-item>
|
|
<el-collapse-item title="更新模型位置" name="3">
|
|
<el-form :inline="true" style="font-color: 0; text-align: center" label-position="left" label-width="66px">
|
<el-form-item label="经度:" class="input-item">
|
<el-input size="small" placeholder="请输入内容" v-model="longitudeNew" clearable>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="纬度:" class="input-item">
|
<el-input size="small" placeholder="请输入内容" v-model="latitudeNew" clearable>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="高度:" class="input-item">
|
<el-input size="small" placeholder="请输入内容" v-model="altitudeNew" clearable>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="缩放:" class="input-item">
|
<el-input size="small" placeholder="请输入内容" v-model="opt.scale" clearable>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="x轴旋转:" class="input-item">
|
<el-input size="small" placeholder="请输入内容" v-model="opt.rx" clearable>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="y轴旋转:" class="input-item">
|
<el-input size="small" placeholder="请输入内容" v-model="opt.ry" clearable>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="z轴旋转:" class="input-item">
|
<el-input size="small" placeholder="请输入内容" v-model="opt.rz" clearable>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<div class="buttongroups">
|
<el-button size="small" @click="update3dtiles">更新位置</el-button>
|
</div>
|
<el-divider></el-divider>
|
<div class="buttongroups">
|
<el-button size="small" @click="startKeyOpt">键盘手动更新</el-button>
|
<el-button size="small" @click="cancelKeyOpt">停止键盘操作</el-button>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</template>
|
<script>
|
import { mapState, mapActions } from "vuex";
|
import * as SmartEarth from "../../../../public/CimSDK/index.js"
|
let Cesium = SmartEarth.Cesium;
|
export default {
|
data() {
|
this.viewer = null;
|
this.spaceClockLSR = null;
|
return {
|
activeName: "1",
|
longitude: 0,
|
latitude: 0,
|
altitude: 0,
|
|
longitudeNew: 0,
|
latitudeNew: 0,
|
altitudeNew: 0,
|
opt: {
|
scale: null,
|
rx: null,
|
ry: null,
|
rz: null,
|
},
|
currentTiles: null,
|
currentBim: null,
|
originalModelTransform: null,
|
originalPosition: { x: 0, y: 0, height: 0, roll: 0 },
|
isbim: false,
|
wPress: false,
|
aPress: false,
|
sPress: false,
|
dPress: false,
|
qPress: false,
|
ePress: false,
|
rPress: false,
|
tPress: false,
|
arrowUpPress: false,
|
arrowDownPress: false,
|
arrowLeftPress: false,
|
arrowRightPress: false,
|
|
plusvalue: 0,
|
|
moveSpeed: 0.3,
|
rotateSpeed: 1,
|
rotateChange: false,
|
moveCameraTimeHandle: 0,
|
isOnflying: false,
|
speedMarks: {
|
"0": '初始',
|
"3": '4倍',
|
"-3": '0.1倍'
|
}
|
};
|
},
|
watch: {
|
currentSelectNode: {
|
handler(newVal, oldVal) {
|
let item = newVal;
|
if (item.sourceType === 'bim') {
|
this.isbim = true;
|
this.currentBim = item;
|
if (oldVal === null || newVal.dataId !== oldVal.dataId) {
|
this.longitudeNew = Number(this.currentBim.x);
|
this.latitudeNew = Number(this.currentBim.y);
|
this.altitudeNew = Number(this.currentBim.height);
|
this.opt.rz = Number(this.currentBim.roll);
|
}
|
} else {
|
this.isbim = false;
|
let tiles = sgworld.ProjectTree.getObject(item.id);
|
if (tiles && tiles.treeobj.type === "3DTilesets") {
|
this.currentTiles = tiles.item;
|
this.longitudeNew = tiles.lon;
|
this.latitudeNew = tiles.lat;
|
this.altitudeNew = tiles.height;
|
}
|
}
|
},
|
deep: false,
|
immediate: false, // 初次监听即执行
|
},
|
},
|
computed: {
|
...mapState(['currentSelectNode'])
|
},
|
methods: {
|
getCoordinate() {
|
let handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
let that = this;
|
handler.setInputAction((event) => {
|
console.log(event);
|
var _cartesian = Viewer.scene.pickPosition(event.position);
|
if (_cartesian) {
|
let cartographic = Cesium.Cartographic.fromCartesian(_cartesian);
|
that.longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
that.latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
that.altitude = cartographic.height;
|
}
|
handler && handler.destroy();
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
locationCoordinate() {
|
if (sgworld) {
|
let l = Number(this.longitude);
|
let w = Number(this.latitude);
|
let h = Number(this.altitude);
|
if (l === 0 || w === 0 || h === 0) return;
|
sgworld.Navigate.flyToPosition(l, w, h);
|
}
|
},
|
getCameraParams() {
|
let viewer = sgworld._Viewer;
|
|
var lon = Cesium.Math.toDegrees(viewer.camera.positionCartographic.longitude);
|
var lat = Cesium.Math.toDegrees(viewer.camera.positionCartographic.latitude);
|
var height = viewer.camera.positionCartographic.height;//Cesium.Math.toDegrees作用是把弧度转换成度数
|
var heading = viewer.camera.heading;
|
var pitch = viewer.camera.pitch;
|
var roll = viewer.camera.roll;
|
console.log(`"flyTo":[${lon},${lat},${height},${heading},${pitch},${roll}],`);
|
},
|
|
//地面漫游
|
drawPath() {
|
sgworld.Command.execute(2, 3, "", (data) => {
|
data.showPoint = false;
|
data.showLine = true;
|
data.mode = 1;
|
window.PathAnimationData = {
|
flyData: data,
|
};
|
window.PathAnimationData.winIndex = layer.open({
|
type: 2,
|
title: "路径动画",
|
shade: false,
|
area: ["352px", "690px"],
|
offset: "r",
|
skin: "other-class1",
|
content: SmartEarthRootUrl + "Workers/path/Path.html",
|
end: function () {
|
PathAnimationData.fly && PathAnimationData.fly.exit();
|
PathAnimationData.fly = null;
|
},
|
});
|
});
|
},
|
// 定点绕飞
|
setPointFly() {
|
if (window.PathAnimationData && window.PathAnimationData.fly) {
|
this.$alert("正在执行漫游场景，请先关闭漫游再执行定点绕飞。")
|
} else {
|
|
//绕飞前删除前一次绕飞，避免影响
|
for (let i = 0; i < sgworld.Viewer.clock.onTick._listeners.length; i++) {
|
let lsr = sgworld.Viewer.clock.onTick._listeners[i];
|
if (lsr.name) {
|
sgworld.Viewer.clock.onTick.removeEventListener(lsr);
|
for (let j = 0; j < sgworld.Viewer.entities.values.length; j++) {
|
let ee = sgworld.Viewer.entities.values[j];
|
if (ee.name === "定点") {
|
sgworld.Viewer.entities.remove(ee);
|
}
|
}
|
}
|
}
|
this.isOnflying = false;
|
sgworld.Viewer.clock.onTick.removeEventListener(this.spaceClockLSR);
|
sgworld.Analysis.setPointFly();
|
document.removeEventListener('keydown', this.spacekeydown, false);
|
document.addEventListener('keydown', this.spacekeydown, false);
|
}
|
},
|
spacekeydown(e) {
|
switch (e.code) {
|
case 'Escape':
|
document.removeEventListener('keydown', this.spacekeydown, false);
|
for (let i = 0; i < sgworld.Viewer.clock.onTick._listeners.length; i++) {
|
let lsr = sgworld.Viewer.clock.onTick._listeners[i];
|
if (lsr.name) {
|
sgworld.Viewer.clock.onTick.removeEventListener(lsr);
|
for (let j = 0; j < sgworld.Viewer.entities.values.length; j++) {
|
let ee = sgworld.Viewer.entities.values[j];
|
if (ee.name === "定点") {
|
sgworld.Viewer.entities.remove(ee);
|
}
|
}
|
}
|
}
|
this.spaceClockLSR = null;
|
break;
|
case 'Space':
|
// sgworld.Viewer.clock.shouldAnimate = this.isOnflying; //这种暂停方式更简单，但可能影响其他时间功能
|
this.isOnflying = !this.isOnflying;
|
if (this.isOnflying === true) {
|
for (let i = 0; i < sgworld.Viewer.clock.onTick._listeners.length; i++) {
|
let lsr = sgworld.Viewer.clock.onTick._listeners[i];
|
if (lsr.name) {
|
this.spaceClockLSR = lsr;
|
sgworld.Viewer.clock.onTick.removeEventListener(lsr);
|
}
|
}
|
} else {
|
if (this.spaceClockLSR)
|
sgworld.Viewer.clock.onTick.addEventListener(this.spaceClockLSR);
|
}
|
break;
|
default: break;
|
}
|
},
|
|
update3dtiles() {
|
|
var position = Cesium.Cartesian3.fromDegrees(
|
this.longitudeNew,
|
this.latitudeNew,
|
this.altitudeNew
|
);
|
if (!position) {
|
alert("缺少坐标信息！")
|
return;
|
}
|
let opt = this.opt;
|
// 建立从局部到世界的坐标矩阵
|
var mtx = Cesium.Transforms.eastNorthUpToFixedFrame(position);
|
|
if (opt.scale) {
|
opt.scale = opt.scale || 1; // 缩放系数 默认为1
|
Cesium.Matrix4.multiplyByUniformScale(mtx, opt.scale, mtx);
|
}
|
// 表示绕x轴旋转
|
if (opt.rx) {
|
var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(opt.rx)); //绕x轴旋转
|
var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
|
Cesium.Matrix4.multiply(mtx, rotationX, mtx);
|
}
|
// 表示绕x轴旋转
|
if (opt.ry) {
|
var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(opt.ry)); //绕x轴旋转
|
var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
|
Cesium.Matrix4.multiply(mtx, rotationY, mtx);
|
}
|
// 表示绕x轴旋转
|
if (opt.rz) {
|
var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(opt.rz)); //绕x轴旋转
|
var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
|
Cesium.Matrix4.multiply(mtx, rotationZ, mtx);
|
}
|
if (this.isbim) {
|
let bim = window.BIM;
|
if (bim) {
|
let modelTransform = Cesium.Matrix4.toArray(mtx);
|
bim.SetModelTransform(this.currentBim.dataId, modelTransform);
|
}
|
} else {
|
let tileset = this.currentTiles;
|
let opt = this.opt;
|
if (!tileset) {
|
alert("缺少模型！")
|
return;
|
}
|
tileset._root.transform = mtx;
|
}
|
|
},
|
moveFun(e) {
|
var latitudeCount = 0.0001;
|
var heightCount = 0.1;
|
var degreeCount = 0.1;
|
var scaleCount = 0.0005;
|
var cheage = false;
|
switch (e.code) {
|
// case 'KeyW':
|
case 'KeyI':
|
this.latitudeNew = this.latitudeNew + latitudeCount;
|
cheage = true;
|
break;
|
//case 'KeyS':
|
case 'KeyK':
|
this.latitudeNew = this.latitudeNew - latitudeCount;
|
cheage = true;
|
break;
|
//case 'KeyD':
|
case 'KeyL':
|
this.longitudeNew = this.longitudeNew + latitudeCount;
|
cheage = true;
|
break;
|
//case 'KeyA':
|
case 'KeyJ':
|
this.longitudeNew = this.longitudeNew - latitudeCount;
|
cheage = true;
|
break;
|
//case 'KeyQ':
|
case 'KeyU':
|
this.altitudeNew = this.altitudeNew + heightCount;
|
cheage = true;
|
break;
|
//case 'KeyE':
|
case 'KeyO':
|
this.altitudeNew = this.altitudeNew - heightCount;
|
cheage = true;
|
break;
|
// case 'KeyZ':
|
// scale -= scaleCount;
|
// cheage = true;
|
// break;
|
// case 'KeyX':
|
// scale += scaleCount;
|
// cheage = true;
|
// break;
|
// case 'ArrowUp':
|
// rotationHeading -= degreeCount;
|
// cheage = true;
|
// break;
|
// case 'ArrowDown':
|
// rotationHeading += degreeCount;
|
// cheage = true;
|
// break;
|
// case 'ArrowLeft':
|
// rotationPitch -= degreeCount;
|
// cheage = true;
|
// break;
|
// case 'ArrowRight':
|
// rotationPitch += degreeCount;
|
// cheage = true;
|
// break;
|
case 'KeyR':
|
this.opt.rz = this.opt.rz - degreeCount;
|
cheage = true;
|
break;
|
case 'KeyT':
|
this.opt.rz = this.opt.rz + degreeCount;
|
cheage = true;
|
break;
|
default:
|
break;
|
}
|
if (cheage) {
|
let position = Cesium.Cartesian3.fromDegrees(
|
this.longitudeNew || 0,
|
this.latitudeNew || 0,
|
this.altitudeNew || 0
|
);
|
let modelTransform = Cesium.Matrix4.toArray(Cesium.Transforms.eastNorthUpToFixedFrame(position));
|
let rz = Cesium.Math.toRadians(this.opt.rz || 0);
|
var rotationZ = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(rz));
|
Cesium.Matrix4.multiply(modelTransform, rotationZ, modelTransform);
|
if (this.isbim) {
|
let bim = window.BIM;
|
if (bim) {
|
bim.SetModelTransform(this.currentBim.dataId, modelTransform);
|
}
|
} else {
|
let tileset = this.currentTiles;
|
tileset._root.transform = modelTransform;
|
}
|
}
|
},
|
startKeyOpt() {
|
document.removeEventListener('keydown', this.moveFun, false);
|
document.addEventListener('keydown', this.moveFun, false);
|
// let position = Cesium.Cartesian3.fromDegrees(
|
// this.currentBim.x || 0,
|
// this.currentBim.y || 0,
|
// this.currentBim.height || 0
|
// );
|
// this.originalPosition = position;
|
// let modelTransform = Cesium.Matrix4.toArray(Cesium.Transforms.eastNorthUpToFixedFrame(position));
|
// let rz = Cesium.Math.toRadians(this.currentBim.roll || 0);
|
// var rotationZ = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(rz));
|
// Cesium.Matrix4.multiply(modelTransform, rotationZ, modelTransform);
|
// this.originalModelTransform = modelTransform;
|
// this.spaceTimeHandle = setInterval(() => {
|
// if (this.spacePress) {
|
|
// }});
|
},
|
cancelKeyOpt() {
|
document.removeEventListener('keydown', this.moveFun, false);
|
},
|
startKeyCamera() {
|
if (!this.viewer)
|
this.viewer = sgworld._Viewer;
|
this.enable();
|
},
|
stopKeyCamera() {
|
this.disable();
|
},
|
keyDown(e) {
|
switch (e.code) {
|
case 'KeyW':
|
this.wPress = true
|
break;
|
case 'KeyS':
|
this.sPress = true
|
break;
|
case 'KeyD':
|
this.dPress = true
|
break;
|
case 'KeyA':
|
this.aPress = true
|
break;
|
case 'KeyQ':
|
this.qPress = true
|
break;
|
case 'KeyE':
|
this.ePress = true
|
break;
|
case 'KeyZ':
|
this.moveSpeed *= 1.1
|
break;
|
case 'KeyX':
|
this.moveSpeed *= 0.9
|
break;
|
case 'KeyC':
|
this.rotateSpeed *= 1.1
|
break;
|
case 'KeyV':
|
this.rotateSpeed *= 0.9
|
break;
|
case 'KeyR':
|
this.rPress = true
|
break;
|
case 'KeyT':
|
this.tPress = true
|
break;
|
case 'ArrowUp':
|
this.arrowUpPress = true
|
break;
|
case 'ArrowDown':
|
this.arrowDownPress = true
|
break;
|
case 'ArrowLeft':
|
this.arrowLeftPress = true
|
break;
|
case 'ArrowRight':
|
this.arrowRightPress = true
|
break;
|
default:
|
break;
|
}
|
},
|
keyUp(e) {
|
switch (e.code) {
|
case 'KeyW':
|
this.wPress = false
|
break;
|
case 'KeyS':
|
this.sPress = false
|
break;
|
case 'KeyD':
|
this.dPress = false
|
break;
|
case 'KeyA':
|
this.aPress = false
|
break;
|
case 'KeyQ':
|
this.qPress = false
|
break;
|
case 'KeyE':
|
this.ePress = false
|
break;
|
case 'KeyR':
|
this.rPress = false
|
break;
|
case 'KeyT':
|
this.tPress = false
|
break;
|
case 'ArrowUp':
|
this.arrowUpPress = false
|
break;
|
case 'ArrowDown':
|
this.arrowDownPress = false
|
break;
|
case 'ArrowLeft':
|
this.arrowLeftPress = false
|
break;
|
case 'ArrowRight':
|
this.arrowRightPress = false
|
break;
|
default:
|
break;
|
}
|
},
|
enable() {
|
if (!this.moveCameraTimeHandle) {
|
document.addEventListener('keydown', this.keyDown, false);
|
document.addEventListener('keyup', this.keyUp, false);
|
this.moveCameraTimeHandle = setInterval(() => {
|
if (this.wPress) {
|
this.viewer.camera.moveForward(this.moveSpeed);
|
}
|
if (this.aPress) {
|
this.viewer.camera.moveLeft(this.moveSpeed);
|
}
|
if (this.sPress) {
|
this.viewer.camera.moveBackward(this.moveSpeed);
|
}
|
if (this.dPress) {
|
this.viewer.camera.moveRight(this.moveSpeed);
|
}
|
let positionTemp = this.viewer.camera.positionWC;
|
let orientation = {
|
heading: this.viewer.camera.heading,
|
pitch: this.viewer.camera.pitch,
|
roll: this.viewer.camera.roll,
|
endTransform: Cesium.Matrix4.IDENTITY
|
}
|
this.rotateChange = false;
|
|
if (this.qPress) {
|
let cartographic = Cesium.Cartographic.fromCartesian(positionTemp);
|
positionTemp = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + this.moveSpeed * 2)
|
this.rotateChange = true;
|
}
|
if (this.ePress) {
|
let cartographic = Cesium.Cartographic.fromCartesian(positionTemp);
|
positionTemp = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height - this.moveSpeed * 2)
|
this.rotateChange = true;
|
}
|
if (this.arrowUpPress) {
|
orientation.pitch = Cesium.Math.toRadians(Cesium.Math.toDegrees(this.viewer.camera.pitch) + this.rotateSpeed)
|
this.rotateChange = true;
|
}
|
if (this.arrowDownPress) {
|
orientation.pitch = Cesium.Math.toRadians(Cesium.Math.toDegrees(this.viewer.camera.pitch) - this.rotateSpeed)
|
this.rotateChange = true;
|
}
|
if (this.arrowLeftPress) {
|
orientation.heading = Cesium.Math.toRadians(Cesium.Math.toDegrees(this.viewer.camera.heading) - this.rotateSpeed)
|
this.rotateChange = true;
|
}
|
if (this.arrowRightPress) {
|
orientation.heading = Cesium.Math.toRadians(Cesium.Math.toDegrees(this.viewer.camera.heading) + this.rotateSpeed)
|
this.rotateChange = true;
|
}
|
if (this.rPress) {
|
orientation.roll = Cesium.Math.toRadians(Cesium.Math.toDegrees(this.viewer.camera.roll) + this.rotateSpeed)
|
this.rotateChange = true;
|
}
|
if (this.tPress) {
|
orientation.roll = Cesium.Math.toRadians(Cesium.Math.toDegrees(this.viewer.camera.roll) - this.rotateSpeed)
|
this.rotateChange = true;
|
}
|
if (this.rotateChange) {
|
this.viewer.camera.setView({ destination: positionTemp, orientation: orientation });
|
}
|
}, 20)
|
}
|
},
|
disable() {
|
document.removeEventListener('keydown', this.keyDown, false);
|
document.removeEventListener('keyup', this.keyUp, false);
|
clearInterval(this.moveCameraTimeHandle)
|
this.moveCameraTimeHandle = 0;
|
},
|
formatSpeedTip(val) {
|
let ret = "";
|
if (val === 0) {
|
ret = "1X";
|
} else if (val > 0) {
|
ret = (val + 1) + "X";
|
} else if (val < 0) {
|
let v = 1;
|
for (let i = 0; i > val; i--) {
|
v = (v / 2).toFixed(1);
|
}
|
ret = v + "X";
|
}
|
return ret;
|
},
|
speedChange(val) {
|
this.moveSpeed = 0.3;
|
this.rotateSpeed = 1;
|
if (val > 0) {
|
for (let i = 0; i < val; i++) {
|
this.moveSpeed *= 2;
|
this.rotateSpeed *= 1.5;
|
}
|
} else if (val < 0) {
|
for (let i = 0; i > val; i--) {
|
this.moveSpeed *= 0.5;
|
this.rotateSpeed *= 0.5;
|
}
|
}
|
}
|
|
},
|
destroyed() {
|
document.removeEventListener('keydown', this.moveFun, false);
|
document.removeEventListener('keydown', this.keyDown, false);
|
document.removeEventListener('keyup', this.keyUp, false);
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.input-item {
|
margin: 0px;
|
color: white;
|
|
/deep/ .el-input__inner {
|
-webkit-appearance: none;
|
background-color: #1b1b1b;
|
background-image: none;
|
border-radius: 0px;
|
border: 0;
|
box-sizing: border-box;
|
color: #ffffff;
|
display: inline-block;
|
font-size: inherit;
|
height: 30px;
|
line-height: 30px;
|
outline: 0;
|
padding: 0 15px;
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 100%;
|
}
|
|
/deep/.el-form-item__label {
|
color: #ffffff;
|
}
|
|
/deep/.el-range-input {
|
color: #ffffff;
|
background: transparent;
|
}
|
}
|
|
.buttongroups {
|
margin: 8px auto;
|
text-align: center;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 6px;
|
|
/deep/.el-button {
|
width: 140px;
|
background: transparent;
|
border: none;
|
color: #ffffff;
|
border-radius: 0px;
|
|
width: 199px;
|
height: 26px;
|
background: url("../../../assets/img/small_btn_back.png") no-repeat;
|
background-size: 100% 100%;
|
|
font-size: 11px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #E0E5FA;
|
text-shadow: 0px 1px 4px rgba(5, 28, 55, 0.42);
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
margin: 0px;
|
}
|
}
|
</style>
|
|
<style>
|
.other-class1{
|
border-radius: 5px;
|
background-color:rgba(0, 0, 0, 0.8)!important;
|
border: 1px solid rgba(32,160,255,.6)!important;
|
}
|
</style>
|
