surveyMaker/src/components/EditPanel.vue

<template>
  <div class="panel panel-edit" style="background:rgba(255,255,255,1)">
    <div class="panel-tab clearfix">
      <div class="tab" @click="function () { panelTabState = 0 }">
        <div v-show="panelState === 11 || panelState === 14" class="selected-tab"
          :class="{ active: panelTabState === 0 }">
          <img style="width:12px; height:15px; vertical-align: middle" src="../assets/images/tab-selected-icon.png"
            alt="">
          <span class="tab-text">文本</span>
        </div>
        <div v-show="panelState === 12 || panelState === 13" class="selected-tab"
          :class="{ active: panelTabState === 0 }">
          <img style="width:12px; height:15px; vertical-align: middle" src="../assets/images/tab-selected-icon.png"
            alt="">
          <span class="tab-text">元素</span>
        </div>
        <div v-show="panelState === 15" class="selected-tab" :class="{ active: panelTabState === 0 }">
          <img style="width:12px; height:15px; vertical-align: middle" src="../assets/images/tab-selected-icon.png"
            alt="">
          <span class="tab-text">按钮</span>
        </div>
      </div>
      <div class="tab" @click="function () { panelTabState = 1 }">
        <div class="selected-tab" :class="{ active: panelTabState === 1 }">
          <img style="width:14px; height:14px; vertical-align: middle" src="../assets/images/property-selected-icon.png"
            alt="">
          <span class="tab-text">属性动作</span>
        </div>
      </div>

    </div>
    <div v-show="panelTabState === 0">

      <div v-show="panelState === 11||panelState===15">

        <div
          style="vertical-align: middle;display: flex; flex-direction: row; padding: 12px 0; padding-left: 20px; border-bottom: #E2E4EE solid 1px;"
          v-show="panelState == 15">
          <div>
            <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
              'background-position': 'center',
              'background-size': 'contain'}"></div>
          </div>
          <div style="display:flex; flex-direction: column;margin-left: 16px;">
            <span style="font-size:14px;
            font-family:MicrosoftYaHei;
            margin-bottom: 4px;
            color:rgba(100,107,129,1);
            line-height:19px;">当前图片</span>
            <span style="font-size:14px;
            font-family:MicrosoftYaHei;
            color:rgba(100,107,129,1);
            margin-bottom: 16px;
            line-height:19px;">
              {{element.imgSrc|currentImageName}}
            </span>
            <div style="width:108px;
            height:28px;
            background:rgba(78,93,255,1);
            border-radius:14px;font-size:14px;
            font-family:MicrosoftYaHei;
            color:rgba(255,255,255,1);
            display: flex;
            justify-content: center;
            line-height:28px;">替换元素</div>
          </div>
        </div>
        <div style="vertical-align: middle;display: flex;flex-direction: column;border-bottom: #E2E4EE solid 1px">
          <div style="font-size: 12px; font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1);
            margin-left: 23px;
            margin-top: 12px;
            line-height:16px;letter-spacing: 0;text-align: left;float:left;padding-bottom: 6px;">
            文本内容</div>
          <textarea class="input" style="height:50px;border-radius: inherit; resize: none; padding: 6px 12px;font-size:13px;
          font-family:MicrosoftYaHei;
          color:rgba(100,107,129,1);
          box-sizing: border-box;
          margin-left: 18px;
          margin-right: 18px;
          line-height:17px; background:rgba(241,241,241,1);
          margin-bottom: 12px;
          border:1px solid rgba(227,227,227,1);" v-model="element.text" placeholder="请输入内容"></textarea>
        </div>
        <div style="vertical-align: middle;border-bottom: #E2E4EE solid 1px">
          <div style="font-size: 12px; font-family:MicrosoftYaHei;
          color:rgba(51,51,51,1);
          margin-left: 23px;
          margin-top: 11px;
          line-height:16px;letter-spacing: 0;text-align: left;padding-bottom: 6px;">字体</div>
          <el-select placeholder="请选择字体" v-model="element.fontFamily" clearable style="margin-left: 18px; width: calc(100% - 36px); margin-bottom: 12px;
            font-size: 12px;color:rgba(51,51,51,1);
            margin-right: 18px;">
            <el-option class="fontSelect" v-for="item in fontFamily" :label="item" :value="item"></el-option>
          </el-select>
        </div>
        <div
          style="vertical-align: middle;border-bottom: #E2E4EE solid 1px;display: flex;flex-direction: row;padding-top: 12px ;justify-content: space-between">
          <div style="margin-left: 20px">
            <div>
              <div style="font-size:12px;
              font-family:MicrosoftYaHei;
              color:rgba(51,51,51,1);
              line-height:16px;letter-spacing: 0;text-align: left;padding-bottom: 5px;">
                字号</div>
              <div style="font-size: 12px; color: #999999;letter-spacing: 0;text-align: left;padding-bottom: 5px;">
                <el-input-number :min="12" v-model="element.fontSize" style="width: 110px;" size='small'>
                </el-input-number>
              </div>
            </div>
            <div>
              <div style="font-size:12px;
              font-family:MicrosoftYaHei;
              color:rgba(51,51,51,1);
              line-height:16px;letter-spacing: 0;text-align: left;padding-bottom: 5px;">
                缩进</div>
              <div style="font-size: 14px; color: #999999;letter-spacing: 0;text-align: left;padding-bottom: 11px;">
                <el-input-number v-model="element.textIndent" :step="0.5" style="width: 110px;" size='small'>
                </el-input-number>
              </div>
            </div>
          </div>

          <div style="margin-right: 10px">
            <div>
              <div style="font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1);
            line-height:16px;letter-spacing: 0;text-align: left;padding-bottom: 5px;">
                行距</div>
              <div style="font-size: 12px; color: #999999;letter-spacing: 0;text-align: left;padding-bottom: 5px;">
                <el-input-number v-model="element.lineHeight" style="width: 110px;" size='small'></el-input-number>
              </div>
            </div>

            <div>
              <div style="font-size:12px;
              font-family:MicrosoftYaHei;
              color:rgba(51,51,51,1);
              line-height:16px;letter-spacing: 0;text-align: left;padding-bottom: 5px;">
                字距</div>
              <div style="font-size: 14px; color: #999999;letter-spacing: 0;text-align: left;padding-bottom: 11px;">
                <el-input-number v-model="element.letterSpacing" :step="0.1" style="width: 110px;" size='small'>
                </el-input-number>
              </div>
            </div>
          </div>
        </div>

        <div style="vertical-align: middle;border-bottom: #E2E4EE solid 1px;padding-bottom: 12px; padding-top: 11px;"
          >
          <div style="display: inline-flex; width:24%;text-align: left; margin-bottom: 10px;">
            <div style="font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1);
            margin-left: 20px;
            line-height:16px;letter-spacing: 0; word-break:keep-all;">
              文字对齐
            </div>
          </div>
          <div style="text-align: center">
            <div style="display: inline-flex; overflow: hidden;width: 30%; cursor: pointer;" title="左对齐"
              @click="element.textAlign = 'left'">
              <div
                :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','width':'100%', 'background': element.textAlign=='left'? 'white':''}">
                <img style="width:62px;height:24px;"
                  src="http://yun-image.elab-plus.com/images/dyb/icon_text_left.png" />
              </div>
            </div>
            <div style="display: inline-flex; overflow: hidden;width: 30%; cursor: pointer;" title="居中"
              @click="element.textAlign = 'center'">
              <div
                :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','width':'100%', 'background': element.textAlign=='center'? 'white':''}">
                <img style="width:62px;height:24px;"
                  src="http://yun-image.elab-plus.com/images/dyb/icon_text_centered.png" />
              </div>

            </div>
            <div style="display: inline-flex; overflow: hidden;width: 30%; cursor: pointer;"
              @click="element.textAlign = 'right'" title="右对齐">
              <div
                :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','width':'100%', 'background': element.textAlign=='right'? 'white':''}">
                <img style="width:62px;height:24px;"
                  src="http://yun-image.elab-plus.com/images/dyb/icon_text_right.png" />
              </div>

            </div>
          </div>
          <div style="margin-top: 3px;text-align: center" id="topCenterDown">
            <div style="display: inline-flex; overflow: hidden;width: 30%; cursor: pointer;" title="上对齐">
              <div
                :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','width':'100%', 'background': element.verticalAlign=='top'? 'white':''}"
                @click="element.verticalAlign = 'top';element.display = 'table-cell'">
                <img style="width:62px;height:24px;"
                  src="http://yun-image.elab-plus.com/images/dyb/icon_text_top.png" />
              </div>
            </div>
            <div style="display: inline-flex; overflow: hidden;width: 30%; cursor: pointer;" title="居中">
              <div
                :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','width':'100%', 'background': element.verticalAlign=='middle'? 'white':''}"
                @click="element.verticalAlign = 'middle';element.display = 'table-cell'">
                <img style="width:62px;height:24px;"
                  src="http://yun-image.elab-plus.com/images/dyb/icon_text_centered.png" />
              </div>

            </div>
            <div style="display: inline-flex; overflow: hidden;width: 30%; cursor: pointer;"
              @click="element.verticalAlign = 'bottom';element.display = 'table-cell'" title="下对齐">
              <div
                :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','width':'100%', 'background': element.verticalAlign=='bottom'? 'white':''}">
                <img style="width:62px;height:24px;"
                  src="http://yun-image.elab-plus.com/images/dyb/icon_text_bottom.png" />
              </div>

            </div>
          </div>

        </div>

        <div style="text-align: center;border-bottom: #E2E4EE solid 1px;padding-top: 12px;padding-bottom: 12px;"
          v-show="panelState!=15">
          <div style="width:100%; display: flex;flex-direction: row">
            <div
              style="display: inline-flex; overflow: hidden;cursor: pointer;width:50%;justify-content: left; margin-left: 20px;">
              <div style="font-size:12px;
              font-family:MicrosoftYaHei;
              color:rgba(51,51,51,1);
              display: flex;
              align-items: center;
              letter-spacing: 0; word-break:keep-all;">文字颜色</div>
              <div style="font-size: 14px;color: #999999;letter-spacing: 0; word-break:keep-all; margin-left: 5px;">
                <el-color-picker v-model="element.color" show-alpha style="width: 100%;" size='small'></el-color-picker>
              </div>
            </div>

            <div
              style="display: inline-flex; overflow: hidden;cursor: pointer;width:50%;justify-content: left; margin-left: 20px;">
              <div style="font-size:12px;
              font-family:MicrosoftYaHei;
              color:rgba(51,51,51,1);
              align-items: center;
              display: flex;
              letter-spacing: 0; word-break:keep-all;">底色填充</div>
              <div style="font-size: 14px;color: #999999;letter-spacing: 0; word-break:keep-all;margin-left: 5px;">
                <el-color-picker v-model="element.backgroundColor" show-alpha style="width: 100%" size='small'>
                </el-color-picker>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div style="margin-top: 1px;">
        <div style="width: 100%;display: inline-flex; align-items: center;border-bottom: #E2E4EE solid 1px;
           padding-top: 12px;padding-bottom: 12px;
        " v-show="panelState == 13">
          <div style="font-size:12px;
          font-family:MicrosoftYaHei;
          margin-left: 20px;
          margin-right: 10px;
          color:rgba(51,51,51,1);letter-spacing: 0; word-break:keep-all;line-height: 40px">轮播特效
          </div>
          <div style="font-size:12px;
          font-family:MicrosoftYaHei;
          color:rgba(51,51,51,1);letter-spacing: 0; word-break:keep-all;">
            <el-select v-model="element.swiperType" placeholder="请选择" size="mini">
              <el-option v-for="(item,index) in carouselTypes" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="text-align: left;border-bottom: #E2E4EE solid 1px; width: 100%;padding-left: 20px;"
          v-show="panelState != 13">
          <div style="display: inline-flex; margin-left: -6px" v-show="panelState == 11">
            <el-checkbox v-model="element.fontWeight" true-label="bold" false-label="normal">加粗</el-checkbox>
          </div>
          <div style="display: inline-flex" v-show="panelState == 11">
            <el-checkbox v-model="element.allTransparent" true-label="rgba(0,0,0,0)" false-label="">透明</el-checkbox>
          </div>
          <div style="display: inline-flex" v-show="panelState == 11">
            <el-checkbox v-model="element.verticalFont" true-label="vertical-rl" false-label="" @change="verticalRow">竖排
            </el-checkbox>
          </div>

          <div style="width: 100%;display: inline-flex; padding: 12px 0 ;border-bottom: #E2E4EE solid 1px; margin-left:-20px; padding-left: 20px;" v-show="panelState == 12">
            <div>
              <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
              'background-position': 'center',
              'background-size': 'contain'}"></div>
            </div>
            <div style="display:flex; flex-direction: column;margin-left: 16px;">
              <span style="font-size:14px;
              font-family:MicrosoftYaHei;
              margin-bottom: 4px;
              color:rgba(100,107,129,1);
              line-height:19px;">当前图片</span>
              <span style="font-size:14px;
              font-family:MicrosoftYaHei;
              color:rgba(100,107,129,1);
              margin-bottom: 16px;
              line-height:19px;">
                {{element.imgSrc|currentImageName}}
              </span>
              <div style="width:108px;
              height:28px;
              background:rgba(78,93,255,1);
              border-radius:14px;font-size:14px;
              font-family:MicrosoftYaHei;
              color:rgba(255,255,255,1);
              display: flex;
              justify-content: center;
              line-height:28px;">替换元素</div>
            </div>
          </div>

          <div style="display: inline-flex;margin-right: 10px;" v-show="panelState != 14 && panelState != 16">
            <el-checkbox v-model="element.elabEditable">可编辑</el-checkbox>
          </div>
          <div style="width: 70px;height:41px;line-height: 41px; display: inline-block;" v-show="panelState != 16">
            <div style="width:44px;
            height:24px;
            background:rgba(78,93,255,1);
            border-radius:12px;font-size:12px;
            font-family:MicrosoftYaHei;
            display: inline-block;
            text-align: center;
            justify-content: center;
            line-height: 24px;
            color:rgba(255,255,255,1);" @click="setGroup(element)">{{element.children.length>0?'解组':'组合'}}</div>
          </div>
          
        </div>
      </div>

      <div style="border-bottom: #E2E4EE solid 1px; width: 100%;padding-left: 20px; padding-bottom: 11px;"
       >
        <div>
          <div style="font-size:12px;
          font-family:MicrosoftYaHei;
          color:rgba(51,51,51,1);
          margin-top: 11px;
          line-height:16px;;letter-spacing: 0; word-break:keep-all;width:100%">
            元素设置
          </div>
        </div>

        <div style="display: flex; overflow: hidden; cursor: pointer; margin-top: 4px;">
          <div
            :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'left','width':'23%'}"
            @click="copyElement">
            <div style="width:44px;
          height:24px;
          background:rgba(78,93,255,1);
          border-radius:12px;font-size:12px;
          font-family:MicrosoftYaHei;
          display: inline-block;
          text-align: center;
          line-height: 24px;
          color:rgba(255,255,255,1);" @click="setGroup(element)">复制</div>
          </div>

          <div style="display: inline-flex; overflow: hidden; cursor: pointer; text-align: left;width: 23%">
            <div title="左对齐"
              :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%', 'background': element.left=='0'? 'white':''}"
              @click="element.left = '0';">
              <img style="width: 44px; height:24px;" src="http://yun-image.elab-plus.com/images/dyb/icon_left.png" />
            </div>

          </div>
          <div title="居中对齐" style="display: inline-flex; overflow: hidden;cursor: pointer;text-align: left;width: 23%"
            @click="element.left = 375-element.width/2;">
            <div
              :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%', 'background': element.left==375-element.width/2? 'white':''}">
              <img style="width: 44px; height:24px;" src="http://yun-image.elab-plus.com/images/dyb/icon_center.png" />
            </div>

          </div>
          <div title="右对齐" style="display: inline-flex;cursor: pointer;text-align: left;width: 23%"
            @click="element.left = 750-element.width;">
            <div
              :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%', 'background': element.left==750-element.width? 'white':''}">
              <img style="width: 44px; height:24px;" src="http://yun-image.elab-plus.com/images/dyb/icon_left.png" />
            </div>
          </div>
        </div>

      </div>

      <div class="item"></div>
      <div style="border-bottom: #E2E4EE solid 1px; padding-bottom: 11px;" v-show="panelState!=14">
        <div style="display:flex; flex-direction: row;margin-left: 18px;">
          <div  style="font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1);
            display: inline-block;
            line-height:38px;">
            透明度</div>
          <el-slider  v-model="element.opacity" show-input input-size="mini"
            style="width: 80%;margin-left: 10px;"></el-slider>
        </div>
        <div style="display:flex; flex-direction: row;margin-left: 18px;">
          <span style="font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1); display: inline-block;
                line-height:38px;
            letter-spacing: 0;">&nbsp&nbsp&nbsp旋转</span>
          <el-slider v-model="element.transform" show-input input-size="mini" :max="359"
            style="width: 80%;margin-left: 10px;">
          </el-slider>
        </div>
        <div v-show="panelState == 12||panelState == 15" style="display: flex; flex-direction: row;margin-left: 5px;">
          <div style="font-size:12px;
              font-family:MicrosoftYaHei;
              color:rgba(51,51,51,1);
              line-height:38px;
              letter-spacing: 0;">
            圆形比例</div>
          <el-slider v-model="element.circular" show-input input-size="mini" :max="100"
            style="width: 76.5%;margin-left: 10px;"></el-slider>
        </div>
      </div>

      <div v-show="panelState == 12 || panelState == 13||panelState == 15" style="border-bottom: #E2E4EE solid 1px;">
        <div
          style="vertical-align: middle;padding-top: 15px;border: 1px solid transparent; padding-left: 20px; padding-right: 20px;">
          <div style="font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1);
            line-height:16px;letter-spacing: 0;text-align: left;padding-bottom: 5px;float:left;">
            阴影颜色</div>
          <div style="font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1);
            line-height:16px;letter-spacing: 0;text-align: left;padding-bottom: 5px;float:right;margin-right: 30px;">
            阴影模糊大小</div>
        </div>
        <div
          style="vertical-align: middle;padding-top: 20px;border: 1px solid transparent;padding-left: 20px; padding-right: 20px;">
          <div style="font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1);letter-spacing: 0;text-align: left;padding-bottom: 5px;float:left;">
            <el-color-picker v-model="element.shadowColor" show-alpha size="mini"></el-color-picker>
          </div>
          <div
            style="font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1);letter-spacing: 0;text-align: left;padding-bottom: 5px;float:right;margin-left:10px">
            <el-input-number v-model="element.shadowVague" :value="0" style="width: 100px;" size='small'>
            </el-input-number>
          </div>
        </div>

        <div class="item"> </div>
        <div style="font-size:12px;
        font-family:MicrosoftYaHei;
        color:rgba(51,51,51,1);letter-spacing: 0;text-align: left;float:left;padding-bottom: 5px; padding-left: 20px;">
          阴影偏移距离</div>
        <div
          style="vertical-align: middle;padding-top: 20px;border: 1px solid transparent;padding-left: 20px; padding-right: 20px;">
          <div style="font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1);letter-spacing: 0;text-align: left;padding-bottom: 5px;float:left;">
            X <el-input-number v-model="element.shadowX" controls-position="right"
              style="width: 100px;margin-left: 5px;" size='small'></el-input-number>
          </div>
          <div
            style="font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1);letter-spacing: 0;text-align: right;padding-bottom: 5px;float:right;margin-left:10px">
            Y <el-input-number v-model="element.shadowY" controls-position="right"
              style="width: 100px;margin-left: 5px;" size='small'></el-input-number>
          </div>
        </div>
        <div class="item"> </div>
      </div>
      <div style="border-bottom: #E2E4EE solid 1px; ">
        <div style="font-size:12px;
          font-family:MicrosoftYaHei;
          color:rgba(51,51,51,1);
          margin-left: 20px;
          margin-top: 11px;
          line-height:16px;letter-spacing: 0;text-align: left;padding-bottom: 5px;">位置
        </div>
        <div
          style="vertical-align: middle; display: flex;flex-direction: row;justify-content: space-between;margin-bottom: 5px;">
          <div style="font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1);
            margin-left: 20px;
            line-height:16px;letter-spacing: 0;">
            X <el-input-number v-model="element.left" :disabled="panelState==14" controls-position="right" size='small'
              style="width: 100px;margin-left: 8px;"></el-input-number>
          </div>
          <div style="font-size:12px;
              font-family:MicrosoftYaHei;
              color:rgba(51,51,51,1);
              margin-right: 20px;
              line-height:16px;letter-spacing: 0;padding-bottom: 5px;">
            Y <el-input-number v-model="element.top" controls-position="right" style="width: 100px;margin-left: 8px;"
              size='small'>
            </el-input-number>
          </div>
        </div>
        <div
          style="vertical-align: middle;vertical-align: middle; display: flex;flex-direction: row;justify-content: space-between;margin-bottom: 11px;">
          <div style="font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(51,51,51,1);
            margin-left: 20px;
            line-height:16px;letter-spacing: 0;">
            高<el-input-number v-model="element.height" controls-position="right" style="width: 100px;margin-left: 7px;"
              size='small'>
            </el-input-number>

          </div>
          <div style="font-size:12px;
              font-family:MicrosoftYaHei;
              color:rgba(51,51,51,1);
              margin-right: 20px;
              line-height:16px;letter-spacing: 0;">
            宽<el-input-number v-model="element.width" :disabled="panelState==14" controls-position="right"
              style="width: 100px;margin-left: 7px;" size='small'></el-input-number>
          </div>
        </div>
        <div style="margin-bottom: 12px;">
          <span
            style="font-size:12px;font-family:MicrosoftYaHei;color:rgba(51,51,51,1);line-height:16px; margin-left: 20px;">相对固定</span>
          <el-switch v-model="value" active-color="#4E5DFF" inactive-color="#D7E2FF">
          </el-switch>
        </div>
      </div>

      <div style="width: 100%; margin-bottom: 20px">
        <div style="font-size:12px;
          font-family:MicrosoftYaHei;
          color:rgba(51,51,51,1);
          margin-top: 11px;
          line-height:16px;text-align: left;margin-left: 20px" v-show="panelState!=14">跳转链接</div>
        <input v-show="panelState!=14" v-model="element.href"
          style="background:rgba(241,241,241,1);
          border:1px solid rgba(78,93,255,1);width:calc(100% - 40px);height:30px; margin-top: 7px; margin-left: 20px;"></input>
      </div>
    </div>

    <div v-if="panelTabState === 1">
      <div style="width: 100%;border-bottom: #E2E4EE solid 1px; padding-bottom: 12px; padding-top: 12px;">
        <div style="display:flex; flex-direction: row;width: 100%;justify-content: space-between;align-items: center">
          <span style="font-size:12px;
          font-family:MicrosoftYaHei;
          margin-left: 20px;
          color:rgba(51,51,51,1);">
            速度</span>
          <el-slider v-model="element.duration" :step="0.1" :min="0" :max="10" show-input input-size="mini"
            style="width:80%;margin-right: 10px"></el-slider>
        </div>

        <div style="display:flex; flex-direction: row;width: 100%;justify-content: space-between;align-items: center">
          <span style="font-size:12px;
          font-family:MicrosoftYaHei;
          margin-left: 20px;
          color:rgba(51,51,51,1)">延迟</span>
          <el-slider v-model="element.delay" :step="0.1" :min="0" :max="10" show-input input-size="mini"
            style="width:80%;margin-right: 10px"></el-slider>
        </div>
      </div>


      <div
        style="vertical-align: middle; width: 100%; padding-top: 12px; padding-bottom: 12px;border-bottom: #E2E4EE solid 1px; display: flex; flex-direction: row;align-items: center">
        <div style="font-size:12px;
        font-family:MicrosoftYaHei;
        margin-left: 20px;
        color:rgba(51,51,51,1);
        line-height:16px;letter-spacing: 0;">是否循环</div>
        <el-switch v-model="element.loop" style="margin-left: 6px;" active-color="#4E5DFF" inactive-color="#D7E2FF">
        </el-switch>
      </div>

      <div style="width: 100%;">
        <div style="font-size:12px;
        font-family:MicrosoftYaHei;
        margin-left: 20px;
        margin-top: 12px;
        color:rgba(51,51,51,1);">选择动画</div>
      </div>
      <div style="margin-top: 10px; ">
        <div v-show="panelState === 11" style="width: 100%; padding-left:20px;padding-right: 8px;">
          <div
            style="display: inline-flex;margin-right: 12px;margin-bottom: 10px; overflow: hidden;text-align: center; cursor: pointer"
            v-for="(font,index) in animateFontList">
            <div v-model="element.animatedFont" @click="checkAnimationFont(font)" :title="font.name" :type="font.type"
              :style="{'background':'rgba(238,242,250,1)',
                'border-radius':'12px',
                'border':'1px solid rgba(205,209,221,1)','font-size': '12px',color: element.animatedFont==font.id? 'white':'#999999','letter-spacing': 0,'word-break':'keep-all',padding: '4px 13px',
               'background': element.animatedFont==font.id? '#4E5DFF':'rgba(238,242,250,1)',
               'border': element.animatedFont==font.id? '1px solid #4E5DFF':'1px solid rgba(205,209,221,1)',
               }" :hxFont="element.animatedFont" :hxid="font.id">{{font.name}}</div>
          </div>
        </div>
        <div style="width: 100%; padding-left:20px;padding-right: 8px;">
          <div
            style="display: inline-flex;margin-right: 12px;margin-bottom: 10px; overflow: hidden;text-align: center; cursor: pointer"
            v-for="(item,index) in animateList">
            <div v-model="element.animatedName" @click="checkAnimation(item)" :title="item.name" :type="item.type"
              :style="{'background':'rgba(238,242,250,1)',
          'border-radius':'12px',
          'border':'1px solid rgba(205,209,221,1)','font-size': '12px',color: element.animatedName==item.id? 'white':'#999999','letter-spacing': 0,'word-break':'keep-all',padding: '4px 13px',
               'background': element.animatedName==item.id? '#4E5DFF':'rgba(238,242,250,1)',
               'border': element.animatedName==item.id? '1px solid #4E5DFF':'1px solid rgba(205,209,221,1)'
               }">{{item.name}}</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .panel-edit {
    z-index: 1;

    .item {
      padding: 5px 0;
      clear: both;

      .content {
        margin-left: 70px;
      }

      div {
        display: flex;
        justify-content: flex-end;
      }
    }

    label {
      text-align: right;
      vertical-align: middle;
      font-size: 14px;
      color: #48576a;
      line-height: 1;
      width: 70px;
      float: left;
      padding: 11px 12px 11px 0;
    }
  }

  .panel-tab {
    height: 50px;
    line-height: 50px;
    background: rgba(230, 237, 255, 1);


    .tab {
      float: left;
      width: 50%;
      line-height: 45px;
      text-align: center;
      cursor: pointer;


      .selected-tab {
        width: 70%;
        margin: 0 auto;
        height: 45px;
        line-height: 45px;
        background: transparent;
        border-radius: 8px 8px 0px 0px;
        margin-top: 5px;

        &.active {
          background: rgba(255, 255, 255, 1);
        }

        .tab-text {
          font-size: 14px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
        }
      }

    }
  }
