<template>
  <div>
    <div class="menu_setting_area">
      <div>
        <span class="btn btn_input btn_primary" style="margin-bottom: 5px">
          <button @click="open3">编辑新用户跳转链接</button>
        </span>
      </div>
      <div class="menu_preview_area">
        <div class="mobile_menu_preview">
          <div class="mobile_hd tc">
            唱唱启蒙英语
          </div>
          <div class="mobile_bd">
            <ul v-if="!showOrder" class="pre_menu_list grid_line ui-sortable ui-sortable-disabled" style="margin-top:0; margin-bottom: 0">
              <li v-for="(item, index) in buttonList" class="jsMenu pre_menu_item grid_item jslevel1 ui-sortable ui-sortable-disabled" :class="(selectedIndex === index && selectedChildIndex === -1) ? 'current selected' : ''">
                <a href="javascript:void(0);" class="pre_menu_link" draggable="false" @click="clickMenu(index, item)">
                  <i class="icon_menu_dot js_icon_menu_dot dn"></i>
                  <i class="icon20_common sort_gray"></i>
                  <span class="js_l1Title">{{item.name}}</span>
                </a>
                <div class="sub_pre_menu_box js_l2TitleBox" style="display: block;" :class="selectedIndex === index ? '' : 'hideMenu'">
                  <ul class="sub_pre_menu_list">
                    <li class="jslevel2" v-for="(child, childIndex) in item.sub_button" :class="(selectedIndex === index && selectedChildIndex === childIndex) ? 'current selected' : ''">
                      <a href="javascript:void(0);" class="jsSubView" draggable="false" @click="clickSubMenu(childIndex, child)">
                      <span class="sub_pre_menu_inner js_sub_pre_menu_inner">
                        <i class="icon20_common sort_gray"></i>
                        <span class="js_l2Title">{{child.name}}</span>
                      </span>
                      </a>
                    </li>
                    <li class="js_addMenuBox" @click="addSubMenu" v-if="!$store.state.readonly">
                      <a href="javascript:void(0);" class="jsSubView js_addL2Btn" title="最多添加5个子菜单" draggable="false" v-if="item.sub_button.length < 6">
                      <span class="sub_pre_menu_inner js_sub_pre_menu_inner">
                        <i class="icon14_menu_add"></i>
                      </span>
                      </a>
                    </li>
                  </ul>
                  <i class="arrow arrow_out"></i>
                  <i class="arrow arrow_in"></i>
                </div>
              </li>
              <template v-if="!$store.state.readonly">
                <li class="js_addMenuBox pre_menu_item grid_item no_extra" @click="onAddMenu" v-if="buttonList.length < 3">
                  <a href="javascript:void(0);" class="pre_menu_link js_addL1Btn" title="最多添加3个一级菜单" draggable="false">
                    <i class="icon14_menu_add"></i>
                  </a>
                </li>
              </template>
            </ul>
            <ul v-else class="pre_menu_list grid_line ui-sortable ui-sortable-disabled" style="margin-top:0; margin-bottom: 0">
              <draggable v-model="buttonList">
                <transition-group>
                  <li v-for="(item, index) in buttonList" :key="index" class="jsMenu pre_menu_item grid_item jslevel1 ui-sortable ui-sortable-disabled">
                    <a href="javascript:void(0);" class="pre_menu_link" draggable="false" @click="clickMenu(index, item)">
                      <i class="icon_menu_dot js_icon_menu_dot dn"></i>
                      <i class="icon20_common sort_gray"></i>
                      <span class="js_l1Title">{{item.name}}</span>
                    </a>
                    <div class="sub_pre_menu_box js_l2TitleBox" :style="item.sub_button.length == 0 ? 'display: none' : ''" :class="selectedIndex === index ? '' : 'hideMenu'">
                      <ul class="sub_pre_menu_list">
                        <draggable v-model="item.sub_button">
                          <transition-group>
                            <li class="jslevel2" v-for="(child, childIndex) in item.sub_button" :key="childIndex" :class="(selectedIndex === index && selectedChildIndex === childIndex) ? 'current selected' : ''">
                              <a href="javascript:void(0);" class="jsSubView" draggable="false">
                          <span class="sub_pre_menu_inner js_sub_pre_menu_inner">
                            <i class="icon20_common sort_gray"></i>
                            <span class="js_l2Title">{{child.name}}</span>
                          </span>
                              </a>
                            </li>
                          </transition-group>
                        </draggable>
                      </ul>
                      <i class="arrow arrow_out"></i>
                      <i class="arrow arrow_in"></i>
                    </div>
                  </li>
                </transition-group>
              </draggable>
            </ul>
          </div>
        </div>
      </div>
      <div class="menu_form_area">
        <div id="js_none" class="menu_initial_tips tips_global" style="display: none;">
          点击左侧菜单进行编辑操作
        </div>
        <div id="js_rightBox" class="portable_editor to_left" style="display: block;">
          <div class="editor_inner" v-if="!showOrder">
            <div class="menu_form_hd flex-bt">
              <h4 class="global_info"> {{getName()}} </h4>
              <div class="global_extra" v-if="!$store.state.readonly">
                <a v-if="selectedChildIndex === -1" href="javascript:void(0);" @click="delMenu">删除菜单</a>
                <a v-else href="javascript:void(0);" @click="delSubMenu">删除子菜单</a>
              </div>
            </div>
            <div class="menu_form_bd" id="view">
              <div id="js_innerNone" style="display: block;" class="msg_sender_tips tips_global" v-if="buttonList[selectedIndex] && buttonList[selectedIndex].sub_button.length > 0">
                已添加子菜单，仅可设置菜单名称。
              </div>
              <div class="frm_control_group js_setNameBox">
                <label for="" class="frm_label"> <strong class="title js_menuTitle">{{selectedChildIndex === -1 ? '菜单名称' : '子菜单名称'}}</strong> </label>
                <div class="frm_controls">
                <span class="frm_input_box with_counter counter_in append">
                  <input v-if="selectedChildIndex === -1 && buttonList[selectedIndex]" v-model="buttonList[selectedIndex].name" type="text" class="frm_input js_menu_name" @input="onInput"/>
                  <input v-else-if="selectedChildIndex > -1 && buttonList[selectedIndex].sub_button[selectedChildIndex]" v-model="buttonList[selectedIndex].sub_button[selectedChildIndex].name" type="text" class="frm_input js_menu_name" @input="onInput"/>
                </span>
                <p class="frm_msg fail js_titleEorTips dn" v-if="showErrorTips">字数超过上限</p>
                <p class="frm_msg fail js_titlenoTips dn" style="display: none;">请输入菜单名称</p>
                <p class="frm_tips js_titleNolTips">字数不超过8个汉字或16个字母</p>
                </div>
              </div>
              <div class="frm_control_group" :class="(selectedChildIndex == -1 &&  buttonList[selectedIndex].sub_button.length > 0 )? 'hideMenu' : ''">
                <label for="" class="frm_label"> <strong class="title js_menuContent">{{selectedChildIndex === -1 ? '菜单内容' : '子菜单内容'}}</strong> </label>
                <div class="frm_controls frm_vertical_pt">
                  <template v-if="selectedChildIndex === -1">
                    <el-radio-group v-model="buttonList[selectedIndex].type" @change="onTypeChange">
                      <el-radio label="click">发送消息</el-radio>
                      <el-radio label="view">跳转网页</el-radio>
                      <el-radio label="miniprogram">跳转小程序</el-radio>
                    </el-radio-group>
                  </template>
                  <template v-else>
                    <el-radio-group v-model="buttonList[selectedIndex].sub_button[selectedChildIndex].type" @change="onTypeChange">
                      <el-radio label="click">发送消息</el-radio>
                      <el-radio label="view">跳转网页</el-radio>
                      <el-radio label="miniprogram">跳转小程序</el-radio>
                    </el-radio-group>
                  </template>
                </div>
              </div>
              <div class="menu_content_container" :class="(selectedChildIndex == -1 &&  buttonList[selectedIndex].sub_button.length > 0 )? 'hideMenu' : ''">
                <template v-if="selectedChildIndex == -1">
                  <div v-if="buttonList[selectedIndex].type === 'view'" class="menu_content url jsMain" id="url" style="display: block;">
                    <p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下链接</p>
                    <div class="frm_control_group">
                      <label for="" class="frm_label">页面地址</label>
                      <div class="frm_controls">
                        <span class="frm_input_box">
                          <input v-model="buttonList[selectedIndex].url" type="text" class="frm_input" />
                        </span>
                      </div>
                    </div>
                  </div>
                  <div v-else-if="buttonList[selectedIndex].type === 'click'"  style="display: block;">
                    <div class="inner" v-loading="loading">
                      <ul class="weui-desktop-msg-sender__tabs">
                        <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.type === 'news' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onClickSendMsg('news')">图文</li>
                        <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" :class="buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.type === 'text' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onClickSendMsg('text')">文字</li>
                        <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.type === 'image' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onClickSendMsg('image')">图片</li>
                        <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" :class="buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.type === 'voice' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onClickSendMsg('voice')">语音</li>
                        <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_video" :class="buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.type === 'video' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onClickSendMsg('video')">视频</li>
                      </ul>
                      <div class="inner-bottom">
                        <div class="img-action" v-if="buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.type === 'text'">
                          <div class="inner-edit_area">
                            <el-input
                              type="textarea"
                              :autosize="{ minRows: 4, maxRows: 8}"
                              v-model="buttonList[selectedIndex].media_info.content"
                              placeholder="请输入内容">
                            </el-input>
                          </div>
                          <div style="float: right">
                            <el-popover
                              placement="bottom-end"
                              width="400"
                              :offset="10"
                              trigger="manual"
                              v-model="showEmotion">
                              <div>
                                <emotion @emotion="handleEmotion" :height="200" ></emotion>
                              </div>
                              <el-button @click="showEmotion = !showEmotion" slot="reference" type="text">
                                <span class="icon_emotion emotion_switch"></span>
                              </el-button>
                            </el-popover>
                          </div>
                        </div>
                        <div class="img-action" v-if="buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.type === 'image'">
                          <template v-if="selectedIndex > -1 && buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.content">
                            <img style="max-width: 30%" :src="buttonList[selectedIndex].media_info.content"/>
                            <i class="el-icon-delete" @click="deleteMedia()" style="display: inline-block"></i>
                          </template>
                          <div class="display-b" v-else>
                            <div class="img-create-access" v-if="!showMedia">
                              <a href="javascript:;" class="img-create-access__link" @click="getMediaList('image')">从素材库中选择</a>
                            </div>
                          </div>
                          <div v-if="showMedia && mediaList.length > 0">
                            <el-table
                              :data="mediaList"
                              @row-click="onChooseMedia"
                              style="width: 100%">
                              <el-table-column
                                prop="name"
                                label="名称">
                              </el-table-column>
                              <el-table-column
                                prop="media_id"
                                label="mediaId">
                              </el-table-column>
                              <el-table-column
                                label="URL">
                                <template slot-scope="scope">
                                  <a :href="scope.row.url" target="_blank">
                                    <img style="width: 60px;" :src="scope.row.url"/>
                                  </a>
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                        <div class="img-action" v-if="buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.type  === 'news'">
                          <template v-if="buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.content && buttonList[selectedIndex].media_info.content.news_item">
                            <div class="news-media" v-if="buttonList[selectedIndex].media_info.content.news_item.length > 0">
                              <div v-for="(child, childIndex) in buttonList[selectedIndex].media_info.content.news_item" style="position: relative">
                                <div v-if="buttonList[selectedIndex].media_info.content.news_item.length === 1" class="single-cover">
                                  <div class="title">{{child.title}}</div>
                                  <img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
                                  <div class="digest">{{child.digest}}</div>
                                  <a class="preview" :href="child.url" target="_blank">
                                    预览文章
                                  </a>
                                </div>
                                <div v-else-if="buttonList[selectedIndex].media_info.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
                                  <div v-if="childIndex === 0" class="muti-cover">
                                    <img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
                                    <div class="bottom-title">{{child.title}}</div>
                                  </div>
                                  <div class="next-cover clear-both" v-else>
                                    <span class="next-title">{{child.title}}</span>
                                    <img class="next-img" :src="child.thumb_url"/>
                                  </div>
                                  <a class="preview" :href="child.url" target="_blank">
                                    预览文章
                                  </a>
                                </div>
                              </div>
                            </div>
                          </template>
                          <div class="display-b">
                            <div class="img-create-access" v-if="!showMedia">
                              <a href="javascript:;" class="img-create-access__link" @click="getMediaList('news')">从素材库中选择</a>
                            </div>
                          </div>
                          <div v-if="showMedia && mediaList.length > 0">
                            <el-table
                              :data="mediaList"
                              @row-click="onChooseMedia"
                              style="width: 100%">
                              <el-table-column
                                prop="media_id"
                                label="mediaId">
                              </el-table-column>
                              <el-table-column
                                label="图文"
                                className="news-media">
                                <template slot-scope="scope">
                                  <div v-for="(child, childIndex) in scope.row.content.news_item" style="position: relative">
                                    <div v-if="scope.row.content.news_item.length === 1" class="single-cover">
                                      <div class="title">{{child.title}}</div>
                                      <img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
                                      <div class="digest">{{child.digest}}</div>
                                      <a class="preview" :href="child.url" target="_blank">
                                        预览文章
                                      </a>
                                    </div>
                                    <div v-else-if="scope.row.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
                                      <div v-if="childIndex === 0" class="muti-cover">
                                        <img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
                                        <div class="bottom-title">{{child.title}}</div>
                                      </div>
                                      <div class="next-cover clear-both" v-else>
                                        <span class="next-title">{{child.title}}</span>
                                        <img class="next-img" :src="child.thumb_url"/>
                                      </div>
                                      <a class="preview" :href="child.url" target="_blank">
                                        预览文章
                                      </a>
                                    </div>
                                  </div>
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                        <div class="img-action" v-if="buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.type === 'voice'">
                          <template v-if="selectedIndex > -1 && buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.content">
                            <i class="el-icon-delete" @click="deleteMedia()" style="display: inline-block"></i>
                          </template>
                          <div class="display-b" v-else>
                            <div class="img-create-access" v-if="!showMedia">
                              <a href="javascript:;" class="img-create-access__link" @click="getMediaList('voice')">从素材库中选择</a>
                            </div>
                          </div>
                          <div v-if="showMedia && mediaList.length > 0">
                            <el-table
                              :data="mediaList"
                              @row-click="onChooseMedia"
                              style="width: 100%">
                              <el-table-column
                                prop="name"
                                label="名称">
                              </el-table-column>
                              <el-table-column
                                prop="media_id"
                                label="mediaId">
                              </el-table-column>
                              <el-table-column
                                label="URL">
                                <template slot-scope="scope">
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                        <div class="img-action" style="text-align: left" v-if="buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.type === 'video'">
                          <template v-if="selectedIndex > -1 && buttonList[selectedIndex].media_info && buttonList[selectedIndex].media_info.content && buttonList[selectedIndex].media_info.content.down_url">
                            <a :href="buttonList[selectedIndex].media_info.content.down_url">{{buttonList[selectedIndex].media_info.content.title}}</a>
                            <i class="el-icon-delete" @click="deleteMedia()" style="display: inline-block"></i>
                          </template>
                          <div class="display-b" v-else>
                            <div class="img-create-access" v-if="!showMedia">
                              <a href="javascript:;" class="img-create-access__link" @click="getMediaList('video')">从素材库中选择</a>
                            </div>
                          </div>
                          <div v-if="showMedia && mediaList.length > 0">
                            <el-table
                              :data="mediaList"
                              @row-click="onChooseMedia"
                              style="width: 100%">
                              <el-table-column
                                prop="name"
                                label="名称">
                              </el-table-column>
                              <el-table-column
                                prop="media_id"
                                label="mediaId">
                              </el-table-column>
                              <el-table-column
                                label="URL">
                                <template slot-scope="scope">
                                  <a :href="scope.row.info.down_url" target="_blank" v-if="scope.row.info && scope.row.info.down_url">
                                    {{scope.row.info.title}}
                                  </a>
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                        <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" v-if="showMedia && mediaList.length > 0" @sizeChange="onSizeChange"/>
                      </div>
                    </div>
                  </div>
                  <div v-else class="menu_content url jsMain" style="display: block;">
                    <p class="menu_content_tips tips_global">小程序</p>
                    <div class="frm_control_group">
                      <label for="" class="frm_label">url</label>
                      <div class="frm_controls">
                        <span class="frm_input_box">
                          <input v-model="buttonList[selectedIndex].url" type="text" class="frm_input" value="http://mp.weixin.qq.com"/>
                        </span>
                      </div>
                    </div>
                    <div class="frm_control_group">
                      <label for="" class="frm_label">appid</label>
                      <div class="frm_controls">
                        <span class="frm_input_box">
                          <input v-model="buttonList[selectedIndex].appid" type="text" class="frm_input"/>
                        </span>
                      </div>
                    </div>
                    <div class="frm_control_group">
                      <label for="" class="frm_label">小程序路径</label>
                      <div class="frm_controls">
                        <span class="frm_input_box">
                          <input v-model="buttonList[selectedIndex].pagepath" type="text" class="frm_input" />
                        </span>
                      </div>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div v-if="buttonList[selectedIndex].sub_button[selectedChildIndex].type === 'view'" class="menu_content url jsMain"  style="display: block;">
                    <p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下链接</p>
                    <div class="frm_control_group">
                      <label for="" class="frm_label">页面地址</label>
                      <div class="frm_controls">
                        <span class="frm_input_box">
                          <input v-model="buttonList[selectedIndex].sub_button[selectedChildIndex].url" type="text" class="frm_input"/>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div v-else-if="buttonList[selectedIndex].sub_button[selectedChildIndex].type === 'click'"  style="display: block;">
                    <div class="inner" v-loading="loading">
                      <ul class="weui-desktop-msg-sender__tabs">
                        <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type === 'news' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onClickSubSendMsg('news')">图文</li>
                        <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" :class="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type === 'text' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onClickSubSendMsg('text')">文字</li>
                        <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type === 'image' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onClickSubSendMsg('image')">图片</li>
                        <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" :class="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type === 'voice' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onClickSubSendMsg('voice')">语音</li>
                        <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_video" :class="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type === 'video' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onClickSubSendMsg('video')">视频</li>
                      </ul>
                      <div class="inner-bottom">
                        <div class="img-action" v-if="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type === 'text'">
                          <div class="inner-edit_area">
                            <el-input
                              type="textarea"
                              :autosize="{ minRows: 4, maxRows: 8}"
                              v-model="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content"
                              placeholder="请输入内容">
                            </el-input>
                          </div>
                          <div style="float: right">
                            <el-popover
                              placement="bottom-end"
                              width="400"
                              :offset="10"
                              trigger="manual"
                              v-model="showSubEmotion">
                              <div>
                                <emotion2 @emotion="handleSubEmotion" :height="200" ></emotion2>
                              </div>
                              <el-button @click="showSubEmotion = !showSubEmotion" slot="reference" type="text">
                                <span class="icon_emotion emotion_switch"></span>
                              </el-button>
                            </el-popover>
                          </div>
                        </div>
                        <div class="img-action" v-if="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type === 'image'">
                          <template v-if="selectedIndex && selectedChildIndex > -1 && buttonList[selectedIndex].sub_button[selectedChildIndex] && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content">
                            <img style="max-width: 30%" :src="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content" v-if="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content"/>
                            <i class="el-icon-delete" @click="deleteSubMedia()" style="display: inline-block"></i>
                          </template>
                          <div class="display-b" v-else>
                            <div class="img-create-access" v-if="!showMedia">
                              <a href="javascript:;" class="img-create-access__link" @click="getMediaList('image')">从素材库中选择</a>
                            </div>
                          </div>
                          <div v-if="showMedia && mediaList.length > 0">
                            <el-table
                              :data="mediaList"
                              @row-click="onChooseSubMedia"
                              style="width: 100%">
                              <el-table-column
                                prop="name"
                                label="名称">
                              </el-table-column>
                              <el-table-column
                                prop="media_id"
                                label="mediaId">
                              </el-table-column>
                              <el-table-column
                                label="URL">
                                <template slot-scope="scope">
                                  <a :href="scope.row.url" target="_blank">
                                    <img style="width: 60px;" :src="scope.row.url"/>
                                  </a>
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                        <div class="img-action" v-if="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type  === 'news'">
                          <template v-if="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content">
                            <div class="news-media">
                              <div v-for="(child, childIndex) in buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content.news_item" style="position: relative">
                                <div v-if="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content.news_item.length === 1" class="single-cover">
                                  <div class="title">{{child.title}}</div>
                                  <img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
                                  <div class="digest">{{child.digest}}</div>
                                  <a class="preview" :href="child.url" target="_blank">
                                    预览文章
                                  </a>
                                </div>
                                <div v-else-if="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
                                  <div v-if="childIndex === 0" class="muti-cover">
                                    <img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
                                    <div class="bottom-title">{{child.title}}</div>
                                  </div>
                                  <div class="next-cover clear-both" v-else>
                                    <span class="next-title">{{child.title}}</span>
                                    <img class="next-img" :src="child.thumb_url"/>
                                  </div>
                                  <a class="preview" :href="child.url" target="_blank">
                                    预览文章
                                  </a>
                                </div>
                              </div>
                            </div>
                          </template>
                          <div class="display-b">
                            <div class="img-create-access" v-if="!showMedia">
                              <a href="javascript:;" class="img-create-access__link" @click="getMediaList('news')">从素材库中选择</a>
                            </div>
                          </div>
                          <div v-if="showMedia && mediaList.length > 0">
                            <el-table
                              :data="mediaList"
                              @row-click="onChooseSubMedia"
                              style="width: 100%">
                              <el-table-column
                                prop="media_id"
                                label="mediaId">
                              </el-table-column>
                              <el-table-column
                                label="图文"
                                className="news-media">
                                <template slot-scope="scope">
                                  <div v-for="(child, childIndex) in scope.row.content.news_item" style="position: relative">
                                    <div v-if="scope.row.content.news_item.length === 1" class="single-cover">
                                      <div class="title">{{child.title}}</div>
                                      <img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
                                      <div class="digest">{{child.digest}}</div>
                                      <a class="preview" :href="child.url" target="_blank">
                                        预览文章
                                      </a>
                                    </div>
                                    <div v-else-if="scope.row.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
                                      <div v-if="childIndex === 0" class="muti-cover">
                                        <img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
                                        <div class="bottom-title">{{child.title}}</div>
                                      </div>
                                      <div class="next-cover clear-both" v-else>
                                        <span class="next-title">{{child.title}}</span>
                                        <img class="next-img" :src="child.thumb_url"/>
                                      </div>
                                      <a class="preview" :href="child.url" target="_blank">
                                        预览文章
                                      </a>
                                    </div>
                                  </div>
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                        <div class="img-action" v-if="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type === 'voice'">
                          <template v-if="selectedIndex && selectedChildIndex > -1 && buttonList[selectedIndex].sub_button[selectedChildIndex] && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content">
                            <a :href="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content" v-if="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content">{{buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.title}}</a>
                            <i class="el-icon-delete" @click="deleteSubMedia()" style="display: inline-block"></i>
                          </template>
                          <div class="display-b" v-else>
                            <div class="img-create-access" v-if="!showMedia">
                              <a href="javascript:;" class="img-create-access__link" @click="getMediaList('voice')">从素材库中选择</a>
                            </div>
                          </div>
                          <div v-if="showMedia && mediaList.length > 0">
                            <el-table
                              :data="mediaList"
                              @row-click="onChooseSubMedia"
                              style="width: 100%">
                              <el-table-column
                                prop="name"
                                label="名称">
                              </el-table-column>
                              <el-table-column
                                prop="media_id"
                                label="mediaId">
                              </el-table-column>
                              <el-table-column
                                label="URL">
                                <template slot-scope="scope">
                                  <a :href="scope.row.info.down_url" target="_blank" v-if="scope.row.info && scope.row.info.down_url">
                                    {{scope.row.info.title}}
                                  </a>
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                        <div class="img-action" style="text-align: left" v-if="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type === 'video'">
                          <template v-if="selectedIndex && selectedChildIndex > -1 && buttonList[selectedIndex].sub_button[selectedChildIndex] && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content && buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content.down_url">
                            <a :href="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content.down_url" v-if="buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content.down_url">{{buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content.title}}</a>
                            <i class="el-icon-delete" @click="deleteSubMedia()" style="display: inline-block"></i>
                          </template>
                          <div class="display-b" v-else>
                            <div class="img-create-access" v-if="!showMedia">
                              <a href="javascript:;" class="img-create-access__link" @click="getMediaList('video')">从素材库中选择</a>
                            </div>
                          </div>
                          <div v-if="showMedia && mediaList.length > 0">
                            <el-table
                              :data="mediaList"
                              @row-click="onChooseSubMedia"
                              style="width: 100%">
                              <el-table-column
                                prop="name"
                                label="名称">
                              </el-table-column>
                              <el-table-column
                                prop="media_id"
                                label="mediaId">
                              </el-table-column>
                              <el-table-column
                                label="URL">
                                <template slot-scope="scope">
                                  <a :href="scope.row.info.down_url" target="_blank" v-if="scope.row.info && scope.row.info.down_url">
                                    {{scope.row.info.title}}
                                  </a>
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                        <page2 :total="total" v-model="nowPage" :limit="limit" @pageChange="onSubPageChange" v-if="showMedia && mediaList.length > 0" @sizeChange="onSubSizeChange"/>
                      </div>
                    </div>
                  </div>
                  <div v-else class="menu_content url jsMain" style="display: block;">
                    <p class="menu_content_tips tips_global">小程序</p>
                    <div class="frm_control_group">
                      <label for="" class="frm_label">url</label>
                      <div class="frm_controls">
                        <span class="frm_input_box">
                          <input v-model="buttonList[selectedIndex].sub_button[selectedChildIndex].url" type="text" class="frm_input" value="http://mp.weixin.qq.com"/>
                        </span>
                      </div>
                    </div>
                    <div class="frm_control_group">
                      <label for="" class="frm_label">appid</label>
                      <div class="frm_controls">
                        <span class="frm_input_box">
                          <input v-model="buttonList[selectedIndex].sub_button[selectedChildIndex].appid" type="text" class="frm_input"/>
                        </span>
                      </div>
                    </div>
                    <div class="frm_control_group">
                      <label for="" class="frm_label">小程序路径</label>
                      <div class="frm_controls">
                        <span class="frm_input_box">
                          <input v-model="buttonList[selectedIndex].sub_button[selectedChildIndex].pagepath" type="text" class="frm_input" />
                        </span>
                      </div>
                    </div>
                  </div>
                </template>

              </div>
            </div>
          </div>
          <div v-else class="order">请通过拖拽左边的菜单进行排序</div>
          <span class="editor_arrow_wrp"> <i class="editor_arrow editor_arrow_out"></i> <i class="editor_arrow editor_arrow_in"></i> </span>
        </div>
      </div>
    </div>
    <div class="order-btn" v-if="!$store.state.readonly">
      <span class="btn btn_input btn_default" v-if="!showOrder">
        <button @click="showOrder=true">排序</button>
      </span>
      <span class="btn btn_input btn_default" v-if="showOrder">
        <button @click="showOrder=false">完成</button>
      </span>
    </div>
    <div class="tool_bar tc js_editBox" v-if="!$store.state.readonly">
      <span class="btn btn_input btn_primary" v-if="!showOrder">
        <button @click="onSave">保存并发布</button>
      </span>
    </div>
  </div>
