From 814dd1205cdf3629307b8f496734a3ddbf745009 Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Tue, 18 Jun 2024 10:45:15 +0800
Subject: [PATCH] fix

---
 src/component/HomePage/Generate.vue          |   1 +
 src/component/HomePage/MoodboardUpload.vue   |   1 +
 src/component/HomePage/PrintboardUpload.vue  |   1 +
 src/component/HomePage/SketchboardUpload.vue |   1 +
 src/component/HomePage/createSlogan.vue      |   2 +-
 src/component/HomePage/productImg.vue        |   3 +
 src/component/WorksPage/newScaleImage.vue    |  12 +-
 src/lang/cn.ts                               |   6 +-
 src/lang/en.ts                               |   6 +-
 src/router/index.ts                          |   5 +
 src/views/HomeView/HomeView.vue              |   4 +-
 src/views/HomeView/library.vue               |   1 +
 src/views/feedbackSurvey.vue                 | 771 +++++++++++++++++++
 13 files changed, 803 insertions(+), 11 deletions(-)
 create mode 100644 src/views/feedbackSurvey.vue

diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index 0e65de08..5c65492c 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -391,6 +391,7 @@ export default defineComponent({
 			this.printModel = value
 		},
 		getgenerate(){
+			this.isTextarea = false
 			if(this.isGenerate)return
 			clearInterval(this.remGenerateTime)
 			if(this.searchPictureName){
diff --git a/src/component/HomePage/MoodboardUpload.vue b/src/component/HomePage/MoodboardUpload.vue
index c7a7e549..f22204fc 100644
--- a/src/component/HomePage/MoodboardUpload.vue
+++ b/src/component/HomePage/MoodboardUpload.vue
@@ -703,6 +703,7 @@ export default defineComponent({
 				.modal_imgItem{
 					position: relative;
 					overflow: hidden;
+					text-align: center;
 					img{
 						position: absolute;
 						top: 50%;
diff --git a/src/component/HomePage/PrintboardUpload.vue b/src/component/HomePage/PrintboardUpload.vue
index 5db7592c..f6fee991 100644
--- a/src/component/HomePage/PrintboardUpload.vue
+++ b/src/component/HomePage/PrintboardUpload.vue
@@ -918,6 +918,7 @@ export default defineComponent({
 					border: 1px solid #f5f5f5;
 					position: relative;
 					cursor: pointer;
+					text-align: center;
 					img{
 						object-fit: cover;
 						height: 100%;
diff --git a/src/component/HomePage/SketchboardUpload.vue b/src/component/HomePage/SketchboardUpload.vue
index 11c7ecaa..b0bb116b 100644
--- a/src/component/HomePage/SketchboardUpload.vue
+++ b/src/component/HomePage/SketchboardUpload.vue
@@ -794,6 +794,7 @@ export default defineComponent({
 					border: 1px solid #f5f5f5;
 					position: relative;
 					cursor: pointer;
+					text-align: center;
 					&:hover .delete_like_file_block{
 						display: block;
 						opacity: 1;
diff --git a/src/component/HomePage/createSlogan.vue b/src/component/HomePage/createSlogan.vue
index e9ee5b60..091c11ed 100644
--- a/src/component/HomePage/createSlogan.vue
+++ b/src/component/HomePage/createSlogan.vue
@@ -107,7 +107,7 @@ export default defineComponent({
 		let canvasWH = ref(0);
 		let textData = reactive({
 			fill:'#000000',
-			fontSize:'20',
+			fontSize:'35',
 			fontFamily:'Arial',
 			textAlign:'left',
 			overline: false,
diff --git a/src/component/HomePage/productImg.vue b/src/component/HomePage/productImg.vue
index 9b5073cb..938548f7 100644
--- a/src/component/HomePage/productImg.vue
+++ b/src/component/HomePage/productImg.vue
@@ -209,6 +209,9 @@ export default defineComponent({
 			}
 			Https.axiosPost(Https.httpUrls.productImageLikeList, data).then(
 				(rv) => {
+					rv.forEach((item:any) => {
+						item.imgUrl = item.url
+					});
 					productImgData.likeList.push(...rv)
 				}
 			).catch(res=>{
diff --git a/src/component/WorksPage/newScaleImage.vue b/src/component/WorksPage/newScaleImage.vue
index 0382cf55..3ec2bfb9 100644
--- a/src/component/WorksPage/newScaleImage.vue
+++ b/src/component/WorksPage/newScaleImage.vue
@@ -297,8 +297,13 @@ export default defineComponent({
 					imgData.loadingShow = false
 					imgData.scaleImageData = rv
 					let canvasUrl = [rv.canvasUrl]
-					var findUrl = rv.designPythonOutfitList.map((obj:any) => obj.designUrl);
+					var findUrl = []
+					if(rv.designPythonOutfitList){
+						findUrl = rv.designPythonOutfitList.map((obj:any) => obj.designUrl);
+					}
 					imgData.scaleImageList = canvasUrl.concat(findUrl);
+					console.log(imgData.scaleImageList);
+					
 					imgData.scaleImageIndex = 0
 					imgData.getCommentData.portfolioId = rv.id
 					if(str == 'zan'){
@@ -319,7 +324,10 @@ export default defineComponent({
 			if(imgData.scaleImageData.openSource == 0){
 				return message.info('作者不允许二次创作哦')
 			}
-        	router.push({name:'homePage',params: {id:imgData.scaleImageData.userLikeGroupSourceId,type:'Works'}})
+			console.log(imgData.scaleImageData);
+			
+        	router.push({name:'homePage',params: {id:imgData.scaleImageData.id,type:'Works'}})
+        	// router.push({name:'homePage',params: {id:imgData.scaleImageData.userLikeGroupSourceId,type:'Works'}})
 		}
 		let setCommentReply = (value:any,str:any)=>{
 				imgData.commentReply.leve1Id = value.id
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index 1732d4d4..5be86cb3 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -250,7 +250,7 @@ export default {
 		currently:'您排在队列中的第{generateLineUp}位',
 		PIN:'PIN',
 		Maximum:'最多可上传{maxImg}张图片，每张图片最大2M',
-		Thumbnail:'选择的线稿缩略图',
+		Thumbnail:'选择的线稿',
 		inputContent1:'生成图片的标题',
 		maximumLength:'输入的内容超过允许输入的最大长度',
 		jsContent1:"上传失败",
@@ -269,7 +269,7 @@ export default {
 		currently:'您排在队列中的第{generateLineUp}位',
 		PIN:'PIN',
 		Maximum:'最多可上传8张图片，每张图片最大2M',
-		Thumbnail:'选择的印花缩略图',
+		Thumbnail:'选择的印花',
 		inputContent1:'生成图片的标题',
 		maximumLength:'输入的内容超过允许输入的最大长度',
 		jsContent1:"您只能上传图片文件！",
@@ -300,7 +300,7 @@ export default {
 		Generate:'生成',
 		Delete:'删除',
 		Maximum:'最多可上传8张图片，每张图片最大2M',
-		Thumbnail:'选择的情绪板缩略图',
+		Thumbnail:'选择的情绪板',
 		layout:'布局',
 		selected:'当前的情绪版布局',
 		Edit:'编辑',
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 7956788a..b4bca430 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -251,7 +251,7 @@ export default {
 		currently:'You are currently in the {generateLineUp} th position in the queue',
 		PIN:'PIN',
 		Maximum:'Maximum {maxImg} images can be uploaded, Maximum 2M per image',
-		Thumbnail:'Thumbnail preview of selected sketchboard',
+		Thumbnail:'Selected sketchboard',
 		inputContent1:'Input prompt',
 		maximumLength:'The entered content exceeds the maximum length.',
 		jsContent1:"upload failed",
@@ -270,7 +270,7 @@ export default {
 		currently:'You are currently in the {generateLineUp} th position in the queue',
 		PIN:'PIN',
 		Maximum:'Maximum 8 images can be uploaded, Maximum 2M per image',
-		Thumbnail:'Thumbnail preview of selected printboard',
+		Thumbnail:'Selected printboard',
 		inputContent1:'Input prompt',
 		maximumLength:'The entered content exceeds the maximum length.',
 		jsContent1:"You can only upload Image file!",
@@ -301,7 +301,7 @@ export default {
 		Generate:'Generate',
 		Delete:'Delete',
 		Maximum:'Maximum 8 images can be uploaded, Maximum 2M per image',
-		Thumbnail:'Thumbnail preview of selected moodboard',
+		Thumbnail:'Selected moodboard',
 		layout:'Layout',
 		selected:'Layout of selected moodboard',
 		Edit:'Edit',
diff --git a/src/router/index.ts b/src/router/index.ts
index e3c80d68..a3ad0190 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -132,6 +132,11 @@ const routes: Array<RouteRecordRaw> = [
 		name: 'setIdentification',
 		component: _import('setIdentification')
 	},
+	{
+		path: '/feedbackSurvey',
+		name: 'feedbackSurvey',
+		component: _import('feedbackSurvey'),
+	},
 	{
 		path: '/404',
 		name: '404',
diff --git a/src/views/HomeView/HomeView.vue b/src/views/HomeView/HomeView.vue
index 8bb403b2..dfd2dd61 100644
--- a/src/views/HomeView/HomeView.vue
+++ b/src/views/HomeView/HomeView.vue
@@ -941,14 +941,14 @@ export default defineComponent({
 				"collectionId": 0,
 				"coverId": 0,
 				"createDate": "",
-				"id": 0,
+				"id": userGroupId,
 				"isDeleted": 0,
 				"portfolioDes": "",
 				"portfolioName": "",
 				"portfolioType": "",
 				"status": 0,
 				"updateDate": "",
-				"userLikeGroupId":userGroupId 
+				"userLikeGroupId":'' 
 			}
 			this.isShowMark = true;
 			Https.axiosPost(Https.httpUrls.setPorfolioChoose, data).then(
diff --git a/src/views/HomeView/library.vue b/src/views/HomeView/library.vue
index fd2a863f..c9942696 100644
--- a/src/views/HomeView/library.vue
+++ b/src/views/HomeView/library.vue
@@ -1195,6 +1195,7 @@ export default defineComponent({
 			}
 		},
 		getgenerate(){
+			this.isTextarea = false
 			let selectCodeStr = JSON.parse(JSON.stringify(this.selectCode))
 			if(this.isGenerate[selectCodeStr]){
 				return
diff --git a/src/views/feedbackSurvey.vue b/src/views/feedbackSurvey.vue
new file mode 100644
index 00000000..aacbeb94
--- /dev/null
+++ b/src/views/feedbackSurvey.vue
@@ -0,0 +1,771 @@
+<template>
+    <div class="feedbackSurvey">
+        <main id="main">
+            <h1 id="title">AiDA 3.0 Feedback Survey</h1>
+            <p id="description">Please take the survey</p>
+            <form id="survey-form">
+                <h2 class="section-title">Personal Information</h2>
+                <div class="section w40">
+                    <label for="name"
+                        >Name:<span class="fontColor">*</span></label
+                    >
+                    <input
+                        type="text"
+						v-model="userName"
+                        placeholder="Enter your name"
+                    />
+                </div>
+                <div class="section w40">
+                    <label for="gender"
+                        >Gender:<span class="fontColor">*</span></label
+                    >
+                    <input
+                        type="text"
+						v-model="gender"
+                        placeholder="Enter your gender"
+                        required
+                    />
+                </div>
+                <div class="section w40">
+                    <label for="occupation"
+                        >Occupation:<span class="fontColor">*</span></label
+                    >
+                    <input
+                        type="text"
+						v-model="occupation"
+                        placeholder="Enter your occupation"
+                        required
+                    />
+                </div>
+                <!-- <div class="section w40">
+                    <label for="country"
+                        >Country of Origin:<span class="fontColor" >*</span
+                        ></label
+                    >
+                    <input
+                        type="text"
+                        id="country"
+                        name="country"
+                        placeholder="Enter your country of origin"
+                        required
+                    />
+                </div> -->
+				<div class="section w40">
+                    <label for="dropdown">Country of Origin:<span class="fontColor" >*</span></label>
+                    <select name="dropdown" id="dropdown" v-model="country" required>
+                        <option disabled selected value> Select an option </option>
+						<option v-for="item in CountryList" :key="item" :value="item">{{ item }}</option>
+                    </select>
+                </div>
+                <div class="section">
+                    <label for="email"
+                        >Email:<span class="fontColor">*</span></label
+                    >
+                    <input
+                        type="email"
+						v-model="email"
+                        placeholder="Enter your email"
+                        required
+                    />
+                </div>
+                <div class="section">
+                    <p>Age Group:<span class="fontColor">*</span></p>
+                    <label>
+                        <input
+                            type="radio"
+                            value="below20"
+                            name="age"
+							v-model="age"
+                            checked
+                        />
+                        Below 20
+                    </label>
+                    <label>
+                        <input type="radio" value="20-30" v-model="age" name="age" />
+                        20-30
+                    </label>
+                    <label>
+                        <input type="radio" value="30-40" v-model="age" name="age" />
+                        30-40
+                    </label>
+                    <label>
+                        <input type="radio" value="40+" v-model="age" name="age" />
+                        40+
+                    </label>
+                </div>
+                <h2 class="section-title">Survey Questions</h2>
+                
+                <!-- <div class="section">
+                    <p>Do you like this survey?</p>
+                    <label>
+                        <input
+                            type="radio"
+                            value="yes"
+                            name="radio-question"
+                            checked
+                        />
+                        Yes
+                    </label>
+                    <label>
+                        <input type="radio" value="no" name="radio-question" />
+                        No
+                    </label>
+                    <label>
+                        <input
+                            type="radio"
+                            value="maybe"
+                            name="radio-question"
+                        />
+                        Maybe
+                    </label>
+                </div> -->
+                <div class="section">
+                    <p>
+                        1. How has AiDA been helpful to you? (You can choose
+                        more than one answer):<span class="fontColor">*</span>
+                    </p>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="red"
+							v-model="helpful"
+                        />
+                        Easy to learn and use
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="green"
+							v-model="helpful"
+                        />
+                        Easy to get trend information
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+							v-model="helpful"
+                        />
+                        Lots of creative design proposals
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+							v-model="helpful"
+                        />
+                        The AIGC functions for moodboard is helpful
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+							v-model="helpful"
+                        />
+                        The AIGC functions for design sketches is helpful
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+							v-model="helpful"
+                        />
+                        Easy to select the right color
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+							v-model="helpful"
+                        />
+                        The Chatbot function is helpful
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+							v-model="helpful"
+                        />
+                        The print position function is helpful
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+							v-model="helpful"
+                        />
+                        The drawing function is helpful
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+							v-model="helpful"
+                        />
+                        The export function is useful
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+							v-model="helpful"
+                        />
+                        Easy to edit the design
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                            class="marTop1"
+							v-model="helpful"
+                        />
+                        <span> Others:</span>
+                        <textarea
+                            name="comments"
+                            id="text-area"
+                            placeholder="Please enter..."
+							v-model="helpful"
+                        ></textarea>
+                    </label>
+                </div>
+                <div class="section">
+                    <p>
+                        What do you think AiDA should improve? (you could choose
+                        more than one answer):<span class="fontColor">*</span>
+                    </p>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                        />
+                        Proposed designs are boring, need more interesting
+                        designs
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                        />
+                        Difficult to make changes on design
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                        />
+                        Only 2D output, no 3D results
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                        />
+                        Difficult to apply keywords for AIGC generation
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                        />
+                        Clothing is not in the right proportion
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                        />
+                        Not compatible with pattern making solutions
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                        />
+                        Improved user interface for better navigation
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                        />
+                        Lack of responsive customer support
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                        />
+                        Insufficient tutorial or guidance for new users
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                        />
+                        Limited personalization options for designs
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                            class="marTop1"
+                        />
+                        <span> Others:</span>
+                        <!-- <input
+							class="others-input"
+							type="text"
+						/> -->
+                        <textarea
+                            name="comments"
+                            id="text-area"
+                            placeholder="Please enter..."
+                        ></textarea>
+                    </label>
+                </div>
+                <div class="section">
+                    <p>3. Will you subscribe to AiDA 3.0?<span class="fontColor">*</span></p>
+                    <label>
+                        <input
+                            type="radio"
+                            value="yes"
+                            name="radio-question"
+                            checked
+                        />
+                        Yes
+                    </label>
+                    <label>
+                        <input type="radio" value="no" name="radio-question" />
+                        No
+                    </label>
+                </div>
+                <div class="section">
+                    <p>If NO, please share why:</p>
+                    <label>
+                        <input
+                            type="radio"
+                            value="yes"
+                            name="radio-question"
+                            checked
+                        />
+                        Not useful
+                    </label>
+                    <label>
+                        <input type="radio" value="no" name="radio-question" />
+                        Too expensive
+                    </label>
+                    <label>
+                        <input
+                            type="checkbox"
+                            name="checkbox-question"
+                            value="blue"
+                            class="marTop1"
+                        />
+                        <span> Others:</span>
+                        <textarea
+                            name="comments"
+                            id="text-area"
+                            placeholder="Please enter..."
+                        ></textarea>
+                    </label>
+                </div>
+                <div class="section">
+                    <p>
+                        3. Are you currently using any design tools? Please
+                        list:
+                    </p>
+                    <textarea
+                        name="comments"
+                        id="text-area"
+                        placeholder="Please enter..."
+                    ></textarea>
+                </div>
+                <div class="section">
+                    <button id="submit" @click="setSubmit">Submit</button>
+                </div>
+            </form>
+        </main>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive } from "vue";
+export default defineComponent({
+    setup() {
+        const feedbackData = reactive({
+			userName:'',
+			gender:'',
+			occupation:'',
+			country:'',
+			email:'',
+			age:'',
+			helpful:'',
+			improve:'',
+			isSubscribe:'',
+			designTools:'',
+		});
+		let CountryList = [
+			"Albania",
+			"Algeria",
+			"Andorra",
+			"Angola",
+			"Antigua and Barbuda",
+			"Argentina",
+			"Armenia",
+			"Australia",
+			"Austria",
+			"Azerbaijan",
+			"Bahamas",
+			"Bangladesh",
+			"Barbados",
+			"Belgium",
+			"Belize",
+			"Benin",
+			"Bhutan",
+			"Bolivia",
+			"Bosnia and Herzegovina",
+			"Botswana",
+			"Brazil",
+			"Brunei",
+			"Bulgaria",
+			"Burkina Faso",
+			"Cabo Verde",
+			"Canada",
+			"China",
+			"Chile",
+			"Colombia",
+			"Comoros",
+			"Congo",
+			"Costa Rica",
+			"Côte d'Ivoire",
+			"Croatia",
+			"Cyprus",
+			"Czech Republic",
+			"Denmark",
+			"Djibouti",
+			"Dominica",
+			"Dominican Republic",
+			"Ecuador",
+			"El Salvador",
+			"Estonia",
+			"Fiji",
+			"Finland",
+			"France",
+			"Gabon",
+			"Gambia",
+			"Georgia",
+			"Germany",
+			"Ghana",
+			"Greece",
+			"Grenada",
+			"Guatemala",
+			"Guinea",
+			"Guinea-Bissau",
+			"Guyana",
+			"Haiti",
+			"Holy See",
+			"Honduras",
+			"Hong Kong, China",
+			"Hungary",
+			"Iceland",
+			"India",
+			"Indonesia",
+			"Iraq",
+			"Ireland",
+			"Israel",
+			"Italy",
+			"Jamaica",
+			"Japan",
+			"Jordan",
+			"Kazakhstan",
+			"Kenya",
+			"Kiribati",
+			"Kuwait",
+			"Kyrgyzstan",
+			"Latvia",
+			"Lebanon",
+			"Lesotho",
+			"Liberia",
+			"Liechtenstein",
+			"Lithuania",
+			"Luxembourg",
+			"Madagascar",
+			"Malawi",
+			"Malaysia",
+			"Maldives",
+			"Mali",
+			"Malta",
+			"Marshall Islands",
+			"Mauritania",
+			"Mauritius",
+			"Mexico",
+			"Micronesia",
+			"Moldova",
+			"Monaco",
+			"Mongolia",
+			"Montenegro",
+			"Morocco",
+			"Mozambique",
+			"Myanmar",
+			"Namibia",
+			"Nauru",
+			"Nepal",
+			"Netherlands",
+			"New Zealand",
+			"Nicaragua",
+			"Niger",
+			"Nigeria",
+			"North Macedonia",
+			"Norway",
+			"Oman",
+			"Pakistan",
+			"Palau",
+			"Palestine",
+			"Panama",
+			"Papua New Guinea",
+			"Paraguay",
+			"Peru",
+			"Philippines",
+			"Poland",
+			"Portugal",
+			"Qatar",
+			"Romania",
+			"Rwanda",
+			"Saint Kitts and Nevis",
+			"Saint Lucia",
+			"Saint Vincent and the Grenadines",
+			"Samoa",
+			"San Marino",
+			"Sao Tome and Principe",
+			"Senegal",
+			"Serbia",
+			"Seychelles",
+			"Sierra Leone",
+			"Singapore",
+			"Slovakia",
+			"Slovenia",
+			"Solomon Islands",
+			"South Africa",
+			"South Korea",
+			"Spain",
+			"Sri Lanka",
+			"Suriname",
+			"Sweden",
+			"Switzerland",
+			"Taiwan, China",
+			"Tanzania",
+			"Thailand",
+			"Timor-Leste",
+			"Togo",
+			"Tonga",
+			"Trinidad and Tobago",
+			"Tunisia",
+			"Turkey",
+			"Tuvalu",
+			"Uganda",
+			"Ukraine",
+			"United Arab Emirates",
+			"United Kingdom",
+			"United States of America",
+			"Uruguay",
+			"Vanuatu",
+			"Zambia"
+		]
+        let setSubmit = () => {
+            console.log(feedbackData);
+        };
+        return {
+            ...toRefs(feedbackData),
+			CountryList,
+            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");
+.feedbackSurvey {
+    font-family: "Quicksand", sans-serif;
+    text-align: center;
+    line-height: 1.5;
+    // background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);
+    margin: 1rem;
+	height: 100%;
+	overflow-y: auto;
+	#main{
+		background: linear-gradient(45deg, #eee4f3, #f3f4e6);
+
+	}
+    #title {
+        font-size: 6rem;
+        margin: 0;
+		font-weight: 900;
+    }
+
+    #description {
+        font-size: 2.8rem;
+        font-style: italic;
+    }
+
+    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;
+        transition: width 1s ease;
+        display: flex;
+        flex-wrap: wrap;
+		justify-content: space-between;
+    }
+
+    @media (max-width: 760px) {
+        form {
+            width: 75%;
+        }
+    }
+    h2 {
+        width: 100%;
+		font-weight: 900;
+    }
+    .section {
+        display: flex;
+        flex-direction: column;
+        margin: 1rem;
+        width: 100%;
+    }
+    .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,
+    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>
\ No newline at end of file