编辑器-基础-基础设置 初步调整UI

src/assets/style/component.less

@@ -32,25 +32,25 @@
 
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
-  color: #888888 !important;
+  color: rgba(255, 255, 255, 0.2) !important;
   font-weight: normal !important;
 }
 
 input:-moz-placeholder,
 textarea:-moz-placeholder {
-  color: #888888 !important;
+  color: rgba(255, 255, 255, 0.2) !important;
   font-weight: normal !important;
 }
 
 input::-moz-placeholder,
 textarea::-moz-placeholder {
-  color: #888888 !important;
+  color: rgba(255, 255, 255, 0.2) !important;
   font-weight: normal !important;
 }
 
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
-  color: #888888 !important;
+  color: rgba(255, 255, 255, 0.2) !important;
   font-weight: normal !important;
 }
 
@@ -300,10 +300,9 @@ textarea:-ms-input-placeholder {
 .preview {
   position: relative;
   background-color: #161a1a;
-  border: 1px solid #555a5a;
-  width: 216px;
-  height: 216px;
-  margin-right: 20px;
+  width: 240px;
+  height: 240px;
+  margin-right: 30px;
   color: #a0a0a0;
   display: flex;
   align-items: center;
@@ -553,7 +552,7 @@ textarea:-ms-input-placeholder {
   white-space: normal;
   font-size: 14px;
   line-height: 1.5;
-  color: #fff;
+  color: rgba(255, 255, 255, 0.6);
   margin-bottom: 10px;
 }
 
@@ -562,7 +561,7 @@ textarea:-ms-input-placeholder {
   white-space: normal;
   font-size: 12px;
   line-height: 1.5;
-  color: #ababab;
+  color: rgba(255, 255, 255, 0.3);
 }
 
 .require {
@@ -680,15 +679,15 @@ textarea:-ms-input-placeholder {
 
 .ui-input {
   outline: none;
-  border: 1px solid #555a5a;
-  background-color: #161a1a;
-  padding: 0 10px;
+  border: 1px solid rgba(151, 151, 151, 0.2);
+  background: #252526;
+  padding: 0 16px;
   color: #fff;
   letter-spacing: 1px;
   border-radius: 2px;
-  height: 32px;
+  height: 36px;
   width: 100%;
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .ui-textarea {

src/config/menu.js

@@ -1,3 +1,4 @@
+// 前端路由配置
 const PCMenu = [
   {
     text: "基础",

src/framework/Main.vue

@@ -1,6 +1,9 @@
 <template>
+  <!-- 编辑器顶部栏以下部分 -->
   <main class="app-main">
+    <!-- 左侧菜单栏 -->
     <app-menu></app-menu>
+    <!-- 其余 -->
     <div class="app-content">
       <div
         class="app-player"
@@ -9,7 +12,6 @@
         <Core v-show="$route.meta.loadScene"/>
       </div>
       <toolbar v-show="$route.meta.loadScene"></toolbar>
-
       <div class="app-view">
         <keep-alive>
           <router-view />
@@ -79,7 +81,7 @@ export default {
 }
 .app-view-toolbar {
   display: flex;
-  position: absolute !important;
+  position: fixed !important;
   left: 0;
   right: 236px;
   bottom: 0;

src/views/base/Setting.vue

@@ -1,3 +1,4 @@
 <template>
-    <ul class="view-setting" app-border dir-left></ul>  
+  <!-- 编辑器-基础-右侧栏 -->
+  <ul class="view-setting" app-border dir-left></ul>  
 </template>

src/views/base/Toolbar.vue

@@ -1,12 +1,13 @@
 <template>
+  <!-- 编辑器-基础-中间部分 -->
   <div class="app-view-toolbar app-view-full-toolbar">
     <div class="main">
       <div class="ui-title-big">基础设置</div>
-      <div class="ui-title"><span class="">封面</span></div>
       <div class="upload-con">
         <div class="uc-l">
           <div class="preview">
-            <img :src="info.icon||$thumb" alt="" />
+            <img :src="info.icon || require('@/assets/images/default/img_cover_default_2.png')" alt="" />
+            <button class="ui-button submit setting-cover-btn" @click="addScene">设置封面</button>
           </div>
           <div class="upload-btn">
             <button class="ui-button submit" @click="selectHandle('image')">选择图片</button>
@@ -24,27 +25,26 @@
           <div class="ui-title">
             <span class="">标题</span>
           </div>
-          <div :class="{ 'ui-warning': false }">
+          <div class="title-input-wrapper">
             <input
               v-model="info.name"
               @blur="$store.commit('SetInfo',info)"
               type="text"
-              class="ui-input"
               maxlength="50"
-              placeholder="作品标题，限50字"
+              placeholder="请输入作品标题"
             />
+            <span class="count">{{info.name.length}}/50</span>
           </div>
-          <div class="ui-title" style="margin-top:10px"><span>简介</span></div>
-          <div :class="{ 'ui-warning': false }">
+          <div class="ui-title jianjie"><span>简介</span></div>
+          <div class="jianjie-textarea-wrapper">
             <textarea
               v-model="info.description"
               @blur="$store.commit('SetInfo',info)"
-              style="height:110px;"
               maxlength="500"
-              placeholder="作品简介，限500字"
+              placeholder="请输入作品简介"
               type="text"
-              class="ui-input ui-textarea"
             />
+            <span class="count">{{info.description.length}}/500</span>
           </div>
         </div>
       </div>
@@ -73,9 +73,9 @@
     </Table>
     </div>
 
-    <div class="dialog" style="z-index: 2000" v-if="showScene">
+    <div class="dialog" style="z-index: 2000" v-if="isShowScene">
       <Select
-        @cancle="showScene = false"
+        @cancle="isShowScene = false"
         :title="'选择素材'"
         @submit="handleSelect"
       >
@@ -115,13 +115,13 @@ export default {
         name:"自动巡游",
         id:"xy"
       }],
-      showScene:false,
       activeSetting:'',
       dataURL: "",
-      isShowSelect:false,
+      isShowScene:false, // 显示全景图片选择窗口
+      isShowSelect:false, // 显示普通图片选择窗口
       list:[],
       key:'',
-      clickFrom:'',
+      clickFrom:'', // 来自“选择图片”：base。来自“全景封面”：scene。来自右侧的“选择图片”：editPanel
       paging: {
         pageSize: 8,
         pageNum: 1,
@@ -157,7 +157,7 @@ export default {
     },
     addScene(){
       this.clickFrom = 'scene'
-      this.showScene = true
+      this.isShowScene = true
     },
     changeCurrent(data){
       this.paging.pageNum = data;
@@ -169,7 +169,7 @@ export default {
     handleSelect(data){
       if (this.clickFrom == 'scene') {
         this.info.icon = data.icon
-        this.showScene = false
+        this.isShowScene = false
       }
       else{
         this.clickFrom == 'editpanel'?  this.select = data[0].icon :this.info.icon = data[0].icon
@@ -223,7 +223,7 @@ export default {
 }
 .main {
   position: fixed;
-  width: 800px;
+  width: 930px;
   top: 15%;
   left: 50%;
   transform: translateX(-50%);
@@ -234,15 +234,74 @@ export default {
 }
 .uc-l {
   .ui-remark{
-    margin-top: 10px;
+    margin-top: 16px;
   }
-
 }
 
 .uc-r {
   width: 100%;
+  > .title-input-wrapper {
+    position: relative;
+    border: 1px solid rgba(151, 151, 151, 0.2);
+    padding: 0 16px;
+    background: #252526;
+    border-radius: 2px;
+    height: 36px;
+    width: 100%;
+    > input {
+      border: none;
+      background: transparent;
+      outline: none;
+      height: 100%;
+      width: calc(100% - 50px);
+      padding: none;
+      color: #fff;
+      letter-spacing: 1px;
+      font-size: 14px;
+    }
+    > .count {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 16px;
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.2);
+    }
+  }
+  > .jianjie {
+    margin-top: 20px;
+  }
+  > .jianjie-textarea-wrapper {
+    position: relative;
+    border: 1px solid rgba(151, 151, 151, 0.2);
+    background: #252526;
+    border-radius: 2px;
+    height: 123px;
+    width: 100%;
+    > textarea {
+      padding: 9px 16px 30px 16px;
+      resize: none;
+      border: none;
+      background: transparent;
+      outline: none;
+      width: 100%;
+      height: calc(100% - 30px);
+      padding: none;
+      color: #fff;
+      letter-spacing: 1px;
+      font-size: 14px;
+    }
+    > .count {
+      position: absolute;
+      right: 16px;
+      bottom: 9px;
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.2);
+    }
+  }
 }
 
+/* 
 .upload-btn {
   display: flex;
   width: 216px;
@@ -289,7 +348,7 @@ export default {
     }
   }
 }
-
+ */
 .guide {
   cursor: pointer;
   position: relative;
@@ -334,9 +393,16 @@ export default {
 
 .preview {
   overflow: hidden;
+  position: relative;
   img {
     height: 100%;
   }
+  .setting-cover-btn {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 16px;
+  }
 }
 
 .setting-con{

src/views/base/index.vue

@@ -1,6 +1,9 @@
 <template>
+  <!-- 编辑器-基础 -->
   <div>
+    <!-- 左侧 -->
     <setting></setting>
+    <!-- 中间 -->
     <toolbar></toolbar>
   </div>
 </template>