dev/dcp-web-gate/src_old/views/NationalregionalCommissions/Submitapplicasuccess.vue

<!-- 委员会申请列表 -->
<template>
    <div class="autoBox box1" style="position: relative; background: #f5f5f5">
        <div class="center" style="margin-top: 20px">
            <div class="left">
                <div class="centerLeft1">
                    <div class="top">
                        <div class="top1"></div>
                        <div class="top2"></div>
                        <div class="allApplication">
              <span v-if="!isDistinguish">{{
                $t("common.submitapplications")
              }}</span>
                        </div>
                        <div @click="back" class="more">
                            <span>{{ "<" }}{{ $t("common.return") }}</span>
                        </div>
                    </div>
                    <div class="content">
                        <div class="content1">
                            <img  src="@/assets/img/nationaIntorduction/success_1.png" alt="" style="margin-left:579px;width: 40px;" :style="$i18n.locale == 'en'?'margin-left:610px;':''">
                        </div>
                        <div class="content2">
                            <div class="successfont" style="margin-left:559px;margin-top:39px;">{{ $i18n.locale == 'en' ? 'Submit Success ' : '提交成功' }}</div>
                            <div class="successfont1" style="margin-left:451px;margin-top:29px;">{{ $i18n.locale == 'en' ? 'Check it out in "Committee Workspace -- My Application" ' : '请到“委员会工作空间——我提交的申请”中查看' }}</div>
                            <div class="success_1">
                                <div style="display:flex">
                                    <div class="leftfont">{{ $i18n.locale == 'en' ? 'Title ' : '标题' }}：</div><div class="rightfont">{{applytitle}}</div>
                                </div>
                                <div style="display:flex">
                                    <div class="leftfont">{{ $i18n.locale == 'en' ? 'Apply Num ' : '申请编号' }}：</div><div class="rightfont">{{applynumber}}</div>
                                </div>
                                <div style="display:flex">
                                    <div class="leftfont">{{ $i18n.locale == 'en' ? 'Applyer ' : '申请人' }}：</div><div class="rightfont">{{applyer}}</div>
                                </div>
                                <div style="display:flex">
                                   <div class="leftfont"> {{ $i18n.locale == 'en' ? 'Submit Time ' : '提交时间' }}：</div><div class="rightfont">{{applytime}}</div>
                                </div>
                            </div>
                            <div class="success_2" style="margin-top:59px;" :style="$i18n.locale == 'en'?'padding-left:110px;padding-right:110px;':''">
                                 <div>
                                        <img  src="@/assets/img/nationaIntorduction/duigou_green.png" alt="" style=" ">
                                 </div>
                                    <div style="color: #67C23A;">{{ $i18n.locale == 'en' ? 'Submit Application ' : '提交申请' }}</div>
                                <div style="margin-top:-4px">
                                 <img  src="@/assets/img/nationaIntorduction/zhixian_green.png" alt="" style="margin-top:-4px">
                                </div>
                                <div>
                                    <img  src="@/assets/img/nationaIntorduction/duigou_grey.png" alt="" style="">
                                </div>
                                <div style="color:rgba(7, 7, 7, 0.25);">{{ $i18n.locale == 'en' ? 'Review Regional Secretariat' : '区域秘书处审核' }}</div>
                                <div style="margin-top:-4px">
                                    <img  src="@/assets/img/nationaIntorduction/zhixian_grey.png" alt="" style="margin-top:-4px">
                                </div>
                                <div >
                                        <img  src="@/assets/img/nationaIntorduction/duigou_grey.png" alt="" style="">
                                </div>
                                 <div style="color:rgba(7, 7, 7, 0.25);">{{ $i18n.locale == 'en' ? 'Headquarters Review' : '总部审核' }}</div>
                                <div style="margin-top:-4px">
                                    <img  src="@/assets/img/nationaIntorduction/zhixian_grey.png" alt="" >
                                </div>
                                <div >
                                        <img  src="@/assets/img/nationaIntorduction/duigou_grey.png" alt="" style="">
                                </div>
                                    <div style="color:rgba(7, 7, 7, 0.25);">{{ $i18n.locale == 'en' ? 'Complete' : '完成' }}</div>

                        </div>
                            <div style="margin-top:74px;display:flex">
                                <div class="submit" :style="$i18n.locale == 'en'?'padding-left:40px;':'padding-left:32px;'"  @click="againsubmit">{{ $i18n.locale == 'en' ? 'Apply ' : '继续申请' }}</div>
                                <div class="cancel" :style="$i18n.locale == 'en'?'padding-left:40px;':'padding-left:44px;'"  @click="close">{{ $i18n.locale == 'en' ? 'Close' : '关闭' }}</div>
                            </div>
                        </div>

                    </div>

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

