demo新增定位

src/views/positioning/components/mediaList.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="media-list">
+    <div class="media-item">
+      <div class="media-item-img">
+        11111111111
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.media-list {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/positioning/index.vue

@@ -0,0 +1,62 @@
+<template>
+    <RightFillPano>
+    <template #header>
+      <div class="tabs">
+        <span>行动录制</span>
+      </div>
+    </template>
+    <mediaList />
+  </RightFillPano>
+</template>
+
+<script lang="ts" setup>
+import { RightFillPano } from "@/layout";
+import mediaList from "./components/mediaList.vue";
+import { nextTick, reactive, ref, watchEffect } from "vue";
+import { guides, isEdit, paths, enterEdit } from "@/store";
+
+nextTick(() => {
+//   enterEdit();
+});
+</script>
+
+<style lang="scss" scoped>
+.tabs {
+  height: 60px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
+  display: flex;
+  margin: -20px;
+  margin-bottom: 20px;
+
+  > span {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition: color 0.3s ease;
+    cursor: pointer;
+    font-size: 16px;
+
+    &::after {
+      content: "";
+      transition: height 0.3s ease;
+      position: absolute;
+      background-color: #00c8af;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 0;
+    }
+
+    &:hover,
+    &.active {
+      color: #00c8af;
+    }
+
+    &.active::after {
+      height: 3px;
+    }
+  }
+}
+</style>