LSQZrzyAPP/css/cr.map.css

/**
 * 作者：王成
 * 创建日期：2021年12月15日
 * 操作系统：MAC
 * 描述：地图页面的通用样式
 */

.jt-map-tools .wc-map-div-btn:first-child {
	border-radius: 0px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.jt-map-tools .wc-map-div-btn {
	border-radius: 0px;
}

.jt-map-tools .wc-map-div-btn:last-child {
	border-radius: 0px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* 地图界面的按钮容器样式 */
.wc-map-div-btn {
	position: relative;
	width: 40px;
	height: 40px;
	background-color: rgba(0, 0, 0, 0.75);
	padding: 4px;
	border-width: 0px;
	margin-top: 0px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 按钮内图标样式 */
.wc-map-div-btn>span:nth-child(1) {
	font-size: 18px;
	background: linear-gradient(to bottom, rgb(255, 255, 0) 50%, rgb(76, 245, 255) 50%);
	-webkit-background-clip: text;
	color: transparent;
}

.wc-map-div-btn>span:nth-child(2) {
	font-size: 7px;
	color: rgb(255, 255, 255);
	margin-top: 3px;
}

/* 本页独立导航栏样式 */
.cr-bar {
	background-color: rgba(36, 63, 109, 1.0) !important;
	border: solid 0px rgb(255, 255, 255) !important;
	box-shadow: none !important;
}

/* 查询输入框样式 */
.mui-search input {
	background-color: rgba(174, 186, 208, 0.85) !important;
	border: solid 1px rgba(170, 176, 198, 0.85) !important;
	color: rgb(33, 47, 100) !important;
	font-size: 13px !important;
	border-radius: 22px !important;
}

/* 输入框提示文字颜色 */
.mui-search .mui-placeholder {
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: 12px;
}

/* 弹框的高度 */
.mui-popover {
	height: 300px;
}

/* 3D地图中定位图层的按钮样式 */
.cr-layer-control-location {
	display: inline-block;
	position: absolute;
	height: 26px;
	width: 26px;
	line-height: 26px;
	top: 6px;
	right: 50px;
	text-align: center;
	font-size: 18px !important;
	color: #ffffff;
	background: linear-gradient(to bottom, rgb(57, 124, 229) 50%, rgb(69, 69, 69) 50%);
	-webkit-background-clip: text;
	color: transparent;
}

/* 修改图层控制标题 */
h5 {
	font-size: 15px;
	color: black;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	text-align: left;
	margin: 0px !important;
	padding-left: 10px !important;
}

/* 坐标查询弹框 */
.wc-popover-coord-input {
	height: 180px !important;
	background-color: rgba(36, 63, 109, 1) !important;
	border-top-right-radius: 10px !important;
	border-top-left-radius: 10px !important;
}

/* 案件查询底部弹出框 */
.wc-popover-case {
	height: 260px !important;
	/* background-color: rgb(230, 230, 230) !important; */
	background-color: rgba(36, 63, 109, 1) !important;
	border-top-right-radius: 10px !important;
	border-top-left-radius: 10px !important;
	display: flex !important;
	flex-direction: column !important;
}

.wc-popover-case-property {
	height: 300px !important;
}

/* 行样式 */
.wc-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 10px;
	border-radius: 5px;
	margin-left: 10px;
	margin-right: 10px;
	width: calc(100% - 20px);
}

/* 输入行样式 */
.wc-input-row {
	border: solid 1px rgba(255, 255, 255, 0.6) !important;
	height: 30px !important;
}

/* 输入行图标样式 */
.wc-input-row span:nth-child(1) {
	font-size: 14px;
	margin-left: 10px;
	margin-right: 5px;
	background: linear-gradient(to bottom, rgb(0, 255, 0) 50%, rgb(205, 197, 0) 50%);
	-webkit-background-clip: text;
	color: transparent;
}

/* 输入行文字标签样式 */
.wc-input-row span:nth-child(2) {
	color: rgb(255, 255, 255);
	font-size: 14px;
	margin-right: 10px;
}

/* 输入行输入容器样式 */
.wc-input-row .mui-input-row {
	width: calc(100% - 100px) !important;
	margin: 0px !important;
}

/* 输入行输入框样式 */
.wc-input-row .mui-input-row .mui-input {
	margin: 0px !important;
	background-color: rgba(255, 255, 255, 0) !important;
	border: solid 1px rgba(255, 255, 255, 0.0) !important;
	font-size: 14px !important;
}

/* 输入框提示文字样式 */
.wc-input-row .mui-input-row .mui-input::placeholder {
	font-size: 14px;
}

/**
 * 
 */

/* 地图窗口样式 */
.map3d {
	position: relative;
	background-color: rgb(128, 128, 128);
	height: calc(100vh - 0px);
	width: calc(100vw - 0px);
}

/* 底部信息栏样式 */
.divButtomInfo {
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: 160px;
	height: 110px;
	background-color: rgba(0, 0, 0, 0.45);
	border-radius: 5px;
	font-size: 12px;
	color: rgba(255, 255, 255, 1.0);
	display: flex;
	flex-direction: column;
	padding: 5px;
}

/* 3D 地图底部展示信息内部div样式 */
.divButtomInfo>div {
	height: 25px;
	line-height: 25px;
}

/* 3D 地图底部展示信息内部div 内部标签标题样式 */
.divButtomInfo>div>span:nth-child(1) {
	display: inline-block;
	width: 45px;
	text-align: right;
	margin-right: 5px;
	font-family: 'TTTGB-Medium';
}

/* 3D 地图底部展示信息内部div 内部标签值样式 */
.divButtomInfo>div>span:nth-child(2) {
	color: yellowgreen;
	font-family: 'TTTGB-Medium';
}

/* 三维地图 气泡窗口 容器样式 */
.cr-popup {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 110px;
	height: 50px;
	border: 0px solid rgb(255, 0, 0);
	position: absolute;
	background-color: rgba(174, 186, 208, 0.65);
	border-radius: 10px;
	top: -300px;
	left: -500px;
}

/* 三维地图 气泡窗口 小箭头样式 */
.cr-popup .arrow {
	position: absolute;
	width: 30px;
	height: 30px;
	bottom: -30px;
	left: 45px;
}

/* 三维地图 气泡窗口 小箭头样式 */
.cr-popup .arrow * {
	display: block;
	border-width: 10px;
	position: absolute;
	border-style: dashed dashed dashed dashed;
	font-size: 0;
	line-height: 0;
}

/* 三维地图 气泡窗口 小箭头样式 */
.cr-popup .arrow em {
	border-color: rgba(174, 186, 208, 0.65) transparent transparent transparent;
}

/* 案件查询按钮样式 */
.wc-btn-case-query {
	position: relative;
	border-radius: 3px;
	margin-left: 3px;
	margin-right: 3px;
	height: 34px !important;
	background-color: rgb(115, 140, 238) !important;
	border: solid 0px rgb(255, 255, 255) !important;
}

/* 三维地图 气泡提示信息窗口 容器样式 */
.cr-tooltip-popup {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 180px;
	height: 40px;
	border: 0px solid rgb(255, 0, 0);
	position: absolute;
	background-color: rgba(174, 186, 208, 0.65);
	border-radius: 20px;
	top: 200px;
	left: 300px;
}

/* 三维地图 气泡提示信息窗口 标题样式 */
.cr-tooltip-popup .title {
	color: rgb(255, 255, 255);
	font-size: 10px;
	font-family: 'TTTGB-Medium';
}

/* 三维地图 气泡提示信息窗口 上标样式 */
.cr-tooltip-popup>div>sup {
	color: rgb(255, 255, 0);
	font-size: 5px !important;
	top: -6px;
	font-family: 'TTTGB-Medium';
}

/* 三维地图 气泡提示信息窗口 小箭头样式 */
.cr-tooltip-popup .arrow {
	position: absolute;
	width: 30px;
	height: 30px;
	bottom: -30px;
	left: calc(calc(180px - 20px) / 2);
	/* 这很重要 主要是为了计算小箭头的位置 */
}

/* 三维地图 气泡提示信息窗口 竖线样式 */
.cr-tooltip-popup .line {
	position: absolute;
	width: 30px;
	height: 50px;
	background-color: rgba(0, 0, 0, 0.0);
	bottom: -60px;
	border-right: dashed 2px rgb(255, 255, 0);
	left: calc(calc(180px) / 2 - 29px);
}

/* 三维地图 气泡提示信息窗口 底部小圆圈样式 */
.cr-tooltip-popup .circle {
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: rgba(0, 0, 0, 0.0);
	bottom: calc(-60px - 10px);
	left: calc(calc(180px - 10px) / 2);
	border: solid 2px rgb(255, 255, 0);
	border-radius: 10px;
}

/* 三维地图 气泡提示信息窗口 小箭头样式 */
.cr-tooltip-popup .arrow * {
	display: block;
	border-width: 10px;
	position: absolute;
	border-style: dashed dashed dashed dashed;
	font-size: 0;
	line-height: 0;
}

/* 三维地图 气泡提示信息窗口 小箭头样式 */
.cr-tooltip-popup .arrow em {
	border-color: rgba(174, 186, 208, 0.65) transparent transparent transparent;
}


/**
 * 三维地图标签样式
 */


/* 三维标签 容器样式 */
.jt-tooltip-popup {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 90px;
	top: 200px;
	left: 300px;
}

/* 三维标签 容器样式 */
.jt-tooltip-popup>div:nth-child(1) {
	border: 0px solid rgb(255, 0, 0);
	width: 100%;
	height: 30px;
	background-image: linear-gradient(to right, rgba(171, 108, 190, 0.65), rgba(138, 227, 196, 0.65));
	border-radius: 5px;
	border: dashed 1px rgb(255, 255, 0);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 12px;
}

/* 三维标签 容器内部标题样式 */
.jt-tooltip-popup .title {
	color: rgb(10, 10, 10);
	font-size: 10px;
	font-family: 'TTTGB-Medium';
	text-decoration: underline;
}

/* 三维标签 容器内部状态样式 */
.jt-tooltip-popup .state {
	color: rgb(255, 255, 255);
	font-size: 10px;
	font-family: 'TTTGB-Medium';
}

/* 三维标签 容器内部面积样式 */
.jt-tooltip-popup .area {
	color: rgb(120, 55, 190);
	font-size: 10px;
	font-family: 'TTTGB-Medium';
	margin-left: 5px;
}


/* 三维标签 竖线样式 */
.jt-tooltip-popup>div:nth-child(2) {
	width: 1px;
	height: 50px;
	background-color: rgba(0, 0, 0, 0.0);
	border-right: dashed 2px rgb(255, 255, 0);
}

/* 三维标签 底部小圆圈样式 */
.jt-tooltip-popup>div:nth-child(3) {
	width: 10px;
	height: 10px;
	background-color: rgba(0, 0, 0, 0.0);
	bottom: calc(-50px - 10px);
	left: calc(calc(180px - 10px) / 2);
	border: solid 2px rgb(255, 255, 0);
	border-radius: 10px;
}

/* +++++++++++++以下是图层控制相关样式集合+++++++++++++++++++ */

/* 图层控制分组标签样式 */
.jt-layer-control-label {
	position: relative;
	font-size: 13px;
	color: rgb(203, 203, 203);
	background-color: rgb(44, 64, 134);
	padding-left: 24px !important;
	height: 40px !important;
	line-height: 40px !important;
}

/* 图层控制分组标签前置div小方块样式 */
.jt-layer-control-label:before {
	position: absolute;
	content: '';
	width: 4px;
	height: calc(40px - 16px);
	background-color: rgb(64, 97, 173);
	left: 12px;
	top: 8px;
}

/* 图层控制分组内容样式 */
.jt-layer-control-content {
	position: relative !important;
	background-color: rgb(27, 38, 80) !important;
}

/* 图层控制行样式 */
.jt-layer-control-input-row {
	background-color: rgba(27, 38, 80, 1.0) !important;
	display: flex !important;
	flex-direction: row;
	align-items: center;
}

/* 图层控制行标签样式 */
.jt-layer-control-input-row>label {
	font-size: 14px !important;
	color: rgb(255, 255, 255) !important;
	font-weight: 400;
	flex: 1;
	padding: 11px 5px;
}

/* 图层控制行标签内图标样式 */
.jt-layer-control-input-row .app-icon {
	font-size: 14px !important;
	color: rgb(255, 255, 255) !important;
	font-weight: bold;
	margin-right: 8px;
}

/* 图层控制补充文字样式 */
.jt-layer-control-input-row .jt-label {
	color: rgb(236, 182, 98);
	margin-right: 5px;
	font-size: 13px !important;
}

/* 去掉图层控制分组底部的边框线 */
.mui-input-group:after {
	height: 0px !important;
}

/* 修改图层控制分组行底部的边框线 */
.mui-input-group .mui-input-row:after {
	background-color: rgb(39, 84, 183) !important;
	background-color: rgb(203, 203, 203) !important;
	height: 1px;
}

/* 去掉图层控制分组行最有一条底部的边框线 */
.mui-input-group .mui-input-row:last-child::after {
	height: 0px !important;
}

/* 引入外部字体 */
@font-face {
	font-family: alFont;
	src: url('../fonts/iconfont.ttf');
}

/* 图层控制 状态图标样式 */
.jt-sms-content-row input[type=checkbox],
.jt-layer-control-input-row input[type=checkbox],
.jt-layer-control-input-row input[type=radio] {
	position: relative;
	width: 40px;
	height: 20px;
	border-radius: 15px;
	margin-right: 5px;
}

/* 图层控制 隐藏状态图标样式 */
.jt-sms-content-row input[type=checkbox]:before,
.jt-layer-control-input-row input[type=checkbox]:before,
.jt-layer-control-input-row input[type=radio]:before {
	position: absolute;
	content: '';
	width: 40px;
	height: 20px;
	background-color: rgb(69, 89, 168);
	border-radius: 12px;
}

/* 图层控制 显示状态图标样式 */
.jt-sms-content-row input[type=checkbox]:checked:before,
.jt-layer-control-input-row input[type=checkbox]:checked:before,
.jt-layer-control-input-row input[type=radio]:checked:before {
	position: absolute;
	content: '';
	background-color: rgb(107, 176, 111);
}

/* 图层隐藏状态 小球的样式 */
.jt-sms-content-row input[type=checkbox]::after,
.jt-layer-control-input-row input[type=checkbox]::after,
.jt-layer-control-input-row input[type=radio]::after {
	position: absolute;
	content: '';
	width: 16px;
	height: 16px;
	top: 2px;
	background-color: rgb(255, 255, 255);
	left: 4px;
	border-radius: 10px;
}

/* 图层显示状态 小球的样式 */
.jt-sms-content-row input[type=checkbox]:checked::after,
.jt-layer-control-input-row input[type=checkbox]:checked::after,
.jt-layer-control-input-row input[type=radio]:checked::after {
	left: calc(40px - 16px - 4px);
}

/* +++++++++++++以上是图层控制相关样式集合+++++++++++++++++++ */

.jt-btn-normal {
	border-radius: 3px;
	margin-left: 3px;
	margin-right: 3px;
	height: 30px !important;
}

/* +++++++++++++++++++航线查询样式集+++++++++++++++++++++++++++++++ */
/* 航线查询弹出框容器样式 */
.jt-line-panel {
	position: absolute;
	width: 100%;
	height: 160px;
	line-height: 160px;
	background-color: rgb(32, 46, 96);
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	overflow: hidden;
	bottom: 0px;
	z-index: 100;
	display: none;
}

/* 航线查询顶部标题容器样式 */
.jt-line-top {
	height: 44px;
	background-color: rgb(37, 109, 187) !important;
	line-height: 44px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	color: rgb(255, 255, 255) !important;
	position: relative;
}

/* 航线查询顶部标题右侧箭头样式 */
.jt-line-top::after {
	position: absolute;
	font-family: 'iconfont', sans-serif !important;
	content: '\ec0d';
	right: 10px;
	font-size: 20px;
}

/* 航线查询内容行样式 */
.jt-line-panel .jt-line-row {
	display: flex;
	flex-direction: row;
	height: 30px;
	line-height: 30px;
	align-items: center;
	margin-top: 5px;
}

/* 航线查询内容行文字标题样式 */
.jt-line-panel .jt-line-row>span {
	display: inline-block;
	width: 100px;
	/* background-color: blue; */
	height: 100%;
	font-size: 13px;
	color: rgb(255, 255, 255);
	margin: 0px;
	padding: 0px;
	position: relative;
	text-align: right;
}

/* 航线查询内容行选择按钮样式 */
.jt-line-panel .jt-line-row .jt-line-select-btn {
	display: inline;
	flex: 1;
	background-color: rgba(255, 255, 255, 0);
	border: solid 1px rgb(133, 215, 253) !important;
	height: 26px;
	line-height: 26px;
	font-size: 13px;
	color: rgb(133, 215, 253);
	padding: 0px !important;
	margin: 0px 5px;
}

.jt-line-panel .jt-line-row .jt-line-select-btn:active {
	border: solid 1px rgb(255, 0, 0) !important;
}

/* 航线查询查询结果展示内容样式 */
.jt-line-panel .jt-line-row .jt-line-result {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgb(255, 255, 255);
	margin-top: 10px;
	margin-bottom: 10px;
	height: 34px;
	font-size: 14px;
	font-family: "TTTGB-Medium", sans-serif !important;
	background: -webkit-linear-gradient(right, rgba(35, 42, 151, 0.0), rgba(35, 42, 151, 0.45), rgba(35, 42, 151, 0.0));
}

/* 航线查询按钮样式 */
.jt-line-panel .jt-line-row .jt-line-btn {
	margin-right: 10px;
	height: 30px;
	padding: 0px 10px 0px 10px !important;
}

/* 日期选择弹出框年月日行样式 */
.mui-dtpicker-title h5 {
	padding: 0px !important;
}

/* 右侧滑出容器样式 */
.cr-canvas {
	background-color: rgb(230, 230, 230) !important;
	display: flex !important;
	flex-direction: column;
	height: 100%;
}

/* 结果展示容器样式 */
.cr-result {
	background-color: rgb(69, 69, 69, 0.6);
	display: flex;
	flex-direction: row;
	width: 100%;
	position: absolute;
	height: 40px;
	line-height: 40px;
	bottom: 0px;
	color: rgb(255, 255, 255);
	z-index: 1000;
}

/* 结果展示内容样式 */
.cr-result>div {
	flex: 1;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 结果展示关闭按钮样式 */
.cr-result>span {
	display: flex;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	font-size: 24px !important;
	justify-content: center;
	align-items: center;
}

/* 结果展示关闭按钮点击样式 */
.cr-result>span:active {
	color: rgb(81, 142, 211);
}

/* 展示地类分析结果的容器样式 */
.cr-land-panel {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* 地类分析结果-查询框容器样式 */
.cr-search {
	display: flex;
	flex-direction: row;
	background-color: rgba(255, 255, 255, 0.0);
	height: 40px;
	padding: 5px;
	margin-top: 5px;
}

/* 地类分析结果-查询框内容样式 */
.cr-search>div {
	flex: 1;
	/* margin: 0px 15px; */
	margin-right: 10px;
	background-color: rgb(157, 170, 198);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	color: rgb(255, 255, 255);
	font-size: 13px;
}

/* 地类分析结果-查询框内容激活样式 */
.cr-search>div:active {
	background-color: rgb(69, 69, 69);
}

/* 地类分析结果-查询框查询按钮样式 */
.cr-search>button {
	border-radius: 5px !important;
	color: rgb(255, 255, 255) !important;
}

/* 地类分析结果-图表展示容器样式 */
.cr-map-echarts {
	height: 240px;
	background-color: rgba(255, 255, 255, 0.0);
}

/* 地类分析结果-详细内容容器样式 */
.cr-map-content-panel {
	position: relative;
	background-color: rgba(255, 255, 255, 0.0);
	flex: 1;
	/* height: 100px; */
	overflow-y: auto;
}

/* 地类分析结果-详细内容行样式 */
.cr-map-content-row {
	position: relative;
	height: 30px;
	display: flex;
	flex-direction: row;
	color: rgb(230, 230, 230);
	background-color: rgba(255, 255, 255, 0.0);
}

/* 地类分析结果-详细内容条目分隔线样式 */
.cr-map-content-row::before {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 10;
	top: 0px;
	height: 0px;
	width: calc(100% - 10px);
	content: '';
	border-bottom: solid 1px rgb(203, 203, 203);
}

/* 地类分析结果-干掉首个条目的分隔线 */
.cr-map-content-row:first-child::before {
	border-bottom: solid 0px red;
}

/* 地类分析结果-条目子项内容样式 */
.cr-map-content-row>span {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
}

/* 地类分析结果-条目子项第1个样式 */
.cr-map-content-row>span:nth-child(1) {
	margin-left: 8px;
	margin-right: 8px;
}

/* 地类分析结果-条目子项第2个样式 */
.cr-map-content-row>span:nth-child(2) {
	width: 80px;
}

/* 地类分析结果-条目子项第3个样式 */
.cr-map-content-row>span:nth-child(3) {
	flex: 1;
}

/* 地类分析结果-条目子项第4个样式 */
.cr-map-content-row>span:nth-child(4) {
	width: 80px;
}

/* 激活样式 */
.cr-map-content-row-active:active {
	background-color: rgb(69, 69, 69);
	color: rgb(255, 255, 255);
}

/* 该页独有的内容样式 */
.mui-content {
	padding-top: 0px !important;
}

/* 主要内容背景 */
/* .mui-scroll-wrapper {
	background: url(../img/map/map_back.jpg) no-repeat left top;
	background-size: 100% 100%;
} */