From 0b09358ccf50927e62d4110a98261a1df2100467 Mon Sep 17 00:00:00 2001
From: XiaoMo <a1300399510@qq.com>
Date: Mon, 3 Apr 2023 17:00:11 +0800
Subject: [PATCH] =?UTF-8?q?a1300399510@qq.com=20=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=8E=202023/04/03=20-17:00:02?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hintbox.vue                  | 41 +++++++++
 src/components/indexList.vue                | 94 +++++++++++++++++++++
 src/views/index/allSections/AllSections.vue |  1 -
 src/views/index/collect/Collect.vue         | 85 ++-----------------
 src/views/index/recommend/Recommend.vue     | 73 +---------------
 5 files changed, 144 insertions(+), 150 deletions(-)
 create mode 100755 src/components/hintbox.vue
 create mode 100755 src/components/indexList.vue

diff --git a/src/components/hintbox.vue b/src/components/hintbox.vue
new file mode 100755
index 0000000..6e14e28
--- /dev/null
+++ b/src/components/hintbox.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="hint-box flexcenter" v-if="messageHint" v-html="messageHint"></div>
+</template>
+
+<script>
+export default {
+    name: 'Hintbox',
+
+    data() {
+        return {
+            messageHint: "",
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.hint-box {
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.7);
+    padding: 0.2667rem 0.5333rem;
+    border-radius: 0.1333rem;
+    font-size: 0.3733rem;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    z-index: 100;
+    width: fit-content;
+    max-width: 78%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/indexList.vue b/src/components/indexList.vue
new file mode 100755
index 0000000..e0423c2
--- /dev/null
+++ b/src/components/indexList.vue
@@ -0,0 +1,94 @@
+<template>
+    <div>
+        <!-- 帖子 -->
+        <div class="card-box">
+            <div class="top moreEllipsis">
+                <div class="top-label">经验</div>
+                <div class="top-title">23fall 美国llm 求定位</div>
+            </div>
+            <div class="center">
+                <div class="center-text moreEllipsis">背景：生于80年代中期，英语基础不好，备考托福3个月，刚好100分。2018年8月开始读LLM. 读书期间Point
+                    Bar6666666666666666666666</div>
+            </div>
+            <div class="bottom">
+                <div class="bottom-box">
+                    <svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
+                    <div class="bottom-name">匿名用户</div>
+                </div>
+                <div class="bottom-box">
+                    <div class="bottom-right">
+                        <svg-icon icon-class="look" class-name="icon-look"></svg-icon>
+                        <div>1552</div>
+                    </div>
+                    <div class="bottom-right">
+                        <svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
+                        <div>12</div>
+                    </div>
+                </div>
+            </div>
+            <!-- 精华 -->
+            <div class="rightTop">
+                <img class="rightTop-img" src="@/assets/img/icon/topRight .png">
+                <span>精华</span>
+            </div>
+        </div>
+        <div class="card-box">
+            <div class="top moreEllipsis">
+                <div class="top-label">经验</div>
+                <div class="top-title">23fall 美国llm 求定位</div>
+            </div>
+            <div class="center">
+                <div class="center-text-visible">
+                    回复可见
+                </div>
+            </div>
+            <div class="bottom">
+                <div class="bottom-box">
+                    <svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
+                    <div class="bottom-name">匿名用户</div>
+                </div>
+                <div class="bottom-box">
+                    <div class="bottom-right">
+                        <svg-icon icon-class="look" class-name="icon-look"></svg-icon>
+                        <div>1552</div>
+                    </div>
+                    <div class="bottom-right">
+                        <svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
+                        <div>12</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 广告 -->
+        <div class="banner-box">
+            <svg-icon icon-class="test-banner" class-name="banner"></svg-icon>
+        </div>
+        <!-- 分页 -->
+        <div class="paging-box">
+            <el-pagination layout="prev, pager, next" :total="100">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'IndexList',
+    data() {
+        return {
+
+        };
+    },
+    props: [],
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/index/allSections/AllSections.vue b/src/views/index/allSections/AllSections.vue
index 055a683..df96aea 100755
--- a/src/views/index/allSections/AllSections.vue
+++ b/src/views/index/allSections/AllSections.vue
@@ -32,7 +32,6 @@ export default {
 			list: [{}],
 			postCollectionState: false,  // 收藏的请求的状态
 
-
 		}
 	},
 	methods: {
diff --git a/src/views/index/collect/Collect.vue b/src/views/index/collect/Collect.vue
index 5c297f8..3299373 100755
--- a/src/views/index/collect/Collect.vue
+++ b/src/views/index/collect/Collect.vue
@@ -54,85 +54,7 @@
       <plate-navigation stairname="寄托学术类备" subsectionsname="SAT、AP考试、海外本科申…"></plate-navigation>
       <!-- 内容区域 -->
       <section>
-        <!-- 帖子 -->
-        <div class="card-box">
-          <!-- 标题 -->
-          <div class="top moreEllipsis">
-            <div class="top-label">经验</div>
-            <div class="top-title">23fall 美国llm 求定位</div>
-          </div>
-          <!-- 帖子内容 -->
-          <div class="center">
-            <div class="center-text moreEllipsis">
-              背景：生于80年代中期，英语基础不好，备考托福3个月，刚好100分。2018年8月开始读LLM.
-              读书期间Point Bar6666666666666666666666
-            </div>
-          </div>
-          <!-- 头像、浏览量、消息 -->
-          <div class="bottom">
-            <div class="bottom-box">
-              <svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
-              <div class="bottom-name">匿名用户</div>
-            </div>
-            <div class="bottom-box">
-              <div class="bottom-right">
-                <svg-icon icon-class="look" class-name="icon-look"></svg-icon>
-                <div>1552</div>
-              </div>
-              <div class="bottom-right">
-                <svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
-                <div>12</div>
-              </div>
-            </div>
-          </div>
-          <!-- 精华 -->
-          <div class="rightTop">
-            <img class="rightTop-img" src="@/assets/img/icon/topRight .png">
-            <span>精华</span>
-          </div>
-        </div>
-        <div class="card-box">
-          <!-- 帖子标题 -->
-          <div class="top moreEllipsis">
-            <div class="top-label">经验</div>
-            <div class="top-title">23fall 美国llm 求定位</div>
-          </div>
-          <!-- 帖子内容 -->
-          <div class="center">
-            <div class="center-text-visible">回复可见</div>
-          </div>
-          <!-- 头像、浏览量、消息 -->
-          <div class="bottom">
-            <div class="bottom-box">
-              <svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
-              <div class="bottom-name">匿名用户</div>
-            </div>
-            <div class="bottom-box">
-              <div class="bottom-right">
-                <svg-icon icon-class="look" class-name="icon-look"></svg-icon>
-                <div>1552</div>
-              </div>
-              <div class="bottom-right">
-                <svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
-                <div>12</div>
-              </div>
-            </div>
-          </div>
-          <!-- 精华 -->
-          <div class="rightTop">
-            <img class="rightTop-img" src="@/assets/img/icon/topRight .png">
-            <span>精华</span>
-          </div>
-        </div>
-        <!-- 广告 -->
-        <div class="banner-box">
-          <svg-icon icon-class="test-banner" class-name="banner"></svg-icon>
-        </div>
-        <!-- 分页 -->
-        <!-- <div class="paging-box">
-          <el-pagination layout="prev, pager, next" :total="100">
-          </el-pagination>
-        </div> -->
+        <index-list></index-list>
       </section>
     </div>
   </div>
@@ -140,6 +62,8 @@
 
 <script>
 import plateNavigation from '@/components/PlateNavigation'
+import indexList from '@/components/indexList'
+
 export default {
   name: "Collect",
   data() {
@@ -166,7 +90,8 @@ export default {
     };
   },
   components: {
-    plateNavigation
+    plateNavigation,
+    indexList
   },
   methods: {
     hotLabelClick(index) {
diff --git a/src/views/index/recommend/Recommend.vue b/src/views/index/recommend/Recommend.vue
index 7b24493..14d8a43 100755
--- a/src/views/index/recommend/Recommend.vue
+++ b/src/views/index/recommend/Recommend.vue
@@ -8,80 +8,14 @@
 		<!-- 路径 -->
 		<plate-navigation stairname="香港澳门台湾" subsectionsname="SAT、AP考试、海外本科申…"></plate-navigation>
 		<section>
-			<!-- 帖子 -->
-			<div class="card-box">
-				<div class="top moreEllipsis">
-					<div class="top-label">经验</div>
-					<div class="top-title">23fall 美国llm 求定位</div>
-				</div>
-				<div class="center">
-					<div class="center-text moreEllipsis">背景：生于80年代中期，英语基础不好，备考托福3个月，刚好100分。2018年8月开始读LLM. 读书期间Point
-						Bar6666666666666666666666</div>
-				</div>
-				<div class="bottom">
-					<div class="bottom-box">
-						<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
-						<div class="bottom-name">匿名用户</div>
-					</div>
-					<div class="bottom-box">
-						<div class="bottom-right">
-							<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
-							<div>1552</div>
-						</div>
-						<div class="bottom-right">
-							<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
-							<div>12</div>
-						</div>
-					</div>
-				</div>
-				<!-- 精华 -->
-				<div class="rightTop">
-					<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
-					<span>精华</span>
-				</div>
-			</div>
-			<div class="card-box">
-				<div class="top moreEllipsis">
-					<div class="top-label">经验</div>
-					<div class="top-title">23fall 美国llm 求定位</div>
-				</div>
-				<div class="center">
-					<div class="center-text-visible">
-						回复可见
-					</div>
-				</div>
-				<div class="bottom">
-					<div class="bottom-box">
-						<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
-						<div class="bottom-name">匿名用户</div>
-					</div>
-					<div class="bottom-box">
-						<div class="bottom-right">
-							<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
-							<div>1552</div>
-						</div>
-						<div class="bottom-right">
-							<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
-							<div>12</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- 广告 -->
-			<div class="banner-box">
-				<svg-icon icon-class="test-banner" class-name="banner"></svg-icon>
-			</div>
-			<!-- 分页 -->
-			<div class="paging-box">
-				<el-pagination layout="prev, pager, next" :total="100">
-				</el-pagination>
-			</div>
+			<index-list></index-list>
 		</section>
 	</div>
 </template>
 
 <script>
 import plateNavigation from '@/components/PlateNavigation.vue'
+import indexList from '@/components/indexList.vue'
 export default {
 	name: "Recommend",//推荐阅读
 	data() {
@@ -104,7 +38,8 @@ export default {
 		}
 	},
 	components: {
-		plateNavigation
+		plateNavigation,
+		indexList,
 	},
 	methods: {
 		hotLabelClick(index) {