feat(index): 科目统计组件

src/components/subject-statistics/index.vue

+<template>
+  <view class="u-flex statis">
+    <view class="u-flex top">
+      <view class="u-flex avatar">
+        <view class="avatar-list" v-for="(item, index) in avatar" :key="index"
+          ><image :src="item" mode="scaleToFill"
+        /></view>
+      </view>
+      <view class="notice">
+        <u-notice-bar
+          mode="vertical"
+          type="none"
+          :list="dynamic"
+          bg-color="#fff"
+          color="#2953FF"
+        ></u-notice-bar>
+      </view>
+    </view>
+    <view class="u-flex center">
+      <view class="u-flex topics">
+        <view class="topics-lists">
+          今日做题：
+          <u-count-to
+            :start-val="0"
+            :end-val="today"
+            :font-size="32"
+            color="#191C27"
+          ></u-count-to>
+        </view>
+        <view class="topics-lists">
+          累计做题：
+          <u-count-to
+            :start-val="0"
+            :end-val="total"
+            :font-size="32"
+            color="#191C27"
+          ></u-count-to>
+        </view>
+      </view>
+      <view class="u-flex days">
+        <view class="days-lists">
+          <u-count-to
+            :start-val="0"
+            :end-val="days"
+            :font-size="60"
+            color="#191C27"
+          ></u-count-to>
+          <text class="unit">Days</text>
+        </view>
+        <view class="days-lists">累计坚持</view>
+      </view>
+    </view>
+    <view class="bottom">
+      <u-button
+        :custom-style="btnStyle"
+        type="primary"
+        shape="circle"
+        @click="answer"
+        >去练习</u-button
+      >
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'subjectStatistics',
+  props: {
+    days: {
+      type: Number,
+      default: 0,
+    },
+    today: {
+      type: Number,
+      default: 0,
+    },
+    total: {
+      type: Number,
+      default: 0,
+    },
+    dynamic: {
+      type: Array,
+      default: [],
+    },
+    avatar: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      src: 'https://uviewui.com/common/logo.png',
+      lists: [],
+    }
+  },
+  computed: {
+    btnStyle() {
+      return {
+        padding: '0 90rpx',
+      }
+    },
+  },
+  created() {},
+  methods: {
+    answer() {
+      this.$emit('answer')
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.statis {
+  flex-flow: column;
+  background: #fff;
+  padding: 10rpx;
+  border: 2rpx solid #ccc;
+  margin: 20rpx;
+  border-radius: 20rpx;
+  .top {
+    width: 100%;
+    padding: 30rpx 30rpx 0 30rpx;
+    .avatar {
+      padding-right: 30rpx;
+      .avatar-list {
+        width: 40rpx;
+        height: 40rpx;
+        image {
+          width: 50rpx;
+          height: 50rpx;
+          border: 2rpx solid #ccc;
+          background: #fff;
+          border-radius: 50%;
+          margin-right: 1px;
+        }
+      }
+    }
+    .notice {
+      flex: 1;
+      width: 100%;
+    }
+  }
+  .center {
+    width: 100%;
+    justify-content: space-around;
+    padding-top: 20rpx;
+    .days {
+      flex-flow: column;
+      flex: 1;
+      .days-lists {
+        color: #9ea5bb;
+        padding: 5rpx 0rpx;
+        .unit {
+          color: #5a6073;
+          font-size: 36rpx;
+          font-weight: bold;
+          padding-left: 10rpx;
+        }
+      }
+    }
+    .topics {
+      flex-flow: column;
+      flex: 1;
+      padding-left: 40rpx;
+      border-right: 2rpx solid #e8ebf3;
+      .topics-lists {
+        width: 100%;
+        padding: 10rpx 0rpx;
+        color: #9ea5bb;
+      }
+    }
+  }
+  .bottom {
+    padding: 30rpx 10rpx;
+  }
+}
+</style>

src/components/subject-statistics/readme.md

+## 科目统计
+
+```
+科目统计组件，用于首页统计模块。
+```
+
+## API
+
+### Props
+
+| 属性名  |  类型  | 默认值 | 可选值 |            说明             |
+| :-----: | :----: | :----: | :----: | :-------------------------: |
+|  days   | Number |   0    |   -    |        累计坚持天数         |
+|  today  | Number |   0    |   -    |          今日做题           |
+|  total  | Number |   0    |   -    |          累计做题           |
+| dynamic | Array  |   []   |   []   | 滚动动态列表 **格式见下文** |
+| avatar  | Array  |   []   |   []   |   头像列表 **格式见下文**   |
+
+### dynamic 格式
+
+```json
+const dynamic = ["寒雨连江夜入吴", "平明送客楚山孤", "洛阳亲友如相问", "一片冰心在玉壶"]
+const avatar = ["https://uviewui.com/common/logo.png", "https://uviewui.com/common/logo.png", "https://uviewui.com/common/logo.png"]
+```
+
+### Events
+
+| 事件称名 |         说明         | 返回值 |
+| :------: | :------------------: | :----: |
+| @answer  | 点击每日一练按钮触发 |   无   |
+
+## 组件用法
+
+### 基础用法
+
+```html
+<subject-statistics
+  :days="40"
+  :today="97"
+  :total="668"
+  :dynamic="list"
+  :avatar="avatarList"
+  @answer="answer"
+></subject-statistics>
+```
+
+```javascript
+import subjectStatistics from '@/components/subject-statistics/index.vue'
+export default {
+  components: {
+    subjectStatistics,
+  },
+  data() {
+    return {
+      list: [
+        '寒雨连江夜入吴',
+        '平明送客楚山孤',
+        '洛阳亲友如相问',
+        '一片冰心在玉壶',
+      ],
+      avatarList: [
+        'https://uviewui.com/common/logo.png',
+        'https://uviewui.com/common/logo.png',
+        'https://uviewui.com/common/logo.png',
+      ],
+    }
+  },
+  methods: {
+    answer() {
+      console.log('每日一练')
+    },
+  },
+}
+```