<template>
    <div style="background-color: #fafafa;height: 100%;">
        <div style="height: 100%;"
            class="container_l"
            v-loading="loading"
            element-loading-text="Loading..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-row :gutter="20" style="height: 100%;" v-if="txt_mess&&txt_mess.accept_sn&&add_apply==0">
                <el-col :span="10" style="height: 100%;" v-if="this.add_apply == 0">
                    <iframe ref="mainiframe" :src="pdfUrl" class="lookpdf" frameborder="0"></iframe>
                </el-col>
                <el-col :span="this.add_apply == 0?14:24" style="height: 100%; overflow-y: scroll" >
                    <el-card class="box-card">
                        <div class="tet_list" :model="txt_mess" >
                            <h4>{{ txt_mess.article_title }}</h4>
                            <h5>
                                <a :href="txt_mess.website" target="_blank" class="titlink">{{ txt_mess.title }}</a>
                                <span style="margin: 0 10px"> >> </span>
                                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}}</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">
                                    <img src="../../assets/img/icon_0.png" alt="" class="icon_img" />
                                    <a :href="mediaUrl + item.file_url" target="_blank" class="txt_pdf"
                                        >Manuscript
                                        <span style="margin-left: 50px; color: #888; font-size: 13px">{{ item.ctime }}</span>
                                        <i class="el-icon-download" style="margin-left: 20px; color: #66b1ff; font-weight: bold"></i> </a
                                    ><br />
                                </div>

                                <div class="file_sty" v-for="item in picList">
                                    <img src="../../assets/img/icon_0.png" alt="" class="icon_img" />
                                    <a :href="mediaUrl + item.file_url" target="_blank" class="txt_pdf"
                                        >Figures and Tables
                                        <span style="margin-left: 50px; color: #888; font-size: 13px">{{ item.ctime }}</span>
                                        <i class="el-icon-download" style="margin-left: 20px; color: #66b1ff; font-weight: bold"></i> </a
                                    ><br />
                                </div>
                                <div class="file_sty" v-for="item in SMList">
                                    <img src="../../assets/img/icon_0.png" alt="" class="icon_img" />
                                    <a :href="mediaUrl + item.file_url" target="_blank" class="txt_pdf"
                                        >Supplementary Material
                                        <span style="margin-left: 50px; color: #888; font-size: 13px">{{ item.ctime }}</span>
                                        <i class="el-icon-download" style="margin-left: 20px; color: #66b1ff; font-weight: bold"></i> </a
                                    ><br />
                                </div>
                                <p style="margin-top: 5px; color: #999; font-size: 14px;">
                                    <b style="color: #e41411">Download failed?</b>
                                    <p style="line-height: 18px;color: #999; font-size: 14px;margin-top: 4px;">
                                        
                                    It seems like you're encountering a download issue with Google Chrome version 86. Here are the steps you can follow to resolve or bypass the issue:
                                    <br />1. Right-click on the download link: Instead of clicking the link normally, right-click on it and select  <b style="color: #e41411">"save link as".</b> This should allow the download to start.
                                    <br />2. Try a different browser:
