编辑器-视角-初始画面：设置好元素

packages/code/src/framework/Main.vue

@@ -18,12 +18,12 @@
     </div>
   </main>
 </template>
+
 <script>
 import AppMenu from "./MenuPC";
 import Core from "./core";
 import Toolbar from "./Toolbar";
 
-
 export default {
   name: "app-main",
   components: {

packages/code/src/framework/core/index.vue

@@ -153,6 +153,7 @@ export default {
 
 <style lang="less" scoped>
 .pano-body {
+  background: blue;
   width: 100%;
   position: relative;
   height: 100%;

packages/code/src/mixins/index.js

@@ -114,6 +114,7 @@ Vue.prototype.$nameSort = {
 
 Vue.prototype.$scrollbars = [];
 
+// todo: 无用了
 let SettingPanel = require("@/framework/SettingPC").default;
 
 Vue.mixin({

packages/code/src/views/screen/Setting.vue

@@ -1,16 +1,12 @@
 <template>
-  <setting-panel>
-    <div class="view-setting" app-border dir-left>
-      <div class="ui-title">初始画面</div>
-      <div class="ui-remark">初始画面为进入场景时第一画面，请拖动全景图选择合适的画面设置。</div>
-      <div class="preview">
-        <img :src="initImg+`?${Math.random()}`" v-if="initImg" alt="">
-        <div class="tips" v-else>
-          <i class="iconfont iconphotoview" style="font-size: 40px"></i>
-        </div>
-      </div>
+  <div class="view-setting" app-border dir-left>
+    <div class="title">
+      初始画面
+      <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tooltip="'初始画面为进入场景时第一画面，请拖动全景图选择合适的画面设置。'"/>
     </div>
-  </setting-panel>
+    <img class="preview" v-if="initImg" :src="`${initImg}?${Math.random()}`" alt="">
+    <img class="placeholder" v-else src="@/assets/images/pano-image-placeholder.png" alt="">
+  </div>
 </template>
 
 <script>
@@ -24,20 +20,38 @@ export default {
     }
   },
   mounted(){
-      this.$bus.on('initView',data=>{
-        this.initImg = data
-      })
+    this.$bus.on('initView',data=>{
+      this.initImg = data
+    })
   }
 }
 </script>
 
 <style lang="less" scoped>
-.preview{
-    height: 122px;
-    margin-top: 10px;
-    >img{
-      width: 100%;
-      height: 100%;
+.view-setting {
+  padding: 20px;
+  > .title {
+    font-size: 18px;
+    color: #fff;
+    margin-bottom: 16px;
+    > i {
+      font-size: 12px;
+      position: relative;
+      top: -2px;
     }
+  }
+  .preview {
+    width: 100%;
+    height: 132px;
+    border-radius: 4px;
+    margin-bottom: 16px;
+    object-fit: cover;
+    image-rendering: smooth;
+  }
+  .placeholder {
+    width: 100%;
+    height: 132px;
+    margin-bottom: 16px;
+  }
 }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <!-- 编辑器-初始 -->
-  <div>
+  <div class="view-screen">
     <!-- 内嵌的全景场景预览区域 -->
     <div
       class="app-player"
@@ -9,8 +9,8 @@
       <Core/>
     </div>
     <!-- 初始和热点 底部的 全景场景列表 -->
-    <toolbar></toolbar>
-    <setting></setting>
+    <!-- <toolbar></toolbar> -->
+    <setting class="setting-panel"></setting>
   </div>
 </template>
 <script>
@@ -29,14 +29,20 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.view-screen {
+  height: 100%;
+  display: flex;
   .app-player {
     padding: 10px;
     position: relative;
+    height: 100%; // 260: 底部toolbar的高度
+    flex: 1 1 auto;
     display: flex;
-    height: calc(100% - 260px); // 260: 底部toolbar的高度
     flex-direction: column;
-    &.page-guide {
-      height: calc(100% - 210px);
-    }
   }
+  .setting-panel {
+    width: 274px;
+    flex: 0 0 auto;
+  }
+}
 </style>