diff --git a/pages/home/active.vue b/pages/home/active.vue
index 689fce5..a4c6474 100644
--- a/pages/home/active.vue
+++ b/pages/home/active.vue
@@ -3,21 +3,21 @@
     <v-navigation-bar title-color="#333" background-color="#fff" title="活动列表">
     </v-navigation-bar>
     <view class="body">
-        <view class="card" :title="item.name"  v-for="(item, index) in activeList" :key="index">
-          <text class="uni-body">{{ item.remark }}</text>
-          <view slot="actions" class="card-actions">
-            <picker v-if="item.type=='kkyl'" @change="bindPickerChange" :value="index" :range="array">
-              <button type="primary">参加</button>
-            </picker>
-            <view v-if="item.type=='zcyl'">
-              <button @click="joinAct(item)" v-if="item.isJoin!='1'" type="primary">参加</button>
-              <button @click="joinAct(item)" v-if="item.isJoin=='1'" disabled type="primary">参加</button>
-            </view>
-            <view v-if="item.type=='czyl'">
-              <button @click="joinCzylActPrex(item)" type="primary">参加</button>
-            </view>
+      <uni-card :title="item.name"  v-for="item in activeList">
+        <text class="uni-body">{{ item.remark }}</text>
+        <view slot="actions" class="card-actions">
+          <picker v-if="item.type=='kkyl'" @change="bindPickerChange" :value="index" :range="array">
+            <button type="primary">参加</button>
+          </picker>
+          <view v-if="item.type=='zcyl'">
+            <button @click="joinAct(item)" v-if="item.isJoin!='1'" type="primary">参加</button>
+            <button @click="joinAct(item)" v-if="item.isJoin=='1'" disabled type="primary">参加</button>
+          </view>
+          <view v-if="item.type=='czyl'">
+            <button @click="joinCzylActPrex(item)" type="primary">参加</button>
           </view>
         </view>
+      </uni-card>
 
     </view>
     <view>