</template>

<script>
  import {getPublicMenuApi, savePublicMenuApi,getMediaListApi,getConfigListApi,saveConfigApi,updateConfigApi} from "../../service/api";
  import draggable from 'vuedraggable'
  import page from '../framework/page'
  import page2 from '../framework/page'
  import emotion from '../framework/Emotion/index'
  import emotion2 from '../framework/Emotion/index'
  export default {
    name: "index",
    components: {
      draggable,
      page,
      page2,
      emotion,
      emotion2
    },
    data(){
      return {
          buttonList: [{
              name: '菜单名',
              sub_button: [],
              type: 'view',
              url: ''
          }],
          selectedIndex: 0,
          selectedChildIndex: -1,
          showErrorTips: false,
          showOrder: false,
          loading: false,
          total:0,
          nowPage:1,
          limit: 3,
          showMedia: false,
          mediaList: [],
          showEmotion: false,
          showSubEmotion: false,
          content: '',
          keywordsList: [],
          keywordsMap: new Map()
      }
    },
    mounted(){
      this.getConfigList();
    },
    methods:{
      open3() {
        getConfigListApi({key: 'new_user_redirect'}).then(res => {
          let thisList = res.list[0]
          this.$prompt('请输入链接地址', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputValue:thisList.desc,
            inputErrorMessage: '邮箱格式不正确'
          }).then(({ value }) => {
            updateConfigApi(thisList.id,{key:thisList.key,value:thisList.value,desc:value}).then(res=>{
              this.$message({
                type: 'success',
                message: '保存成功 '
              });
            });
          });
        })
      },
      getConfigList(){
        getConfigListApi({key: 'menu_keywords'}).then(res => {
          this.keywordsList = res.list;
          res.list.forEach((i)=>{
            let obj = {
              id: i.id,
              desc: i.desc ? JSON.parse(i.desc)[0] : []
            };
            this.keywordsMap.set(i.value, obj);
          });
          this.getMenu();
        })
      },
      getName(){
        if (this.selectedChildIndex === -1){
            return this.buttonList[this.selectedIndex].name || ''
        } else {
            return this.buttonList[this.selectedIndex].sub_button[this.selectedChildIndex].name || ''
        }
      },
      getMenu(){
        getPublicMenuApi().then(res=>{
            if (res.menu && res.menu.button) {
                this.buttonList = res.menu.button
                this.selectedIndex = 0
                this.selectedChildIndex = -1
                this.showOrder = false;
                this.searchMenu();

            }
        })
      },
      searchMenu(){
          let list = this.buttonList;
          for (let i = 0 ; i< list.length ; i ++) {
              if (list[i].key){
                  if(this.keywordsMap.has(list[i].key)){
                    this.buttonList[i].media_info = this.keywordsMap.get(list[i].key).desc
                  }
              } else if (list[i].sub_button && list[i].sub_button.length > 0){
                this.searchSubMenu(i);
              }
          }
      },
      searchSubMenu(i){
          let list = this.buttonList[i].sub_button;
          for (let j = 0; j< list.length; j++) {
            if (list[j].key && this.keywordsMap.has(list[j].key)){
              this.buttonList[i].sub_button[j].media_info = this.keywordsMap.get(list[j].key).desc
            }
          }
      },
      clickMenu(index, item){
        this.selectedIndex = index
        this.selectedChildIndex = -1
      },
      clickSubMenu(index, item){
        this.selectedChildIndex = index
      },
      onInput(val) {
        let value = val.target.value
        let re = /[\u4E00-\u9FA5]/g;
        let sumLength = value.length;
        if (value && re.test(value)) {
          let chineseLength = value.match(re).length
          sumLength = chineseLength + sumLength
        }
        this.showErrorTips = sumLength > 16
      },
      addSubMenu(){
        let item = {
          name: '子菜单名',
          sub_button: [],
          type: 'view',
          url: ''
        }
        if(this.buttonList[this.selectedIndex].key){
          delete this.buttonList[this.selectedIndex].key
        }
        if(this.buttonList[this.selectedIndex].media_info){
          delete this.buttonList[this.selectedIndex].media_info
        }
        if(this.buttonList[this.selectedIndex].type){
          delete this.buttonList[this.selectedIndex].type
        }
        this.buttonList[this.selectedIndex].sub_button.push(item)
        this.selectedChildIndex = this.buttonList[this.selectedIndex].sub_button.length - 1
      },
      delSubMenu(){
        this.$confirm('此操作将删除该子菜单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.buttonList[this.selectedIndex].sub_button.splice(this.selectedChildIndex, 1)
          this.selectedChildIndex = this.buttonList[this.selectedIndex].sub_button.length - 1
        });
      },
      onAddMenu(){
        let item = {
          name: '菜单名',
          sub_button: [],
          type: 'view',
          url: ''
        }
        this.buttonList.push(item)
        this.selectedIndex = this.buttonList.length - 1
        this.selectedChildIndex = -1
      },
      delMenu(){
        this.$confirm('此操作将删除该菜单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.buttonList.splice(this.selectedIndex,1)
          if (this.buttonList.length == 0 ){
            this.buttonList.push({
              name: '菜单名',
              sub_button: [],
              type: 'view',
              url: ''
            })
          }
          this.selectedIndex = this.buttonList.length -1;
          this.selectedChildIndex = -1
        });
      },
      onTypeChange(val){
      },
      searchSubButton(firstIndex,list){
        list.forEach((item,index)=>{
          if(item.type && item.type === 'click' && !item.key){
            this.buttonList[firstIndex].sub_button[index].key = `menuKey_${firstIndex+1}_${index+1}`
          }
        })
      },
      onSave(){
        this.buttonList.forEach((item,index)=>{
            if(item.type && item.type === 'click' && !item.key){
              this.buttonList[index].key = `menuKey_${index+1}`
            }
            if(item.sub_button && item.sub_button.length > 0){
                this.searchSubButton(index, item.sub_button)
            }
        })
          let json = {
            buttons: JSON.stringify(this.buttonList)
          }
          let _this = this;
        savePublicMenuApi(json).then(res=>{
          if (res.errcode === 0){
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
            this.buttonList.forEach((item)=>{
              if(item.key && !_this.keywordsMap.has(item.key)){
                _this.onSaveConfig(item);
              } else if(item.key && _this.keywordsMap.has(item.key)){
                _this.onUpdateConfig(_this.keywordsMap.get(item.key).id, item)
              }
              if(item.sub_button && item.sub_button.length > 0){
                  this.onSaveSubConfig(item.sub_button)
              }
            })
          } else {
            this.$message({
              title:'错误！',
              message:res.errmsg,
              type:'error',
            })
          }
        })
      },
      onSaveSubConfig(list){
        list.forEach((item)=>{
          if(item.key && !this.keywordsMap.has(item.key)){
            this.onSaveConfig(item);
          } else if(item.key && this.keywordsMap.has(item.key)){
            this.onUpdateConfig(this.keywordsMap.get(item.key).id, item)
          }
        })
      },
      onSaveConfig(item){
        let json = {
          key: 'menu_keywords',
          value: item.key,
          desc: JSON.stringify([item.media_info])
        }
        saveConfigApi(json).then(()=>{
        })
      },
      onUpdateConfig(id,item){
        let json = {
          key: 'menu_keywords',
          value: item.key,
          desc: JSON.stringify([item.media_info])
        }
        updateConfigApi(id,json).then(()=>{
        })
      },
      onPageChange(val){
        this.nowPage = val
        this.getMediaList(this.buttonList[this.selectedIndex].media_info.type)
      },
      onSubPageChange(val){
        this.nowPage = val
        this.getMediaList(this.buttonList[this.selectedIndex].sub_button[this.selectedChildIndex].media_info.type)
      },
      onSizeChange(val){
        this.nowPage = 1
        this.limit = val
        this.getMediaList(this.buttonList[this.selectedIndex].media_info.type)
      },
      onSubSizeChange(val){
        this.nowPage = 1
        this.limit = val
        this.getMediaList(this.buttonList[this.selectedIndex].sub_button[this.selectedChildIndex].media_info.type)
      },
      getMediaList(type){
        let json = {
          type: type,
          page: this.nowPage,
          limit: this.limit
        };
        this.loading = true;
        getMediaListApi(json).then(res=>{
          this.loading = false;
          this.total = res.total_count;
          if (res.item.length === 0 ) {
            this.$message({
              showClose: true,
              message: '暂无数据'
            });
            this.showMedia = false;
          } else {
            this.showMedia = true;
            this.mediaList = res.item;
          }
        }).catch(() => {
          this.loading = false;
          this.showMedia = false;
        })
      },
      onChooseMedia(val){
        let selectedIndex = this.selectedIndex;
        let _type = this.buttonList[selectedIndex].media_info.type;
        let _menuIndex = selectedIndex + 1;
        this.buttonList[selectedIndex].key = `menuKey_${_menuIndex}`
        if(_type === 'image') {
          this.buttonList[selectedIndex].media_id = val.media_id;
          this.buttonList[selectedIndex].media_info.media_id = val.media_id;
          this.buttonList[selectedIndex].media_info.content = val.url;
        }else if (_type === 'news'){
          this.buttonList[selectedIndex].media_id = val.media_id;
          this.buttonList[selectedIndex].media_info.content = val.content;
          this.buttonList[selectedIndex].media_info.media_id = val.media_id;
          this.buttonList[selectedIndex].media_info.type = 'news';
        }else if (_type === 'video'){
          this.buttonList[selectedIndex].media_id = val.media_id;
          this.buttonList[selectedIndex].media_info.content = val.info;
          this.buttonList[selectedIndex].media_info.media_id = val.media_id;
          this.buttonList[selectedIndex].media_info.type = 'video';
        }
        this.showMedia = false;
        this.$forceUpdate();
      },
      onChooseSubMedia(val){
        let selectedIndex = this.selectedIndex;
        let selectedChildIndex = this.selectedChildIndex;
        this.buttonList[selectedIndex].sub_button[selectedChildIndex].key = `menuKey_${selectedIndex + 1}_${selectedChildIndex + 1}`
        let _type = this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type;
        if(_type === 'image') {
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_id = val.media_id;
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content = val.url;
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.media_id = val.media_id;
        }else if (_type === 'news'){
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_id = val.media_id;
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content = val.content;
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type = 'news';
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.media_id = val.media_id;
        }else if (_type === 'video'){
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_id = val.media_id;
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content = val.info;
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.media_id = val.media_id;
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type = 'video';
        }
        this.showMedia = false;
        this.$forceUpdate();
      },
      onClickSendMsg(type){
        this.mediaList = [];
        this.showMedia = false;
        this.nowPage = 1;
          this.buttonList[this.selectedIndex].media_info = {
              type: type
          }
          this.$forceUpdate();
      },
      onClickSubSendMsg(type){
        this.mediaList = [];
        this.showMedia = false;
        this.nowPage = 1;
        let selectedIndex = this.selectedIndex;
        let selectedChildIndex = this.selectedChildIndex;
        this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info = {
          type: type
        }
        this.$forceUpdate();
      },
      deleteMedia(){
        let _type = this.buttonList[this.selectedIndex].media_info.type;
        this.buttonList[this.selectedIndex].media_id = '';
        if (_type === 'image') {
          this.buttonList[this.selectedIndex].media_info.content = '';
        } else if (_type === 'text'){

        } else {
          this.buttonList[this.selectedIndex].media_info = {
              type: _type
          }
        }

        this.$forceUpdate();
      },
      deleteSubMedia(){
        let selectedIndex = this.selectedIndex;
        let selectedChildIndex = this.selectedChildIndex;
        let _type = this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.type;
        this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_id = '';
        if (_type === 'image') {
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content = '';
        } else if (_type === 'text'){
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content = '';
        } else {
          this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info = {
            type: _type
          }
        }
        this.$forceUpdate();
      },
      handleEmotion (i) {
        this.buttonList[this.selectedIndex].media_info.content += i;
        this.$forceUpdate();
      },
      handleSubEmotion (i) {
        let selectedIndex = this.selectedIndex;
        let selectedChildIndex = this.selectedChildIndex;
        this.buttonList[selectedIndex].sub_button[selectedChildIndex].media_info.content +=i;
        this.$forceUpdate();
      },

    }
  }
