液化

src/views/emailVerify.vue

@@ -0,0 +1,254 @@
+<template>
+    <div class="emailVerify" :class="{'active': forbid}">
+        <main class="main">
+            <h1 id="title">Welcome</h1>
+            <p id="description" v-if="!forbid">Please take the survey</p>
+            
+        </main>
+    </div>
+</template>
+
+<script lang="ts">
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Modal,message } from 'ant-design-vue';
+import { Https } from "@/tool/https";
+import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
+export default defineComponent({
+    setup() {
+        let feedbackData:any = reactive({
+			userName:'',
+			gender:'Female',
+			occupation:'',
+			country:'',
+			email:'',
+			age:'20-30',
+			helpful:[],
+			improve:[],
+			isSubscribe:'',
+			reasonForNotSubscribe:[],
+			designTools:'',
+		});
+		let setSubmit = (value:any)=>{
+			Https.axiosPost(Https.httpUrls.questionnaire, value).then(
+				(rv) => {
+					alert('Submit Successfully!')
+				}
+			).catch(res=>{
+			});
+		}
+		let forbid = ref(false)
+		
+        return {
+            ...toRefs(feedbackData),
+            setSubmit,
+			forbid,
+        };
+    },
+
+    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%);
+    margin: 1rem;
+	height: 100%;
+	overflow-y: auto;
+	&.active{
+		#title {
+			font-size: 3rem;
+		}
+		#description {
+			font-size: 1.4rem;
+		}
+		#survey-form {
+			width: 90%;
+			padding: 1.5rem;
+			font-size: 1.2rem;
+		}
+		p{
+			font-size: 1.4rem;
+		}
+		input,
+		#dropdown {
+			padding: 5px;
+		}
+
+		textarea {
+			max-height: 125px;
+			padding: 5px;
+		}
+		input[type="radio"],
+		input[type="checkbox"] {
+			width: 1rem;
+			height: 1rem;
+		}
+		input,select{
+			height: 3.5rem;	
+		}
+	}
+	.main{
+		background: linear-gradient(45deg, #eee4f3, #f3f4e6);
+		padding: 2rem;
+	}
+    #title {
+        font-size: 6rem;
+        margin: 0;
+		font-weight: 900;
+    }
+
+    #description {
+        font-size: 2.8rem;
+        font-style: italic;
+    }
+	
+    #survey-form {
+        position: relative;
+        background: rgba(255, 255, 255, 0.2);
+        width: 60%;
+        left: 50%;
+        transform: translateX(-50%);
+        text-align: left;
+        border-radius: 15px;
+        padding: 3rem;
+        box-shadow: -1px 1px 5px 0.5px;
+        font-size: 2.4rem;
+        display: flex;
+        flex-wrap: wrap;
+		justify-content: space-between;
+		&.active{
+			transition: width 1s ease;
+		}
+    }
+	
+    @media (max-width: 760px) {
+        form {
+            width: 75%;
+        }
+    }
+    h2 {
+        width: 100%;
+		font-weight: 900;
+    }
+    .section {
+        display: flex;
+        flex-direction: column;
+        margin: 1rem;
+        width: 100%;
+    }
+	.section:last-child{
+		margin-bottom: 4rem;
+	}
+    .w40 {
+        width: 40%;
+    }
+	.fontColor{
+		color: rgb(255, 2, 2);
+	}
+	p{
+		font-size: 2.8rem;
+	}
+    p,
+    label {
+        font-weight: bold;
+        margin: 0;
+        margin-left: 5px;
+    }
+	
+    input,
+    #dropdown {
+        border: none;
+        border-radius: 5px;
+        padding: 10px;
+        outline: 0;
+    }
+
+    input:focus,
+    #dropdown:focus {
+        border: 2px solid rgb(173, 173, 173);
+    }
+	input,select{
+		height: 7rem;	
+	}
+    input,
+    button,
+    select,
+    textarea {
+		cursor: pointer;
+        font-family: inherit;
+        font-size: inherit;
+    }
+
+    input[type="radio"],
+    input[type="checkbox"] {
+        display: inline-block;
+        width: 2rem;
+        height: 2rem;
+        vertical-align: middle;
+        margin: 0;
+    }
+	label{
+		vertical-align: baseline;
+		cursor: pointer;
+		.others-input{
+			background: rgba(255, 255, 255, 0);
+			border-top: none;
+			border-right: none;
+			border-left: none;
+			border-radius: 0;
+			border-bottom: 2px solid;
+		}
+		.others-input:focus{
+			border: none;
+			border-bottom: 2px solid;
+		}
+		span{
+			vertical-align: top;
+		}
+		textarea{
+			width: 80%;
+			vertical-align: top;
+			margin-left: 1rem;
+
+		}
+	}
+    textarea {
+        min-height: 75%;
+		max-height: 250px;
+        width: 100%;
+        resize: vertical;
+        border: none;
+        border-radius: 10px;
+        padding: 10px;
+        box-sizing: border-box;
+    }
+
+    #submit {
+        background: green;
+		background: #39215b;
+
+        border: none;
+        border-radius: 10px;
+        color: white;
+        font-size: 3rem;
+        transition: all 0.3s ease-in;
+    }
+
+    #submit:hover {
+        background: darkgreen;
+		background: #543087;
+    }
+}
+</style>