调查问卷

.env.dev

@@ -6,6 +6,6 @@ NODE_ENV = 'development'
 VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 # VUE_APP_BASE_URL = 'https://api.aida.com.hk'
 # 佩佩
-# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
+VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
 # 海波
 # VUE_APP_BASE_URL = 'http://192.168.1.9:5567'

package-lock.json

@@ -15,6 +15,7 @@
         "axios": "^1.4.0",
         "core-js": "^3.8.3",
         "driver.js": "^1.3.1",
+        "echarts": "^5.5.1",
         "element-plus": "^2.4.2",
         "file-saver": "^2.0.5",
         "fingerprintjs2": "^2.1.4",
@@ -5475,6 +5476,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
+      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -12449,6 +12464,19 @@
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
+    },
+    "node_modules/zrender": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
+      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   },
   "dependencies": {
@@ -16631,6 +16659,22 @@
       "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
       "dev": true
     },
+    "echarts": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
+      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -22120,6 +22164,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
+      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -19,6 +19,7 @@
     "axios": "^1.4.0",
     "core-js": "^3.8.3",
     "driver.js": "^1.3.1",
+    "echarts": "^5.5.1",
     "element-plus": "^2.4.2",
     "file-saver": "^2.0.5",
     "fingerprintjs2": "^2.1.4",

src/assets/style/style.css

@@ -480,6 +480,22 @@ li {
   width: 0.8rem;
   height: 0.8rem;
 }
+.trial_page .ant-tooltip {
+  z-index: 1049 !important;
+}
+.trial_page .habit :deep(.ant-tooltip .ant-tooltip-inner),
+.trial_page :deep(.ant-tooltip-arrow-content) {
+  background: #000 !important;
+}
+.trial_page .habit_mod {
+  background-color: #000 !important;
+  /* top: 0 !important; */
+  /* left: 0 !important; */
+}
+.trial_page .ant-tooltip .ant-tooltip-inner,
+.trial_page .ant-tooltip-arrow-content {
+  background: #000 !important;
+}
 .trial_page .ant-cascader-checkbox-checked .ant-cascader-checkbox-inner {
   background-color: #767676;
   border-color: #d9d9d9 !important;
@@ -1163,6 +1179,19 @@ li {
   border: none;
   background: transparent;
 }
+.admin_page .admin_table_content .operate_list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+}
+.admin_page .admin_table_content .operate_list .operate_item {
+  font-size: 1.4rem;
+  font-family: Roboto;
+  font-weight: 400;
+  color: #343579;
+  cursor: pointer;
+}
 .admin_page .admin_table_content .ant-table-tbody > tr:hover > td {
   background: #ffffff3a;
 }
@@ -1174,6 +1203,7 @@ li {
   align-items: center;
   justify-content: space-between;
   padding: 0 1rem;
+  justify-content: center;
 }
 .admin_page .admin_table_content .operate_list .operate_item {
   font-size: 1.4rem;

src/assets/style/style.less

@@ -536,6 +536,22 @@ input:focus{
 	}
 	
 }
