Browse Source

右侧属性栏样式更改 -- 线条,文字,图片,图形

yunxing 4 năm trước cách đây
mục cha
commit
6cf5e3426a

+ 1 - 3
package.json

@@ -21,8 +21,6 @@
     "@persagy-web/big": "2.2.33",
     "@persagy-web/draw": "2.2.8",
     "@persagy-web/graph": "2.2.34",
-    "@persagy-web/big-edit": "2.2.5",
-    "@persagy-web/edit": "2.2.4",
     "@types/uuid": "^8.0.0",
     "ant-design-vue": "^1.6.5",
     "axios": "^0.20.0",
@@ -31,7 +29,7 @@
     "crypto-js": "^4.0.0",
     "element-ui": "^2.13.2",
     "lodash": "^4.17.20",
-    "meri-design": "^1.4.3",
+    "meri-design": "1.4.3",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^8.4.2",

+ 4 - 0
src/components/editview/leftToolBar.vue

@@ -178,6 +178,10 @@ li {
             top: 50% !important;
             // left: 15px !important;
         }
+        // 隐藏拖动条
+        /deep/ .p-sidebar-custom-bar {
+            width: 0 !important;
+        }
     }
 }
 .el-drawer__wrapper {

+ 196 - 220
src/components/editview/rightPropertyBar/BaseGraphy.vue

@@ -1,244 +1,220 @@
 <!-- 基本图形的属性框 -->
 <template>
-  <div class="base-graphy">
-    <div class="title">属性</div>
-    <ul>
-      <li>
-        <div class="small-title">尺寸大小</div>
-        <div class="property">
-          <div>
-            <span>W</span>
-            <el-input
-              style="width:74px;margin-left:6px"
-              size="mini"
-              v-model="width"
-              placeholder="请输入内容"
-            ></el-input>
-          </div>
-          <div>
-            <span>H</span>
-            <el-input
-              style="width:74px;margin-left:6px"
-              size="mini"
-              v-model="height"
-              placeholder="请输入内容"
-            ></el-input>
-          </div>
-          <i class="el-icon-link"></i>
-        </div>
-      </li>
-      <li>
-        <div class="small-title">边框</div>
-        <div class="property">
-          <div class="color-box">
-            <div class="cololorSelect">
-              <el-color-picker @change="changeColor" show-alpha class="fix-box-1" v-model="color"></el-color-picker>
-            </div>
-            <span>颜色</span>
-          </div>
-          <div class="line-width">
-            <el-input-number
-              style="width:80px"
-              v-model="linewidth"
-              controls-position="right"
-              @change="changeLinewidth"
-              size="mini"
-              :min="1"
-              :max="20"
-              :maxlength="100"
-            ></el-input-number>
-            <span>线宽</span>
-          </div>
-          <div class="line-width">
-            <a-select
-              style="width: 80px"
-              v-model="linestyle"
-              :default-value="borderLineOption[0].id"
-              @change="changeLineStyle"
-            >
-              <a-select-option
-                v-for="item in borderLineOption"
-                :key="item.id"
-                :label="item.src"
-                :value="item.id"
-              >
-                <img :src="item.src" alt width="60" />
-              </a-select-option>
-            </a-select>
-            <span>线形</span>
-          </div>
-        </div>
-      </li>
-      <li>
-        <div class="small-title">填充</div>
-        <div class="property property-push">
-          <div class="color-box">
-            <div class="cololorSelect">
-              <el-color-picker
-                show-alpha
-                @change="changeFillcolor"
-                class="fix-box-1"
-                v-model="fillColor"
-              ></el-color-picker>
-            </div>
-            <span>颜色</span>
-          </div>
-        </div>
-      </li>
-    </ul>
-  </div>
+    <div class="base-graphy">
+        <div class="title">属性</div>
+        <ul>
+            <li>
+                <div class="small-title">尺寸大小</div>
+                <div class="property">
+                    <div>
+                        <span>W</span>
+                        <el-input style="width: 74px; margin-left: 6px" size="mini" v-model="width" placeholder="请输入内容"></el-input>
+                    </div>
+                    <div>
+                        <span>H</span>
+                        <el-input style="width: 74px; margin-left: 6px" size="mini" v-model="height" placeholder="请输入内容"></el-input>
+                    </div>
+                    <i class="el-icon-link"></i>
+                </div>
+            </li>
+            <li class="graphy-fill">
+                <div class="small-title">填充</div>
+                <div class="property property-push">
+                    <div class="color-box">
+                        <div class="cololorSelect">
+                            <el-color-picker show-alpha @change="changeFillcolor" class="fix-box-1" v-model="fillColor"></el-color-picker>
+                        </div>
+                        <span>颜色</span>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="small-title">边框</div>
+                <div class="property">
+                    <div class="color-box">
+                        <div class="cololorSelect">
+                            <el-color-picker @change="changeColor" show-alpha class="fix-box-1" v-model="color"></el-color-picker>
+                        </div>
+                        <span>颜色</span>
+                    </div>
+                    <div class="line-width">
+                        <el-input-number
+                            style="width: 80px"
+                            v-model="linewidth"
+                            controls-position="right"
+                            @change="changeLinewidth"
+                            size="mini"
+                            :min="1"
+                            :max="20"
+                            :maxlength="100"
+                        ></el-input-number>
+                        <span>线宽</span>
+                    </div>
+                    <div class="line-width">
+                        <a-select style="width: 80px" v-model="linestyle" :default-value="borderLineOption[0].id" @change="changeLineStyle">
+                            <a-select-option v-for="item in borderLineOption" :key="item.id" :label="item.src" :value="item.id">
+                                <img :src="item.src" alt width="60" />
+                            </a-select-option>
+                        </a-select>
+                        <span>线形</span>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
 </template>
 <script>
 import bus from "@/bus/bus";
 export default {
-  props: [
-    "strokeColor",
-    "lineStyle",
-    "lineWidth",
-    "Width",
-    "Height",
-    "fillColor",
-  ],
-  data() {
-    return {
-      width: 0,
-      height: 0,
-      color: "#cccccc", //颜色
-      linewidth: 1,
-      borderLineOption: [
-        {
-          id: "Solid",
-          src: require("@/assets/images/solidLine.png"),
+    props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height", "fillColor"],
+    data() {
+        return {
+            width: 0,
+            height: 0,
+            color: "#cccccc", //颜色
+            linewidth: 1,
+            borderLineOption: [
+                {
+                    id: "Solid",
+                    src: require("@/assets/images/solidLine.png"),
+                },
+                {
+                    id: "Dashed",
+                    src: require("@/assets/images/dashedLine.png"),
+                },
+                {
+                    id: "Dotted",
+                    src: require("@/assets/images/dotLine.png"),
+                },
+            ],
+            linestyle: "Solid",
+        };
+    },
+    mounted() {},
+    methods: {
+        changeHeight(val) {
+            bus.$emit("updateStyle", "height", val);
         },
-        {
-          id: "Dashed",
-          src: require("@/assets/images/dashedLine.png"),
+        changeWidth(val) {
+            bus.$emit("updateStyle", "width", val);
         },
-        {
-          id: "Dotted",
-          src: require("@/assets/images/dotLine.png"),
+        changeLinewidth(val) {
+            bus.$emit("updateStyle", "lineWidth", val);
+        },
+        changeFillcolor(val) {
+            bus.$emit("updateStyle", "fillColor", val);
+        },
+        changeColor(val) {
+            bus.$emit("updateStyle", "strokeColor", val);
+        },
+        // 改变线样式
+        changeLineStyle(val) {
+            bus.$emit("updateStyle", "lineStyle", val);
         },
-      ],
-      linestyle: "Solid",
-    };
-  },
-  methods: {
-    changeHeight(val) {
-      bus.$emit("updateStyle", "height", val);
-    },
-    changeWidth(val) {
-      bus.$emit("updateStyle", "width", val);
-    },
-    changeLinewidth(val) {
-      bus.$emit("updateStyle", "lineWidth", val);
-    },
-    changeFillcolor(val) {
-      bus.$emit("updateStyle", "fillColor", val);
-    },
-    changeColor(val) {
-      bus.$emit("updateStyle", "strokeColor", val);
-    },
-    // 改变线样式
-    changeLineStyle(val) {
-      bus.$emit("updateStyle", "lineStyle", val);
-    },
-  },
-  watch: {
-    strokeColor(val) {
-      this.color = val;
-    },
-    lineWidth(val) {
-      this.linewidth = val;
-    },
-    lineStyle(val) {
-      this.linestyle = val;
-    },
-    Width(val) {
-      this.width = val;
     },
-    Height(val) {
-      this.height = val;
+    watch: {
+        strokeColor(val) {
+            this.color = val;
+        },
+        lineWidth(val) {
+            this.linewidth = val;
+        },
+        lineStyle(val) {
+            this.linestyle = val;
+        },
+        Width(val) {
+            this.width = val;
+        },
+        Height(val) {
+            this.height = val;
+        },
+        fillColor(val) {
+            this.fillcolor = val;
+        },
     },
-    fillColor(val) {
-      this.fillcolor = val;
+    mounted() {
+        // console.log(Select)
     },
-  },
-  mounted() {
-    // console.log(Select)
-  },
 };
 </script>
 <style lang="less" scoped>
 ul,
 li {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
 }
 .base-graphy {
-  .title {
-    height: 47px;
-    border-bottom: 1px solid #979797;
-    color: #646c73;
-    font-size: 16px;
-    padding-left: 12px;
-    box-sizing: border-box;
-  }
-  ul {
-    width: calc(~"100% - 24px");
-    margin: -1px 12px 0 12px;
-    li {
-      border-top: 1px solid #979797;
-      margin-bottom: 16px;
-      .small-title {
-        font-size: 12px;
-        color: #8d9399;
-        margin: 12px 0;
-      }
-      .property {
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        .color-box {
-          display: flex;
-          align-items: center;
-          flex-direction: column;
-          .cololorSelect {
-            width: 32px;
-            height: 20px;
-            overflow: hidden;
-            position: relative;
-            margin: 4px 0;
-            .fix-box-1 {
-              margin-top: -8px;
-              margin-left: -8px;
-              /deep/ .el-color-picker__trigger {
-                width: 200px;
-                height: 200px;
-              }
+    & > .title {
+        height: 40px;
+        line-height: 40px;
+        color: #000000;
+        background: #f8f9fa;
+        font-size: 14px;
+        padding-left: 12px;
+        box-sizing: border-box;
+        font-weight: 600;
+    }
+    ul {
+        width: 100%;
+        li {
+            padding: 0 12px;
+            margin-bottom: 16px;
+            .small-title {
+                font-size: 12px;
+                color: #8d9399;
+                margin: 12px 0;
+                font-weight: 600;
+            }
+            .property {
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+                .color-box {
+                    display: flex;
+                    align-items: center;
+                    flex-direction: column;
+                    .cololorSelect {
+                        width: 32px;
+                        height: 20px;
+                        overflow: hidden;
+                        position: relative;
+                        margin: 4px 0;
+                        .fix-box-1 {
+                            margin-top: -8px;
+                            margin-left: -8px;
+                            /deep/ .el-color-picker__trigger {
+                                width: 200px;
+                                height: 200px;
+                            }
+                        }
+                    }
+                }
+                .line-width {
+                    display: flex;
+                    align-items: center;
+                    flex-direction: column;
+                    margin-left: 8px;
+                    position: relative;
+                }
+                span {
+                    font-size: 12px;
+                    color: #1f2429;
+                    margin-top: 4px;
+                }
+            }
+            .property-push {
+                justify-content: start;
+                .color-box {
+                    margin-left: 8px;
+                }
             }
-          }
-        }
-        .line-width {
-          display: flex;
-          align-items: center;
-          flex-direction: column;
-          margin-left: 8px;
-          position: relative;
-        }
-        span {
-          font-size: 12px;
-          color: #1f2429;
-          margin-top: 4px;
-        }
-      }
-      .property-push {
-        justify-content: start;
-        .color-box {
-          margin-left: 8px;
         }
-      }
     }
-  }
+    .graphy-fill {
+        padding: 4px 12px 12px 12px;
+        border-top: 1px solid #e4e5e7;
+        border-bottom: 1px solid #e4e5e7;
+    }
 }
 </style>

+ 1 - 1
src/components/editview/rightPropertyBar/BaseImagePro.vue

@@ -318,7 +318,7 @@ li {
             padding: 0 12px;
             margin-bottom: 16px;
             .small-title {
-                font-size: 14px;
+                font-size: 12px;
                 color: #8d9399;
                 margin: 12px 0;
                 font-weight: 600;

+ 13 - 14
src/components/editview/rightPropertyBar/baseLinePro.vue

@@ -137,7 +137,6 @@ export default {
     mounted() {
         // console.log(Select)
         // console.log(this.TextItem);
-        // window._vm = this
     },
     watch: {
         strokeColor(val) {
@@ -167,24 +166,26 @@ li {
     list-style-type: none;
 }
 .base-line {
-    .title {
-        height: 47px;
-        // border-bottom: 1px solid #979797;
-        color: #646c73;
-        font-size: 16px;
+    & > .title {
+        height: 40px;
+        line-height: 40px;
+        color: #000000;
+        background: #f8f9fa;
+        font-size: 14px;
         padding-left: 12px;
         box-sizing: border-box;
+        font-weight: 600;
     }
     ul {
-        width: calc(~"100% - 24px");
-        margin: -1px 12px 0 12px;
+        width: 100%;
         li {
-            // border-top: 1px solid #979797;
-            margin-bottom: 12px;
+            padding: 0 12px;
+            margin-bottom: 16px;
             .small-title {
                 font-size: 12px;
                 color: #8d9399;
                 margin: 12px 0;
+                font-weight: 600;
             }
             .property {
                 display: flex;
@@ -230,15 +231,13 @@ li {
                         text-align: center;
                     }
                 }
-                span {
+                .text {
                     font-size: 12px;
                     color: #1f2429;
+                    font-weight: 600;
                     margin-top: 4px;
                 }
             }
-            .text {
-                font-weight: 600;
-            }
         }
     }
 }

+ 28 - 15
src/components/editview/rightPropertyBar/baseTextPro.vue

@@ -4,13 +4,13 @@
         <div class="title">属性</div>
         <ul>
             <li>
-                <div class="small-title"></div>
+                <div class="small-title">字符</div>
                 <div class="property">
                     <div class="color-box">
                         <div class="cololorSelect">
                             <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="textColor"></el-color-picker>
                         </div>
-                        <span>颜色</span>
+                        <span class="text">颜色</span>
                     </div>
                     <div class="line-width">
                         <el-input-number
@@ -23,19 +23,19 @@
                             :max="20"
                             :maxlength="100"
                         ></el-input-number>
-                        <span>字号</span>
+                        <span class="text">字号</span>
                     </div>
                     <div class="color-box">
                         <div class="cololorSelect">
                             <el-color-picker @change="changeBackground" show-alpha class="fix-box-1" v-model="bgColor"></el-color-picker>
                         </div>
-                        <span>背景颜色</span>
+                        <span class="text">背景颜色</span>
                     </div>
                 </div>
             </li>
             <li>
                 <el-input type="textarea" @input="changeText" :autosize="{ minRows: 2, maxRows: 4 }" v-model="text"></el-input>
-                <span>文本</span>
+                <span class="textarea-text">文本</span>
             </li>
         </ul>
     </div>
@@ -119,23 +119,26 @@ li {
     list-style-type: none;
 }
 .base-text {
-    .title {
-        height: 47px;
-        border-bottom: 1px solid #979797;
-        color: #646c73;
-        font-size: 16px;
+    & > .title {
+        height: 40px;
+        line-height: 40px;
+        color: #000000;
+        background: #f8f9fa;
+        font-size: 14px;
         padding-left: 12px;
         box-sizing: border-box;
+        font-weight: 600;
     }
     ul {
-        width: calc(~"100% - 24px");
-        margin: -1px 12px 0 12px;
+        width: 100%;
         li {
-            border-top: 1px solid #979797;
+            padding: 0 12px;
+            margin-bottom: 16px;
             .small-title {
                 font-size: 12px;
                 color: #8d9399;
                 margin: 12px 0;
+                font-weight: 600;
             }
             .property {
                 display: flex;
@@ -168,16 +171,26 @@ li {
                     margin-left: 8px;
                     position: relative;
                 }
-                span {
+                .text {
                     font-size: 12px;
                     color: #1f2429;
+                    font-weight: 600;
                     margin-top: 4px;
                 }
             }
+            // 文本
+            .textarea-text {
+                font-size: 12px;
+                color: #1f2429;
+                font-weight: 600;
+                padding-left: 15px;
+                position: relative;
+                top: 5px;
+            }
         }
     }
 }
 /deep/.el-input__inner {
-    padding-right: 40px !important;
+    padding-right: 30px !important;
 }
 </style>

+ 0 - 1
src/views/editer.vue

@@ -35,7 +35,6 @@ export default {
         ...mapState(["name", "folderName", "floorLocalName", "version"]),
     },
     created() {
-        // window.vm = this;
         this.init();
     },
     methods: {