<template>
  <div>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1778" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <section style="border-color:transparent transparent rgb(0, 112, 192); border-style:solid; border-width:12px; float:none; font-size:medium; height:0px; margin:-12px auto 0px 90px; orphans:2; text-align:-webkit-auto;width:0px"></section>
        <p class="pbrush" style="margin-top: -1px; margin-bottom: 0px;orphans: 2; widows: 2; min-height: 30px; visibility: visible; height: 30px; line-height: 30px; color: rgb(255, 255, 255); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; box-shadow: rgba(0, 0, 0, 0.14902) 1px 1px 3px; font-size: 15px; text-align: center; background-color: rgb(0, 112, 192);font-size:14px; font-weight:bold">点击标题下「蓝色微信名」可快速关注</p>
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1779" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <section style="border:none;border-style: none;margin: 5px 0 0;padding: 10px;background: none;">
          <section class="border" style="margin: -15px auto 0px 55px; float: none; width: 0px; height: 0px; border-left-width: 18px; border-left-style: solid; border-left-color: transparent; border-right-width: 0px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 27px; border-bottom-style: solid; border-bottom-color: rgb(255, 215, 110);"></section>
          <section class="color" style="margin-top: -1px; margin-bottom: 0px; min-height: 40px; visibility: visible; height: 40px; line-height: 40px; border-radius: 3px; text-align: center; color: rgb(255, 255, 255); background-color: rgb(255, 215, 110);">
            <span style="font-size:14px;color: #000;">↑点击上方
              <span style="color: #607fa6;">“xxx”</span>免费订阅</span>
          </section>
        </section>
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1780" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <section style="border:none;border-style: none;margin: 5px 0 0;padding: 10px;background: none;">
          <section class="border" style="margin: -15px auto 0px 100px; float: none; width: 0px; height: 0px; border-left-width: 4px; border-left-style: solid; border-left-color: transparent; border-right-width: 22px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 24px; border-bottom-style: solid; border-bottom-color: rgb(255, 92, 92);"></section>
          <section class="color" style="margin-top: -1px; border: 3px solid rgb(255, 92, 92); margin-bottom: 0px; min-height: 40px; visibility: visible; height: 40px; line-height: 37px; border-radius: 10px; text-align: center; background: none;">
            <span style="font-size:14px;color: #000;">点击上方
              <span style="color: #607fa6;">“xxx”</span>关注我们</span>
          </section>
        </section>
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1781" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <section style="border:none;border-style: none;margin: 5px 0 0;padding: 10px;background: none;">
          <section style="margin-top: -1px; margin-bottom: 0px; min-height: 36px; visibility: visible; height: 36px; line-height: 36px; border-radius: 10px; text-align: center; border: 2.1px solid rgb(255, 255, 255); box-shadow: rgb(205, 205, 205) 0px 3px 5px; background: rgb(0, 187, 255);">
            <span style="font-size:14px;color: #fff;">↑ 点击上方
              <span style="color: #607fa6;">“xxx”</span>关注我们</span>
          </section>
        </section>
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1782" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <section style="border:none;border-style: none;margin: 5px 0 0;padding: 10px;background: none;">
          <section style="margin-top: -1px; margin-bottom: 0px; min-height: 40px; visibility: visible; height: 40px; line-height: 40px; border-radius: 4px; text-align: center; box-shadow: rgb(213, 213, 213) 0px 3px 5px; background: rgb(0, 181, 16);">
            <span style="font-size:14px;color: #6e6d6d;">
              <span style="float: left;margin-left:35px;font-size: 24px;"></span>
              <span style="font-size: 14px; color: rgb(255, 255, 255);">
                <span style="color: rgb(255, 255, 255); float: left; margin-left: 35px; font-size: 24px;">↗</span>点击上方
                <span style="color: rgb(96, 127, 166);">“xxx”</span>关注我们</span>
            </span>
          </section>
        </section>
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1626" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_1.png" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1716" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_2.gif" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1595" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_3.gif" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1614" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_4.gif" style="max-width: 100%;" alt="微信文章排版" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1718" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_5.gif" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1617" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_6.gif" style="max-width: 100%;" alt="微信文章排版" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1627" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_7.gif" style="max-width: 100%;" alt="微信文章排版" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1620" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_8.gif" style="max-width: 100%;" alt="微信文章排版" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1610" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img style="max-width: 100%;" src="@static/assets/images/articleEditor/zving_editor_pic_6_9.gif" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1609" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_10.gif" style="max-width: 100%;" alt="微信文章排版" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1618" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_11.gif" style="max-width: 100%;" alt="微信文章排版" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1613" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_12.gif" style="max-width: 100%;" alt="微信文章排版" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1615" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_13.gif" style="max-width: 100%;" alt="微信文章排版" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1596" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img style="max-width:100%;" src="@static/assets/images/articleEditor/zving_editor_pic_6_14.gif" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1607" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img style="max-width: 100%;" src="@static/assets/images/articleEditor/zving_editor_pic_6_15.gif" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1608" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img style="max-width: 100%;" src="@static/assets/images/articleEditor/zving_editor_pic_6_16.gif" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1619" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img width="100%" src="@static/assets/images/articleEditor/zving_editor_pic_6_17.gif" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1621" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img style="max-width: 100%;" src="@static/assets/images/articleEditor/zving_editor_pic_6_18.gif" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1616" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img width="100%" src="@static/assets/images/articleEditor/zving_editor_pic_6_19.gif" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1622" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_20.gif" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1623" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img width="100%" src="@static/assets/images/articleEditor/zving_editor_pic_6_21.gif" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1624" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img width="100%" src="@static/assets/images/articleEditor/zving_editor_pic_6_22.gif" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1625" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img width="100%" src="@static/assets/images/articleEditor/zving_editor_pic_6_23.png" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1706" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_24.gif" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1712" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_25.png" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1713" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_26.gif" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1714" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_27.gif" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1715" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_28.png" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1717" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_29.png" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
    <li class="tmpl-list mix animated filter-5 copyright-none fadeInDown" data-cat="filter-5" data-id="1719" data-toggle="tooltip"
      data-placement="left" title="" data-original-title="点击可以插入此样式">
      <section class="pEditor">
        <img src="@static/assets/images/articleEditor/zving_editor_pic_6_30.gif" style="max-width: 100%;" />
      </section>
      <div class="hode-txt"></div>
      <div class="copyright-bg copyright-none"></div>
    </li>
  </div>
</template>

<script>
import common from '../articleEditorCommon.js'
export default {
  props: { themeColor: String },
  watch: {
    themeColor(color) {
      common.parseObject($('.filter-5 .pEditor'), color, 'rgb(255,255,255)')
    }
  }
}
</script>