@@ -126,7 +126,7 @@ export default {
         for(var i = 0; i < this.activeList.length; i++) {
           if(this.activeList[i].type=="kkyl"){
             this.kkylActId = this.activeList[i].id
-             request({
+            request({
               url: "/userClient/customer/getActive",
               method: "get",
               params:{id:this.activeList[i].id}
@@ -189,37 +189,37 @@ export default {
         console.log(res);
         //拿到开卡有礼订单 TODO  对接支付
         this.orderInfo = res.data
-		this.goPay(this.orderInfo)
-		
+        this.goPay(this.orderInfo)
+
+      })
+    },
+    async goPay(data) {
+      let that = this
+      await request({
+        url: '/userClient/pay/toPay',
+        method: 'get',
+        params: {orderId: data.id}
+      }).then((ress) => {
+        wx.requestPayment({
+          timeStamp: ress.data.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
+          nonceStr: ress.data.nonceStr, // 随机字符串，长度为32个字符以下。
+          package: ress.data.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
+          signType: ress.data.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
+          paySign: ress.data.paySign, // 签名，详见签名生成算法
+          success: function (res) {
+            console.log('成功',res);
+            if( res.errMsg = 'requestPayment:ok'){
+              uni.showToast({
+                title:'支付成功'
+              })
+              this.getUserInfos()
+            }
+            // 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
+          },
+
+        })
       })
     },
-	async goPay(data) {
-	  let that = this
-	  await request({
-	    url: '/userClient/pay/toPay',
-	    method: 'get',
-	    params: {orderId: data.id}
-	  }).then((ress) => {
-		   wx.requestPayment({
-			 timeStamp: ress.data.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
-			 nonceStr: ress.data.nonceStr, // 随机字符串，长度为32个字符以下。
-			 package: ress.data.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
-			 signType: ress.data.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
-			 paySign: ress.data.paySign, // 签名，详见签名生成算法
-			 success: function (res) { 
-			  console.log('成功',res);
-			  if( res.errMsg = 'requestPayment:ok'){
-				  uni.showToast({
-					title:'支付成功'
-				  })
-				this.getUserInfos()
-			  }
-			   // 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
-			 },
-		   
-		   })
-	  })
-	},
     /**
      * 充值有礼前置方法
      * @returns {Promise<void>}
@@ -265,26 +265,16 @@ export default {
     height: 0;
     box-sizing: border-box;
     padding: 30rpx 0;
+    margin: 0 32rpx;
 
     display: flex;
     flex-direction: column;
     row-gap: 20rpx;
 
     overflow: auto;
-	
-	.card {
-		background-color: #fff;
-		margin: 0 32rpx;
-		padding: 30rpx;
-		border-radius: 12rpx;
-		
-		display: flex;
-		flex-direction: column;
-		row-gap: 10rpx;
-		
-	}
 
   }
 }
 
 </style>
+
diff --git a/uni_modules/uni-card/changelog.md b/uni_modules/uni-card/changelog.md
new file mode 100644
index 0000000..c3cd8c4
--- /dev/null
+++ b/uni_modules/uni-card/changelog.md
@@ -0,0 +1,26 @@
+## 1.3.1（2021-12-20）
+- 修复 在vue页面下略缩图显示不正常的bug
+## 1.3.0（2021-11-19）
+- 重构插槽的用法 ，header 替换为 title 
+- 新增 actions 插槽
+- 新增 cover 封面图属性和插槽
+- 新增 padding 内容默认内边距离
+- 新增 margin 卡片默认外边距离
+- 新增 spacing 卡片默认内边距
+- 新增 shadow 卡片阴影属性
+- 取消 mode 属性，可使用组合插槽代替
+- 取消 note 属性 ，使用actions插槽代替
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-card](https://uniapp.dcloud.io/component/uniui/uni-card)
+## 1.2.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.8（2021-07-01）
+- 优化 图文卡片无图片加载时，提供占位图标
+- 新增 header 插槽，自定义卡片头部（ 图文卡片 mode="style" 时，不支持）
+- 修复 thumbnail 不存在仍然占位的 bug
+## 1.1.7（2021-05-12）
+- 新增 组件示例地址
+## 1.1.6（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-card/components/uni-card/uni-card.vue b/uni_modules/uni-card/components/uni-card/uni-card.vue
new file mode 100644
index 0000000..38cf594
--- /dev/null
+++ b/uni_modules/uni-card/components/uni-card/uni-card.vue
@@ -0,0 +1,270 @@
+<template>
+	<view class="uni-card" :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow,'uni-card--border':border}"
+		:style="{'margin':isFull?0:margin,'padding':spacing,'box-shadow':isShadow?shadow:''}">
+		<!-- 封面 -->
+		<slot name="cover">
+			<view v-if="cover" class="uni-card__cover">
+				<image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image>
+			</view>
+		</slot>
+		<slot name="title">
+			<view v-if="title || extra" class="uni-card__header">
+				<!-- 卡片标题 -->
+				<view class="uni-card__header-box" @click="onClick('title')">
+					<view v-if="thumbnail" class="uni-card__header-avatar">
+						<image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" />
+					</view>
+					<view class="uni-card__header-content">
+						<text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text>
+						<text v-if="title&&subTitle"
+							class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }}</text>
+					</view>
+				</view>
+				<view class="uni-card__header-extra" @click="onClick('extra')">
+					<text class="uni-card__header-extra-text">{{ extra }}</text>
+				</view>
+			</view>
+		</slot>
+		<!-- 卡片内容 -->
+		<view class="uni-card__content" :style="{padding:padding}" @click="onClick('content')">
+			<slot></slot>
+		</view>
+		<view class="uni-card__actions" @click="onClick('actions')">
+			<slot name="actions"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Card 卡片
+	 * @description 卡片视图组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=22
+	 * @property {String} title 标题文字
+	 * @property {String} subTitle 副标题
+	 * @property {Number} padding 内容内边距
+	 * @property {Number} margin 卡片外边距
+	 * @property {Number} spacing 卡片内边距
+	 * @property {String} extra 标题额外信息
+	 * @property {String} cover 封面图（本地路径需要引入）
+	 * @property {String} thumbnail 标题左侧缩略图
+	 * @property {Boolean} is-full = [true | false] 卡片内容是否通栏，为 true 时将去除padding值
+	 * @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影
+	 * @property {String} shadow 卡片阴影
+	 * @property {Boolean} border 卡片边框
+	 * @event {Function} click 点击 Card 触发事件
+	 */
+	export default {
+		name: 'UniCard',
+		emits: ['click'],
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			subTitle: {
+				type: String,
+				default: ''
+			},
+			padding: {
+				type: String,
+				default: '10px'
+			},
+			margin: {
+				type: String,
+				default: '15px'
+			},
+			spacing: {
+				type: String,
+				default: '0 10px'
+			},
+			extra: {
+				type: String,
+				default: ''
+			},
+			cover: {
+				type: String,
+				default: ''
+			},
+			thumbnail: {
+				type: String,
+				default: ''
+			},
+			isFull: {
+				// 内容区域是否通栏
+				type: Boolean,
+				default: false
+			},
+			isShadow: {
+				// 是否开启阴影
+				type: Boolean,
+				default: true
+			},
+			shadow: {
+				type: String,
+				default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)'
+			},
+			border: {
+				type: Boolean,
+				default: true
+			}
+		},
+		methods: {
+			onClick(type) {
+				this.$emit('click', type)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-border-3: #EBEEF5 !default;
+	$uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+	$uni-main-color: #3a3a3a !default;
+	$uni-base-color: #6a6a6a !default;
+	$uni-secondary-color: #909399 !default;
+	$uni-spacing-sm: 8px !default;
+	$uni-border-color:$uni-border-3;
+	$uni-shadow: $uni-shadow-base;
+	$uni-card-title: 15px;
+	$uni-cart-title-color:$uni-main-color;
+	$uni-card-subtitle: 12px;
+	$uni-cart-subtitle-color:$uni-secondary-color;
+	$uni-card-spacing: 10px;
+	$uni-card-content-color: $uni-base-color;
+
+	.uni-card {
+		margin: $uni-card-spacing;
+		padding: 0 $uni-spacing-sm;
+		border-radius: 4px;
+		overflow: hidden;
+		font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+		background-color: #fff;
+		flex: 1;
+
+		.uni-card__cover {
+			position: relative;
+			margin-top: $uni-card-spacing;
+			flex-direction: row;
+			overflow: hidden;
+			border-radius: 4px;
+			.uni-card__cover-image {
+				flex: 1;
+				// width: 100%;
+				/* #ifndef APP-PLUS */
+				vertical-align: middle;
+				/* #endif */
+			}
+		}
+
+		.uni-card__header {
+			display: flex;
+			border-bottom: 1px $uni-border-color solid;
+			flex-direction: row;
+			align-items: center;
+			padding: $uni-card-spacing;
+			overflow: hidden;
+
+			.uni-card__header-box {
+				/* #ifndef APP-NVUE */
+				display: flex;
+				/* #endif */
+				flex: 1;
+				flex-direction: row;
+				align-items: center;
+				overflow: hidden;
+			}
+
+			.uni-card__header-avatar {
+				width: 40px;
+				height: 40px;
+				overflow: hidden;
+				border-radius: 5px;
+				margin-right: $uni-card-spacing;
+				.uni-card__header-avatar-image {
+					flex: 1;
+					width: 40px;
+					height: 40px;
+				}
+			}
+
+			.uni-card__header-content {
+				/* #ifndef APP-NVUE */
+				display: flex;
+				/* #endif */
+				flex-direction: column;
+				justify-content: center;
+				flex: 1;
+				// height: 40px;
+				overflow: hidden;
+
+				.uni-card__header-content-title {
+					font-size: $uni-card-title;
+					color: $uni-cart-title-color;
+					// line-height: 22px;
+				}
+
+				.uni-card__header-content-subtitle {
+					font-size: $uni-card-subtitle;
+					margin-top: 5px;
+					color: $uni-cart-subtitle-color;
+				}
+			}
+
+			.uni-card__header-extra {
+				line-height: 12px;
+
+				.uni-card__header-extra-text {
+					font-size: 12px;
+					color: $uni-cart-subtitle-color;
+				}
+			}
+		}
+
+		.uni-card__content {
+			padding: $uni-card-spacing;
+			font-size: 14px;
+			color: $uni-card-content-color;
+			line-height: 22px;
+		}
+
+		.uni-card__actions {
+			font-size: 12px;
+		}
+	}
+
+	.uni-card--border {
+		border: 1px solid $uni-border-color;
+	}
+
+	.uni-card--shadow {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		box-shadow: $uni-shadow;
+		/* #endif */
+	}
+
+	.uni-card--full {
+		margin: 0;
+		border-left-width: 0;
+		border-left-width: 0;
+		border-radius: 0;
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-card--full:after {
+		border-radius: 0;
+	}
+
+	/* #endif */
+	.uni-ellipsis {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		/* #endif */
+	}
+</style>
diff --git a/uni_modules/uni-card/package.json b/uni_modules/uni-card/package.json
new file mode 100644
index 0000000..f16224d
--- /dev/null
+++ b/uni_modules/uni-card/package.json
@@ -0,0 +1,90 @@
+{
+  "id": "uni-card",
+  "displayName": "uni-card 卡片",
+  "version": "1.3.1",
+  "description": "Card 组件，提供常见的卡片样式。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "card",
+    "",
+    "卡片"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-icons",
+			"uni-scss"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-card/readme.md b/uni_modules/uni-card/readme.md
new file mode 100644
index 0000000..7434e71
--- /dev/null
+++ b/uni_modules/uni-card/readme.md
@@ -0,0 +1,12 @@
+
+
+## Card 卡片
+> **组件名：uni-card**
+> 代码块： `uCard`
+
+卡片视图组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-card)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+