From 3b6042284d2924b07d8f8a87c00824c0a0328783 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Fri, 19 Aug 2022 16:30:26 +0800
Subject: [PATCH] 实现数值显示组件
---
layout/loading/CLoading.vue | 5 --
layout/numerical/index.js | 10 +++++
layout/numerical/cNumerical.scss | 21 ++++++++++
layout/numerical/CNumerical.vue | 58 +++++++++++++++++++++++++++++
4 files changed, 90 insertions(+), 4 deletions(-)
diff --git a/layout/loading/CLoading.vue b/layout/loading/CLoading.vue
index 53263da..a77eec2 100644
--- a/layout/loading/CLoading.vue
+++ b/layout/loading/CLoading.vue
@@ -4,10 +4,7 @@
*/
<template>
- <view
- class="c-loading"
- @tap="evt => handleGoTo()"
- >
+ <view class="c-loading">
<AtActivityIndicator
:isOpened="show"
mode="center"
diff --git a/layout/numerical/CNumerical.vue b/layout/numerical/CNumerical.vue
new file mode 100644
index 0000000..56ec833
--- /dev/null
+++ b/layout/numerical/CNumerical.vue
@@ -0,0 +1,58 @@
+/**
+ * CNumerical - 数值显示
+ * @author Tevin
+ */
+
+<template>
+ <view class="c-numerical at-row at-row--wrap">
+ <view
+ class="at-col"
+ v-for="(item,index) in values"
+ :key="index"
+ :class="'at-col-' + valueFlex[index]"
+ >
+ <view class="c-numerical-value">{{item.value}}</view>
+ <view class="c-numerical-title">{{item.title}}</view>
+ </view>
+ </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro';
+import {} from 'taro-ui-vue';
+import './cNumerical.scss';
+
+export default {
+ name: 'CNumerical',
+ components: {},
+ props: {
+ values: Array,
+ },
+ computed: {
+ valueFlex() {
+ return this.values.map((item, index) => {
+ const surplus = this.values.length % 3;
+ if (surplus === 0) {
+ return 4;
+ } else if (surplus === 1) {
+ if (index === this.values.length - 1) {
+ return 12;
+ } else {
+ return 4;
+ }
+ } else if (surplus === 2) {
+ if (index >= this.values.length - 2) {
+ return 6;
+ } else {
+ return 4;
+ }
+ }
+ });
+ },
+ },
+ data() {
+ return {};
+ },
+ methods: {},
+};
+</script>
diff --git a/layout/numerical/cNumerical.scss b/layout/numerical/cNumerical.scss
new file mode 100644
index 0000000..6323a1c
--- /dev/null
+++ b/layout/numerical/cNumerical.scss
@@ -0,0 +1,21 @@
+/**
+ * CNumerical - 数值显示
+ * @author Tevin
+ */
+
+@import "../../common/sassMixin";
+
+.c-numerical {
+ text-align: center;
+ .at-col {
+ padding: 10px 0;
+ }
+ .c-numerical-value {
+ font-size: 40px;
+ line-height: 60px;
+ }
+ .c-numerical-title {
+ font-size: 32px;
+ color: #666;
+ }
+}
\ No newline at end of file
diff --git a/layout/numerical/index.js b/layout/numerical/index.js
new file mode 100644
index 0000000..8ea68e7
--- /dev/null
+++ b/layout/numerical/index.js
@@ -0,0 +1,10 @@
+/**
+ * CNumerical
+ * @author Tevin
+ */
+
+import CNumerical from '@components/layout/numerical/CNumerical.vue';
+
+export {
+ CNumerical,
+}
\ No newline at end of file
--
Gitblit v1.9.1