first commit

uni_modules/tdesign-uniapp/components/demo/demo.vue

@@ -0,0 +1,97 @@
+<template>
+  <view
+    class="demo-block "
+    :class="{'demo-block_notitle': !title}"
+  >
+    <view
+      v-if="title || desc"
+      class="demo-block__header"
+    >
+      <view
+        v-if="title"
+        class="demo-block__header-title"
+      >
+        {{ title }}
+      </view>
+      <view
+        v-if="desc"
+        class="demo-block__header-desc"
+        :class="{'demo-block_subtitle': !title}"
+      >
+        {{ desc }}
+      </view>
+    <!-- <slot name="title-right" /> -->
+    </view>
+    <view
+      v-for="(operItem, index) in operList"
+      :key="index"
+      class="demo-block__oper"
+    >
+      <view
+        v-if="operItem.title"
+        class="demo-block__oper-subtitle"
+      >
+        {{ operItem.title }}
+      </view>
+      <view
+        v-for="btnItem in operItem.btns"
+        :key="btnItem.text"
+      >
+        <t-button
+          t-class="demo-block__oper-btn"
+          size="large"
+          block
+          :data-type="btnItem.type"
+          bind:tap="clickHandle"
+        >
+          {{ btnItem.text }}
+        </t-button>
+      </view>
+    </view>
+    <view
+      class="demo-block__slot"
+      :class="{'with-padding': padding}"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import TButton from '../button/button.vue';
+
+
+export default {
+  name: 'TDemo',
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    TButton,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    desc: {
+      type: String,
+      default: '',
+    },
+    operList: {
+      type: Array,
+      default: () => [],
+    },
+    padding: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+
+    };
+  },
+};
+</script>
+<style scoped src="./index.css">
+</style>

uni_modules/tdesign-uniapp/components/demo/index.css

@@ -0,0 +1,46 @@
+.demo-block {
+  margin: var(--td-spacer-4, 64rpx) 0 0;
+}
+.demo-block__header {
+  color: var(--bg-color-demo-title);
+  margin: 0 var(--td-spacer-2, 32rpx);
+}
+.demo-block__header-title {
+  font-weight: 700;
+  font-size: 36rpx;
+  line-height: 52rpx;
+}
+.demo-block__header-desc {
+  margin-top: var(--td-spacer, 16rpx);
+  font-size: var(--td-font-size-base, 28rpx);
+  white-space: pre-line;
+  color: var(--bg-color-demo-desc);
+  line-height: 22px;
+}
+.demo-block__oper {
+  margin-top: var(--td-spacer, 16rpx);
+}
+.demo-block__oper-subtitle {
+  font-size: var(--td-font-size-s, 24rpx);
+  margin-bottom: var(--td-spacer-2, 32rpx);
+  opacity: 0.4;
+}
+.demo-block__oper-btn {
+  margin: 0 0 var(--td-spacer-2, 32rpx) 0;
+  height: 96rpx;
+}
+.demo-block__slot {
+  margin-top: var(--td-spacer-2, 32rpx);
+}
+.demo-block__slot.with-padding {
+  margin-top: var(--td-spacer-2, 32rpx);
+  margin-left: var(--td-spacer-2, 32rpx);
+  margin-right: var(--td-spacer-2, 32rpx);
+  margin-bottom: 0;
+}
+.demo-block_notitle {
+  margin-top: 0px;
+}
+.demo-block_notitle .demo-block_subtitle {
+  margin-top: var(--td-spacer-3, 48rpx);
+}