GCLS_Page_TC/src/views/CalligraphyMaster/cread.vue

<template>
  <div class="CalligraphyMaster-cread">
    <Header />
    <div class="bg_main">
      <div class="main">
        <div class="main-top">
          <div class="left">
            <span>画布设置：</span>
            <div>
              <span>长度</span>
              <el-input
                :readonly="true"
                v-model="form.heightText"
                style="width: 60px"
              ></el-input>
              <div class="add_remove">
                <img
                  @click="addCanvasWH('H')"
                  src="../../assets/teacherdev/sfds-canvas-add.png"
                  alt=""
                />
                <img
                  @click="removeCanvasWH('H')"
                  src="../../assets/teacherdev/sfds-canvas-remove.png"
                  alt=""
                />
              </div>
            </div>
            <div>
              <img src="../../assets/teacherdev/sfds-canvas-line.png" alt="" />
              <span>宽度</span>
              <el-input
                :readonly="true"
                v-model="form.widthText"
                style="width: 60px"
              ></el-input>
              <div class="add_remove">
                <img
                  @click="addCanvasWH('W')"
                  src="../../assets/teacherdev/sfds-canvas-add.png"
                  alt=""
                />
                <img
                  @click="removeCanvasWH('W')"
                  src="../../assets/teacherdev/sfds-canvas-remove.png"
                  alt=""
                />
              </div>
            </div>
            <div>
              <span>背景颜色</span>
              <el-color-picker v-model="form.bg_color"></el-color-picker>
            </div>
          </div>
          <div class="right">
            <div>
              <img src="../../assets/teacherdev/word-save.png" alt="" />
              保存
            </div>
            <div>
              <img src="../../assets/teacherdev/sfds-fb.png" alt="" />
              发布
            </div>
            <div>
              <img src="../../assets/teacherdev/word-download.png" alt="" />
              下载
            </div>
          </div>
        </div>
        <div
          class="operation"
          v-if="changeType == 'text' || changeType == 'luminance'"
        >
          <template v-if="changeType == 'text'">
            <div class="text-operation">
              <div class="font_sele">
                <div
                  class="font_sele_input"
                  @click="FontFamilySele = !FontFamilySele"
                >
                  <span>{{ fontForm.fontFamily }}</span>
                  <img
                    src="../../assets/teacherdev/font-sele-down.png"
                    alt=""
                  />
                </div>
                <div v-show="FontFamilySele" class="fontFamily_list">
                  <div class="Boutque_font">
                    <span class="one">精品字体</span>
                    <span
                      v-for="(item, index) in BoutiqueFontList"
                      :key="index + 'BoutiqueFon'"
                      >{{ item }}</span
                    >
                    <span class="more">更多...</span>
                  </div>
                  <div
                    class="fontFamily_one"
                    v-for="(item, index) in fontList"
                    :key="index + 'font'"
                    :value="item.fontFamily"
                  >
                    <div class="use" v-if="item.RecentUse">
                      <span>最近使用</span>
                    </div>
                    <div class="fontFamily">{{ item.fontFamily }}</div>
                    <div class="content">
                      <span>{{ item.content }}</span>
                      <img
                        v-if="item.collect"
                        src="../../assets/teacherdev/font-collect-sele.png"
                        alt=""
                      />
                      <img
                        v-else
                        src="../../assets/teacherdev/font-collect.png"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>
              <el-select
                v-model="fontForm.fontSize"
                style="width: 60px; margin-left: 8px"
              >
                <el-option
                  v-for="(item, i) in fontSizeList"
                  :key="i + 'fontsize'"
                  :value="item.value"
                  :label="item.name"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="fontForm.percent"
                style="width: 68px; height: 32px; margin-left: 8px"
              >
                <el-option
                  v-for="i in 100"
                  :key="i + 'fontsize'"
                  :value="i"
                  :label="i + '%'"
                >
                </el-option>
              </el-select>
              <div class="img_dv">
                <img src="../../assets/teacherdev/font-add.png" alt="" />
                <img src="../../assets/teacherdev/font-remove.png" alt="" />
                <img src="../../assets/teacherdev/font-blod.png" alt="" />
                <img src="../../assets/teacherdev/font-red.png" alt="" />
              </div>
              <el-color-picker
                v-model="fontForm.fontColor"
                style="margin-left: 8px; width: 60px"
              ></el-color-picker>
              <div class="img_dv" style="margin-left: 8px">
                <img src="../../assets/teacherdev/font-left.png" alt="" />
                <img src="../../assets/teacherdev/font-center.png" alt="" />
                <img src="../../assets/teacherdev/font-right.png" alt="" />
              </div>
              <div class="img_dv" style="margin-left: 8px">
                <img
                  src="../../assets/teacherdev/font-line-left-right.png"
                  alt=""
                />
                <img
                  src="../../assets/teacherdev/font-line-top-bottom.png"
                  alt=""
                />
              </div>
              <div class="img_dv" style="margin-left: 8px">
                <img src="../../assets/teacherdev/font-italic.png" alt="" />
                <img src="../../assets/teacherdev/font-blod2.png" alt="" />
              </div>
            </div>
          </template>
          <template v-else-if="changeType == 'luminance'">
            <div class="luminance-operation">
              <img
                :style="{ filter: `brightness(${changeluminanceNumber()})` }"
                src="../../assets/teacherdev/sun.png"
                alt=""
              />
              <div class="line-text">
                <div class="DragLine">
                  <DragLine :min="-100" :max="100" v-model="luminanceNumber" />
                </div>
                <div class="text">
                  <span>-100</span>
                  <span>0</span>
                  <span>+100</span>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div
          class="canvas"
          :style="{
            marginTop:
              changeType == 'text' || changeType == 'luminance' ? 0 : '32px',
          }"
        >
          <div
            id="imgCanvas"
            ref="imgCanvas"
            :style="{
              width: form.width + 'px',
              height: form.height + 'px',
              background: form.bg_color,
            }"
          ></div>
        </div>
        <div class="bottom">
          <div @click="changeSize">
            <img src="../../assets/teacherdev/sfds-tailoring.png" alt="" />
          </div>
          <el-upload
            :accept="'.png,.jpg'"
            class="upload-demo"
            :show-file-list="false"
            :action="url"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :multiple="true"
            :on-exceed="handleExceed"
            :on-success="handleSuccess"
            :file-list="fileList"
            :before-remove="beforeRemove"
            :limit="1"
            :before-upload="handlebeforeUplaod"
          >
            <div>
              <img src="../../assets/teacherdev/sfds-image.png" alt="" />
            </div>
          </el-upload>

          <div @click="addText">
            <img src="../../assets/teacherdev/sfds-text.png" alt="" />
          </div>
          <div @click="deleteImage">
            <img src="../../assets/teacherdev/sfds-delete.png" alt="" />
          </div>
          <div @click="changeluminance">
            <img src="../../assets/teacherdev/sfds-sun.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "@/components/Header";
