Mars3D-screen_web/src/components/testMap/index.scss

@mixin flex {
	display: flex;
	align-items: center;
}
.map-content {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	background-color: #ccc;
	overflow: hidden;
	.mars3d-container {
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
		border: none;
		overflow: hidden;
	}
	.layer-config {
		width: 360px;
		height: auto;
		min-width: 360px;
		min-height: 420px;
		border: 1px solid #fff;
		position: absolute;
		top: 10px;
		left: 10px;
		padding: 10px 30px 20px;
		.property-column-item {
			display: flex;
			flex-direction: column;
			> span {
				color: #fff;
				font-size: 14px;
			}
		}
		.property-row-item {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			> span {
				color: #fff;
				font-size: 14px;
				margin-right: 5px;
			}
		}
		.operate-btn {
			margin-top: 20px;
		}
	}
	.close-btn {
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
	}
}
:deep() {
	// 全局基础样式
	.cesium-viewer-toolbar {
		top: auto;
		bottom: 35px;
		left: 12px;
		right: auto;
	}

	.cesium-toolbar-button img {
		height: 100%;
		vertical-align: middle;
	}

	.cesium-viewer-toolbar > .cesium-toolbar-button,
	.cesium-navigationHelpButton-wrapper,
	.cesium-viewer-geocoderContainer {
		margin-bottom: 5px;
		float: left;
		clear: both;
		text-align: center;
	}

	.cesium-button {
		background-color: rgba(23, 49, 71, 0.7);
		border: none;
		color: #ffffff;
		fill: #e6e6e6;
		line-height: 32px;
	}

	.cesium-button:hover {
		background-color: rgba(0, 138, 255, 0.7);
		box-shadow: none;
		border: none;
	}

	/**cesium 底图切换面板*/
	.cesium-baseLayerPicker-dropDown {
		bottom: 0;
		left: 40px;
		max-height: 700px;
		margin-bottom: 5px;
		background-color: rgba(23, 49, 71, 0.7);
	}

	/**cesium 帮助面板*/
	.cesium-navigation-help {
		top: auto;
		bottom: 0;
		left: 40px;
		transform-origin: left bottom;
	}

	.cesium-navigation-help-instructions,
	.cesium-navigation-button {
		background-color: rgba(23, 49, 71, 0.8);
	}

	.cesium-navigation-button-selected,
	.cesium-navigation-button-unselected:hover {
		background-color: rgba(23, 49, 71, 1);
	}

	/**cesium 二维三维切换*/
	.cesium-sceneModePicker-wrapper {
		width: auto;
	}

	.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
		float: right;
		margin: 0 3px;
	}

	/**cesium POI查询输入框*/
	.cesium-viewer-geocoderContainer .search-results {
		left: 0;
		right: 40px;
		width: auto;
		z-index: 9999;
	}

	.cesium-geocoder-searchButton {
		background-color: rgba(23, 49, 71, 0.8);
	}

	.cesium-viewer-geocoderContainer .cesium-geocoder-input {
		background-color: rgba(63, 72, 84, 0.7);
	}

	.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
		background-color: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
	}

	.cesium-viewer-geocoderContainer .search-results {
		background-color: rgba(23, 49, 71, 0.8);
	}

	/**cesium info信息框*/
	.cesium-infoBox {
		top: 50px;
		background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
	}

	.cesium-infoBox-title {
		background-color: rgba(23, 49, 71, 0.8);
	}

	/**cesium 任务栏的FPS信息*/
	.cesium-performanceDisplay-defaultContainer {
		top: auto;
		bottom: 35px;
		right: 50px;
	}

	.cesium-performanceDisplay-ms,
	.cesium-performanceDisplay-fps {
		color: #fff;
	}

	/**cesium tileset调试信息面板*/
	.cesium-viewer-cesiumInspectorContainer {
		top: 10px;
		left: 10px;
		right: auto;
	}

	.cesium-cesiumInspector {
		background-color: rgba(23, 49, 71, 0.8);
	}

	/**覆盖mars3d内部控件的颜色等样式*/
	.mars3d-compass .mars3d-compass-outer {
		fill: rgba(23, 49, 71, 0.8);
	}

	.mars3d-contextmenu-ul,
	.mars3d-sub-menu {
		background-color: rgba(23, 49, 71, 0.8);
	}

	.mars3d-contextmenu-ul > li > a:hover,
	.mars3d-sub-menu > li > a:hover,
	.mars3d-contextmenu-ul > li > a:focus,
	.mars3d-sub-menu > li > a:focus,
	.mars3d-contextmenu-ul > li > .active,
	.mars3d-sub-menu > li > .active {
		background-color: var(--mars-hover-btn-bg, #3ea6ff);
	}

	.mars3d-contextmenu-ul > .active > a,
	.mars3d-sub-menu > .active > a,
	.mars3d-contextmenu-ul > .active > a:hover,
	.mars3d-sub-menu > .active > a:hover,
	.mars3d-contextmenu-ul > .active > a:focus,
	.mars3d-sub-menu > .active > a:focus {
		background-color: var(--mars-hover-btn-bg, #3ea6ff);
	}

	/* Popup样式*/
	.mars3d-popup-color {
		color: var(--mars-text-color, #ffffff);
	}

	.mars3d-popup-background {
		background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
	}

	.mars3d-tooltip {
		color: var(--mars-text-color, #ffffff);
		background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
		border: 1px solid var(--mars-bg-base, rgba(63, 72, 84, 0.9));
	}

	.mars3d-tooltip-top:before {
		border-top-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
	}

	.mars3d-tooltip-bottom:before {
		border-bottom-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
	}

	.mars3d-tooltip-left:before {
		border-left-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
	}

	.mars3d-tooltip-right:before {
		border-right-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
	}

	.mars3d-template-content label {
		padding-right: 6px;
	}

	.mars3d-template-titile {
		color: var(--mars-base-color, #ffffff);
		border-bottom: 1px solid var(--mars-hover-btn-bg, #3ea6ff);
	}

	.mars3d-template-titile a {
		font-size: 16px;
		color: var(--mars-msg-title-color, #c7d3dd);
	}

	.mars3d-popup-btn-custom {
		padding: 3px 10px;
		border: 1px solid #209ffd;
		background: #209ffd1c;
	}

	.mars3d-popup-content {
		margin: 15px;
	}

	.mars3d-divGraphic:hover {
		z-index: 999 !important;
	}
}