+
+.ant-tooltip{
+	z-index: 1049 !important;
+}
+.habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
+	background: #000 !important;
+}
+.habit_mod{
+	background-color: #000 !important;
+	/* top: 0 !important; */
+	/* left: 0 !important; */
+}
+.ant-tooltip .ant-tooltip-inner ,.ant-tooltip-arrow-content{
+	background: #000 !important;
+}
+
 .ant-cascader-checkbox-checked .ant-cascader-checkbox-inner{
 	background-color: #767676;
 	border-color: #d9d9d9 !important;
@@ -1296,6 +1312,20 @@ input:focus{
 			background: transparent;
 			// color: #fff;
 		}
+		.operate_list{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 1rem;
+
+			.operate_item{
+				font-size: 1.4rem;
+				font-family: Roboto;
+				font-weight: 400;
+				color: #343579;
+				cursor: pointer;
+			}
+		}
 		.ant-table-tbody > tr {
 			&:hover > td {
 				background: #ffffff3a;
@@ -1309,7 +1339,7 @@ input:focus{
 			align-items: center;
 			justify-content: space-between;
 			padding: 0 1rem;
-
+			justify-content: center;
 			.operate_item {
 				font-size: 1.4rem;
 				font-family: Roboto;

src/component/Administrator/TestClickData.vue

@@ -292,6 +292,3 @@ export default defineComponent({
     },
 });
 </script>
-<style lang="less">
-
-</style>

src/component/Administrator/administratorEcharts copy.vue

@@ -0,0 +1,173 @@
+<template>
+    <div class="adminEcharts admin_page">
+		<div class="admin_table_search">
+		</div>
+		<div class="allUser_table_content">
+			<div class="allUser_table_content_item">
+				<div>123123123</div>
+				<!-- <div class="allUser_table_content_item_canvas" id="echarts1"></div> -->
+			</div>
+			<div></div>
+			<div></div>
+		</div>
+
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, createVNode, computed, onMounted } from "vue";
+import { Https } from "@/tool/https";
+
+import * as echarts from "echarts/core";
+import {
+    TitleComponent,
+    ToolboxComponent,
+    TooltipComponent,
+    GridComponent,
+    LegendComponent,
+} from "echarts/components";
+import { LineChart } from "echarts/charts";
+import { UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+export default defineComponent({
+    components: {},
+    setup() {
+        let rangePickerValue: any = ref([]);
+        let rangeTimeValue: any = ref([]);
+        let renameData: any = ref({}); //修改名字选中的数据
+
+        onMounted(() => {
+            echarts.use([
+                TitleComponent,
+                ToolboxComponent,
+                TooltipComponent,
+                GridComponent,
+                LegendComponent,
+                LineChart,
+                CanvasRenderer,
+                UniversalTransition,
+            ]);
+
+            var chartDom = document.getElementById("echarts1");
+            console.log(chartDom);
+
+            var myChart = echarts.init(chartDom);
+            var option = {
+                title: {
+                    text: "",
+                },
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        type: "cross",
+                        label: {
+                            backgroundColor: "#6a7985",
+                        },
+                    },
+                },
+                legend: {
+                    data: [
+                        "新增用户数量",
+                        "活跃用户数量",
+                        "参加活动用户数量",
+                        "Search Engine",
+                    ],
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {},
+                    },
+                },
+                grid: {
+                    left: "3%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                    },
+                ],
+                series: [
+                    {
+                        name: "新增用户数量",
+                        type: "line",
+                        stack: "Total",
+                        areaStyle: {},
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [120, 132, 101, 134, 90, 230, 210],
+                    },
+                    {
+                        name: "活跃用户数量",
+                        type: "line",
+                        stack: "Total",
+                        areaStyle: {},
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 182, 191, 234, 290, 330, 310],
+                    },
+                    {
+                        name: "参加活动用户数量",
+                        type: "line",
+                        stack: "Total",
+                        areaStyle: {},
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [150, 232, 201, 154, 190, 330, 410],
+                    },
+                    {
+                        name: "Search Engine",
+                        type: "line",
+                        stack: "Total",
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        areaStyle: {},
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [820, 932, 901, 934, 1290, 1330, 1320],
+                    },
+                ],
+            };
+            // option && myChart.setOption(option);
+        });
+        return {};
+    },
+    data() {
+        return {};
+    },
+    mounted() {},
+    methods: {},
+});
+</script>
+<style lang="less" scoped>
+.adminEcharts {
+	.allUser_table_content{
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-content: space-between;
+		.allUser_table_content_item{
+			width: 49%;
+			height: 49%;
+			.allUser_table_content_item_canvas{
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+</style>

src/component/Administrator/allUser.vue

@@ -3,7 +3,7 @@
 		<div class="admin_table_search">
 		</div>
 
-		<div class="allUser_table_content" ref="historyTable">
+		<div class="admin_table_content" ref="historyTable">
 			<a-table
 				:columns="columns"
 				:data-source="dataList"
@@ -156,69 +156,4 @@ export default defineComponent({
         },
     },
 });
-</script>
+</script>
-<style lang="less">
-.admin_page {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    // min-width: 1440px;
-    position: relative;
-	
-	.allUser_table_content {
-		margin-top: 2.6rem;
-		width: 100%;
-		height: calc(100% - 13.7rem);
-		padding-bottom: 3rem;
-		background: #fff;
-		border-radius: 2rem;
-		overflow: hidden;
-		.ant-table {
-			background: transparent;
-		}
-
-		.ant-table-body {
-			overflow-y: auto !important;
-			-ms-overflow-style: none;
-			overflow: -moz-scrollbars-none;
-
-			&::-webkit-scrollbar {
-				width: 0 !important;
-			}
-		}
-		.ant-table-thead > tr > th {
-			background: #ffffff00;
-			border-bottom: none;
-			backdrop-filter: blur(1rem);
-		}
-
-		.ant-table-tbody > tr > td {
-			border: none;
-			background: transparent;
-			// color: #fff;
-		}
-		.ant-table-tbody > tr {
-			&:hover > td {
-				background: #ffffff3a;
-			}
-		}
-		.ant-table-pagination-right {
-			padding-right: 3.5rem;
-		}
-		.operate_list {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 0 1rem;
-
-			.operate_item {
-				font-size: 1.4rem;
-				font-family: Roboto;
-				font-weight: 400;
-				color: #343579;
-				cursor: pointer;
-			}
-		}
-	}
-}
-</style>

src/component/Administrator/questionnaire.vue

@@ -0,0 +1,197 @@
+<template>
+    <div class="admin_page">
+        <div class="admin_table_search">
+			<div class="admin_state">
+				<div class="admin_state_item">
+				</div>
+			</div>
+		</div>
+        <div class="admin_table_content" ref="questionnaireTable">
+			<a-table
+				:columns="columns"
+				:data-source="dataList"
+				:scroll="{ y: historyTableHeight}"
+				@change="changePage"
+				@resizeColumn="handleResizeColumn"
+				:pagination="{
+					showSizeChanger: true,
+					current: currentPage,
+					pageSize: pageSize,
+					total: total,
+					showQuickJumper: true,
+					bordered: false,
+				}"
+			>
+				<template
+					#bodyCell="{ column, text, record, index }"
+				>
+					<div v-if="column?.Operations">
+						<div class="operate_list" v-if="column?.Operations">
+							<div class="operate_item" @click="setDetail(record)">Details</div>
+						</div>
+					</div>
+				</template>
+			</a-table>
+        </div>
+		<a-modal 
+			class="generalModelOperate"
+            v-model:visible="isFeedbackShow" 
+            :footer="null" 
+            width="55%"
+            :maskClosable="false"
+            :centered="true"
+			:keyboard="false"
+			:closable="false"
+			:mask="false"
+        >
+			<div class="generalModelOperate_closeIcon" @click.stop="closeModal()">
+				<i class="fi fi-rr-cross-small"></i>
+			</div>
+			<feedbackSurveyVue ref="feedbackSurveyVue"></feedbackSurveyVue>
+		</a-modal>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, createVNode,toRefs, computed,reactive, onMounted, nextTick } from "vue";
+import { Https } from "@/tool/https";
+
+import type { TableColumnsType } from 'ant-design-vue';
+import feedbackSurveyVue from "@/views/feedbackSurvey.vue";
+
+export default defineComponent({
+    components: {feedbackSurveyVue},
+    setup() {
+		const columns: any = ref([
+                {
+                    title: 'User Name',
+                    align: "center",
+                    ellipsis: true,
+                    width: 50,
+                    dataIndex: "userName",
+                    key: "userName",
+                },
+				{
+                    title: 'Age',
+                    align: "center",
+                    width: 50,
+                    dataIndex: "age",
+                    key: "age",
+                },
+				{
+                    title: 'Country',
+                    align: "center",
+                    ellipsis: true,
+                    width: 50,
+                    dataIndex: "country",
+                    key: "country",
+                },
+				{
+                    title: 'Email',
+                    align: "center",
+                    ellipsis: true,
+                    width: 50,
+					
+                    dataIndex: "email",
+                    key: "email",
+                },
+                {
+                    title: 'Is Subscribe',
+                    align: "center",
+                    width: 50,
+					
+                    dataIndex: "isSubscribe",
+                    key: "isSubscribe",
+                },
+				{
+                    title: 'Occupation',
+                    align: "center",
+                    ellipsis: true,
+                    width: 50,
+					// 
+                    dataIndex: "occupation",
+                    key: "occupation",
+                },{
+					title: 'Operations',
+					key: 'operation',
+					align:'center', 
+					fixed: 'right',
+					width: 50, 
+					// slots:{customRender:'action'}
+					Operations:true,
+				},
+            ]
+        );
+        let dataList: any = ref([]);
+		let tabelData = reactive({
+			currentPage: 1,
+            pageSize: 10,
+            total: 0,
+            historyTableHeight: 0,
+			isFeedbackShow:false,
+		})
+		let getQuestionnaireList =async  ()=>{
+			return new Promise((resolve, reject) => {
+				Https.axiosGet(Https.httpUrls.getAllQuestionnaire).then((res:any)=>{
+					if(res){
+						dataList.value = res
+						console.log(dataList);
+						// console.log(allEchartsList.value);
+						
+						resolve('')
+					}
+				})
+			})
+		}
+		let questionnaireTable:any = ref()
+		let feedbackSurveyVue = ref()
+		let changePage = (e:any)=>{
+			tabelData.currentPage = e.current;
+            tabelData.pageSize = e.pageSize;
+		}
+		let setDetail = (data:any)=>{
+			tabelData.isFeedbackShow = true
+			nextTick().then(()=>{
+				feedbackSurveyVue.value.initData(data)
+			})
+		}
+		let closeModal = ()=>{
+			tabelData.isFeedbackShow = false
+		}
+        onMounted(async () => {
+			await getQuestionnaireList()
+			tabelData.historyTableHeight = questionnaireTable.value.clientHeight - 200;
+        });
+        return {
+			columns,
+			dataList,
+			...toRefs(tabelData),
+			handleResizeColumn: (w:any, col:any) => {
+				col.width = w;
+			},
+			questionnaireTable,
+			feedbackSurveyVue,
+			changePage,
+			setDetail,
+			closeModal,
+		};
+    },
+    data() {
+        return {
+		};
+    },
+    mounted() {
+		
+	},
+    methods: {},
+});
+</script>
+<style lang="less">
+.generalModelOperate{
+	// .ant-modal-body{
+	// 	height: calc(65rem*1.2);
+	// 	display: flex;
+	// 	overflow-y: auto;
+	// 	flex-direction: column;
+	// }
+}
+</style>

