Merge branch 'master' of https://git.nuttyreading.com/wangjinlei/tougao_web into Editorial-Board

src/api/index.js

@@ -19,8 +19,8 @@ const service = axios.create({
 	// baseURL: 'https://submission.tmrjournals.com/', //正式 记得切换
 	// baseURL: 'http://www.tougao.com/', //测试本地 记得切换
 	// baseURL: 'http://192.168.110.110/tougao/public/index.php/',
-	baseURL: '/api', //本地
+	// baseURL: '/api', //本地
-	// baseURL: '/', //正式
+	baseURL: '/', //正式
 
 });
 

src/components/common/common.vue

@@ -2,12 +2,12 @@
 //记得切换
 
 //正式
-// const mediaUrl = '/public/';
+const mediaUrl = '/public/';
-// const baseUrl = '/';
+const baseUrl = '/';
 
-const mediaUrl = 'https://submission.tmrjournals.com/public/';
+// const mediaUrl = 'https://submission.tmrjournals.com/public/';
-// const mediaUrl = 'http://zmzm.tougao.dev.com/public/';
+// // const mediaUrl = 'http://zmzm.tougao.dev.com/public/';
-const baseUrl = '/api'
+// const baseUrl = '/api'
 
 // const mediaUrl = 'http://tougaotest.tmrjournals.com/public/';
 // // const mediaUrl = 'http://zmzm.tougao.dev.com/public/';

src/components/common/langs/en.js

