up
This commit is contained in:
@ -132,6 +132,73 @@
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
</div>
|
||||
<el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
|
||||
<el-collapse class="legend" accordion>
|
||||
<el-collapse-item name="1">
|
||||
<template #title>图例</template>
|
||||
<div class="mt-4">
|
||||
<el-checkbox-group v-model="checkList" @change="change">
|
||||
<!-- <el-checkbox
|
||||
v-for="(value, item, key) in dic"
|
||||
:key="key"
|
||||
:style="{
|
||||
background: value.color,
|
||||
border: `1px solid ${value.color}`,
|
||||
width: `100%`,
|
||||
}"
|
||||
v-model="checked3"
|
||||
:disabled="value.disabled"
|
||||
:label="item"
|
||||
/> -->
|
||||
|
||||
<el-checkbox
|
||||
style="
|
||||
background: rgba(255, 238, 204, 1);
|
||||
border: 1px solid rgba(251, 171, 60, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked3"
|
||||
label="0-200"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
background: rgba(255, 220, 153, 1);
|
||||
border: 1px solid rgba(251, 219, 13, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked4"
|
||||
label="200-400"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
background: rgba(255, 203, 102, 1);
|
||||
border: 1px solid rgba(244, 218, 136, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked3"
|
||||
label="400-600"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
background: rgba(255, 185, 51, 1);
|
||||
border: 1px solid rgba(174, 83, 110, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked4"
|
||||
label="600-800"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
background: rgba(255, 168, 0, 1);
|
||||
border: 1px solid rgba(242, 177, 167, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked3"
|
||||
label="800-1000"
|
||||
/>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -2583,19 +2650,41 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 28%;
|
||||
bottom: 18%;
|
||||
right: 25%;
|
||||
bottom: 7%;
|
||||
width: 129px;
|
||||
height: 338px;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 10px 10px 10px 10px;
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
|
||||
// height: 50px;
|
||||
:deep(.el-collapse-item__header) {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
padding: 0 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
--el-collapse-content-bg-color {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__content) {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
padding: 0 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
--el-collapse-border-color: none;
|
||||
--el-collapse-content-bg-color: none;
|
||||
|
||||
// opacity: 1;
|
||||
// border-radius: 4px;
|
||||
// background: rgba(2, 31, 26, 0.6);
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: flex-start;
|
||||
// align-items: center;
|
||||
// padding: 10px 10px 10px 10px;
|
||||
p {
|
||||
margin: 10px;
|
||||
font-size: 14px;
|
||||
@ -2628,7 +2717,10 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.bottom_center {
|
||||
position: absolute;
|
||||
left: calc(400px + 12vw);
|
||||
// left: calc(400px + 20px + 8vw);
|
||||
left: -2%;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: calc(100% - (400px * 2) - (10vw * 2));
|
||||
min-width: 380px;
|
||||
bottom: 5%;
|
||||
|
Reference in New Issue
Block a user