|
|
@@ -14,6 +14,12 @@
|
|
|
>
|
|
|
<ui-icon :type="menu.icon" />
|
|
|
<p>{{ menu.text }}</p>
|
|
|
+ <ui-input
|
|
|
+ type="checkbox"
|
|
|
+ :modelValue="graphicState.showBackImage"
|
|
|
+ class="map-status"
|
|
|
+ v-if="menu.icon === 'map'"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -104,7 +110,7 @@ const menus = computed<{disable?: boolean, text: string, onClick: () => void}[]>
|
|
|
|
|
|
if (isRoad.value) {
|
|
|
menus.push({
|
|
|
- icon: graphicState.value.showBackImage ? "map" : "recover",
|
|
|
+ icon: "map",
|
|
|
text: ``,
|
|
|
onClick: () => backImageChang(!graphicState.value.showBackImage)
|
|
|
})
|
|
|
@@ -160,6 +166,7 @@ const createTable = async () => {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
+ position: relative;
|
|
|
justify-content: center;
|
|
|
p {
|
|
|
font-size: 14px;
|
|
|
@@ -191,5 +198,47 @@ const createTable = async () => {
|
|
|
margin-left: 24px;
|
|
|
}
|
|
|
|
|
|
+.map-status {
|
|
|
+ pointer-events: none;
|
|
|
+ position: absolute;
|
|
|
+ left: 100%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.map-status.ui-input,
|
|
|
+.map-status.ui-input .checkbox{
|
|
|
+ width: 12px;
|
|
|
+ height: 7px;
|
|
|
+
|
|
|
+}
|
|
|
+.map-status.ui-input .checkbox input + .replace {
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #7E7E7E;
|
|
|
+ position: absolute;
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ height: 5px;
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 5px;
|
|
|
+ background-color: #fff;
|
|
|
+ top: 1px;
|
|
|
+ left: 1px;
|
|
|
+ transition: all .3s ease;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
+ &.checked:before {
|
|
|
+ left: calc(100% - 6px);
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