src/component/Administrator/trialApproval.vue

@@ -16,7 +16,7 @@
 			</div>
 		</div>
 
-		<div class="allUser_table_content" ref="historyTable">
+		<div class="admin_table_content" ref="historyTable">
 			<a-table
 				:columns="columns"
 				:data-source="collectionList"
@@ -293,6 +293,3 @@ export default defineComponent({
     },
 });
 </script>
-<style lang="less">
-
-</style>

src/component/Detail/DesignDetail.vue

@@ -1156,7 +1156,9 @@ export default defineComponent({
 .design_detail_modal_component{
     color: #000;
 	// max-width: 1440px ;
-		
+	.mark_loading{
+		position: absolute;
+	}
 	.ant-modal-content{
 		border-radius: calc(1rem*1.2);
 		// overflow: hidden; 
@@ -1713,9 +1715,6 @@ export default defineComponent({
 </style>
 <style lang="less">
 .design_detail_modal_component{
-	.mark_loading{
+	
-		position: absolute;
-	}
 }
-
 </style>

src/component/Detail/habit.vue

@@ -907,6 +907,7 @@ export default defineComponent({
             margin-top: calc(1.5rem*1.2);
 			cursor: pointer;
 			position: relative;
+			
 			.habit_workspace_show{
 				width: 100%;
 				z-index: 1;
@@ -1159,21 +1160,9 @@ export default defineComponent({
     align-items: center;
     justify-content: space-between;
 	font-size: calc(1.4rem*1.2);
-}
+	 > .anticon + span{
-</style>
+		max-width: 80%;
-<style>
+		overflow: hidden;
-.ant-tooltip{
+	}
-	z-index: 1049 !important;
-}
-.habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
-	background: #000 !important;
-}
-.habit_mod{
-	background-color: #000 !important;
-	/* top: 0 !important; */
-	/* left: 0 !important; */
-}
-.ant-tooltip .ant-tooltip-inner ,.ant-tooltip-arrow-content{
-	background: #000 !important;
 }
 </style>

src/router/index.ts

@@ -117,6 +117,11 @@ const routes: Array<RouteRecordRaw> = [
 		name: 'administrator',
 		component: _import('Administrator'),
 		children:[
+			{
+				path: "",
+				name:'adminChil',
+				redirect: "/administrator/allUser"
+			},
 			{
 				path:'allUser',
 				name:'allUser',
@@ -131,6 +136,10 @@ const routes: Array<RouteRecordRaw> = [
 				path:'trialApproval',
 				name:'trialApproval',
 				component: _import_component('Administrator/trialApproval.vue'),
+			},{
+				path:'questionnaire',
+				name:'questionnaire',
+				component: _import_component('Administrator/questionnaire.vue'),
 			},
 		]
 	},
@@ -234,7 +243,6 @@ router.beforeEach((to, from, next) => {
 		let sSystemUser = false
 		for (let index = 0; index < isSystemUserRouteList.length; index++) {
 			if(to.path.indexOf(isSystemUserRouteList[index]) > -1){
-				
 				sSystemUser = true
 				break
 			}

src/tool/https.js

@@ -233,10 +233,13 @@ export const Https = {
 		trialOrderApproval:`/api/account/trialOrderApproval`,//通过审批
 		trialOrderRefuse:`/api/account/trialOrderRefuse`,//拒绝审批
 		
+		//管理员接口
 		//查询所有试用用户
 		inquiryGetTrial:`/api/inquiry/getTrial`,//拒绝审批
 		//查询某个时间内design点击次数
 		getDesignStatistic:`/api/inquiry/getDesignStatistic`,//拒绝审批
+		getAllQuestionnaire:`/api/inquiry/getAllQuestionnaire`,//拒绝审批
+
 
 		getTasksList:`/api/tasks/getList`,//获取w为执行完的所有任务
 		getTasksHistory:`/api/tasks/getAllTask`,//获取所有任务列表

src/views/Administrator.vue

@@ -1,6 +1,12 @@
 <template>
 	<div class="administrator_page">
 		<div class="administrator_page_left">
+			<div class="administrator_title ">
+				<div class="modal_title_text" @click="setBack">
+					<i class="fi fi-sr-left"></i>
+					<div class="modal_title_intro administrator_title_text">Back</div>
+				</div>
+			</div>
 			<div class="modal_title_text">Administrator</div>
             <a-menu
                 id="dddddd"
@@ -14,7 +20,9 @@
 
                 <div v-for="(menu) in rootSubmenuKeys" :key="menu.key" >
                     <a-menu-item :key="menu.key" :name="menu.name" :route="menu.route" v-if="!menu.children">
-                        <template #icon><span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span></template>
+                        <template #icon>
+							<span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span>
+						</template>
                         <span class="menu_title">{{menu.name}}</span>
                     </a-menu-item>
                     <a-sub-menu :key="menu.key" v-else> 
@@ -47,7 +55,11 @@
                 </div>
             </div>
 			<div class="administrator_page_right_content">
-				<router-view/>
+				<router-view v-slot="{ Component }">
+					<keep-alive>
+						<component :is="Component" />
+					</keep-alive>
+				</router-view>
 			</div>
 		</div>
 	</div>	
@@ -78,13 +90,13 @@ export default defineComponent({
     setup() {
 		const router = useRouter()
         const route:any = useRoute()
-		const state = reactive({
+		const state:any = reactive({
 		rootSubmenuKeys: [{
 			name:'Trial User',
 			route:'/administrator/allUser',
 			icon:'yonghu',
 			expandIcon:'icon-xiala',
-			key:'/administrator/allUser',
+			key:'sub1',
 			isShow:true,
 			// children: [
 			//         {
@@ -108,18 +120,41 @@ export default defineComponent({
 			route:'/administrator/testClickData',
 			icon:'shenpi',
 			expandIcon:'icon-xiala',
-			key:'/administrator/testClickData',
+			key:'sub2',
 			isShow:true,
 		},{
 			name:'Trial User Approval',
 			route:'/administrator/trialApproval',
 			icon:'usetime',
-			key:'/administrator/trialApproval',
+			key:'sub3',
 			expandIcon:'icon-xiala',
 			isShow:true,
+		},{
+			name:'Events',
+			icon:'usetime',
+			key:'sub4',
+			expandIcon:'icon-xiala',
+			isShow:true,
+			children: [
+				{
+					name:'Questionnaire Survey',
+					route:'/administrator/questionnaire',
+					icon:'',
+					key:'sub4-1',
+					isShow:true,
+				},
+				// {
+				// 	code:'ROLE_MANAGER',
+				// 	name:'Access Permission',
+				// 	route:'/home/excil2',
+				// 	icon:'',
+				// 	key:'/home/excil33',
+				// 	isShow:true,
+				// },
+			],
 		}],
-		openKeys: ['sub1'],
+		openKeys: [],
-		selectedKeys: [],
+		selectedKeys: ['sub1'],
 		nowPageName:'Trial User',//当前页面名称
 		});
 		let routers:any = ref([])
@@ -134,11 +169,13 @@ export default defineComponent({
 		}
 		};
 		let handleClick = (event:any) => {
-
             // state.selectedKeys = [Number(event.key)]
             state.nowPageName = event.item.name
             router.push({path:event.item.route})
         }
+		let setBack = ()=>{
+			router.push('/home');
+		} 
 		onMounted(() => {
             let cookieInfo = getCookie('userInfo') || ''
             if(cookieInfo){
@@ -149,8 +186,22 @@ export default defineComponent({
                 // getTitle(menuList.value, route.path)
             }else{
             }
-			state.nowPageName = state.rootSubmenuKeys[0].name
+			
-			router.push(state.rootSubmenuKeys[0].route)
+			state.rootSubmenuKeys.forEach((item:any) => {
+				if(item.children){
+					item.children.forEach((item:any) => {
+						if(item.route == router.currentRoute.value.path){
+							state.selectedKeys[0] = item.key
+						}
+					});
+				}else{
+					if(item.route == router.currentRoute.value.path){
+						state.selectedKeys[0] = item.key
+					}
+				}
+			});
+			// state.nowPageName = state.rootSubmenuKeys[0].name
+			// router.push(state.rootSubmenuKeys[0].route)
             
         })
 		return {
@@ -158,6 +209,7 @@ export default defineComponent({
 			onOpenChange,
 			routers,
 			handleClick,
+			setBack,
 		};
     },
     data(prop) {
@@ -190,7 +242,31 @@ export default defineComponent({
     height: 100%;
     display: flex;
     background: rgba(243,244,248,0.4);
-	
+	.administrator_title{
+		display: flex;
+		align-items: center;
+		position: sticky;
+		top: 0;
+		z-index: 222;
+		.modal_title_text{
+			cursor: pointer;
+			display: flex;
+			margin-bottom: 0;
+			font-size: 1.8rem;
+		}
+		.administrator_title_text{
+			line-height: 1;
+		}
+		.modal_title_text:hover .administrator_title_text{
+			text-decoration: underline;
+		}
+		i{
+			font-size: 1.2rem;
+			display: flex;
+			align-items: center;
+			margin-right: 1rem;
+		}
+	}
 	.administrator_page_left{
 		padding-top: 20px;
 		.modal_title_text{
@@ -231,6 +307,7 @@ export default defineComponent({
             }
             .ant-menu-inline.ant-menu-sub{
                 background: #FFFFFF;
+				padding-left: 4rem;
             }
             
             .menu_title{

src/views/HomeMain.vue

@@ -2,12 +2,40 @@
     <div class="homeMain_max Guide_1_16_1">
         <header class="homeMain_heade">
             <div class="homeMain_right_content">
-                <div class="homeMain_user_icon"></div>
+                <div class="homeMain_user">
+					<div class="homeMain_user_icon">
+
+					</div>
+					<div class="homeMain_user_detail">
+						<div v-if="isTest" class="username">{{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
+						<div v-else class="username">{{$t('Header.hello')}}@{{ userInfo?.userName }}</div>
+						<div class="homeMain_user_detail_item homeMain_user_detail_attention">
+							<div class="attention_item attention_item_active">
+								<div>123</div>
+								<span>关注</span>
+							</div>
+							<div class="attention_item attention_item_active">
+								<div>321</div>
+								<span>粉丝</span>
+							</div>
+							<div class="attention_item">
+								<div>22</div>
+								<span>作品数</span>
+							</div>
+						</div>
+						<div class="homeMain_user_detail_item homeMain_user_detail_setUser">
+							<i class="fi fi-rr-user"></i>
+							<div>个人中心</div>
+							<i class="icon iconfont icon-xiala"></i>
+						</div>
+					</div>
+				</div>
                 <div class="homeMain_user_content">
                     <div v-if="isTest" class="username"><span>/</span> {{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
                     <div v-else class="username"><span>/</span> {{$t('Header.hello')}}@{{ userInfo?.userName }}</div>
                     <div
 						v-if="!isMurmur"
+
                         :class="[
                             'icon',
                             'iconfont',
@@ -137,6 +165,8 @@ import { useStore } from "vuex";
 import { setLang } from "@/tool/guide";
 import  showViewVideo from "@/tool/mount";
 import { useI18n } from "vue-i18n";
+import { gsap, TweenMax,TweenLite } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 export default defineComponent({
     components: {
         VerificationCodeInput,
@@ -231,6 +261,12 @@ export default defineComponent({
 		// 	console.log(String(newVal).length);
 		// }
 	},
+	directives:{
+		moveOpenDetal:{
+			mounted (el,binding) {
+			},
+		}
+	},
     mounted() {
         let isTest = getCookie('isTest')//获取是否是试用用户
         this.isTest =JSON.parse(isTest)
@@ -253,6 +289,42 @@ export default defineComponent({
 		this.store.dispatch('getLangType').then(()=>{
 			this.getLangIsShowMark = false
 		})
+
+
+		let tl1 = gsap.timeline({ paused: true });
+		let heradeRight = document.querySelector('.homeMain_max .homeMain_right_content')
+		let userDetailMax = document.querySelector('.homeMain_max .homeMain_user')
+		let userDetailIcon = document.querySelector('.homeMain_max .homeMain_user_icon')
+		let userName = document.querySelector('.homeMain_max .homeMain_user_content')
+		let userDetail = document.querySelector('.homeMain_max .homeMain_user_detail')
+		// let anmiation = TweenMax.to(userDetailMax,1, {'margin-top':'30px',opacity:1})
+		// anmiation.stop()
+		let state
+		tl1
+		.to(userDetail,.3, {opacity:1,display:'flex'})
+		.to(userDetailIcon,.3, {'left':'15rem',y:'25%',x:'-50%',scale:1.5,opacity:1},'-=.3')
+		.to(userName,.3, {opacity:0},'-=.3')
+		let overTime
+		let outTime
+		userDetailMax.addEventListener('mouseenter',(event)=>{
+			if(state && !outTime)return
+			clearTimeout(overTime)
+			clearTimeout(outTime)
+			overTime = setTimeout(() => {
+				state = true
+				this.isShowOperate = false
+				this.isLanguage = false
+				tl1.play()
+			}, 500);
+		})
+		heradeRight.addEventListener('mouseleave',(event)=>{
+			if(!state)return
+			clearTimeout(outTime)
+			outTime = setTimeout(() => {
+				state = false
+				tl1.reverse()
+			}, 500);
+		})
     },
     methods: {
 		setTask(data){
@@ -509,39 +581,109 @@ export default defineComponent({
 		width: 33%;
 		height: 100%;
 		align-items: center;
-		overflow: hidden;
         .homeMain_icon {
             font-size: 3.6rem;
             position: relative;
             top: 0.3rem;
         }
-		.homeMain_user_icon{
+		.homeMain_user{
-			height: 4rem;
+			.homeMain_user_icon{
-			width: 4rem;
+				height: 6rem;
-			background-color: #000;
+				width: 6rem;
-			border-radius: 50%;
+				position: relative;
-			transform: translateX(-40%)scale(1.3);
+				transform-origin: top;
+				overflow: hidden;
+				z-index: 2;
+				left: 0;
+				background-color: #000;
+				border-radius: 50%;
+				cursor: pointer;
+				// transition: all .3s;
+			}
+			.homeMain_user_detail{
+				position: absolute;
+				top: calc(100% + .5rem);
+				background: #fff;
+				border-radius: 4px;
+				width: 30rem;
+				height: 30rem;
+				opacity: 0;
+				display: none;
+				box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+				padding-top: 4rem;
+				text-align: center;
+				flex-direction: column;
+				align-items: center;
+				padding: 4rem 3rem;
+				
+				.homeMain_user_detail_attention{
+					width: 100%;
+					display: flex;
+					justify-content: space-between;
+					padding: 0 2rem;
+					border-bottom: 1px solid #e3e5e7;
+					.attention_item{
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						cursor: pointer;
+					}
+					.attention_item_active:hover{
+						color: #39215b;
+						span{
+							color: #39215b;
+						}
+					}
+					.attention_item:last-child{
+						cursor: auto;
+					}
+					span{
+						font-size: 1.4rem;
+						color: #949eae;
+					}
+				}
+				.homeMain_user_detail_setUser{
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+					cursor: pointer;
+					width: 100%;
+					i{
+						font-size: 2rem;
+						display: flex;
+					}
+					.fi-rr-user{
+						margin-right: 1rem;
+					}
+					.icon-xiala{
+						margin-left: auto
+					}
+				}
+				.homeMain_user_detail_item{
+					margin-top: 1rem;
+					padding-bottom: 1rem;
+				}
+			}
+			
+		}
+		.username {
+			font-size: 1.8rem;
+			color: #1a1a1a;
+			margin: 0 0.8rem;
+			font-weight: 900;
+			span{
+				margin: .7rem;
+			}
 		}
         .homeMain_user_content {
-            // margin-left: 2rem;
+			// transition: all .3s;
             display: flex;
             align-items: center;
             position: relative;
-            // top: 1.2rem;
             height: 3.7rem;
 			&.marLeft2{
 				margin-left: 2rem;
 			}
-            .username {
-                font-size: 1.8rem;
-                color: #1a1a1a;
-                margin: 0 0.8rem;
-				font-weight: 900;
-				span{
-					margin: .7rem;
-				}
-            }
-			
             .icon-xiala {
                 font-size: 1.4rem;
                 cursor: pointer;

src/views/feedbackSurvey.vue

@@ -1,15 +1,16 @@
 <template>
-    <div class="feedbackSurvey">
+    <div class="feedbackSurvey" :class="{'active': forbid}">
         <main id="main">
             <h1 id="title">AiDA 3.0 Feedback Survey</h1>
-            <p id="description">Please take the survey</p>
+            <p id="description" v-if="!forbid">Please take the survey</p>
-            <div id="survey-form">
+            <div id="survey-form" :class="{'active': !forbid}">
                 <h2 class="section-title">Personal Information</h2>
                 <div class="section w40">
                     <label for="name"
                         >Name:<span class="fontColor">*</span></label
                     >
                     <input
+						:readonly="forbid"
                         type="text"
 						v-model="userName"
                         placeholder="Enter your name"
@@ -19,7 +20,7 @@
                     <label for="gender"
                         >Gender:<span class="fontColor">*</span></label
                     >
-					<select name="dropdown" id="dropdown" v-model="gender">
+					<select :disabled="forbid" name="dropdown" id="dropdown" v-model="gender">
                         <option selected value='Female'>Female</option>
                         <option value='Male'>Male</option>
                     </select>
@@ -37,6 +38,7 @@
 					
                     <input
                         type="text"
+						:readonly="forbid"
 						v-model="occupation"
                         placeholder="Enter your occupation"
                         required
@@ -57,7 +59,7 @@
                 </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>
+                    <select :disabled="forbid" 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>
@@ -68,6 +70,7 @@
                     >
                     <input
                         type="email"
+						:readonly="forbid"
 						v-model="email"
                         placeholder="Enter your email"
                         required
@@ -77,6 +80,7 @@
                     <p>Age Group:<span class="fontColor">*</span></p>
                     <label>
                         <input
+							:disabled="forbid"
                             type="radio"
                             value="below20"
                             name="age"
@@ -86,15 +90,15 @@
                         Below 20
                     </label>
                     <label>
-                        <input checked type="radio" value="20-30" v-model="age" name="age" />
+                        <input :disabled="forbid" checked 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" />
+                        <input :disabled="forbid" type="radio" value="30-40" v-model="age" name="age" />
                         30-40
                     </label>
                     <label>
-                        <input type="radio" value="40+" v-model="age" name="age" />
+                        <input :disabled="forbid" type="radio" value="40+" v-model="age" name="age" />
                         40+
                     </label>
                 </div>
@@ -131,6 +135,7 @@
                     </p>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="1"
@@ -140,6 +145,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="2"
@@ -149,6 +155,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="3"
@@ -158,6 +165,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="4"
@@ -167,6 +175,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="5"
@@ -176,6 +185,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="6"
@@ -185,6 +195,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="7"
@@ -194,6 +205,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="8"
@@ -203,6 +215,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="9"
@@ -212,6 +225,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="10"
@@ -221,6 +235,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="11"
@@ -230,6 +245,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             class="marTop1"
@@ -237,6 +253,7 @@
                         />
                         <span> Others:</span>
                         <textarea
+							:readonly="forbid"
                             name="comments"
                             id="text-area"
                             placeholder="Please enter..."
@@ -252,6 +269,7 @@
                     </p>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="1"
@@ -262,6 +280,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="2"
@@ -271,6 +290,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="3"
@@ -280,6 +300,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="4"
@@ -289,6 +310,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="5"
@@ -298,6 +320,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="6"
@@ -307,6 +330,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="7"
@@ -316,6 +340,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="8"
@@ -325,6 +350,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="9"
@@ -334,6 +360,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             value="10"
@@ -343,6 +370,7 @@
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="checkbox-question"
                             class="marTop1"
@@ -354,6 +382,7 @@
 							type="text"
 						/> -->
                         <textarea
+							:readonly="forbid"
                             name="comments"
                             id="text-area"
 							v-model="othersImprovel"
@@ -366,6 +395,7 @@
                     <p>3. Will you subscribe to AiDA 3.0?<span class="fontColor">*</span></p>
                     <label>
                         <input
+							:disabled="forbid"
                             type="radio"
                             value="yes"
 							v-model="isSubscribe"
@@ -374,7 +404,7 @@
                         Yes
                     </label>
                     <label>
-                        <input v-model="isSubscribe" type="radio" value="no" name="radio-question" />
+                        <input :disabled="forbid" v-model="isSubscribe" type="radio" value="no" name="radio-question" />
                         No
                     </label>
                 </div>
@@ -382,6 +412,7 @@
                     <p>If NO, please share why:<span class="fontColor">*</span></p>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
 							value="Not useful"
                             name="reasonForNotSubscribe"
@@ -390,11 +421,12 @@
                         Not useful
                     </label>
                     <label>
-                        <input type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
+                        <input :disabled="forbid" type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
                         Too expensive
                     </label>
                     <label>
                         <input
+							:disabled="forbid"
                             type="checkbox"
                             name="reasonForNotSubscribe"
 							ref="isSubscribeCauseOthers"
@@ -402,6 +434,7 @@
                         />
                         <span> Others:</span>
                         <textarea
+							:readonly="forbid"
                             name="comments"
                             id="text-area"
 							v-model="othersIsSubscribeCause"
@@ -416,13 +449,14 @@
                         list:
                     </p>
                     <textarea
+						:readonly="forbid"
                         name="comments"
                         id="text-area"
 						v-model="designTools"
                         placeholder="Please enter..."
                     ></textarea>
                 </div>
-                <div class="section">
+                <div v-if="!forbid" class="section">
                     <button id="submit" @click="setSubmit">Submit</button>
                 </div>
             </div>
@@ -437,7 +471,7 @@ import { Https } from "@/tool/https";
 import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
 export default defineComponent({
     setup() {
-        const feedbackData:any = reactive({
+        let feedbackData:any = reactive({
 			userName:'',
 			gender:'Female',
 			occupation:'',
@@ -684,7 +718,42 @@ export default defineComponent({
 			).catch(res=>{
 			});
 		}
-	
+		let forbid = ref(false)
+		let initData = (data:any) => {
+			// Object.assign(feedbackData,data)
+			// console.log(JSON.parse(JSON.stringify(feedbackData)));
+			forbid.value =  true
+			for (const iterator in data) {
+				if(typeof data[iterator] == 'object'){
+					data[iterator].forEach((item:any)=>{
+						if(item*1){
+							feedbackData[iterator].push(item)
+						}else{
+							if(iterator == 'helpful'){
+								refList.helpfulOthers.checked = true
+								othersHelpful.value = item
+							}else if(iterator == 'improve'){
+								refList.improvelOthers.checked = true
+								othersImprovel.value = item
+							}
+						}
+					})
+				}else{
+					feedbackData[iterator] = data[iterator]
+				}
+			}
+			if(data.othersIsSubscribeCause){
+				refList.isSubscribeCauseOthers.checked = true
+				let arr = []
+				data.reasonForNotSubscribe.forEach((item:any,index:number) => {
+					if(index <= 1){
+						arr.push(item)
+					}
+				});
+				othersIsSubscribeCause.value = data.othersIsSubscribeCause[2]
+			}
+			// feedbackData = reactive(...data)
+		}
         return {
             ...toRefs(feedbackData),
             ...toRefs(refList),
@@ -693,6 +762,8 @@ export default defineComponent({
 			othersIsSubscribeCause,
 			CountryList,
             setSubmit,
+			forbid,
+			initData,
         };
     },
 
@@ -710,15 +781,49 @@ export default defineComponent({
 @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
 .feedbackSurvey {
     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;
@@ -730,7 +835,7 @@ export default defineComponent({
         font-size: 2.8rem;
         font-style: italic;
     }
-
+	
     #survey-form {
         position: relative;
         background: rgba(255, 255, 255, 0.2);
@@ -742,12 +847,14 @@ export default defineComponent({
         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;
+		&.active{
+			transition: width 1s ease;
+		}
     }
-
+	
     @media (max-width: 760px) {
         form {
             width: 75%;
@@ -763,6 +870,9 @@ export default defineComponent({
         margin: 1rem;
         width: 100%;
     }
+	.section:last-child{
+		margin-bottom: 4rem;
+	}
     .w40 {
         width: 40%;
     }

src/views/feedbackSurveyCN.vue

@@ -20,8 +20,8 @@
                         >性别:<span class="fontColor">*</span></label
                     >
 					<select name="dropdown" id="dropdown" v-model="gender">
-                        <option selected value='Female'>男性</option>
+                        <option selected value='Female'>男女性性</option>
-                        <option value='Male'>女性</option>
+                        <option value='Male'>男性</option>
                     </select>
                     <!-- <input
                         type="text"
@@ -705,6 +705,7 @@ export default defineComponent({
 @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
 .feedbackSurvey {
     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%);