feat: 完成 文章列表 页面

pages.json

@@ -56,6 +56,13 @@
 				"navigationBarTitleText": "上报内容",
 				"enablePullDownRefresh": false
 			}
+		},
+		{
+			"path": "pages/article-list/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
 		}
 	],
 	"tabBar": {

pages/article-list/index.scss

+.article_boxs {
+  padding: 0 30rpx;
+}
+.article_list {
+  /* margin-bottom: 20rpx; */
+  width: 100%;
+  /* padding: 40rpx 0 0 14rpx; */
+  display: flex;
+  //justify-content: space-between;
+  align-items: center;
+  overflow-x: scroll;
+}
+/* 隐藏滚动条 */
+.article_list::-webkit-scrollbar {
+  display: none;
+}
+.article_item {
+  flex: 1;
+  margin-right: 0;
+  /* padding: 0 48rpx; */
+  display: flex;
+  text-align: center;
+  padding-top: 34rpx;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.article_item_name {
+  width: 128rpx;
+  font-size: 32rpx;
+  font-weight: 400;
+  text-align: center;
+}
+.article_active {
+  width: 128rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+  /* color: #8171fc; */
+}
+.task_line {
+  margin-top: 20rpx;
+  width: 80%;
+  height: 6rpx;
+  background: #8171fc;
+  border-radius: 4rpx;
+}
+.task_line_none {
+  margin-top: 20rpx;
+  width: 250rpx;
+  height: 6rpx;
+  background: #fff;
+  border-radius: 4rpx;
+}
+.line {
+  height: 20rpx;
+  background: #f6f6f6;
+}
+.data_none {
+  margin-top: 288rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.data_img {
+  width: 266rpx;
+  height: 164rpx;
+}
+.data_title {
+  margin-top: 38rpx;
+  font-size: 28rpx;
+  font-weight: 400;
+  text-align: center;
+  color: #333333;
+}
+
+.article_container {
+  width: 100%;
+  padding: 32rpx 0;
+  border-bottom: 2rpx solid #f1f1f1;
+  display: flex;
+  justify-content: space-between;
+}
+.article_left {
+  display: flex;
+  margin-right: 30rpx;
+  flex-direction: column;
+  position: relative;
+}
+.article_title {
+  width: 420rpx;
+  font-size: 28rpx;
+  font-weight: 400;
+  color: #333333;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.article_date {
+  margin-top: 10rpx;
+  font-size: 24rpx;
+  font-weight: 400;
+  color: #999999;
+  position: absolute;
+  bottom: 60rpx;
+}
+.article_other {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+}
+.browse {
+  display: flex;
+  align-items: center;
+  /* margin-top: 30rpx; */
+  margin-right: 50rpx;
+}
+.browse_icon {
+  width: 31rpx;
+  height: 31rpx;
+}
+.browse_icon2 {
+  width: 36rpx;
+  height: 36rpx;
+}
+.browse_number {
+  font-size: 24rpx;
+  font-weight: bold;
+  color: #666666;
+  margin-left: 12rpx;
+}
+.article_img {
+  width: 294rpx;
+  height: 192rpx;
+  border-radius: 20rpx;
+}

pages/article-list/index.vue

+<template>
+  <view>
+    <view class="article_box">
+      <view class="article_list">
+        <view class="article_item" v-for="(item, index) in articleSort" @click="changeArticle(item, index)" :key="item.name">
+          <view :class="[articleIdx === index ? 'article_active' : 'article_item_name']">{{ item.name }}</view>
+          <view :class="[articleIdx === index ? 'task_line' : 'task_line_none']"></view>
+        </view>
+      </view>
+    </view>
+    <view class="line"></view>
+    <view v-if="!articleList.length" class="data_none">
+      <image mode="aspectFill" class="data_img" src="/static/pic_wushuju@2x.png" />
+      <view class="data_title">暂无数据</view>
+    </view>
+    <view class="article_boxs">
+      <view v-for="(item, index) in articleList" :key="item.index" style="width: 100%">
+        <navigator hover-class="none" url="/package-one/article-detail/article-detail?id=item.id" />
+        <view class="article_container" style="width: 100%">
+          <view class="article_left">
+            <view class="article_title">{{ item.title }}</view>
+            <view class="article_date">{{ item.created }}</view>
+            <view class="article_other">
+              <view class="browse">
+                <image class="browse_icon" mode="aspectFill" src="/static/icon/ic_wz_kanguo@2x.png" />
+                <view class="browse_number">{{ item.views_num }}</view>
+              </view>
+              <view class="browse" catchtap="fabulous">
+                <image v-if="!item.like_status" class="browse_icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan1@2x.png" />
+                <image v-else class="browse_icon2" mode="aspectFill" src="/static/icon/ic_wz_dianzan2@2x.png" />
+                <view class="browse_number">{{ item.likes_num }}</view>
+              </view>
+              <view class="browse" catchtap="follow">
+                <image v-if="!item.follow_status" class="browse_icon" mode="aspectFill" src="/static/icon/ic_wz_guanzhu1@2x.png" />
+                <image v-else class="browse_icon2" mode="aspectFill" src="/static/icon/ic_wz_guanzhu2@2x.png" />
+              </view>
+            </view>
+          </view>
+          <image class="article_img" mode="aspectFill" :src="item.img" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { articleSort, articleList } from '@/pages/article-list/mock';
+
+export default {
+  data() {
+    return {
+      articleSort,
+      articleList,
+      articleIdx: 0,
+      id: null,
+      ifShare: true,
+      is_fabulous: null, // 点赞
+      is_follow: null, // 关注
+    };
+  },
+  methods: {
+    async changeArticle(item, index) {
+      if (this.articleIdx === index) return;
+      this.articleIdx = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import 'index.scss';
+</style>