<template> <div v-if="show"> <el-dialog title="自动回复" center append-to-body :visible.sync="show" width="50%"> <div v-loading="loading"> <el-form ref="form" :model="form" :rules="rules" > <el-row> <el-col :span="4"><label>关键词</label></el-col> <el-col :span="8"> <el-form-item prop="value"> <el-input v-model="form.value"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="4"><label>回复内容</label></el-col> <el-col :span="20"> <template v-if="form.desc"> <div v-for="(item, index) in JSON.parse(form.desc)" class="msg-item"> <span class="msg-text" v-if="item.type==='text'">{{item.content}}</span> <span class="msg-text" v-if="item.type==='voice'"><br>{{item.content.name}}</span> <img v-else-if="item.type==='image' && item.content" :src="item.content"/> <span v-else-if="item.type==='image' && item.variable" class="msg-text" >我的老师二维码</span> <a v-else-if="item.type==='video'" :href="item.content.down_url" target="_blank">{{item.content.title}}</a> <div v-else-if="item.type==='news' && item.content && item.content.news_item" class="news-media" style="display: inline-block"> <el-card :body-style="{ padding: '0px' }"> <div v-for="(child, childIndex) in item.content.news_item" style="position: relative"> <div v-if="item.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="item.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> </el-card> </div> <div v-else-if="item.type === 'link'" class="news-media" style="display: inline-block"> <el-card :body-style="{ padding: '0px' }"> <a :href="item.url" target="_blank" style="position: relative; color: #333; text-decoration: none;"> <div style="margin: 3px;line-height: 2" class="ellip">{{item.title}}</div> <div class="f-bt" style="position: relative;"> <div style="color: #666;margin-left: 3px;word-wrap: break-word;word-break: break-all;width: 60%;">{{item.description}}</div> <img :src="item.thumb_url" style="width: 35%; height: auto"/> </div> </a> </el-card> </div> <div v-else-if="item.type === 'news-item'" class="news-media" style="display: inline-block"> <el-card :body-style="{ padding: '0px' }"> <a :href="item.url" target="_blank" style="position: relative; color: #333; text-decoration: none;"> <img :src="item.thumb_url" style="width: 100%; height: auto"/> <div style="margin: 0;line-height: 2" class="ellip">{{item.title}}</div> <div style="color: #666;margin-left: 0;word-wrap: break-word;word-break: break-all;">{{item.description}}</div> </a> </el-card> </div> <i class="el-icon-edit" @click="onEditText(item, index)"></i> <i class="el-icon-delete" @click="onDelText(item, index)"></i> </div> </template> <div class="msg_sender_wrp" style="width:100%;"> <div> <i class="el-icon-circle-plus-outline" @click="onAddContent"></i> </div> <el-dialog width="50%" :title="title" :visible.sync="showType" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" append-to-body> <div> <el-tabs v-if="showType" v-model="type" type="card"> <el-tab-pane label="文字" name="text"></el-tab-pane> <el-tab-pane label="图片" name="image"></el-tab-pane> <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="图文消息" name="news"></el-tab-pane> <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="图文链接" name="news-item"></el-tab-pane> <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="语音" name="voice"></el-tab-pane> <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="视频" name="video"></el-tab-pane> <el-tab-pane label="链接" name="link"></el-tab-pane> </el-tabs> <div v-if="showType" class="more-info clear-both"> <template v-if="type=== 'text'"> <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="请输入内容" v-model="content"> </el-input> <div style="float:left;"> <el-popover placement="bottom-end" width="400" :offset="10" trigger="hover" 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> <el-button v-if="form.key !== 'mini_keywords_reply'" @click="addTeacherName" type="warning" plain style="margin-top: 10px;">添加老师名字</el-button> <el-button v-if="form.key !== 'mini_keywords_reply'" @click="addTeacherAlias" type="success" plain style="margin-top: 10px;">添加老师别名</el-button> </div> </template> <template v-if="type==='image'"> <div v-if="imageContent.url && form.key !== 'mini_keywords_reply'" class="img"> <img :src="imageContent.url"/> <i class="el-icon-delete" @click="imageContent={url:'',media_id:''}"></i> </div> <div v-if="imageContent.variable && form.key !== 'mini_keywords_reply'" class="img my-teacher"> <div>老师二维码</div> <i class="el-icon-delete" @click="imageContent={url:'',media_id:'',variable:''}"></i> </div> <div class="display-b" v-if="form.key !== 'mini_keywords_reply'"> <div class="choose_item" style="color: #888;" @click="getMediaList('image')">+从素材库中选择</div> <div class="choose_item" style="color: #888;" @click="addTeacherQrcode">+添加老师二维码</div> </div> <el-upload v-if="form.key === 'mini_keywords_reply'" action="/api/public/upload/zone" :http-request="uploadFile" :class="{disabled:!uploadShow}" :before-upload="beforeAvatarUpload" list-type="picture-card" :file-list="imageList" :on-success="handleAvatarSuccess" :on-remove="handleRemove" :limit="1"> <i class="el-icon-plus"></i> </el-upload> <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"> <img style="width: 60px;" :src="scope.row.url"/> </a> </template> </el-table-column> </el-table> <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> </div> </template> <template v-if="type==='video'"> <div v-if="videoContent && videoContent.info && videoContent.info.down_url"> <a :href="videoContent.info.down_url" target="_blank">{{videoContent.info.title}}</a> <i class="el-icon-delete" @click="videoContent=''"></i> </div> <div class="display-b"> <div class="choose_item" style="color: #888;" @click="getMediaList('video')">+从素材库中选择</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> <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> </div> </template> <template v-if="type==='voice'"> <div v-if="voiceContent"> {{voiceContent.name}} <i class="el-icon-delete" @click="voiceContent=''"></i> </div> <div class="display-b"> <div class="choose_item" style="color: #888;" @click="getMediaList('voice')">+从素材库中选择</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 v-if="scope.row.info && scope.row.info.down_url" :href="scope.row.info.down_url" target="_blank"> {{scope.row.info.title}} </a> </template> </el-table-column> </el-table> <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> </div> </template> <template v-if="type==='news'"> <div v-if="newsContent && newsContent.content && newsContent.content.news_item"> <div class="news-media" style="display: inline-block"> <el-card :body-style="{ padding: '0px' }"> <div v-for="(child, childIndex) in newsContent.content.news_item" style="position: relative"> <div v-if="newsContent.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="newsContent.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> </el-card> </div> <i class="el-icon-delete" @click="newsContent=''" style="display: inline-block"></i> </div> <div class="display-b"> <div class="choose_item" style="color: #888;" @click="getMediaList('news')">+从素材库中选择</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="URL"> <template slot-scope="scope"> <div class="news-media" style="display: inline-block;width: 200px;" v-if="scope.row.content && scope.row.content.news_item"> <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> </div> </template> </el-table-column> </el-table> <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> </div> </template> <template v-if="type==='link' || type==='news-item'"> <el-form-item label="标题"> <el-input v-model="linkContent.title"></el-input> </el-form-item> <el-form-item label="描述"> <el-input v-model="linkContent.description"></el-input> </el-form-item> <el-form-item label="跳转链接"> <el-input v-model="linkContent.url"></el-input> </el-form-item> <el-form-item label="缩略图"> <el-upload action="/api/public/upload/zone" :http-request="uploadFile" :class="{disabled:!uploadLinkShow}" :before-upload="beforeAvatarUpload" list-type="picture-card" :file-list="imageLinkList" :on-success="handleAvatarSuccess" :on-remove="handleRemove" :limit="1"> <i class="el-icon-plus"></i> </el-upload> </el-form-item> </template> <div class="tool_bar"> <el-button @click="close">取 消</el-button> <el-button class="weui-desktop-btn weui-desktop-btn_primary el-button--primary" @click="confirm">确定</el-button> </div> </div> </div> </el-dialog> </div> </el-col> </el-row> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="show = false">取 消</el-button> <el-button type="primary" @click="save">保 存</el-button> </span> </div> </el-dialog> </div> </template> <script> import {updateConfigApi,saveConfigApi,getMediaListApi,getTeacherListApi,uploadFileApi} from "../../service/api"; import page from '../framework/page' import emotion from '../framework/Emotion/index' export default { name: "dialogObj", props:[ 'dialogObj' ], data(){ return{ editIndex: -1, title: '', show:false, showEmotion: false, id: '', loading:true, showType: false, showTextContent: false, total:0, nowPage:1, limit: 5, type:'text', form:{ key:'keywords_reply', value:'', desc:'' }, teacher_id: '', start_at: '', textContent: '', mediaList: [], showMedia: false, teacherList: [], content: '', imageContent: { url: '', media_id: '' }, linkContent: { title: '', description: '', url: '', thumb_url: '' }, voiceContent:'', videoContent: '', newsContent: '', pickerOptions1: { disabledDate(time) { return !(time.getTime() > Date.now()); } }, rules:{ value:[ { required: true, message: '请输入规则名称', trigger: 'change' } ], desc:[ { required: true, message: '请输入回复内容', trigger: 'change' } ], qr:[ { required: true, message: '请输入二维码', trigger: 'change' } ] }, imageList: [], imageLinkList: [], uploadShow: true, uploadLinkShow: true } }, components:{ page, emotion }, methods:{ getTeacher(){ getTeacherListApi({page: 1, limit: 1000}).then(res=>{ this.teacherList = res.list }) }, save(){ let json = { key:this.form.key, value:this.form.value, desc:this.form.desc } if(this.dialogObj.id){ this.$refs['form'].validate((valid) => { if(valid){ updateConfigApi(this.id,json).then(res=>{ this.$message({ type: 'success', message: '修改成功!' }); this.$emit("reflash"); this.show = false; }) } }); }else{ this.$refs['form'].validate((valid) => { if(valid){ saveConfigApi(json).then(res=>{ this.$message({ type: 'success', message: '新增成功!' }); this.$emit("reflash"); this.show = false; }) } }); } }, addContent(type, content, mediaId, my_teacher) { let _form = this.form; let _desc = _form.desc ? JSON.parse(_form.desc) : []; let obj = { type: type }; console.log(content) if (content) { obj.content = content } if (mediaId) { obj.media_id = mediaId; } if (my_teacher) { obj.variable = my_teacher } if (this.editIndex > -1) { _desc.splice(this.editIndex,1,obj); } else { _desc.push(obj); } _form.desc = JSON.stringify(_desc); this.form = _form; this.showType = false; }, addLinkContent(type, title, description, url,thumb_url) { let _form = this.form; let _desc = _form.desc ? JSON.parse(_form.desc) : []; let obj = { type: type, title: title, description: description, url: url, thumb_url: thumb_url }; if (this.editIndex > -1) { _desc.splice(this.editIndex,1,obj); } else { _desc.push(obj); } _form.desc = JSON.stringify(_desc); this.form = _form; this.showType = false; }, initDialog(){ this.show = this.dialogObj.show; if (this.dialogObj.id) { this.id = this.dialogObj.id; } this.form.value = this.dialogObj.value; this.form.desc = this.dialogObj.desc; if (this.dialogObj.key) { this.form.key = this.dialogObj.key } this.loading = false; this.showType = false; }, onPageChange(val){ this.nowPage = val this.getMediaList(this.type) }, onSizeChange(val){ this.nowPage = 1 this.limit = val this.getMediaList(this.type) }, onChangeTab(type){ this.type = type; }, onAddContent(){ this.editIndex = -1; this.title = '添加回复'; this.content=''; this.voiceContent = ''; this.videoContent = ''; this.type = 'text'; this.imageContent = { url: '', media_id: '', variable: '' }; this.linkContent = { title: '', description: '', url: '', thumb_url: '' }; this.imageList = []; this.imageLinkList = []; this.teacher_id = ''; this.start_at = ''; this.showType = true; this.uploadShow = true; this.uploadLinkShow = true; }, onEditText(item, index) { this.title = '编辑回复'; this.type = item.type; this.editIndex = index; if (this.type === 'text') { this.content=item.content; } else if (this.type === 'link' || this.type === 'news-item') { this.linkContent = { url: item.url, title : item.title, description: item.description, thumb_url: item.thumb_url }; this.imageLinkList = [{name:'mini',url:item.thumb_url}]; this.uploadLinkShow = false; } else { if(item.content) { this.imageContent = { url: item.content, media_id: item.media_id }; } if (item.variable) { this.imageContent = { variable: item.variable }; } if(this.type === 'image' && this.form.key === 'mini_keywords_reply') { this.imageList = [{name:'mini',url:item.content}] this.uploadShow = false; } } this.showType = true; }, close(){ this.content=''; this.imageContent = { url: '', media_id: '' }; this.teacher_id = ''; this.start_at = ''; this.linkContent = { url: '', title : '', description: '', thumb_url: '' }; this.showType = false; }, confirm(){ if(this.type === 'text') { if(!this.content){ this.$message({ showClose: true, message: '请输入文本内容' }); } else { this.addContent('text', this.content, '',''); } } else if (this.type === 'image') { if (!this.imageContent.url && !this.imageContent.variable) { this.$message({ showClose: true, message: '请选择图片' }); } else { let _myTeacher = this.imageContent.variable ? this.imageContent.variable : ''; let _url = this.imageContent.url ? this.imageContent.url : ''; let _mediaId = this.imageContent.media_id ? this.imageContent.media_id : ''; this.addContent(this.type, _url, _mediaId,_myTeacher); } } else if (this.type === 'link' || this.type === 'news-item'){ if (!this.linkContent.title) { this.$message({ showClose: true, message: '请输入标题' }); return; } if (!this.linkContent.description) { this.$message({ showClose: true, message: '请输入描述' }); return; } if (!this.linkContent.url) { this.$message({ showClose: true, message: '请输入跳转链接' }); return; } if (!this.linkContent.thumb_url) { this.$message({ showClose: true, message: '请上传缩略图' }); return; } this.addLinkContent(this.type, this.linkContent.title, this.linkContent.description, this.linkContent.url,this.linkContent.thumb_url); } else if (this.type === 'news') { if (!this.newsContent) { this.$message({ showClose: true, message: '请选择图文' }); } else { let _url = this.newsContent.content ? this.newsContent.content : ''; let _mediaId = this.newsContent.media_id ? this.newsContent.media_id : ''; this.addContent(this.type, _url, _mediaId,''); } }else if (this.type === 'video') { if (!this.videoContent) { this.$message({ showClose: true, message: '请选择视频' }); } else { let _url = this.videoContent.info ? this.videoContent.info : ''; let _mediaId = this.videoContent.media_id ? this.videoContent.media_id : ''; this.addContent(this.type, _url, _mediaId,''); } }else if (this.type === 'voice') { if (!this.voiceContent) { this.$message({ showClose: true, message: '请选择音频' }); } else { let _url = this.voiceContent ? this.voiceContent : ''; let _mediaId = this.voiceContent.media_id ? this.voiceContent.media_id : ''; this.addContent(this.type, _url, _mediaId,''); } } }, getMediaList(type){ let json = { type: type, page: this.nowPage, limit: this.limit }; this.loading = true; this.showMedia = true; getMediaListApi(json).then(res=>{ this.loading = false; this.type = type; this.mediaList = res.item; this.total = res.total_count; if (this.total === 0 ) { this.$message({ showClose: true, message: '暂无数据' }); } }).catch(() => { this.loading = false; }) }, editContent() { this.$prompt('请输入文本', '提示', { confirmButtonText: '确定', cancelButtonText: '取消' }).then(({value}) => { this.addContent('text', value, '',''); }) }, onDelText(item, index) { let _form = this.form; this.$confirm('此操作将删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let _desc = JSON.parse(_form.desc); _desc.splice(index,1); _form.desc = JSON.stringify(_desc); this.$message({ type: 'success', message: '删除成功!' }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); this.form = _form; }, onChooseMedia(val){ if (this.type === 'image') { this.imageContent = val } else if (this.type === 'video'){ this.videoContent = val } else if (this.type === 'voice'){ this.voiceContent = val } else if (this.type === 'news'){ this.newsContent = val } this.showMedia = false; }, addTeacherQrcode(){ this.showMedia = false; this.imageContent = { variable:'my_teacher' } }, handleEmotion (i) { this.content += i }, addTeacherName(){ this.content += '{my_teacher_name}' }, addTeacherAlias(){ this.content += '{my_teacher_alias}' }, handleAvatarSuccess(res) { if (this.type === 'link' || this.type === 'news-item') { this.imageLinkList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}] } else { this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}] } }, beforeAvatarUpload(){ if (this.type === 'link' || this.type === 'news-item') { this.uploadLinkShow = false } else { this.uploadShow = false } }, uploadFile(a) { this.loading = true; this.$store.dispatch('setProgress',{type:'new',id:a.file.uid}); if (this.type === 'link' || this.type === 'news-item') { uploadFileApi({file:a.file,type:'local'}).then(res=>{ this.imageLinkList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}] this.loading = false; this.$message({ type: 'success', message: '上传成功!' }); this.linkContent.thumb_url = process.env.IMAGE_URL_HEAD + res.url; }).catch(()=>{ this.loading = false; }) } else { uploadFileApi({file:a.file,type:'mini'}).then(res=>{ this.uploadFileToQiniu(a, res); this.loading = false; }).catch(()=>{ this.loading = false; }) } }, uploadFileToQiniu(a, data) { this.loading = true; this.$store.dispatch('setProgress',{type:'new',id:a.file.uid}); uploadFileApi({file:a.file,type:'local'}).then(res=>{ this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}] this.loading = false; this.$message({ type: 'success', message: '上传成功!' }); this.imageContent = { url: process.env.IMAGE_URL_HEAD + res.url, media_id: data.media_id, name: res.url } }).catch(()=>{ this.loading = false; }) }, handleRemove(){ if (this.type === 'link' || this.type === 'news-item') { this.uploadLinkShow = true } else { this.uploadShow = true } } }, watch:{ dialogObj:{ handler: function () { this.loading = true; this.initDialog(); this.getTeacher(); }, deep: true }, show(value){ this.$emit("changeShow",value); } } } </script> <style scoped lang="less"> @import "../../util/public"; .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; } .msg-item { margin: 30px 0; width: 600px; img { width: 150px; padding: 10px; } } .msg-text { margin-right: 20px; } .dialog-footer{ display: block; text-align: center; margin-top: 30px; } .msg_sender_wrp { /*display: flex;*/ /*flex-flow: row wrap;*/ /*justify-content: flex-start;*/ /*align-items: center;*/ /*height: 48px;*/ /*position: absolute;*/ /*left: 100%;*/ /*top: 50%;*/ /*width: 500px;*/ /*z-index: 500;*/ /*-ms-transform: translateY(-50%);*/ /*transform: translateY(-50%);*/ /*background: #FFFFFF;*/ /*box-shadow: 0 1px 20px 0 #E4E8EB;*/ /*border-radius: 2px;*/ } .el-icon-circle-plus-outline { font-size: 28px; } .weui-desktop-msg-sender__tabs { line-height: 38px; background-color: #FFFFFF; } ul, ol { padding-left: 0; list-style-type: none; } .weui-desktop-msg-sender__tab { padding: 0 15px; float: left; cursor: pointer; } .weui-desktop-msg-sender__tab_appmsg:before { background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_appmsg3f92fe.svg) no-repeat 0 0; } .weui-desktop-msg-sender__tab:before { content: " "; display: inline-block; width: 22px; height: 20px; vertical-align: middle; margin: -0.2em 5px 0 0; } .weui-desktop-msg-sender__tab_text:before { background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_text3f92fe.svg) no-repeat 0 0; } .weui-desktop-msg-sender__tab_img:before { background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img3f92fe.svg) no-repeat 0 0; } .weui-desktop-msg-sender__tab_audio:before { background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_audio3f92fe.svg) no-repeat 0 0; } .weui-desktop-msg-sender__tab_video:before { background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_video3f92fe.svg) no-repeat 0 0; } .more-info { } .img { position: relative; width: 25%; img { width: 100%; } .el-icon-delete { position: absolute; top: 50%; left: 50%; display: none; } } .img:hover img{ opacity: 0.3; } .img:hover .el-icon-delete{ display: block; } .tool_bar { float: right; margin-top: 20px; } .choose_item { margin-bottom: 25px; color: rgb(136, 136, 136); height: 80px; line-height: 80px; width: 45%; border: 1px dashed; text-align: center; } .display-b { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .my-teacher { width: 25%; height: 80px; background-color: #eee; line-height: 80px; text-align: center; margin-bottom: 10px; } .news-media { padding: 10px; width: 25%; } .news-media .el-card{ padding: 10px; } .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: 15px 10px 10px; } .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; } .f-bt { display: flex; position: relative; justify-content: space-between; align-items: flex-start; } .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> <style> .disabled .el-upload--picture-card { display: none !important; } </style>