</script>

<style scoped>
  .hideMenu {
    display: none !important;
  }
  .order-btn {
    margin-left: 132px;
    margin-top: 20px;
  }
  .order {
    text-align: center;
    padding-top: 200px;
    color: #8d8d8d;
  }
  ul, ol {
    padding-left: 0;
    list-style-type: none;
  }
  .flex-bt {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  }
  a {
    text-decoration: none;
    color: #576b95;
  }
  .tips_global {
    color: #8d8d8d;
  }
  .frm_msg.fail {
    color: #e15f63;
  }
  .menu_form_area .frm_tips, .menu_form_area .frm_msg {
    width: auto;
  }

  .frm_tips {
    position: relative;
  }
  .frm_tips, .frm_msg {
    padding-top: 4px;
    width: 300px;
  }
  .frm_tips {
    color: #8d8d8d;
  }
  .frm_label {
    float: left;
    width: 5em;
    margin-top: .3em;
    margin-right: 1em;
    font-size: 14px;
  }
  .frm_controls {
    display: table-cell;
    vertical-align: top;
    float: none;
    width: auto;
  }
  .frm_input_box.counter_in {
    width: 228px;
    padding-right: 60px;
  }
  .frm_input_box.counter_in {
    padding-right: 70px;
  }
  .frm_input_box.append {
    padding-right: 30px;
  }
  .frm_input_box {
    display: inline-block;
    position: relative;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    width: 278px;
    font-size: 14px;
    padding: 0 10px;
    border: 1px solid #e7e7eb;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    background-color: #fff;
  }
  .frm_input {
    height: 22px;
    margin: 4px 0;
  }

  .frm_input, .frm_textarea {
    width: 100%;
    background-color: transparent;
    border: 0;
    outline: 0;
  }
  .frm_vertical_pt {
    padding-top: .3em;
  }
  .frm_radio_label, .frm_checkbox_label {
    display: inline-block;
    text-align: left;
    cursor: pointer;
    margin-right: 1em;
  }
  .icon_radio.selected, .selected .icon_radio {
    background: url(https://mp.weixin.qq.com/mpres/zh_CN/htmledition/comm_htmledition/style/base/base_z3fb9c8.png) 0 -160px no-repeat;
  }
  .icon_radio {
    background: url(https://mp.weixin.qq.com/mpres/zh_CN/htmledition/comm_htmledition/style/base/base_z3fb9c8.png) 0 -140px no-repeat;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
  }
  .icon_radio, .icon_checkbox {
    margin-right: 3px;
    margin-top: -2px;
  }
  input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }
  .frm_radio, .frm_checkbox {
    position: absolute;
    left: -999em;
  }
  textarea, input {
    color: #222;
  }
  button, input {
    overflow: visible;
  }
  .tc {
    text-align: center;
  }
  .tool_bar {
    padding-bottom: 50px;
    padding-top: 20px;
  }
  .tool_bar {
    /*margin-top: 40px;*/
    padding-top: 20px;
  }
  .tool_bar.tc .btn {
    margin-left: .5em;
    margin-right: .5em;
  }
  .btn.btn_input {
    min-width: 104px;
  }
  .btn.btn_input {
    padding: 0;
  }
  .tool_bar .btn {
    margin-right: 1em;
  }
  .btn {
    min-width: 60px;
  }
  .btn_default {
    background-color: #a6a9ad;
    border-color: #a6a9ad;
    color: #fff;
  }
  .btn_primary {
    background-color: #44b549;
    background-image: -moz-linear-gradient(top,#44b549 0,#44b549 100%);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#44b549),to(#44b549));
    background-image: -webkit-linear-gradient(top,#44b549 0,#44b549 100%);
    background-image: -o-linear-gradient(top,#44b549 0,#44b549 100%);
    background-image: linear-gradient(to bottom,#44b549 0,#44b549 100%);
    border-color: #44b549;
    color: #fff;
  }
  .btn {
    display: inline-block;
    overflow: visible;
    padding: 0 22px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
  }
  .btn.btn_input button {
    width: 100%;
  }
  .btn_primary button {
    color: #fff;
  }
  .btn button {
    display: block;
    height: 100%;
    background-color: transparent;
    border: 0;
    outline: 0;
    overflow: visible;
    padding: 0 22px;
  }
  button, [type="button"], [type="reset"], [type="submit"], input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    /*background-color: transparent;*/
    border-width: 0;
    cursor: pointer;
  }
  .portable_editor .frm_control_group {
    margin-bottom: 10px;
  }

  .portable_editor .frm_control_group {
    margin-top: 30px;
    margin-bottom: 30px;
    padding-bottom: 0;
  }
  .msg_card_inner {
    overflow: hidden;
    border: 1px solid #e7e7eb
  }

  .msg_card_bd {
    padding: 14px;
    background-color: #fff
  }

  .msg_card_ft {
    background-color: #f4f5f9;
    border-top: 1px solid #e7e7eb
  }

  .msg_card_title {
    overflow: hidden;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.2;
    max-height: 2.4;
    word-wrap: normal;
    white-space: pre-wrap
  }

  .msg_card_title a {
    display: block;
    color: #222
  }

  .msg_card_info {
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 12px;
    color: #8d8d8d
  }

  .msg_card_info_meta {
    font-weight: 400;
    font-style: normal
  }

  .msg_card_extra_info {
    margin: 14px 0 5px
  }

  .msg_card_desc {
    word-wrap: normal;
    white-space: pre-wrap
  }

  .msg_card_opr_list {
    font-size: 0
  }

  .msg_card_opr_item {
    text-align: center
  }

  .msg_card_opr_item a {
    display: block
  }

  .msg_card_opr_item:first-child .msg_card_opr_item_inner {
    border-left-width: 0
  }

  .msg_card_opr_item_inner {
    display: inline-block;
    vertical-align: top;
    width: 98.5%;
    margin: 13px 0;
    line-height: 18px;
    height: 18px;
    cursor: pointer;
    border-left: 1px solid #e7e7eb
  }

  .mini .msg_card_opr_list {
    line-height: 30px
  }

  .mini .msg_card_opr_item_inner {
    margin: 5px 0
  }

  .no_opr_border .msg_card_opr_item_inner {
    border-left: none
  }

  .no_title .msg_card_extra_info {
    margin-top: 0
  }

  .portable_editor {
    position: relative
  }

  .portable_editor .editor_inner {
    padding: 0 20px 5px;
    background-color: #f4f5f9;
    border: 1px solid #e7e7eb;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none
  }

  .portable_editor .editor_arrow_wrp,.portable_editor .editor_arrow {
    position: absolute
  }

  .portable_editor .frm_label .title {
    font-weight: 400;
    font-style: normal
  }

  .portable_editor .frm_label .tips {
    color: #8d8d8d
  }

  .portable_editor .frm_control_group {
    margin-top: 30px;
    margin-bottom: 30px;
    padding-bottom: 0
  }

  .portable_editor .edit_item {
    margin-top: 25px;
    margin-bottom: 25px
  }

  .portable_editor .edit_item .frm_label {
    *zoom: 1;
    display: block;
    float: none;
    width: auto;
    margin-bottom: 6px
  }

  .portable_editor .edit_item .frm_label:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both
  }

  .portable_editor .edit_item .frm_input_box,.portable_editor .edit_item .frm_textarea_box {
    display: block;
    width: auto;
    border-color: #e7e7eb
  }

  .portable_editor .edit_item .frm_input_box {
    height: auto;
    min-height: 30px
  }

  .portable_editor .edit_item.dropdown_item {
    *zoom: 1
  }

  .portable_editor .edit_item.dropdown_item:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both
  }

  .portable_editor .edit_item.dropdown_item .frm_label {
    float: left;
    margin-top: 0;
    line-height: 32px
  }

  .portable_editor.to_left {
    padding-left: 12px
  }

  .portable_editor.to_left .editor_arrow_wrp {
    left: 0;
    top: 20px
  }

  .portable_editor.to_left .editor_arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 12px;
    border-style: dashed;
    border-color: transparent;
    border-left-width: 0;
    border-right-color: #e7e7eb;
    border-right-style: solid
  }

  .portable_editor.to_left .editor_arrow_out {
    left: 0
  }

  .portable_editor.to_left .editor_arrow_in {
    left: 1px;
    border-right-color: #f4f5f9
  }

  .portable_editor.to_right {
    padding-right: 12px
  }

  .portable_editor.to_right .editor_arrow_wrp {
    right: 0;
    top: 20px
  }

  .portable_editor.to_right .editor_arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 12px;
    border-style: dashed;
    border-color: transparent;
    border-right-width: 0;
    border-left-color: #e7e7eb;
    border-left-style: solid
  }

  .portable_editor.to_right .editor_arrow_out {
    right: 0
  }

  .portable_editor.to_right .editor_arrow_in {
    right: 1px;
    border-left-color: #f4f5f9
  }

  .portable_editor.to_top {
    padding-top: 12px
  }

  .portable_editor.to_top .editor_arrow_wrp {
    top: 0;
    left: 20px
  }

  .portable_editor.to_top .editor_arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 12px;
    border-style: dashed;
    border-color: transparent;
    border-top-width: 0;
    border-bottom-color: #e7e7eb;
    border-bottom-style: solid
  }

  .portable_editor.to_top .editor_arrow_out {
    top: 0
  }

  .portable_editor.to_top .editor_arrow_in {
    top: 1px;
    border-bottom-color: #f4f5f9
  }

  .portable_editor.to_bottom {
    padding-bottom: 12px
  }

  .portable_editor.to_bottom .editor_arrow_wrp {
    bottom: 0;
    left: 20px
  }

  .portable_editor.to_bottom .editor_arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 12px;
    border-style: dashed;
    border-color: transparent;
    border-bottom-width: 0;
    border-top-color: #e7e7eb;
    border-top-style: solid
  }

  .portable_editor.to_bottom .editor_arrow_out {
    bottom: 0
  }

  .portable_editor.to_bottom .editor_arrow_in {
    bottom: 1px;
    border-top-color: #f4f5f9
  }

  .simulator {
    width: 318px;
    margin: 0 auto;
    border: 1px solid #e7e7eb
  }

  .simulator_hd {
    position: relative;
    height: 65px;
    background: transparent url(https://mp.weixin.qq.com/mpres/htmledition/images/homepage/banner_control3a7b38.png) no-repeat 0 0
  }

  .simulator_hd .title {
    position: absolute;
    bottom: 10px;
    font-weight: normal;
    color: #fff;
    text-align: center;
    left: 60px;
    right: 50px;
    height: 1.6em;
    overflow: hidden
  }

  .simulator_bd {
    min-height: 450px
  }

  .plugin_content {
    position: relative
  }

  .plugin_mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background-color: rgba(229,229,229,0.85);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d9e5e5e5',endcolorstr='#d9e5e5e5')
  }

  .plugin_mask a {
    position: absolute;
    top: 50%;
    margin-top: -11px;
    left: 50%;
    margin-left: -11px
  }

  .plugin_mask.transparent {
    display: none!important;
    background-color: transparent;
    cursor: default
  }

  .plugin_mask.transparent a {
    display: none
  }

  .main_bd {
    padding-bottom: 0 0 50px
  }

  .menu_setting_tips {
    padding-bottom: 20px
  }

  .menu_initial_box {
    text-align: center;
    background: transparent url(https://mp.weixin.qq.com/mpres/htmledition/images/pic/menu/pic_menu_preview3a7b38.png) no-repeat 0 0;
    background-position: 150px 100px;
    padding: 280px 0 0 220px;
    min-height: 300px
  }

  .menu_initial_box .tips_global {
    padding-bottom: 5px
  }

  .menu_setting_box .tool_bar {
    padding-top: 0
  }

  .menu_setting_msg {
    margin-bottom: 40px
  }

  .menu_setting_area {
    *zoom: 1;
    margin: 14px 30px 0;
    font-size: 15px;
  }

  .menu_setting_area:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both
  }

  .menu_preview_area {
    float: left;
    margin-right: 12px;
    position: relative
  }

  .menu_preview_area .sort_btn_wrp {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -72px;
    text-align: center
  }

  .menu_preview_area .icon14_menu_add {
    background: url(https://mp.weixin.qq.com/mpres/zh_CN/htmledition/comm_htmledition/style/page/menu/index_z3ff724.png) 0 0 no-repeat;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    display: inline-block;
    margin-top: -2px
  }

  .menu_preview_area .pre_menu_list {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #e7e7eb;
    background: transparent url(https://mp.weixin.qq.com/mpres/htmledition/images/bg/bg_mobile_foot_default3a7b38.png) no-repeat 0 0;
    background-position: 0 0;
    background-repeat: no-repeat;
    padding-left: 43px
  }

  .menu_preview_area .pre_menu_list .sort_gray {
    display: none
  }

  .menu_preview_area .pre_menu_list.no_menu .pre_menu_item .pre_menu_link {
    border: 1px solid #44b549;
    color: #44b549
  }

  .menu_preview_area .pre_menu_list.no_menu .icon14_menu_add {
    background: url(https://mp.weixin.qq.com/mpres/zh_CN/htmledition/comm_htmledition/style/page/menu/index_z3ff724.png) 0 -18px no-repeat
  }

  .menu_preview_area .pre_menu_list.sorting .sort_gray {
    display: inline-block
  }

  .menu_preview_area .pre_menu_list.sorting .icon_menu_dot {
    display: none
  }

  .menu_preview_area .pre_menu_list.sorting .pre_menu_item.current .pre_menu_link {
    border: 0;
    border-left: 1px solid #e7e7eb;
    background-color: transparent;
    line-height: 50px;
    color: #616161
  }

  .menu_preview_area .pre_menu_list.sorting .sub_pre_menu_list li.current {
    background-color: transparent;
    border-color: transparent
  }

  .menu_preview_area .pre_menu_list.sorting .sub_pre_menu_list li.current a {
    color: #616161
  }

  .menu_preview_area .pre_menu_list.sorting .sub_pre_menu_list li.current .sub_pre_menu_inner {
    border-top-width: 1px
  }

  .menu_preview_area .pre_menu_list .sort_gray {
    margin-top: -4px
  }

  .menu_preview_area .pre_menu_item {
    line-height: 50px;
    width: 90px;
  }

  .menu_preview_area .pre_menu_item:first-child .pre_menu_link {
    border-left-width: 0
  }

  .menu_preview_area .pre_menu_item.current .pre_menu_link {
    border: 1px solid #44b549;
    line-height: 48px;
    background-color: #fff;
    color: #44b549
  }

  .menu_preview_area .pre_menu_item.dragging {
    border: 1px solid #e7e7eb;
    background-color: #fafafa
  }

  .menu_preview_area .pre_menu_link .add_gray {
    margin-top: -3px
  }

  .menu_preview_area .sub_pre_menu_box {
    bottom: 60px;
    background-color: #fafafa;
    border-top-width: 0
  }

  .menu_preview_area .sub_pre_menu_inner {
    display: block;
    border-top: 1px solid #e7e7eb;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    cursor: pointer
  }

  .menu_preview_area .sub_pre_menu_list li {
    line-height: 44px;
    border: 1px solid transparent;
    margin: 0 -1px -1px
  }

  .menu_preview_area .sub_pre_menu_list li:first-child {
    border-top: 1px solid #d0d0d0
  }

  .menu_preview_area .sub_pre_menu_list li:first-child .sub_pre_menu_inner {
    border-top-width: 0
  }

  .menu_preview_area .sub_pre_menu_list li:hover {
    background-color: #eee;
    border: 1px solid #d0d0d0;
    line-height: 45px;
    cursor: pointer
  }

  .menu_preview_area .sub_pre_menu_list li:hover .sub_pre_menu_inner {
    border-top-width: 0
  }

  .menu_preview_area .sub_pre_menu_list li:hover:first-child {
    line-height: 44px
  }

  .menu_preview_area .sub_pre_menu_list li.current {
    background-color: #fff;
    border: 1px solid #44b549;
    position: relative;
    z-index: 1;
    line-height: 45px;
    *zoom: 1
  }

  .menu_preview_area .sub_pre_menu_list li.current .sub_pre_menu_inner {
    border-top-width: 0
  }

  .menu_preview_area .sub_pre_menu_list li.current a {
    color: #44b549
  }

  .menu_preview_area .menu_drag_placeholder {
    float: left;
    width: 80px;
    height: 42px;
    margin: 3px;
    border: 1px solid #e7e7eb;
    background-color: #fff
  }

  .menu_preview_area li.menu_sub_drag_placeholder {
    margin: 3px;
    height: 45px;
    border: 1px solid #e7e7eb;
    background-color: #fff
  }

  .mobile_menu_preview {
    position: relative;
    width: 317px;
    height: 580px;
    background: transparent url(https://mp.weixin.qq.com/mpres/htmledition/images/bg/bg_mobile_head_default3a7b38.png) no-repeat 0 0;
    background-position: 0 0;
    border: 1px solid #e7e7eb
  }

  .mobile_menu_preview .mobile_hd {
    color: #fff;
    text-align: center;
    padding-top: 30px;
    font-size: 15px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    margin: 0 30px
  }

  .menu_form_area {
    display: table-cell;
    vertical-align: top;
    float: none;
    width: auto;
    *display: block;
    *zoom: 1
  }

  .menu_form_area:after {
    content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
    visibility: hidden;
    clear: both;
    height: 0!important;
    display: block;
    line-height: 0
  }

  .menu_form_area .editor_inner {
    min-height: 560px;
    padding-bottom: 20px
  }

  .menu_form_area .portable_editor.to_left .editor_arrow_wrp {
    top: 545px
  }

  .menu_form_area .msg_wrp {
    padding: 4px 10px;
    border: 1px solid #e7e7eb;
    word-wrap: break-word;
    word-break: break-all
  }

  .menu_form_area .msg_wrp .richvideo,.menu_form_area .msg_wrp .appmsg,.menu_form_area .msg_wrp .richvideo_msg_box {
    margin-bottom: 0;
    width: 320px
  }

  .menu_form_area .msg_wrp img {
    vertical-align: middle
  }

  .menu_form_area .msg_wrp .wxmImg {
    margin-bottom: -4px
  }

  .menu_form_area .frm_label {
    width: 5em;
    *width: 5.5em
  }

  .menu_form_area .frm_tips,.menu_form_area .frm_msg {
    width: auto
  }

  .menu_form_area .msg_sender_msg {
    padding-top: 10px
  }

  .menu_form_area .msg_sender_tips {
    padding-top: 10px
  }

  .menu_form_area .msg_sender .tab_navs_wrp {
    width: 420px
  }

  .menu_form_area .msg_sender .tab_navs_switch_wrp.switch_next {
    display: block
  }

  .menu_form_area .msg_sender .tab_cont_cover {
    padding: 20px
  }

  .menu_form_area .msg_sender .tab_cont_cover .media_cover,.menu_form_area .msg_sender .tab_cont_cover .appmsg_cover {
    width: 47%;
    margin-right: 0;
    margin-left: 5.5%
  }

  .menu_form_area .msg_sender .tab_cont_cover .media_cover:first-child,.menu_form_area .msg_sender .tab_cont_cover .appmsg_cover:first-child {
    margin-left: 0
  }

  .menu_form_area .msg_sender .tab_cont_cover .create_access {
    padding: 42px 0
  }

  .menu_form_area .msg_sender.error {
    border-color: #e15f63
  }

  .menu_form_area .msg_sender .emotion_editor .edit_area {
    height: 151px
  }

  .menu_form_area .msg_sender .editor_toolbar {
    border-bottom: 0;
    padding-bottom: 0
  }

  .menu_form_area .msg_sender .upload_file_box {
    text-align: left
  }

  .menu_form_area .msg_sender .progress_bar {
    display: block;
    margin-top: 10px;
    width: auto
  }

  .menu_form_hd {
    padding: 0;
    border-bottom: 1px solid #e7e7eb
  }

  .menu_form_hd h4 {
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    font-weight: 400;
  }

  .menu_initial_tips {
    text-align: center;
    padding-top: 200px
  }

  .menu_content_edit_access {
    float: right
  }

  .msg_tab {
    background-color: #fff
  }

  .menu_content {
    padding: 16px 20px;
    border: 1px solid #e7e7eb;
    background-color: #fff
  }

  .menu_content .frm_control_group {
    margin-top: 0
  }

  .menu_content.send {
    border: 0;
    padding: 0
  }

  .menu_content_tips {
    padding-bottom: 10px
  }

  .portable_editor .frm_control_group {
    margin-bottom: 10px
  }

  .pre_menu_item {
    position: relative;
    float: left;
    line-height: 38px;
    text-align: center
  }

  .pre_menu_item .icon_menu_dot {
    background: url(https://mp.weixin.qq.com/mpres/zh_CN/htmledition/comm_htmledition/style/page/menu/index_z3ff724.png) 0 -36px no-repeat;
    width: 7px;
    height: 7px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 2px;
    margin-top: -2px;
    *margin-top: 0
  }

  .pre_menu_item a {
    display: block;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    color: #616161;
    text-decoration: none
  }

  .pre_menu_link {
    border-left: 1px solid #e7e7eb
  }

  .pre_menu_link:hover {
    color: #222
  }

  .sub_pre_menu_box {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    border: 1px solid #d0d0d0;
    background-color: #fff
  }

  .sub_pre_menu_box .arrow {
    position: absolute;
    left: 50%;
    margin-left: -6px
  }

  .sub_pre_menu_box .arrow_out {
    bottom: -6px;
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: dashed;
    border-color: transparent;
    border-bottom-width: 0;
    border-top-color: #d0d0d0;
    border-top-style: solid
  }

  .sub_pre_menu_box .arrow_in {
    bottom: -5px;
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: dashed;
    border-color: transparent;
    border-bottom-width: 0;
    border-top-color: #fafafa;
    border-top-style: solid
  }

  .sub_pre_menu_list li {
    line-height: 30px
  }

  .sub_pre_menu_list li a {
    padding: 0 .5em
  }

  .mobile_preview {
    position: fixed;
    display: none;
    top: 50%;
    left: 50%;
    width: 327px;
    margin-top: -425px;
    margin-left: -161px;
    z-index: 9999;
    background: transparent url(https://mp.weixin.qq.com/mpres/htmledition/images/bg/mobile-preview/bg_mobile3a7b38.png) no-repeat 0 0
  }

  .mobile_preview .richvideo_content .video_wrp {
    min-height: 0
  }

  .mobile_preview .richvideo_content .video_player,.mobile_preview .richvideo_content .video_shot {
    height: 80px
  }

  .mobile_preview .vjs-default-skin .vjs-time-controls {
    width: 3em
  }

  .mobile_preview .vjs-default-skin .vjs-control-bar {
    overflow: hidden
  }

  .mobile_preview .vjs-default-skin .vjs-big-play-button {
    width: 80px;
    height: 60px;
    background-position: -305px 8px;
    margin-top: -30px;
    margin-left: -40px
  }

  .mobile_preview .pre_menu_list {
    *zoom: 1;
    margin-left: 65px;
    margin-right: 36px
  }

  .mobile_preview .pre_menu_list:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both
  }

  .mobile_preview_hd {
    height: 150px;
    text-align: center
  }

  .mobile_preview_hd .nickname {
    display: inline-block;
    font-weight: 400;
    padding-top: 120px;
    width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    font-size: 14px;
    color: #fff
  }

  .mobile_preview_bd {
    position: relative;
    height: 393px;
    margin-left: 40px;
    margin-right: 28px;
    overflow-y: scroll
  }

  .show_list {
    padding-right: 1em
  }

  .show_item {
    *zoom: 1;
    padding-top: 1.5em
  }

  .show_item:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both
  }

  .show_item .avatar {
    float: left;
    width: 48px;
    margin-right: 5px
  }

  .show_content {
    overflow: hidden;
    *zoom: 1
  }

  .show_content .richvideo,.show_content .richvideo_msg_box {
    width: auto
  }

  .mobile_preview_ft {
    height: 152px
  }

  .mobile_preview_closed {
    position: absolute;
    left: 112px
  }

  .btn_appmsg_wrap {
    margin-top: -10px;
    padding-left: 85px
  }

  .select_list_container {
    padding: 20px 30px
  }

  .select_list_container .frm_input_box {
    width: 278px
  }

  .select_list_container .loading_area {
    position: relative
  }

  .select_list_container .icon_loading_small {
    margin-left: -20px;
    top: 185px
  }

  .select_list_container .select_list_hd {
    margin-bottom: 15px
  }

  .select_list_container .select_list_bd {
    height: 343px;
    overflow-y: auto;
    border: 1px solid #e7e7eb
  }

  .select_list_container .select_list_ft .pagination_wrp {
    margin-top: 20px
  }

  .select_list_container .loading_area {
    height: 240px;
    text-align: center
  }

  .select_list_container .select_list {
    border-bottom: 0
  }

  .select_list_container .no_appmsg {
    text-align: center;
    line-height: 340px;
    color: #8d8d8d
  }

  .select_list_container .list_item_date {
    float: right;
    color: #8d8d8d
  }

  .select_list_container .select_list_item {
    display: block;
    margin-right: 0;
    padding: 10px 15px;
    border-bottom: 1px solid #e7e7eb
  }

  .select_list_container .select_list_item:hover {
    background-color: #f4f5f9
  }

  .select_list_container .select_list_item:last-child {
    border-bottom: 0
  }

  .menu_create_box {
    text-align: center;
    padding-top: 2em
  }

  .menu_create_box .tips_global {
    margin-bottom: .5em
  }

  .menu_mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    filter: alpha(opacity = 75);
    -moz-opacity: .75;
    -khtml-opacity: .75;
    opacity: .75;
    background-color: #000
  }

  .menu_tab_content {
    padding: 40px;
    height: 430px
  }

  .menu_tab_content .link_insertion {
    margin: 100px auto;
    width: 470px
  }

  .menu_tab_content .link_insertion .frm_label {
    float: none;
    display: block;
    width: auto
  }

  .menu_tab_content .media_lib .loading {
    display: none;
    text-align: center;
    padding: 150px 0
  }

  .menu_tab_content .media_lib .table_wrp {
    margin-top: 20px;
    max-height: 300px;
    overflow: auto;
    border: 1px solid #e7e7eb
  }

  .menu_tab_content .media_lib .table {
    border: 0;
    margin-bottom: 0
  }

  .menu_tab_content .media_lib tr {
    cursor: pointer
  }

  .menu_tab_content .media_lib .table_cell.date {
    width: 120px;
    color: #8d8d8d
  }

  .menu_tab_content .history_msg {
    display: none;
    overflow: hidden;
    margin-top: 20px
  }

  .menu_tab_content .history_msg .preview_area {
    width: 240px;
    height: 348px;
    float: left;
    margin-right: 50px;
    background: transparent url(https://mp.weixin.qq.com/mpres/htmledition/images/advanced/history_msg3a7b38.png) no-repeat 0 0;
    position: relative;
    margin-left: 80px;
    border: 1px solid #e7e7eb
  }

  .menu_tab_content .history_msg .preview_area .desc {
    position: absolute;
    top: 100%;
    margin-top: 10px;
    width: 100%;
    text-align: center
  }

  .menu_tab_content .history_msg .form_area {
    overflow: hidden;
    padding: 180px 0;
    text-align: center
  }

  .menu_tab_content .homepage {
    max-height: 440px;
    overflow: auto;
    margin-right: -20px
  }

  .menu_tab_content .homepage .loading {
    padding: 120px 260px;
    color: #8d8d8d
  }

  .menu_tab_content .homepage .no_homepage {
    padding: 120px 230px
  }

  .menu_tab_content .homepage .col_tpl {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: top;
    width: 295px;
    margin-right: 20px;
    margin-bottom: 15px;
    position: relative
  }

  .menu_tab_content .homepage .col_tpl .msg_card {
    border: 0
  }

  .menu_tab_content .homepage .col_tpl .homepage_mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter: alpha(opacity = 60);
    -moz-opacity: .6;
    -khtml-opacity: .6;
    opacity: .6;
    z-index: 1
  }

  .menu_tab_content .homepage .col_tpl .icon_card_selected {
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    margin-top: -23px;
    margin-left: -23px;
    line-height: 999em;
    overflow: hidden;
    z-index: 1
  }

  .menu_tab_content .homepage .col_tpl.selected .homepage_mask {
    display: block
  }

  .menu_tab_content .homepage .col_tpl.selected .icon_card_selected {
    display: block
  }

  .menu_tab_content .homepage .col_tpl .simulator .simulator_bd .article_list {
    *height: 420px
  }

  .menu_tab_content .homepage .col_tpl .simulator .simulator_bd .tab .article_list {
    *height: 220px
  }

  .menu_tab_content .homepage .msg_card_extra_info {
    height: 440px;
    overflow: hidden
  }

  .menu_tab_content .homepage .msg_card_extra_info .simulator {
    width: 265px;
    border: 0
  }

  .menu_tab_content .homepage .msg_card_extra_info .simulator_hd {
    background: #333;
    height: 40px;
    font-size: 14px
  }

  .menu_tab_content .homepage .msg_card_extra_info .simulator_bd {
    height: 395px;
    overflow: hidden;
    border-top: 0
  }

  .menu_tab_content .homepage .msg_card_extra_info .simulator_bd .article_list {
    height: auto;
    overflow: hidden
  }

  .menu_tab_content .homepage .msg_card_opr_item {
    *margin-right: -5px
  }

  .weapplinks_box {
    padding: 0 100px 20px
  }

  .weapplinks_box .weapplink_list {
    overflow: hidden;
    margin-right: -20px
  }

  .weapplinks_box .weapplink_item {
    float: left;
    width: 50%
  }

  .weapplinks_box .weapplink_item .weapplink_item_inner {
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    margin: 0 20px 20px 0;
    padding: 15px 20px;
    border: 1px solid #e7e7eb;
    position: relative
  }

  .weapplinks_box .weapplink_item .weapplink_opr {
    float: right;
    margin-left: 1em;
    text-align: right;
    position: relative;
    z-index: 1
  }

  .weapplinks_box .weapplink_item .weapplink_info {
    padding: 10px 0;
    padding-left: 66px;
    min-height: 50px;
    position: relative
  }

  .weapplinks_box .weapplink_item strong,.weapplinks_box .weapplink_item em {
    font-weight: 400;
    font-style: normal;
    display: block;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal
  }

  .weapplinks_box .weapplink_item .weapplink_name {
    line-height: 50px
  }

  .weapplinks_box .weapplink_item .weapplink_avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 0
  }

  .link_weapp_desc {
    padding: 20px 100px
  }

  .link_weapp_desc .link_weapp_desc_extend {
    float: right
  }

  .link_weapp_wrp {
    height: 320px;
    overflow-y: auto
  }

  .weapp_select_dialog .dialog_bd {
    padding: 0
  }

  .weapplink_select_mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.6);
    text-align: center;
    font-size: 0
  }

  .weapplink_select_mask .icon_card_selected {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -23px;
    margin-left: -23px
  }

  .weapplink_item_inner {
    cursor: pointer
  }

  .weapplink_item_inner:hover .weapplink_select_mask {
    display: block
  }

  .selected .weapplink_select_mask {
    display: block
  }

  .link_weapp_loading {
    text-align: center;
    padding: 82px
  }

  .link_weapp_empty_desc {
    display: block;
    text-align: center;
    padding-top: 140px
  }

  .weapp_empty_box {
    text-align: center;
    padding: 70px 0
  }

  .weapp_empty_box .desc {
    margin-bottom: 10px
  }

  .processor_step_content .step_content_bd {
    height: 430px;
    box-sizing: border-box
  }

  .processor_step_content .step_content_bd .link_weapp_wrp {
    height: 368px
  }

  .processor_step_content .step_content_ft {
    height: 65px;
    line-height: 65px;
    background-color: #fff;
    text-align: center;
    border-radius: 0 0 4px 4px
  }

  .processor_step_content .step_content_ft .btn_input {
    margin: 0 5px
  }

  .processor_step_content .cover_preview {
    width: 180px;
    height: 140px
  }

  .processor_step_content .cover_preview_wrp {
    *zoom: 1
  }

  .processor_step_content .cover_preview_wrp:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both
  }

  .processor_step_content .cover_preview {
    float: left;
    position: relative;
    text-align: center;
    color: #fff;
    margin-top: 10px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
  }

  .processor_step_content .cover_preview.first_appmsg_cover {
    width: 188px
  }

  .processor_step_content .cover_preview .del_media_white {
    position: absolute;
    bottom: 12px;
    left: 50%;
    margin-left: -10px
  }

  .processor_step_content .cover_preview .card_mask_global {
    display: none
  }

  .processor_step_content .cover_preview .hover_mask {
    top: auto;
    height: 140px
  }

  .processor_step_content .cover_preview .cover_error_msg {
    padding: 38px
  }

  .processor_step_content .cover_preview .error_mask {
    display: block;
    padding: 32px 8px 50px;
    overflow: auto;
    word-wrap: break-word;
    word-break: break-all
  }

  .processor_step_content .cover_preview:hover .hover_mask {
    display: block
  }

  .processor_step_content.step2 .step_content_bd {
    padding: 20px 140px
  }

  .processor_step_content.step2 .weapp_type_select_area {
    margin-top: 10px;
    margin-right: -40px
  }

  .processor_step_content.step2 .weapp_type_box {
    display: inline-block;
    width: 240px
  }

  .processor_step_content.step2 .type_preview {
    display: inline-block;
    width: 219px;
    height: 380px;
    background-size: cover;
    background-repeat: no-repeat
  }

  .processor_step_content.step3 .step_content_bd {
    padding: 45px 160px
  }

  .processor_step_content.step3 100px {
                                     padding: 0 0 20px
                                   }

  .processor_step_content.step4 .step_content_bd {
    overflow-y: auto
  }

  .processor_step_content.step4 .step_content_bd_inner {
    padding: 45px 90px 15px
  }

  .processor_step_content.step4 .link_weapp_desc {
    padding: 0 0 20px
  }

  .processor_step_content.step4 .frm_tips,.processor_step_content.step4 .frm_msg {
    width: auto
  }

  .screen_small .weapp_select_dialog .dialog_bd {
    max-height: 540px
  }

  .flex_context {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
  }

  .flex_bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    word-wrap: break-word;
    word-break: break-all
  }

  .weapp_card {
    border: 1px solid #e1e1e1;
    background-color: #fdfdfd;
    width: 270px;
    color: #222;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-indent: 0;
    text-align: left;
    text-decoration: none
  }

  .weapp_card.flex_context {
    padding: 12px 15px
  }

  .weapp_card.flex_context .weapp_card_hd {
    padding-right: 1em
  }

  .weapp_card.flex_context .weapp_card_avatar {
    width: 50px;
    height: 50px
  }

  .weapp_card.flex_context .weapp_card_nickname {
    font-size: 17px;
    font-weight: 400;
    display: block;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal
  }

  .weapp_card.app_context {
    padding-top: 10px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px
  }

  .weapp_card.app_context .weapp_card_bd {
    padding: 0 15px 15px
  }

  .weapp_card.app_context .weapp_card_profile {
    display: block;
    position: relative;
    font-size: 12px;
    color: #8d8d8d;
    padding-left: 25px
  }

  .weapp_card.app_context .weapp_card_avatar {
    width: 20px;
    height: 20px;
    margin: -0.2em 5px 0 0;
    position: absolute;
    top: 2px;
    left: 0
  }

  .weapp_card.app_context .weapp_card_nickname {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: 400
  }

  .weapp_card.app_context .weapp_card_title {
    padding: .3em 0 .75em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: 400
  }

  .weapp_card.app_context .weapp_card_thumb_wrp {
    position: relative;
    display: block;
    padding-bottom: 75%;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover
  }

  .weapp_card.app_context .weapp_card_thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%!important
  }

  .weapp_card.app_context .weapp_card_ft {
    padding: 0 15px;
    border-top: 1px solid #e1e1e1;
    line-height: 24px
  }

  .weapp_card.app_context,.weapp_card .weapp_card_bd,.weapp_card .weapp_card_ft,.weapp_card .weapp_card_nickname,.weapp_card .weapp_card_info,.weapp_card .weapp_card_title {
    display: block
  }

  .weapp_card_avatar {
    padding: 0
  }

  .weapp_card_avatar img {
    width: 100%
  }

  .weapp_card_logo {
    color: #8d8d8d;
    font-size: 13px
  }

  .icon_weapp_logo_mini {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: .2em;
    margin-top: -0.2em
  }

  .card-preview__area {
    display: inline-block;
    width: 304px;
    vertical-align: top
  }

  .edit-image__area {
    display: inline-block;
    border-left: 1px solid #e7e7eb;
    vertical-align: top;
    padding-left: 34px
  }

  .edit-image__area .edit-image__preview {
    max-width: 330px;
    max-height: 260px
  }

  .edit-image__tips {
    margin-bottom: 10px
  }

  .upload-image_before__wrp {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px dashed #e7e7eb;
    text-align: center;
    padding-top: 58px;
    background-color: #fff
  }

  .upload-image_before__wrp .upload_tips {
    font-size: 13px;
    margin-top: 10px
  }

  .upload-image_after__wrp {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.9);
    text-align: center;
    transition: all .3s;
    opacity: 0
  }

  .weapp_card_thumb_after_wrp:hover .upload-image_after__wrp {
    opacity: 1
  }

  .weapp_card_thumb_after_wrp {
    position: relative;
    font-size: 0;
    display: block
  }

  .weapp_card_thumb_preview {
    width: 100%
  }

  .popover_morepage {
    left: 0;
    margin-left: 500px;
    top: 50%;
    margin-top: -165px;
    width: 445px
  }

  .popover_morepage .popover_arrow_out {
    top: 50%;
    margin-top: -22px;
    left: -8px;
    border: 0;
    border-style: solid;
    border-width: 8px;
    border-color: transparent;
    border-right-color: #d9dadc
  }

  .popover_morepage .popover_arrow_in {
    top: 50%;
    margin-top: -22px;
    left: -8px;
    border: 0;
    border-style: solid;
    border-width: 8px;
    border-color: transparent;
    border-right-color: #fff
  }

  .popover_content_morepage .popover_content_morepage_desc {
    color: #8d8d8d;
    margin-bottom: 15px
  }

  .popover_content_morepage .popover_content_morepage_desc .link {
    margin-left: .5em
  }

  .popover_content_morepage .desc {
    color: #8d8d8d
  }

  .popover_content_morepage .step_vertical_container {
    counter-reset: sectioncounter;
    padding-left: 30px
  }

  .popover_content_morepage .step_vertical_ele {
    position: relative
  }

  .popover_content_morepage .step_vertical_ele:after {
    content: ' ';
    width: 0;
    height: 70%;
    display: block;
    border-right: 1px solid #e4e8eb;
    position: absolute;
    top: 30px;
    left: -19px
  }

  .popover_content_morepage .step_vertical_ele:last-child:after {
    display: none
  }

  .popover_content_morepage .step_vertical_ele:before {
    content: counter(sectioncounter);
    counter-increment: sectioncounter;
    width: 20px;
    border-radius: 50%;
    border: 1px solid #44b549;
    display: block;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: -30px;
    color: #44b549
  }

  .popover_content_morepage .step_vertical_title {
    color: #44b549;
    margin-bottom: 5px
  }

  .popover_content_morepage .tag_container {
    position: relative;
    display: inline-block;
    line-height: 24px;
    background-color: #e5e7ec;
    border: 1px solid #e7e7eb;
    color: #353535;
    padding: 0 .5em;
    margin-bottom: 5px;
    margin-right: 5px
  }

  .popover_content_morepage .tag_container:last-child {
    margin-right: 0
  }

  .popover_content_morepage .tag_container .close_flat {
    margin-left: 3px;
    background: url(https://mp.weixin.qq.com/mpres/zh_CN/htmledition/comm_htmledition/style/page/menu/index_z3ff724.png) 0 -47px no-repeat;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    display: inline-block
  }

  .popover_content_morepage .tag_container .close_flat:hover {
    background: url(https://mp.weixin.qq.com/mpres/zh_CN/htmledition/comm_htmledition/style/page/menu/index_z3ff724.png) 0 -65px no-repeat;
    cursor: pointer
  }

  .frm_tips {
    position: relative
  }

  .frm_tips .popover {
    position: absolute;
    top: 0;
    margin-top: -200px;
    left: 200px
  }

  .moblie_preview_weapp {
    position: absolute;
    top: 95px;
    left: 28px;
    width: 271px;
    height: 486px;
    background-color: #efeff4;
    text-align: center
  }

  .moblie_preview_weapp .weapp_hd {
    width: 100%;
    height: 50px;
    background: transparent url(https://mp.weixin.qq.com/mpres/htmledition/images/bg/bg_mobile_head_weapp.png) no-repeat 0 0;
    background-size: contain
  }

  .moblie_preview_weapp .weapp_hd .icon_back_weapp {
    display: inline-block;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 0
  }

  .moblie_preview_weapp .weapp_hd .icon_back_weapp:before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 18px;
    background: transparent url(https://mp.weixin.qq.com/mpres/htmledition/images/icon/advanced/icon_weapp_back.png) no-repeat 0 0;
    background-size: contain;
    margin-top: 12px
  }

  .moblie_preview_weapp .weapp_logo {
    margin-top: 60px
  }

  .moblie_preview_weapp .weapp_logo img {
    width: 80px;
    height: 80px;
    border-radius: 50%
  }

  .moblie_preview_weapp .weapp_title {
    padding-top: 20px;
    font-size: 14px;
    width: 12em;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
  }

  .moblie_preview_weapp .preview_extra {
    padding-top: 190px;
    width: 100%;
    color: #8d8d8d
  }
  .weui-desktop-msg-sender__tabs {
    line-height: 38px;
    background-color: #FFFFFF;
  }
  .sender__tab_selected {
    color: #44B549;
  }
  .weui-desktop-msg-sender__tab:hover, .weui-desktop-msg-sender__tab_selected {
    color: #44B549;
  }
  .weui-desktop-msg-sender__tab {
    display: inline-block;
    padding: 0 20px;
    cursor: pointer;
  }
  .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_text:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_text:before {
    background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_text_current.svg);
  }
  .weui-desktop-msg-sender__tab_img:before {
    background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_img:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_img:before {
    background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img_current.svg);
  }
  .weui-desktop-msg-sender__tab_video:before {
    background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_video.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_video:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_video:before {
    background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_video_current.svg);
  }
  .weui-desktop-msg-sender__tab_audio:before {
    background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_audio.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_audio:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_audio:before {
    background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_audio_current.svg);
  }
  .weui-desktop-msg-sender__tab_appmsg:before {
    background: transparent url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_appmsg3c96b5.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_appmsg:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_appmsg:before {
    background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_appmsg_current3c96b5.svg);
  }
  .weui-desktop-msg-sender__tab:before {
    content: " ";
    display: inline-block;
    width: 22px;
    height: 20px;
    vertical-align: middle;
    margin: -0.2em 5px 0 0;
  }
  .inner {
    position: relative;
    border: 1px solid #E4E8EB;
    background-color: #FFFFFF;
  }
  .inner-bottom {
    border-top: 1px solid #E4E8EB;
  }
  .img-action {
    padding: 17px 20px;
    min-height: 215px;
    text-align: center;
  }
  .img-create-access {
    position: relative;
    border: 2px dotted #E4E8EB;
    width: 48.6%;
    height: 211px;
    text-align: center;
  }
  /*.img-create-access:first-child {*/
  /*float: left;*/
  /*}*/
  .img-create-access__link {
    display: inline-block;
    vertical-align: middle;
    color: #9A9A9A;
    margin: 0 10px;
    margin-top: 68px;
    text-decoration: none;
  }
  .img-create-access__link:before {
    content: " ";
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto 5px;
    background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/images/icon36_add_gray.png) no-repeat 0 0;
  }
  .news-media {
    padding: 10px;
    width: 300px;
  }
  .news-media img{
    width: 100%;
  }
  .s-news img {
    width: 50px;
    float: right;
  }
  .title {
    font-size: 16px;
    font-weight: 400;
    display: block;
    line-height: 1.2;
    color: #353535;
  }
  .digest {
    padding-top: 12px;
    color: #9A9A9A;
    font-size: 14px;
  }
  .single-cover {
    /*padding: 20px 15px 15px;*/
  }
  .muti-cover {
    position: relative;
    padding: 20px 15px 0 15px;
  }
  .bottom-title {
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.55);
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;
    padding: 8px 12px;
  }
  .next-cover {
    padding: 12px 15px;
    position: relative;
  }
  .next-img {
    float: right;
    margin-left: 12px;
    width: 60px !important;
    height: 60px !important;
  }
  .next-title {
    overflow: hidden;
    font-weight: 400;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    color: #353535;
  }
  .single-cover:hover .preview,.bottomCover:hover .preview{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .preview {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    text-decoration: none;
  }
  .emotion_switch {
    float: left;
    height: 28px;
    line-height: 999em;
    overflow: hidden;
    background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/reply/images/icon_emotion_switch.png) no-repeat 0 0;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
  }
</style>
