资讯&累计收益

H5/src/router/index.js

@@ -13,9 +13,15 @@ const routes = [
   {
     path: "/publish",
     name: "Publish",
-    component: () => import("@/views/publish"),
+    component: () => import("@/views/moments/publish"),
     meta: { title: "发布资讯" }
   },
+  {
+    path: "/moments",
+    name: "Moments",
+    component: () => import("@/views/moments/moments"),
+    meta: { title: "资讯", noNav: true }
+  },
   {
     path: "/cash-out",
     name: "CashOut",
@@ -49,6 +55,12 @@ const routes = [
         name: "Wallet",
         component: () => import("@/views/income/wallet"),
         meta: { title: "钱包" }
+      },
+      {
+        path: "all",
+        name: "AllIncomme",
+        component: () => import("@/views/income/allIncome"),
+        meta: { title: "累计收益" }
       }
     ]
   },
@@ -113,7 +125,7 @@ const routes = [
     meta: { title: "空投池", noNav: true }
   },
   {
-    path: "/router",
+    path: "/",
     name: "Router",
     component: () => import("@/views/router"),
     meta: { title: "路径导航", noNav: true }

H5/src/views/income/allIncome.vue

+<template>
+	<div class="all-income">
+		<div v-for="item in 10" :key="item.id" class="list-item">
+			<span style="color:#333333">2021-02</span>
+			<span>+989</span>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.all-income {
+	box-sizing: border-box;
+	padding: 10px 16px;
+}
+.list-item {
+	box-sizing: border-box;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 50px;
+	margin-bottom: 10px;
+	padding: 0 15px;
+	font-size: 16px;
+	background-color: #ffffff;
+}
+</style>
+

H5/src/views/moments/components/momentItem.vue

+<template>
+  <div class="moment-item">
+    <div class="baseInfo">
+      <img class="avatar" src="@/assets/images/avatar.png" alt="用户头像" />
+      <span class="userName">丁晓霞</span>
+      <span class="time">10分钟前</span>
+    </div>
+    <div class="detail">
+      <p class="content">
+        这是发布的一些文字内容，文字内容，文字过多显示第二行效果。
+      </p>
+			<div class="img-list">
+				<img v-for="item in 4" :key="item.name" src="@/assets/images/avatar.png" alt>
+			</div>
+			<div class="share">
+				<div class="share-item">
+					<img src="@/assets/images/转发.png" alt>
+					<span>12</span>
+				</div>
+				<div class="share-item">
+					<img src="@/assets/images/点赞.png" alt>
+					<span>12</span>
+				</div>
+			</div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.moment-item {
+  margin-bottom: 10px;
+  padding: 10px 16px;
+  font-size: 16px;
+  background-color: #ffffff;
+  p {
+    margin: 0;
+    padding: 0;
+  }
+  &:nth-child(1) {
+    margin-top: 10px;
+  }
+}
+.baseInfo {
+  position: relative;
+  display: flex;
+  align-items: center;
+  .avatar {
+    width: 31px;
+    height: 31px;
+    border-radius: 50%;
+  }
+  .userName {
+    margin: 0 15px;
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .time {
+    position: absolute;
+    right: 0;
+    font-family: PingFang-SC-Regular;
+    font-size: 12px;
+    color: #999999;
+  }
+}
+.detail {
+  padding-left: 46px;
+  .content {
+		margin-bottom: 10px;
+    font-family: PingFang-SC-Regular;
+    font-size: 14px;
+    color: #333333;
+  }
+	.img-list {
+		display: flex;
+    flex-wrap: wrap;
+		justify-content: flex-start;
+		align-items: center;
+		img {
+			width: auto;
+			height: 76px;
+			margin: 7px 7px 0 7px;
+		}
+	}
+	.share {
+		display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-wrap: nowrap;
+		.share-item {
+			font-size: 14px;
+			color: #666666;
+			&:nth-child(1) {
+				margin-right: 20px;
+			}
+		}
+		img {
+			width: 16px;
+			height: 14px;
+			margin-right: 5px
+		};
+	}
+}
+</style>

H5/src/views/moments/moments.vue

+<template>
+  <div class="moments">
+    <div class="title">
+      <p>资讯</p>
+    </div>
+    <moment-item />
+  </div>
+</template>
+
+<script>
+import MomentItem from "./components/momentItem.vue";
+
+export default {
+  name: "Moments",
+  components: { MomentItem }
+};
+</script>
+
+<style lang="scss" scoped>
+.moments {
+  box-sizing: border-box;
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}
+.title {
+  height: 46px;
+  line-height: 46px;
+  margin-bottom: 5px;
+  text-align: center;
+  font-family: PingFang-SC-Bold;
+  font-size: 20px;
+  font-weight: bold;
+  background-color: #ffffff;
+}
+</style>