surveyMaker/src/views/h5editor/index.vue

<template>
  <div class="editor">
    <!-- 头部 -->
    <HeaderMain></HeaderMain>
    <HeaderEdit :title="title" :shareModel="shareModel" :goback="dialogSave" :save="save"
                @saveThemeSuccess="showPreView=true"/>
    <!-- 内容区域 -->
    <section class="section">
      <!-- 左侧图层 -->
      <Overview ref='overview' class="overview" :testcaseId="testcaseId" :resultCount="resultPageCount"
                :questions="questions"/>
      <!-- 编辑区域 -->
      <div class="container" id="h5editor">
        <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 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"/>
        </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"
               style="width: 16px; height: 16px; margin-right: 10px; cursor: pointer;" @click="closeUploadButton"></img>

        </div>
        <div style="display: flex;flex-direction: row; justify-content: center;margin-top:42px;margin-bottom:40px;">
          <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" @change="upload($event, false)">
            </label>
          </div>

          <div style="width:130px; display: flex;
          flex-direction: column; align-items: center;
          margin-left:70px;">
            <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" @change="upload($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,
                isChangeStatus: false,
                canSave:false,
            };
        },
        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,
                    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: {
            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)"
                });
                if (!hasSaveFlag) {
                    $(".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;
                        } 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,
                    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(() => {
                        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;
            },
            changeSelectedPicOrUnSelectedPic() {
                this.dialogVisible = true;
                this.isChangeStatus = true;
            },
            closeUploadButton() {
                this.buttonData = {};
                this.dialogVisible = false;
                this.selectedButtom = false;
                this.unSelectedButtom = false;
                this.isChangeStatus = 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;
                                    setTimeout(()=>{
                                        that.selectedButtom = true;
                                    },1);
                                } else {
                                    that.buttonData.backgroundUnselectedImg = res;
                                    that.unSelectedButtom = false;
                                    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
                }
                if (this.isChangeStatus) {
                    this.element.backgroundUnselectedImg = that.buttonData.backgroundUnselectedImg;
                    this.element.backgroundSelectedImg = that.buttonData.backgroundSelectedImg;
                    this.element.width = that.buttonData.width;
                    this.element.height = that.buttonData.height;
                } else {
                    that.$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.isChangeStatus = false;
                this.canSave = false;
            }
        },
        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;
  }

  .container {
    /*width: 800px;
    height: 860px;
    padding: 20px;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-75%, -50%);
    overflow-y: scroll;
    overflow-x: hidden;*/

    position: absolute !important;
    height: 100%;
    width: 770px;

    left: 56%;
    transform: translate(-55%, -94%);
    overflow: scroll;
    overflow-x: hidden;
  }

  .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>