编辑器-讲解-语音讲解：做出页面元素

packages/code/src/views/explanation/explanationSettings.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="explanation-settings"  app-border dir-left>
+    <div class="title">
+      语音讲解
+      <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tooltip="'您可以为当前全景图添加语音讲解音频。'"/>
+    </div>
+
+    <button v-if="!audioName" class="ui-button submit" @click="isShowSelectionWindow = true">
+      <i class="iconfont icon-editor_add"></i>
+      添加音频
+    </button>
+    <template v-else>
+      <div class="music-display" @click.self="onClickCurrentMusic">
+        <Audio ref="my-audio" class="audio-control" :backgroundColor="'#1A1B1D'" :myAudioUrl="audioUrl"></Audio>
+        <div class="name" v-title="audioName" @click="onClickCurrentMusic">{{audioName}}</div>
+        <i class="iconfont icon-editor_list_delete" @click.stop="onClickDeleteMusicBtn"></i>
+      </div>
+      <button class="ui-button" @click="isShowSelectionWindow = true">
+        <i class="iconfont icon-editor_update"></i>
+        更换音频
+      </button>
+    </template>
+
+    <div class="switch-wrapper">
+      <span class="label">默认开启</span>
+      <Switcher :value="1"></Switcher>
+    </div>
+    <div class="switch-wrapper">
+      <span class="label">循环播放</span>
+      <Switcher :value="1"></Switcher>
+    </div>
+
+    <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
+      <MaterialSelectorForEditor
+        title="选择素材"
+        @cancle="isShowSelectionWindow = false"
+        @submit="handleSubmitFromMaterialSelector"
+        :selectableType="['audio']"
+        initialMaterialType="audio"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Switcher from "@/components/shared/Switcher";
+import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+import Audio from "@/components/audio/audioForEditor.vue";
+
+export default {
+  components: {
+    Switcher,
+    MaterialSelectorForEditor,
+    Audio,
+  },
+  data() {
+    return {
+      isShowSelectionWindow: false,
+
+      audioId: '',
+      audioName: '',
+      audioUrl: '',
+    }
+  },
+  methods: {
+    onClickCurrentMusic() {
+      if (this.$refs['my-audio']) {
+        this.$refs['my-audio'].switchPlayPause()
+      }
+    },
+    onClickDeleteMusicBtn() {
+      this.audioId = ''
+      this.audioUrl = ''
+      this.audioName = ''
+    },
+    handleSubmitFromMaterialSelector(selected) {
+      this.isShowSelectionWindow = false
+      this.audioId = selected[0].id
+      this.audioName = selected[0].name
+      this.audioUrl = selected[0].ossPath
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.explanation-settings {
+  padding: 20px;
+  > .title {
+    font-size: 18px;
+    color: #fff;
+    > i {
+      font-size: 12px;
+      position: relative;
+      top: -2px;
+    }
+  }
+  > button {
+    width: 100%;
+    margin-top: 16px;
+    i {
+      font-size: 14px;
+    }
+  }
+  > .music-display {
+    cursor: pointer;
+    margin-top: 16px;
+    width: 234px;
+    height: 36px;
+    background: #1A1B1D;
+    border-radius: 2px;
+    border: 1px solid #404040;
+    color: #fff;
+    font-size: 14px;
+    position: relative;
+    &:hover {
+      color: #0076F6;
+      > .audio-control {
+        display: inline-block;
+      }
+      > i {
+        display: inline-block;
+      }
+    }
+    > .audio-control {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 18px;
+      display: none;
+    }
+    > .name {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 65%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      display: inline-block;
+    }
+    > i {
+      display: none;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 18px;
+      &:hover {
+        color: #FA5555;
+      }
+    }
+  }
+
+  .switch-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 18px;
+    .label {
+      color: rgba(255, 255, 255, 0.6);
+      font-size: 14px;
+    }
+  }
+}
+</style>

packages/code/src/views/explanation/index.vue

@@ -1,5 +1,32 @@
 <template>
-  <div>
-    sadfsdf
+  <div class="editor-explanation">
+    <div class="preview-area"></div>
+    <ExplanationSettings class="explanation-settings"></ExplanationSettings>
   </div>
-</template>
+</template>
+
+<script>
+import ExplanationSettings from "./explanationSettings.vue";
+
+export default {
+  name: "EditorExplanation",
+  components: {
+    ExplanationSettings,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.editor-explanation {
+  height: 100%;
+  display: flex;
+  .preview-area {
+    background: red;
+    flex: 1 0 1px;
+  }
+  .explanation-settings {
+    width: 274px;
+    flex: 0 0 auto;
+  }
+}
+</style>

packages/code/src/views/navigation/index.vue

@@ -5,6 +5,7 @@
     <InitialSceneSettings class="initial-scene-settings-area"></InitialSceneSettings>
   </div>
 </template>
+
 <script>
 import InitialSceneSettings from "./initialSceneSettings.vue";
 import GroupSettings from "./groupSettings.vue";