提交

.env.production

@@ -2,4 +2,4 @@
 ENV = 'production'
 
 # 管理系统/生产环境
-VUE_APP_BASE_API = 'http://140.143.229.114:1818'
+VUE_APP_BASE_API = 'http://golden.shangqie.cn/api'

.env.staging

@@ -4,4 +4,4 @@ NODE_ENV = production
 ENV = 'staging'
 
 # 管理系统/测试环境
-VUE_APP_BASE_API = 'http://140.143.229.114:1818'
+VUE_APP_BASE_API = 'http://golden.shangqie.cn/api'

package.json

@@ -40,18 +40,15 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
-    "element-ui": "^2.13.0",
-    "vue": "^2.6.10",
-    "vuedraggable": "^2.23.2",
-    "core-js": "^3.4.4",
-    "html2canvas": "^1.0.0-rc.5",
-    "uuid": "^3.3.3",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.18.1",
     "clipboard": "2.0.4",
+    "core-js": "3.6.5",
     "echarts": "4.2.1",
+    "element-ui": "^2.13.0",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
+    "html2canvas": "^1.0.0-rc.5",
     "js-beautify": "1.10.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "3.0.0-rc.1",
@@ -61,11 +58,15 @@
     "quill": "1.3.7",
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
+    "uuid": "^3.3.3",
+    "vue": "^2.6.10",
+    "vue-canvas-poster": "^1.2.1",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",
     "vue-qr": "^2.5.0",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
