update preview modal style

ly525
1 parent fd75f972
Showing 7 changed files with 26 additions and 29 deletions
front-end/h5/package.json
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/editor/modals/preview.vue
front-end/h5/src/components/core/styles/index.scss
front-end/h5/src/components/plugins/lbp-text.js
front-end/h5/src/store/modules/editor.js
front-end/h5/src/views/Editor.vue
@@ -5,7 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
+    "lint": "vue-cli-service lint --fix",
     "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "vue-cli-service test:unit",
     "deploy": "rm -rf dist && npm run build && ./deploy.sh"
@@ -203,7 +203,6 @@ export default {
                   }}
                 >
                   {h(element.name, data)}
-                  {element.commonStyle.zindex}
                 </Shape>
               )
             })
@@ -14,52 +14,52 @@ export default {
   },
   computed: {
     ...mapState('editor', {
-      work: state => state.work,
+      work: state => state.work
     }),
     releaseUrl () {
       return `//localhost:1337/works/preview/${this.work.id}`
     }
   },
-  data() {
+  data () {
     return {
       confirmLoading: false,
-      qrcodeSize: 500,
+      qrcodeSize: 500
     }
   },
   watch: {
     visible (val) {
-      if (!val) return;
-      this.$nextTick(() => this.drawQRcode());
-    },
+      if (!val) return
+      this.$nextTick(() => this.drawQRcode())
+    }
   },
   methods: {
     ...mapActions('editor', [
       'saveWork',
       'updateWork'
     ]),
-    handleOk(e) {
-      this.confirmLoading = true;
+    handleOk (e) {
+      this.confirmLoading = true
       this.saveWork().then(res => {
         this.handleClose()
-        this.confirmLoading = false;
+        this.confirmLoading = false
       })
       // setTimeout(() => {
       // }, 2000);
     },
-    handleCancel(e) {
-      console.log('Clicked cancel button');
+    handleCancel (e) {
+      console.log('Clicked cancel button')
       this.handleClose()
     },
     drawQRcode () {
-      var canvas = document.getElementById('qrcode-container');
+      var canvas = document.getElementById('qrcode-container')
       QRCode.toCanvas(canvas, this.releaseUrl, { scale: 4 }, err => {
-        console.log(err);
-      });
+        console.log(err)
+      })
     },
     postMessage2Iframe (message) {
       let iframeWin = document.getElementById('iframe-for-preview').contentWindow
       // iframeWin.postMessage('next', window.location.origin);
-      iframeWin.postMessage(message, 'http://localhost:1337');
+      iframeWin.postMessage(message, 'http://localhost:1337')
     }
   },
   render (h) {
@@ -71,11 +71,11 @@ export default {
         onCancel={this.handleCancel}
         width="70%"
         okText="保存"
-        >
+      >
         <div class="preview-wrapper">
           <a-row gutter={20}>
             <a-col span={8}>
-              <div class="phone-wrapper" style={{ transform: 'scale(0.8)'}}>
+              <div class="phone-wrapper" style={{ transform: 'scale(0.8)' }}>
                 <div class="phone">
                   <div class="float-ctrl-panel">
                     <a class="page-controller" onClick={(e) => { this.postMessage2Iframe('prev') }}>上一页</a>
@@ -104,14 +104,14 @@ export default {
                   <a-input
                     class="input"
                     value={this.work.title}
-                    onChange={e => this.updateWork({ title: e.target.value})}
+                    onChange={e => this.updateWork({ title: e.target.value })}
                     // onBlur={this.saveTitle}
                     placeholder="请输入标题"
                   ></a-input>
                   <a-input
                     class="input"
                     value={this.work.description}
-                    onChange={e => this.updateWork({ description: e.target.value})}
+                    onChange={e => this.updateWork({ description: e.target.value })}
                     // v-model="description"
                     // onBlur={this.saveDescription}
                     placeholder="请输入描述"
@@ -122,7 +122,7 @@ export default {
                   <div class="label">手机扫码分享给好友</div>
                   <div class="code">
                     <canvas style="float: left" id="qrcode-container"></canvas>
-                    <a-radio-group class="radios" value={this.qrcodeSize} onChange={e => {this.qrcodeSize = e.target.value}}>
+                    <a-radio-group class="radios" value={this.qrcodeSize} onChange={e => { this.qrcodeSize = e.target.value }}>
                       <a-radio label={500} value={500}>500x500</a-radio>
                       <a-radio label={1000} value={1000}>1000x1000</a-radio>
                       <a-radio label={2000} value={2000}>2000x2000</a-radio>
@@ -141,7 +141,6 @@ export default {
 }
 </script>
-
 <style lang="scss">
 .preview-wrapper {
   position: relative;
@@ -234,4 +233,4 @@ export default {
   }
 }
-</style>
 \ No newline at end of file
+</style>
@@ -18,7 +18,8 @@
   .shortcut-button {
     width: 100%;
-    height: 40px;
+    height: 30px;
+    font-size: 14px;
     .shortcut-icon {
       padding-right: 4px;
@@ -10,7 +10,7 @@ export default {
     } = this
     const style = {
-      color,
+      color: `${color} !important`,
       textAlign,
       backgroundColor: 'transparent',
       fontSize: fontSize,
 // initial state
-import strapi from '../../utils/strapi'
 import Work from '../../components/core/models/work'
 import { actions as pageActions, mutations as pageMutations } from './page'
 import { actions as elementActions, mutations as elementMutations } from './element'
 <script>
-import Vue from 'vue'
 import CoreEditor from '../components/core/editor/index.js'
 import loadPluginMixin from '../mixins/load-plugins.js'
 export default {
   extends: CoreEditor,
-  mixins: [loadPluginMixin],
+  mixins: [loadPluginMixin]
 }
 </script>
 <style lang="scss">