</style>

<script>


  var positionFlag = false
  export default {
    props: {
      element: {
        type: Object
      },
      panelState: {
        type: Number
      }
    },
    data() {
      return {
        panelTabState: 0,
        animateList: [
          { id: 'fadeIn', name: '淡入', type: 0 },
          { id: 'zoomIn', name: '放大', type: 0 },
          { id: 'bounceInDown', name: '向下飞入', type: 0 },
          { id: 'bounceInLeft', name: '向右飞入', type: 0 },
          { id: 'bounceInRight', name: '向左飞入', type: 0 },
          { id: 'bounceInUp', name: '向上飞入', type: 0 },
          { id: 'bounce', name: '弹跳', type: 0 },
          { id: 'flash', name: '一闪而过', type: 0 },
          { id: 'pulse', name: '脉动', type: 0 },
          { id: 'rubberBand', name: '橡皮筋弹跳', type: 0 },
          { id: 'shake', name: '发抖', type: 0 },
          { id: 'swing', name: '摇摆', type: 0 },
          { id: 'tada', name: '颤抖', type: 0 },
          { id: 'wobble', name: '摇摆不定', type: 0 },
          { id: 'jello', name: '果冻', type: 0 },
          { id: 'bounceIn', name: '上下晃动', type: 0 },

          { id: 'bounceOut', name: '弹性放大', type: 0 },
          // {id: 'bounceOutDown', name: '向下弹跳', type:0},
          // {id: 'bounceOutLeft', name: '向左弹跳', type:0},
          // {id: 'bounceOutRight', name: '向右弹跳', type:0},
          // {id: 'bounceOutUp', name: '向上弹跳', type:0},
          { id: 'fadeInDown', name: '向下淡入', type: 0 },
          { id: 'fadeInDownBig', name: '向下渐变淡入', type: 0 },
          { id: 'fadeInLeft', name: '向左淡入', type: 0 },
          { id: 'fadeInLeftBig', name: '向左渐变淡入', type: 0 },
          { id: 'fadeInRight', name: '向右淡入', type: 0 },
          { id: 'fadeInRightBig', name: '向右渐变淡入', type: 0 },
          { id: 'fadeInUp', name: '向上淡入', type: 0 },
          { id: 'fadeInUpBig', name: '向上渐变淡入', type: 0 },
          // {id: 'fadeOut', name: '淡出', type:0},
          // {id: 'fadeOutDown', name: '向下淡出', type:0},
          // {id: 'fadeOutDownBig', name: '向下渐变淡出', type:0},
          // {id: 'fadeOutLeft', name: '向左淡出', type:0},
          // {id: 'fadeOutLeftBig', name: '向左渐变淡出', type:0},
          // {id: 'fadeOutRight', name: '向右淡出', type:0},
          // {id: 'fadeOutRightBig', name: '向右渐变淡出', type:0},
          // {id: 'fadeOutUp', name: '向上淡出', type:0},
          // {id: 'fadeOutUpBig', name: '向上渐变淡出', type:0},
          { id: 'flip', name: '快速翻动', type: 0 },
          { id: 'flipInX', name: '上下翻滚', type: 0 },
          { id: 'flipInY', name: '左右翻滚', type: 0 },
          // {id: 'flipOutX', name: 'X轴翻出', type:0},
          // {id: 'flipOutY', name: 'Y轴翻出', type:0},
          { id: 'lightSpeedIn', name: '飘入', type: 0 },
          // {id: 'lightSpeedOut', name: '飘出', type:0},
          { id: 'rotateIn', name: '翻转进入', type: 0 },
          { id: 'rotateInDownLeft', name: '左下翻转进入', type: 0 },
          { id: 'rotateInDownRight', name: '右下翻转进入', type: 0 },
          { id: 'rotateInUpLeft', name: '左上下翻转进入', type: 0 },
          { id: 'rotateInUpRight', name: '右上翻转进入', type: 0 },
          // {id: 'rotateOut', name: '翻转退出', type:0},
          // {id: 'rotateOutDownLeft', name: '左下翻转退出', type:0},
          // {id: 'rotateOutDownRight', name: '右下翻转退出', type:0},
          // {id: 'rotateOutUpLeft', name: '左上下翻转退出', type:0},
          // {id: 'rotateOutUpRight', name: '右上翻转退出', type:0},
          // {id: 'slideInUp', name: '向上滑入', type:0},
          // {id: 'slideInDown', name: '向下滑入', type:0},
          // {id: 'slideInLeft', name: '向左滑入', type:0},
          // {id: 'slideInRight', name: '向右滑入', type:0},
          // {id: 'slideOutUp', name: '向上滑出', type:0},
          // {id: 'slideOutDown', name: '向下滑出', type:0},
          // {id: 'slideOutLeft', name: '向左滑出', type:0},
          // {id: 'slideOutRight', name: '向右滑出', type:0},
          // {id: 'zoomInDown', name: '向下渐大进入', type:0},
          // {id: 'zoomInLeft', name: '向左渐大进入', type:0},
          // {id: 'zoomInRight', name: '向右渐大进入', type:0},
          { id: 'zoomInUp', name: '向上渐大进入', type: 0 },
          // {id: 'zoomOut', name: '渐小淡出', type:0},
          // {id: 'zoomOutDown', name: '向下渐小淡出', type:0},
          // {id: 'zoomOutLeft', name: '向左渐小淡出', type:0},
          // {id: 'zoomOutRight', name: '向右渐小淡出', type:0},
          // {id: 'zoomOutUp', name: '向上渐小淡出', type:0},
          // {id: 'hinge', name: '随风飘摇', type:0},
          { id: 'rollIn', name: '滚入', type: 0 },
          // {id: 'rollOut', name: '滚出', type:0}
          // {id: 'particleScroll', name: '粒子滚动', type:1},
          // {id: 'shakesScroll', name: '抖动', type:2},
        ],
        fontFamily: ['默认字体', '思源黑体细', '思源黑体常规', '思源黑体中', '思源黑体粗', '思源宋体细', '思源宋体常规', '思源宋体中', '思源宋体粗', '思源宋体极粗',
          '手写体', '站酷高端黑', '站酷酷黑', '站酷文艺体', '酷站小黑LOGO体', 'ZCOOL_Italic', '旁门正道标题体', '杨任东竹石体细', '杨任东竹石体常规',
          '杨任东竹石体粗'],

        carouselTypes: [
          {
            value: 'mtswiper',
            label: '默认'
          }, {
            value: 'FourBoxesSlideshow',
            label: 'four boxes slide show'
          }, {
            value: 'transition-opacity',
            label: 'opacity fade'
          }, {
            value: 'transition-left',
            label: 'left slide'
          }, {
            value: 'transition-top',
            label: 'top slide'
          }, {
            value: 'transition-dezoom',
            label: 'de-zoom'
          }, {
            value: 'fragment',
            label: '碎片'
          }
        ],

        picTypes: [
          {
            value: '',
            label: "请选择"
          },
          {
            value: 'WaterRipple',
            label: "水波"
          },
          // {
          //   value:'GlassBeads',
          //   label:"水珠"
          // }
        ],
        animateFontList: [
          // {id: 'highLightDelimit', name: '高光', type:0},
          // {id: 'wordByWord', name: '摇摆', type:1},
          // {id: 'reverse', name: '反向', type:2},
          // {id: 'wordByWord1', name: '逐字', type:3},
          // {id: 'wordByWord2', name: '逐字', type:4},
          // {id: 'wordByWord3', name: '逐字', type:5},
          { id: "flyInto", name: '逐字飞入' },
          { id: "bounce", name: '文字飘落' },
          { id: "bounceInUp", name: '向上弹入' },
          { id: "bounceInDown", name: '向下弹入' },
          { id: "cross", name: '交叉弹入' },
          { id: "flipInY", name: '转入' },
          { id: "hinge1", name: '摇摆' },
          { id: "colors", name: '彩色文字' },
          { id: "marquee", name: '跑马灯' },
          { id: "typer", name: '打字机' },
          { id: "random", name: '随机' },
        ],
        otime: null,
        loopNum: -300,
        textValue: ''
      }
    },
    methods: {
      copyElement() {
        if (this.element.type == 'audio') {
          return false;
        }
        var ele = {};
        if (this.element.children) {//如果有子元素需要深拷贝
          var children = []
          for (var i in this.element) {
            if (i == 'children') {
              this.element[i].forEach(function (child, index) {
                var obj = {}
                for (var k in child) {
                  obj[k] = child[k]
                }
                children.push(obj)
              })
            } else {
              ele[i] = this.element[i];
            }
          }
        } else {
          ele[i] = this.element[i];
        }
        ele.children = children || [];
        ele.nodeId = 'Id' + Math.random();
        if (this.element.children) {
          ele.children.forEach(function (child) {
            child.nodeId = 'Id' + Math.random();
          })
        }
        ele.top = ele.top + 20
        ele.left = ele.left + 20
        this.$store.dispatch('addElement', ele)
      },
      checkAnimation(item) {
        this.element.animatedFont = '';
        if (this.element.animatedName == item.id) {
          this.element.animatedName = '';
          this.element.animatedType = '';
        } else {
          this.element.animatedName = item.id;
          this.element.animatedType = item.type;
        }
      },
      isEnabled(flag) {
        this.element.animatedEnabled = flag;
        if (!this.element.animatedEnabled) {
          this.element.animatedName = '';
        }
        flag = flag == true ? false : true;
      },
      verticalRow() {
        var topCenterDown = document.getElementById('topCenterDown')
        if (this.element.verticalFont != '') {
          topCenterDown.style.display = 'none'
          this.element.verticalAlign = ''
          this.element.display = ''
        } else {
          this.element.verticalAlign = ''
          topCenterDown.style.display = 'block'
          this.element.display = ''
        }
      },
      checkAnimationFont(item) {
        this.element.animatedName = '';
        this.element.animatedType = '';
        if (this.element.animatedFont != item.id) {
          this.element.animatedFont = item.id;
          // this.textValue = this.element.text
          // var that = this
          // var obj = $("[highlightdelimitid='"+that.element.nodeId+"']")
          // if (item.type == 1) {
          //   obj.animatext({
          //     speed: 1500,
          //     mode: "words",
          //     effect: 'swing',
          //     infinite: true,
          //     timeToRelaunch:150,
          //     onBegin:function() {
          //       // obj.html(that.textValue)
          //     },
          //   });
          // } else if (item.type == 2) {
          //   obj.animatext({
          //     speed: 1500,
          //     effect: 'bounceIn',
          //     reverse: true,
          //     infinite: false,
          //     onBegin:function() {
          //       obj.html(that.textValue)
          //     },
          //     onSuccess:function() {
          //       obj.html(that.textValue)
          //     }
          //   });
          // }
        } else {
          this.element.animatedFont = "";
          // this.textValue = ""
        }

      },
      setGroup(element) {
        var that = this;
        let messageTag = 0;
        var p_ele = null
        if (element.type == 'frame' && element.children.length > 0) {
          element.children.forEach(function (item) {
            item.left = item.left + element.left;
            item.top = item.top + element.top;
            that.$store.dispatch('addElement', item)
          })
          element.children.splice(0, element.children.length);
          messageTag = 1//解组成功
        } else if (element.type == 'frame') {
          let item_ = element;
          for (var k = 0; k < that.elements.length; k++) {
            var item = that.elements[k], index = k;
            let left = item.left;
            let top = item.top;
            let width = item.width;
            let height = item.type == 'text' ? window.getComputedStyle(document.getElementById(item.nodeId)).height.replace("px", '') / 1 : item.height;
            let zindex = item.zindex;
            if ((left + width) > item_.left && left < (item_.left + item_.width) && (top + height - 2) > item_.top && top < (item_.top + item_.height - 2) && item.type != 'frame' && item.type != 'audio') {
              // if (zindex >= item_.zindex && (left + width) > item_.left && left < (item_.left + item_.width) && (top + height) > item_.top && top < (item_.top + item_.height) && item.type != 'frame') {
              that.elements.splice(index, 1)
              k--
              item.left = item.left - item_.left;
              item.top = item.top - item_.top;
              item_.children.push(item)
              p_ele = item_
              messageTag = 2//组合成功
            }
          }
        } else {
          let left = element.left;
          let top = element.top;
          let width = element.width;
          let height = element.type == 'text' ? window.getComputedStyle(document.getElementById(element.nodeId)).height.replace("px", '') / 1 : element.height;
          let zindex = element.zindex;
          that.elements.forEach((item) => {
            // if(item.type=='frame'&&item.zindex<zindex){
            if (item.type == 'frame') {
              let groupL = item.left + item.width;
              let groupT = item.top + item.height;
              let item_ = item;
              // if(left>item.left&&left<groupL&&top>item.top&&top<groupT){
              if ((left + width) > item.left && left < (item.left + item.width) && (top + height - 2) > item.top && top < (item.top + item.height + 2)) {
                for (var i = 0; i < that.elements.length; i++) {
                  var item = that.elements[i];
                  var index = i;
                  let left = item.left;
                  let top = item.top;
                  let width = item.width;
                  let height = item.type == 'text' ? window.getComputedStyle(document.getElementById(item.nodeId)).height.replace("px", '') / 1 : item.height;
                  let zindex = item.zindex;
                  if ((left + width) > item_.left && left < (item_.left + item_.width) && (top + height - 2) > item_.top && top < (item_.top + item_.height - 2) && item.type != 'frame' && item.type != 'audio') {
                    // if(zindex>=item_.zindex&&(left+width)>item_.left&&left<(item_.left+item_.width)&&(top+height)>item_.top&&top<(item_.top+item_.height)&&item.type!='frame'){
                    that.elements.splice(index, 1)
                    i--
                    item.left = item.left - item_.left;
                    item.top = item.top - item_.top;
                    item_.children.push(item)
                    p_ele = item_
                    messageTag = 2//组合成功
                  }
                }
              }
            }
          })
        }
        if (messageTag == 1) {
          that.$message.success("解组成功！")
        } else if (messageTag == 2) {
          that.$message.success("组合成功！")
          this.$store.dispatch('setEditorElement', p_ele)
        } else {
          that.$message.error("组合失败！")
        }
      },
    },
    computed: {
      elements() {
        return this.$store.state.editor.editorPage.elements
      },
    },
    filters: {
      currentImageName(imageName) {
        console.log(imageName);
        return imageName.split("-").pop()
      }
    }
  }