If you're still having trouble with Chrome, you could use other browsers to complete your downloads. Browsers like Firefox, Internet Explorer, Brave, Vivaldi, the new Edge, or Opera are known to work well for downloads without this issue.
                                </p>
                                  
                                </p>
                            </div>
                        </div>
                    </el-card>
                    <!-- <el-card class="box-card" v-if="this.add_apply == 1">
                        Thank you for your time and consideration on the manuscript. We are sorry that this manuscript has went through peer
                        review and the final review has been obtained according to the timetable. Accordingly, your review process has
                        been discontinued. Your comments do not need to be submitted now. We would like to express our sincere gratitude for
                        your contributions as well.
                    </el-card>
                    <el-card class="box-card" v-if="this.add_apply == 2">
                         The review link has expired. If you would like to review the manuscript again, please click the 'Apply to Review Manuscript' button.
                        
                    </el-card> -->
                    <el-card class="box-card" v-if="this.add_apply == 0">
                         <!-- 审稿人表单修改  -->
                        <common-review-article  @refresh="getData"  type="questionform" :form="questionform" :txt_mess="txt_mess" :btn_submit="btn_submit" :articleId="articleId" :journal_id="journal_id"></common-review-article>
                    </el-card>
                </el-col>
            </el-row>
            <div class="invitation-expired-box" v-else-if="txt_mess&&txt_mess.accept_sn&&add_apply!=0&&add_apply!=null">
                <div class="invitation-expired-card">
        
        <div class="manuscript-header">
            <div class="manuscript-meta">
                <span>
                                <a :href="txt_mess.website" target="_blank" class="titlink">{{ txt_mess.title }}</a>
                                <span style="margin: 0 10px"> >> </span>
                                Manuscript ID: {{ txt_mess.accept_sn }}
                            </span>
                            <span style="display: inline-block; margin: 0 35px"><b>Type :</b> {{ txt_mess.atype }}</span>
                            <span style="display: inline-block"><b>Submitted time :</b> {{ txt_mess.ctime |formatDatehms }}</span>
            </div>
            <h1>{{ txt_mess.article_title }}</h1>
        </div>
        
        <div class="notification-card" v-if="add_apply == 2">
            <i class="el-icon-time icon"></i> 
            
            <h2>Review Invitation Expired</h2>
            
            <p>
                The review link has expired. If you would like to review the manuscript again,<br/> please click the 'Apply to Review Manuscript' button.
            </p>
            
            <div class="cta-button" style="" @click="applyReview">
                <i class="el-icon-refresh-right" style="font-weight: 700;font-size: 18px;"></i> Apply to Review Manuscript
            </div>
        </div>
        
        <div class="notification-card notification-card-success" v-if="add_apply == 1">
            <i class="el-icon-success icon"></i> 
            
            <h2>Manuscript Review Completed</h2>
            
            <p>Thank you for your time and consideration on the manuscript. We are sorry that this manuscript has went through peer
                        review and the final review has been obtained according to the timetable. Accordingly, your review process has
                        been discontinued. Your comments do not need to be submitted now. We would like to express our sincere gratitude for
                        your contributions as well.
            </p>
            
          
        </div>
       
        <div class="notification-card notification-card-grey" v-if="add_apply == -1">
            <i class="el-icon-success icon"></i> 
            
            <h2>Manuscript review canceled</h2>
            
            <!-- <p>Thank you for your time and consideration on the manuscript. We are sorry that this manuscript has went through peer
                        review and the final review has been obtained according to the timetable. Accordingly, your review process has
                        been discontinued. Your comments do not need to be submitted now. We would like to express our sincere gratitude for
                        your contributions as well.
            </p>
             -->
          
        </div>
        <div class="notification-card notification-card-grey" v-if="add_apply == 3">
            <i class="el-icon-warning-outline icon"></i> 
            
            <h2>Review Record Unavailable</h2>
            
            <p>Inquiries regarding the manuscript status and subsequent handling, please feel free to reach out to {{ txt_mess.journal_email }}.
            </p>
            
          
        </div>

    </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import pdf from 'vue-pdf';
