surveyMaker/src/views/h5editor/index.vue

<template>
  <div class="editor">
    <!-- 头部 -->
    <HeaderMain></HeaderMain>
    <HeaderEdit
      :title="title"
      :shareModel="shareModel"
      :goback="dialogSave"
      :save="save"
      :zoom="zoom"
      :zoomNum="zoomNum"
      @saveThemeSuccess="showPreView=true"
    />
    <!-- 内容区域 -->
    <section class="section">
      <!-- 左侧图层 -->
      <Overview
        ref="overview"
        class="overview"
        :testcaseId="testcaseId"
        :resultCount="resultPageCount"
        :questions="questions"
      />
      <!-- 编辑区域 -->
      <div class="edit-area">
        <div
          class="container"
          id="h5editor"
          :style="{transform:`scale(${zoomNum},${zoomNum})`+`translate(${translateX}px,${translateY}px)`}"
        >
          <elab-canvas
            v-show="animatedNameGlobal!=''"
            :width="750"
            :height="1334"
            :cstyle="`height:1334px;width:750px;position: absolute;z-index:99999; pointer-events:none`"
            :background="'transparent'"
            :type="animatedNameGlobal"
          ></elab-canvas>
          <elab-background-canvas
            v-if="animatedNameBackgroundGlobal!=''"
            :width="canvasWidth"
            :height="(canvasHeight)"
            :cstyle="`position: absolute;z-index:1; pointer-events:none`"
            :background="'transparent'"
            :type="animatedNameBackgroundGlobal"
          ></elab-background-canvas>

          <Page
            :isOverView="false"
            ref="page"
            id="canvasPage"
            :hideFoot="hideFoot"
            class="canvas"
            :elements="editorPage.elements"
            :editorElement="element"
            :animatedNameGlobal="animatedNameGlobal"
            :selectedElement="selectedElement"
            :style="{ width: 750 + 'px', height: 1334 + 'px',backgroundColor: bodyBackgroundColor }"
          />
          <div
            v-if="this.gridTempField"
            :style="{'background-image':'linear-gradient(90deg,rgba(204,204,204,0.3) 10%,transparent 0), linear-gradient(rgba(204,204,204,0.3) 10%,transparent 0)',
              'background-size':'15px 15px', 'z-index':100000,width: '750px', height: '1334px'}"
            style="position: absolute;left: 0;top: 0;z-index: 9999;pointer-events: none"
          ></div>
        </div>
      </div>

      <!-- 属性设置 -->
      <div class="control-panel">
        <div class="funcs">
          <div class="tagPage">
            <div
              style="width:44px;height: 44px; margin-top: 20px;display: flex;justify-content: center"
              @click="togglePanel(1)"
              :class="{ active: panelState === 1 }"
            >
              <div class="page-create-txt" :class="{ active: panelState === 1 }"></div>
            </div>
            <div class="page-tag-btn-tip">创建文本</div>
          </div>
          <div class="tagPage">
            <div
              style="width:44px;height: 44px;display: flex;justify-content: center"
              @click="togglePanel(2)"
              :class="{ active: panelState === 2 }"
            >
              <div class="page-create-btn" :class="{ active: panelState === 2 }"></div>
            </div>
            <div class="page-tag-btn-tip">装饰元素</div>
          </div>
          <div class="tagPage">
            <div
              style="width:44px;height: 44px;display: flex;justify-content: center"
              @click="togglePanel(3)"
              :class="{ active: panelState === 3 }"
            >
              <div class="page-create-lunbo" :class="{ active: panelState === 3 }"></div>
            </div>
            <div class="page-tag-btn-tip">新建轮播</div>
          </div>

          <div class="tagPage">
            <div
              style="width:44px;height: 44px;display: flex;justify-content: center"
              @click="togglePanel(4)"
              :class="{ active: panelState === 4 }"
            >
              <div class="page-create-jiaohuanniu" :class="{ active: panelState === 4 }"></div>
            </div>
            <div class="page-tag-btn-tip">交互按钮</div>
          </div>

          <el-tooltip v-show="false" effect="dark" content="保存" placement="left">
            <div
              style="width:44px;height: 44px;display: flex;justify-content: center"
              @click="save"
            >
              <img
                style="width:34px;height: 34px;"
                src="http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png"
                alt
              />
            </div>
          </el-tooltip>
        </div>
        <div class="wrapper custom-scrollbar">
          <!-- 设置背景 0 -->
          <div class="panel panel-bg">
            <div class="clearfix" v-if="panelTabState !== 1 && panelTabState !== 3">
              <div
                style="display: flex;flex-direction: row;justify-content: space-between; padding:23px;border-bottom: #E2E4EE solid 1px;"
              >
                <div
                  style="width:45%;
                    height:28px;
                    text-align: center;
                    background:rgba(78,93,255,1);
                    border-radius:14px;font-size:14px;
                    font-family:MicrosoftYaHei;
                    color:rgba(255,255,255,1);
                    line-height:28px;"
                  @click="cleanBG"
                >移除背景</div>

                <div
                  style="width:45%;height:28px;text-align: center;background:rgba(78,93,255,1);border-radius:14px;font-size:14px;
                          font-family:MicrosoftYaHei;color:rgba(255,255,255,1);line-height:28px;"
                  @click="panelTabState = 1"
                >更换背景</div>
              </div>

              <div
                style="display: flex;flex-direction: row;align-items: center;padding-left: 23px;border-bottom: #E2E4EE solid 1px;padding-top: 11px;padding-bottom: 11px;"
              >
                <label
                  style="font-size:12px;
                font-family:MicrosoftYaHei;
                color:rgba(51,51,51,1);
                margin-right: 10px;
                "
                >画布背景色</label>
                <el-color-picker
                  v-model="bodyBackgroundColor"
                  @change="bodyBackgroundColorChange"
                  size="mini"
                ></el-color-picker>
              </div>

              <div
                style="display: flex;flex-direction: row ;padding-left: 23px;padding-top: 12px;padding-bottom: 12px;border-bottom: #E2E4EE solid 1px;"
              >
                <div style="display: flex;flex-direction: column;">
                  <label
                    style="font-size:12px;
                      font-family:MicrosoftYaHei;
                      color:rgba(51,51,51,1); margin-bottom: 6px;"
                  >画布宽度</label>
                  <el-input-number
                    v-model="canvasWidth"
                    :disabled="true"
                    size="small"
                    style="width:110px;"
                  ></el-input-number>
                </div>
                <div style="display: flex;flex-direction: column; margin-left:45px">
                  <label
                    style="font-size:12px;
                      font-family:MicrosoftYaHei;
                      color:rgba(51,51,51,1); margin-bottom: 6px;"
                  >画布高度</label>
                  <el-input-number v-model="canvasHeight" size="small" style="width:110px;"></el-input-number>
                </div>
              </div>

              <div
                class="clearfix"
                v-if="panelTabState !== 1 && panelTabState !== 3"
                style="border-bottom: #E2E4EE solid 1px; padding-top:010px;padding-bottom:2px;
                 padding-left:23px;
              "
              >
                <label
                  style="font-size:12px;
                font-family:MicrosoftYaHei; display:block;
                color:rgba(51,51,51,1);margin-bottom:10px;"
                >屏飘动效</label>
                <div class="content" :xxx="`animatedNameGlobal`">
                  <div
                    style="display: inline-flex;overflow: hidden;text-align: center; cursor: pointer; margin-right:12px;"
                    v-for="(item,index) in animateGlobalList"
                  >
                    <div
                      v-model="animatedNameGlobal"
                      @click="checkGlobalAnimation(item)"
                      :title="item.name"
                      :style="{'background':'rgba(238,242,250,1)',
                    'border-radius':'12px', 'margin-bottom':'10px',
                    'border':'1px solid rgba(205,209,221,1)','font-size': '12px',
                    color: animatedNameGlobal==item.id? 'white':'#999999','letter-spacing': 0,
                    'word-break':'keep-all',padding: '4px 13px','background': animatedNameGlobal===item.id? '#4E5DFF':'rgba(238,242,250,1)',
                    'border': animatedNameGlobal===item.id? '1px solid #4E5DFF':'1px solid rgba(205,209,221,1)',
               }"
                    >{{item.name}}</div>
                  </div>
                </div>
              </div>

              <div
                class="clearfix"
                v-if="panelTabState !== 1 && panelTabState !== 3"
                style="border-bottom: #E2E4EE solid 1px; padding-top:010px;padding-bottom:2px;
              padding-left:23px;"
              >
                <label
                  style="font-size:12px;
                font-family:MicrosoftYaHei; display:block;
                color:rgba(51,51,51,1);margin-bottom:10px;"
                >背景动效</label>
                <div class="content" :xxx="`animatedNameBackgroundGlobal`">
                  <div
                    style="display: inline-flex;overflow: hidden;text-align: center; cursor: pointer"
                    v-for="(item,index) in animateBackgroundGlobalList"
                  >
                    <div
                      v-model="animatedNameBackgroundGlobal"
                      @click="checkBackgroundGlobalAnimation(item)"
                      :title="item.name"
                      :style="{'background':'rgba(238,242,250,1)', 'margin-right':'12px',
                      'border-radius':'12px', 'margin-bottom':'10px',
                      'border':'1px solid rgba(205,209,221,1)','font-size': '12px',
                      color: animatedNameBackgroundGlobal==item.id? 'white':'#999999','letter-spacing': 0,
                    'word-break':'keep-all',padding: '4px 13px','background': animatedNameBackgroundGlobal===item.id? '#4E5DFF':'rgba(238,242,250,1)',
                    'border': animatedNameBackgroundGlobal===item.id? '1px solid #4E5DFF':'1px solid rgba(205,209,221,1)'}"
                    >{{item.name}}</div>
                  </div>
                </div>
              </div>

              <div class="item" style="padding:10px 23px;">
                <label
                  style="font-size:12px;
                font-family:MicrosoftYaHei;
                color:rgba(51,51,51,1);"
                >背景音乐</label>
                <div class="content">
                  <AudioPanel class="ele"></AudioPanel>
                </div>
              </div>
            </div>

            <!--<div class="clearfix">
              <label>设置作品信息</label>
              <div class="content">
                <el-input
                  placeholder="请输入标题"
                  v-model="title"
                  clearable>
                </el-input>
              </div>
              <div class="content">
                <el-input
                placeholder="请输入描述"
                v-model="description"
                clearable>
              </el-input>
              </div>
            </div>-->

            <div class="clearfix" v-if="panelTabState === 1">
              <ImgPanel :selectedImg="addBG" />
            </div>

            <div class="clearfix" v-if="panelTabState === 3">
              <div style="margin-top: 5px; height:100%;vertical-align: middle;padding-right:10px">
                <div style="display: inline-flex; overflow: hidden;">
                  <div
                    style="font-size: 14px;color: #999999;letter-spacing: 0; word-break:keep-all;width:100%"
                  >组合对齐布局</div>
                </div>
                <div style="margin-top: 10px">
                  <div
                    style="display: inline-flex; overflow: hidden;width: 14%; cursor: pointer; text-align: center"
                  >
                    <div
                      @click="toLeft"
                      title="左对齐"
                      :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}"
                    >
                      <img
                        src="http://yun-image.elab-plus.com/images/tfb/icon_left2.png"
                        width="20"
                        height="20"
                      />
                    </div>
                  </div>
                  <div
                    title="水平居中对齐"
                    style="display: inline-flex; overflow: hidden;width: 14%; cursor: pointer;text-align: center"
                    @click="toCenter"
                  >
                    <div
                      :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}"
                    >
                      <img
                        src="http://yun-image.elab-plus.com/images/tfb/horizontal_center.png"
                        width="20"
                        height="20"
                      />
                    </div>
                  </div>
                  <div
                    title="右对齐"
                    style="display: inline-flex;cursor: pointer;width: 14%; text-align: center"
                    @click="toRight"
                  >
                    <div
                      :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}"
                    >
                      <img
                        src="http://yun-image.elab-plus.com/images/tfb/icon_right2.png"
                        width="20"
                        height="20"
                      />
                    </div>
                  </div>

                  <div
                    style="display: inline-flex; overflow: hidden;width: 14%; cursor: pointer; text-align: center"
                  >
                    <div
                      @click="toTop"
                      title="上对齐"
                      :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}"
                    >
                      <img
                        src="http://yun-image.elab-plus.com/images/tfb/icon_top.png"
                        width="20"
                        height="20"
                      />
                    </div>
                  </div>
                  <div
                    title="垂直居中对齐"
                    style="display: inline-flex; overflow: hidden;width: 14%; cursor: pointer;text-align: center"
                    @click="toVertialCenter"
                  >
                    <div
                      :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}"
                    >
                      <img
                        src="http://yun-image.elab-plus.com/images/tfb/vertical_center.png"
                        width="20"
                        height="20"
                      />
                    </div>
                  </div>
                  <div
                    title="下对齐"
                    style="display: inline-flex;cursor: pointer;width: 14%; text-align: center"
                    @click="toBottom"
                  >
                    <div
                      :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}"
                    >
                      <img
                        src="http://yun-image.elab-plus.com/images/tfb/icon_down.png"
                        width="20"
                        height="20"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 添加文字 1 -->
          <div class="panel panel-text" v-show="panelState === 1">
            <div
              class="btn"
              @click="addTextElement('title')"
              style="font-size: 32px; font-weight: bold;"
            >插入标题</div>
            <div class="btn" @click="addTextElement('plain')">插入文本</div>
            <div class="btn" @click="addTextElement('frame')">插入方框</div>
          </div>
          <!-- 添加元素 2 -->
          <div class="panel panel-element clearfix" v-show="panelState === 2">
            <ImgPanel :selectedImg="addPicElement" :themeId="itemId" :isButton="false" />
          </div>
          <!-- 添加多图上元素 3 -->
          <div class="panel panel-element clearfix" v-if="panelState === 3">
            <ImgPanel :selectedImg="addMorePicElement" :ismultiple="true" />
          </div>
          <!-- 添加按钮 4 -->
          <div class="panel panel-element clearfix" v-if="panelState === 4">
            <ImgPanel
              :selectedImg="addButtonElement"
              :themeId="itemId"
              :isButton="true"
              :showSelectedPicOrUnSelectedPic="uploadSelectedPicOrUnSelectedPic"
            />
          </div>
          <!-- 图层编辑面板 -->
          <EditPanel
            :element="element"
            :panelState="panelState"
            v-if="panelState > 10"
            :showSelectedPicOrUnSelectedPic="changeSelectedPicOrUnSelectedPic"
            :changeCurrentImg="changeCurrentImg"
          />
        </div>
      </div>
    </section>
    <PreView :itemId="itemId" @hideView="showPreView=false" v-if="showPreView" />
    <div v-show="dialogVisible" class="dialog">
      <div
        style="width:560px;height: 353px;background:rgba(255,255,255,1);
        box-shadow:0px 5px 11px 0px rgba(78,93,255,0.42); margin:0 auto; margin-top:10%;
        border-radius:6px;"
      >
        <div
          style="width:560px;
          height:34px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          background:rgba(78,93,255,1);
          border-radius:6px 6px 0px 0px;"
        >
          <span
            style="font-size:16px;
          font-family:PingFangSC;
          font-weight:400;
          color:rgba(255,255,255,1); margin-left:20px;
          line-height:34px;"
          >上传按钮样式</span>

          <img
            src="../../assets/images/close-icon.png"
            @click="closeUploadButton"
            style="width: 16px; height: 16px; margin-right: 10px; cursor: pointer;"
          />
        </div>
        <div
          style="display: flex;flex-direction: row; justify-content: center;margin-top:42px;margin-bottom:40px;  align-items: center"
        >
          <div
            style="width:130px; display: flex;
          flex-direction: column; align-items: center;
          "
          >
            <span
              style="font-size:14px;
            font-family:MicrosoftYaHei;display:block;
            color:rgba(51,51,51,1); margin-bottom:14px;
            line-height:19px;"
            >默认状态</span>
            <div
              v-if="unSelectedButtom"
              :style="{ backgroundImage: 'url(' + buttonData.backgroundUnselectedImg + ')','width':'130px', 'height':'130px','background-repeat': 'no-repeat',
                 'background-position': 'center',
                 'background-size': 'contain'}"
              style="position: relative"
            >
              <div
                style="font-size:12px;width: 100%; height: 20px;
                          font-family:MicrosoftYaHei;
                          color:rgba(255,255,255,1);
                         background:rgba(0,0,0,0.8);
                         display: flex; position: absolute;
                         bottom: 0;
                         justify-content: center;
                          line-height:20px;"
              >更换素材</div>
              <label class="lable">
                <input style="display: none;" type="file" @change="upload($event, false)" />
              </label>
            </div>
            <label class="lable" v-else>
              <div
                style="width:100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  height:100%;
                  border:1px dashed rgba(100,107,129,1);"
              >
                <img
                  style="width:16px;
                  height:16px;"
                  src="../../assets/images/add-ele.png"
                />
                <span
                  style="font-size:12px;
                  font-family:PingFangSC-Regular;
                  font-weight:400;
                  margin-top: 6px;
                  color:rgba(51,51,51,1);
                  line-height:17px;"
                >上传素材</span>
              </div>
              <input
                style="display: none;"
                type="file"
                multiple
                @change="changeSelectedPicOrUnSelectedPic($event, true)"
              />
            </label>
          </div>

          <img
            src="../../assets/images/changeImg.png"
            alt
            style="width:32px; height:32px; margin-left:30px;margin-right:30px;"
            @click="changeImg"
          />

          <div
            style="width:130px; display: flex;
          flex-direction: column; align-items: center;
          "
          >
            <span
              style="font-size:14px;
              font-family:MicrosoftYaHei;display:block;
              color:rgba(51,51,51,1);margin-bottom:14px;
              line-height:19px;"
            >选中状态</span>
            <div
              v-if="selectedButtom"
              :style="{ backgroundImage: 'url(' + buttonData.backgroundSelectedImg + ')','width':'130px', 'height':'130px','background-repeat': 'no-repeat',
              'background-position': 'center',
              'background-size': 'contain'}"
              style="position: relative"
            >
              <div
                style="font-size:12px;width: 100%; height: 20px;
                          font-family:MicrosoftYaHei;
                          color:rgba(255,255,255,1);
                         background:rgba(0,0,0,0.8);
                         display: flex; position: absolute;
                         bottom: 0;
                         justify-content: center;
                          line-height:20px;"
              >更换素材</div>
              <label class="lable">
                <input style="display: none;" type="file" @change="upload($event, true)" />
              </label>
            </div>
            <label class="lable" v-else>
              <div
                style="width:100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    height:100%;
                    border:1px dashed rgba(100,107,129,1);"
              >
                <img
                  style="width:16px;
                    height:16px;"
                  src="../../assets/images/add-ele.png"
                />
                <span
                  style="font-size:12px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    margin-top: 6px;
                    color:rgba(51,51,51,1);
                    line-height:17px;"
                >上传素材</span>
              </div>
              <input
                style="display: none;"
                type="file"
                multiple
                @change="changeSelectedPicOrUnSelectedPic($event, true)"
              />
            </label>
          </div>
        </div>

        <div
          style="width:105px;
        height:34px;margin:0 auto;
        background:rgba(78,93,255,1);
        border-radius:19px;font-size:14px;
        font-family:PingFangSC;
        font-weight:500; text-align: center;
        color:rgba(255,255,255,1);
        line-height:34px;cursor: pointer;"
          @click="uploadButton"
        >确定</div>

        <span
          v-if="canSave"
          style="font-size:12px;
        font-family:MicrosoftYaHei;display: inline-block;margin-top: 10px;
        color:rgba(255,0,0,1); width: 100%; text-align: center;
        line-height:16px;"
        >*两种状态都上传素材后才能保存</span>
      </div>
    </div>
  </div>
