BJ_ZTEITS-Developers / parking-cloud-yudao

Commit bc870434c2721da7040971a272e4e8142f495a21

Authored by YunaiV
1 parent 1e63198f

mp：初始化【图文草稿箱】前端界面

Inline Side-by-side
Showing 3 changed files with 786 additions and 2 deletions
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/news/MpDraftController.java
  View file @bc87043
... ... @@ -36,7 +36,7 @@ public class MpDraftController {
36 36 @GetMapping("/page")
37 37 @ApiOperation("获得草稿分页")
38 38 public CommonResult<PageResult<WxMpDraftItem>> getDraftPage(MpDraftPageReqVO reqVO) {
39   - // 从公众号查询已发布的图文列表
  39 + // 从公众号查询草稿箱
40 40 WxMpService mpService = mpServiceFactory.getRequiredMpService(reqVO.getAccountId());
41 41 WxMpDraftList draftList;
42 42 try {
... ...
yudao-ui-admin/src/views/mp/components/wx-material-select/main.vue
  View file @bc87043
... ... @@ -106,7 +106,7 @@
106 106 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue';
107 107 import { getMaterialPage } from "@/api/mp/material";
108 108 import { getFreePublishPage } from "@/api/mp/freePublish";
109   - import {getDraftPage} from "@/api/mp/draft";
  109 + import { getDraftPage } from "@/api/mp/draft";
110 110  
111 111 export default {
112 112 name: "wxMaterialSelect",
... ...
yudao-ui-admin/src/views/mp/draft/index.vue 0 → 100644
  View file @bc87043
  1 +<!--
  2 +MIT License
  3 +
  4 +Copyright (c) 2020 www.joolun.com
  5 +
  6 +Permission is hereby granted, free of charge, to any person obtaining a copy
  7 +of this software and associated documentation files (the "Software"), to deal
  8 +in the Software without restriction, including without limitation the rights
  9 +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  10 +copies of the Software, and to permit persons to whom the Software is
  11 +furnished to do so, subject to the following conditions:
  12 +
  13 +The above copyright notice and this permission notice shall be included in all
  14 +copies or substantial portions of the Software.
  15 +
  16 +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  17 +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  18 +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  19 +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  20 +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  21 +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  22 +SOFTWARE.
  23 +-->
  24 +<template>
  25 + <div class="app-container">
  26 + <!-- 搜索工作栏 -->
  27 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
  28 + <el-form-item label="公众号" prop="accountId">
  29 + <el-select v-model="queryParams.accountId" placeholder="请选择公众号">
  30 + <el-option v-for="item in accounts" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
  31 + </el-select>
  32 + </el-form-item>
  33 + <el-form-item>
  34 + <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  35 + <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  36 + </el-form-item>
  37 + </el-form>
  38 +
  39 + <!-- 操作工具栏 -->
  40 + <el-row :gutter="10" class="mb8">
  41 + <el-col :span="1.5">
  42 + <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddNews"
  43 + v-hasPermi="['mp:draft:create']">新增
  44 + </el-button>
  45 + </el-col>
  46 + <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  47 + </el-row>
  48 +
  49 + <!-- 列表 -->
  50 + <div class="waterfall" v-loading="loading">
  51 + <div v-if="item.content && item.content.newsItem" class="waterfall-item" v-for="item in list"
  52 + :key='item.articleId'>
  53 + <wx-news :articles="item.content.newsItem" />
  54 + <!-- TODO 芋艿：权限、样式（搜索框之类的） -->
  55 + <el-row class="ope-row">
  56 + <el-button type="success" circle @click="handlePublishNews(item)">发布</el-button>
  57 + <el-button type="primary" icon="el-icon-edit" circle @click="handleEditNews(item)"></el-button>
  58 + <el-button type="danger" icon="el-icon-delete" circle @click="delMaterial(item)"></el-button>
  59 + </el-row>
  60 + </div>
  61 + </div>
  62 + <!-- 分页记录 -->
  63 + <div v-if="list.length <=0 && !loading" class="el-table__empty-block">
  64 + <span class="el-table__empty-text">暂无数据</span>
  65 + </div>
  66 + <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
  67 + @pagination="getList"/>
  68 +
  69 + <!-- TODO 芋艿：位置调整 -->
  70 + <el-dialog :title="operateMaterial === 'add'?'新建图文':'修改图文'"
  71 + append-to-body
  72 + :before-close="dialogNewsClose"
  73 + :close-on-click-modal="false"
  74 + :visible.sync="dialogNewsVisible"
  75 + width="80%"
  76 + top="20px">
  77 + <div class="left">
  78 + <div class="select-item">
  79 + <div v-for="(news, index) in articlesAdd" :key='news.id'>
  80 + <div class="news-main father" v-if="index === 0" :class="{'activeAddNews': isActiveAddNews === index}"
  81 + @click="activeNews(index)">
  82 + <div class="news-content">
  83 + <img class="material-img" v-if="news.thumbUrl" :src="news.thumbUrl"/>
  84 + <div class="news-content-title">{{news.title}}</div>
  85 + </div>
  86 + <div class="child" v-if="articlesAdd.length>1">
  87 + <el-button type="mini" icon="el-icon-sort-down" @click="downNews(index)">下移</el-button>
  88 + <el-button v-if="operateMaterial === 'add'" type="mini" icon="el-icon-delete"
  89 + @click="minusNews(index)">删除
  90 + </el-button>
  91 + </div>
  92 + </div>
  93 + <div class="news-main-item father" v-if="index>0" :class="{'activeAddNews': isActiveAddNews === index}"
  94 + @click="activeNews(index)">
  95 + <div class="news-content-item">
  96 + <div class="news-content-item-title ">{{news.title}}</div>
  97 + <div class="news-content-item-img">
  98 + <img class="material-img" v-if="news.thumbUrl" :src="news.thumbUrl" height="100%"/>
  99 + </div>
  100 + </div>
  101 + <div class="child">
  102 + <el-button v-if="articlesAdd.length > index+1" type="mini" icon="el-icon-sort-down"
  103 + @click="downNews(index)">下移
  104 + </el-button>
  105 + <el-button type="mini" icon="el-icon-sort-up" @click="upNews(index)">上移</el-button>
  106 + <el-button v-if="operateMaterial=='add'" type="mini" icon="el-icon-delete"
  107 + @click="minusNews(index)">删除
  108 + </el-button>
  109 + </div>
  110 + </div>
  111 + </div>
  112 + <div class="news-main-plus" @click="plusNews" v-if="articlesAdd.length<8 && operateMaterial=='add'">
  113 + <i class="el-icon-circle-plus icon-plus"></i>
  114 + </div>
  115 + </div>
  116 + </div>
  117 + <div class="right" v-loading="addMaterialLoading">
  118 + <!--富文本编辑器组件-->
  119 + <el-row>
  120 + <WxEditor v-model="articlesAdd[isActiveAddNews].content" :uploadData="uploadData"
  121 + v-if="hackResetEditor"/>
  122 + </el-row>
  123 + <br><br><br><br>
  124 + <div class="input-tt">封面和摘要：</div>
  125 + <div>
  126 + <div class="thumb-div">
  127 + <img class="material-img" v-if="articlesAdd[isActiveAddNews].thumbUrl"
  128 + :src="articlesAdd[isActiveAddNews].thumbUrl" :class="isActiveAddNews == 0 ? 'avatar':'avatar1'">
  129 + <i v-else class="el-icon-plus avatar-uploader-icon"
  130 + :class="isActiveAddNews === 0 ? 'avatar':'avatar1'"></i>
  131 + <div class="thumb-but">
  132 + <el-upload
  133 + :action="actionUrl"
  134 + :headers="headers"
  135 + multiple
  136 + :limit="1"
  137 + :on-success="handleUploadSuccess"
  138 + :file-list="fileList"
  139 + :before-upload="beforeThumbImageUpload"
  140 + :data="uploadData">
  141 + <el-button slot="trigger" size="mini" type="primary">
  142 + 本地上传
  143 + </el-button>
  144 + <el-button size="mini" type="primary"
  145 + @click="openMaterial" style="margin-left: 5px">素材库选择
  146 + </el-button>
  147 + <div slot="tip" class="el-upload__tip">支持bmp/png/jpeg/jpg/gif格式，大小不超过2M</div>
  148 + </el-upload>
  149 + </div>
  150 + </div>
  151 + <el-dialog title="选择图片" :visible.sync="dialogImageVisible" width="80%" append-to-body>
  152 + <WxMaterialSelect :objData="{repType:'image'}"
  153 + @selectMaterial="selectMaterial"></WxMaterialSelect>
  154 + </el-dialog>
  155 + <el-input :rows="8" type="textarea" v-model="articlesAdd[isActiveAddNews].digest" placeholder="请输入摘要"
  156 + class="digest" maxlength="120"></el-input>
  157 + </div>
  158 + <div class="input-tt">标题：</div>
  159 + <el-input v-model="articlesAdd[isActiveAddNews].title" placeholder="请输入标题"></el-input>
  160 + <div class="input-tt">作者：</div>
  161 + <el-input v-model="articlesAdd[isActiveAddNews].author" placeholder="请输入作者"></el-input>
  162 + <div class="input-tt">原文地址：</div>
  163 + <el-input v-model="articlesAdd[isActiveAddNews].contentSourceUrl" placeholder="请输入原文地址"></el-input>
  164 + </div>
  165 + <div slot="footer" class="dialog-footer">
  166 + <el-button @click="dialogNewsVisible = false">取 消</el-button>
  167 + <el-button type="primary" @click="subNews">提 交</el-button>
  168 + </div>
  169 + </el-dialog>
  170 + </div>
  171 +</template>
  172 +
  173 +<script>
  174 +// import {getPage, addObj, delObj, putObj, publish} from '@/api/wxmp/wxdraft'
  175 +// import { getPage as getPage1 } from '@/api/wxmp/wxmaterial'
  176 +// import WxEditor from '@/components/Editor/WxEditor.vue'
  177 +import WxNews from '@/views/mp/components/wx-news/main.vue';
  178 +import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
  179 +import { getAccessToken } from '@/utils/auth'
  180 +import { getDraftPage } from "@/api/mp/draft";
  181 +import {getSimpleAccounts} from "@/api/mp/account";
  182 +
  183 +export default {
  184 + name: 'mpDraft',
  185 + components: {
  186 + // WxEditor,
  187 + WxNews,
  188 + WxMaterialSelect
  189 + },
  190 + data() {
  191 + return {
  192 + // 遮罩层
  193 + loading: false,
  194 + // 显示搜索条件
  195 + showSearch: true,
  196 + // 总条数
  197 + total: 0,
  198 + // 数据列表
  199 + list: [],
  200 + queryParams: {
  201 + pageNo: 1,
  202 + pageSize: 10,
  203 + accountId: undefined,
  204 + },
  205 +
  206 + page1: {
  207 + total: 0, // 总页数
  208 + currentPage: 1, // 当前页数
  209 + pageSize: 10 // 每页显示多少条
  210 + },
  211 + actionUrl: process.env.VUE_APP_BASE_API +'/wxmaterial/materialFileUpload',
  212 + headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
  213 + fileList: [],
  214 + dialogVideoVisible: false,
  215 + dialogNewsVisible: false,
  216 + addMaterialLoading: false,
  217 + uploadData: {
  218 + "mediaType": 'image',
  219 + "title": '',
  220 + "introduction": ''
  221 + },
  222 + articlesAdd: [
  223 + {
  224 + "title": '',
  225 + "thumbMediaId": '',
  226 + "author": '',
  227 + "digest": '',
  228 + "showCoverPic": '',
  229 + "content": '',
  230 + "contentSourceUrl": '',
  231 + "needOpenComment": '',
  232 + "onlyFansCanComment": '',
  233 + "thumbUrl": ''
  234 + }
  235 + ],
  236 + isActiveAddNews: 0,
  237 + dialogImageVisible: false,
  238 + imageListData: [],
  239 + tableLoading1: false,
  240 + operateMaterial: 'add',
  241 + articlesMediaId: '',
  242 + hackResetEditor: false,
  243 +
  244 + // 公众号账号列表
  245 + accounts: [],
  246 + }
  247 + },
  248 + created() {
  249 + getSimpleAccounts().then(response => {
  250 + this.accounts = response.data;
  251 + // 默认选中第一个
  252 + if (this.accounts.length > 0) {
  253 + this.queryParams.accountId = this.accounts[0].id;
  254 + }
  255 + // 加载数据
  256 + this.getList();
  257 + })
  258 + },
  259 + methods: {
  260 + /** 查询列表 */
  261 + getList() {
  262 + // 如果没有选中公众号账号，则进行提示。
  263 + if (!this.queryParams.accountId) {
  264 + this.$message.error('未选中公众号，无法查询草稿箱')
  265 + return false
  266 + }
  267 +
  268 + this.loading = true
  269 + getDraftPage((this.queryParams)).then(response => {
  270 + // 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
  271 + response.data.list.forEach(item => {
  272 + const newsItem = item.content.newsItem;
  273 + newsItem.forEach(article => {
  274 + article.picUrl = article.thumbUrl;
  275 + })
  276 + })
  277 + this.list = response.data.list
  278 + this.total = response.data.total
  279 + }).finally(() => {
  280 + this.loading = false
  281 + })
  282 + },
  283 +
  284 + delMaterial(item){
  285 + this.$confirm('此操作将永久删除该草稿, 是否继续?', '提示', {
  286 + confirmButtonText: '确定',
  287 + cancelButtonText: '取消',
  288 + type: 'warning'
  289 + }).then(() => {
  290 + this.loading = true
  291 + delObj({
  292 + id:item.mediaId
  293 + }).then(response => {
  294 + this.loading = false
  295 + if(response.code == 200){
  296 + this.getList(this.queryParams)
  297 + }else{
  298 + this.loading = false
  299 + this.$message.error('删除出错：' + response.msg)
  300 + }
  301 + }).catch(() => {
  302 + this.loading = false
  303 + })
  304 + })
  305 + },
  306 + getPage1(){
  307 + this.tableLoading1 = true
  308 + getPage1({
  309 + current: this.page1.currentPage,
  310 + size: this.page1.pageSize,
  311 + type:'image'
  312 + }).then(response => {
  313 + this.tableLoading1 = false
  314 + this.imageListData = response.data.items
  315 + this.page1.total = response.data.totalCount
  316 + }).catch(() => {
  317 + this.tableLoading1 = false
  318 + })
  319 + },
  320 + openMaterial(){
  321 + this.imageListData = null
  322 + this.page1.currentPage = 1
  323 + this.getPage1()
  324 + this.dialogImageVisible = true
  325 + },
  326 + dialogNewsClose(done){
  327 + this.$confirm('修改内容可能还未保存，确定关闭吗?', '提示', {
  328 + confirmButtonText: '确定',
  329 + cancelButtonText: '取消',
  330 + type: 'warning'
  331 + }).then(() => {
  332 + this.hackResetEditor = false//销毁组件
  333 + this.$nextTick(() => {
  334 + this.hackResetEditor = true//重建组件
  335 + })
  336 + this.isActiveAddNews = 0
  337 + done()
  338 + }).catch(() => {
  339 + })
  340 + },
  341 + downNews(index){
  342 + let temp = this.articlesAdd[index]
  343 + this.articlesAdd[index] = this.articlesAdd[index+1]
  344 + this.articlesAdd[index+1] = temp
  345 + this.isActiveAddNews = index+1
  346 + },
  347 + upNews(index){
  348 + let temp = this.articlesAdd[index]
  349 + this.articlesAdd[index] = this.articlesAdd[index-1]
  350 + this.articlesAdd[index-1] = temp
  351 + this.isActiveAddNews = index-1
  352 + },
  353 + activeNews(index){
  354 + this.hackResetEditor = false//销毁组件
  355 + this.$nextTick(() => {
  356 + this.hackResetEditor = true//重建组件
  357 + })
  358 + this.isActiveAddNews = index
  359 + },
  360 + minusNews(index){
  361 + this.$confirm('确定删除该图文吗?', '提示', {
  362 + confirmButtonText: '确定',
  363 + cancelButtonText: '取消',
  364 + type: 'warning'
  365 + }).then(() => {
  366 + this.articlesAdd.splice(index,1);
  367 + if(this.isActiveAddNews === index){
  368 + this.isActiveAddNews = 0
  369 + }
  370 + }).catch(() => {})
  371 + },
  372 + plusNews(){
  373 + this.articlesAdd.push(
  374 + {
  375 + "title": '',
  376 + "thumbMediaId": '',
  377 + "author": '',
  378 + "digest": '',
  379 + "showCoverPic": '',
  380 + "content": '',
  381 + "contentSourceUrl": '',
  382 + "needOpenComment":'',
  383 + "onlyFansCanComment":'',
  384 + "thumbUrl":''
  385 + }
  386 + )
  387 + this.isActiveAddNews = this.articlesAdd.length - 1
  388 + },
  389 + subNews(){
  390 + this.addMaterialLoading = true
  391 + if(this.operateMaterial == 'add'){
  392 + addObj({
  393 + articles:this.articlesAdd
  394 + }).then(response => {
  395 + this.addMaterialLoading = false
  396 + this.dialogNewsVisible = false
  397 + if(response.code == 200){
  398 + this.isActiveAddNews = 0
  399 + this.articlesAdd = [
  400 + {
  401 + "title": '',
  402 + "thumbMediaId": '',
  403 + "author": '',
  404 + "digest": '',
  405 + "showCoverPic": '',
  406 + "content": '',
  407 + "contentSourceUrl": '',
  408 + "needOpenComment":'',
  409 + "onlyFansCanComment":'',
  410 + "thumbUrl":''
  411 + }
  412 + ]
  413 + this.queryParams.currentPage = 1
  414 + this.getList(this.queryParams)
  415 + }else{
  416 + this.$message.error('新增图文出错：' + response.msg)
  417 + }
  418 + }).catch(() => {
  419 + this.addMaterialLoading = false
  420 + })
  421 + }
  422 + if(this.operateMaterial == 'edit'){
  423 + putObj({
  424 + articles:this.articlesAdd,
  425 + mediaId:this.articlesMediaId
  426 + }).then(response => {
  427 + this.addMaterialLoading = false
  428 + this.dialogNewsVisible = false
  429 + if(response.code == 200){
  430 + this.isActiveAddNews = 0
  431 + this.articlesAdd = [
  432 + {
  433 + "title": '',
  434 + "thumbMediaId": '',
  435 + "author": '',
  436 + "digest": '',
  437 + "showCoverPic": '',
  438 + "content": '',
  439 + "contentSourceUrl": '',
  440 + "needOpenComment":'',
  441 + "onlyFansCanComment":'',
  442 + "thumbUrl":''
  443 + }
  444 + ]
  445 + this.getList(this.queryParams)
  446 + }else{
  447 + this.$message.error('修改图文出错：' + response.msg)
  448 + }
  449 + }).catch(() => {
  450 + this.addMaterialLoading = false
  451 + })
  452 + }
  453 + },
  454 + handleEditNews(item){
  455 + this.hackResetEditor = false//销毁组件
  456 + this.$nextTick(() => {
  457 + this.hackResetEditor = true//重建组件
  458 + })
  459 + if(this.operateMaterial == 'add'){
  460 + this.isActiveAddNews = 0
  461 + }
  462 + this.operateMaterial = 'edit'
  463 + this.articlesAdd = JSON.parse(JSON.stringify(item.content.newsItem))
  464 + this.articlesMediaId = item.mediaId
  465 + this.dialogNewsVisible = true
  466 + },
  467 + handleAddNews(){
  468 + this.hackResetEditor = false//销毁组件
  469 + this.$nextTick(() => {
  470 + this.hackResetEditor = true//重建组件
  471 + })
  472 + if(this.operateMaterial == 'edit'){
  473 + this.isActiveAddNews = 0
  474 + this.articlesAdd = [
  475 + {
  476 + "title": '',
  477 + "thumbMediaId": '',
  478 + "author": '',
  479 + "digest": '',
  480 + "showCoverPic": '',
  481 + "content": '',
  482 + "contentSourceUrl": '',
  483 + "needOpenComment":'',
  484 + "onlyFansCanComment":'',
  485 + "thumbUrl":''
  486 + }
  487 + ]
  488 + }
  489 + this.operateMaterial = 'add'
  490 + this.dialogNewsVisible = true
  491 + },
  492 + beforeThumbImageUpload(file){
  493 + this.addMaterialLoading = true
  494 + const isType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp' || file.type === 'image/jpg';
  495 + const isLt = file.size / 1024 / 1024 < 2
  496 + if (!isType) {
  497 + this.$message.error('上传图片格式不对!')
  498 + }
  499 + if (!isLt) {
  500 + this.$message.error('上传图片大小不能超过2M!')
  501 + }
  502 + this.addMaterialLoading = false
  503 + return isType && isLt;
  504 + },
  505 + handleUploadSuccess(response, file, fileList){
  506 + this.loading = false
  507 + this.addMaterialLoading = false
  508 + if(response.code == 200){
  509 + this.dialogVideoVisible = false
  510 + this.fileList = []
  511 + this.uploadData.title = ''
  512 + this.uploadData.introduction = ''
  513 + this.articlesAdd[this.isActiveAddNews].thumbMediaId = response.data.mediaId
  514 + this.articlesAdd[this.isActiveAddNews].thumbUrl = response.data.url
  515 + }else{
  516 + this.$message.error('上传出错：' + response.msg)
  517 + }
  518 + },
  519 + selectMaterial(item){
  520 + this.dialogImageVisible = false
  521 + this.articlesAdd[this.isActiveAddNews].thumbMediaId = item.mediaId
  522 + this.articlesAdd[this.isActiveAddNews].thumbUrl = item.url
  523 + },
  524 + handlePublishNews(item){
  525 + this.$confirm('你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。已发布内容不会推送给用户，也不会展示在公众号主页中。 发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。', '提示', {
  526 + confirmButtonText: '确定',
  527 + cancelButtonText: '取消',
  528 + type: 'warning'
  529 + }).then(() => {
  530 + this.loading = true
  531 + publish(item.mediaId).then(response => {
  532 + this.loading = false
  533 + this.$message.success('发布任务提交成功')
  534 + this.getList(this.queryParams)
  535 + }).catch(() => {
  536 + this.loading = false
  537 + })
  538 + }).catch(() => {
  539 + })
  540 + }
  541 + }
  542 +}
  543 +</script>
  544 +
  545 +<style lang="scss" scoped>
  546 + .pagination {
  547 + float: right;
  548 + margin-right: 25px;
  549 + }
  550 +
  551 + .add_but {
  552 + padding: 10px;
  553 + }
  554 +
  555 + .ope-row {
  556 + margin-top: 5px;
  557 + text-align: center;
  558 + border-top: 1px solid #eaeaea;
  559 + padding-top: 5px;
  560 + }
  561 +
  562 + .item-name {
  563 + font-size: 12px;
  564 + overflow: hidden;
  565 + text-overflow: ellipsis;
  566 + white-space: nowrap;
  567 + text-align: center;
  568 + }
  569 +
  570 + .el-upload__tip {
  571 + margin-left: 5px;
  572 + }
  573 +
  574 + /*新增图文*/
  575 + .left {
  576 + display: inline-block;
  577 + width: 35%;
  578 + vertical-align: top;
  579 + margin-top: 200px;
  580 + }
  581 +
  582 + .right {
  583 + display: inline-block;
  584 + width: 60%;
  585 + margin-top: -40px;
  586 + }
  587 +
  588 + .avatar-uploader {
  589 + width: 20%;
  590 + display: inline-block;
  591 + }
  592 +
  593 + .avatar-uploader .el-upload {
  594 + border-radius: 6px;
  595 + cursor: pointer;
  596 + position: relative;
  597 + overflow: hidden;
  598 + text-align: unset !important;
  599 + }
  600 +
  601 + .avatar-uploader .el-upload:hover {
  602 + border-color: #165dff;
  603 + }
  604 +
  605 + .avatar-uploader-icon {
  606 + border: 1px solid #d9d9d9;
  607 + font-size: 28px;
  608 + color: #8c939d;
  609 + width: 120px;
  610 + height: 120px;
  611 + line-height: 120px;
  612 + text-align: center;
  613 + }
  614 +
  615 + .avatar {
  616 + width: 230px;
  617 + height: 120px;
  618 + }
  619 +
  620 + .avatar1 {
  621 + width: 120px;
  622 + height: 120px;
  623 + }
  624 +
  625 + .digest {
  626 + width: 60%;
  627 + display: inline-block;
  628 + vertical-align: top;
  629 + }
  630 +
  631 + /*新增图文*/
  632 + /*瀑布流样式*/
  633 + .waterfall {
  634 + width: 100%;
  635 + column-gap: 10px;
  636 + column-count: 5;
  637 + margin: 0 auto;
  638 + }
  639 +
  640 + .waterfall-item {
  641 + padding: 10px;
  642 + margin-bottom: 10px;
  643 + break-inside: avoid;
  644 + border: 1px solid #eaeaea;
  645 + }
  646 +
  647 + p {
  648 + line-height: 30px;
  649 + }
  650 +
  651 + @media (min-width: 992px) and (max-width: 1300px) {
  652 + .waterfall {
  653 + column-count: 3;
  654 + }
  655 + p {
  656 + color: red;
  657 + }
  658 + }
  659 +
  660 + @media (min-width: 768px) and (max-width: 991px) {
  661 + .waterfall {
  662 + column-count: 2;
  663 + }
  664 + p {
  665 + color: orange;
  666 + }
  667 + }
  668 +
  669 + @media (max-width: 767px) {
  670 + .waterfall {
  671 + column-count: 1;
  672 + }
  673 + }
  674 +
  675 + /*瀑布流样式*/
  676 + .news-main {
  677 + background-color: #FFFFFF;
  678 + width: 100%;
  679 + margin: auto;
  680 + height: 120px;
  681 + }
  682 +
  683 + .news-content {
  684 + background-color: #acadae;
  685 + width: 100%;
  686 + height: 120px;
  687 + position: relative;
  688 + }
  689 +
  690 + .news-content-title {
  691 + display: inline-block;
  692 + font-size: 15px;
  693 + color: #FFFFFF;
  694 + position: absolute;
  695 + left: 0px;
  696 + bottom: 0px;
  697 + background-color: black;
  698 + width: 98%;
  699 + padding: 1%;
  700 + opacity: 0.65;
  701 + overflow: hidden;
  702 + text-overflow: ellipsis;
  703 + white-space: nowrap;
  704 + height: 25px;
  705 + }
  706 +
  707 + .news-main-item {
  708 + background-color: #FFFFFF;
  709 + padding: 5px 0px;
  710 + border-top: 1px solid #eaeaea;
  711 + width: 100%;
  712 + margin: auto;
  713 + }
  714 +
  715 + .news-content-item {
  716 + position: relative;
  717 + margin-left: -3px
  718 + }
  719 +
  720 + .news-content-item-title {
  721 + display: inline-block;
  722 + font-size: 12px;
  723 + width: 70%;
  724 + }
  725 +
  726 + .news-content-item-img {
  727 + display: inline-block;
  728 + width: 25%;
  729 + background-color: #acadae
  730 + }
  731 +
  732 + .input-tt {
  733 + padding: 5px;
  734 + }
  735 +
  736 + .activeAddNews {
  737 + border: 5px solid #2bb673;
  738 + }
  739 +
  740 + .news-main-plus {
  741 + width: 280px;
  742 + text-align: center;
  743 + margin: auto;
  744 + height: 50px;
  745 + }
  746 +
  747 + .icon-plus {
  748 + margin: 10px;
  749 + font-size: 25px;
  750 + }
  751 +
  752 + .select-item {
  753 + width: 60%;
  754 + padding: 10px;
  755 + margin: 0 auto 10px auto;
  756 + border: 1px solid #eaeaea;
  757 + }
  758 +
  759 + .father .child {
  760 + display: none;
  761 + text-align: center;
  762 + position: relative;
  763 + bottom: 25px;
  764 + }
  765 +
  766 + .father:hover .child {
  767 + display: block;
  768 + }
  769 +
  770 + .thumb-div {
  771 + display: inline-block;
  772 + width: 30%;
  773 + text-align: center;
  774 + }
  775 +
  776 + .thumb-but {
  777 + margin: 5px;
  778 + }
  779 +
  780 + .material-img {
  781 + width: 100%;
  782 + height: 100%;
  783 + }
  784 +</style>
... ...