Files
tougao_web/src/components/page/guest_articleDetail.vue
徐哼唧L 186cc1b552 1
2023-06-07 09:22:26 +08:00

940 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<i class="el-icon-lx-calendar"></i> Manuscript detail
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container_state" v-loading="loading" style="margin:20px 0 0 0;">
<el-row :gutter="30">
<el-col :span="16">
<div class="art_state_">
<div class="art_state_message">
<div class="art_state_message_id" style="padding-left: 15px;">
<font>Journal : <b style="margin-right: 25px;">{{journal_me}}</b></font>
<font>ID : <b style="margin-right: 25px;">{{form.accept_sn}}</b></font>
<font>Type : <b style="margin-right: 25px;">{{myType}}</b></font>
<font>Major : <b>{{form.major}}</b></font>
</div>
<p>
<font>Title :</font>
<b> {{form.title}}</b>
</p>
<p v-show="form.type=='A'">
<font>Ethical Approval :</font><b>{{form.approval?'Yes':'No'}}</b>
</p>
<p v-if="form.special_num > 0">
<font>Special Issues :</font><b>{{ form.special_title }}</b>
</p>
<el-collapse class="auth_colla auth_collna_ew">
<el-collapse-item :title="authorList_name" name="1">
<div v-for="(item, index) in form.authorList" class="auth_mess">
<h4 style="font-weight: bolder;">
<img src="../../assets/img/state_one.png" v-if="item.isSuper" style="width: 15px;margin: 0 2px 0 0;vertical-align: text-bottom;">
{{item.firstname}} {{item.lastname}} {{item.isSuper?'#':''}}{{item.isReport?'*':''}}
</h4>
<div>
<p v-if="item.email">
<img src="../../assets/img/state_email.png" v-if="item.isReport" style="width: 14px;margin: 0 8px 0 0;vertical-align: text-bottom;">
<font>Email : </font>{{item.email}}
</p>
<p v-if="item.orcid">
<font>ORCID iD : </font>{{item.orcid}}
</p>
<p>
<font>First author : </font>
<b v-if="item.isSuper">Yes</b>
<b v-if="!item.isSuper">No</b>
</p>
<p>
<font>Corresponding Author :</font>
<b v-if="item.isReport">Yes</b>
<b v-if="!item.isReport">No</b>
</p>
<p v-if="item.address">
<font>Address : </font>{{item.address}}
</p>
<p v-if="item.company">
<font>Affiliation : </font>{{item.company}}
</p>
<p v-if="item.department">
<font>Department : </font>{{item.department}}
</p>
<p v-if="item.title">
<font>Title : </font>{{item.title}}
</p>
<p v-if="item.country">
<font>Country : </font>{{item.country}}
</p>
</div>
</div>
</el-collapse-item>
</el-collapse>
<el-collapse class="auth_colla auth_collna_ew" style="margin-top: -15px;">
<el-collapse-item name="2">
<template slot="title">
Abstract
<font v-if="form.keywords" style="margin-left: 3px;">, Keywords</font>
<font v-if="form.fund" style="margin-left: 3px;">, Fund</font>
</template>
<p>
<font>Abstract :</font><b>{{form.abstrart}}</b>
</p>
<p v-if="form.keywords">
<font>Keywords :</font><b>{{form.keywords}}</b>
</p>
<p v-if="form.fund">
<font>Fund :</font><b>{{form.fund}}</b>
</p>
</el-collapse-item>
</el-collapse>
</div>
<div class="art_file_">
<el-row :gutter="24">
<el-col :span="12" v-if="coverLetterFileList">
<h4>Cover letter : </h4>
<p class="fi_new">
<a v-for="item in coverLetterFileList" :href="mediaUrl + item.file_url">
<img src="../../assets/img/icon_0.png">
<span>
<font>Uploader : </font>{{item.username}}
<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
</span>
<i class="el-icon-download download"></i>
</a>
</p>
<br clear="both">
</el-col>
<el-col :span="12" v-if="picturesAndTablesFileList">
<h4>Figures : </h4>
<p class="fi_new">
<a v-for="item in picturesAndTablesFileList" :href="mediaUrl + item.file_url">
<img src="../../assets/img/icon_0.png">
<span>
<font>Uploader : </font>{{item.username}}
<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
</span>
<i class="el-icon-download download"></i>
</a>
</p>
<br clear="both">
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12" v-if="totalpageFileList">
<h4>Title page : </h4>
<p class="fi_new">
<a v-for="item in totalpageFileList" :href="mediaUrl + item.file_url">
<img src="../../assets/img/icon_0.png">
<span>
<font>Uploader : </font>{{item.username}}
<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
</span>
<i class="el-icon-download download"></i>
</a>
</p>
<br clear="both">
</el-col>
<el-col :span="12">
<h4>Manuscirpt : </h4>
<p class="fi_new">
<a v-for="item in manuscirptFileList" :href="mediaUrl + item.file_url">
<img src="../../assets/img/icon_0.png">
<span>
<font>Uploader : </font>{{item.username}}
<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
</span>
<i class="el-icon-download download"></i>
</a>
</p>
<br clear="both">
</el-col>
</el-row>
<el-row :gutter="24" v-if="supplementaryFileList">
<el-col :span="24">
<h4>Supplementary Material : </h4>
<p class="fi_new">
<a v-for="item in supplementaryFileList" :href="mediaUrl + item.file_url">
<img src="../../assets/img/icon_0.png">
<span>
<font>Uploader : </font>{{item.username}}
<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
</span>
<i class="el-icon-download download"></i>
</a>
</p>
<br clear="both">
</el-col>
</el-row>
</div>
</div>
<div class="art_caozuo_">
<p>
<span>Status : </span>
<b>{{articleState}}</b>
<el-button type="text" @click="testvis" icon="el-icon-edit">Change</el-button>
</p>
<p>
<span>Remarks : </span>
<b>{{form.remarks}}</b>
<el-button type="text" @click="testedit" icon="el-icon-edit">Change</el-button>
</p>
<p>
<span>Repetition : </span>
<b>{{form.repetition}}%</b>
<a :href="mediaUrl + form.repeurl" v-if="form.repeurl" class="zip_load" target="_blank">
<img src="../../assets/img/icon_0.png">
<span>Duplicate check file</span>
<i class="el-icon-download download"></i>
</a>
<el-button type="text" @click="changeRepe" icon="el-icon-edit">Change</el-button>
</p>
<p>
<el-upload class="upload-demo" :action="upload_manuscirpt" accept=".doc, .docx, .rar, .zip" name="manuscirpt"
:before-upload="beforeupload_manuscirpt" :on-error="uperr_coverLetter" :on-success="upSuccess_manuscirpt"
:limit="1" :on-exceed="alertlimit" :on-remove="removefilemanuscirpt">
<div class="el-upload__text" style="padding:8px 5px;">
<em>Click Upload</em>
</div>
<div class="el-upload__tip" slot="tip">Only word and compressed files can be uploaded(.doc,.docx,.rar,.zip)</div>
</el-upload>
<el-button type="primary" @click="onsubmit" style="margin: 15px 0 0 0;">Upload Submit</el-button>
</p>
</div>
</el-col>
<el-col :span="8">
<timetalk :talkMsgs="talkMsgs" :msgform="msgform"></timetalk>
<div class="tree_box">
<h2 style="margin: 0 0 20px 0;">Manuscript Tracking</h2>
<div class="block">
<el-timeline>
<el-timeline-item :timestamp="formatDate_(form.ctime)" placement="top">
<el-card>
<p style="line-height: 20px;">
Manuscript submission :
<b>{{form.username}}</b>
submitted to
<b>{{journal_me}}</b>
</p>
</el-card>
</el-timeline-item>
<el-timeline-item v-for="(activity, index) in msgs" :key="index" :timestamp="formatDate_(activity.ctime)"
placement="top">
<el-card v-if="activity.ftype==0">
<p>Status change : {{statetostr(activity.state_to)}}</p>
<p v-if="activity.content!=''">{{activity.content}}</p>
</el-card>
<el-card v-else>
<p style="margin-bottom: 5px;font-weight: bold;">Author message :</p>
<p style="line-height: 18px;">{{activity.content}}</p>
</el-card>
<!-- <el-card>
<p>state change :{{statetostr(activity.state_from)}} => {{statetostr(activity.state_to)}}</p>
<p>{{activity.content}}</p>
</el-card> -->
</el-timeline-item>
</el-timeline>
</div>
</div>
</el-col>
</el-row>
</div>
<el-dialog title="Change Status" :visible.sync="editVisible" width="550px" v-loading="loading1">
<el-form ref="editform" :model="editform" label-width="95px">
<el-form-item label="Status :">
<el-select v-model="editform.state" placeholder="Please select">
<!-- <el-option v-for="item in nextState" :key="item.state" :label="item.title" :value="item.state" :disabled="item.disabled"></el-option> -->
<el-option :key="0" label="Received" :value="0" :disabled="true"></el-option>
<el-option :key="1" label="With editor" :value="1"></el-option>
<el-option :key="2" label="Under review" :value="2"></el-option>
<el-option :key="3" label="Reject" :value="3"></el-option>
<el-option :key="4" label="Revision" :value="4"></el-option>
<el-option :key="5" label="Accept" :value="5" :disabled="true"></el-option>
<el-option :key="6" label="Pre-accept" :value="6"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Message :">
<el-input type="textarea" rows="5" v-model="editform.editormsg" placeholder="feedback information"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editVisible = false">Cancel</el-button>
<el-button type="primary" @click="saveEdit">Save</el-button>
</span>
</el-dialog>
<el-dialog title="Remarks" :visible.sync="editbox" width="550px" v-loading="loading2">
<el-form ref="remark" :model="remark" label-width="85px">
<el-form-item label="Content :">
<el-input type="textarea" rows="5" v-model="remark.content"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editbox = false">Cancel</el-button>
<el-button type="primary" @click="saveRemark">Save</el-button>
</span>
</el-dialog>
<el-dialog title="Repetition" :visible.sync="repebox" width="550px" v-loading="loading3">
<el-form ref="repetition" :model="repeform" label-width="90px">
<el-form-item label="Content :">
<el-input maxlength="3" style="width:100px;" v-model="repeform.repefen">
<template slot="append">%</template>
</el-input>
</el-form-item>
<el-form-item label="Zip :">
<el-upload class="upload-demo" :action="upload_zip" accept=".rar, .zip" name="repezip" :on-success="upSuccess_repezip"
:limit="1" :on-exceed="alertlimit" :on-remove="removefilerepezip">
<div class="el-upload__text" style="padding:0 5px;">
<em>Click Upload</em>
</div>
<div class="el-upload__tip" slot="tip">Only pdf and word files can be uploaded(.pdf,.doc,.docx)</div>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="repebox = false">Cancel</el-button>
<el-button type="primary" @click="saveRepe">Save</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import timetalk from './time_talk'
export default {
components: {
timetalk
},
data() {
return {
baseUrl: this.Common.baseUrl,
mediaUrl: this.Common.mediaUrl,
items: '',
loading: false,
loading1: false,
loading2: false,
loading3: false,
editVisible: false,
editbox: false,
repebox: false,
coverLetterFileList: [],
picturesAndTablesFileList: [],
totalpageFileList: [],
manuscirptFileList: [],
supplementaryFileList: [],
authorList_name: '',
activeNames: ['2'],
editform: {
editname: localStorage.getItem('U_name'),
articleId: this.$route.query.id,
state: 0,
trsjournal: 0,
editormsg: ''
},
remark: {
articleId: this.$route.query.id,
content: ''
},
repeform: {
articleId: this.$route.query.id,
repefen: '',
zipurl: ''
},
journals: [],
items: [{
state: 0,
title: this.$t('artstate.state0'),
disabled: true
},
{
state: 1,
title: this.$t('artstate.state1')
},
{
state: 2,
title: this.$t('artstate.state2'),
},
{
state: 3,
title: this.$t('artstate.state3')
},
{
state: 4,
title: this.$t('artstate.state4')
},
{
state: 6,
title: this.$t('artstate.state6')
},
{
state: 5,
title: this.$t('artstate.state5')
},
],
form: {
articleId: this.$route.query.id,
journal: '',
journalname: '',
username: '',
title: '',
accept_sn: '',
abstrart: '',
keyWords: '',
fund: '',
type: '',
major: '',
approval: false,
repetition: '',
manuscirpt: '',
remarks: '',
state: '',
ctime: '',
authorList: [],
transList: []
},
msgs: [],
msgform: {
username: localStorage.getItem('U_name'),
article_id: this.$route.query.id,
ad_content: ''
},
talkMsgs: []
};
},
created: function() {
this.initarticle();
this.initselect();
this.initFileList();
},
computed: {
myType: function() {
let frag = '';
switch (this.form.type) {
case "A":
frag = 'ARTICLE';
break;
case 'B':
frag = 'REVIEW';
break;
case 'C':
frag = 'CASE REPORT';
break;
case 'P':
frag = 'RESEARCH PROPOSAL';
break;
case 'N':
frag = 'NEWS';
break;
case 'T':
frag = 'COMMENT';
break;
case 'CT':
frag = 'CORRECTION';
break;
case 'HT':
frag = 'HYPOTHESIS';
break;
case 'PF':
frag = 'PREFACE';
break;
case 'ET':
frag = 'EDITORIAL';
break;
case 'RP':
frag = 'REPORT';
break;
case 'LR':
frag = 'LETTER';
break;
case 'EF':
frag = 'EMPIRICAL FORMULA';
break;
case 'EM':
frag = 'EVIDENCE-BASED MEDICINE';
break;
case 'EC':
frag = 'EXPERT CONSENSUS';
break;
case 'LTE':
frag = 'LETTER TO EDITOR';
break;
case 'QI':
frag = 'QUESTIONNAIRE INVESTIGATION';
break;
case 'PT':
frag = 'PROTOCOL';
break;
case 'CS':
frag = 'CASE SERIES';
break;
case 'RT':
frag = 'RETRACTION';
break;
case 'MR':
frag = 'MINI REVIEW';
break;
default:
frag = 'OTHERS';
}
return frag;
},
// coverLetterUrl: function() {
// return this.baseUrl + this.form.coverLetter;
// },
// picturesAndTablesUrl: function() {
// return this.baseUrl + this.form.picturesAndTables;
// },
manuscirptUrl: function() {
return this.baseUrl + this.form.manuscirpt;
},
upload_coverLetter: function() {
return this.baseUrl + 'api/Article/up_file/type/coverLetter';
},
upload_picturesAndTables: function() {
return this.baseUrl + 'api/Article/up_file/type/picturesAndTables';
},
upload_manuscirpt: function() {
return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
},
upload_zip: function() {
return this.baseUrl + 'api/Article/up_file/type/repezip';
},
journal_me: function() {
var frag = this.form.journalname;
if (this.form.special_num > 0) {
frag += "(Special Issues)";
}
return frag;
},
articleState: function() {
let str = '';
switch (this.form.state) {
case 0:
str = this.$t('artstate.state0');
break;
case 1:
str = this.$t('artstate.state1');
break;
case 2:
str = this.$t('artstate.state2');
break;
case 3:
str = this.$t('artstate.state3');
break;
case 4:
str = this.$t('artstate.state4');
break;
case 5:
str = this.$t('artstate.state5');
break;
case 6:
str = this.$t('artstate.state6');
break;
}
return str;
}
},
methods: {
//弹出编辑框
testvis() {
this.editVisible = true;
},
testedit() {
this.editbox = true;
},
changeRepe() {
this.repebox = true;
},
statetostr(mystate) {
let str = '';
switch (mystate) {
case 0:
str = this.$t('artstate.state0');
break;
case 1:
str = this.$t('artstate.state1');
break;
case 2:
str = this.$t('artstate.state2');
break;
case 3:
str = this.$t('artstate.state3');
break;
case 4:
str = this.$t('artstate.state4');
break;
case 5:
str = this.$t('artstate.state5');
break;
case 6:
str = this.$t('artstate.state6');
break;
}
return str;
},
//修改文章状态
saveEdit() {
this.loading1 = true;
this.$api
.post('api/Special/editArticle', this.editform)
.then(res => {
this.loading1 = false;
if (res.code == 1) {
this.$message.error(res.msg);
} else {
this.$message.success('success');
this.editVisible = false;
this.$router.go(0);
}
})
.catch(err => {
console.log(err);
});
},
saveRemark() {
this.loading2 = true;
this.$api.post('api/Article/editArticleRemark', this.remark)
.then(res => {
this.loading2 = false;
this.$message.success('success');
this.$router.go(0);
});
},
saveRepe() {
if (this.repeform.zipurl == '') {
this.$message.error('please upload zip');
return false;
}
this.loading3 = true;
this.$api.post('api/Article/changeRepetition', this.repeform)
.then(res => {
this.loading3 = false;
this.$message.success('success');
this.$router.go(0);
});
},
//初始化期刊选项
initselect() {
this.$api
.post('api/Article/getJournal')
.then((res) => {
this.journals = res;
})
.catch((err) => {
console.log(err);
});
},
//初始化期刊信息
initarticle() {
this.$api
.post('api/Article/getArticleDetail', {
articleId: this.editform.articleId,
human: 'editor'
})
.then(res => {
this.form.username = res.article.account;
this.form.title = res.article.title;
this.form.journal = res.article.journal_id;
this.form.journalname = res.article.journalname;
this.form.abstrart = res.article.abstrart;
this.form.accept_sn = res.article.accept_sn;
this.form.keywords = res.article.keywords;
this.form.fund = res.article.fund;
this.form.type = res.article.type;
this.form.special_num = res.article.special_num;
this.form.special_title = res.article.special_title;
this.form.major = res.major;
this.form.approval = res.article.approval == 1 ? true : false;
this.form.repetition = res.article.repetition;
this.form.remarks = res.article.remarks;
this.form.repeurl = res.article.repeurl;
this.repeform.repefen = res.article.repetition;
this.remark.content = res.article.remarks;
this.editform.state = this.form.state = res.article.state;
this.form.ctime = res.article.ctime;
this.form.transList = res.transfer;
this.msgs = res.msg;
var alist = res.authors;
let alist_name = [];
for (var i in alist) {
this.form.authorList.push({
art_aut_id: alist[i].art_aut_id,
firstname: alist[i].firstname,
lastname: alist[i].lastname,
orcid: alist[i].orcid,
company: alist[i].company,
department: alist[i].department,
title: alist[i].author_title,
country: alist[i].country,
email: alist[i].email,
address: alist[i].address,
isSuper: alist[i].is_super == 1 ? true : false,
isReport: alist[i].is_report == 1 ? true : false
});
if (i == alist.length - 1) {
alist_name.push(alist[i].firstname + ' ' + alist[i].lastname)
} else {
alist_name.push(alist[i].firstname + ' ' + alist[i].lastname + ' , ')
}
}
this.authorList_name = "Author : " + alist_name.join("");
})
.catch(err => {
console.log(err);
});
// 留言板列表
this.$api
.post('api/Article/getArticleDialogs', {
article_id: this.$route.query.id
})
.then((res) => {
this.talkMsgs = res.data.dialogs;
})
.catch((err) => {
console.log(err);
});
},
//初始化filelist
initFileList() {
this.$api
.post('api/Article/getFilelistByArticleID', {
articleId: this.form.articleId
})
.then(res => {
this.coverLetterFileList = res.coverLetter;
this.picturesAndTablesFileList = res.picturesAndTables;
this.manuscirptFileList = res.manuscirpt;
this.totalpageFileList = res.totalpage;
this.supplementaryFileList = res.supplementary;
})
.catch(err => {
console.log(err);
});
},
uperr_coverLetter(err) {
this.$message.error('upload error');
},
beforeupload() {},
filedateformate(row, column, cellValue, index) {
return this.formatDate(cellValue);
},
// upSuccess_coverLetter(res, file) {
// if (res.code == 0) {
// this.form.coverLetter = 'coverLetter/' + res.upurl;
// } else {
// this.$message.error('service error' + res.msg);
// }
// },
// upSuccess_picturesAndTables(res, file) {
// if (res.code == 0) {
// this.form.picturesAndTables = 'picturesAndTables/' + res.upurl;
// } else {
// this.$message.error('service error' + res.msg);
// }
// },
upSuccess_manuscirpt(res, file) {
if (res.code == 0) {
this.form.manuscirpt = 'manuscirpt/' + res.upurl;
} else {
this.$message.error('service error' + res.msg);
}
},
upSuccess_repezip(res, file) {
if (res.code == 0) {
this.repeform.zipurl = 'repezip/' + res.upurl;
}
},
//超出传送文件个数限制
alertlimit() {
this.$message.error('The maximum number of uploaded files has been exceeded');
},
getlinkurl(row) {
return this.mediaUrl + row.file_url;
},
//检验上传文件的格式
beforeupload_manuscirpt(file) {
// const ismau =
// file.type === 'application/msword' ||
// file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'||
// file.type === 'application/x-zip-compressed' ||
// file.name.split(".")[1] === 'rar';
// if (!ismau) {
// this.$message.error('Only word and compressed files(.doc,.docx,.rar,.zip)');
// }
// return ismau;
},
//清除文件时的事件
removefilemanuscirpt(file, fileList) {
this.form.manuscirpt = '';
},
removefilerepezip(file, fileList) {
this.repeform.zipurl = '';
},
formatDate(timestamp) {
var date = new Date(timestamp * 1000); //时间戳为10位需*1000时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
return Y + M + D;
},
formatDate_(timestamp) {
var date = new Date(timestamp * 1000); //时间戳为10位需*1000时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
return Y + M + D + ' ' + h + ':' + m + ':' + s;
},
onsubmit() {
if (this.form.manuscirpt == '') {
this.$message.error('Manuscirpt is required!');
return false;
}
this.loading = true;
this.$api.post('api/Article/changeArticleFileEditor', this.form)
.then(res => {
this.loading = false;
this.$message.success('success');
this.$router.go(0);
})
.catch(err => {
console.log(err);
});
}
}
};
</script>
<style scoped>
.art_state_ {
padding: 20px 20px 1px 20px;
}
.art_state_ .art_state_message_id {
margin-bottom: 15px;
color: #777;
line-height: 22px;
padding: 0 0 15px 5px;
}
.art_state_message_id>font {
display: inline-block;
}
.art_state_message_id b {
letter-spacing: -1px;
color: #333;
}
.tree_box {
border: 1px solid #dcdfe6;
border-radius: 5px;
background-color: #fff;
padding: 20px;
}
.art_caozuo_>p {
margin: 0 0 10px 10px;
}
.art_caozuo_>p:last-child {
margin-bottom: 0;
}
.art_caozuo_>p>span {
color: #777;
margin: 0 15px 0 0;
}
.art_caozuo_>p>button {
margin-left: 25px;
font-weight: bold;
}
.art_caozuo_>p>button:hover {
text-decoration: underline;
}
.el-upload__tip {
display: inline-block;
line-height: 32px;
margin: 0 0 0 15px;
color: #888 !important;
vertical-align: text-bottom;
}
.art_file {}
.art_file_ h4 {
margin: 1px 0 5px 15px;
float: left;
color: #777;
font-weight: normal;
}
.art_file_ p.fi_new {
margin: 0 0 0 10px;
margin-bottom: 10px;
float: left;
}
.art_file_ p.fi_new>a {
color: #333;
display: block;
margin: 0 0 10px 0;
}
.art_file_ p.fi_new>a:hover {
text-decoration: underline;
}
.art_file_ p.fi_new>a>img {
width: 15px;
vertical-align: text-bottom;
margin: 0 5px 0 0;
}
.art_file_ p.fi_new>a>span>font {
color: #888;
margin: 0 5px 0 0;
font-size: 13px;
letter-spacing: -1px;
}
.art_file_ p.fi_new>a>span>i {
font-size: 12px;
color: #888;
margin: 0 0 0 3px;
font-style: normal;
}
.art_file_ p.fi_new>a>span>i>i {
margin: 0 5px 0 0;
}
.art_file_ .download {
font-weight: bold;
color: #75abf1;
margin: 0 0 0 10px;
}
.art_state_message p {
margin-left: 15px;
}
</style>