From 7fc97bc9db4394cac61d9d136d29e88359eff981 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Mon, 22 Nov 2021 10:08:22 +0800
Subject: [PATCH] 增加单行描述排版组件
---
layout/description/index.js | 10 +++++
layout/description/CDescription.scss | 33 ++++++++++++++++
layout/description/CDescription.vue | 45 ++++++++++++++++++++++
3 files changed, 88 insertions(+), 0 deletions(-)
diff --git a/layout/description/CDescription.scss b/layout/description/CDescription.scss
new file mode 100644
index 0000000..96caea0
--- /dev/null
+++ b/layout/description/CDescription.scss
@@ -0,0 +1,33 @@
+/**
+ * drawer
+ * @author Tevin
+ */
+
+@import "../../common/sassMixin";
+
+.c-description {
+ @include flexbox(flex, flext-start flex-start, nowrap);
+ padding: 20px 0 20px 20px;
+ &.c-description-bordered {
+ border-bottom: #e2e2e2 1PX solid;
+ }
+ .c-description-label {
+ width: 180px;
+ margin-right: 20px;
+ line-height: 1.5;
+ vertical-align: middle;
+ &.c-description-label-left {
+ text-align: left;
+ }
+ &.c-description-label-right {
+ text-align: right;
+ }
+ }
+ .c-desctiption-content {
+ flex: 1;
+ display: inline-block;
+ padding-right: 18px;
+ line-height: 1.5;
+ vertical-align: middle;
+ }
+}
\ No newline at end of file
diff --git a/layout/description/CDescription.vue b/layout/description/CDescription.vue
new file mode 100644
index 0000000..55da391
--- /dev/null
+++ b/layout/description/CDescription.vue
@@ -0,0 +1,45 @@
+/**
+ * CDescription - 描述
+ * @author Tevin
+ */
+
+<template>
+ <view
+ class="c-description"
+ :class="hasBorder?'c-description-bordered':''"
+ >
+ <view
+ class="c-description-label"
+ :class="'c-description-label-' + labelAlign"
+ >{{label}}</view>
+ <view class="c-desctiption-content">
+ <slot />
+ </view>
+ </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro';
+import {} from 'taro-ui-vue';
+import './CDescription.scss';
+
+export default {
+ name: 'CDescription',
+ components: {},
+ props: {
+ label: String,
+ labelAlign: {
+ type: String,
+ default: 'left', // left、right
+ },
+ hasBorder: {
+ type: Boolean,
+ default: true,
+ },
+ },
+ data() {
+ return {};
+ },
+ methods: {},
+};
+</script>
diff --git a/layout/description/index.js b/layout/description/index.js
new file mode 100644
index 0000000..5528182
--- /dev/null
+++ b/layout/description/index.js
@@ -0,0 +1,10 @@
+/**
+ * CDescription
+ * @author Tevin
+ */
+
+import CDescription from '@components/layout/description/CDescription.vue';
+
+export {
+ CDescription,
+}
\ No newline at end of file
--
Gitblit v1.9.1