</template>

<script>
import tools from "../../util/tools";
import Overview from "./overview";
import Page from "../../components/Page";
import PicPicker from "../../components/PicturePicker";
import PreView from "../../components/PreView";
import HeaderEdit from "../../components/HeaderEdit";
import EditPanel from "../../components/EditPanel";
import SvgPanel from "../../components/SvgPanel";
import ImgPanel from "../../components/ImgPanel";
import appConst from "../../util/appConst";
import html2canvas from "html2canvas";
import { uploadBase64 } from "../../util/http";
import elabCanvas from "../../util/canvas/elabCanvas.vue";
import elabBackgroundCanvas from "../../util/canvas/elabBackgroundCanvas";
import AudioPanel from "../../components/AudioPanel";
import HeaderMain from "../../components/HeaderMain";
import * as http from "../../util/http";

const $ = require("jquery");

export default {
  data() {
    return {
      itemId: null,
      testcaseId: null,
      questions: [],
      panelState: 0,
      canvasWidth: 750,
      canvasHeight: 504,
      bodyBackgroundColor: "rgba(255,255,255,0)",
      bgc: "#B1C096",
      btnColor: "#5f8a61",
      title: "标题",
      description: "描述",
      dialogSaveBeforeBack: false,
      picBase64: "",
      http: appConst.BACKEND_DOMAIN,
      releaseUrl: "",
      showPreView: false,
      isLoadingPreview: false,
      panelTabState: 0,
      animatedNameGlobal: "",
      shareModel: null,
      resultPageCount: 0,
      animateGlobalList: [
        { id: "Snow", name: "下雪", type: 0 },
        { id: "Bubble", name: "冒泡", type: 0 },
        { id: "Flower", name: "樱花", type: 0 },
        { id: "Rain", name: "下雨", type: 0 },
        { id: "Bubble2", name: "飞沙", type: 0 },
        { id: "Particles", name: "粒子", type: "0" },
        { id: "Circle", name: "圆圈", type: "0" },
        { id: "FlowField", name: "流场", type: "0" },
        { id: "cloud", name: "云飘", type: "0" },
        { id: "nephelo", name: "雾霾", type: "0" }
      ],
      animateBackgroundGlobalList: [
        { id: "Smoke", name: "烟雾", type: 1 },
        { id: "Wave", name: "波浪", type: 2 },
        // {id: 'WaterRipple', name: '水波', type: 3},
        { id: "Bubble2", name: "飞沙", type: 0 },
        { id: "Particles", name: "粒子", type: "0" },
        { id: "Circle", name: "圆圈", type: "0" },
        { id: "FlowField", name: "流场", type: "0" },
        { id: "ColorRandom", name: "渐变色", type: "0" }
      ],
      animatedNameBackgroundGlobal: "",
      animatedBackgroundCustom: false,
      globalAnimatedBackgroundTag: false,
      dialogVisible: false,
      buttonData: {},
      unSelectedButtom: false,
      selectedButtom: false,

      canSave: false,
      zoomNum: 1,
      translateX: 360,
      translateY: 100
    };
  },
  watch: {
    element() {
      let ele = this.$store.state.editor.editorElement;
      let type = ele ? ele.type : "null";
      this.panelTabState = 0;

      var length = this.$store.state.editor.complexEditorElement.length;
      if (length > 1) {
        type = "group";
        this.panelTabState = 3;
      }

      switch (type) {
        case "text":
          this.panelState = 11;
          break;
        case "icon":
        case "pic":
          this.panelState = 12;
          break;
        case "audio":
          this.panelState = 12;
          break;
        case "morePic":
          this.panelState = 13;
          break;
        case "frame":
          this.panelState = 14;
          break;
        case "button":
          this.panelState = 15;
          break;
        case "group":
          this.panelState = 0;
        default:
          this.panelState = 0;
      }
    },
    "$store.state.editor.complexEditorElement": function() {
      var complexEditorElement = this.$store.state.editor.complexEditorElement;
      if (complexEditorElement.length == 0 && this.panelTabState == 3) {
        this.panelTabState = 0;
      }
    }
  },
  computed: {
    themeId() {
      return this.$store.state.editor.editorTheme._id;
    },
    editorPage() {
      this.shareModel = {
        id: this.itemId,
        testcaseId: this.testcaseId,
        shareTitle: this.$store.state.editor.editorTheme.shareTitle,
        shareContent: this.$store.state.editor.editorTheme.shareContent,
        shareImg: this.$store.state.editor.editorTheme.shareImg,
        shareUrl: this.$store.state.editor.editorTheme.shareUrl
      };
      this.resultPageCount = this.$store.state.editor.editorTheme.resultPageCount;
      this.bgc = this.$store.state.editor.editorTheme.bgc || "#B1C096";
      this.btnColor =
        this.$store.state.editor.editorTheme.btnColor || "#5f8a61";
      this.bodyBackgroundColor =
        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
        "rgba(255,255,255,0)";
      this.canvasWidth =
        this.$store.state.editor.editorTheme.canvasWidth || 750;
      this.canvasHeight = this.$store.state.editor.editorTheme.canvasHeight;
      this.description = this.$store.state.editor.editorTheme.description;
      this.animatedNameGlobal =
        this.$store.state.editor.editorTheme.animatedNameGlobal || "";
      this.animatedNameBackgroundGlobal =
        this.$store.state.editor.editorTheme.animatedNameBackgroundGlobal || "";
      this.title = this.$store.state.editor.editorTheme.title;
      this.gridTempField = this.$store.state.editor.gridTempField;
      var pages = this.$store.state.editor.editorTheme.pages || [];
      console.log("每页数据", pages);
      this.questions = [];
      for (var i = 1; i < pages.length; i++) {
        if (pages[i].questions) {
          console.log("每页数据", pages[i].questions);
          var result = pages[i].questions.map(function(a) {
            return a.questionId;
          });
          this.questions.push(result);
        } else {
          this.questions.push([]);
        }
      }
      console.log("拼接数据", this.questions);
      return this.$store.state.editor.editorPage;
    },
    element() {
      let ele = this.$store.state.editor.editorElement;
      return ele || {};
    },
    hideFoot() {
      let pages = this.$store.state.editor.editorTheme.pages || [];
      let index = pages.indexOf(this.editorPage);
      return index == pages.length - 1 ? false : true;
    },
    complexEditorElement() {
      return this.$store.state.editor.complexEditorElement;
    }
  },
  methods: {
    async changeCurrentImg(event, num) {
      var that = this;
      let files = event.target.files;
      if (!files.length) {
        return false;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (file) {
          if (files.length == 1 && i == 0) {
            http.uploadMaterielFile(
              file,
              function(res) {
                let img = document.createElement("img");
                loading.close();
                img.onload = () => {
                  that.element.width = img.width;
                  that.element.height = img.height;
                  if (num == 1) {
                    that.element.backgroundUnselectedImg = res;
                  } else if (num == 2) {
                    that.element.backgroundSelectedImg = res;
                  }
                };
                img.src = res;
              },
              function(res) {
                if (res.total.percent == 100) {
                  loading.close();
                }
              }
            );
          }
        }
      }
    },
    zoom(isAdd) {
      var zooms = [0.2, 0.3, 0.5, 0.75, 0.8, 0.9, 1, 1.2, 1.5, 2, 3, 4];
      var translateYs = [80, 80, 80, 80, 80, 90, 100, 150, 200, 250, 300, 330];
      if (isAdd) {
        if (this.zoomNum <= 3) {
          this.zoomNum = zooms[zooms.indexOf(this.zoomNum) + 1];
          this.translateY = translateYs[zooms.indexOf(this.zoomNum)];
        }
      } else {
        if (this.zoomNum > 0.2) {
          this.zoomNum = zooms[zooms.indexOf(this.zoomNum) - 1];
          this.translateY = translateYs[zooms.indexOf(this.zoomNum)];
        }
      }
    },
    dialogSave() {
      // return Promise.resolve().then(() => this.save()).then(() => this.$router.replace('themeList'))

      if (!window.hasSaveFlag) {
        this.$confirm(
          "请确保已经将修改的内容保存，否则页面将丢失。是否确认退出编辑？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            window.hasSaveFlag = true;
            return Promise.resolve().then(() =>
              this.$router.replace("myHistoryTest")
            );
          })
          .catch(() => {});
      } else {
        return Promise.resolve().then(() =>
          this.$router.replace("myHistoryTest")
        );
      }
    },
    getPicList(_id) {
      this.$store.dispatch("getPicListByThemeId", _id);
    },
    addPicElement(ele) {
      // if (ele) {
      let obj = {};
      obj.type = "pic";
      obj.top = document.getElementById("h5editor").scrollTop;
      obj.left = 0;
      obj.width = ele.width;
      obj.height = ele.height;
      obj.imgSrc = ele.filePath;
      obj.loop = ele.loop;
      this.$store.dispatch("addElement", obj);
      // } else {
      //   this.$store.dispatch('addElement', this.element)
      // }
      this.element.type = "pic";
    },
    addMorePicElement(ele) {
      // if (ele) {
      let obj = {};
      obj.type = "morePic";
      obj.top = document.getElementById("h5editor").scrollTop;
      obj.left = 0;
      obj.width = ele.morePic[0].width;
      obj.height = ele.morePic[0].height;
      obj.imgSrc = ele.filePath;
      obj.morePic = ele.morePic;
      obj.loop = ele.loop;
      this.$store.dispatch("addElement", obj);
      this.element.type = "morePic";
    },
    //添加按钮
    addButtonElement(ele) {
      // if (ele) {
      let obj = {};
      obj.type = "button";
      obj.top = document.getElementById("h5editor").scrollTop;
      obj["text"] = "请输入文本";
      obj["lineHeight"] = 1.5;

      obj.left = 0;
      obj.width = ele.width;
      obj.height = ele.height;
      obj.backgroundUnselectedImg = ele.backgroundUnselectedImg;
      obj.backgroundSelectedImg = ele.backgroundSelectedImg;
      obj.loop = ele.loop;
      this.$store.dispatch("addElement", obj);
      // } else {
      //   this.$store.dispatch('addElement', this.element)
      // }
      this.element.type = "button";
    },

    addBG(file) {
      this.$store.dispatch("addBGElement", {
        type: "bg",
        imgSrc: file.filePath
      });
    },
    cleanBG() {
      this.$store.dispatch("cleanBG");
    },
    cleanEle() {
      this.$store.dispatch("cleanEle", this.element);
    },
    addTextElement(type) {
      let param = {};
      param.top = document.getElementById("h5editor").scrollTop;
      param["type"] = "text";
      param["text"] = "请输入文本";
      param["width"] = 300;
      param["lineHeight"] = 1.5;
      param["backgroundColor"] = "";
      param["verticalAlign"] = "top";
      param["display"] = "block";
      param["textIndent"] = "0.0";
      param["letterSpacing"] = "0.0";
      param["allTransparent"] = "";
      param["nodeId"] = "Id" + Math.random();
      switch (type) {
        case "plain":
          break;
        case "title":
          param["fontSize"] = 32;
          param["fontWeight"] = "bold";
          param["textAlign"] = "center";
          break;
        case "frame":
          param["type"] = "frame";
          param["text"] = "";
          param["width"] = this.canvasWidth;
          param["border"] = "1px solid #000";
          param["height"] = 500;
          break;
        default:
      }
      this.$store.dispatch("addElement", param);
    },
    playAnimate() {
      this.$store.dispatch("playAnimate");
    },
    async save() {
      var loading = this.$loading({
        lock: true,
        text: "模板保存中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      $(".animated").css("animation-name", "null");
      $(".animated>div").css("animation-name", "null");
      $(".animated span").css({
        animationDelay: "0s",
        animationDuration: "0s"
      });
      await html2canvas(document.querySelector("#canvasPage"), {
        useCORS: true,
        scale: 0.5,
        height: 1334,
        logging: false //日志开关，便于查看html2canvas的内部执行流程
      }).then(async canvas => {
        var result = await uploadBase64({ base64Str: canvas.toDataURL() });
        if (result.data.success) {
          this.$store.state.editor.editorTheme.cover =
            result.data.single.filePath;
          console.log("封面地址", result.data.single.filePath);
        } else {
          this.$message.error("封面图片上传失败！");
        }
      });

      this.$store.state.editor.editorTheme.bgc = this.bgc;
      this.$store.state.editor.editorTheme.btnColor = this.btnColor;
      this.$store.state.editor.editorTheme.bodyBackgroundColor =
        this.bodyBackgroundColor || "rgba(255,255,255,0)";
      this.$store.state.editor.editorTheme.canvasWidth =
        this.canvasWidth || 750;
      this.$store.state.editor.editorTheme.canvasHeight = this.canvasHeight;
      this.$store.state.editor.editorTheme.title = this.title;
      this.$store.state.editor.editorTheme.description = this.description;
      this.$store.state.editor.editorTheme.animatedNameGlobal =
        this.animatedNameGlobal || "";
      this.$store.state.editor.editorTheme.animatedNameBackgroundGlobal =
        this.animatedNameBackgroundGlobal || "";
      this.editorPage.elements.forEach(function(element) {
        if (element.type == "text") {
          var height = window
            .getComputedStyle(document.getElementById(element.nodeId))
            .height.replace("px", "");
          element.height = height;
        } else if (element.type == "frame") {
          element.children.forEach(function(_element) {
            if (_element.type == "text") {
              var height = window
                .getComputedStyle(document.getElementById(_element.nodeId))
                .height.replace("px", "");
              _element.height = height;
            }
          });
        }
      });
      let chil = this.$refs.overview;
      console.log("子组件结果页的值:", chil.resultPageCount);
      let param = {
        id: this.itemId,
        coverImg: this.$store.state.editor.editorTheme.cover,
        jsonString: JSON.stringify(this.$store.state.editor.editorTheme),
        resultPageCount: chil.resultPageCount,
        updator: "admin"
      };
      console.log("参数", param);
      return this.$store
        .dispatch("saveTheme", param)
        .then(() => {
          loading.close();
          this.$message({
            message: "保存成功",
            type: "success"
          });
        })
        .catch(() => {
          loading.close();
          this.$message({
            message: "保存失败",
            type: "error"
          });
        });
    },
    deploy() {
      this.isLoadingPreview = true;
      this.$store
        .dispatch(
          "saveTheme",
          tools.vue2json(this.$store.state.editor.editorTheme)
        )
        .then(() => {
          var param = setTimeout(() => {
            this.showPreView = true;
            this.isLoadingPreview = false;
          }, 1000);
        });
    },
    selectedElement(element) {
      this.$store.dispatch("setEditorElement", element);
    },
    deleteListener(event) {
      if (
        event.keyCode === 8 &&
        event.target.nodeName !== "INPUT" &&
        event.target.nodeName !== "TEXTAREA"
      ) {
        this.deleteElement();
      }
    },
    deleteElement() {
      this.$store.dispatch("deleteSelectedElement");
    },
    togglePanel(code) {
      this.panelState = code;
      if (code === 0) {
        this.panelTabState = 0;
        this.$store.dispatch("setEditorElement", null);
      }
    },
    checkGlobalAnimation(item) {
      if (this.animatedNameGlobal != item.id) {
        this.animatedNameGlobal = item.id;
        this.$store.state.editor.editorTheme.animatedNameGlobal = this.animatedNameGlobal;
      } else {
        this.animatedNameGlobal = "";
        this.$store.state.editor.editorTheme.animatedNameGlobal = "";
      }
    },
    checkBackgroundGlobalAnimation(item) {
      if (this.animatedNameBackgroundGlobal != item.id) {
        this.animatedNameBackgroundGlobal = item.id;
        this.animatedBackgroundCustom = item.type == 0 ? false : true;
        this.$store.state.editor.editorTheme.animatedNameBackgroundGlobal = this.animatedNameBackgroundGlobal;
      } else {
        this.animatedNameBackgroundGlobal = "";
        this.$store.state.editor.editorTheme.animatedNameBackgroundGlobal = "";
      }
    },
    bodyBackgroundColorChange() {
      this.$store.state.editor.editorTheme.bodyBackgroundColor =
        this.bodyBackgroundColor || "rgba(255,255,255,0)";
    },
    IMChange() {
      this.$store.state.editor.editorTheme.bgc = this.bgc;
      this.$store.state.editor.editorTheme.btnColor = this.btnColor;
    },
    toLeft() {
      let complexEditorElement = this.complexEditorElement;
      let arr = complexEditorElement.map(item => {
        return item.left;
      });
      let min = Math.min.apply(null, arr);
      complexEditorElement.forEach(ele => {
        ele.left = min;
      });
    },
    toCenter() {
      let complexEditorElement = this.complexEditorElement;
      let arr = complexEditorElement.map(item => {
        return item.left;
      });
      let total = 0;
      for (let i = 0; i < arr.length; i++) {
        total += arr[i];
      }
      let p = total / arr.length;
      complexEditorElement.forEach(ele => {
        ele.left = p;
      });
    },
    toRight() {
      let complexEditorElement = this.complexEditorElement;
      let arr = complexEditorElement.map(item => {
        return item.width + item.left;
      });
      let max = Math.max.apply(null, arr);
      complexEditorElement.forEach(ele => {
        ele.left = max - ele.width;
      });
    },
    toTop() {
      let complexEditorElement = this.complexEditorElement;
      let arr = complexEditorElement.map(item => {
        return item.top;
      });
      let min = Math.min.apply(null, arr);
      complexEditorElement.forEach(ele => {
        ele.top = min;
      });
    },
    toVertialCenter() {
      let complexEditorElement = this.complexEditorElement;
      let arr = complexEditorElement.map(item => {
        return item.top;
      });
      let total = 0;
      for (let i = 0; i < arr.length; i++) {
        total += arr[i];
      }
      let p = total / arr.length;
      complexEditorElement.forEach(ele => {
        ele.top = p;
      });
    },
    toBottom() {
      let complexEditorElement = this.complexEditorElement;
      let arr = complexEditorElement.map(item => {
        return item.height + item.top;
      });
      let max = Math.max.apply(null, arr);
      complexEditorElement.forEach(ele => {
        ele.top = max - ele.height;
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    uploadSelectedPicOrUnSelectedPic() {
      this.dialogVisible = true;
    },
    async changeSelectedPicOrUnSelectedPic(event, isAddButton) {
      var that = this;
      let files = event.target.files;
      if (!files.length) {
        return false;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (file) {
          if (files.length == 1 && i == 0) {
            http.uploadMaterielFile(
              file,
              function(res) {
                let img = document.createElement("img");
                that.buttonData.itemId = that.itemId;
                that.buttonData.isButton = true;
                loading.close();
                img.onload = () => {
                  that.buttonData.width = img.width;
                  that.buttonData.height = img.height;
                  if (!isAddButton) {
                    that.buttonData.backgroundUnselectedImg = res;
                    that.uploadButtonImg("single");
                  } else {
                    that.buttonData.backgroundSelectedImg = res;
                    that.selectedButtom = false;
                    var param = setTimeout(() => {
                      that.selectedButtom = true;
                    }, 1);
                  }
                };
                img.src = res;
              },
              function(res) {
                if (res.total.percent == 100) {
                  loading.close();
                }
              }
            );
          } else if (files.length > 1) {
            http.uploadMaterielFile(
              file,
              function(res) {
                that.buttonData.itemId = that.itemId;
                that.buttonData.isButton = true;
                if (res.endsWith(files[0].name)) {
                  that.buttonData.backgroundUnselectedImg = res;
                } else if (res.endsWith(files[1].name)) {
                  that.buttonData.backgroundSelectedImg = res;
                  let img = document.createElement("img");
                  img.onload = () => {
                    that.buttonData.width = img.width;
                    that.buttonData.height = img.height;
                    if (!isAddButton) {
                      that.uploadButtonImg("both");
                    } else {
                      that.selectedButtom = false;
                      var param = setTimeout(() => {
                        that.selectedButtom = true;
                      }, 1);

                      that.unSelectedButtom = false;
                      var param2 = setTimeout(() => {
                        that.unSelectedButtom = true;
                      }, 1);
                    }
                  };
                  img.src = res;
                  loading.close();
                }
              },
              function(res) {
                if (res.total.percent == 100) {
                }
              }
            );
          }
        }
      }
    },

    uploadButtonImg(type) {
      let that = this;
      this.element.width = that.buttonData.width;
      this.element.height = that.buttonData.height;
      if (type == "single") {
        this.element.backgroundUnselectedImg =
          that.buttonData.backgroundUnselectedImg;
        this.element.backgroundSelectedImg = that.element.backgroundSelectedImg;
      } else if (type == "both") {
        this.element.backgroundUnselectedImg =
          that.buttonData.backgroundUnselectedImg;
        this.element.backgroundSelectedImg =
          that.buttonData.backgroundSelectedImg;
      }
      this.buttonData = {};
    },
    closeUploadButton() {
      this.buttonData = {};
      this.dialogVisible = false;
      this.selectedButtom = false;
      this.unSelectedButtom = false;

      this.canSave = false;
    },

    async upload(event, isSelected) {
      var that = this;
      let files = event.target.files;
      if (!files.length) {
        return false;
      }

      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (file) {
          http.uploadMaterielFile(
            file,
            function(res) {
              loading.close();
              let img = document.createElement("img");

              img.onload = () => {
                if (isSelected) {
                  that.buttonData.backgroundSelectedImg = res;
                  that.selectedButtom = false;
                  var params = setTimeout(() => {
                    that.selectedButtom = true;
                  }, 1);
                } else {
                  that.buttonData.backgroundUnselectedImg = res;
                  that.unSelectedButtom = false;
                  var param = setTimeout(() => {
                    that.unSelectedButtom = true;
                  }, 1);
                }
                that.buttonData.itemId = that.itemId;
                that.buttonData.width = img.width;
                that.buttonData.height = img.height;
                that.buttonData.isButton = true;
              };
              img.src = res;
            },
            function(res) {
              if (res.total.percent == 100 && files.length == i + 1) {
                loading.close();
              }
            }
          );
        }
      }
    },
    uploadButton() {
      let that = this;
      if (
        that.buttonData.backgroundUnselectedImg &&
        that.buttonData.backgroundSelectedImg
      ) {
        this.canSave = false;
      } else {
        this.canSave = true;
        return false;
      }
      this.$store.dispatch("savePic", {
        backgroundUnselectedImg: that.buttonData.backgroundUnselectedImg,
        backgroundSelectedImg: that.buttonData.backgroundSelectedImg,
        themeId: that.buttonData.itemId,
        width: that.buttonData.width,
        height: that.buttonData.height,
        isButton: that.buttonData.isButton
      });
      this.buttonData = {};
      this.dialogVisible = false;
      this.selectedButtom = false;
      this.unSelectedButtom = false;
      this.canSave = false;
    },
    changeImg() {
      var temp = "";
      temp = this.buttonData.backgroundSelectedImg;
      this.buttonData.backgroundSelectedImg = this.buttonData.backgroundUnselectedImg;
      this.buttonData.backgroundUnselectedImg = temp;
      this.selectedButtom = false;
      var params1 = setTimeout(() => {
        this.selectedButtom = true;
      }, 0.1);
      this.unSelectedButtom = false;
      var params2 = setTimeout(() => {
        this.unSelectedButtom = true;
      }, 0.1);
    }
  },
  components: {
    Overview,
    Page,
    PicPicker,
    appConst,
    PreView,
    HeaderEdit,
    EditPanel,
    SvgPanel,
    ImgPanel,
    AudioPanel,
    elabCanvas,
    elabBackgroundCanvas,
    HeaderMain
  },
  created() {
    // new SnowCanvas(curWinWidth, curWinHeight);
    // new Snow().process()
    this.testcaseId = this.$route.query.testcaseId;
    this.itemId = this.$route.query.itemId;
    if (this.itemId) {
      if (!this.pages) {
        this.$store.dispatch("getPageByThemeId", this.itemId);
      }

      // this.getPicList(this.itemId);
    } else {
      this.$store.dispatch("createTheme");
      this.$store.dispatch("addPage");
      this.$store.dispatch("cleanPicList");
    }
    document.addEventListener("keyup", this.deleteListener);
    window.onbeforeunload = () => false;
  },
  destroyed() {
    document.removeEventListener("keyup", this.deleteListener);
    window.onbeforeunload = null;
  }
};
</script>

<style lang="less" scoped>
.lable {
  display: block;
  cursor: pointer;
  width: 130px;
  height: 130px;
}

.dialog {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  position: absolute;
  top: 0;
  z-index: 100;
}

.tagPage {
  position: relative;
}

.tagPage:hover div {
  display: block;
}

.page-create-txt {
  width: 34px;
  height: 34px;
  background: url("http://yun-image.elab-plus.com/images/dyb/new-text.png")
    center no-repeat;
  background-size: 34px 34px;

  &:hover {
    background: url("http://yun-image.elab-plus.com/images/dyb/new-text-hover.png")
      center no-repeat;
    background-size: 34px 34px;
  }

  &.active {
    background: url("http://yun-image.elab-plus.com/images/dyb/new-text-active.png")
      center no-repeat;
    background-size: 34px 34px;
  }
}

.page-create-btn {
  width: 34px;
  height: 34px;
  background: url("http://yun-image.elab-plus.com/images/dyb/new-zhuangshi.png")
    center no-repeat;
  background-size: 34px 34px;

  &:hover {
    background: url("http://yun-image.elab-plus.com/images/dyb/new-zhuangshi-hover.png")
      center no-repeat;
    background-size: 34px 34px;
  }

  &.active {
    background: url("http://yun-image.elab-plus.com/images/dyb/new-zhuangshi-active.png")
      center no-repeat;
    background-size: 34px 34px;
  }
}

.page-create-lunbo {
  width: 34px;
  height: 34px;
  background: url("http://yun-image.elab-plus.com/images/dyb/new-lunbo.png")
    center no-repeat;
  background-size: 34px 34px;

  &:hover {
    background: url("http://yun-image.elab-plus.com/images/dyb/new-lunbo-hover.png")
      center no-repeat;
    background-size: 34px 34px;
  }

  &.active {
    background: url("http://yun-image.elab-plus.com/images/dyb/new-lunbo-active.png")
      center no-repeat;
    background-size: 34px 34px;
  }
}

.page-create-jiaohuanniu {
  width: 34px;
  height: 34px;
  background: url("http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png")
    center no-repeat;
  background-size: 34px 34px;

  &:hover {
    background: url("http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu-hover.png")
      center no-repeat;
    background-size: 34px 34px;
  }

  &.active {
    background: url("http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu-active.png")
      center no-repeat;
    background-size: 34px 34px;
  }
}

.page-tag-btn-tip {
  width: 80px;
  height: 26px;
  position: absolute;
  left: -85px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  color: #fff;
  background: url(../../assets/images/page_tag_btn_tip.png) center no-repeat;
  background-size: cover;
}

.editor {
  background-color: rgb(237, 239, 247);
  position: relative;
  height: 100%;
  overflow: hidden;
  user-select: none;
}

.section {
  position: absolute;
  left: 0;
  right: 0;
  top: 120px;
  bottom: 0;
  overflow: hidden;
}

.overview {
  position: absolute;
  left: 0;
  width: 225px;
  height: 100%;
  z-index: 10;
}

.canvas {
  /*position: absolute !important;*/
  /*top: 50%;*/
  /*left: 50%;*/
  /*transform: translate(-75%, -50%);*/
  border: 2px solid #373f42;
  box-shadow: 0px 2px 30px 5px rgba(0, 0, 0, 0.2);
  box-sizing: content-box;
  margin-bottom: 200px;
}

.edit-area {
  position: absolute !important;
  height: 100%;
  width: auto;
  left: 270px;
  right: 367px;
  top: 0;
  overflow: scroll;
}
.container {
  height: 100%;
  width: 770px;
}

.control-panel {
  position: absolute;
  width: 324px;
  height: 100%;
  right: 0;
  top: 0;
  border-left: 1px solid #d6d6d6;
  background-color: white;

  z-index: 10;

  .funcs {
    position: absolute;
    left: -44px;
    top: 0;
    height: 100%;
    width: 44px;
    background-color: white;
    border-right: 2px solid #e2e4ee;
    box-shadow: 0px 1px 15px 1px rgba(0, 0, 0, 0.2);

    .func {
      color: white;
      background: transparent;
      cursor: pointer;
      margin-top: 20px;
      display: block;
      width: 50px;
      height: 50px;

      &:hover {
        color: #000;
      }

      &.active {
        border-right: 1px solid #ececec;
        background-color: #ececec;
        color: #000;
      }
    }
  }

  .wrapper {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .panel {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    background-color: white;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .panel-bg {
    .btn {
      float: left;
      width: 48%;
      margin-left: 1%;
      margin-right: 1%;
    }

    .bgs {
      float: left;
      width: 80px;
      height: 80px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      margin: 5px 5px;

      &:hover {
        border: 2px solid #18ccc0;
        cursor: pointer;
      }
    }
  }

  .panel-text {
    .btn {
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 2px solid transparent;

      &:hover {
        cursor: pointer;
        border-color: #4e5dff;
      }
    }
  }
}

/* 2018/07/23 所有前台自定义字体，需要放七牛云服务器上，暂时放这个样式文件里面 */
@font-face {
  font-family: "PenCrane";
  src: url("http://yun-image.elab-plus.com/PenCrane.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 手书体;
  src: url("http://yun-image.elab-plus.com/new/手书体.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 汉仪粗仿宋简;
  src: url("http://yun-image.elab-plus.com/汉仪粗仿宋简.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康黑体W3;
  src: url("http://yun-image.elab-plus.com/华康黑体W3.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康黑体W7;
  src: url("http://yun-image.elab-plus.com/华康黑体W7.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康黑体W9;
  src: url("http://yun-image.elab-plus.com/华康黑体W9.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康黑体W12;
  src: url("http://yun-image.elab-plus.com/华康黑体W12.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康楷体W5;
  src: url("http://yun-image.elab-plus.com/华康楷体W5.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康勘亭流W9;
  src: url("http://yun-image.elab-plus.com/华康勘亭流W9.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康瘦金体W3;
  src: url("http://yun-image.elab-plus.com/华康瘦金体W3.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康宋体W3;
  src: url("http://yun-image.elab-plus.com/华康宋体W3.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康宋体W7;
  src: url("http://yun-image.elab-plus.com/华康宋体W7.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康宋体W12;
  src: url("http://yun-image.elab-plus.com/华康宋体W12.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康魏碑W7;
  src: url("http://yun-image.elab-plus.com/华康魏碑W7.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康新综艺W7;
  src: url("http://yun-image.elab-plus.com/华康新综艺W7.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康雅宋体W9;
  src: url("http://yun-image.elab-plus.com/华康雅宋体W9.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康圆体W3;
  src: url("http://yun-image.elab-plus.com/华康圆体W3.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康圆体W5;
  src: url("http://yun-image.elab-plus.com/华康圆体W5.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康圆体W9;
  src: url("http://yun-image.elab-plus.com/华康圆体W9.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 庞门正道标题体增强版;
  src: url("http://yun-image.elab-plus.com/庞门正道标题体增强版.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 站酷高端黑修订版;
  src: url("http://yun-image.elab-plus.com/站酷高端黑修订版.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 站酷酷黑;
  src: url("http://yun-image.elab-plus.com/站酷酷黑.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
</style>