423 lines
8.0 KiB
SCSS
423 lines
8.0 KiB
SCSS
// Popup 相关样式 - 用于 map.ol.ts 中 generatePopupHtml 生成的 HTML
|
|
|
|
.iconDiv {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
padding: 5px;
|
|
font-size: 12px;
|
|
&.smallfont {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
.iconDivContent {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.iconDivTitle {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.iconDivLeft {
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.iconDivRight {
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// 标题文字自适应大小
|
|
.iconDivTitle.title-md {
|
|
font-size: 14px !important;
|
|
}
|
|
.iconDivTitle.title-sm {
|
|
font-size: 13px !important;
|
|
}
|
|
.iconDivTitle.title-xs {
|
|
font-size: 12px !important;
|
|
}
|
|
.iconDivTitle.title-xxs {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.iconEngDiv_large_eng_built,
|
|
.iconEngDiv_large_eng_ubuilt,
|
|
.iconEngDiv_large_eng_nbuilt {
|
|
width: 156px;
|
|
height: 170px;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 0 !important;
|
|
.iconDivTitle {
|
|
width: 100%;
|
|
height: 48%;
|
|
line-height: 100px;
|
|
text-align: center;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
position: relative;
|
|
&::after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
width: 80%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
content: ' ';
|
|
}
|
|
}
|
|
.iconDivContent {
|
|
width: 100%;
|
|
height: 52%;
|
|
font-size: 12px;
|
|
padding-top: 4px;
|
|
position: relative;
|
|
&::after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
right: 0;
|
|
width: 2px;
|
|
height: 62%;
|
|
transform: translateX(-50%);
|
|
content: ' ';
|
|
}
|
|
.iconDivLeft {
|
|
width: 50%;
|
|
padding-left: 38px;
|
|
box-sizing: border-box;
|
|
}
|
|
.iconDivRight {
|
|
width: 50%;
|
|
padding-left: 6px;
|
|
box-sizing: border-box;
|
|
padding-right: 34px;
|
|
div:nth-child(1) {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconEngDiv_mid_eng_built,
|
|
.iconEngDiv_mid_eng_ubuilt,
|
|
.iconEngDiv_mid_eng_nbuilt {
|
|
width: 150px;
|
|
height: 112px;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 0 !important;
|
|
.iconDivTitle {
|
|
width: 100%;
|
|
height: 50px;
|
|
line-height: 52px;
|
|
text-align: center;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
}
|
|
.iconDivContent {
|
|
width: 100%;
|
|
height: 36;
|
|
padding: 0 10px;
|
|
font-size: 11px;
|
|
position: relative;
|
|
&::after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
right: 0;
|
|
width: 2px;
|
|
height: 100%;
|
|
content: ' ';
|
|
}
|
|
.iconDivLeft {
|
|
width: 50%;
|
|
text-align: center;
|
|
}
|
|
.iconDivRight {
|
|
width: 50%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconEngDiv-large_eng_nbuilt-0 {
|
|
background-image: url('@/assets/images/mapTip/map-dxsdzGuihuaNetMonitor.svg');
|
|
color: #859ea3;
|
|
.iconDivTitle,
|
|
.iconDivContent {
|
|
&::after {
|
|
background-color: #859ea3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconEngDiv-large_eng_ubuilt-1 {
|
|
background-image: url('@/assets/images/mapTip/map-dxsdzZaijianNetMonitor.svg');
|
|
color: #5389b9;
|
|
.iconDivTitle,
|
|
.iconDivContent {
|
|
&::after {
|
|
background-color: #5389b9;
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconEngDiv-large_eng_built-2 {
|
|
background-image: url('@/assets/images/mapTip/map-dxsdzYijianNetMonitor.svg');
|
|
color: #7dbc18;
|
|
.iconDivTitle,
|
|
.iconDivContent {
|
|
&::after {
|
|
background-color: #95c842;
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconEngDiv-mid_eng_nbuilt-0 {
|
|
background-image: url('@/assets/images/mapTip/map-zxsdzGuihuaNetMonitor.svg');
|
|
color: #859ea3;
|
|
.iconDivContent {
|
|
&::after {
|
|
background-color: #859ea3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconEngDiv-mid_eng_ubuilt-1 {
|
|
background-image: url('@/assets/images/mapTip/map-zxsdzZaijianNetMonitor.svg');
|
|
color: #5389b9;
|
|
.iconDivContent {
|
|
&::after {
|
|
background-color: #5389b9;
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconEngDiv-mid_eng_built-2 {
|
|
background-image: url('@/assets/images/mapTip/map-zxsdzYijianNetMonitor.svg');
|
|
color: #7dbc18;
|
|
.iconDivContent {
|
|
&::after {
|
|
background-color: #95c842;
|
|
}
|
|
}
|
|
}
|
|
.map-tooltip {
|
|
height: auto;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
text-align: center;
|
|
position: relative;
|
|
padding: 24px 0 25px;
|
|
// width: 279px;
|
|
width: 260px;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 24px;
|
|
background: url(@/assets/images/mapTip/top@260.png) center no-repeat;
|
|
background-size: 100% auto;
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 25px;
|
|
background: url(@/assets/images/mapTip/bottom@260.png) center no-repeat;
|
|
background-size: 100% auto;
|
|
}
|
|
|
|
&-box {
|
|
padding: 0 12px;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 24px;
|
|
bottom: 25px;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: -1;
|
|
background: url(@/assets/images/mapTip/center@260.png) repeat-y;
|
|
background-size: 100% auto;
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
&-list {
|
|
font-size: 14px !important;
|
|
line-height: 1.5;
|
|
|
|
> li {
|
|
display: flex;
|
|
text-align: left;
|
|
|
|
.__label {
|
|
flex: 0 0 100px;
|
|
width: 100px;
|
|
text-align: right;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.__warn {
|
|
color: #ff4d4f;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
margin-top: 10px;
|
|
border-top: 1px dashed #12aaeb;
|
|
padding: 10px 0;
|
|
margin: 10px 0 0;
|
|
&.__noborder {
|
|
border: none;
|
|
margin-top: 6px;
|
|
}
|
|
&.__small {
|
|
font-size: 12px !important;
|
|
}
|
|
}
|
|
|
|
&-sub {
|
|
margin: 0;
|
|
padding: 4px 0 0 0;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
&-sub1 {
|
|
text-align: center;
|
|
position: relative;
|
|
height: 1px;
|
|
border-bottom: 1px dashed #12aaeb;
|
|
margin-top: 16px;
|
|
.__content {
|
|
position: absolute;
|
|
top: -9px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: rgb(88 110 134);
|
|
padding: 0 6px;
|
|
font-size: 12px;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
&.map-tooltip-small {
|
|
width: 190px;
|
|
padding: 18px 0 18px;
|
|
&::after {
|
|
background-image: url(@/assets/images/mapTip/top@175.png);
|
|
height: 18px;
|
|
}
|
|
&::before {
|
|
background-image: url(@/assets/images/mapTip/bottom@175.png);
|
|
height: 18px;
|
|
}
|
|
.map-tooltip-box {
|
|
padding: 0 10px;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 18px;
|
|
bottom: 18px;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: -1;
|
|
background-image: url(@/assets/images/mapTip/center@175.png);
|
|
}
|
|
}
|
|
.map-tooltip-list {
|
|
> li {
|
|
.__label {
|
|
flex: 0 0 84px;
|
|
width: 84px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.map-tooltip-middle {
|
|
width: 225px;
|
|
padding: 18px 0 18px;
|
|
&::after {
|
|
background-image: url(@/assets/images/mapTip/top@215.png);
|
|
height: 18px;
|
|
}
|
|
&::before {
|
|
background-image: url(@/assets/images/mapTip/bottom@215.png);
|
|
height: 18px;
|
|
}
|
|
.map-tooltip-box {
|
|
padding: 0 10px;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 18px;
|
|
bottom: 18px;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: -1;
|
|
background-image: url(@/assets/images/mapTip/center@215.png);
|
|
}
|
|
}
|
|
.map-tooltip-list {
|
|
> li {
|
|
.__label {
|
|
flex: 0 0 100px;
|
|
width: 100px;
|
|
}
|
|
}
|
|
&.__list2 {
|
|
> li {
|
|
.__label {
|
|
flex: 0 0 90px;
|
|
width: 90px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.map-waterQuality-subtitle {
|
|
margin-top: 10px;
|
|
border: 1px solid rgba(77, 129, 167);
|
|
border-bottom: none;
|
|
|
|
.map-waterQuality-leftType,
|
|
.map-waterQuality-rightType {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|