@xtdev/xt-miniprogram-ui 1.0.16 → 1.0.18

package/README.md

@@ -65,4 +65,17 @@ import组件：
 | suffix  | node   |        | 后缀图标节点 |
 | onChange| (event) => {} |        | 输入框值改变时的回调函数          | -->
 
-# 开发 TODO
+# 开发
+## 安装
+
+```
+npm install
+```
+## 构建
+
+```
+npm run dev
+```
+## 预览
+打开小程序开发工具，导入项目。
+更改src中源文件，实时更新预览。

package/libs/xt-cell/README.md

@@ -0,0 +1,41 @@
+# cell
+
+### 介绍
+常用于数据展示
+
+### 效果图
+![效果图](https://img.tanjiu.cn/home/K4QMiYQ5AZDzGzaPbCWh4YiEs4SaQ76Y.png)
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-cell": "@xtdev/xt-miniprogram-ui/xt-cell",
+}
+```
+
+## 代码演示
+
+### 默认模式，
+```
+<xt-cell></xt-cell>
+```
+
+
+## API
+
+#### xt-cell props
+
+| 参数      | 说明 |  类型 | 默认值 |
+| ----------- | ----------- | ---------- | ---------- |
+| title      | 标题 | `string` ||
+| detailsMessage | 详细信息 | `string` ||
+| abstract | 摘要 | `string` ||
+| leftIcon | icon | `string` ||
+| leftIconSize | icond大小 | `string` |40|
+|  |  |  ||
+|  |  |  ||
+
+#### 事件
+
+无

package/libs/xt-cell/index.js

@@ -0,0 +1,42 @@
+Component({
+    options: {
+        multipleSlots: true
+    },
+    properties: {
+        title: {
+            type: String,
+            value: ""
+        },
+        detailsMessage: {
+            type: String,
+            value: ""
+        },
+        abstract: {
+            type: String,
+            value: ""
+        },
+        leftIcon: {
+            type: String,
+            value: ""
+        },
+        leftIconSize:{
+            type: String,
+            value: "40"
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+    },
+    attached: function () {
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+});

package/libs/xt-cell/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "multipleSlots": true,
+    "usingComponents": {
+        "xt-icon": "../xt-icon"
+    }
+}

package/libs/xt-cell/index.wxml

@@ -0,0 +1,12 @@
+<!--src/xt-cell/index.wxml-->
+<view class="xt-cell">
+    <xt-icon wx:if="{{leftIcon}}" class="xt-cell-left-icon" slot="left-icon" icon="{{leftIcon}}" size="{{leftIconSize}}"></xt-icon>
+    <view class="xt-cell-main">
+        <view class="xt-cell-main-top">
+            <view class="xt-cell-title">{{title}}</view>
+            <view class="xt-cell-subhead">{{detailsMessage}}</view>
+        </view>
+        <view wx:if="{{abstract}}" class="xt-cell-main-bottom">{{abstract}}</view>
+    </view>
+    <xt-icon class="xt-cell-right-icon" slot="right-icon" icon="youjiantou" size="32"></xt-icon>
+</view>

package/libs/xt-cell/index.wxss

@@ -0,0 +1,50 @@
+/* src/xt-cell/index.wxss */
+.xt-cell {
+    background-color: #fff;
+    padding: 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: PingFang SC-Regular, PingFang SC;
+}
+
+.xt-cell-title {
+    line-height: 56rpx;
+    font-size: 40rpx;
+    font-weight: 400;
+    flex-grow: 1;
+}
+
+.xt-cell-subhead {
+    line-height: 48rpx;
+    font-size: 34rpx;
+    font-weight: 400;
+    color: #666666;
+    flex-grow: 1;
+    text-align: right;
+}
+
+.xt-cell-left-icon {
+    margin-right: 24rpx;
+}
+
+.xt-cell-right-icon {
+    margin-left: 8rpx;
+}
+
+.xt-cell-main {
+    flex-grow: 1;
+}
+
+.xt-cell-main-top {
+    display: flex;
+    align-items: center;
+}
+
+.xt-cell-main-bottom {
+    line-height: 48rpx;
+    font-size: 34rpx;
+    font-weight: 400;
+    color: #666666;
+    margin-top: 8rpx;
+}

package/libs/xt-popover/README.md

@@ -0,0 +1,71 @@
+# Popover 底部弹窗
+
+### 介绍
+底部操作弹窗
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/azzMHcemDKsstcMWTx7C5SeQM5yPwTwX.png "Popover效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-popover": "@xtdev/xt-miniprogram-ui/xt-popover",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+#### 操作样式
+
+```
+   <xt-popover show="{{isShow1}}" itemTextKey="name" operates="{{operates}}" type="{{type}}"  bind:onChooseItemClick="chooseItemClick" bind:onClose="closePopover"></xt-popover>
+```
+
+#### 文本样式
+
+```
+<xt-popover title="Popover 弹出框-文本样式" show="{{isShow2}}" type="{{type}}" textContent="{{textContent}}" bind:onClose="closePopover" bind:onConfirm="confirm"></xt-popover>
+```
+
+#### 选择样式-单选
+
+```
+<xt-popover title="Popover 弹出框-选择样式-单选" show="{{isShow3}}" type="{{type}}" itemTextKey="areaName" contrastId="areaId" bind:onConfirm="confirm" sourceData="{{sourceData}}" selectData="{{selectData}}" bind:onChooseItemClick="chooseItemClick" bind:onClose="closePopover"></xt-popover>
+```
+
+#### 选择样式-多选
+
+```
+<xt-popover title=" Popover 弹出框-选择样式-多选" show="{{isShow4}}" type="{{type}}" itemTextKey="areaName" contrastId="areaId" bind:onConfirm="confirm" sourceData="{{sourceData}}" selectData="{{selectData}}" bind:onChooseItemClick="chooseItemClick" bind:onClose="closePopover"></xt-popover>
+```
+
+## API
+
+#### xt-popover props
+
+| 参数         | 说明        |  类型      |  默认值        |
+| ----------- | ----------- | ---------- | ------------  |
+| type      | 弹窗类型，可选值为 `operate` `text` `single` `multiple` | string |  `operate`
+| zIndx      | z-index 层级 | number | `999`
+| title      | 弹窗标题                          | string |  `无`
+| show  | 是否展示弹窗                      | boolean | `false`
+| showCloseIcon      | 是否展示弹窗关闭图标 | boolean | `true`
+| textContent      | 弹窗类型为 `text` 的文本内容 | string |   `无`
+| itemTextKey      | 弹窗类型为 `operate`  `single` `multiple`    的文本内容的 key | string |    `无`
+| operates     | 弹窗类型为 `operate` 时的操作数组 | array |   `无`
+| sourceData      | 总的数据 | array |    `[]`
+| selectData      | 选中的数据 | array |  `[]`
+| contrastId      | 用于是否选中数据对比的依据 | string |   `无`
+
+
+
+####Events
+
+| 事件名            | 说明          |  回调参数               |
+| ---------------- | ------------- | ---------------------- |
+| bind:onChooseItemClick      |  弹窗类型为 `operate`  `single` `multiple` 点击没有项触发的事件 | event.detail.chooseItem 为选择的数据
+| bind:onClose      | 点击关闭icon触发的事件 
+bind:onConfirm | 弹窗类型为 `text`  `multiple` 时点击确定触发的事件 | event.detail.chooseData

package/libs/xt-popover/index.js

@@ -0,0 +1,209 @@
+Component({
+  behaviors: [],
+  observers: {},
+  properties: {
+    zIndx: {
+      type: Number,
+      value: 999,
+      observer: function () {},
+    },
+    // 弹窗标题
+    title: {
+      type: String,
+      value: "",
+      observer: function () {},
+    },
+    // 弹窗类型
+    type: {
+      type: String,
+      value: "operate",
+      observer: function () {},
+    },
+    show: {
+      type: Boolean,
+      value: false,
+      observer: async function (val) {
+        if (val) {
+          const res = await this.findIntersection();
+          this.setData({
+            sourceData: res,
+          });
+        }
+      },
+    },
+    showCloseIcon: {
+      type: Boolean,
+      value: true,
+      observer: function (val) {},
+    },
+
+    // 文本内容
+    textContent: {
+      type: String,
+      value: "",
+      observer: function () {},
+    },
+    // 列表每一项标题内容
+    itemTextKey: {
+      type: String,
+      value: "",
+      observer: function () {},
+    },
+    // 操作
+    operates: {
+      type: Array,
+      value: [],
+      observer: function () {},
+    },
+    // 源数据
+    sourceData: {
+      type: Array,
+      value: [],
+      observer: function (val) {},
+    },
+    // 选中数据
+    selectData: {
+      type: Array,
+      value: [],
+      observer: async function () {},
+    },
+    // 数据对比字段，用于找出选中的数据
+    contrastId: {
+      type: String,
+      value: "",
+      observer: function () {},
+    },
+  },
+  data: {
+    sourceData: [],
+    multipleChooseData: [],
+  },
+  methods: {
+    closePopover() {
+      this.triggerEvent("onClose");
+      this.resetSourceData();
+    },
+
+    async findIntersection() {
+      const { sourceData, selectData, contrastId, type } = this.data;
+
+      for (const selectItem of selectData) {
+        for (const sourceItem of sourceData) {
+          if (type === "multiple") {
+            if (selectItem[contrastId] == sourceItem[contrastId]) {
+              sourceItem.selected = true;
+            }
+          } else {
+            if (selectItem[contrastId] == sourceItem[contrastId]) {
+              sourceItem.selected = true;
+            } else {
+              sourceItem.selected = false;
+            }
+          }
+        }
+      }
+      return this.deepClone(sourceData);
+    },
+    // 重置数据
+    async resetSourceData() {
+      const { sourceData } = this.data;
+      for (const sourceItem of sourceData) {
+        delete sourceItem.selected;
+      }
+
+      this.setData({
+        sourceData: this.deepClone(sourceData),
+      });
+    },
+
+    async formatSourceData(chooseItem) {
+      const { sourceData, contrastId } = this.data;
+      for (const sourceItem of sourceData) {
+        if (
+          chooseItem[contrastId] == sourceItem[contrastId] &&
+          sourceItem.selected
+        ) {
+          sourceItem.selected = false;
+        } else if (
+          chooseItem[contrastId] == sourceItem[contrastId] &&
+          !sourceItem.selected
+        ) {
+          sourceItem.selected = true;
+        }
+      }
+      return sourceData;
+    },
+
+    confirm() {
+      const { sourceData } = this.data;
+      const chooseData = sourceData.filter((item) => item.selected);
+
+      const deleteSelected = chooseData.map((item) => {
+        delete item.selected;
+        return item;
+      });
+      this.triggerEvent("onConfirm", { chooseData: deleteSelected });
+    },
+
+    async chooseItemClick(event) {
+      const chooseItem = event.currentTarget.dataset.item;
+      const { type } = this.data;
+
+      if (type == "single") {
+        delete chooseItem.selected;
+        this.triggerEvent("onChooseItemClick", { chooseItem });
+      } else if (type == "multiple") {
+        const res = await this.formatSourceData(chooseItem);
+
+        this.setData({
+          sourceData: this.deepClone(res),
+        });
+      } else {
+        this.triggerEvent("onChooseItemClick", { chooseItem });
+      }
+    },
+
+    deepClone(target, map = new Map()) {
+      if (typeof target === "object") {
+        const isArray = Array.isArray(target);
+        let cloneTarget = isArray ? [] : {};
+
+        if (map.get(target)) {
+          return map.get(target);
+        }
+        map.set(target, cloneTarget);
+
+        const keys = isArray ? undefined : Object.keys(target);
+        this.forEach(keys || target, (value, key) => {
+          if (keys) {
+            key = value;
+          }
+          cloneTarget[key] = this.deepClone(target[key], map);
+        });
+
+        return cloneTarget;
+      } else {
+        return target;
+      }
+    },
+    forEach(array, iteratee) {
+      let index = -1;
+      const length = array.length;
+      while (++index < length) {
+        iteratee(array[index], index);
+      }
+      return array;
+    },
+  },
+  pageLifetimes: {
+    // 组件所在页面的生命周期函数
+    show: function () {},
+    hide: function () {},
+    resize: function () {},
+  },
+  created: function () {},
+  attached: function () {},
+  ready: function () {},
+  moved: function () {},
+  detached: function () {},
+});

package/libs/xt-popover/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "xt-icon": "../xt-icon"
+  }
+}

package/libs/xt-popover/index.wxml

@@ -0,0 +1,42 @@
+<view wx:if="{{show}}" class="xt-popover-popup" style="z-index:{{zIndx}}">
+    <view class="xt-popover">
+        <view wx:if="{{ type == 'operate'}}" class="operate-wrapper">
+            <view class="operate-content font40rpx">
+                <block wx:for="{{operates}}" wx:for-item="operate" wx:for-index="idx" wx:key="idx">
+                    <view bindtap="chooseItemClick" data-item="{{operate}}" class="flex-center operate">
+                        {{operate[itemTextKey]}}
+                    </view>
+                </block>
+            </view>
+            <view bindtap="closePopover" class="font40rpx flex-center cancel">取消</view>
+        </view>
+        <view wx:else class="content-wrapper">
+            <view class="header">
+                <view class="header-title">{{title}}</view>
+                <image wx:if="{{showCloseIcon}}" bindtap="closePopover" class="close-icon" src="https://img.tanjiu.cn/home/zGMfEx8iJBb6JewsFrYXNWs8R8KRwjzD.png" mode="widthFix"></image>
+            </view>
+            <scroll-view scroll-y="true" class="content font40rpx {{ type == 'single' ? 'spec-content':''}}">
+                <view class="content-info">
+                    <block wx:if="{{type == 'text'}}">{{textContent}}</block>
+                    <view wx:else class="list">
+                        <block wx:for="{{sourceData}}" wx:for-item="listItem" wx:for-index="idx" wx:key="idx">
+                            <view class="list-item" bindtap="chooseItemClick" data-item="{{listItem}}">
+                                <view class="list-item-label">{{listItem[itemTextKey]}}</view>
+                                <block wx:if="{{type == 'multiple'}}">
+                                    <xt-icon wx:if="{{listItem.selected}}" icon="tongguo" size="44" style="color:#30BF67"></xt-icon>
+                                    <xt-icon wx:else icon="weixuanzhong1" size="44" style="color:#999999"></xt-icon>
+                                </block>
+                                <block wx:if="{{type == 'single'}}">
+                                    <xt-icon wx:if="{{listItem.selected}}" icon="zhengque" size="44" style="color:#30BF67"></xt-icon>
+                                </block>
+                            </view>
+                        </block>
+                    </view>
+                </view>
+            </scroll-view>
+            <view wx:if="{{type == 'text' || type == 'multiple'}}" class="btn-wrapper">
+                <view bindtap="confirm" class="confirm flex-center">确定</view>
+            </view>
+        </view>
+    </view>
+</view>

package/libs/xt-popover/index.wxss

@@ -0,0 +1,135 @@
+.xt-popover-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+
+  transition-property: opacity;
+  transition-timing-function: ease;
+}
+.xt-popover-popup .xt-popover {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: #ffffff;
+  border-radius: 20rpx 20rpx 0 0;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 0rpx);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 0rpx);
+
+  transition: all 0.5s ease-in;
+}
+
+.xt-popover .operate-wrapper {
+  overflow: hidden;
+  background: #ededed;
+}
+
+.xt-popover .operate-content {
+  background-color: #ffffff;
+  margin-bottom: 16rpx;
+  box-sizing: border-box;
+}
+
+.xt-popover .operate {
+  box-sizing: border-box;
+  width: 100%;
+  height: 120rpx;
+  box-shadow: inset 0px -2rpx 0rpx 0rpx #ededed;
+}
+
+.xt-popover .cancel {
+  width: 100%;
+  min-height: 120rpx;
+  background-color: #ffffff;
+}
+
+.xt-popover .flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.xt-popover .font40rpx {
+  font-size: 40rpx;
+  font-weight: 400;
+  color: #000000;
+}
+
+.content-wrapper {
+  box-sizing: border-box;
+  background-color: #ffffff;
+}
+
+.xt-popover-popup .header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 32rpx;
+
+  width: 100%;
+  height: 120rpx;
+  background: #ffffff;
+  box-shadow: inset 0px -2rpx 0rpx 0rpx #f5f5f5;
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #222222;
+}
+
+.xt-popover-popup .content {
+  box-sizing: border-box;
+  height: 924rpx;
+}
+
+.xt-popover-popup .spec-content {
+  height: 1084rpx;
+}
+
+.xt-popover-popup .content-info {
+  box-sizing: border-box;
+  padding: 32rpx;
+  text-align: justify;
+}
+
+.xt-popover-popup .close-icon {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.xt-popover-popup .btn-wrapper {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 32rpx;
+  height: 160rpx;
+  background: #ffffff;
+  box-shadow: inset 0px 2rpx 0rpx 0rpx #ededed;
+}
+
+.xt-popover-popup .confirm {
+  width: 100%;
+  height: 100%;
+  background: #6722ab;
+  border-radius: 120rpx;
+
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.xt-popover-popup .list-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 32rpx 0;
+}
+
+.xt-popover-popup .list-item-label {
+  flex: 1;
+  margin-right: 20rpx;
+}

package/libs/xt-tabs/README.md

@@ -0,0 +1,98 @@
+# Icon图标
+
+### 介绍
+选项卡组件，用于在不同的内容区域之间进行切换
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/NbcpQMpKZNCerYMy5ETZ3fwFBaCQjGS3.png "选项卡效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-tabs": "@xtdev/xt-miniprogram-ui/xt-tabs",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```
+<xt-tabs list="{{list}}"></xt-tabs>
+```
+```
+  data: {
+    list: [
+      {
+        title: '标签一'
+      },
+      {
+        title: '标签二'
+      },
+    ],
+  }
+```
+
+### 带副标题
+```
+<xt-tabs list="{{subTitlelist}}"></xt-tabs>
+```
+```
+  data: {
+    subTitlelist: [
+      {
+        title: '标签一',
+        subTitle: '副标题'
+      },
+      {
+        title: '标签二',
+        subTitle: '副标题'
+      },
+    ],
+  }
+```
+
+### 卡片模式
+支持两种样式风格：line和card，默认为line样式，可以通过type属性修改样式风格
+```
+<xt-tabs type="card" list="{{list}}"></xt-tabs>
+```
+```
+  data: {
+    list: [
+      {
+        title: '标签一'
+      },
+      {
+        title: '标签二'
+      },
+    ],
+  }
+```
+
+##API
+
+####xt-tabs props
+
+| 参数      | 说明 |  类型 |
+| ----------- | ----------- | ---------- |
+| type      | 样式风格，可选值`card`、`line`,默认值为`line` | `String` |
+| active   | 当前选中标签的标识符，默认值0  | `Number` |
+| list   | 数据源数组  | `ItemProps` |
+| cardBgColor   | tab背景色 | `String` |
+| borderColor   | tab边框颜色 | `String` |
+
+#### ItemProps
+
+| 参数      | 说明 | 类型 |
+| ----------- | ----------- | ----------- |
+| title      | 卡片标题 | `String` |
+| subTitle   | 卡片副标题  | `String` |
+| titleColor   | 标题颜色  | `String` |
+
+#### Tabs Event
+
+| 事件名      | 说明 | 参数 |
+| ----------- | ----------- | ----------- |
+| bind:change      | tab点击事件 | 当前激活项数据以及索引 |

package/libs/xt-tabs/index.js

@@ -0,0 +1,35 @@
+// path/to/custom-ul.js
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: 'line'
+    },
+    active: {
+      type: Number,
+      value: 0
+    },
+    list: {
+      type: Array,
+    },
+    cardBgColor: {
+      type: String,
+    },
+    borderColor: {
+      type: String,
+    },
+  },
+  methods: {
+    tabClick(e) {
+      const _index = e.currentTarget.dataset.index;
+      const _item = e.currentTarget.dataset.item;
+      this.setData({
+        active: _index
+      })
+      this.triggerEvent('change', {
+        ..._item,
+        index: _index
+      });
+    }
+  },
+})

package/libs/xt-tabs/index.json

@@ -0,0 +1,5 @@
+{
+    "component": true,
+    "usingComponents": {
+    }
+}

package/libs/xt-tabs/index.wxml

@@ -0,0 +1,10 @@
+<view style="background-color: {{cardBgColor}};border-color:{{type === 'card' ? borderColor : ''}}" class="{{type === 'card' ? 'xt-tabs xt-tabs-card' : 'xt-tabs'}}">
+    <view bind:tap="tabClick" data-index="{{index}}" data-item="{{item}}" wx:for="{{list}}" wx:if="{{type === 'line'}}" class="{{active === index ? 'xt-tab active' : 'xt-tab'}}">
+        <view class="title">{{item.title}}</view>
+        <view wx:if="{{item.subTitle}}" class="sub-title">{{item.subTitle}}</view>
+        <view wx:if="{{active === index}}" class="{{item.subTitle ? 'bottom-line sub-bottom-line' : 'bottom-line'}}"></view>
+    </view>
+    <view bind:tap="tabClick" data-index="{{index}}" wx:for="{{list}}" data-item="{{item}}" wx:if="{{type === 'card'}}" class="{{active === index ? 'xt-tab xt-tab-card active' : 'xt-tab xt-tab-card'}}">
+        <view style="color: {{active === index ? '' : item.titleColor}};" class="title">{{item.title}}</view>
+    </view>
+</view>

package/libs/xt-tabs/index.wxss

@@ -0,0 +1,76 @@
+.xt-tabs {
+  display: flex;
+}
+
+.xt-tabs.xt-tabs-card {
+  border-radius: 60rpx;
+  padding: 6rpx;
+  background-color: #f5f5f5;
+  border: 2rpx solid #DDDDDD;
+}
+
+.xt-tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 40rpx;
+  flex-grow: 1;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+  /* width: 100%; */
+}
+
+.title {
+  height: 56rpx;
+}
+
+.sub-title {
+  height: 44rpx;
+  font-size: 32rpx;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+}
+
+.active .sub-title {
+  height: 44rpx;
+  font-size: 32rpx;
+  font-family: PingFang SC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #6722AB;
+}
+
+.xt-tab.active {
+  font-weight: 600;
+  color: #6722AB;
+}
+
+.bottom-line {
+  width: 64rpx;
+  height: 8rpx;
+  background-color: #6722AB;
+  border-radius: 4rpx;
+  margin-top: 4rpx;
+}
+
+.bottom-line.sub-bottom-line {
+  width: 56rpx;
+  height: 6rpx;
+}
+
+.xt-tab-card.xt-tab {
+  height: 72rpx;
+  justify-content: center;
+  font-size: 34rpx;
+}
+
+.xt-tab-card.active {
+  background-color: #FFFFFF;
+  border-radius: 60rpx;
+}
+
+.xt-tab-card .title {
+  line-height: 72rpx;
+  height: 72rpx;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtdev/xt-miniprogram-ui",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "",
   "miniprogram": "libs",
   "publishConfig": {