练习底下加温馨提示

src/components/m-classify-tip/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div class="box">
+      <div class="line1">温馨提示:</div>
+      <div v-for="(item, index) in content" :key="index">
+        {{ index + 1 }}.{{ item }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    content: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box {
+  padding: 0 15px;
+  width:100%;
+  font-size: 14px;
+
+  .line1 {
+    color: rgba(165, 0, 0, 0.61);
+    font-size: 14px;
+    line-height: 19rpx;
+  }
+}
+</style>

src/views/classify/index.vue

@@ -2,7 +2,6 @@
 	<m-nav-bar :title="query.title" />
 	<div class="cell-box">
 		<van-cell
-			
 			class="cell"
 			:title="item.placeIssueName || item.classIssueName || item.excellIssueName || item.sequeIssueName"
 			is-link
@@ -32,6 +31,9 @@
 				<div class="icon">{{ index + 1 }}</div>
 			</template>
 		</van-cell>
+		<view class="classify-tip">
+			<m-classify-tip :content="classifyTip"></m-classify-tip>
+		</view>
 	</div>
 </template>
 
@@ -43,7 +45,8 @@ const {
 	route: { query },
 	router: { push },
 } = new RouterBus();
-const classData = ref();
+const classData = ref([]);
+const classifyTip = query.title === "地方专题" ? ref(["地方题库,如有个别地区增加【地方题库】,请选择该区域的【地方题库】+【必学题】学习,如果没有无需学习地方题库"]) : ref(["分类练习,学员可重点学习自己不懂的题目.", "建议新学员直接看软件必考题技巧,快速学习"]);
 getTopicClass(query.path as string, query).then(({ data }) => {
 	//地方专题第一个选项去掉
 	if (query.title == "地方专题") {
@@ -55,6 +58,10 @@ getTopicClass(query.path as string, query).then(({ data }) => {
 </script>
 
 <style lang="scss" scoped>
+.classify-tip {
+	width: 375px;
+	margin-top: 20px;
+}
 .cell-box {
 	display: flex;
 	padding: 5px 15px;

src/views/classifyChoose/index.vue

@@ -89,6 +89,8 @@
 				</template>
 			</van-cell>
 		</div>
+		<div style="height:20px;width: 100%;"></div>
+		<m-classify-tip :content="classifyTip"></m-classify-tip>
 	</div>
 </template>
 
@@ -103,6 +105,7 @@ const {
 const classDataLeft = ref([]);
 const classDataRight = ref([]);
 const classData = ref([]);
+const classifyTip = ref(["软件题库已同步更新至车管所最新,左边的红色必学题,每套题必须学完.", "模拟考试能连续5次以上达到96分左右,即可参加考试", "如果模拟考试达不到要求,请把右边的选学题也学习一遍"]);
 getTopicClass(query.path as string, {
 	...query,
 	excellIssueName: "必",
@@ -124,7 +127,6 @@ getTopicClass(query.path as string, {
 		// data.data.shift();
 		classDataLeft.value = [...classDataLeft.value, ...data.data];
 	});
-
 });
 
 getTopicClass(query.path as string, {
@@ -139,10 +141,13 @@ getTopicClass(query.path as string, {
 .cell-container {
 	display: flex;
 	flex-direction: row;
+	flex-wrap: wrap;
+	padding: 5px 15px;
+	justify-content: space-between;
 }
 .cell-box {
 	display: flex;
-	padding: 5px 15px;
+	
 	flex-wrap: wrap;
 	flex-direction: column;
 

src/views/classifyCol/index.vue

@@ -89,6 +89,7 @@
 				</template>
 			</van-cell>
 		</div>
+		<!-- <m-classify-tip :content="classifyTip"></m-classify-tip> -->
 	</div>
 </template>
 
@@ -103,6 +104,7 @@ const {
 const classDataLeft = ref([]);
 const classDataRight = ref([]);
 const classData = ref([]);
+const classifyTip = ref([])
 getTopicClass(query.path as string, {
 	...query,
 	excellIssueName: "必学",

src/views/classifyOrder/index.vue

@@ -52,6 +52,7 @@
 				<div class="icon">{{ index + 1 }}</div>
 			</template>
 		</van-cell>
+		<!-- <m-classify-tip></m-classify-tip> -->
 	</div>
 </template>