import DragLine from "@/components/DragLine";
import { getToken, removeToken } from "@/utils/auth";
import { WebFileDownload } from "@/api/api";

import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
import ImageEditor from "tui-image-editor";

const locale_zh = {
  ZoomIn: "放大",
  ZoomOut: "缩小",
  Hand: "手掌",
  History: "历史",
  Resize: "调整宽高",
  Crop: "裁剪",
  DeleteAll: "全部删除",
  Delete: "删除",
  Undo: "撤销",
  Redo: "反撤销",
  Reset: "重置",
  Flip: "镜像",
  Rotate: "旋转",
  Draw: "画",
  Shape: "形状标注",
  Icon: "图标标注",
  Text: "文字标注",
  Mask: "遮罩",
  Filter: "滤镜",
  Bold: "加粗",
  Italic: "斜体",
  Underline: "下划线",
  Left: "左对齐",
  Center: "居中",
  Right: "右对齐",
  Color: "颜色",
  "Text size": "字体大小",
  Custom: "自定义",
  Square: "正方形",
  Apply: "应用",
  Cancel: "取消",
  "Flip X": "X 轴",
  "Flip Y": "Y 轴",
  Range: "区间",
  Stroke: "描边",
  Fill: "填充",
  Circle: "圆",
  Triangle: "三角",
  Rectangle: "矩形",
  Free: "曲线",
  Straight: "直线",
  Arrow: "箭头",
  "Arrow-2": "箭头2",
  "Arrow-3": "箭头3",
  "Star-1": "星星1",
  "Star-2": "星星2",
  Polygon: "多边形",
  Location: "定位",
  Heart: "心形",
  Bubble: "气泡",
  "Custom icon": "自定义图标",
  "Load Mask Image": "加载蒙层图片",
  Grayscale: "灰度",
  Blur: "模糊",
  Sharpen: "锐化",
  Emboss: "浮雕",
  "Remove White": "除去白色",
  Distance: "距离",
  Brightness: "亮度",
  Noise: "噪音",
  "Color Filter": "彩色滤镜",
  Sepia: "棕色",
  Sepia2: "棕色2",
  Invert: "负片",
  Pixelate: "像素化",
  Threshold: "阈值",
  Tint: "色调",
  Multiply: "正片叠底",
  Blend: "混合色",
  Width: "宽度",
  Height: "高度",
  "Lock Aspect Ratio": "锁定宽高比例",
};

