aida_front/src/views/emailVerify.vue

<template>
    <div class="emailVerify">
        <main class="main">
            <div class="survey-form">
				<h1 id="title"><span>√</span>邮箱修改成功</h1>
				<div class="text">
					<p id="description">您的新邮箱为：*********************</p>
				</div>
				<div class="mark_loading" v-show="!isSucceed">
				</div>
			</div>
        </main>
    </div>
	<div class="mark_loading" v-show="isShowMark">
		<a-spin size="large" />
	</div>
</template>

<script lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import { Https } from "@/tool/https";
import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
export default defineComponent({
    setup() {
		const route = useRoute();
        let feedbackData:any = reactive({
			isShowMark:false,
			isSucceed:false,
		});
		let setSubmit = (value:any)=>{
			Https.axiosPost(Https.httpUrls.questionnaire, value).then(
				(rv) => {
					alert('Submit Successfully!')
				}
			).catch(res=>{
			});
		}
		
        return {
            ...toRefs(feedbackData),
            setSubmit,
        };
    },

    data() {
        return {
            // moodTemplateId: "", //模板id
        };
    },
    mounted() {},
    methods: {},
});
</script>

<style lang="less" scoped>
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
.emailVerify {
    font-family: "Quicksand", sans-serif;
	font-family: 'Roboto', sans-serif;
    text-align: center;
    line-height: 1.5;
    // background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);
	overflow-y: auto;
	*{
		padding: 0;
		margin: 0;
	}
	.main{
		background: linear-gradient(45deg, #eee4f3, #f3f4e6);
		// background: #f5f5f5;
		width: 100vw;
		height: 100vh;
	}
    #title {
        font-size: 6rem;
        margin: 0;
		font-weight: 900;
    }
	#title{
		display: flex;
		align-items: center;
		span{
			background: #000;
			width: 8rem;
			height: 8rem;
			border-radius: 50%;
			color: #fff;
			display: block;
			font-size: 6rem;
			line-height: 8rem;
			text-align: center;
			margin: 10px;
		}
	}
    .survey-form {
		position: relative;
		background: rgba(255, 255, 255);
		width: 50%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		font-size: 2.4rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 2rem;
		padding: 4rem 0;
		.mark_loading{
			background: #fff;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
		}
    }
	
    @media (max-width: 760px) {
        form {
            width: 75%;
        }
    }
    
	p{
		font-size: 2.8rem;
	}
}
</style>