@@ -102,6 +102,7 @@ const en = {
 		article: 'Articles for',
 		articleNum: 'Articles',
 		info: 'The following data is',
+		Fee: 'Fee',
 		wos: 'Wos',
 		all: 'All references',
 		factor: 'Factor',
@@ -114,6 +115,21 @@ const en = {
 		level: 'Level',
 		editorinchief: 'Editor In Chief',
 		journal_topic: 'Research areas',
+		// 1. 录入弹窗 (image_e6d8fa.png)
+		feeDialogTitle: 'Adjustment of Article Processing Charge (APC)',
+		feeWarningTitle: 'Financial Configuration Alert',
+		feeWarningDesc: 'Modifying the APC is a critical update. The new rate will be applied prospectively to all new submissions upon confirmation.',
+		feeLabel: 'New APC Amount (USD)',
+		placeholder: 'Enter amount',
+		confirmUpdate: 'Update Standard',
+		cancel: 'Cancel',
+	  
+		// 2. 二次确认弹窗 (image_e6d449.png)
+		doubleConfirmTitle: 'Final Regulatory Confirmation',
+		doubleConfirmContent: 'Are you sure you want to authorize this rate change? This adjustment will immediately synchronize with the billing system and impact all future financial settlements.',
+		
+		// 3. 反馈
+		updateSuccess: 'The journal APC standard has been successfully updated.'
 
 	},
 

src/components/common/langs/zh.js

@@ -100,6 +100,7 @@ const zh = {
 		citeNum: '引用数量',
 		articleNum: '文章数量',
 		ArticleInfo: '文章信息', website: '网站',
+		Fee: '费用',
 		email: '邮箱',
 		abbr: '缩写',
 		edit: '编辑',
@@ -112,6 +113,16 @@ const zh = {
 		all: '全部引用',
 		factor: '影响因子',
 		Sameperiod: '同期',
+		feeDialogTitle: '期刊稿件处理费（APC）调整',
+  feeWarningTitle: '核心财务参数修改提示',
+  feeWarningDesc: 'APC金额属于期刊核心计费参数。一旦更新，系统将立即启用新标准并应用于所有新投递的稿件。',
+  feeLabel: '新计费标准 (USD)',
+  placeholder: '请输入金额',
+  confirmUpdate: '更新标准',
+  cancel: '取消',
+  doubleConfirmTitle: '最终操作确认',
+  doubleConfirmContent: '确定要授权此项金额变更吗？此操作具有法律效力上的即时性，将直接影响后续所有财务结算流程。',
+  updateSuccess: '期刊计费标准已成功更新。'
 	},
 	paperArticleCount: {
 		Periodroll: '期卷',

src/components/page/Complete_profile.vue

@@ -12,6 +12,7 @@
             "
         >
             <i class="el-icon-success" style="margin-right: 10px"></i>
+           
             <span
                 >Dear {{ user_name }} , Congratulations! You manuscript has been pre-accepted for publication in
                 <b>{{ journalInfo.title }}</b
@@ -81,7 +82,7 @@
                                     fill="#67c23a"
                                 ></path>
                             </svg>
-                            The article processing charges for your manuscript have been waived.
+                            The article processing charges for your manuscript have been waived, or you have already paid them via bank transfer.
                         </div>
                         <div v-else>
                             <p
@@ -92,9 +93,9 @@
                                 Please see our discount policy here:
                                 <a
                                     style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline"
-                                    href="https://www.tmrjournals.com/tmr/free-application/"
+                                    :href="journalInfo.apc_url"
                                     target="_blank"
-                                    >https://www.tmrjournals.com/tmr/free-application/</a
+                                    >{{ journalInfo.apc_url }}</a
                                 >.
                             </p>
                             <el-card class="box-card" style="width: 100%"

src/components/page/JournalManagement/JournalManagement/common.vue

@@ -46,10 +46,14 @@
                             <div class="item">
                                 <span class="title">{{ $t('JournalCitationAnalysis.level') }} :</span><span>{{ scope.row.level }}</span>
                             </div>
+
                             <div class="item" v-if="scope.row.journal_topic">
                                 <span class="title">{{ $t('JournalCitationAnalysis.journal_topic') }} :</span
                                 ><span>{{ scope.row.journal_topic }}</span>
                             </div>
+                            <!-- <div class="item">
+                                <span class="title">{{ $t('JournalCitationAnalysis.Fee') }} :</span><span>{{ scope.row.fee }}</span > <el-button @click="openEditDialog(scope.row)" plain type="primary" size="mini" style="position: relative;top: 2px;vertical-align: text-bottom; padding: 2px 4px; margin-left: 10px;"><i class="el-icon-edit" style="margin-right: 4px"></i> {{ $t('articleListEditor.edit') }}</el-button>
+                            </div> -->
                         </div>
                     </template>
                 </el-table-column>
@@ -146,8 +150,14 @@
                 </el-table-column>
             </el-table>
         </div>
-        <el-dialog :title="$t('GroupClassification.edit')" :visible.sync="editDialogVisible" width="1000px" :before-close="handleEditClose"  :close-on-click-modal="false">
+        <el-dialog
-            <el-form ref="detail_form" :model="detailForm" :rules="rules" label-width="180px">
+            :title="$t('GroupClassification.edit')"
+            :visible.sync="editDialogVisible"
+            width="1000px"
+            :before-close="handleEditClose"
+            :close-on-click-modal="false"
+        >
+            <el-form ref="detail_form" :model="detailForm" :rules="rules" label-width="260px">
                 <el-form-item label="Journal :">
                     <p style="display: flex; align-items: center; justify-content: space-between">
                         <span>{{ detailForm.title }}</span>
@@ -196,6 +206,25 @@
                     <el-input-number v-model="detailForm.fee" :min="0" v-if="source == 'all'"></el-input-number>
                     <span v-else>{{ detailForm.fee }}</span>
                 </el-form-item>
+                <el-form-item label="Article Processing Charge Link :" prop="fee" v-if="detailForm.fee > 0">
+                    <el-input clearable v-model="detailForm.apc_url" :min="0" v-if="source == 'all'"></el-input>
+                    <span v-else>{{ detailForm.apc_url }}</span>
+                </el-form-item>
+                <el-form-item label="Article Processing Charge Instruction :" prop="fee" v-if="detailForm.fee > 0">
+                    <quill-editor
+                        v-if="source == 'all'"
+                        v-model="detailForm.apc_content"
+                        ref="myQuillEditor"
+                        :options="editorOption"
+                        @blur="onEditorBlur($event)"
+                        @focus="onEditorFocus($event)"
+                        @ready="onEditorReady($event)"
+                        class="chapter_editor1"
+                    >
+                    </quill-editor>
+
+                    <span v-else>{{ detailForm.apc_url }}</span>
+                </el-form-item>
                 <el-form-item label="Journal publisher :" prop="publish_author">
                     <el-input v-model="detailForm.publish_author" placeholder="eg:TMR编辑部"></el-input>
                 </el-form-item>
@@ -212,7 +241,12 @@
                             :on-error="handleAvatarError2"
                             :before-upload="beforeAvatarUpload2"
                         >
-                            <img v-if="detailForm.editor_qrcode" :src="mediaUrl + 'journaleditorqrcode/' + detailForm.editor_qrcode" class="avatar" accept=".png,.jpg" />
+                            <img
+                                v-if="detailForm.editor_qrcode"
+                                :src="mediaUrl + 'journaleditorqrcode/' + detailForm.editor_qrcode"
+                                class="avatar"
+                                accept=".png,.jpg"
+                            />
                             <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 120px"></i>
                         </el-upload>
                     </div>
@@ -264,7 +298,8 @@
             :title="$t('GroupClassification.Journal') + ' : ' + currentJournal.title"
             :visible.sync="drawer"
             direction="rtl"
-            :before-close="handleClose"     :wrapperClosable="false"
+            :before-close="handleClose"
+            :wrapperClosable="false"
             size="90%"
         >
             <commonclass ref="commonClassRef" :journal="currentJournal" :urlList="urlList"></commonclass>
@@ -275,7 +310,8 @@
             :title="$t('GroupClassification.Journal') + ' : ' + currentJournal.title"
             :visible.sync="drawerJournalInstallment"
             direction="rtl"
-            :before-close="handleCloseJournalInstallment"      :wrapperClosable="false"
+            :before-close="handleCloseJournalInstallment"
+            :wrapperClosable="false"
             size="90%"
         >
             <commonJournalInstallment
@@ -290,15 +326,67 @@
             :title="$t('GroupClassification.Journal') + ' : ' + currentJournal.title"
             :visible.sync="drawerAgreement"
             direction="rtl"
-            :before-close="handleAgreementClose"     :wrapperClosable="false"
+            :before-close="handleAgreementClose"
+            :wrapperClosable="false"
             size="90%"
         >
             <common-agreement ref="commonAgreementRef" :journal="currentJournal" :urlList="urlList"></common-agreement>
         </el-drawer>
+        <el-dialog :title="$t('JournalCitationAnalysis.feeDialogTitle')" :visible.sync="feeDialogVisible" width="800px">
+            <el-alert
+                :title="$t('JournalCitationAnalysis.feeWarningTitle')"
+                type="warning"
+                :description="$t('JournalCitationAnalysis.feeWarningDesc')"
+                show-icon
+                :closable="false"
+            />
+
+            <el-form label-position="top" style="margin-top: 20px">
+                <el-form-item :label="$t('JournalCitationAnalysis.feeLabel')" required>
+                    <el-input-number
+                        v-model="tempFee"
+                        :precision="2"
+                        :min="0"
+                        :placeholder="$t('JournalCitationAnalysis.placeholder')"
+                        style="width: 100%"
+                        controls-position="right"
+                    />
+                </el-form-item>
+            </el-form>
+
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="feeDialogVisible = false">
+                    {{ $t('JournalCitationAnalysis.cancel') }}
+                </el-button>
+                <el-button type="primary" @click="validateAndConfirm">
+                    {{ $t('JournalCitationAnalysis.confirmUpdate') }}
+                </el-button>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import { quillEditor } from 'vue-quill-editor';
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
+const toolbarOptions = [
+    // ['underline'], // 加粗，斜体，下划线，删除线
+    // ['blockquote', 'code-block'], //引用，代码块
+    // [{ header: 1 }, { header: 2 }], // 几级标题
+    // [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
+    // [{ script: 'sub' }, { script: 'super' }], // 下角标，上角标
+    // [{ indent: '-1' }, { indent: '+1' }], // 缩进
+    // [{ direction: 'rtl' }], // 文字输入方向
+    // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
+    // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+    // [{ color: [] }, { background: [] }], // 颜色选择
+    // [{ font: ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体
+    // [{ align: [] }], // 居中
+
+    ['link'] // 上传图片、上传视频
+];
 import OrgTree from '@/components/org-tree';
 import commonclass from './class.vue';
 import commonAgreement from './agreement.vue';
@@ -311,7 +399,8 @@ export default {
         OrgTree,
         commonclass,
         commonAgreement,
-        commonJournalInstallment
+        commonJournalInstallment,
+        quillEditor
     },
     directives: {
         focus: {
@@ -322,6 +411,23 @@ export default {
     },
     data() {
         return {
+            editorOption: {
+                modules: {
+                    history: {
+                        delay: 1000,
+                        maxStack: 20,
+                        userOnly: false
+                    },
+                    toolbar: {
+                        container: toolbarOptions,
+                        handlers: {}
+                    }
+                },
+                placeholder: ''
+            },
+            feeDialogVisible: false, // 控制录入弹窗
+            tempFee: 0, // 录入的临时金额
+            activeJournalId: null, // 当前修改的期刊ID
             mediaUrl: this.Common.mediaUrl,
             baseUrl: this.Common.baseUrl,
             activeNames: [],
@@ -378,16 +484,20 @@ export default {
                         trigger: 'blur'
                     }
                 ],
-                scope: [{
+                scope: [
-                	required: true,
+                    {
-                	message: 'Please input journal introduction (English)',
+                        required: true,
-                	trigger: 'blur'
+                        message: 'Please input journal introduction (English)',
-                }],
+                        trigger: 'blur'
-                abstract_chinese: [{
+                    }
-                	required: true,
+                ],
-                	message: 'Please input journal introduction (Chinese)',
+                abstract_chinese: [
-                	trigger: 'blur'
+                    {
-                }],
+                        required: true,
+                        message: 'Please input journal introduction (Chinese)',
+                        trigger: 'blur'
+                    }
+                ],
                 email: [
                     {
                         required: true,
@@ -444,10 +554,78 @@ export default {
         await this.getDate();
     },
     methods: {
+        // 失去焦点事件
+        onEditorBlur(quill) {
+            //  console.log('editor blur!', quill)
+        },
+        // 获得焦点事件
+        onEditorFocus(quill) {
+            //console.log('editor focus!', quill)
+        },
+        // 准备富文本编辑器
+        onEditorReady(quill) {
+            // 监听粘贴事件
+            quill.root.addEventListener(
+                'paste',
+                (e) => {
+                    // 阻止默认粘贴行为
+                    e.preventDefault();
+
+                    // 获取粘贴板的纯文本
+                    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
+
+                    // 获取当前光标位置并插入纯文本
+                    const range = quill.getSelection();
+                    quill.insertText(range.index, text);
+                },
+                { capture: true }
+            ); // 使用捕获模式确保在 Quill 默认处理前执行
+        },
+        // 点击页面上的 Edit 按钮触发
+        openEditDialog(row) {
+            this.activeJournalId = row.id;
+            this.tempFee = row.fee; // 初始值为当前金额
+            this.feeDialogVisible = true;
+        },
+
+        // 点击录入弹窗的“确认更新”触发
+        async validateAndConfirm() {
+            if (this.tempFee === undefined || this.tempFee === null) {
+                this.$message.error(this.$t('JournalCitationAnalysis.placeholder'));
+                return;
+            }
+
+            // 弹出您截图中的 Final Confirmation
+            try {
+                await this.$confirm(
+                    this.$t('JournalCitationAnalysis.doubleConfirmContent'),
+                    this.$t('JournalCitationAnalysis.doubleConfirmTitle'),
+                    {
+                        confirmButtonText: this.$t('GroupClassification.submit'),
+                        cancelButtonText: this.$t('JournalCitationAnalysis.cancel'),
+                        type: 'warning',
+                        center: true
+                    }
+                );
+
+                // 用户点击了 Confirm Update，执行 API 保存
+                this.executeSave();
+            } catch (error) {
+                // 用户取消了确认
+            }
+        },
+
+        async executeSave() {
+            // 这里调用您的后端接口
+            // const res = await api.updateFee(this.activeJournalId, this.tempFee);
+            this.$message.success(this.$t('JournalCitationAnalysis.updateSuccess'));
+            this.feeDialogVisible = false;
+            this.getDate(); // 刷新列表数据
+        },
         async handleAvatarSuccess2(res, file) {
             if (res.code == 0) {
-               this.detailForm.editor_qrcode = res.upurl;
+                this.detailForm.editor_qrcode = res.upurl;
-               this.$forceUpdate()
+                this.$forceUpdate();
             } else {
                 this.$message.error(res.msg);
             }
@@ -488,10 +666,19 @@ export default {
         handleEdit() {
             this.$refs.detail_form.validate((valid) => {
                 if (valid) {
-                    if(this.detailForm.editor_qrcode==''||!this.detailForm.editor_qrcode){
+                    if (this.detailForm.editor_qrcode == '' || !this.detailForm.editor_qrcode) {
                         this.$message.error('Please upload WeChat Code!');
                         return false;
                     }
+                    if (this.detailForm.fee && this.detailForm.fee > 0 && this.detailForm.apc_url == '') {
+                        this.$message.error('Please input article processing charge link!');
+                        return false;
+                    }
+                    if (this.detailForm.apc_url && this.detailForm.apc_content != '') {
+                       
+                            this.detailForm.apc_content = this.detailForm.apc_content.replace(/<(?!(\/?a\b))[^>]+>/gi, '');
+                        
+                    }
                     this.$api
                         .post('api/Journal/editJournal', {
                             ...this.detailForm,
@@ -655,11 +842,12 @@ export default {
             });
         },
         openEditJournal(data) {
-            
             var that = this;
             this.currentJournal = data;
 
             this.detailForm = {
+                apc_url: data.apc_url,
+                apc_content: data.apc_content,
                 journal_id: data.journal_id,
                 title: data.title,
                 level: data.level,
@@ -677,8 +865,8 @@ export default {
                 areas: data.journal_topic ? data.journal_topic.split(',') : ['']
             };
             this.editDialogVisible = true;
-            if(this.$refs.detail_form){
+            if (this.$refs.detail_form) {
-                 this.$refs.detail_form.resetFields();
+                this.$refs.detail_form.resetFields();
             }
 
             // this.$nextTick(() => {
@@ -983,6 +1171,17 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+/deep/ .chapter_editor1 .ql-container {
+    height: 60px !important;
+    min-height: 60px !important;
+}
+/deep/ .chapter_editor1 .ql-editor {
+    height: 60px !important;
+    min-height: 60px !important;
+}
+/deep/ .ql-toolbar.ql-snow {
+    padding: 0px !important;
+}
 .floating {
     background: rgba(0, 0, 0, 0.7);
     box-shadow: rgba(0, 0, 0, 0.2);
@@ -1108,11 +1307,12 @@ export default {
     margin-left: -30px;
 }
 
-.WeChatCode  .avatar {
+.WeChatCode .avatar {
     width: 120px;
     height: 120px;
     display: block;
-}.portrait {
+}
+.portrait {
     /* width: 83px;
     height: 83px;
     border-radius: 110px;

src/components/page/articleAdd.vue

@@ -158,8 +158,7 @@
                                         type="textarea"
                                         v-model="form.abstrart"
                                         :autosize="{ minRows: 1, maxRows: 100 }"
-  class="full-show-no-scroll"
+                                        class="full-show-no-scroll"
-                                      
                                         placeholder=""
                                     />
                                 </el-form-item>
@@ -559,7 +558,7 @@
                                                     ref="uploadFile"
                                                     class="upload-demo up_newstyle"
                                                     :action="upload_articleCopyright"
-                                                    accept=".pdf,.rar,.zip"
+                                                    accept=".pdf, .zip"
                                                     name="figurecopyright"
                                                     :before-upload="beforeupload_articleCopyright"
                                                     :on-error="uperr_coverLetter"
@@ -775,16 +774,32 @@
                                 >
                                     $ {{ getFee(form.journal) }}
                                     <div style="color: #8c8d8f" v-if="getFee(form.journal) && getFee(form.journal) != '0.00'">
-                                        <i class="el-icon-warning" style="color: #517fd5; margin-right: 4px"></i>The article processing fee
+                                       
-                                        applies to papers submitted and ultimately accepted for publication after January 1, 2025. For
+                                        <div v-if="check_item.apc_url&&check_item.apc_content" >
-                                        authors seeking to apply for fee discounts, please
+                                            <i class="el-icon-warning" style="color: #517fd5; margin-right: 4px"></i><span class="apc_content" v-html="check_item.apc_content"></span>
-                                        <a
+                                        </div>
-                                            style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline"
+                                        <!-- <div v-if="form.journal == 1">
-                                            href="https://www.tmrjournals.com/apc/"
+                                            <i class="el-icon-warning" style="color: #517fd5; margin-right: 4px"></i>The article processing
-                                            target="_blank"
+                                            fee applies to papers submitted and ultimately accepted for publication after January 1, 2025.
-                                            >click here</a
+                                            For authors seeking to apply for fee discounts, please
-                                        >
+                                            <a
-                                        to view detailed policies.
+                                                style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline"
+                                                href="https://www.tmrjournals.com/tmr/free-application/"
+                                                target="_blank"
+                                                >click here</a
+                                            >
+                                            to view detailed policies.
+                                        </div> -->
+                                        <div v-else>
+                                            <i class="el-icon-warning" style="color: #517fd5; margin-right: 4px"></i>For more details about the Article Processing Charge (APC), please visit:
+                                            <a
+                                                style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline"
+                                                :href="check_item.apc_url"
+                                                target="_blank"
+                                                >{{check_item.apc_url}}</a
+                                            >
+                                           
+                                        </div>
                                     </div>
                                 </el-form-item>
 
@@ -1881,7 +1896,6 @@ export default {
                 this.form.journal = '';
                 this.reviewerof.journal = 1;
 
-               
                 if (localStorage.getItem('ms_journal_alias')) {
                     localStorage.removeItem('ms_journal_alias');
                 }
@@ -3901,6 +3915,9 @@ export default {
 </script>
 
 <style scoped>
+/deep/.apc_content a{
+    color: rgb(81, 127, 213) !important; cursor: pointer !important; text-decoration: underline !important;
+}
 .formTopics {
     width: 100%;
 }
@@ -4041,23 +4058,22 @@ export default {
 }
 /* 穿透Element UI的样式，强制覆盖所有限制 */
 .full-show-no-scroll::v-deep .el-textarea {
-  
+    overflow: visible !important;
-  overflow: visible !important;
 }
 
 .full-show-no-scroll::v-deep .el-textarea__inner {
-  white-space: normal !important;  /* 强制换行 */
+    white-space: normal !important; /* 强制换行 */
-  word-wrap: break-word !important;  /* 长文本/长单词换行 */
+    word-wrap: break-word !important; /* 长文本/长单词换行 */
-  overflow: visible !important;  /* 溢出内容显示，不隐藏 */
+    overflow: visible !important; /* 溢出内容显示，不隐藏 */
 
-  max-height: none !important;  /* 取消最大高度限制 */
+    max-height: none !important; /* 取消最大高度限制 */
-  resize: none !important;  /* 禁止手动调整大小 */
+    resize: none !important; /* 禁止手动调整大小 */
-  padding: 12px;  /* 可选：调整内边距，避免内容贴边 */
+    padding: 12px; /* 可选：调整内边距，避免内容贴边 */
 }
 
 /* 隐藏滚动条（即使偶尔出现也看不见） */
 .full-show-no-scroll::v-deep ::-webkit-scrollbar {
-  display: none !important;
+    display: none !important;
 }
 ::v-deep .el-textarea__inner {
     line-height: 1.5 !important;

src/components/page/articleDetailEditor.vue

@@ -550,10 +550,19 @@
                                         </el-col>
                                     </el-row>
 
-                                    <el-row :gutter="24" v-if="form.is_figure_copyright == 1">
+                                    <el-row :gutter="24">
                                         <el-col :span="24">
+                                            <el-button type="text" style="position: absolute; top: -2px; right: 14px" @click="reOpenDialog">
+                                                <i class="el-icon-edit"></i> Upload
+                                            </el-button>
                                             <h4>Figure Copyright Declaration :</h4>
-                                            <p class="fi_new">
+                                            <div style="line-height: 22px;padding-left: 10px;margin-top: 2px;color: #333;">
+                                              <p v-if="form.is_figure_copyright == 2">&nbsp;I confirm that all figures in this manuscript are original.</p>
+                                             <p v-if="form.is_figure_copyright == 1">&nbsp;I confirm that all figures in this manuscript used with proper permission.</p>
+                                              
+                                            </div>
+
+                                            <p class="fi_new" v-if="fileL_articleCopyright.length > 0" style="margin-top: 10px;">
                                                 <a v-for="item in fileL_articleCopyright" :href="mediaUrl + item.file_url">
                                                     <img src="../../assets/img/icon_0.png" />
                                                     <span>
@@ -563,6 +572,17 @@
                                                     <i class="el-icon-download download"></i>
                                                 </a>
                                             </p>
+
+                                            <FigureCopyright
+                                                :article_id="form.articleId"
+                                                :visible.sync="copyrightDialogVisible"
+                                                v-model="is_figure_copyright"
+                                                :upload-action="upload_articleCopyright"
+                                                :file-list="newfilearticleCopyrightList"
+                                                @on-success="upSuccess_articleCopyright"
+                                                @on-remove="removefilearticleCopyright"
+                                                @on-preview="dowloadFile"
+                                            />
                                             <br clear="both" />
                                         </el-col>
                                     </el-row>
@@ -659,7 +679,6 @@
                                                                     >( {{ iken.rated }} )</span
                                                                 >
                                                                 <span
-                                                                   
                                                                     style="color: #888; float: right; margin-right: 20px"
                                                                     @click="handleClick(iken, 'detail')"
                                                                     >Detail</span
@@ -964,7 +983,7 @@
                                         <p style="line-height: 20px">
                                             Manuscript submission :
                                             <b>{{ form.username }}</b>
-                                            <span style="margin: 0 5px;color: #409EFF ;">({{ form.user_email }})</span> 
+                                            <span style="margin: 0 5px; color: #409eff">({{ form.user_email }})</span>
                                             submitted to
                                             <b>{{ journal_me }}</b>
                                         </p>
@@ -1009,9 +1028,9 @@
                 <el-button type="" @click="FinalDecisionVisible = false">Cancel</el-button>
             </span>
         </el-dialog>
-<!-- 审稿详情 start-->
+        <!-- 审稿详情 start-->
         <reviewerDetail ref="reviewerDetail" v-if="reviewerVisible" :reviewerDetail="reviewerDetail" destroy-on-close></reviewerDetail>
-<!-- 审稿详情 end-->
+        <!-- 审稿详情 end-->
         <el-dialog title="Edit H Index" :visible.sync="HEditVisible" width="400px" :close-on-click-modal="false">
             <div style="margin: 0 0 20px 10px; font-weight: bold">{{ HIxForm.realname }}</div>
             <div style="margin: 0 0 20px 10px">Email :{{ HIxForm.email }}</div>
@@ -1026,8 +1045,8 @@
             </span>
         </el-dialog>
 
-        <el-dialog title="Change Status" :visible.sync="editVisible" width="550px" v-loading="loading1" :close-on-click-modal="false">
+        <el-dialog title="Change Status" :visible.sync="editVisible" width="750px" v-loading="loading1" :close-on-click-modal="false">
-            <el-form ref="editform" :model="editform" label-width="170px">
+            <el-form ref="editform" :model="editform" label-width="220px">
                 <el-form-item label="">
                     <span slot="label">
                         <i style="color: #f56c6c">*</i>
@@ -1043,9 +1062,27 @@
                         ></el-option>
                     </el-select>
                 </el-form-item>
+
                 <el-form-item label="Comments for authors :" v-show="editform.state == 4">
                     <el-input type="textarea" rows="3" v-model="editform.proposal_content" placeholder="" resize="4"> </el-input>
                 </el-form-item>
+                <!-- <el-form-item label="Figure Copyright Declaration:" v-show="editform.state == 4">
+                    <div class="copyright-declaration-wrapper">
+                        <el-radio-group v-model="editform.is_figure_copyright">
+                            <el-radio label="2"> I confirm that all figures in this manuscript are original. </el-radio>
+                            <el-radio label="1"> I confirm that all figures are used with proper permission. </el-radio>
+                            <el-input
+                                v-if="editform.is_figure_copyright == '1'"
+                                type="textarea"
+                                rows="3"
+                                v-model="editform.is_figure_copyright_content"
+                                placeholder=""
+                                resize="4"
+                            >
+                            </el-input>
+                        </el-radio-group>
+                    </div>
+                </el-form-item> -->
                 <el-form-item label="Transfer :" v-show="editform.state == 3 && form.transList.length == 0">
                     <el-select v-model="editform.trsjournal" placeholder="Please select">
                         <el-option :key="0" label="No Transfer" :value="0"></el-option>
@@ -1240,7 +1277,6 @@
                 </el-collapse>
 
                 <div style="line-height: 20px" v-if="isShowAI">
-                   
                     <p style="overflow: hidden; margin-bottom: 8px">
                         <span style="float: left">{{
                             currentArticleData.ai_review.is_finish == 2
@@ -1328,7 +1364,6 @@
                 </div>
             </div>
             <span slot="footer" class="dialog-footer">
-               
                 <el-button type="" @click="isShowAI = false">Close</el-button>
             </span>
         </el-dialog>
@@ -1338,13 +1373,16 @@
 <script>
 import timetalk from './time_talk';
 import reviewerDetail from '../../components/page/components/articleDetail/reviewerdetail.vue';
+import FigureCopyright from '../../components/page/components/articleDetail/FigureCopyright.vue';
 export default {
     components: {
         timetalk,
-        reviewerDetail
+        reviewerDetail,
+        FigureCopyright
     },
     data() {
         return {
+            copyrightDialogVisible: false, // 控制弹窗开关
             reviewerDetail: {},
             corresList: [],
             finalDecisionData: {},
@@ -1384,6 +1422,7 @@ export default {
             totalpageFileList: [],
             supplementaryFileList: [],
             fileL_articleCopyright: [],
+            newfilearticleCopyrightList: [],
             manuscirptFileList: [],
             responseFileList: [],
             authorList_name: '',
@@ -1649,7 +1688,9 @@ export default {
             finalList: [],
             reviewList: [],
             underReview: ['1'],
-            finalDecision: ['1']
+            finalDecision: ['1'],
+            is_figure_copyright: '',
+            figurecopyright_file: ''
         };
     },
     async created() {
@@ -1670,6 +1711,10 @@ export default {
         manuscirptUrl: function () {
             return this.baseUrl + this.form.manuscirpt;
         },
+        //图片版权
+        upload_articleCopyright: function () {
+            return this.baseUrl + 'api/Article/up_file/type/figurecopyright';
+        },
         upload_coverLetter: function () {
             return this.baseUrl + 'api/Article/up_file/type/coverLetter';
         },
@@ -1721,6 +1766,39 @@ export default {
         }
     },
     methods: {
+        reOpenDialog() {
+            // 强制先关闭，确保状态发生位移
+            this.copyrightDialogVisible = false;
+            this.$nextTick(() => {
+                this.copyrightDialogVisible = true;
+            });
+        },
+        // 下载文件
+        dowloadFile(file) {
+            let filePath = '/public/' + file.url;
+            let fileName = file.name;
+
+            // 获取heads中的filename文件名
+            let downloadElement = document.createElement('a');
+            // 创建下载的链接
+            downloadElement.href = filePath; // 下载后文件名
+            downloadElement.download = fileName;
+            downloadElement.target = '_blank';
+            document.body.appendChild(downloadElement);
+            // 点击下载
+            downloadElement.click();
+            // 下载完成移除元素
+            document.body.removeChild(downloadElement);
+        },
+        removefilearticleCopyright(file, fileList) {
+            this.figurecopyright_file = '';
+            this.newfilearticleCopyrightList = [];
+        },
+        //图片版权
+        upSuccess_articleCopyright(res, file) {
+            this.initFileList();
+            console.log(this.form);
+        },
         crateRevision(item) {
             // 二次询问
             this.$confirm('Do you want to send a review invitation?', 'Tip', {
@@ -1847,28 +1925,26 @@ export default {
         },
         // 算平均分
         avegeCount(arry) {
-    // 1. 计算有有效评分的数量
+            // 1. 计算有有效评分的数量
-    var ratedLength = arry.map(item => item.rated).filter(rated => rated && rated > 0).length;
+            var ratedLength = arry.map((item) => item.rated).filter((rated) => rated && rated > 0).length;
 
-    let all = 0;
+            let all = 0;
-    // 2. 累加总分
+            // 2. 累加总分
-    for (let i = 0; i < arry.length; i++) {
+            for (let i = 0; i < arry.length; i++) {
-        all += Number(arry[i].rated || 0); // 加上 || 0 防止出现 undefined 导致计算失败
+                all += Number(arry[i].rated || 0); // 加上 || 0 防止出现 undefined 导致计算失败
-    }
+            }
 
-    // 3. 核心判断逻辑
+            // 3. 核心判断逻辑
-    // 如果没有评分的人(ratedLength 为 0)，或者总分就是 0，直接返回 "-"
+            // 如果没有评分的人(ratedLength 为 0)，或者总分就是 0，直接返回 "-"
-    // 否则计算平均分并保留一位小数
+            // 否则计算平均分并保留一位小数
-    let str = (ratedLength > 0 && all > 0) 
+            let str = ratedLength > 0 && all > 0 ? (all / ratedLength).toFixed(1) : '-';
-              ? (all / ratedLength).toFixed(1) 
-              : "-";
 
-    return str;
+            return str;
-},
+        },
 
         // 算终审分
         finalCount(arry) {
-            var ratedLength = arry.map(item => item.rated).filter(rated => rated&&rated>0).length;
+            var ratedLength = arry.map((item) => item.rated).filter((rated) => rated && rated > 0).length;
             let str = 0;
             let all = 0;
             let sgr = 0;
@@ -1927,7 +2003,6 @@ export default {
             return maxItem && maxItem.repeat ? maxItem.repeat.length : 0;
         },
         handleClick(item, type, repeatItem) {
-           
             this.reviewerDetail = item;
             this.reviewerVisible = true;
             this.$nextTick(() => {
@@ -2346,6 +2421,11 @@ export default {
                     this.form.username = res.article.account;
                     this.form.user_email = res.article.user_email;
                     this.form.is_figure_copyright = res.article.is_figure_copyright;
+
+                    this.is_figure_copyright =
+                        res.article.is_figure_copyright == 1 || res.article.is_figure_copyright == 2
+                            ? res.article.is_figure_copyright.toString()
+                            : '';
                     this.form.title = res.article.title;
                     this.form.journal = res.article.journal_id;
                     this.form.journalname = res.article.journalname;
@@ -2531,6 +2611,17 @@ export default {
                     this.totalpageFileList = res.totalpage;
                     this.supplementaryFileList = res.supplementary;
                     this.fileL_articleCopyright = res.figurecopyright ? res.figurecopyright : [];
+                    if (this.fileL_articleCopyright.length > 0) {
+                        var figurecopyright_file = fileL_articleCopyright[this.fileL_articleCopyright.length - 1];
+                        this.figurecopyright_file = figurecopyright_file.file_url;
+                        this.newfilearticleCopyrightList = [
+                            {
+                                name: 'Figure Copyright Declaration File',
+                                url: this.figurecopyright_file
+                            }
+                        ];
+                        this.$forceUpdate();
+                    }
                 })
                 .catch((err) => {
                     console.log(err);
@@ -3124,4 +3215,40 @@ td {
 .scoringRulesItem {
     margin-top: 10px;
 }
+
+.copyright-declaration-wrapper {
+    background-color: #f8f9fb; 
+    padding: 6px 6px;
+    border-radius: 8px;
+    border: 1px solid #e4e7ed;
+    margin-top: 10px;
+}
+
+.copyright-declaration-wrapper :deep(.el-radio-group) {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    gap: 10px; 
+}
+
+
+.copyright-declaration-wrapper :deep(.el-radio) {
+    height: auto;
+    white-space: normal; 
+    line-height: 1.2;
+    display: flex;
+    align-items: flex-start; 
+}
+
+.copyright-declaration-wrapper :deep(.el-radio__input) {
+    margin-top: 3px;
+}
+
+.copyright-declaration-wrapper :deep(.el-radio:hover) {
+    color: #333;
+}
+
+.copyright-declaration-wrapper :deep(.el-radio.is-checked .el-radio__label) {
+    font-weight: 500;
+}
 </style>

src/components/page/articleProcessRevision.vue

@@ -240,6 +240,27 @@
 										(.rar,.zip)</div>
 								</el-upload>
 							</p>
+							<!-- <br clear="both">
+							<h4>Figure Copyright Declaration :</h4>
+							<p>
+								<el-form-item label="Please select the copyright status of your figures:">
+									<el-radio-group :value="value" @input="$emit('input', $event)" style="display: flex; flex-direction: column; gap: 15px">
+										<el-radio label="2">I confirm that all figures in this manuscript are original.</el-radio>
+										<el-radio label="1">I confirm that all figures in this manuscript used with proper permission.</el-radio>
+									</el-radio-group>
+								</el-form-item>
+								<el-upload class="upload-demo" :action="upload_figurecopyright" accept=".pdf, .zip"
+									name="figurecopyright" :before-upload="beforeupload_figurecopyright"
+									:on-error="uperr_coverLetter" :on-success="upSuccess_figurecopyright" :limit="1"
+									:on-exceed="alertlimit" :on-remove="removefilearticleCopyright"  >
+									<div class="el-upload__text" style="padding:8px 5px;" >
+										<em>Click Upload</em>
+									</div>
+									<div class="el-upload__tip" slot="tip" style="color: #888; left: 80px; font-size: 13px">
+                                                        Upload the copyright permission letters or license documents figures. (file format:
+                                                        .pdf, .zip)<br />
+                                                    </div></el-upload>
+							</p> -->
 							<br clear="both">
 							<h4><b style="margin-right:5px;color: red;">*</b>Response to reviewers :</h4>
 							<p>
@@ -461,6 +482,18 @@
 						<i class="el-icon-download download"></i>
 					</a>
 				</p>
+				<br clear="both"  v-if="fileL_articleCopyright.length>0">
+				<h4 v-if="fileL_articleCopyright.length>0">Figure Copyright Declaration: </h4>
+				<p>
+					<a v-for="item in fileL_articleCopyright" :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>
 			<common-word-html  :articleId="articleId" style="box-sizing: border-box" 
@@ -491,6 +524,7 @@
 				},
 				fileMesForm: {
 					manuscirpt: '',
+					// figurecopyright: '',
 					picturesAndTables: '',
 					responseFile: '',
 					supplementary:'', // 
@@ -510,6 +544,7 @@
 				coverLetterFileList: [],
 				picturesAndTablesFileList: [],
 				totalpageFileList: [],
+				fileL_articleCopyright: [],
 				manuscirptFileList: [],
 				supplementaryFileList:[],
 				fileL_supplementary:[],
@@ -530,6 +565,9 @@
 			upload_coverLetter: function() {
 				return this.baseUrl + 'api/Article/up_file/type/coverLetter';
 			},
+			upload_figurecopyright: function () {
+            return this.baseUrl + '/api/Article/up_file/type/figurecopyright';
+        },
 			upload_picturesAndTables: function() {
 				return this.baseUrl + 'api/Article/up_file/type/picturesAndTables';
 			},
@@ -604,6 +642,7 @@
 						this.coverLetterFileList = res.coverLetter;
 						this.picturesAndTablesFileList = res.picturesAndTables;
 						this.manuscirptFileList = res.manuscirpt;
+						this.fileL_articleCopyright = res.figurecopyright&&res.figurecopyright.length>0?res.figurecopyright:[];
 						this.totalpageFileList = res.totalpage;
 						this.supplementaryFileList = res.supplementary;
 					})
@@ -711,7 +750,18 @@
 					this.$message.error('service error: ' + res.msg);
 				}
 			},
+			upSuccess_figurecopyright(res, file) {
+            if (res.code == 0) {
+                this.fileMesForm.figurecopyright = 'figurecopyright/' + res.upurl;
+                this.fileL_figurecopyright = [{}];
+                this.fileL_figurecopyright[0].name = 'Figure Copyright Declaration File';
+                this.fileL_figurecopyright[0].url = 'figurecopyright/' + res.upurl;
              
+            } else {
+                this.$message.error('service error: ' + res.msg);
+            }
+            console.log(this.form);
+        },
 			removefilesupplementary() {
 				this.fileMesForm.supplementary = '';
 				this.fileL_supplementary = [];
@@ -727,6 +777,11 @@
 				// 		}
 				// 	});
 			},
+			removefilearticleCopyright() {
+				this.fileMesForm.figurecopyright = '';
+				this.fileL_figurecopyright = [];
+				
+			},
 
 			// 上传文件
 			addWordTablesList(tables) {
@@ -762,8 +817,9 @@
                 .then((res) => {that. addWordTablesList(that.wordTables);});
         },
 		async	onSubmit() {
-			console.log(this.fileMesForm)
+			
 			var that=this;
+			
 				//验证文件
 				if (this.fileMesForm.manuscirpt == undefined || this.fileMesForm.manuscirpt == '') {
 					this.$message.error(
@@ -775,6 +831,7 @@
 						'Required information is not allowed to be empty.');
 					return false;
 				}
+				
 				this.loading = true;
 				await this.$api
 					.post('api/Article/RepairBack', this.fileMesForm)
@@ -811,6 +868,8 @@
 			//检验上传文件的格式
 			beforeupload_coverLetter(file) {},
 			beforeupload_picturesAndTables(file) {},
+			beforeupload_figurecopyright(file) {},
+			
 			beforeupload_manuscirpt(file) {
 				let flieArr = file.name.split(".")
 				let fileSuffix = flieArr[flieArr.length - 1];
@@ -1133,10 +1192,11 @@ that.wordTables=wordTables
 
 	.art_author_btn>h4 {
 		float: left;
-		width: 180px;
+		width: 190px;
-		padding: 8px 20px 0 0;
+		padding: 8px 15px 0 0;
 		letter-spacing: -0.5px;
 		text-align: right;
+		font-size: 13px;
 	}
 
 	.art_author_btn>p {

src/components/page/components/articleDetail/FigureCopyright.vue

@@ -0,0 +1,169 @@
+<template>
+    <el-dialog
+        title="Figure Copyright Declaration"
+        width="650px"
+        :visible="visible"
+        :close-on-click-modal="false"
+        append-to-body
+        @close="handleClose"
+    >
+        <div style="color: #333; line-height: 24px">
+            <el-form label-position="top">
+                <!-- <el-form-item label="Please select the copyright status of your figures:">
+                    <el-radio-group :value="value" @input="$emit('input', $event)" style="display: flex; flex-direction: column; gap: 15px">
+                        <el-radio label="2">I confirm that all figures in this manuscript are original.</el-radio>
+                        <el-radio label="1">I confirm that all figures in this manuscript used with proper permission.</el-radio>
+                    </el-radio-group>
+                </el-form-item> -->
+
+                <transition name="el-fade-in">
+                    <el-form-item style="">
+                      
+                      <div style="position: relative; top: 4px; margin-left: 14px">
+                      <el-upload
+                            ref="uploadFile"
+                            class="upload-demo up_newstyle"
+                            :action="uploadAction"
+                            accept=".pdf, .zip"
+                            name="figurecopyright"
+                            :file-list="fileList"
+                            :on-success="handleSuccess"
+                            :on-remove="handleRemove"
+                            :on-error="handleError"
+                            :on-exceed="handleExceed"
+                            :on-preview="handlePreview"
+                            :limit="1"
+                        >
+                            <div class="el-upload__text" @click="clearUploadedCopyrightFile">
+                                <em>Upload</em>
+                            </div>
+                            <div class="el-upload__tip" slot="tip" style="color: #888; left: 80px; font-size: 13px">
+                                Upload the copyright permission letters or license documents figures. (file format: .pdf, .zip)<br />
+                            </div>
+                        </el-upload>
+                      </div>
+                    </el-form-item>
+                </transition>
+            </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer">
+           
+            <el-button type="" @click="handleClose">Cancel</el-button> <el-button type="primary" @click="handleSave">Save</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    name: 'FigureCopyrightDialog',
+    props: {
+        value: { type: [String, Number], default: '' }, // 对应 form.is_figure_copyright
+        article_id: { type: [String, Number], default: '' }, // 对应 form.article_id
+        visible: { type: Boolean, default: false },
+        uploadAction: { type: String, required: true }, // 上传接口
+        fileList: { type: Array, default: () => [] } // 文件列表
+    },
+    computed: {},
+    methods: {
+        handleSave() {
+            console.log(this.fileList);
+            if(this.value==1){
+                if (this.fileList.length == 0) {
+                    this.$message.warning('Please upload the copyright permission letters or license documents figures.');
+                    return;
+                }
+            }
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading...',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            var data={
+                article_id: this.article_id,
+                    figure_copyright: this.value,
+                    user_id: localStorage.getItem('U_id'),
+                    type: 'figurecopyright',
+                    url:  this.value==1?this.fileList[0].url:'',
+                    // is_figure_copyright: this.value
+            }
+            var this_ = this;
+             this.$api
+                .post('api/Article/addFigureCopyrightForEditor',data)
+                .then(async (res) => {
+                    loading.close();
+                    if (res.status == 1) {
+                        this.$message.success('success');this.$emit('update:visible', false);this_.$emit('on-success');this.dialogVisible = false; 
+                   
+                        
+                    }else{
+                        this.$message.error(res.msg);
+                    }
+                }).catch(() => {
+                    loading.close();
+                })
+           
+        },
+        handleClose() {
+            this.$emit('update:visible', false);
+        },
+        clearUploadedCopyrightFile() {
+            this.$refs['uploadFile'].clearFiles();
+        },
+        handleSuccess(res, file, fileList) {
+            if (res.code == 0) {
+                if (res.code == 0) {
+                
+                this.fileList = [{}];
+                this.fileList[0].name = 'Figure Copyright Declaration File';
+                this.fileList[0].url = 'figurecopyright/' + res.upurl;
+               
+            } else {
+                this.$message.error('service error: ' + res.msg);
+                this.fileList = [];
+            }
+            console.log(this.form);
+
+                // this.onStaging(5);
+            } else {
+                this.$message.error('service error: ' + res.msg);
+            }
+            // this.$emit('on-success', { res, file, fileList });
+        },
+        handleRemove(file, fileList) {
+            this.$emit('on-remove', { file, fileList });
+        },
+        handleError(err) {
+            this.$message.error('Upload failed');
+        },
+        handleExceed() {
+            this.$message.warning('Only 1 file is allowed');
+        },
+        handlePreview(file) {
+            this.$emit('on-preview', file);
+        }
+    }
+};
+</script>
+
+<style scoped>
+::v-deep .up_newstyle {
+    margin-left: 10px;
+}
+
+::v-deep .up_newstyle .el-upload--text {
+    background-color: #006699;
+    border: 1px solid #006699;
+    padding: 0 7px;
+    /* margin-left: 10px; */
+}
+
+::v-deep .up_newstyle .el-upload__text em {
+    color: #fff !important;
+    font-size: 12px;
+}
+
+
+
+
+
+</style>

src/components/page/per_text.vue

@@ -21,7 +21,8 @@
                                 Manuscript ID: {{ txt_mess.accept_sn }}
                             </h5>
                             <p style="display: inline-block; margin: 0 35px"><b>Type :</b> {{ txt_mess.atype }}</p>
-                            <p style="display: inline-block"><b>Submitted time :</b> {{ txt_mess.ctime | formatDatehms}}</p>
+                          
+                            <!-- <p style="display: inline-block"><b>Submitted time :</b> {{ txt_mess.ctime}}</p> -->
                             <div v-if="this.add_apply == 0">
                                 <p><b>Abstract :</b> <br />{{ txt_mess.abstrart }}</p>
                                 <div class="file_sty" v-for="item in fileList" style="margin-top: 15px">