const customTheme = {
  "common.bi.image": "", // 左上角logo图片
  "common.bisize.width": "0px",
  "common.bisize.height": "0px",
  "common.backgroundImage": "none",
  "common.backgroundColor": "#f3f4f6",
  "common.border": "1px solid #333",

  // header
  "header.backgroundImage": "none",
  "header.backgroundColor": "#f3f4f6",
  "header.border": "0px",

  // load button
  "loadButton.backgroundColor": "#fff",
  "loadButton.border": "1px solid #ddd",
  "loadButton.color": "#222",
  "loadButton.fontFamily": "NotoSans, sans-serif",
  "loadButton.fontSize": "12px",
  "loadButton.display": "none", // 隐藏

  // download button
  "downloadButton.backgroundColor": "#fdba3b",
  "downloadButton.border": "1px solid #fdba3b",
  "downloadButton.color": "#fff",
  "downloadButton.fontFamily": "NotoSans, sans-serif",
  "downloadButton.fontSize": "12px",
  "downloadButton.display": "none", // 隐藏

  // icons default
  "menu.normalIcon.color": "#8a8a8a",
  "menu.activeIcon.color": "#555555",
  "menu.disabledIcon.color": "#ccc",
  "menu.hoverIcon.color": "#e9e9e9",
  "submenu.normalIcon.color": "#8a8a8a",
  "submenu.activeIcon.color": "#e9e9e9",

  "menu.iconSize.width": "24px",
  "menu.iconSize.height": "24px",
  "submenu.iconSize.width": "32px",
  "submenu.iconSize.height": "32px",

  // submenu primary color
  "submenu.backgroundColor": "#1e1e1e",
  "submenu.partition.color": "#858585",

  // submenu labels
  "submenu.normalLabel.color": "#858585",
  "submenu.normalLabel.fontWeight": "lighter",
  "submenu.activeLabel.color": "#fff",
  "submenu.activeLabel.fontWeight": "lighter",

  // checkbox style
  "checkbox.border": "1px solid #ccc",
  "checkbox.backgroundColor": "#fff",

  // rango style
  "range.pointer.color": "#fff",
  "range.bar.color": "#666",
  "range.subbar.color": "#d1d1d1",

  "range.disabledPointer.color": "#414141",
  "range.disabledBar.color": "#282828",
  "range.disabledSubbar.color": "#414141",

  "range.value.color": "#fff",
  "range.value.fontWeight": "lighter",
  "range.value.fontSize": "11px",
  "range.value.border": "1px solid #353535",
  "range.value.backgroundColor": "#151515",
  "range.title.color": "#fff",
  "range.title.fontWeight": "lighter",

  // colorpicker style
  "colorpicker.button.border": "1px solid #1e1e1e",
  "colorpicker.title.color": "#fff",
};

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
    DragLine,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      form: {
        width: 500,
        widthText: "500mm",
        height: 500,
        heightText: "500mm",
        bg_color: "#FF3F3F",
      },
      BoutiqueFontList: [
        "水墨字体",
        "古风字体",
        "中国风字体",
        "书协专家字体",
        "电影海报字体",
        "国潮字体",
      ],
      fontSizeList: [
        {
          name: "5号",
          value: 5,
        },
      ],
      fontList: [
        {
          fontFamily: "方正颜真卿楷书",
          content: "忽如一夜春风来",
          collect: true,
          RecentUse: true,
        },
        {
          fontFamily: "方正颜真卿楷书",
          content: "忽如一夜春风来",
          collect: false,
          RecentUse: false,
        },
        {
          fontFamily: "方正颜真卿楷书",
          content: "忽如一夜春风来",
          collect: true,
          RecentUse: true,
        },
        {
          fontFamily: "方正颜真卿楷书",
          content: "忽如一夜春风来",
          collect: false,
          RecentUse: false,
        },
        {
          fontFamily: "方正颜真卿楷书",
          content: "忽如一夜春风来",
          collect: true,
          RecentUse: true,
        },
        {
          fontFamily: "方正颜真卿楷书",
          content: "忽如一夜春风来",
          collect: false,
          RecentUse: false,
        },
        {
          fontFamily: "方正颜真卿楷书",
          content: "忽如一夜春风来",
          collect: true,
          RecentUse: true,
        },
        {
          fontFamily: "方正颜真卿楷书",
          content: "忽如一夜春风来",
          collect: false,
          RecentUse: false,
        },
        {
          fontFamily: "方正颜真卿楷书",
          content: "忽如一夜春风来",
          collect: true,
          RecentUse: true,
        },
        {
          fontFamily: "方正颜真卿楷书",
          content: "忽如一夜春风来",
          collect: false,
          RecentUse: false,
        },
      ],
      luminanceNumber: 0,
      changeType: "",
      fontForm: {
        fontFamily: "方正颜真卿楷书",
        fontSize: 5,
        percent: 100,
        fontColor: "#FFFFFF",
      },
      FontFamilySele: false,
      loading: false,
      fileList: [],
      imgCtx: null,
      TUI_selectedItem: null,
      TUI_selectedFont: "",
      instance: null,
    };
  },
  //计算属性 类似于data概念
  computed: {
    url() {
      let userInfor = JSON.parse(getToken());
      let UserCode = "",
        UserType = "",
        SessionID = "";
      if (userInfor) {
        UserCode = userInfor.user_code;
        UserType = userInfor.user_type;
        SessionID = userInfor.session_id;
      }
      return (
        process.env.VUE_APP_BASE_API +
        `/GCLSFileServer/WebFileUpload?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}&SecurityLevel=Mid"`
      );
    },
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 增加画布宽或高
    addCanvasWH(type) {
      if (type == "W") {
        if (this.form.width == 500) {
          this.$message.warning("已达到上限");
          return;
        }
        this.form.width++;
        this.form.widthText = this.form.width + "mm";
      } else {
        if (this.form.height == 500) {
          this.$message.warning("已达到上限");
          return;
        }
        this.form.height++;
        this.form.heightText = this.form.height + "mm";
      }
    },
    // 减少画布宽或高
    removeCanvasWH(type) {
      if (type == "W") {
        if (this.form.width == 0) {
          return;
        }
        this.form.width--;
        this.form.widthText = this.form.width + "mm";
      } else {
        if (this.form.height == 0) {
          return;
        }
        this.form.height--;
        this.form.heightText = this.form.height + "mm";
      }
    },
    // 添加文字
    addText() {
      this.changeType = "text";
    },
    // 修改亮度
    changeluminance() {
      this.changeType = "luminance";
    },
    // 计算css所需亮度
    changeluminanceNumber() {
      if (this.luminanceNumber == 0) {
        return 1;
      }
      if (this.luminanceNumber > 0) {
        return 1 + (this.luminanceNumber / 100) * 2;
      } else {
        return Math.abs(Math.abs(this.luminanceNumber) - 100) / 100;
      }
    },
    // 裁剪
    changeSize() {
      if (!this.instance) {
        this.$message.warning("请先上传图片");
        return;
      }
      this.instance.ui._actions.crop.cancel();
    },
    initCanvasImage() {
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 直接使用跨域  请求文件流转url 再使用
      WebFileDownload({
        FileID: this.fileList[0].file_id,
      }).then((res) => {
        const objectUrl = window.URL.createObjectURL(res);
        this.instance = new ImageEditor(document.querySelector("#imgCanvas"), {
          includeUI: {
            loadImage: {
              path: objectUrl,
              name: "image",
            },
            menu: [
              "resize",
              "crop",
              "rotate",
              "draw",
              "shape",
              "icon",
              "text",
              "filter",
            ], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
            initMenu: "draw", // 默认打开的菜单项
            menuBarPosition: "bottom", // 菜单所在的位置
            locale: locale_zh, // 本地化语言为中文
            theme: customTheme, // 自定义样式
          },
          cssMaxWidth: this.form.width, // canvas 最大宽度
          cssMaxHeight: this.form.heigt, // canvas 最大高度
        });
        let fontArray = [
          "Arial",
          "Arial Black",
          "Caveat",
          "Comic Sans MS",
          "Courier New",
          "Georgia1",
          "Impact",
          "Lobster Two",
          "Lucida Console",
          "Luckiest Guy",
          "Open Sans",
          "Pacifico",
          "Palatino Linotype",
          "Press Start 2P",
          "Roboto",
          "Tahoma",
          "Tangerine",
          "Times New Roman",
          "Tourney",
          "Ultra",
          "Verdana",
          "Symbol",
          "Webdings",
          "Wingdings",
        ];

        let fontSelectHTML =
          '<select #fontselect class="form-select font-selector">';
        for (let i = 0; i < fontArray.length; i++) {
          let selected = "";
          if (i == 0) {
            selected = "selected";
          }
          fontSelectHTML +=
            '<option style="font-family:' +
            fontArray[i] +
            ' !important;" value="' +
            fontArray[i] +
            '" ' +
            selected +
            ">" +
            fontArray[i] +
            "</option>";
        }
        fontSelectHTML += "</select>";

        let textMenuAlign = document.querySelector(
          ".tui-image-editor-menu-text .tie-text-align-button"
        );
        textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);

        document
          .querySelector(".font-selector")
          .addEventListener("change", () =>
            this.TUI_updateFontOnText($(".font-selector option:selected").val())
          );
        this.instance.on("objectActivated", (props) => {
          this.TUI_selectedItem = props;
          this.TUI_updateFontSelected(props);
          console.log("TUI_selectedItem", props);
        });

        this.loading.close();
      });
    },
    TUI_updateFontOnText(font) {
      console.log("TUI_updateFontOnText", font, this.TUI_selectedItem.id);

      if (font) {
        this.TUI_selectedFont = font;
      }

      if (font && this.TUI_selectedItem) {
        this.instance.changeTextStyle(this.TUI_selectedItem.id, {
          fontFamily: font,
        });
      }
    },
    TUI_updateFontSelected(layer) {
      console.log("TUI_updateFontSelected", layer);

      if (layer.fontFamily) {
        document.querySelector(".font-selector").value = layer.fontFamily;
        this.TUI_selectedFont = layer.fontFamily;
      }
    },
    // 删除上传的图片
    deleteImage() {
      this.fileList = [];
    },
    handlebeforeUplaod(file) {
      if (file.size > 20 * 1024 * 1024) {
        this.$message.warning("上传文件大小不能超过20M");
        return false; //必须返回false
      }
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleSuccess(response, file, fileList) {
      if (response.status == 1) {
        this.fileList = response.file_info_list;
        this.loading.close();
        this.initCanvasImage();
      } else if (response.status == -1) {
        this.loading.close();
        removeToken();
        this.$message.warning(response.error);
        this.$router.push("/login");
      } else {
        this.loading.close();
      }
    },
    handleRemove(file, fileList) {},
    handlePreview(file) {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, filleList) {},
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.CalligraphyMaster-cread {
  height: 100%;
  position: relative;
  .bg_main {
    background: #f7f7f7;
    min-height: 100%;
    padding-top: 24px;
    padding-bottom: 70px;
    .main {
      width: 1168px;
      margin: 0 auto;
      padding: 16px;
      background: #ffffff;
      .main-top {
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 14px;
          color: #000000;
          > div {
            display: flex;
            align-items: center;
            margin-right: 8px;
            > img {
              width: 16px;
              height: 16px;
              margin-right: 8px;
            }
            .add_remove {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              width: 10px;
              margin-left: 8px;
              img {
                width: 10px;
                height: 10px;
                cursor: pointer;
              }
              > :nth-child(1) {
                margin-bottom: 1px;
              }
            }
          }
          span {
            margin-right: 8px;
          }
        }
        .right {
          display: flex;
          div {
            margin-left: 16px;
            width: 96px;
            height: 40px;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            img {
              width: 24px;
              height: 24px;
              margin-right: 8px;
            }
          }
        }
      }
      .operation {
        margin-top: 33px;
      }
      .text-operation {
        height: 48px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px 8px 0px 0px;
        border-bottom: none;
        display: flex;
        align-items: center;
        padding: 0 16px;
        .font_sele {
          position: relative;
          .font_sele_input {
            width: 193px;
            height: 32px;
            padding: 0 6px;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            > span {
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              color: #000000;
            }
            > img {
              width: 16px;
              height: 16px;
            }
          }

          .fontFamily_list {
            position: absolute;
            top: 39px;
            left: 0;
            width: 468px;
            background: #ffffff;
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #dbdbdb;
            height: 520px;
            overflow: auto;
            .fontFamily_one {
              padding: 12px 24px 16px 32px;
              border-bottom: 1px solid rgba(0, 0, 0, 0.08);
              position: relative;
              .use {
                width: 80px;
                height: 80px;
                background: url("../../assets/teacherdev/font-use.png");
                background-size: cover;
                position: absolute;
                left: -20px;
                top: -20px;
                -webkit-transform: scale(0.5);

                span {
                  color: #ffffff;
                  font-weight: 400;
                  font-size: 16px;
                  position: absolute;
                  transform: translateX(-3px) translateY(20px) rotate(-45deg);
                }
              }
              .fontFamily {
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: rgba(0, 0, 0, 0.5);
              }
              .content {
                margin-top: 8px;
                display: flex;
                justify-content: space-between;
                span {
                  font-weight: 400;
                  font-size: 32px;
                  line-height: 150%;
                  color: #000000;
                }
                img {
                  width: 24px;
                  height: 24px;
                  cursor: pointer;
                }
              }
            }
          }
        }
        .Boutque_font {
          padding: 16px 12px 0 12px;
          background: #f0f0f0;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: rgba(0, 0, 0, 0.6);
          cursor: default;
          span {
            display: inline-block;
            margin: 0 12px 12px 12px;
          }
          .one {
            color: #000000;
          }
          .more {
            color: rgba(0, 0, 0, 0.35);
            cursor: pointer;
          }
        }
        .img_dv {
          img {
            width: 26px;
            height: 26px;
            cursor: pointer;
            margin-left: 8px;
          }
        }
      }
      .luminance-operation {
        width: 440px;
        margin: 0 auto;
        display: flex;
        > img {
          width: 24px;
          height: 24px;
        }
        .line-text {
          margin-left: 17px;
          .DragLine {
            margin-top: 7px;
          }
          .text {
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
            font-weight: 400;
            font-size: 12px;
            line-height: 20px;
            color: #919c9e;
          }
        }
      }
      .canvas {
        height: 500px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .bottom {
        margin-top: 40px;
        display: flex;
        justify-content: center;
        div {
          width: 48px;
          height: 40px;
          background: #ffffff;
          border: 1px solid rgba(0, 0, 0, 0.08);
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin: 0 16px;
          img {
            width: 32px;
            height: 32px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.CalligraphyMaster-cread {
  .main-top {
    .left {
      .el-input__inner {
        padding: 0 5px;
      }
      .el-color-picker__color {
        border: none;
      }
      .el-icon-close:before {
        content: "";
      }
      .el-icon-arrow-down:before {
        content: "";
      }
      .el-color-picker__color-inner {
        position: absolute;
        left: 3px;
        top: 3px;
        right: 0;
        bottom: 0;
        width: 24px;
        height: 24px;
      }
    }
  }

  .text-operation {
    .el-color-picker__trigger {
      width: 60px;
      height: 32px;
    }
    .el-color-picker__empty,
    .el-color-picker__icon {
      left: 72%;
    }
    .el-color-picker__color {
      width: 28px;
    }
    .el-icon-close:before,
    .el-icon-arrow-down:before {
      color: gray;
    }
    .el-color-picker__color-inner {
      position: absolute;
      left: -1px;
      top: -1px;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 2px;
    }
    .el-input__inner {
      padding: 0 8px;
    }
    .el-input__inner,
    .el-input__suffix {
      height: 32px;
    }
    .el-input__icon {
      line-height: 32px;
    }
  }
}
</style>