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" v-if="1 == 2">
            <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 @click="downLoad">
              <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="margin-top: 16px">
          <div
            id="imgCanvas"
            ref="imgCanvas"
            :style="{
              width: form.width + 'px',
              height: form.height + 'px',
              background: form.bg_color,
            }"
          ></div>
        </div>
        <div class="bottom" v-if="1 == 2">
          <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,
      imgUrl: "../../assets/login/bg-login.png",
    };
  },
  //计算属性 类似于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() {
      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)",
      });
      // const objectUrl = window.URL.createObjectURL("");
      this.instance = new ImageEditor(document.querySelector("#imgCanvas"), {
        includeUI: {
          loadImage: {
            path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image", //"https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
            name: "image",
          },
          menu: [
            "mask",
            "resize",
            "crop",
            "rotate",
            "draw",
            "shape",
            "icon",
            "text",
            // "filter",
          ], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
          //initMenu: "none", // 默认打开的菜单项
          menuBarPosition: "bottom", // 菜单所在的位置
          locale: locale_zh, // 本地化语言为中文
          theme: customTheme, // 自定义样式
        },
        cssMaxWidth: 500, //this.form.width, // canvas 最大宽度
        cssMaxHeight: 500, //this.form.height, // canvas 最大高度
        usageStatistics: false,
      });
      $(".tie-mask-apply").css("display", "none");
      let fontArray = null;
      if (sessionStorage.getItem("fontSelectList")) {
        fontArray = JSON.parse(sessionStorage.getItem("fontSelectList"));
      } else {
        fontArray = [
          {
            value: "fzbsxjf",
            img: require("../../assets/teacherdev/fzbsxjf.png"),
          },
          {
            value: "fzbysk",
            img: require("../../assets/teacherdev/fzbysk.png"),
          },
          {
            value: "fzcbzbksjf",
            img: require("../../assets/teacherdev/fzcbzbksjf.png"),
          },
          {
            value: "fzfyksjc",
            img: require("../../assets/teacherdev/fzfyksjc.png"),
          },
          {
            value: "fzskbxkk",
            img: require("../../assets/teacherdev/fzskbxkk.png"),
          },
          {
            value: "fz1",
            img: require("../../assets/teacherdev/fzmz.png"),
          },
        ];
      }

      //   let fontArray = [
      //     "FZLTH",
      //     "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 =
        '<div class="font-select-box tui-image-editor-button"><input class="font-select-value" value="' +
        fontArray[0].value +
        '" readonly /><label>字体</label><ul #fontselect class="form-select font-selector font-select-list">';
      for (let i = 0; i < fontArray.length; i++) {
        let classname = i === 0 ? "active" : "";
        fontSelectHTML +=
          '<li value="' +
          fontArray[i].value +
          '" class="' +
          classname +
          '"><img src="' +
          fontArray[i].img +
          '" /></li>';
      }
      fontSelectHTML += "</ul></div>";

      let textMenuAlign = document.querySelector(
        ".tui-image-editor-menu-text .tui-image-editor-submenu-item"
      );
      textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
      let _this = this;
     
      $(".font-selector li")
        .off("click")
        .bind("click", function () {
          let value = $(this).attr("value");
          _this.TUI_updateFontOnText(value);
          $(".font-select-box input").val(value);
          $(".font-selector").css("display", "none");
          $(this).addClass("active").siblings().removeClass("active");
          sessionStorage.setItem("fontSelectFamily", JSON.stringify(value));
          let index = $(this).index();
          let arr = JSON.parse(JSON.stringify(fontArray[index]));
          let fontSelectList = JSON.parse(JSON.stringify(fontArray));
          fontSelectList.splice(index, 1);
          fontSelectList.unshift(arr);
          sessionStorage.setItem(
            "fontSelectList",
            JSON.stringify(fontSelectList)
          );
        });
      $(".font-select-box input").click(function () {
        if ($(".font-selector").css("display") == "flex") {
          $(".font-selector").css("display", "none");
        } else {
          $(".font-selector").css("display", "flex");
        }
      });
      this.instance.on("objectActivated", (props) => {
        this.TUI_selectedItem = props;
        this.TUI_updateFontSelected(props);
        console.log("TUI_selectedItem", props);
      });
      this.loading.close();
    },
    TUI_updateFontOnText(font) {
      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-select-box input").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) {},
    downLoad() {
      let dataURL = this.instance.toDataURL();
      var base64 = dataURL.toString(); // imgSrc 就是base64哈
      var byteCharacters = atob(
        base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
      );
      var byteNumbers = new Array(byteCharacters.length);
      for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      var blob = new Blob([byteArray], {
        type: undefined,
      });
      var aLink = document.createElement("a");
      aLink.download = "书法大师.jpg"; //这里写保存时的图片名称
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initCanvasImage();
  },
  //生命周期-创建之前
  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: 968px;
      margin: 0 auto;
      padding: 16px;
      background: #ffffff;
      .main-top {
        display: flex;
        justify-content: flex-end;
        .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: 600px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .bottom {
        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 {
  // 图片编辑器操作栏
  //.tui-image-editor-controls {
  // display: none;
  //}
  //.tui-image-editor-container .tui-image-editor-main-container {
  //height: 100%;
  //}
  .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;
    }
  }
  .font-select-box {
    position: relative;
    width: 100px;
    display: inline-block;
    input {
      width: 100%;
      height: 30px;
      border: none;
      outline: none;
      display: block;
      margin-bottom: 5px;
      border-radius: 2px;
      padding: 0 3px;
    }
  }
  .font-select-list {
    display: flex;
    width: 200px;
    flex-flow: wrap;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 30px;
    display: none;
    max-height: 120px;
    overflow: auto;
    li {
      background: #ffffff;
      font-size: 0;
      padding: 0 5px;
      cursor: pointer;
      img {
        width: 100%;
      }
      p {
        color: #0f0f0f;
        font-size: 14px;
        text-align: left;
        line-height: 20px;
      }
      &:hover {
        background: #cfcfcf;
      }
      &.active {
        background: #dbdbdb;
      }
    }
  }
}
</style>