export default {
    data() {
        return {
            loading: false,
            articleId: null,
            Direct_log: this.$route.query.act,
            Art_id: this.$route.query.Art_id,
            // morShow: false,
            txt_mess: {},
            fileList: [],
            picList: [],
            SMList: [], //补充材料
            mediaUrl: this.Common.mediaUrl,
            add_edit: {
                article_id: this.$route.query.Art_id,
                user_id: localStorage.getItem('U_id'),
                content: ''
            },
            head_line: '',
            questionform: {
                rev_qu_id: '',
                art_rev_id: this.$route.query.Art_id,
                qu1: '',
                qu2: '',
                qu3: '',
                qu4: '',
                qu5: '', 
                qu5contents: '',
                qu6: '',
                 qu6contents: '',
                qu7: '',
                 qu7contents: '',
                qu8: '',
                 qu8contents: '',
                qu9: '',
                qu9contents: '',
                qu10: '',
                qu10contents: '',
                qu11: '',
                qu11contents: '',
                qu12: '',
                qu12contents: '',
                qu13: '',
                qu13contents: '',
                qu14: '',
                qu14contents: '',
                qu15: '',
                qu15contents: '',
                rated: '',
                recommend: '',
                other: '',
                confident: '',
                comment: '',
                is_anonymous: '',
                type: '',
            },
            add_apply: null,
            btn_submit: 0,
            pdfUrl: '',
            journal_id: null,
            rules: {
                qu6: [
                    {
                        required: true,
                        message: 'please select',
                        trigger: 'blur'
                    }
                ],
                rated: [
                    {
                        required: true,
                        message: 'please select',
                        trigger: 'blur'
                    }
                ],
                comment: [
                    {
                        required: true,
                        message: 'please input content',
                        trigger: 'blur'
                    }
                ],
                recommend: [
                    {
                        required: true,
                        message: 'please select',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    created() {
        if (this.Direct_log == null) {
            this.CheckReviewerPermissions();
        } else {
            this.$api
                .post('api/Chief/autoLoginForChief', {
                    code: this.Direct_log
                })
                .then((res) => {
                    if (res.code == 0) {
                        localStorage.setItem('U_role', res.data.roles);
                        localStorage.setItem('U_name', res.data.user.account);
                        localStorage.setItem('U_id', res.data.user.user_id);
                        localStorage.setItem('U_relname', res.data.user.realname);


                        if (res.data.user.account == 'superadmin' || res.data.user.account ==
										'wuxiongzhi2') {
										localStorage.setItem('U_status', '0'); //超级管理员
										
							
									} else if (res.data.roles.includes('editor')) {
										localStorage.setItem('U_status', '1'); //编辑
										
										
									} else {
										localStorage.setItem('U_status', '2'); //其余的身份
									
									}


                        this.$bus.$emit('user-name-updated');
                      this.CheckReviewerPermissions()
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        }
    },
    methods: {
        applyReview() {
        
            this.$confirm('Are you sure you want to send an email to the Editor?', 'Tips', {
                confirmButtonText: 'Sure',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: 'please wait',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.$api
                    .post('api/Workbench/applySendEmail', {
                        
                        account: localStorage.getItem('U_name'),
                        art_rev_id: this.$route.query.Art_id,

                    })
                    .then((res) => {
                        loading.close();
                        if (res.status == 1) {
                            this.$message.success('Email sent successfully!');
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        loading.close();
                    });
            });
       
        },
        //审稿人权限判断 
        CheckReviewerPermissions() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            let params = {
            art_rev_id: this.Art_id,
            account: localStorage.getItem('U_name'),
        };
        if (this.Direct_log) {
            params.act = this.Direct_log;
        }
        var that = this;
            this.$api
                .post('api/Workbench/getReviewerAuth', params)
                .then((res) => {
                        loading.close();
                        if(res.status==1){
                            
                            that.getData()
                        }else{
                            this.txt_mess={...res.data.article,title:res.data.article.journal_name,ctime:res.data.review.ctime,atype:res.data.article.type_name};
                       
                        }
                       
                    switch (res.status) {
                        
                            case 1:
                            // 有权限操作
                                this.add_apply = 0;
                                
                                break;
                                    case 7:
                                    // 7文章状态不在审稿中  
                                this.add_apply = 1;
                                break;
                                case 8:
                                //拒绝审稿
                                this.add_apply = -1;
                                break;
                                case 13:
    case 16:
                                //13 邀请审稿超过5天未同意邀请16同意审稿后14天未进行审稿
                                this.add_apply = 2;
                                break;
                            default:
                                this.add_apply = 3;
                                break;
                        }
                    
                    
                })
                .catch((err) => {loading
                    this.$message.error(err);
                });
        },
        getData() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            // 获取文章信息
            this.$api
                .post('api/Reviewer/getartrevdate', {
                    revid: this.Art_id,
                    human: 'reviewer'
                })
                .then((res) => {
                    this.articleId=res.article_id
                    if (res.state != 0) {
                        this.btn_submit = 1;
                    }
                    let date = new Date(parseInt(res.ctime) * 1000);
                    let Y = date.getFullYear() + '-';
                    let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                    let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                    res.ctime = Y + M + D;
                    this.txt_mess = res;
                    this.journal_id = res.journal_id;
                    loading.close();
                })
                .catch((err) => {
                    loading.close();
                    this.$message.error(err);
                });
            this.$api
                .post('api/Reviewer/getAFilelistByID ', {
                    revid: this.Art_id
                })
                .then((res) => {
                    for (var i = 0; i < res.data.length; i++) {
                        let date = new Date(parseInt(res.data[i].ctime) * 1000);
                        let Y = date.getFullYear() + '-';
                        let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                        let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                        res.data[i].ctime = Y + M + D;
                    }
                    this.fileList = res.data;
                    // 获取格式
                    let pdfOut = this.fileList[this.fileList.length - 1].file_url;
                    if (pdfOut.substring(pdfOut.lastIndexOf('.') + 1) == 'docx') {
                        this.pdfUrl =
                            'https://view.officeapps.live.com/op/view.aspx?src=https://submission.tmrjournals.com/public/' + pdfOut+`&ui=en-US`;
                        // this.pdfUrl =
                        // 	'https://view.xdocin.com/view?src=https://submission.tmrjournals.com/public/' +
                        // 	pdfOut
                    } else {
                        this.pdfUrl = 'https://submission.tmrjournals.com/public/' + pdfOut+`&ui=en-US`;
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
            this.$api
                .post('api/Reviewer/getBFilelistByID', {
                    revid: this.Art_id
                })
                .then((res) => {
                    for (var i = 0; i < res.data.length; i++) {
                        let date = new Date(parseInt(res.data[i].ctime) * 1000);
                        let Y = date.getFullYear() + '-';
                        let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                        let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                        res.data[i].ctime = Y + M + D;
                    }
                    this.picList = res.data;
                })
                .catch((err) => {
                    this.$message.error(err);
                });
            this.$api
                .post('api/Reviewer/getCFilelistByID', {
                    revid: this.Art_id
                })
                .then((res) => {
                    for (var i = 0; i < res.data.length; i++) {
                        let date = new Date(parseInt(res.data[i].ctime) * 1000);
                        let Y = date.getFullYear() + '-';
                        let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                        let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                        res.data[i].ctime = Y + M + D;
                    }
                    this.SMList = res.data;
                })
                .catch((err) => {
                    this.$message.error(err);
                });
            //初始化问卷
            this.$api
                .post('api/Reviewer/getQuestion', {
                    artrevid: this.Art_id
                })
                .then((res) => { 
                    if (res.code == 0) {
                        this.questionform.rev_qu_id = res.data.rev_qu_id;
                        this.questionform.qu1 = res.data.qu1;
                        this.questionform.qu2 = res.data.qu2;
                        this.questionform.qu3 = res.data.qu3;
                        this.questionform.qu4 = res.data.qu4;
                        this.questionform.qu5 = res.data.qu5;
                        this.questionform.qu6 = res.data.qu6;
                        this.questionform.qu7 = res.data.qu7;
                        this.questionform.qu8 = res.data.qu8;
                        this.questionform.qu9 = res.data.qu9 == 0 ? false : true;
                        this.questionform.qu9contents = res.data.qu9_contents;
                        this.questionform.qu10 = res.data.qu10 == 0 ? false : true;
                        this.questionform.qu10contents = res.data.qu10_contents;
                        this.questionform.qu11 = res.data.qu11 == 0 ? false : true;
                        this.questionform.qu11contents = res.data.qu11_contents;
                        this.questionform.qu12 = res.data.qu12 == 0 ? false : true;
                        this.questionform.qu12contents = res.data.qu12_contents;
                        this.questionform.qu13 = res.data.qu13 == 0 ? false : true;
                        this.questionform.qu13contents = res.data.qu13_contents;
                        this.questionform.qu14 = res.data.qu14 == 0 ? false : true;
                        this.questionform.qu14contents = res.data.qu14_contents;
                        this.questionform.qu15 = res.data.qu15 == 0 ? false : true;
                        this.questionform.qu15contents = res.data.qu15_contents;
                        this.questionform.rated = res.data.rated;
                        this.questionform.recommend = res.data.recommend;
                        this.questionform.other = res.data.other;
                        this.questionform.confident = res.data.confidential;
                        this.questionform.comment = res.data.comments;
                        this.questionform.is_anonymous = res.data.is_anonymous;
                        this.questionform.type= res.data.type;this.questionform.score = res.data.score;
                    }
                });
        },

        questionSubmit() {
            if (this.questionform.is_anonymous == '' && this.questionform.is_anonymous != '0') {
                this.$message.error('Please choose disclose your name or remain anonymous.');
                return false;
            }
            const regex = /[\u4E00-\u9FA5\uF900-\uFA2D]{1,}/;
            if (this.questionform.comment && this.questionform.comment != '') {
                if (regex.test(this.questionform.comment)) {
                    // 如果输入的是中文，则清空输入框
                    this.$message.error('Comments for the Authors cannot use Chinese.');
                    return false;
                }
            }
            if (this.questionform.confident && this.questionform.confident != '') {
                if (regex.test(this.questionform.confident)) {
                    // 如果输入的是中文，则清空输入框
                    this.$message.error('Confidential Comments to the Editor cannot be in Chinese.');
                    return false;
                }
            }
            // 验证相加的字数
            let Char_Cter =
                this.questionform.qu9contents +
                ' ' +
                this.questionform.qu10contents +
                ' ' +
                this.questionform.qu11contents +
                ' ' +
                this.questionform.qu12contents +
                ' ' +
                this.questionform.qu13contents +
                ' ' +
                this.questionform.comment;
            if (new RegExp('[\\u4E00-\\u9FFF]+', 'g').test(Char_Cter)) {
                //中文
                let blankCount = 0;
                for (let i in Char_Cter.match(/ /g)) {
                    blankCount++;
                }
                let wenziCount = 0;
                for (let j = 0; j < Char_Cter.length; j++) {
                    if (Char_Cter.charCodeAt(j) < 0 || Char_Cter.charCodeAt(j) > 255) {
                        wenziCount++;
                    }
                }
                if (blankCount + wenziCount <= 60) {
                    this.$message.error('We encourage you to enrich your comment further to help improve the peer paper.');
                    this.$message({
                        offset: '380',
                        type: 'error',
                        message: 'We encourage you to enrich your comment further to help improve the peer paper.'
                    });
                    return false;
                }
            } else {
                //英文
                let blankCount = 0;
                for (let i in Char_Cter.match(/ /g)) {
                    blankCount++;
                }
                if (blankCount <= 50) {
                    this.$message.error('We encourage you to enrich your comment further to help improve the peer paper.');
                    this.$message({
                        offset: '380',
                        type: 'error',
                        message: 'We encourage you to enrich your comment further to help improve the peer paper.'
                    });
                    return false;
                }
            }
            // 提交接口
            this.loading = true;
            this.$refs.question.validate((valid) => {
                if (valid) {
                    this.$api.post('api/Reviewer/questionSubmit', this.questionform).then((res) => {
                        if (res.code == 0) {
                            this.loading = false;
                            this.$message.success('Success!!');
                            this.getData();
                            this.$router.push('/per_text_success');
                        } else {
                            this.loading = false;
                            // this.$message.error('Question submit error!');
                            this.$message.error(res.msg);
                        }
                    });
                } else {
                    this.loading = false;
                }
            });
        }
    },
    mounted() {}
};
</script>

<style scoped>
.tet_list {
    font-size: 20px;
}

.box-card {
    margin-bottom: 20px;
    line-height: 24px;
}

.upload-txtc .el-upload-list__item .el-icon-upload-success {
    display: none !important;
}

.tet_list h5 {
    font-size: 15px;
    margin: 20px 0 5px 0;
    font-weight: normal;
    display: inline-block;
}

.tet_list p {
    font-family: Calibri;
    line-height: 22px;
    font-size: 16px;
}

.file_sty {
    margin-bottom: 6px;
}

.file_sty a {
    color: #606266;
    font-size: 14px;
}

.file_sty a:hover {
    text-decoration: underline;
}

.red {
    color: #ff0000;
}

.el-collapse {
    border-top: 0;
    border-bottom: 0;
}

.top_dao:hover {
    text-decoration: underline;
    cursor: pointer;
}

.icon_img {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    vertical-align: middle;
}

.trah_c .icon_img {
    width: 24px;
    height: 24px;
    margin: 0 20px;
}

.el-divider {
    background-color: #006699;
}

.container_l {
    box-sizing: border-box;
    min-width: 1000px;
}

.container_l .box-card {
    height: auto;
}

.lookpdf {
    height: 100%;
    width: 100%;
}

.titlink {
    color: #006699;
    text-decoration: underline;
    cursor: pointer;
}

.morSou {
    color: #006699;
    text-align: right;
    font-weight: bold;
    margin: 5px 0 -10px 0;
}

.morSou i {
    margin-right: 3px;
    font-weight: bold;
}

.morSou:hover {
    text-decoration: underline;
    cursor: pointer;
}

.jouLink {
    color: #006699;
    font-weight: bold;
    margin: 0 0 0 5px;
}

.jouLink:hover {
    text-decoration: underline;
    cursor: pointer;
}
/* 
	#WACRibbonPanel {
		display: none;
	}

	.css-124 {
		display: none;
	}

	.css-138 {
		display: none;
	} */
    .invitation-expired-box{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .invitation-expired-card {
            max-width: 1000px;
            margin-bottom: 10%;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px; /* 轻微圆角 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 柔和阴影 */
        }

        /* --- 稿件信息样式 --- */
        .manuscript-header {
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
            margin-bottom: 25px;
        }

        .manuscript-header h1 {
            color: #303133; /* 深蓝色/专业色 */
            font-size: 20px;
            margin: 0 0 5px 0;
            font-weight: 700;
            margin-top: 12px;
        }

        .manuscript-meta {
            color: #7f8c8d; /* 浅灰色元数据 */
            font-size: 0.9em;
            margin-top: 5px;
        }

        /* --- 提示框样式 --- */
        .notification-card {
            border: 1px solid #e0e0e0;
            padding: 30px;
            text-align: center;
            border-radius: 6px;
            background-color: #fff;
            margin-top: 30px;
            padding-bottom: 50px;
        }

        .icon {
            font-size: 3.5em;
            color: #f39c12; /* 橙色，表示过期/警告 */
            margin-bottom: 15px;
            display: block;
            font-weight: bold;
        }
        .notification-card-success .icon{
            color: #67c23a;
        }
        .notification-card-grey .icon{
            color: #d3d4d6;
            margin-bottom: 25px;
        }

        .notification-card h2 {
            color: #e67e22; /* 稍深的橙色 */
            margin-top: 0;
            margin-bottom: 30px;
            font-weight: 700;
        }
        .notification-card-success h2 {
            color: #67c23a; /* 稍深的橙色 */
           
        }
        .notification-card-grey h2 {
            color: #909399; /* 稍深的橙色 */
           
        }

        .notification-card p {
            color: #555;
            line-height: 1.6;
            margin-bottom: 30px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* --- 按钮样式 (CTA) --- */
        .cta-button {
            display: inline-block;
            background-color: #006699; /* 专业深蓝色 */
            color: white;
            padding: 12px 25px;
            border-radius: 4px;
            text-decoration: none;
            font-size: 1.1em;
            font-weight: 700;
            transition: background-color 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            border: none;
            cursor: pointer;
        }

        .cta-button:hover {
            background-color: #00c286; /* 鼠标悬停时变浅 */
        }

        .cta-button i {
            margin-right: 8px;
        }
</style>