</script>
<style>
  .fontSelect:nth-child(1) span {
    color: #000;
  }

  .fontSelect:nth-child(1) {
    text-align: center;
  }

  .fontSelect span {
    color: transparent;
  }

  .fontSelect:nth-child(2) {
    background: url("../../static/font/noto_light.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(3) {
    background: url("../../static/font/noto_regular.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(4) {
    background: url("../../static/font/noto_medium.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(5) {
    background: url("../../static/font/noto_bold.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(6) {
    background: url("../../static/font/source_light.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(7) {
    background: url("../../static/font/source_regular.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(8) {
    background: url("../../static/font/source_medium.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(9) {
    background: url("../../static/font/source_bold.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(10) {
    background: url("../../static/font/source_heavy.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(11) {
    background: url("../../static/font/shouxieti.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(12) {
    background: url("../../static/font/zkgdh.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(13) {
    background: url("../../static/font/zkkh.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(14) {
    background: url("../../static/font/wenyi.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(15) {
    background: url("../../static/font/logoti.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(16) {
    background: url("../../static/font/ZCOOL_Italic.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(17) {
    background: url("../../static/font/pmzd.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(18) {
    background: url("../../static/font/yzd_light.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(19) {
    background: url("../../static/font/yzd_regular.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }

  .fontSelect:nth-child(20) {
    background: url("../../static/font/yzd_heavy.png") no-repeat center center/50% 50%;
    -moz-background-origin: content-box;
  }
</style>