第一次提交

2023-08-04 13:14:48 +08:00
commit 1b923e5cff
1030 changed files with 128016 additions and 0 deletions
--- a/components/page/diyComponents/article/index.vue
+++ b/components/page/diyComponents/article/index.vue
@@ -0,0 +1,123 @@
+<template>
+  <!-- 文章组 -->
+  <view class="diy-article">
+    <view class="article-item" :class="[`show-type__${item.show_type}`]" v-for="(item, index) in dataList" :key="index"
+      @click="onTargetDetail(item.article_id)">
+      <!-- 小图模式 -->
+      <block v-if="item.show_type == 10">
+        <view class="article-item__left flex-box">
+          <view class="article-item__title">
+            <text class="twoline-hide">{{ item.title }}</text>
+          </view>
+          <view class="article-item__footer m-top10">
+            <text class="article-views f-24 col-8">{{ item.show_views }}次浏览</text>
+          </view>
+        </view>
+        <view class="article-item__image">
+          <image class="image" mode="widthFix" :src="item.image_url"></image>
+        </view>
+      </block>
+      <!-- 大图模式 -->
+      <block v-if="item.show_type == 20">
+        <view class="article-item__title">
+          <text class="twoline-hide">{{ item.title }}</text>
+        </view>
+        <view class="article-item__image m-top20">
+          <image class="image" mode="widthFix" :src="item.image_url"></image>
+        </view>
+        <view class="article-item__footer m-top10">
+          <text class="article-views f-24 col-8">{{ item.show_views }}次浏览</text>
+        </view>
+      </block>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: "Article",
+    /**
+     * 组件的属性列表
+     * 用于组件自定义设置
+     */
+    props: {
+      itemIndex: String,
+      params: Object,
+      dataList: Array
+    },
+
+    /**
+     * 组件的方法列表
+     * 更新属性和数据的方法与更新页面数据的方法类似
+     */
+    methods: {
+
+      /**
+       * 跳转文章详情页
+       */
+      onTargetDetail(id) {
+        uni.navigateTo({
+          url: '/pages/article/detail?articleId=' + id
+        })
+      }
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .diy-article {
+    background: #f7f7f7;
+
+    .article-item {
+      margin-bottom: 20rpx;
+      padding: 30rpx;
+      background: #fff;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .article-item__title {
+        max-height: 74rpx;
+        font-size: 28rpx;
+        line-height: 38rpx;
+        color: #333;
+      }
+
+      .article-item__image .image {
+        display: block;
+      }
+
+    }
+
+
+
+  }
+
+  /* 小图模式 */
+
+  .show-type__10 {
+    display: flex;
+
+    .article-item__left {
+      padding-right: 20rpx;
+    }
+
+    .article-item__title {
+      // min-height: 72rpx;
+    }
+
+    .article-item__image .image {
+      width: 240rpx;
+    }
+
+  }
+
+  /* 大图模式 */
+
+  .show-type__20 .article-item__image .image {
+    width: 100%;
+  }
+</style>