样式调整，增加测评提示

src/views/psychological-scale/detail.vue

@@ -1,12 +1,15 @@
 <template>
-	<div class="page" :style="`padding-top: ${showLeftArrow ? '46px' : '0'};`">
+	<div
+		class="psychologicalScale-detail"
+		:style="`padding-top: ${showLeftArrow ? '10vw' : '0'};`"
+	>
 		<van-nav-bar
 			title="测评结果"
 			:border="true"
 			:left-arrow="true"
 			@click-left="onNavBack"
 			v-if="showLeftArrow"
-      style="position: fixed; left: 0; top: 0;width: 100vw;"
+			style="position: fixed; left: 0; top: 0; width: 100vw"
 		>
 			<template #left>
 				<van-icon name="arrow-left" size="23" style="padding: 0" />返回
@@ -14,10 +17,7 @@
 		</van-nav-bar>
 		<div class="content">
 			<div class="result-title">您的测评结果为:</div>
-			<div
-				class="result"
-				:style="{ color: levels[`${resultLevel}`].color }"
-			>
+			<div class="result" :style="{ color: levels[`${resultLevel}`].color }">
 				{{ levels[`${resultLevel}`].title }}
 			</div>
 			<div class="result-label">
@@ -100,9 +100,9 @@ export default {
 		}
 	},
 	computed: {
-    resultLevel(){
-      return parseInt(this.result.SummaryLevel) + 1
-    },
+		resultLevel() {
+			return parseInt(this.result.SummaryLevel) + 1
+		},
 		showLevels() {
 			return this.levels.filter((item) => {
 				if (!(item.show === false)) {
@@ -129,9 +129,9 @@ export default {
 				this.$store.commit('appType', params.appType)
 			}
 			// 缓存从随手精灵传过来的标识
-      if(params.fromSsjl){
-			  this.$store.commit('fromSsjl', params.fromSsjl)
-      }
+			if (params.fromSsjl) {
+				this.$store.commit('fromSsjl', params.fromSsjl)
+			}
 			// 是否显示 返回标签
 			if (params.showLeftArrow) {
 				this.showLeftArrow = true
@@ -185,16 +185,17 @@ export default {
 				this.$toast(re.msg)
 			}
 		},
-    onNavBack() {
-      let fromSsjl = this.$store.getters.fromSsjl === "true";
-      if (fromSsjl) {
-        let baseUrl = this.fromUrl;
-        window.location.href = `${baseUrl}/#/${this.$route.query.fromMenu || "device"
-          }`;
-      } else {
-        window.history.go(-1);
-      }
-    },
+		onNavBack() {
+			let fromSsjl = this.$store.getters.fromSsjl === 'true'
+			if (fromSsjl) {
+				let baseUrl = this.fromUrl
+				window.location.href = `${baseUrl}/#/${
+					this.$route.query.fromMenu || 'device'
+				}`
+			} else {
+				window.history.go(-1)
+			}
+		},
 		// 获取b端token
 		getAuth() {
 			let manufactorId = '5bf13062-a41e-4d00-ba14-1101aad12650'
@@ -261,16 +262,30 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.page {
-	width: 100%;
-	min-height: 100%;
+<style lang="scss">
+.psychologicalScale-detail {
+	width: 100vw;
+	min-height: 100vh;
 	box-sizing: border-box;
 	font-size: 3.6vw;
 	text-align: left;
 	background: #f4f4f4;
 	padding-bottom: 8vw;
 
+	.van-nav-bar__content {
+		height: 10vw !important;
+
+		.van-nav-bar__left,
+		.van-nav-bar__title {
+			font-size: 4vw !important;
+			line-height: initial !important;
+
+			.van-icon-arrow-left {
+				font-size: 4vw !important;
+			}
+		}
+	}
+
 	.content {
 		padding: 4vw;
 

src/views/psychological-scale/index.vue

@@ -1,8 +1,8 @@
 <template>
 	<div
-		class="page"
+		class="psychologicalScale-index"
 		v-if="topic.length"
-		:style="`padding-top: ${showLeftArrow ? 'calc(24vw + 46px)' : '24vw'};`"
+		:style="`padding-top: ${tip?'10vw':showLeftArrow ? '34vw' : '24vw'};`"
 	>
 		<van-nav-bar
 			title="测评"
@@ -10,102 +10,131 @@
 			:left-arrow="true"
 			@click-left="onNavBack"
 			v-if="showLeftArrow"
-			style="position: fixed; left: 0; top: 0; width: 100vw"
+			style="position: fixed; left: 0; top: 0; width: 100vw; height: 10vw"
 		>
 			<template #left>
 				<van-icon name="arrow-left" size="23" style="padding: 0" />返回
 			</template>
 		</van-nav-bar>
-		<div class="top" :style="`top: ${showLeftArrow ? '46px' : '0'};`">
-			<div class="schedule">
-				<div class="progress">
-					<van-progress
-						:percentage="
-							(select.length == 0 ? 0 : select.length / topic.length) * 100
-						"
-						stroke-width="10px"
-						color="#638ee4"
-						:show-pivot="false"
-						v-if="topic.length"
-					></van-progress>
-				</div>
-				<div class="text">
-					<span class="val">{{ select.length }}</span
-					>/<span class="total">{{ topic.length }}</span>
-				</div>
+		<div class="tip" v-if="tip">
+      <div class="tip-title title">{{ title }}</div>
+			<div class="tip-title">测评说明：</div>
+			<div class="tip-content">
+				请仔细阅读每一道题，根据根据您自己的
+				真实状态，评估最近7天内你最接近的感觉，而不只是你今天的感觉
 			</div>
-			<div class="title">{{ title }}</div>
-		</div>
-		<div class="list_box">
-			<div class="item" v-for="(item, index) in topic" :key="index">
-				<div
-					:class="[
-						'label',
-						{
-							error:
-								(isError && fromSsjl && item.Id == '6') ||
-								(isError && fromSsjl && item.Id == '8') ||
-								(isError && fromSsjl && item.Id == '11'),
-						},
-					]"
+			<div class="tip-title">注意事项：</div>
+			<div class="tip-content">
+				题目共10题，选项无对错之分，不用过度思考，根据第一反应选择则可。
+			</div>
+			<div class="tip-content">
+				该测评结果仅供参考，不能以此作相关诊断。如有疑问，请咨询专业人员。
+			</div>
+			<div class="button">
+				<van-button
+					round
+					type="info"
+					style="width: 100%; height: 100%"
+					@click="tip = false"
+					>开始测评</van-button
 				>
-					<span>{{ item.Title }}</span>
-					<span>({{ item.Type }})</span>
+			</div>
+		</div>
+		<div class="" v-else>
+			<div class="top" :style="`top: ${showLeftArrow ? '10vw' : '0'};`">
+				<div class="schedule">
+					<div class="progress">
+						<van-progress
+							:percentage="
+								(select.length == 0 ? 0 : select.length / topic.length) * 100
+							"
+							stroke-width="10px"
+							color="#638ee4"
+							:show-pivot="false"
+							v-if="topic.length"
+						></van-progress>
+					</div>
+					<div class="text">
+						<span class="val">{{ select.length }}</span
+						>/<span class="total">{{ topic.length }}</span>
+					</div>
 				</div>
-				<van-radio-group
-					class="radio"
-					v-model="item.select"
-					v-if="item.Type == '单选题'"
+				<div class="title">{{ title }}</div>
+			</div>
+			<div class="list_box">
+				<div class="item" v-for="(item, index) in topic" :key="index">
+					<div
+						:class="[
+							'label',
+							{
+								error:
+									(isError && fromSsjl && item.Id == '6') ||
+									(isError && fromSsjl && item.Id == '8') ||
+									(isError && fromSsjl && item.Id == '11'),
+							},
+						]"
+					>
+						<span>{{ item.Title }}</span>
+						<span>({{ item.Type }})</span>
+					</div>
+					<van-radio-group
+						class="radio"
+						v-model="item.select"
+						v-if="item.Type == '单选题'"
+					>
+						<van-cell-group>
+							<van-cell
+								clickable
+								v-for="(ite, idx) in item.Option"
+								:key="idx"
+								:title="ite.label"
+								@click="onRadio(index, ite.value)"
+								:title-class="[
+									{
+										cellTitle:
+											(isError && fromSsjl && item.Id == '6') ||
+											(isError && fromSsjl && item.Id == '8') ||
+											(isError && fromSsjl && item.Id == '11'),
+									},
+								]"
+							>
+								<template #right-icon>
+									<van-radio :name="ite.value" />
+								</template>
+							</van-cell>
+						</van-cell-group>
+					</van-radio-group>
+					<van-checkbox-group class="checkbox" v-model="item.select" v-else>
+						<van-cell-group>
+							<van-cell
+								v-for="(ite, idx) in item.Option"
+								clickable
+								:key="idx"
+								:title="ite.label"
+								@click="onCheckbox(`checkboxes${item.Id}`, idx)"
+							>
+								<template #right-icon>
+									<van-checkbox
+										:name="ite.value"
+										:ref="`checkboxes${item.Id}`"
+									/>
+								</template>
+							</van-cell>
+						</van-cell-group>
+					</van-checkbox-group>
+				</div>
+			</div>
+			<div class="button">
+				<van-button
+					round
+					type="info"
+					:disabled="topic.length != select.length"
+					style="width: 100%; height: 100%"
+					@click="submit"
+					>提交测评</van-button
 				>
-					<van-cell-group>
-						<van-cell
-							clickable
-							v-for="(ite, idx) in item.Option"
-							:key="idx"
-							:title="ite.label"
-							@click="onRadio(index, ite.value)"
-							:title-class="[
-								{
-									cellTitle:
-										(isError && fromSsjl && item.Id == '6') ||
-										(isError && fromSsjl && item.Id == '8') ||
-										(isError && fromSsjl && item.Id == '11'),
-								},
-							]"
-						>
-							<template #right-icon>
-								<van-radio :name="ite.value" />
-							</template>
-						</van-cell>
-					</van-cell-group>
-				</van-radio-group>
-				<van-checkbox-group class="checkbox" v-model="item.select" v-else>
-					<van-cell-group>
-						<van-cell
-							v-for="(ite, idx) in item.Option"
-							clickable
-							:key="idx"
-							:title="ite.label"
-							@click="onCheckbox(`checkboxes${item.Id}`, idx)"
-						>
-							<template #right-icon>
-								<van-checkbox :name="ite.value" :ref="`checkboxes${item.Id}`" />
-							</template>
-						</van-cell>
-					</van-cell-group>
-				</van-checkbox-group>
 			</div>
 		</div>
-		<div class="button">
-			<van-button
-				round
-				type="info"
-				:disabled="topic.length != select.length"
-				style="width: 100%; height: 100%"
-				@click="submit"
-				>提交测评</van-button
-			>
-		</div>
 	</div>
 </template>
 
@@ -120,6 +149,7 @@ export default {
 			uid: '',
 			keyCode: '',
 			title: '',
+			tip: true,
 			topic: [], //题目列表
 			select: [],
 			isError: null, //是否是答题错误
@@ -390,10 +420,10 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.page {
-	width: 100%;
-	min-height: 100%;
+<style lang="scss">
+.psychologicalScale-index {
+	width: 100vw;
+	min-height: 100vh;
 	box-sizing: border-box;
 	font-size: 3.6vw;
 	text-align: left;
@@ -401,6 +431,59 @@ export default {
 	padding-bottom: 8vw;
 	padding-top: 24vw;
 
+	.van-nav-bar__content {
+		height: 10vw !important;
+
+		.van-nav-bar__left,
+		.van-nav-bar__title {
+			font-size: 4vw !important;
+			line-height: initial !important;
+
+			.van-icon-arrow-left {
+				font-size: 4vw !important;
+			}
+		}
+	}
+
+  .tip{
+    width: 90vw;
+    margin: 0 auto;
+    margin-top: 5vw;
+    padding: 10vw 3vw;
+    border-radius: 2vw;
+    background: white;
+
+    .tip-title{
+      font-size: 4vw;
+      font-weight: bold;
+      margin-top: 5vw;
+      margin-bottom: 5vw;
+    }
+
+     .title{
+      font-size: 4.5vw;
+      text-align: center;
+      margin-top: 0;
+    }
+
+    .tip-content{
+      font-size: 3.7vw;
+      text-indent: 5vw;
+      margin-bottom: 2vw;
+
+      &:last-child{
+        margin-bottom: 0;
+      }
+    }
+    .button{
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 10vw;
+      margin: auto;
+    }
+  }
+
 	.top {
 		box-sizing: border-box;
 		position: fixed;
@@ -448,14 +531,26 @@ export default {
 
 			.label {
 				font-size: 4vw;
-				&.error {
-					color: red;
-				}
+				// &.error {
+				// 	color: red;
+				// }
 			}
 			.van-cell {
+				line-height: initial !important;
+				padding: 3vw 2vw;
+
 				.van-cell__title {
-					&.cellTitle {
-						color: red;
+					font-size: 3.5vw !important;
+
+					// &.cellTitle {
+					// 	color: red;
+					// }
+				}
+				.van-radio__icon {
+					height: 100% !important;
+
+					.van-icon {
+						font-size: 3.5vw !important;
 					}
 				}
 			}
@@ -468,6 +563,9 @@ export default {
 		margin: 0 auto;
 		margin-top: 8vw;
 
+		.van-button {
+			font-size: 4vw !important;
+		}
 		.van-button--info {
 			background-color: #638ee4;
 			border: 1px solid #638ee4;

src/views/psychological-scale/list.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="page"
-  :style="`padding-top: ${showLeftArrow ? '46px' : '0'};`">
+	<div class="psychologicalScale-list"
+  :style="`padding-top: ${showLeftArrow ? '10vw' : '0'};`">
 		<van-nav-bar
 			title="测评记录"
 			:border="true"
@@ -283,16 +283,30 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.page {
-	width: 100%;
-	min-height: 100%;
+<style lang="scss">
+.psychologicalScale-list {
+	width: 100vw;
+	min-height: 100vh;
 	box-sizing: border-box;
 	font-size: 3.6vw;
 	text-align: left;
 	background: #f4f4f4;
 	padding-bottom: 8vw;
 
+  .van-nav-bar__content {
+		height: 10vw !important;
+
+		.van-nav-bar__left,
+		.van-nav-bar__title {
+			font-size: 4vw !important;
+			line-height: initial !important;
+
+			.van-icon-arrow-left {
+				font-size: 4vw !important;
+			}
+		}
+	}
+
 	.content {
 		padding: 2vw;