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

815 lines
25 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-box"></i> Manuscript list
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<div class="handle-box">
<el-select v-model="query.special_id" @change="getDate" placeholder="Please select journal">
<el-option :key="0" label="All Specials" :value="0"></el-option>
<el-option v-for="item in specil_L" :key="item.journal_special_id" :label="item.title" :value="item.journal_special_id"></el-option>
</el-select>
<el-select v-model="query.state" @change="getDate" placeholder="Please select status" style="margin-left:5px;width: 130px;">
<el-option :key="-1" label="All status" :value="-1"></el-option>
<el-option :key="0" :label="$t('artstate.state0')" :value="0" :disabled="query.act==2"></el-option>
<el-option :key="1" :label="$t('artstate.state1')" :value="1" :disabled="query.act==2"></el-option>
<el-option :key="2" :label="$t('artstate.state2')" :value="2" :disabled="query.act==2"></el-option>
<el-option :key="3" :label="$t('artstate.state3')" :value="3" :disabled="query.act==1"></el-option>
<el-option :key="4" :label="$t('artstate.state4')" :value="4" :disabled="query.act==2"></el-option>
<el-option :key="6" :label="$t('artstate.state6')" :value="6" :disabled="query.act==2"></el-option>
<el-option :key="5" :label="$t('artstate.state5')" :value="5" :disabled="query.act==1"></el-option>
</el-select>
<el-select v-model="query.act" @change="getDate" placeholder="Please select status" style="margin-left:5px;width: 100px;">
<el-option :key="1" :label="$t('artstate.act1')" :value="1"></el-option>
<el-option :key="2" :label="$t('artstate.act2')" :value="2"></el-option>
</el-select>
<el-input v-model="query.name" placeholder="Title" class="handle-input" style="margin-left:5px;width: 180px;"></el-input>
<el-input v-model="query.sn" placeholder="SN" class="handle-input mr10" style="margin-left:5px;width: 180px;"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handleSearch">Search</el-button>
</div>
<el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
<el-table-column type="index" label="No." width="55" align="center"></el-table-column>
<el-table-column prop="accept_sn" width="170" label="Manuscript ID" align="center">
<template slot-scope="scope">
<p style="margin-bottom: 5px;">{{scope.row.accept_sn}}</p>
<el-button size="mini" type="primary" plain icon="el-icon-tickets" @click="showdetaileditor(scope.row)">Detail</el-button>
<!-- <el-button @click="deteContent(scope.row)" size="mini" type="primary" plain icon="el-icon-tickets">Manuscript Detail</el-button> -->
</template>
</el-table-column>
<el-table-column prop="title" label="Title" align="center">
<template slot-scope="scope">
<el-badge is-dot :hidden="scope.row.author_act==1?false:true" class="item">
{{scope.row.title}}
</el-badge>
</template>
</el-table-column>
<el-table-column label="" align="center">
<template slot="header">
<div>Reviewer</div>
<div>Decision</div>
</template>
<template slot-scope="scope">
<p style="margin-bottom: 5px;">
<el-button v-for="(item, index) in scope.row.review" :type="item.state==2?'danger':'success'" circle style="padding: 5px;"></el-button>
</p>
<el-button size="mini" type="primary" plain icon="el-icon-user" @click="articleReviewer(scope.row)">Peer-Review</el-button>
</template>
</el-table-column>
<!-- <el-table-column prop="journalname" label="Journal" align="center"></el-table-column> -->
<el-table-column label="Submitter" align="center">
<template slot-scope="scope">
<p v-if="scope.row.realname!=''">
<font style="color: #999;font-size: 12px;">Name:</font>
{{scope.row.realname}}
</p>
<p v-if="scope.row.email!=''">
<font style="color: #999;font-size: 12px;">Email:</font>
{{scope.row.email}}
</p>
<p v-if="scope.row.phone!=''">
<font style="color: #999;font-size: 12px;">Phone:</font>
{{scope.row.phone}}
</p>
</template>
</el-table-column>
<el-table-column label="Countries" align="center">
<template slot-scope="scope">
<p v-for="(item, index) in scope.row.countrys">
{{item}}
<font v-if="index!=scope.row.countrys.length-1">,</font>
</p>
</template>
</el-table-column>
<el-table-column label="Status" align="center">
<template slot-scope="scope">
<p style="margin-bottom: 5px;">{{stateFormat(scope.row.state)}}</p>
<el-button @click="testvis(scope.row)" size="mini" type="primary" plain icon="el-icon-edit">Change</el-button>
</template>
</el-table-column>
<el-table-column label="Repetition" align="center">
<template slot-scope="scope">
<p style="margin-bottom: 5px;">{{scope.row.repetition}} %</p>
<el-button @click="changeRepe(scope.row)" size="mini" type="primary" plain icon="el-icon-edit">Change</el-button>
</template>
</el-table-column>
<el-table-column label="Remarks" align="center">
<template slot-scope="scope">
<p style="margin-bottom: 5px;">{{scope.row.remarks}}</p>
<el-button @click="testedit(scope.row)" size="mini" type="primary" plain icon="el-icon-edit">Change</el-button>
</template>
</el-table-column>
<!-- <el-table-column label="" width="105" align="center">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain icon="el-icon-discount" @click="showdetaileditor(scope.row)">Detail</el-button>
</template>
</el-table-column> -->
</el-table>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize"
:total="Total" @current-change="handlePageChange"></el-pagination>
</div>
</div>
<el-dialog title="Manuscript Information" :visible.sync="ConentVise" width="800px">
<div class="art_state_message">
<p>
<font>Status :</font><b>{{stateFormat(MesDetail.state)}}</b>
</p>
<p>
<font>Title :</font><b>{{MesDetail.title}}</b>
</p>
<p>
<font>ID : </font><b>{{MesDetail.accept_sn}}</b>
</p>
<p>
<font>Type :</font><b>{{myType(MesDetail.type)}}</b>
</p>
<p v-show="MesDetail.type=='A'">
<font>Ethical Approval :</font><b>{{MesDetail.approval?'Yes':'No'}}</b>
</p>
<p v-if="MesDetail.special_num > 0">
<font>Special Issues :</font><b>{{ MesDetail.special_title }}</b>
</p>
<p>
<font>Journal :</font><b>{{MesDetail.journalname}}{{journal_me(MesDetail.special_num)}}</b>
</p>
<p>
<font>Major :</font><b>{{MesDetail.major}}</b>
</p>
<el-collapse class="auth_colla auth_collna_ew auth_collna_list">
<el-collapse-item :title="authorList_name" name="1">
<div v-for="(item, index) in MesDetail.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 auth_collna_list" style="margin-top: -15px;">
<el-collapse-item name="2">
<template slot="title">
Abstract
<font v-if="MesDetail.keywords" style="margin-left: 3px;">, Keywords</font>
<font v-if="MesDetail.fund" style="margin-left: 3px;">, Fund</font>
</template>
<p>
<font>Abstract :</font><b>{{MesDetail.abstrart}}</b>
</p>
<p v-if="MesDetail.keywords">
<font>Keywords :</font><b>{{MesDetail.keywords}}</b>
</p>
<p v-if="MesDetail.fund">
<font>Fund :</font><b>{{MesDetail.fund}}</b>
</p>
</el-collapse-item>
</el-collapse>
</div>
<div class="art_file">
<h4 v-if="coverLetterFileList">Cover letter : </h4>
<p v-if="coverLetterFileList">
<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" v-if="coverLetterFileList">
<h4 v-if="picturesAndTablesFileList">Figures : </h4>
<p v-if="picturesAndTablesFileList">
<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" v-if="picturesAndTablesFileList">
<h4 v-if="totalpageFileList">Title page : </h4>
<p v-if="totalpageFileList">
<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" v-if="totalpageFileList">
<h4 v-if="supplementaryFileList">Supplementary Material : </h4>
<p v-if="supplementaryFileList">
<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" v-if="supplementaryFileList">
<h4>Manuscirpt : </h4>
<p>
<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">
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="ConentVise = false">OK</el-button>
</span>
</el-dialog>
<el-dialog title="Change Status" :visible.sync="editVisible" width="550px">
<el-form ref="editform" :model="editform" label-width="95px">
<el-form-item label="Title :">
<p style="line-height: 20px;margin-top: 6px;">{{editform.title}}</p>
</el-form-item>
<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">
<el-form ref="remark" :model="remark" label-width="85px">
<el-form-item label="Title :">
<p style="line-height: 20px;margin-top: 6px;">{{remark.title}}</p>
</el-form-item>
<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">
<el-form ref="repetition" :model="repeform" label-width="90px">
<el-form-item label="Title :">
<p style="line-height: 20px;margin-top: 6px;">{{repeform.title}}</p>
</el-form-item>
<el-form-item label="File :" v-if="repeform.repeurl!=''">
<a :href="mediaUrl + repeform.repeurl" class="zip_load" target="_blank" style="margin-left: 0;">
<img src="../../assets/img/icon_0.png">
<span>Duplicate check file</span>
<i class="el-icon-download download"></i>
</a>
</el-form-item>
<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 ref="zipLoad" 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>
export default {
name: 'articleListEditor',
data() {
return {
baseUrl: this.Common.baseUrl,
mediaUrl: this.Common.mediaUrl,
specil_L: '',
query: {
user_id: localStorage.getItem('U_id'),
special_id: 0,
titleKey: '',
sn: '',
state: -1,
act: 1,
pageIndex: 1,
pageSize: 50
},
tableData: [],
multipleSelection: [],
delList: [],
Total: 0,
ConentVise: false,
editVisible: false,
editbox: false,
repebox: false,
editform: {
editname: localStorage.getItem('U_name'),
articleId: 0,
state: 0,
},
remark: {
articleId: 0,
content: ''
},
repeform: {
articleId: 0,
repefen: '',
zipurl: '',
repeurl: '',
},
nextState: [{
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')
},
],
MesDetail: {},
authorList_name: '',
coverLetterFileList: [],
picturesAndTablesFileList: [],
totalpageFileList: [],
manuscirptFileList: [],
supplementaryFileList: [],
};
},
created() {
this.initselect();
this.getDate();
},
computed: {
upload_zip: function() {
return this.baseUrl + 'api/Article/up_file/type/repezip';
},
},
methods: {
//初始化客座选项
initselect() {
this.$api
.post('api/User/getUserAllSpecials', {
'user_id': this.query.user_id
})
.then(res => {
this.specil_L = res.data.specials;
})
.catch(err => {
console.log(err);
});
},
// 获取数据
getDate() {
this.$api
.post('api/Special/getSpecialArticles', this.query)
.then(res => {
this.tableData = res.data.articles;
this.Total = res.data.count;
})
.catch(err => {
console.log(err);
});
},
// 触发搜索按钮
handleSearch() {
this.$set(this.query, 'pageIndex', 1);
this.getDate();
},
//文章送审
articleReviewer(row) {
this.$router.push({
path: 'guestArticleReviewerL',
query: {
id: row.article_id
}
});
},
//弹出编辑框
deteContent(e) {
this.ConentVise = true
this.$api
.post('api/Article/getArticleDetail', {
articleId: e.article_id,
human: 'editor'
})
.then(res => {
this.MesDetail = res.article;
this.MesDetail.major = res.major;
this.MesDetail.authorList = [];
var alist = res.authors;
let alist_name = [];
for (var i in alist) {
this.MesDetail.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/getFilelistByArticleID', {
articleId: e.article_id
})
.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);
});
},
testvis(e) {
this.editVisible = true;
this.editform.title = e.title;
this.editform.articleId = e.article_id;
this.editform.state = e.state;
this.editform.state_old = e.state;
},
testedit(e) {
this.editbox = true;
this.remark.title = e.title;
this.remark.articleId = e.article_id;
this.remark.content = e.remarks;
},
changeRepe(e) {
this.repebox = true;
this.repeform.title = e.title;
this.repeform.articleId = e.article_id;
this.repeform.repefen = e.repetition;
this.repeform.repeurl = e.repeurl;
this.repeform.zipurl = '';
this.$nextTick(() => {
this.$refs.zipLoad.clearFiles();
})
},
//修改文章状态
saveEdit() {
this.$api
.post('api/Special/editArticle', this.editform)
.then(res => {
if (res.code == 0) {
this.$message.success('success');
this.editVisible = false;
this.getDate();
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
console.log(err);
});
},
// 修改标记
saveRemark() {
this.$api.post('api/Article/editArticleRemark', this.remark)
.then(res => {
if (res.code == 0) {
this.$message.success('success');
this.editbox = false;
this.getDate();
} else {
this.$message.error(res.msg);
}
});
},
// 修改查重
saveRepe() {
if (this.repeform.zipurl == '') {
this.$message.error('please upload zip');
return false;
}
this.$api.post('api/Article/changeRepetition', this.repeform)
.then(res => {
if (res.code == 0) {
this.$message.success('success');
this.repebox = false;
this.getDate();
} else {
this.$message.error(res.msg);
}
});
},
// 查重文件操作
upSuccess_repezip(res, file) {
if (res.code == 0) {
this.repeform.zipurl = 'repezip/' + res.upurl;
}
},
removefilerepezip(file, fileList) {
this.repeform.zipurl = '';
},
alertlimit() {
this.$message.error('The maximum number of uploaded files has been exceeded');
},
//格式化状态输出
stateFormat(e) {
let str = '';
switch (e) {
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;
default:
str = 'error!!';
}
return str;
},
myType(e) {
let frag = '';
switch (e) {
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;
},
journal_me(e) {
var frag = '';
if (e > 0) {
frag += "(Special Issues)";
}
return frag;
},
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;
},
// 分页导航
handlePageChange(val) {
this.$set(this.query, 'pageIndex', val);
this.getDate();
},
showdetaileditor(row) {
let stat_num = 'guestArticleDetail'
this.$router.push({
path: stat_num,
query: {
id: row.article_id
}
});
},
tableRowClassName({
row,
rowIndex
}) {
if (row.state == 1 || row.state == 2) {
return 'normol-row';
} else if (row.state == 3) {
return 'red-row';
} else if (row.state == 4) {
return 'warning-row';
} else if (row.state == 5) {
return 'success-row';
} else {
return '';
}
}
}
};
</script>
<style scoped>
.art_file>h4 {
text-align: left;
}
.handle-box {
margin-bottom: 20px;
}
.handle-select {
width: 120px;
}
.handle-input {
width: 300px;
display: inline-block;
}
.table {
width: 100%;
font-size: 14px;
}
.red {
color: #ff0000;
}
.mr10 {
margin-right: 10px;
}
.table-td-thumb {
display: block;
margin: auto;
width: 40px;
height: 40px;
}
.item {
margin-top: 5px;
}
</style>