|
@@ -6,57 +6,61 @@
|
|
|
<RightFillPano>
|
|
|
<template #header>
|
|
|
<div class="tabs">
|
|
|
- <span
|
|
|
+ <span
|
|
|
v-for="tab in tabs"
|
|
|
:key="tab.key"
|
|
|
:class="{ active: tab.key === current }"
|
|
|
@click="current = tab.key"
|
|
|
>
|
|
|
- {{tab.text}}
|
|
|
+ {{ tab.text }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<Taggings v-if="current === TabKey.tagging" />
|
|
|
- <Guides v-if="current === TabKey.guide"/>
|
|
|
- <Measures v-if="current === TabKey.measure"/>
|
|
|
+ <Guides v-if="current === TabKey.guide" />
|
|
|
+ <Measures v-if="current === TabKey.measure" />
|
|
|
</RightFillPano>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, watchEffect } from 'vue'
|
|
|
-import { useViewStack } from '@/hook'
|
|
|
-import { showRightCtrlPanoStack, showRightPanoStack } from '@/env'
|
|
|
-import { currentModel, fuseModel, loadModel } from '@/model'
|
|
|
-import { LeftPano, RightFillPano } from '@/layout'
|
|
|
-import SceneList from '@/layout/scene-list/index.vue'
|
|
|
-import Taggings from '@/views/tagging/show.vue'
|
|
|
-import Measures from '@/views/measure/show.vue'
|
|
|
-import Guides from '@/views/guide/show.vue'
|
|
|
-import { ui18n } from '@/lang'
|
|
|
+import { ref, watchEffect } from "vue";
|
|
|
+import { useViewStack } from "@/hook";
|
|
|
+import { showRightCtrlPanoStack, showRightPanoStack } from "@/env";
|
|
|
+import { currentModel, fuseModel, loadModel } from "@/model";
|
|
|
+import { LeftPano, RightFillPano } from "@/layout";
|
|
|
+import SceneList from "@/layout/scene-list/index.vue";
|
|
|
+import Taggings from "@/views/tagging/show.vue";
|
|
|
+import Measures from "@/views/measure/show.vue";
|
|
|
+import Guides from "@/views/guide/show.vue";
|
|
|
+import { ui18n } from "@/lang";
|
|
|
|
|
|
-enum TabKey { tagging, measure, guide }
|
|
|
+enum TabKey {
|
|
|
+ tagging,
|
|
|
+ measure,
|
|
|
+ guide,
|
|
|
+}
|
|
|
const tabs = [
|
|
|
- { key: TabKey.tagging, text: ui18n.t('tagging.name') },
|
|
|
- { key: TabKey.measure, text: ui18n.t('material.name') },
|
|
|
- { key: TabKey.guide, text: ui18n.t('guide.name') },
|
|
|
-]
|
|
|
-const current = ref(tabs[0].key)
|
|
|
-const showRightCtrl = ref(true)
|
|
|
+ { key: TabKey.tagging, text: ui18n.t("tagging.name") },
|
|
|
+ { key: TabKey.measure, text: ui18n.t("measure.name") },
|
|
|
+ { key: TabKey.guide, text: ui18n.t("guide.name") },
|
|
|
+];
|
|
|
+const current = ref(tabs[0].key);
|
|
|
+const showRightCtrl = ref(true);
|
|
|
|
|
|
watchEffect((onclean) => {
|
|
|
- const isFuse = currentModel.value === fuseModel
|
|
|
+ const isFuse = currentModel.value === fuseModel;
|
|
|
if (!isFuse) {
|
|
|
- onclean(showRightPanoStack.push(ref(false)))
|
|
|
+ onclean(showRightPanoStack.push(ref(false)));
|
|
|
}
|
|
|
- showRightCtrl.value = isFuse
|
|
|
-})
|
|
|
-useViewStack(() => showRightCtrlPanoStack.push(showRightCtrl))
|
|
|
+ showRightCtrl.value = isFuse;
|
|
|
+});
|
|
|
+useViewStack(() => showRightCtrlPanoStack.push(showRightCtrl));
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.tabs {
|
|
|
height: 60px;
|
|
|
- border-bottom: 1px solid rgba(255,255,255,0.16);
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.16);
|
|
|
display: flex;
|
|
|
margin: -20px;
|
|
|
margin-bottom: 20px;
|
|
@@ -67,15 +71,15 @@ useViewStack(() => showRightCtrlPanoStack.push(showRightCtrl))
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
- transition: color .3s ease;
|
|
|
+ transition: color 0.3s ease;
|
|
|
cursor: pointer;
|
|
|
font-size: 16px;
|
|
|
|
|
|
&::after {
|
|
|
- content: '';
|
|
|
- transition: height .3s ease;
|
|
|
+ content: "";
|
|
|
+ transition: height 0.3s ease;
|
|
|
position: absolute;
|
|
|
- background-color: #00C8AF;
|
|
|
+ background-color: #00c8af;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
@@ -84,7 +88,7 @@ useViewStack(() => showRightCtrlPanoStack.push(showRightCtrl))
|
|
|
|
|
|
&:hover,
|
|
|
&.active {
|
|
|
- color: #00C8AF;
|
|
|
+ color: #00c8af;
|
|
|
}
|
|
|
|
|
|
&.active::after {
|
|
@@ -92,4 +96,4 @@ useViewStack(() => showRightCtrlPanoStack.push(showRightCtrl))
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|