+    "vuedraggable": "^2.23.2",
     "vuex": "3.1.0"
   },
   "devDependencies": {

src/App.vue

@@ -5,7 +5,30 @@
 </template>
 
 <script>
-export default  {
+export default {
-  name:  'App'
+  name: 'App'
-}
+};
 </script>
+<style lang="scss">
+.btn-adds {
+  background-color: #41b584;
+  color: #fff;
+  border-color: #41b584;
+  &:hover {
+    background: #67c49d;
+    border-color: #67c49d;
+  }
+}
+.btn-del {
+  color: #fff;
+  background-color: #ff4d4f;
+  border-color: #ff4d4f;
+  &:hover {
+    background: #ff7172;
+    border-color: #ff7172;
+  }
+}
+.el-menu-item {
+  color: #515a6e;
+}
+</style>

src/assets/styles/element-variables.scss

@@ -4,7 +4,7 @@
 **/
 
 /* theme color */
-$--color-primary: #1890ff;
+$--color-primary: #41b584;
 $--color-success: #13ce66;
 $--color-warning: #ffba00;
 $--color-danger: #ff4949;
@@ -17,12 +17,12 @@ $--button-font-weight: 400;
 $--border-color-light: #dfe4ed;
 $--border-color-lighter: #e6ebf5;
 
-$--table-border:1px solid#dfe6ec;
+$--table-border: 1px solid#dfe6ec;
 
 /* icon font path, required */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
-@import "~element-ui/packages/theme-chalk/src/index";
+@import '~element-ui/packages/theme-chalk/src/index';
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/assets/styles/index.scss

@@ -10,7 +10,8 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
 }
 
 label {
@@ -90,7 +91,7 @@ div:focus {
     visibility: hidden;
     display: block;
     font-size: 0;
-    content: " ";
+    content: ' ';
     clear: both;
     height: 0;
   }
@@ -104,7 +105,8 @@ aside {
   display: block;
   line-height: 32px;
   font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   color: #2c3e50;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -122,6 +124,7 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 20px;
+  background-color: #f6f8f9 !important;
 }
 
 .components-container {
@@ -134,7 +137,7 @@ aside {
 }
 
 .text-center {
-  text-align: center
+  text-align: center;
 }
 
 .sub-navbar {
@@ -145,7 +148,13 @@ aside {
   text-align: right;
   padding-right: 20px;
   transition: 600ms ease position;
-  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(32, 182, 249, 1) 0%,
+    rgba(32, 182, 249, 1) 0%,
+    rgba(33, 120, 241, 1) 100%,
+    rgba(33, 120, 241, 1) 100%
+  );
 
   .subtitle {
     font-size: 20px;
@@ -199,6 +208,6 @@ aside {
   margin-top: 20px;
 }
 // 操作栏样式
-.operate-container{
+.operate-container {
   margin-top: 20px;
 }

src/assets/styles/sidebar.scss

@@ -1,8 +1,7 @@
 #app {
-
   .main-container {
     min-height: 100%;
-    transition: margin-left .28s;
+    transition: margin-left 0.28s;
     margin-left: $sideBarWidth;
     position: relative;
   }
@@ -22,7 +21,8 @@
 
     // reset element-ui css
     .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out,
+        0s padding-right ease-in-out;
     }
 
     .scrollbar-wrapper {
@@ -63,7 +63,8 @@
       width: 100% !important;
     }
 
-    .el-menu-item, .el-submenu__title {
+    .el-menu-item,
+    .el-submenu__title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
@@ -77,11 +78,11 @@
       }
     }
 
-    .is-active>.el-submenu__title {
+    .is-active > .el-submenu__title {
       color: $subMenuActiveText !important;
     }
 
-    & .nest-menu .el-submenu>.el-submenu__title,
+    & .nest-menu .el-submenu > .el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
@@ -117,7 +118,7 @@
     .el-submenu {
       overflow: hidden;
 
-      &>.el-submenu__title {
+      & > .el-submenu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -132,8 +133,8 @@
 
     .el-menu--collapse {
       .el-submenu {
-        &>.el-submenu__title {
+        & > .el-submenu__title {
-          &>span {
+          & > span {
             height: 0;
             width: 0;
             overflow: hidden;
@@ -156,7 +157,7 @@
     }
 
     .sidebar-container {
-      transition: transform .28s;
+      transition: transform 0.28s;
       width: $sideBarWidth !important;
     }
 
@@ -170,7 +171,6 @@
   }
 
   .withoutAnimation {
-
     .main-container,
     .sidebar-container {
       transition: none;
@@ -180,13 +180,13 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
+  & > .el-menu {
     .svg-icon {
       margin-right: 16px;
     }
   }
 
-  .nest-menu .el-submenu>.el-submenu__title,
+  .nest-menu .el-submenu > .el-submenu__title,
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
@@ -195,7 +195,7 @@
   }
 
   // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
+  > .el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
 

src/assets/styles/variables.scss

@@ -1,25 +1,25 @@
 // base color
-$blue:#324157;
+$blue: #324157;
-$light-blue:#3A71A8;
+$light-blue: #3a71a8;
-$red:#C03639;
+$red: #c03639;
-$pink: #E65D6E;
+$pink: #e65d6e;
-$green: #30B08F;
+$green: #30b08f;
-$tiffany: #4AB7BD;
+$tiffany: #4ab7bd;
-$yellow:#FEC171;
+$yellow: #fec171;
-$panGreen: #30B08F;
+$panGreen: #30b08f;
 
 // sidebar
-$menuText:#bfcbd9;
+$menuText: #515a6e;
-$menuActiveText:#409EFF;
+$menuActiveText: #409eff;
-$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+$subMenuActiveText: #41b584; // https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#304156;
+$menuBg: #fff;
-$menuHover:#263445;
+$menuHover: #ecf8f3;
 
-$subMenuBg:#1f2d3d;
+$subMenuBg: #fff;
-$subMenuHover:#001528;
+$subMenuHover: #ecf8f3;
 
-$sideBarWidth: 200px;
+$sideBarWidth: 266px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/components/imageSelection.vue

@@ -7,8 +7,11 @@
           clearable
           v-model="search"
           placeholader="搜索内容"
-          class="width-200" size="mini"  suffix-icon="el-icon-search">
+          class="width-200"
-           <el-button slot="append">搜索</el-button>
+          size="mini"
+          suffix-icon="el-icon-search"
+        >
+          <el-button slot="append">搜索</el-button>
         </el-input>
       </div>
     </div>
@@ -19,11 +22,12 @@
           class="list-item cursor-p"
           :key="item.uid"
           v-for="(item, i) in imageList"
-          :style="{background: item.bg}">
+          :style="{ background: item.bg }"
+        >
           <el-checkbox class="check-ct" :value="item.active"></el-checkbox>
-          <img :src="item.path" class="img"/>
+          <img :src="item.path" class="img" />
           <div class="text single-row-ellipsis">
-            {{item.name}}
+            {{ item.name }}
           </div>
         </div>
       </div>
@@ -35,7 +39,7 @@
   </div>
 </template>
 <script>
-import uuid from 'uuid'
+import uuid from 'uuid';
 export default {
   props: {
     // 是否单选
@@ -47,39 +51,39 @@ export default {
       type: Object
     }
   },
-  data () {
+  data() {
     return {
       search: '',
       imageList: [
         {
           uid: uuid(),
           name: '钢铁侠',
-          path: require('../assets/image/1.jpg')
+          path: require('../assets/image/profile.jpg')
         },
         {
           uid: uuid(),
           name: '蜘蛛侠',
-          path: require('../assets/image/2.jpg')
+          path: require('../assets/image/profile.jpg')
         },
         {
           uid: uuid(),
           name: '美国队长',
-          path: require('../assets/image/3.jpg')
+          path: require('../assets/image/profile.jpg')
         },
         {
           uid: uuid(),
           name: '奇异博士',
-          path: require('../assets/image/4.jpg')
+          path: require('../assets/image/profile.jpg')
         },
         {
           uid: uuid(),
           name: '蚁人',
-          path: require('../assets/image/5.jpg')
+          path: require('../assets/image/profile.jpg')
         },
         {
           uid: uuid(),
           name: '钢铁侠2',
-          path: require('../assets/image/6.jpg')
+          path: require('../assets/image/profile.jpg')
         }
       ],
       activeIndex: -1,
@@ -90,63 +94,67 @@ export default {
       tagSelect: ''
       // systemMaterialListCount: 0,
       // materialListCount: 0
-    }
+    };
   },
   methods: {
-    handleClickImageItem (i, item) {
+    handleClickImageItem(i, item) {
-      this.isSingle ? this.singleModeClick(i, item) : this.multipleModeClick(i, item)
+      this.isSingle
+        ? this.singleModeClick(i, item)
+        : this.multipleModeClick(i, item);
     },
-    singleModeClick (i, item) {
+    singleModeClick(i, item) {
       if (i === this.activeIndex) {
-        this.$set(this.imageList, i, { ...item, active: false })
+        this.$set(this.imageList, i, { ...item, active: false });
-        this.activeIndex = -1
+        this.activeIndex = -1;
       } else {
-        let oldItem = this.imageList[this.activeIndex]
+        let oldItem = this.imageList[this.activeIndex];
-        this.$set(this.imageList, this.activeIndex, { ...oldItem, active: false })
+        this.$set(this.imageList, this.activeIndex, {
-        this.activeIndex = i
+          ...oldItem,
-        this.$set(this.imageList, this.activeIndex, { ...item, active: true })
+          active: false
+        });
+        this.activeIndex = i;
+        this.$set(this.imageList, this.activeIndex, { ...item, active: true });
       }
     },
-    multipleModeClick (i, item) {
+    multipleModeClick(i, item) {
-      this.$set(this.imageList, i, { ...item, active: !item.active })
+      this.$set(this.imageList, i, { ...item, active: !item.active });
     },
-    reset () {
+    reset() {
       this.imageList.forEach(v => {
-        v.active = false
+        v.active = false;
-      })
+      });
     },
-    async submit () {
+    async submit() {
-      let imageSelection = this.imageList.filter(v => v.active)
+      let imageSelection = this.imageList.filter(v => v.active);
       if (imageSelection.length === 0) {
-        this.$message.error('请选择图片!')
+        this.$message.error('请选择图片!');
-        return false
+        return false;
       }
-      this.$emit('success', this.isSingle ? imageSelection[0] : imageSelection)
+      this.$emit('success', this.isSingle ? imageSelection[0] : imageSelection);
-      this.reset()
+      this.reset();
     },
-    cancel () {
+    cancel() {
-      this.$emit('cancel')
+      this.$emit('cancel');
-      this.reset()
+      this.reset();
     }
   },
   watch: {
-    value (val) {
+    value(val) {
       if (val) {
         // this.findBackground()
       }
     }
   },
-  async created () {
+  async created() {}
-  }
+};
-}
 </script>
 <style lang="scss" scoped>
-  * {
+* {
-    box-sizing: border-box;
+  box-sizing: border-box;
-  }
+}
-.image-selection-comp{
+.image-selection-comp {
   position: relative;
-  .header-ct{
+  .header-ct {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -155,30 +163,30 @@ export default {
       font-weight: 400;
       color: rgba(44, 62, 80, 1);
     }
-    .right{
+    .right {
       display: flex;
     }
   }
-  .main{
+  .main {
     display: flex;
-    .left{
+    .left {
       box-sizing: border-box;
       width: 200px;
       height: 400px;
-      border-right: 1px solid #E4E8EB;
+      border-right: 1px solid #e4e8eb;
-      .type-child-item{
+      .type-child-item {
         position: relative;
         padding-left: 24px;
         height: 32px;
         line-height: 32px;
-        &.active{
+        &.active {
-          background: #409EFF;
+          background: #409eff;
           color: white;
-          &:before{
+          &:before {
             background: white;
           }
         }
-        &:before{
+        &:before {
           content: '';
           display: block;
           position: absolute;
@@ -193,7 +201,7 @@ export default {
         }
       }
     }
-    .right{
+    .right {
       flex: 1;
       display: grid;
       flex-wrap: wrap;
@@ -202,31 +210,31 @@ export default {
       grid-row-gap: 8px;
       grid-column-gap: 8px;
       margin-left: 16px;
-      .list-item{
+      .list-item {
         position: relative;
         width: 144px;
         height: 144px;
         border: 1px solid #e1e1e1;
         overflow: hidden;
-        .check-ct{
+        .check-ct {
           position: absolute;
           top: 8px;
           left: 8px;
         }
-        .img{
+        .img {
           display: block;
           width: 100%;
           height: 100.8px;
         }
       }
-      .text{
+      .text {
         height: 43px;
         line-height: 43px;
         text-align: center;
       }
     }
   }
-  .bottom-ct{
+  .bottom-ct {
     /*position: absolute;
     left: 0;
     bottom: 0;*/

src/components/poster-editor/icon/index.vue

@@ -1,12 +1,14 @@
 <template>
   <svg
-    :class="{active: active}"
+    :class="{ active: active }"
-    class="icon el-icon cursor-p" aria-hidden="true">
+    class="icon el-icon cursor-p"
+    aria-hidden="true"
+  >
     <use :xlink:href="'#icon-' + icon"></use>
   </svg>
 </template>
 <script>
-import './iconfont.js'
+import './iconfont.js';
 export default {
   props: {
     icon: {
@@ -18,18 +20,18 @@ export default {
       default: false
     }
   }
-}
+};
 </script>
 <style lang="scss">
-.icon{
+.icon {
   font-size: 18px;
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
-  fill: rgba(0,0,0,0.5);
+  fill: rgba(255, 255, 255, 1);
   overflow: hidden;
-  &.active{
+  &.active {
-    fill: rgba(0,0,0,1);
+    fill: rgba(0, 0, 0, 1);
   }
 }
 </style>

src/components/poster-editor/imgWidget.vue

@@ -24,15 +24,12 @@ export default {
       type: Number,
       required: true
     }
-  },
-  created() {
-    console.log(this.value);
   }
 };
 </script>
 <style lang="scss">
 .img-widget-ct {
-  width: 100%;
+  // width: 100%;
   height: 100%;
   user-select: none;
 }

src/components/poster-editor/index.vue

@@ -9,7 +9,12 @@
               @click="getHistory(-1)"
               type="text"
             >
-              <Icon :active="canClickPrev" class="m-r-16" icon="Undo"></Icon>
+              <Icon
+                style="color:#fff"
+                :active="canClickPrev"
+                class="m-r-16"
+                icon="Undo"
+              ></Icon>
             </el-button>
           </el-tooltip>
           <el-tooltip effect="dark" content="前进" placement="top-start">
@@ -26,7 +31,8 @@
           轻点元素开始编辑
         </div>
         <div class="right">
-          <el-button @click="submitImg">提交</el-button>
+          <el-button size="small" @click="resetItme">重置</el-button>
+          <el-button size="small" @click="submitImg">保存并返回</el-button>
         </div>
       </div>
       <draggable
@@ -42,7 +48,19 @@
         class="poster-content m-b-16"
         tag="div"
       >
-        <img class="bg-puppet" :src="value && value.background.img" />
+        <div>
+          <vue-canvas-poster
+            v-show="true"
+            :painting="painting"
+            @success="success"
+            @fail="fail"
+          ></vue-canvas-poster>
+        </div>
+        <img
+          v-show="value.background.img"
+          class="bg-puppet"
+          :src="value && value.background.img"
+        />
         <widget
           :class="{ disabled: !item.active }"
           @click.native="handleActiveWidget(item)"
@@ -256,6 +274,7 @@ import { setDataRangeMap, defaultDataMap } from './widgetInitDataMap';
 import Icon from './icon/index';
 import { qrUpdate } from '@/api/index';
 import VueQr from 'vue-qr';
+import { VueCanvasPoster } from 'vue-canvas-poster';
 
 let zIndex = 0;
 
@@ -278,8 +297,8 @@ export default {
       type: Object,
       default() {
         return {
-          width: 375,
+          width: 620,
-          height: 620
+          height: 375
         };
       }
     }
@@ -291,10 +310,30 @@ export default {
     blankDialog,
     imageSelection,
     Icon,
-    VueQr
+    VueQr,
+    VueCanvasPoster
   },
   data() {
     return {
+      painting: {
+        width: '120px',
+        height: '120px',
+        background: '#eee',
+        views: [
+          {
+            type: 'qrcode',
+            content: 'http://golden.shangqie.cn/#/?id=' + this.id,
+            css: {
+              top: '0',
+              left: '0',
+              color: '#000',
+              width: '120px',
+              height: '120px'
+            }
+          }
+        ]
+      },
+      imgArr: '',
       editorUid: 'uid' + uuid(),
       dZoom: 0.52,
       isDragging: false,
@@ -311,12 +350,36 @@ export default {
     };
   },
   methods: {
+    resetItme() {
+      this.$emit('resetData');
+    },
+    success(e) {
+      this.imgArr = e;
+    },
+    fail(e) {
+      console.log(e);
+    },
     submitImg() {
-      // const
+      html2canvas(
-      console.log(this.id);
+        document
-      // qrUpdate(this.value).then(res => {
+          .querySelector(`#${this.editorUid}`)
-      //   console.log(res);
+          .querySelector('.poster-content'),
-      // });
+        {
+          useCORS: true,
+          // 编辑器缩放保持 960 * 720 的尺寸
+          scale: 1 / this.dZoom
+        }
+      ).then(canvas => {
+        localStorage.setItem('itemImg', canvas.toDataURL());
+        qrUpdate({
+          id: this.id,
+          notice: JSON.stringify(this.value),
+          noticePic: localStorage.getItem('itemImg')
+        }).then(({ message }) => {
+          this.msgSuccess(message);
+          this.$router.go(-1);
+        });
+      });
     },
     beforeAddImgWidget(imgObj) {
       this.addWidget('img', imgObj.path);
@@ -344,7 +407,6 @@ export default {
       this.$nextTick(() => {
         this.handleActiveWidget(item);
       });
-      console.log(this.value);
       this.$emit('input', {
         background: this.value.background,
         widgetList: this.widgetList
@@ -442,6 +504,7 @@ export default {
       this.widgetList.forEach(w => {
         w.active = false;
       });
+      let that = this;
       return new Promise(resolve => {
         // 激活当前编辑器 方便截图
         this.$emit('active');
@@ -456,17 +519,28 @@ export default {
               scale: 1 / this.dZoom
             }
           ).then(async canvas => {
-            console.timeEnd('1');
+            // console.timeEnd('1');
-            console.time('2');
+            // console.time('2');
+            localStorage.setItem('itemImg', canvas.toDataURL());
             let file = canvas
               .toDataURL('image/jpeg', 1)
               .replace('data:image/jpeg;base64,', '');
+            // console.log('图片');
+            // console.log(file);
             // base64的图片
-            console.timeEnd('2');
+            // console.timeEnd('2');
-            console.time('3');
+            // console.time('3');
+
+            const link = document.createElement('a');
+            link.href = canvas.toDataURL();
+            link.setAttribute('download', new Date().getTime() + '.png');
+            link.style.display = 'none';
+            document.body.appendChild(link);
+            link.click();
+
             if (cb) {
               await cb(file, resolve);
-              console.timeEnd('3');
+              // console.timeEnd('3');
               instance.close();
             }
           });
@@ -474,7 +548,7 @@ export default {
       });
     },
     changeBackground(imgUrl) {
-      console.log((this.value.background.img = imgUrl));
+      this.value.background.img = imgUrl;
       // this.value.background = imgUrl;
       // this.value.material_uid = imgObj.uid;
       // this.value.materialType = imgObj.expandType;
@@ -482,7 +556,6 @@ export default {
     },
     changeTextColor(color) {
       this.value.background.color = color;
-      console.log(this.value.background);
     },
     pushHistory(type, item, index) {
       const obj = {
@@ -598,6 +671,168 @@ export default {
         }
       },
       deep: true
+    },
+    imgArr() {
+      // 解决多次合并
+      const noticeItem = localStorage.getItem('notice');
+      if (noticeItem == 'null') {
+        const item = [
+          {
+            label: '图片',
+            type: 'img',
+            content: this.imgArr,
+            uuid: '32a' + +new Date(),
+            active: false,
+            style: {
+              top: 129,
+              left: 86,
+              height: 120,
+              width: 120,
+              align: { x: 0, y: 0 },
+              lineHeight: 14,
+              fontSize: 14,
+              background: 'rgba(0, 0, 0, 0)',
+              color: 'rgba(0, 0, 0, 1)',
+              letterSpacing: 0,
+              isOblique: false,
+              isBold: false,
+              zIndex: 1
+            },
+            setDataRange: {
+              box: {
+                show: true,
+                detail: {
+                  top: true,
+                  left: true,
+                  height: true,
+                  width: true,
+                  background: false,
+                  zIndex: true
+                }
+              },
+              content: {
+                show: false
+              },
+              innerStyle: {
+                show: false,
+                detail: {
+                  align: true,
+                  lineHeight: true,
+                  fontSize: true,
+                  color: true,
+                  letterSpacing: true,
+                  isOblique: true,
+                  isBold: true
+                }
+              }
+            }
+          },
+          {
+            label: '文本',
+            type: 'text',
+            content: '提货须知',
+            uuid: '32b' + +new Date(),
+            active: false,
+            style: {
+              top: 108,
+              left: 269,
+              height: 40,
+              width: 120,
+              align: { x: 0, y: 0 },
+              lineHeight: 14,
+              fontSize: 18,
+              background: 'rgba(0, 0, 0, 0)',
+              color: 'rgba(0, 0, 0, 1)',
+              letterSpacing: 0,
+              isOblique: false,
+              isBold: true,
+              zIndex: 1
+            },
+            setDataRange: {
+              box: {
+                show: true,
+                detail: {
+                  top: true,
+                  left: true,
+                  height: true,
+                  width: true,
+                  background: false,
+                  zIndex: true
+                }
+              },
+              content: {
+                show: false
+              },
+              innerStyle: {
+                show: false,
+                detail: {
+                  align: true,
+                  lineHeight: true,
+                  fontSize: true,
+                  color: true,
+                  letterSpacing: true,
+                  isOblique: true,
+                  isBold: true
+                }
+              }
+            }
+          },
+          {
+            label: '文本',
+            type: 'text',
+            content: `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1. 微信或者手机浏览器扫码提货卡二维码，填写姓名、手机号、邮寄地址，点击“我要提货”<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. 一个手机号仅限验证一次，提交地址后即可失效<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3. 有问题请联系客服 0551-63442479`,
+            uuid: '32c' + +new Date(),
+            active: false,
+            style: {
+              top: 142,
+              left: 268,
+              height: 155,
+              width: 345,
+              align: { x: 0, y: 0 },
+              lineHeight: 30,
+              fontSize: 16,
+              background: 'rgba(0, 0, 0, 0)',
+              color: 'rgba(0, 0, 0, 1)',
+              letterSpacing: 0,
+              isOblique: false,
+              isBold: false,
+              zIndex: 1
+            },
+            setDataRange: {
+              box: {
+                show: true,
+                detail: {
+                  top: true,
+                  left: true,
+                  height: true,
+                  width: true,
+                  background: false,
+                  zIndex: true
+                }
+              },
+              content: {
+                show: false
+              },
+              innerStyle: {
+                show: false,
+                detail: {
+                  align: true,
+                  lineHeight: true,
+                  fontSize: true,
+                  color: true,
+                  letterSpacing: true,
+                  isOblique: true,
+                  isBold: false
+                }
+              }
+            }
+          }
+        ];
+        this.value.widgetList = [...this.value.widgetList, ...item];
+      } else {
+      }
     }
   },
   mounted() {
@@ -609,6 +844,7 @@ export default {
     window.removeEventListener('resize', this.handleResizeFn);
   },
   created() {
+    console.log(this.value);
     this.widgetList = this.value.widgetList || [];
     this.widgetList.forEach(v => {
       v.history = {
@@ -627,6 +863,7 @@ export default {
   display: flex;
   min-width: 830px;
   .main-pane {
+    background-color: #7f7f7f;
     position: relative;
     flex: 1;
     padding: 0 16px;
@@ -643,11 +880,13 @@ export default {
         }
       }
       .center {
+        color: #fff;
         flex: 1;
       }
     }
     .poster-content {
-      top: 40px;
+      border: 1px solid #ccc;
+      top: 100px;
       left: 50%;
       position: absolute;
       /*min-width: 480px;

src/components/poster-editor/textWidget.vue

@@ -3,8 +3,10 @@
     :style="{
       transform: `scale(${needScale ? dZoom : 1})`
     }"
-    class="text-widget-ct">
+    class="text-widget-ct"
-    {{value}}
+    v-html="value"
+  >
+    <!-- {{value}} -->
   </div>
 </template>
 <script>
@@ -24,10 +26,10 @@ export default {
       required: true
     }
   }
-}
+};
 </script>
 <style lang="scss">
-  .text-widget-ct {
+.text-widget-ct {
-    user-select: none;
+  user-select: none;
-  }
+}
 </style>

src/components/poster-editor/widget.vue

@@ -5,15 +5,6 @@
     }"
     class="widget-ct cursor-p"
   >
-    <widgetWrapper
-      :d-zoom="dZoom"
-      :page="page"
-      :show-wrapper="showWrapper"
-      :widget-data="widgetData"
-      :widget-name="widgetData.type"
-    >
-      <vue-qr text="123" :size="140"></vue-qr>
-    </widgetWrapper>
     <widgetWrapper
       :d-zoom="dZoom"
       :page="page"
@@ -36,12 +27,6 @@ import widgetWrapper from './widgetWrapper';
 import textWidget from './textWidget';
 import imgWidget from './imgWidget';
 export default {
-  created() {
-    console.log(this.dZoom);
-    console.log(this.widgetData);
-    console.log(this.showWrapper);
-    console.log(this.page);
-  },
   props: {
     dZoom: {
       type: Number,

src/layout/components/Navbar.vue

@@ -83,7 +83,7 @@ export default {
   },
   methods: {
     toggleSideBar() {
-      // this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch('app/toggleSideBar');
     },
     async logout() {
       this.$confirm('确定注销并退出系统吗？', '提示', {

src/layout/components/Sidebar/Logo.vue

@@ -31,7 +31,7 @@ export default {
   },
   data() {
     return {
-      title: '九益车管理端',
+      title: '金槐花提货管理',
       logo: logoImg
       // logo: ''
     };
@@ -54,7 +54,7 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: #fff;
   text-align: center;
   overflow: hidden;
 
@@ -72,7 +72,7 @@ export default {
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #fff;
+      color: #515a6e;
       font-weight: 600;
       line-height: 50px;
       font-size: 22px;

src/router/index.js

@@ -107,7 +107,7 @@ export const asyncRouterMap = [
         path: 'index3',
         component: resolve => require(['@/views/index3'], resolve),
         name: 'index3',
-        meta: { title: '生成海报', icon: 'list' },
+        meta: { title: '生成提货卡', icon: 'list' },
         hidden: true
       }
     ]
@@ -117,7 +117,7 @@ export const asyncRouterMap = [
     component: Layout,
     redirect: '/ums/admin',
     name: 'ums',
-    meta: { title: '系统设置', icon: 'system' },
+    meta: { title: '系统设置', icon: 'list' },
     children: [
       {
         path: 'admin',

src/settings.js

@@ -1,5 +1,5 @@
 module.exports = {
-  title: '九益车服务平台',
+  title: '金槐花服务平台',
 
   /**
    * 是否系统布局配置

src/store/modules/permission.js

@@ -81,7 +81,7 @@ const permission = {
         const { username } = data;
         const accessedRouters = asyncRouterMap.filter(v => {
           //admin帐号直接返回所有菜单
-          if (username === 'admin') return true;
+          // if (username === 'admin') return true;
           if (hasPermission(menus, v)) {
             if (v.children && v.children.length > 0) {
               v.children = v.children.filter(child => {

src/views/index.vue

@@ -2,8 +2,8 @@
   <div class="dashboard-editor-container">
     <div style="height:10%"></div>
     <el-row class="tc">
-      <div style="font-size:50px">WELCOME LOGIN</div>
+      <div style="font-size:50px">欢迎登录金槐花提货管理系统</div>
-      <div class="mt10 mb10">欢迎登录九益车管理系统</div>
+      <!-- <div class="mt10 mb10"></div> -->
     </el-row>
   </div>
 </template>

src/views/index1.vue

@@ -39,18 +39,36 @@
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
       <div class="btn-add">
-        <el-button @click="handleAdd" size="small" type="success"
+        <el-button
-          >手动添加</el-button
+          @click="handleImport"
+          class="btn-adds"
+          size="small"
+          type="success"
         >
-        <el-button @click="handleDelete(false)" size="small" type="success"
-          >一键删除</el-button
-        >
-        <el-button @click="handleImport" size="small" type="success">
           导入
         </el-button>
-        <el-button @click="handleExport" size="small" type="warning">
+        <el-button
+          @click="handleExport"
+          class="btn-adds"
+          size="small"
+          type="warning"
+        >
           导出
         </el-button>
+        <el-button
+          @click="handleAdd"
+          class="btn-adds"
+          size="small"
+          type="success"
+          >手动添加</el-button
+        >
+        <el-button
+          @click="handleDelete(false)"
+          class="btn-del"
+          size="small"
+          type="success"
+          >一键删除</el-button
+        >
       </div>
     </el-card>
     <!-- @selection-change="handleSelectionChange" -->
@@ -88,7 +106,8 @@
       ></el-table-column>
       <el-table-column label="领取状态" align="center" prop="status">
         <template slot-scope="scope">
-          {{ scope.row.status == 0 ? '未领取' : '已领取' }}
+          <el-tag v-if="scope.row.status == 0" type="danger">未领取</el-tag>
+          <el-tag v-else>已领取</el-tag>
         </template>
       </el-table-column>
       <el-table-column
@@ -165,7 +184,9 @@
           <em>点击上传</em>
         </div>
         <div class="el-upload__tip" slot="tip">
-          <el-link type="info" style="font-size:12px" @click="importTemplate"
+          <el-link
+            style="font-size:16px;font-weight:700"
+            @click="importTemplate"
             >下载模板</el-link
           >
         </div>

src/views/index2.vue

@@ -5,8 +5,14 @@
     <el-card class="operate-container" shadow="never" style="margin-top:0">
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
-      <el-button class="btn-add" @click="handleAdd" size="small" type="success"
+      <el-button
-        >添加活动</el-button
+        class="btn-add btn-adds"
+        @click="handleAdd"
+        size="small"
+        type="success"
+      >
+        <i class="el-icon-plus"></i>
+        添加活动</el-button
       >
     </el-card>
     <el-table style="width: 100%" class="table-container" :data="dataList">
@@ -25,11 +31,16 @@
           <vue-qr :text="path + '?id=' + scope.row.id" :size="140"></vue-qr>
         </template>
       </el-table-column>
-      <el-table-column label="商品图片" align="center" prop="pic">
+
+      <el-table-column label="提货卡" align="center" prop="noticePic">
         <template slot-scope="scope">
+          <span v-if="scope.row.noticePic == null">
+            等待创建...
+          </span>
           <el-image
-            style="width: 100px; height: 100px"
+            v-else
-            :src="scope.row.pic"
+            style="height: 100px"
+            :src="scope.row.noticePic"
             fit="cover"
           ></el-image>
         </template>
@@ -39,8 +50,17 @@
         align="center"
         prop="unit"
       ></el-table-column>
+      <el-table-column label="礼品图片" align="center" prop="pic">
+        <template slot-scope="scope">
+          <el-image
+            style="width: 100px; height: 100px"
+            :src="scope.row.pic"
+            fit="cover"
+          ></el-image>
+        </template>
+      </el-table-column>
       <el-table-column
-        label="详情"
+        label="礼品详情"
         align="center"
         prop="note"
         show-overflow-tooltip
@@ -62,7 +82,7 @@
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button @click="handlePage2(scope.row)" type="text" size="small">
-            生成海报
+            编辑提货卡
           </el-button>
           <el-button @click="handlePage(scope.row)" type="text" size="small">
             领取名单
@@ -89,14 +109,14 @@
     />
     <!-- 添加修改 -->
     <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="活动名称" prop="name">
           <el-input v-model="form.name"></el-input>
         </el-form-item>
         <el-form-item label="单位" prop="unit">
           <el-input v-model="form.unit"></el-input>
         </el-form-item>
-        <el-form-item label="截止时间" prop="lastTime">
+        <el-form-item label="截止时间">
           <el-date-picker
             v-model="form.lastTime"
             type="datetime"
@@ -105,12 +125,12 @@
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="商品详情" prop="note">
+        <el-form-item label="礼品详情" prop="note">
           <div id="text">
             <editor v-model="form.note" :min-height="192" />
           </div>
         </el-form-item>
-        <el-form-item label="商品图片" prop="pic">
+        <el-form-item label="礼品图片" prop="pic">
           <multi-upload
             v-model="selectProductPics"
             :maxCount="1"
@@ -148,7 +168,7 @@ export default {
       imageUrl: require('@/assets/logo/logo.png'), //icon路径
       path:
         process.env.NODE_ENV === 'development'
-          ? 'http://192.168.0.125:1777'
+          ? 'http://golden.shangqie.cn/#/'
           : process.env.VUE_APP_BASE_API,
       queryParams: {
         pageNum: 1,
@@ -235,7 +255,7 @@ export default {
       this.form = {};
       this.resetForm('form');
       this.dialogVisible = true;
-      this.title = '添加商品';
+      this.title = '添加礼品';
     },
     // 编辑
     handleUpdate(row) {
@@ -278,6 +298,7 @@ export default {
       //   path: '/index3',
       //   query: { row: JSON.stringify(row) }
       // });
+      localStorage.setItem('notice', row.notice);
       this.$router.push({ path: '/index3', query: { id: row.id } });
     },
     /** 删除按钮操作 */

src/views/index3.vue

@@ -1,26 +1,30 @@
 <template>
   <div id="app-container" class="app-container">
     <el-menu
-      default-active="1"
+      default-active="2"
       :collapse="true"
-      style="background-color:#e8e8e8;border-right:1px solid #e0e0e0"
+      style="background-color:#fff;border-right:1px solid #e0e0e0"
     >
-      <el-menu-item index="1" @click="index = 1">
+      <!-- <el-menu-item index="1" @click="index = 1">
         <i class="el-icon-menu"></i>
         <span slot="title">模板</span>
-      </el-menu-item>
+      </el-menu-item> -->
       <el-menu-item index="2" @click="index = 2">
-        <i class="el-icon-picture"></i>
-        <span slot="title">图片</span>
-      </el-menu-item>
-      <el-menu-item index="3" @click="index = 3">
         <i class="el-icon-document"></i>
         <span slot="title">文本</span>
       </el-menu-item>
+      <el-menu-item index="3" @click="index = 3">
+        <i class="el-icon-picture"></i>
+        <span slot="title">图片</span>
+      </el-menu-item>
       <el-menu-item index="4" @click="index = 4">
         <i class="el-icon-setting"></i>
         <span slot="title">背景色</span>
       </el-menu-item>
+      <el-menu-item index="5" @click="saveAllTheme">
+        <i class="el-icon-upload"></i>
+        <span slot="title">导出</span>
+      </el-menu-item>
     </el-menu>
     <div class="left-pane">
       <ul class="poster-ct" v-if="index == 1">
@@ -85,13 +89,14 @@
       <template v-for="(item, i) in editorList">
         <posterEditor
           ref="child"
+          @resetData="setData"
           :order="i"
           :id="id"
           v-model="item.content"
           v-show="item.active"
           :key="i"
           :page="
-            i === 0 ? { width: 375, height: 620 } : { width: 620, height: 375 }
+            i === 0 ? { width: 620, height: 375 } : { width: 620, height: 375 }
           "
           @active="handleEditorClick(i, 'active')"
         ></posterEditor>
@@ -104,6 +109,14 @@
         @success="handleImageSelection"
       ></imageSelection>
     </blankDialog> -->
+    <div>
+      <vue-canvas-poster
+        v-show="true"
+        :painting="painting"
+        @success="success"
+        @fail="fail"
+      ></vue-canvas-poster>
+    </div>
   </div>
 </template>
 
@@ -114,17 +127,22 @@ import imageSelection from '@/components/imageSelection';
 import widgetView from '../widgetView';
 import { findComponentsDownward } from '@/utils/assist';
 import singleUpload from '@/components/Upload/singleUpload';
+import { VueCanvasPoster } from 'vue-canvas-poster';
 export default {
   components: {
     posterEditor,
     blankDialog,
     imageSelection,
     widgetView,
-    singleUpload
+    singleUpload,
+    VueCanvasPoster
   },
   data() {
     return {
-      index: 1,
+      id: null,
+      painting: {},
+      imgArr: '',
+      index: 2,
       textColor: '',
       imgSrc: '',
       bgImgSrc: '',
@@ -134,26 +152,13 @@ export default {
     };
   },
   methods: {
-    clickParent() {
+    success(e) {
-      this.$refs.child[0].addWidget('text');
+      this.imgArr = e;
     },
-    checkImg(e) {
+    fail(e) {
-      const a = {
+      console.log(e);
-        // active: false,
-        // name: +new Date(),
-        path: e
-        // uid: 'a04c' + +new Date()
-      };
-      this.$refs.child[0].beforeAddImgWidget(a);
     },
-    checkBgImg(e) {
+    setData() {
-      this.$refs.child[0].changeBackground(e);
-    },
-    checkTextCol(e) {
-      this.$refs.child[0].changeTextColor(e);
-    },
-    fn() {},
-    getEditorList() {
       this.editorList = [
         {
           name: '蜘蛛侠',
@@ -169,15 +174,15 @@ export default {
               {
                 label: '图片',
                 type: 'img',
-                content: require('@/assets/image/6.jpg'),
+                content: this.imgArr,
-                uuid: '32a73470-cfc1-4b1a-9daf-c1f59275c022',
+                uuid: '32a' + +new Date(),
                 active: false,
                 style: {
-                  top: 10,
+                  top: 129,
-                  left: 49,
+                  left: 86,
-                  height: 160,
+                  height: 120,
-                  width: 240,
+                  width: 120,
-                  align: { x: 2, y: 2 },
+                  align: { x: 0, y: 0 },
                   lineHeight: 14,
                   fontSize: 14,
                   background: 'rgba(0, 0, 0, 0)',
@@ -215,26 +220,176 @@ export default {
                     }
                   }
                 }
+              },
+              {
+                label: '文本',
+                type: 'text',
+                content: '提货须知',
+                uuid: '32b' + +new Date(),
+                active: false,
+                style: {
+                  top: 108,
+                  left: 269,
+                  height: 40,
+                  width: 120,
+                  align: { x: 0, y: 0 },
+                  lineHeight: 14,
+                  fontSize: 18,
+                  background: 'rgba(0, 0, 0, 0)',
+                  color: 'rgba(0, 0, 0, 1)',
+                  letterSpacing: 0,
+                  isOblique: false,
+                  isBold: true,
+                  zIndex: 1
+                },
+                setDataRange: {
+                  box: {
+                    show: true,
+                    detail: {
+                      top: true,
+                      left: true,
+                      height: true,
+                      width: true,
+                      background: false,
+                      zIndex: true
+                    }
+                  },
+                  content: {
+                    show: false
+                  },
+                  innerStyle: {
+                    show: false,
+                    detail: {
+                      align: true,
+                      lineHeight: true,
+                      fontSize: true,
+                      color: true,
+                      letterSpacing: true,
+                      isOblique: true,
+                      isBold: true
+                    }
+                  }
+                }
+              },
+              {
+                label: '文本',
+                type: 'text',
+                content: `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1. 微信或者手机浏览器扫码提货卡二维码，填写姓名、手机号、邮寄地址，点击“我要提货”<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. 一个手机号仅限验证一次，提交地址后即可失效<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3. 有问题请联系客服 0551-63442479`,
+                uuid: '32c' + +new Date(),
+                active: false,
+                style: {
+                  top: 142,
+                  left: 268,
+                  height: 155,
+                  width: 345,
+                  align: { x: 0, y: 0 },
+                  lineHeight: 30,
+                  fontSize: 16,
+                  background: 'rgba(0, 0, 0, 0)',
+                  color: 'rgba(0, 0, 0, 1)',
+                  letterSpacing: 0,
+                  isOblique: false,
+                  isBold: false,
+                  zIndex: 1
+                },
+                setDataRange: {
+                  box: {
+                    show: true,
+                    detail: {
+                      top: true,
+                      left: true,
+                      height: true,
+                      width: true,
+                      background: false,
+                      zIndex: true
+                    }
+                  },
+                  content: {
+                    show: false
+                  },
+                  innerStyle: {
+                    show: false,
+                    detail: {
+                      align: true,
+                      lineHeight: true,
+                      fontSize: true,
+                      color: true,
+                      letterSpacing: true,
+                      isOblique: true,
+                      isBold: false
+                    }
+                  }
+                }
               }
             ]
           }
-        },
-        {
-          name: '美国队长',
-          active: false,
-          content: {
-            background: {
-              color: '#fff',
-              img: ''
-            },
-            material_uid: 'a32c6558-1130-4e45-8d0d-efc6f887be50',
-            materialType: '__vue_devtool_undefined__',
-            widgetList: []
-          }
         }
       ];
       this.handleEditorClick(0);
     },
+    clickParent() {
+      this.$refs.child[0].addWidget('text');
+    },
+    checkImg(e) {
+      const a = {
+        // active: false,
+        // name: +new Date(),
+        path: e
+        // uid: 'a04c' + +new Date()
+      };
+      this.$refs.child[0].beforeAddImgWidget(a);
+    },
+    checkBgImg(e) {
+      this.$refs.child[0].changeBackground(e);
+    },
+    checkTextCol(e) {
+      this.$refs.child[0].changeTextColor(e);
+    },
+    fn() {},
+    getEditorList() {
+      const noticeItem = localStorage.getItem('notice');
+      if (noticeItem == 'null') {
+        this.editorList = [
+          {
+            name: '蜘蛛侠',
+            active: false,
+            content: {
+              background: {
+                color: '#fff',
+                img: ''
+              },
+              material_uid: '79b5ff3f-ab9a-4384-9904-aa96338202d2',
+              materialType: '__vue_devtool_undefined__',
+              widgetList: []
+            }
+          }
+          // {
+          //   name: '美国队长',
+          //   active: false,
+          //   content: {
+          //     background: {
+          //       color: '#fff',
+          //       img: ''
+          //     },
+          //     material_uid: 'a32c6558-1130-4e45-8d0d-efc6f887be50',
+          //     materialType: '__vue_devtool_undefined__',
+          //     widgetList: []
+          //   }
+          // }
+        ];
+      } else {
+        this.editorList = [
+          {
+            name: '蜘蛛侠',
+            active: false,
+            content: JSON.parse(noticeItem)
+          }
+        ];
+      }
+      this.handleEditorClick(0);
+    },
     handleEditorClick(i) {
       if (this.activeEditorIndex > -1) {
         let oldItem = this.editorList[this.activeEditorIndex];
@@ -291,7 +446,7 @@ export default {
         await current
           .fn((file, done) => {
             return new Promise(resolve => {
-              // console.log('截图成功', file)
+              // console.log('截图成功', file);
               done('file');
               resolve('file');
             });
@@ -343,10 +498,32 @@ export default {
         });
     }
   },
+  beforeCreate() {
+    localStorage.removeItem('itemImg');
+  },
   created() {
     this.getEditorList();
     const { id } = this.$route.query;
     this.id = id;
+    this.painting = {
+      width: '120px',
+      height: '120px',
+      background: '#eee',
+      views: [
+        {
+          type: 'qrcode',
+          content: 'http://golden.shangqie.cn/#/?id=' + id,
+          css: {
+            top: '0',
+            left: '0',
+            color: '#000',
+            width: '120px',
+            height: '120px'
+          }
+        }
+      ]
+    };
+    console.log(this.painting.views[0].content);
   }
 };
 </script>
@@ -366,7 +543,7 @@ export default {
     width: 276px;
     min-width: 276px;
     text-align: center;
-    background: rgb(232, 232, 232);
+    background: rgb(255, 255, 255);
     .header {
       margin: 10px 0 10px;
       color: #2c2c2c;

src/views/login.vue

@@ -2,7 +2,7 @@
   <div class="login">
     <div class="login-title">
       <!-- <img src="../assets/image/logo.png" alt="" /> -->
-      <!-- <span>九益车服务平台</span> -->
+      <!-- <span>金槐花服务平台</span> -->
     </div>
     <el-form
       ref="loginForm"
@@ -10,8 +10,12 @@
       :rules="loginRules"
       class="login-form"
     >
-      <h3 class="col">九益车服务平台</h3>
+      <!-- <h3 class="col">金槐花服务平台</h3>
-      <h1 class="title">登录</h1>
+      <h1 class="title">登录</h1> -->
+      <div style="font-size: 54px;font-weight: 500;color:#fff">hello</div>
+      <div style="margin: 29px 0;font-size: 26px;font-weight: 400;color:#fff">
+        欢迎来到金槐花管理系统
+      </div>
       <div class="login-info">
         <el-form-item prop="username">
           <el-input
@@ -64,7 +68,7 @@
     <!-- <div class="login-form-bg"></div> -->
     <!--  底部  -->
     <!-- <div class="el-login-footer">
-      <span>版权所有：九益车</span>
+      <span>版权所有：金槐花</span>
     </div> -->
   </div>
 </template>
@@ -149,14 +153,14 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
 $loginHeight: 570px;
-$loginForm: 383px;
+$loginForm: 470px;
 .login {
   // display: flex;
   // justify-content: center;
   // align-items: center;
-  height: 100%;
+  height: 100vh;
   min-height: $loginHeight;
-  background-image: url('../assets/image/login-bg.png');
+  background: url('../assets/image/login-bg.png') 50% fixed no-repeat;
   background-size: cover;
   position: relative;
 }
@@ -187,32 +191,37 @@ $loginForm: 383px;
   color: #209cff;
 }
 .login-form {
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+  background: url(../assets/image/login_form.png);
+  background-size: 100% 100%;
   border-radius: 10px;
-  background: #ffffff;
+  // background: #ffffff;
   width: 520px;
   min-height: $loginForm;
   padding: 20px;
   padding-top: 10px;
   position: absolute;
-  top: 50%;
+  top: 45%;
-  left: 50%;
+  left: 77%;
   transform: translate(-50%, -50%);
   z-index: 9;
   // bottom: 0;
   // margin: auto;
   .el-input {
-    height: 38px;
+    height: 48px;
     input {
-      height: 38px;
+      height: 48px;
     }
   }
   .input-icon {
-    height: 39px;
+    height: 48px;
     width: 14px;
     margin-left: 2px;
   }
   .login-info {
-    padding: 0 100px;
+    // padding: 0 100px;
   }
 }
 .login-form-bg {

vue.config.js

@@ -6,7 +6,7 @@ function resolve(dir) {
   return path.join(__dirname, dir);
 }
 
-const name = defaultSettings.title || '九益车服务平台'; // 标题
+const name = defaultSettings.title || '金槐花服务平台'; // 标题
 
 const port = process.env.port || process.env.npm_config_port || 8080; // 端口
 
@@ -34,7 +34,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.0.125:1777`,
+        // target: `http://192.168.0.125:1777`,
+        target: `http://golden.shangqie.cn/api`,
         // target: `http://140.143.229.114:1818`,
         changeOrigin: true,
         pathRewrite: {