bill 5 ヶ月 前
コミット
5606f29dd8
1 ファイル変更37 行追加33 行削除
  1. 37 33
      src/views/summary/index.vue

+ 37 - 33
src/views/summary/index.vue

@@ -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>