分享设置手机模型添加

src/components/HeaderEdit.vue

@@ -48,22 +48,30 @@
 
       </form>
     </div> -->
+    <!-- 分享设置 -->
+    <ShareSetting v-show="isShareSetting" :close="closeShare"></ShareSetting>
   </header>
 </template>
 
 <script>
 import tools from "../util/tools";
 import api from "../api/editor";
+
+import ShareSetting from "./ShareSetting";
 var time = null;
 export default {
   props: {
     goback: Function
   },
+  components: {
+    ShareSetting
+  },
   data() {
     return {
       loading: false,
       operationList: [],
-      nextList: []
+      nextList: [],
+      isShareSetting: false
     };
   },
   beforeCreate() {
@@ -251,7 +259,12 @@ export default {
         that.$store.state.editor.editorPage.elements = res["pages"][0].elements;
       });
     },
-    shareSetting() {},
+    shareSetting() {
+      this.isShareSetting = true;
+    },
+    closeShare() {
+      this.isShareSetting = false;
+    },
     save() {}
   }
 };
@@ -266,11 +279,11 @@ export default {
   position: relative;
   .reset-btn {
     height: 100%;
-    padding: 0 20px;
+    padding: 0 50px;
     cursor: pointer;
   }
   .el-icon-arrow-left {
-    margin-right: 20px;
+    margin-right: 10px;
   }
   .right-panel {
     float: right;

src/components/ShareSetting.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="share">
     <div class="preview">
-      <div class="preview-area"></div>
+      <div class="phone-top"></div>
+      <div class="phone-center"></div>
+      <div class="content">
+        <div class="phone-status"></div>
+        <div class="preview-area"></div>
+      </div>
+      <div class="phone-bottom"></div>
     </div>
     <div class="setting">
       <img class="share-close" src="../assets/images/share-close.png" alt="" @click="closeBtn">
@@ -81,13 +87,49 @@ export default {
   .preview {
     flex-grow: 2;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
-    .preview-area {
-      width: 340px;
+    .phone-top {
+      width: 341px;
+      height: 83px;
+      background: url(../assets/images/phone-model-top.png) center no-repeat;
+      background-size: cover;
+    }
+    .phone-center {
+      position: relative;
+      width: 346px;
+      height: 530px;
+      background: url(../assets/images/phone-model-center.png) repeat-y;
+      background-size: cover;
+    }
+    .content {
+      position: absolute;
+      width: 298px;
       height: 530px;
-      border: 1px solid #d6d6d6;
-      background: red;
+      .phone-status {
+        margin-left: -2px;
+        margin-top: -2px;
+        width: 300px;
+        height: 50px;
+        background: url(../assets/images/phone-model-status.png) repeat-y;
+        background-size: cover;
+      }
+      .preview-area {
+        position: relative;
+        margin-left: -1px;
+        width: 298px;
+        height: 480px;
+        border: 1px solid #000;
+        border-top: 0px;
+      }
+    }
+
+    .phone-bottom {
+      width: 342px;
+      height: 87px;
+      background: url(../assets/images/phone-model-bottom.png) center no-repeat;
+      background-size: cover;
     }
   }
   .setting {