</template>
<script>
    import Screen from "@/components/screen";
    export default {
        name: "Submitapplication",
        props: ["successObj","flag"],
        components: {
            Screen,
        },
        data() {
            return {
                applytitle:undefined,
                applynumber:undefined,
                applyer:undefined,
                applytime:undefined,


            };
        },
        watch: {
            "$i18n.locale"() {},
            CountryId() {},
        },
        updated(){


        },
        mounted() {
            console.log(this.successObj)
          /*  this.applytitle='疫情防控'
            this.applynumber='20212323439423'
            this.applyer='张三'
            this.applytime='2021-12-11'*/
            this.applytitle=this.successObj.title;
            this.applynumber=this.successObj.applyNumber;
            this.applyer=this.successObj.applyPeople;
            this.applytime=this.successObj.applyTime;
        },
        destroyed() {},
        methods: {
            handleCurrentChange() {},
            back() {
                if(this.flag==1){
                    var params = {
                        name: "workspace",
                        type: false,
                    };
                    this.$emit("applicationType", params);
                }
                if(this.flag==2){
                    var params = {
                        name: "application",
                        type: false,
                    };
                    this.$emit("applicationType", params);
                }
            },
            againsubmit(){
              /*  this.$router.push("Submitapplication")*/
                var params = {
                    name: "submitapplication",
                    type: false,
                    flag:this.flag
                    /*      category: "3",*/
                };
                this.$emit("applicationType", params);
            },
            close(){
                // this.$router.push("CommitteeWorkSpace")
                if(this.flag==1){
                    var params = {
                        name: "workspace",
                        type: false,
                    };
                    this.$emit("applicationType", params);
                }
                if(this.flag==2){
                    var params = {
                        name: "application",
                        type: false,
                    };
                    this.$emit("applicationType", params);
                }
            },
            screenBack() {},

        },
    };
</script>
<style scoped>
    .submit{
        box-sizing: border-box;
        margin-left: 489px;
        width: 120px;
        height: 40px;
        background: #E6973A;
        border: 1px solid #E6973A;
        border-radius: 4px;
        /* Bold/Body */
        padding-left:32px;
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        /* identical to box height, or 157% */
        cursor:pointer;
        display: flex;
        align-items: center;
        text-align: center;
        font-feature-settings: 'tnum' on, 'lnum' on;

        /* Neutral Color/White */

        color: #FFFFFF;
    }
    .cancel{
        box-sizing: border-box;
        width: 120px;
        height: 40px;
        margin-left: 30px;
        padding-left:44px;
        background: white;
        border: 1px solid #e9ebef;
        border-radius: 4px;
        cursor:pointer;

        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        /* identical to box height, or 157% */

        display: flex;
        align-items: center;
        text-align: center;
        font-feature-settings: 'tnum' on, 'lnum' on;

        color: rgba(17, 17, 17, 0.65);
    }
    .box1 {
        padding: 0 0 20px 0;
        position: absolute;
    }
    .successfont{
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: bold;
        font-size: 20px;
        line-height: 0px;
        /* identical to box height, or 0% */
        color: rgba(0, 0, 0, 0.85);

    }
    .successfont1{
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 0px;
        /* identical to box height, or 0% */
        color: rgba(0, 0, 0, 0.65);

    }
    .success_1{
        margin-top:40px;
        margin-left:465px;
    }
    .leftfont{
        width:115px;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 30px;
        /* or 214% */


        color: rgba(0, 0, 0, 0.85);

    }
    .success_2{
        display:flex;
        flex-wrap: wrap;
        justify-content:space-around;
        /*padding-left:30%;
        padding-right:30%;*/
        margin-top:30px;
        font-size:15px;
        padding-left:217px;
        padding-right:217px;
    }
    .right_two_4_div{
        position:relative;height:35px;width:35px;border-radius: 50%;border:1px solid #1890ff
    }
    .right_two_4_i{
        position:absolute;top:50%;left:20%;transform:translateY(-50%)
    }
    .rightfont{
        width:180px;
        margin-left:19px;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        /* or 214% */
        color: rgba(0, 0, 0, 0.65);

    }
    .center {
        display: flex;
    }
    .topImg img {
        display: inline-block;
        width: 1200px;
        height: 324px;
    }
    .centerLeft1 {
        border-radius: 0px;

        width: 1198px;
        height: 877px;
        left: 360px;
        top: 317px;

        background: #FFFFFF;
    }
    .left {
        position: relative;
    }

    .top .top1 {
        position: absolute;
        width: 5.5px;
        height: 10.5px;
        left: 20px;
        top: 35px;
        background: #376ac7;
        z-index: 1;
    }
    .top .top2 {
        position: absolute;
        width: 5.5px;
        height: 15px;
        left: 20px;
        top: 35px;
        background: #83bd50;
    }
    .top .allApplication {
        position: absolute;
        height: 22px;
        left: 34px;
        top: 31px;
    }
    .top .allApplication span {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: #375586;
    }
    .top .notice {
        position: absolute;
        height: 22px;
        left: 160px;
        top: 32px;
    }
    .top .notice span {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: rgba(10, 10, 10, 0.85);
    }
    .top .more {
        position: absolute;
        height: 16px;
        right: 21px;
        top: 31px;
    }
    .top .more span {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: #4790f7;
    }
    .content .content1 {
        position: absolute;
        width: 1198px;
        height: 39px;
        left: 0px;
        top: 136px;
    }
    .content .content2 {
        position: absolute;
        width:1198px;
        height:699px;
        top:175px;

    }
    .content .title {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.85);
        position: absolute;
        left: 16px;
        top: 16px;
        right: 14px;
        bottom: 113px;
    }
    .content .time {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
        color: rgba(0, 0, 0, 0.65);
        position: absolute;
        left: 16px;
        top: 61px;
    }
    .content .type {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.85);
        position: absolute;
        left: 16px;
        top: 89px;
    }
    .content .toView {
        margin-left: 100px;
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #274e92;
    }
    .content .toProgress {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #274e92;
    }
    .centerLeft2 {
        position: relative;
        margin-top: 20px;
        height: 177px;
        width: 850px;
        border-radius: 0px;
        background: #fff;
    }
    .content .audit {
        position: absolute;
        right: 5%;
    }
    .area {
        position: absolute;
        top: 100px;
    }
    .pag {
        position: absolute;
        bottom: 0;
        right: 0;
    }


</style>