编辑器-基础-开场提示-选择图片 新界面

src/components/TooltipInEditor.vue

@@ -28,8 +28,8 @@ export default {
 .tooltip-wrapper {
   position: absolute;
   // left: 50%;
-  transform: translateX(-50%);
-  top: -46px;
+  transform: translateX(-50%) translateY(calc(-100% - 6px - 2px));
+  top: 0;
   z-index: 10000;
   display: none;
 
@@ -60,6 +60,7 @@ export default {
   .remark {
     line-height: 17px;
     color: rgba(255, 255, 255, 0.6);
+    white-space: pre;
   }
 }
 </style>

src/components/tableSelect2.vue

@@ -4,15 +4,15 @@
     <div class="close-btn"><i class="iconfont icon-pop-ups_shut-down" @click="$emit('cancle')"></i></div>
 
     <div class="material-tab">
-      <a class="material-tab-item" @click.prevent="currentMaterialType = 'image'">
+      <a v-if="selectableType.includes('image')" class="material-tab-item" @click.prevent="currentMaterialType = 'image'">
         <span class="text">图片</span>
         <div v-if="currentMaterialType === 'image'" class="bottom-line"></div>
       </a>
-      <a class="material-tab-item" @click.prevent="currentMaterialType = 'pano'">
+      <a v-if="selectableType.includes('pano')" class="material-tab-item" @click.prevent="currentMaterialType = 'pano'">
         <span class="text">全景图</span>
         <div v-if="currentMaterialType === 'pano'" class="bottom-line"></div>
       </a>
-      <a class="material-tab-item" @click.prevent="currentMaterialType = '3D'">
+      <a v-if="selectableType.includes('3D')" class="material-tab-item" @click.prevent="currentMaterialType = '3D'">
         <span class="text">三维场景</span>
         <div v-if="currentMaterialType === '3D'" class="bottom-line"></div>
       </a>
@@ -157,6 +157,16 @@ export default {
     primaryKey: {
       default:'id'
     },
+    selectableType: {
+      type: Array,
+      default: function() {
+        return [
+          'image',
+          'pano',
+          '3D',
+        ]
+      },
+    },
   },
   components:{
     TooltipInEditor,

src/views/base/Toolbar.vue

@@ -9,7 +9,7 @@
             <img :src="info.icon || require('@/assets/images/default/img_cover_default_2.png')" alt="" />
             <button class="ui-button submit setting-cover-btn" @click="onClickSettingCover">设置封面</button>
           </div>
-          <div class="upload-btn">
+          <!-- <div class="upload-btn">
             <button class="ui-button submit" @click="selectHandle('image')">选择图片</button>
             <button class="ui-button submit" @click="addScene">全景封面
               <div>
@@ -18,7 +18,7 @@
                 </div>
               </div>
             </button>
-          </div>
+          </div> -->
           <div class="ui-remark">512*512px，支持jpg/png格式</div>
         </div>
         <div class="uc-r">
@@ -48,13 +48,25 @@
           </div>
         </div>
       </div>
-      <div class="ui-title-big">全局设置</div>
       <ul class="setting-con">
         <li @click="activeSetting=item" v-for="(item,i) in settings" :key="i">
          <button class="ui-button" :class="{submit:activeSetting.id==item.id}">{{item.name}}</button>
         </li>
 
       </ul>
+      <menu>
+        <li
+          v-for="(item) in tabs"
+          :key="item"
+          :class="{active: activeTab === item}"
+          @click="activeTab = item"
+        >
+          {{item}}
+        </li>
+      </menu>
+      <div class="settings-view-wrapper">
+        <OpeningTipSettings v-show="activeTab === '开场提示'"></OpeningTipSettings>
+      </div>
     </div>
     <eidt-panel
       :select="select"
@@ -100,19 +112,21 @@
 <script>
 import { getMaterialList} from "@/api";
 import EidtPanel from "./EditPanel";
+import OpeningTipSettings from '@/views/base/openingTipSettings.vue'
 import Table from "@/components/tableSelect";
 import Table2 from "@/components/tableSelect2";
+import Select from "@/components/select";
 import { changeByteUnit } from '@/utils/file'
 
 import { mapGetters } from "vuex";
-import Select from "@/components/select";
 
 export default {
   components: {
     EidtPanel,
     Table,
     Table2,
-    Select
+    Select,
+    OpeningTipSettings,
   },
   data() {
     return {
@@ -146,6 +160,18 @@ export default {
         current: 1
       },
       select:'',
+
+      tabs: [
+        '开场提示',
+        '开场动画',
+        '访问密码',
+        '自动巡游',
+        '背景音乐',
+        '自定义LOGO',
+        '自定义遮罩',
+        '自定义按钮',
+      ],
+      activeTab: '开场提示',
     };
    },
   computed: {
@@ -244,15 +270,11 @@ export default {
 
 <style lang="less" scoped>
 
-.ui-title-big{
-  margin-top: 20px;
-}
 .main {
   position: fixed;
   width: 930px;
   top: 15%;
-  left: 50%;
-  transform: translateX(-50%);
+  left: calc(50% - (930px) / 2);
 }
 
 .upload-con {
@@ -440,4 +462,49 @@ export default {
     }
   }
 }
+
+menu {
+  display: inline-block;
+  width: 133px;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.5);
+  padding-left: 0;
+  margin: 0;
+  vertical-align: top;
+  li {
+    display: block;
+    height: 47px;
+    padding-left: 16px;
+    cursor: pointer;
+    &::after {
+      content: "";
+      display: inline-block;
+      height: 100%;
+      vertical-align: middle;
+    }
+    &.active {
+      font-size: 16px;
+      font-weight: bold;
+      color: #FFFFFF;
+      background: #252526;
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 2px;
+        height: 10px;
+        border-radius: 1px;
+        background: #0076F6;
+        margin-right: 4px;
+        vertical-align: middle;
+      }
+    }
+  }
+}
+
+.settings-view-wrapper {
+  vertical-align: top;
+  display: inline-block;
+  width: 797px;
+
+}
 </style>

src/views/base/openingTipSettings.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="opening-tip-settings">
+    <span class="title">提示设置</span>
+    <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tool-tip-wrapper>
+      <TooltipInEditor
+        :text="'开场提示仅适用于全景图。若初始场景为三维模\n型，以下开场提示不适用。'"
+        :framePosLeft="'30px'"
+        :arrowPosLeft="'calc(50% - 24px)'"
+      ></TooltipInEditor>
+    </i>
+    <br>
+    <div class="image-selection">
+      <div class="title">PC端</div>
+      <div class="bottom">
+        <img :src="info.pcIcon || require('@/assets/images/default/img_tipspc_default.png')" alt="">
+        <div class="bottom-right">
+          <button class="ui-button submit" @click="isShowSelectionWindow = true, selectingFor = 'pc'">选择图片</button>
+          <div class="ui-remark">建议300*300px，600kb以内，支持jpg/png格式</div>
+        </div>
+      </div>
+    </div>
+    <div class="image-selection">
+      <div class="title">移动端</div>
+      <div class="bottom">
+        <img :src="info.appIcon || require('@/assets/images/default/img_tipsmb_default.png')" alt="">
+        <div class="bottom-right">
+          <button class="ui-button submit" @click="isShowSelectionWindow = true, selectingFor = 'mobile'">选择图片</button>
+          <div class="ui-remark">建议300*300px，600kb以内，支持jpg/png格式</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
+      <Table2
+        title="选择素材"
+        @cancle="isShowSelectionWindow = false"
+        @submit="handleSubmitFromTableSelect2"
+        :selectableType="['image']"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import TooltipInEditor from '@/components/TooltipInEditor.vue'
+import Table2 from "@/components/tableSelect2.vue";
+import { mapGetters } from "vuex";
+
+export default {
+  components: {
+    TooltipInEditor,
+    Table2,
+  },
+  data() {
+    return {
+      isShowSelectionWindow: false,
+      selectingFor: '', // 'pc', 'mobile'
+    }
+  },
+  computed: {
+    ...mapGetters({
+      info:'info'
+    })
+  },
+  methods: {
+    handleSubmitFromTableSelect2(selected) {
+      if (this.selectingFor === 'pc') {
+        this.info.pcIcon = selected[0].icon
+      } else if (this.selectingFor === 'mobile') {
+        this.info.appIcon = selected[0].icon
+      }
+      this.isShowSelectionWindow = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.opening-tip-settings {
+  padding: 24px 30px;
+  background: #252526;
+  height: 546px;
+  .title {
+    font-size: 18px;
+    color: #FFFFFF;
+  }
+  .tool-tip-for-editor {
+    margin-left: 4px;
+    font-size: 12px;
+    cursor: default;
+    position: relative;
+    top: -2px;
+  }
+  .image-selection {
+    width: 50%;
+    display: inline-block;
+    margin-top: 16px;
+    .title {
+      color: rgba(255, 255, 255, 0.6);
+      font-size: 14px;
+      margin-bottom: 16px;
+    }
+    .bottom {
+      display: flex;
+      align-items: flex-start;
+      img {
+        width: 136px;
+        height: 136px;
+        background: #1A1B1D;
+        border-radius: 4px;
+        border: 1px solid #404040;
+        margin-right: 16px;
+        object-fit: cover;
+      }
+      .bottom-right {
+        display: inline-block;
+        button {
+          margin-bottom: 20px;
+        }
+        .ui-remark {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+</style>