|
|
@@ -1,16 +1,117 @@
|
|
|
<template>
|
|
|
- <div class="manage-root">
|
|
|
+ <div class="manage-root create-article">
|
|
|
<Header/>
|
|
|
<breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
|
|
|
- <div class="manage-root-contain" :style="{height:tableHeight+'px'}">
|
|
|
- <el-form :model="articleForm" :rules="articleRules" ref="articleForm" label-width="100px" class="registerForm">
|
|
|
- </el-form>
|
|
|
+ <div class="manage-root-contain">
|
|
|
+ <div class="manage-root-contain-inner" :style="{height:tableHeight+'px'}">
|
|
|
+ <el-form :inline="true" :model="articleForm" :rules="articleRules" ref="articleForm" label-width="100px" class="registerForm" label-position="top">
|
|
|
+ <el-form-item label="标题" prop="title" class="title-box">
|
|
|
+ <el-input v-model="articleForm.title" autocomplete="off" placeholder="请输入标题" @blur="handleTrim('articleForm','title')" >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="来源" prop="source" class="source-box">
|
|
|
+ <el-input v-model="articleForm.source" autocomplete="off" placeholder="请输入来源" @blur="handleTrim('articleForm','source')" >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="Page" prop="page" class="page-box">
|
|
|
+ <el-input v-model="articleForm.page" autocomplete="off" placeholder="请输入" type="number" :min="1">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template v-if="type==='cn'">
|
|
|
+ <Editor
|
|
|
+ id="article-cn"
|
|
|
+ v-model="articleForm.articleCn"
|
|
|
+ :init="init"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <label class="item-label">课文读音</label>
|
|
|
+ <div class="article-mp3-box">
|
|
|
+ <ul v-if="articleForm.articleMp3.length>0" class="article-mp3-list">
|
|
|
+ <li v-for="(item,index) in articleForm.articleMp3" :key="index">
|
|
|
+ <a><svg-icon :icon-class="'mp3'" class="icon-logo"></svg-icon><span>{{item.name}}</span></a>
|
|
|
+ <i class="el-icon-error" @click="handleDelResource(index)"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <upload :class="['article-mp3']" :datafileList="articleForm.articleMp3" :changeFillId="handleAvatarSuccess" :fileName="'articleMp3'" uploadType="mp3" tips=' ' :filleNumber="1" :showList="true" />
|
|
|
+ <el-button type="primary" size="small" @click="handleSubtitle" :loading="subtitleLoading" v-if="!substitleReault">生成字幕</el-button>
|
|
|
+ <el-button size="small" @click="handleSubtitle" :loading="subtitleLoading" v-else>重新生成</el-button>
|
|
|
+ <p class="error-tips"><svg-icon icon-class="error-warning-line"></svg-icon>生成失败</p>
|
|
|
+ </div>
|
|
|
+ <el-input
|
|
|
+ style="width: 100%"
|
|
|
+ type="textarea"
|
|
|
+ :autosize="{ minRows: 20 }"
|
|
|
+ placeholder="请输入文章"
|
|
|
+ v-model="articleForm.articleEn"
|
|
|
+ @blur="onBlur(articleForm, 'articleEn')"
|
|
|
+ ></el-input>
|
|
|
+ <el-form :model="articleRecourseForm" :rules="articleResourceRules" ref="articleResourceForm" label-width="80px" class="registerForm" style="margin-top:16px">
|
|
|
+ <el-form-item label="生词" prop="newWordList">
|
|
|
+ <el-button type="primary" size="small" plain class="add-btn"><i class="el-icon-plus"></i> 添加生词</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="短语" prop="newWordList">
|
|
|
+ <el-button type="primary" size="small" plain class="add-btn"><i class="el-icon-plus"></i> 添加短语</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="注释" prop="newWordList">
|
|
|
+ <el-button type="primary" size="small" plain class="add-btn"><i class="el-icon-plus"></i> 添加注释</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片" prop="pictureList">
|
|
|
+ <upload :datafileList="articleRecourseForm.pictureList" :changeFillId="handleAvatarSuccess" :uploadType="'image'" :fileName="'pictureList'" :filleNumber="99" tips="支持上传jpg、png格式图片，单张大小不超过2mb" :showList="true" />
|
|
|
+ <ul v-if="articleRecourseForm.pictureList.length>0" class="resource-list">
|
|
|
+ <li v-for="(itemR,indexR) in articleRecourseForm.pictureList" :key="indexR">
|
|
|
+ <div>
|
|
|
+ <el-image
|
|
|
+ :src="itemR.url"
|
|
|
+ fit="contain" style="width:40px;height:40px;margin-right:12px"
|
|
|
+ :preview-src-list="[itemR.url]">
|
|
|
+ </el-image>
|
|
|
+ <span>{{itemR.name}}</span>
|
|
|
+ <svg-icon icon-class="download" style="cursor: pointer;" @click="handleDownloadPic(itemR.url)"></svg-icon>
|
|
|
+ </div>
|
|
|
+ <i class="el-icon-delete" @click="handleDelPicture(indexR)"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-form-item>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-form-item label="讲解教师" prop="teacher">
|
|
|
+ <el-input v-model="articleRecourseForm.teacher" autocomplete="off" placeholder="请输入" @blur="handleTrim('articleRecourseForm','teacher')" >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="讲解内容" prop="explanContent">
|
|
|
+ <upload :datafileList="articleRecourseForm.explanContent" :changeFillId="handleAvatarSuccess" :uploadType="'video&radio'" :fileName="'explanContent'" :filleNumber="99" tips="支持上传mp3, wav格式音频文件及 mp4, mov格式视频文件，音频大小不超过50mb，视频大小不超过 500mb。" :showList="true" />
|
|
|
+ <ul v-if="articleRecourseForm.explanContent.length>0" class="resource-list">
|
|
|
+ <li v-for="(itemR,indexR) in articleRecourseForm.explanContent" :key="indexR">
|
|
|
+ <a @click="handlePreview(itemR)"><svg-icon :icon-class="itemR.type" class="icon-logo"></svg-icon><span>{{itemR.name}}</span></a>
|
|
|
+ <i class="el-icon-delete" @click="handleDelExplanContent(indexR)"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
<div class="save-btn">
|
|
|
<el-button type="primary" size="small" @click="handleSaveArticle('articleForm')" :loading="loading">保存</el-button>
|
|
|
<el-button size="small" @click="onCancel('articleForm')">取消</el-button>
|
|
|
</div>
|
|
|
<el-button type="primary" size="small" class="preview-btn">预览</el-button>
|
|
|
</div>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="resourceFlag"
|
|
|
+ :show-close="true"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ width="1000px"
|
|
|
+ class="login-dialog"
|
|
|
+ v-if="resourceFlag">
|
|
|
+ <iframe
|
|
|
+ :src="resourceUrl"
|
|
|
+ width="100%"
|
|
|
+ height="600px"
|
|
|
+ ></iframe>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -20,13 +121,50 @@
|
|
|
import Header from "../../../components/Header.vue";
|
|
|
import Breadcrumb from '../../../components/Breadcrumb.vue';
|
|
|
import { getLogin } from "@/api/ajax";
|
|
|
+import tinymce from "tinymce/tinymce";
|
|
|
+import Editor from "@tinymce/tinymce-vue";
|
|
|
+import "tinymce/icons/default/icons";
|
|
|
+import "tinymce/themes/silver";
|
|
|
+// 引入富文本编辑器主题的js和css
|
|
|
+import "tinymce/themes/silver/theme.min";
|
|
|
+import "tinymce/skins/ui/oxide/skin.min.css";
|
|
|
+// 扩展插件
|
|
|
+// import "tinymce/plugins/"
|
|
|
+import "tinymce/plugins/image";
|
|
|
+import "tinymce/plugins/link";
|
|
|
+import "tinymce/plugins/code";
|
|
|
+import "tinymce/plugins/table";
|
|
|
+import "tinymce/plugins/lists";
|
|
|
+import "tinymce/plugins/wordcount"; // 字数统计插件
|
|
|
+import "tinymce/plugins/media"; // 插入视频插件
|
|
|
+import "tinymce/plugins/template"; // 模板插件
|
|
|
+import "tinymce/plugins/fullscreen";
|
|
|
+import "tinymce/plugins/paste";
|
|
|
+import "tinymce/plugins/preview";
|
|
|
+import "tinymce/plugins/contextmenu";
|
|
|
+import "tinymce/plugins/textcolor";
|
|
|
+import "tinymce/plugins/colorpicker";
|
|
|
+import Upload from "../../../components/Upload.vue"
|
|
|
+const Base64 = require("js-base64").Base64;
|
|
|
+import { mapState } from 'vuex';
|
|
|
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
- components: { Header, Breadcrumb },
|
|
|
+ components: { Header, Breadcrumb, Editor, Upload },
|
|
|
props: {},
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
+ const validatePage = (rule, value, callback) => {
|
|
|
+ if (value === null) {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ if (value<1) {
|
|
|
+ callback(new Error('Page不能小于1'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
return {
|
|
|
id:this.$route.query.id?this.$route.query.id:'',
|
|
|
type:this.$route.query.type?this.$route.query.type:'cn',
|
|
|
@@ -62,6 +200,9 @@ export default {
|
|
|
articleCn: '', // 中文文章
|
|
|
articleEn: '', // 英文文章
|
|
|
articleMp3: [], // 课文音频
|
|
|
+ articleMp3_id: '', // 音频文件id
|
|
|
+ },
|
|
|
+ articleRecourseForm:{
|
|
|
newWordList: [], // 生词
|
|
|
pharseList: [], // 短语
|
|
|
annotationList: [], // 注释
|
|
|
@@ -70,20 +211,41 @@ export default {
|
|
|
explanContent: [], // 讲解内容
|
|
|
},
|
|
|
articleRules:{
|
|
|
-
|
|
|
- }
|
|
|
+ title:[
|
|
|
+ { required: true, message: '请输入标题', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ source:[
|
|
|
+ { required: true, message: '请输入来源', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ page:[
|
|
|
+ { validator: validatePage, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ articleResourceRules:{
|
|
|
+ teacher:[
|
|
|
+ { required: true, message: '请输入讲解教师', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ explanContent: [
|
|
|
+ { type: 'array', required: true, message: '请上传讲解内容', trigger: 'change' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ init: null,
|
|
|
+ subtitleLoading: false, //生成字幕loading
|
|
|
+ substitleReault: false,
|
|
|
+ resourceUrl: '', // 课节资源预览地址
|
|
|
+ resourceFlag: false,
|
|
|
}
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
computed: {
|
|
|
-
|
|
|
+ ...mapState(['file_preview_url']),
|
|
|
},
|
|
|
//监控data中数据变化
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
getTableHeight() {
|
|
|
- let tableH = 132; //距离页面下方的高度
|
|
|
+ let tableH = 236; //距离页面下方的高度
|
|
|
let tableHeightDetil = window.innerHeight - tableH;
|
|
|
if (tableHeightDetil <= 300) {
|
|
|
this.tableHeight = 300;
|
|
|
@@ -98,20 +260,160 @@ export default {
|
|
|
handleSaveArticle(formName){
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
if (valid) {
|
|
|
-
|
|
|
+
|
|
|
} else {
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
- }
|
|
|
+ this.$refs.articleResourceForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 去掉前后空格
|
|
|
+ handleTrim(form,fild){
|
|
|
+ this[form][fild] = this[form][fild].trim()
|
|
|
+ },
|
|
|
+ handleAvatarSuccess(fileList,name) {
|
|
|
+ if(name==='articleMp3'){
|
|
|
+ this.articleForm.articleMp3 = fileList
|
|
|
+ this.articleForm.articleMp3_id = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_id:''
|
|
|
+ }else if(name==='pictureList'){
|
|
|
+ fileList.forEach(item=>{
|
|
|
+ if(item.response&&item.response.file_info_list&&item.response.file_info_list[0]){
|
|
|
+ item.name = item.response.file_info_list[0].file_name
|
|
|
+ item.file_id = item.response.file_info_list[0].file_id
|
|
|
+ item.url = item.response.file_info_list[0].file_url
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.articleRecourseForm.pictureList = fileList
|
|
|
+ }else if(name==='explanContent'){
|
|
|
+ fileList.forEach(item=>{
|
|
|
+ if(item.response&&item.response.file_info_list&&item.response.file_info_list[0]){
|
|
|
+ let index = item.response.file_info_list[0].file_name.lastIndexOf('.');
|
|
|
+ item.name = item.response.file_info_list[0].file_name
|
|
|
+ let type = item.response.file_info_list[0].file_name.substring(index + 1).toLowerCase()
|
|
|
+ item.type = this.handleJudgeType(type)
|
|
|
+ item.file_id = item.response.file_info_list[0].file_id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.articleRecourseForm.explanContent = fileList
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 判断文件类型
|
|
|
+ handleJudgeType(type){
|
|
|
+ let finalType = ''
|
|
|
+ if(type==='wav'){
|
|
|
+ finalType = 'mp3'
|
|
|
+ }else if(type==='png'||type==='jpg'||type==='jpeg'){
|
|
|
+ finalType = 'jpg'
|
|
|
+ }else if(type==='avi'||type==='wmv'||type==='mpeg'||type==='mov'){
|
|
|
+ finalType = 'mp4'
|
|
|
+ }else if(type==='rar'||type==='jar'||type==='arj'||type==='z'||type==='jar'){
|
|
|
+ finalType = 'zip'
|
|
|
+ }else if(type==='docx'){
|
|
|
+ finalType = 'doc'
|
|
|
+ }else if(type==='xls'){
|
|
|
+ finalType = 'xlsx'
|
|
|
+ }else if(type==='pptx'){
|
|
|
+ finalType = 'ppt'
|
|
|
+ }else{
|
|
|
+ finalType = type
|
|
|
+ }
|
|
|
+ return finalType
|
|
|
+ },
|
|
|
+ // 删除资源文件
|
|
|
+ handleDelResource(i){
|
|
|
+ this.$confirm("确定删除吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ this.articleForm.articleMp3.splice(i, 1);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleDelPicture(i){
|
|
|
+ this.$confirm("确定删除吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ this.articleRecourseForm.pictureList.splice(i, 1);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleDelExplanContent(i){
|
|
|
+ this.$confirm("确定删除吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ this.articleRecourseForm.explanContent.splice(i, 1);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 生成字幕
|
|
|
+ handleSubtitle(){
|
|
|
+ this.subtitleLoading = true
|
|
|
+ this.substitleReault = true
|
|
|
+ },
|
|
|
+ // 下载图片
|
|
|
+ handleDownloadPic(url){
|
|
|
+ window.open(url, "_blank");
|
|
|
+ },
|
|
|
+ // 预览文件
|
|
|
+ handlePreview(item){
|
|
|
+ let MethodName = '/FileServer/GetFileInfo'
|
|
|
+ let data = {
|
|
|
+ file_id: item.file_id
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ if(res.status===1){
|
|
|
+ let path =
|
|
|
+ `${this.file_preview_url}/onlinePreview?url=` +
|
|
|
+ Base64.encode(res.file_url);
|
|
|
+ this.resourceUrl = path;
|
|
|
+ this.resourceFlag = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
this.getTableHeight()
|
|
|
+ let lang_url = "";
|
|
|
+ let language = "";
|
|
|
+ let skin_url =
|
|
|
+ process.env.NODE_ENV == "development"
|
|
|
+ ? "/tinymce/skins/ui/oxide"
|
|
|
+ : window.g.zh_CN_URL + "/tinymce/skins/ui/oxide";
|
|
|
+
|
|
|
+ lang_url =
|
|
|
+ process.env.NODE_ENV == "development"
|
|
|
+ ? "/tinymce/langs/zh_CN.js"
|
|
|
+ : window.g.zh_CN_URL + "/tinymce/langs/zh_CN.js";
|
|
|
+ language = "zh_CN";
|
|
|
+
|
|
|
+ this.init = {
|
|
|
+ language_url: lang_url,
|
|
|
+ language: language,
|
|
|
+ skin_url: skin_url,
|
|
|
+ height: 600,
|
|
|
+ plugins: "link lists image code table wordcount preview",
|
|
|
+ toolbar:
|
|
|
+ "preview bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
|
|
|
+ branding: false,
|
|
|
+ }; //富文本初始化
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
-
|
|
|
+ tinymce.init({
|
|
|
+ selector: `#article-cn`,
|
|
|
+ });
|
|
|
},
|
|
|
//生命周期-创建之前
|
|
|
beforeCreated() { },
|
|
|
@@ -136,11 +438,15 @@ export default {
|
|
|
}
|
|
|
.manage-root-contain{
|
|
|
margin: 56px 24px 24px;
|
|
|
+ height: calc(100vh - 132px);
|
|
|
border-radius: 4px;
|
|
|
background: #FFF;
|
|
|
- overflow-y: auto;
|
|
|
padding: 24px 24px 80px 24px;
|
|
|
+ display: block;
|
|
|
position: relative;
|
|
|
+ &-inner{
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
.save-btn,.preview-btn{
|
|
|
position: absolute;
|
|
|
bottom: 24px;
|
|
|
@@ -150,5 +456,168 @@ export default {
|
|
|
right: 24px;
|
|
|
left: auto;
|
|
|
}
|
|
|
+
|
|
|
+}
|
|
|
+.el-form--inline{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.title-box{
|
|
|
+ flex: 1;
|
|
|
+ .el-input{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.source-box{
|
|
|
+ .el-input{
|
|
|
+ width: 205px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.page-box{
|
|
|
+ .el-input{
|
|
|
+ width: 190px;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.item-label{
|
|
|
+ color: #4E5969;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+}
|
|
|
+.article-mp3-box{
|
|
|
+ display: flex;
|
|
|
+ height: 32px;
|
|
|
+ align-items: center;
|
|
|
+ margin: 8px 0 20px 0;
|
|
|
+}
|
|
|
+.article-mp3{
|
|
|
+ width: 82px;
|
|
|
+ height: 32px;
|
|
|
+ &-has{
|
|
|
+ width: 320px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.article-mp3-list{
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: inline-block;
|
|
|
+ width: 226px;
|
|
|
+ li{
|
|
|
+ padding: 5px 12px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 2px 0px 0px 2px;
|
|
|
+ background: #F2F3F5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ a{
|
|
|
+ color: #1D2129;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ span{
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ flex: 1;
|
|
|
+ display: block;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .svg-icon{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 4px;
|
|
|
+ color: #1D2129;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-icon-error{
|
|
|
+ color: #4E5969;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.error-tips{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #F53F3F;
|
|
|
+ margin-left: 16px;
|
|
|
+ .svg-icon{
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.resource-list{
|
|
|
+ list-style: none;
|
|
|
+ margin: 12px 0;
|
|
|
+ padding: 0;
|
|
|
+ li{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ a,>div{
|
|
|
+ width: 360px;
|
|
|
+ padding: 7px 12px;
|
|
|
+ background: #F7F8FA;
|
|
|
+ border-radius: 2px;
|
|
|
+ color: #1D2129;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span{
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ flex: 1;
|
|
|
+ display: block;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .svg-icon{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 8px;
|
|
|
+ color: #4E5969;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-icon-delete{
|
|
|
+ color: #4E5969;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 12px;
|
|
|
+ &:hover{
|
|
|
+ color: #165DFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >div{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.add-btn{
|
|
|
+ padding: 2px 12px;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #165DFF;
|
|
|
+ color: #165DFF;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ background: #FFF;
|
|
|
+ .el-icon-plus{
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ background: #FFF;
|
|
|
+ color: #165DFF;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.create-article{
|
|
|
+ .el-divider{
|
|
|
+ width: 600px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
natasha
