-
{{ formatMap[item.floor] }}
+
+
+
{{ item.floor }}
+
+
{{ formatMap[item.floor] }}
+
+
+
![]()
+ {{ fac.title }}
+
+
+
@@ -71,8 +79,17 @@ const showAll = ref(false)
const isRow = ref(false)
const store = useStore()
const formatMap = ref({})
+const facMap = ref({})
const { currentBuildingFloorsList, currentFloor, config } = storeToRefs(store)
+try {
+ const facs = window.Map_QM.getAllIcon()
+
+ facMap.value = facs[0].map(list => Object.values(list.reduce((acc, nxt) => ({ ...acc, [nxt.type]: nxt }), {})))
+} catch (error) {
+ console.log('error: ', error)
+}
+
try {
window.Map_QM?.showFloor?.(currentFloor.value.floorOrder)
} catch (error) {
@@ -178,10 +195,7 @@ onBeforeUnmount(() => {
clearTimeout(mapIconTimer.value)
})
-onMounted(() => {
- const facs = window.Map_QM.getAllIcon()
- console.log(facs)
-})
+onMounted(() => {})
watch(
[shopList, currentFloor],
@@ -208,6 +222,31 @@ watch(
.row {
height: 76px;
display: flex;
+ &.current {
+ .left {
+ position: relative;
+ color: rgba(0, 0, 0, 0.8);
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
+ &::after {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 20px;
+ display: flex;
+ content: '您在本层';
+ background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
+ font-weight: 700;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.8);
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ .right {
+ background: #fff;
+ }
+ }
.left {
flex: 0 0 150px;
font-family: 'Montserrat';
@@ -229,8 +268,9 @@ watch(
flex: 1;
display: flex;
padding: 0 68px;
+ border-bottom: 1px solid #fff;
.format {
- flex: 0 0 50%;
+ flex: 1;
font-weight: 700;
font-size: 20px;
line-height: 23px;
@@ -239,7 +279,29 @@ watch(
color: rgba(0, 0, 0, 0.8);
}
.facs {
- flex: 0 0 50%;
+ flex: 0;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ .fac {
+ display: flex;
+ flex-direction: column;
+ img {
+ width: 36px;
+ height: 36px;
+ margin-bottom: 8px;
+ }
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 14px;
+ text-align: center;
+ color: rgba(0, 0, 0, 0.6);
+ align-items: center;
+ }
+ .fac + .fac {
+ margin-left: 16px;
+ }
}
}
}