更新大理市民卡app
diff --git a/uview-ui/components/u-card/u-card.vue b/uview-ui/components/u-card/u-card.vue
new file mode 100644
index 0000000..add01cb
--- /dev/null
+++ b/uview-ui/components/u-card/u-card.vue
@@ -0,0 +1,298 @@
+<template>
+ <view
+ class="u-card"
+ @tap.stop="click"
+ :class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }"
+ :style="{
+ borderRadius: borderRadius + 'rpx',
+ margin: margin,
+ boxShadow: boxShadow
+ }"
+ >
+ <view
+ v-if="showHead"
+ class="u-card__head"
+ :style="[{padding: padding + 'rpx'}, headStyle]"
+ :class="{
+ 'u-border-bottom': headBorderBottom
+ }"
+ @tap="headClick"
+ >
+ <view v-if="!$slots.head" class="u-flex u-row-between">
+ <view class="u-card__head--left u-flex u-line-1" v-if="title">
+ <image
+ :src="thumb"
+ class="u-card__head--left__thumb"
+ mode="aspectfull"
+ v-if="thumb"
+ :style="{
+ height: thumbWidth + 'rpx',
+ width: thumbWidth + 'rpx',
+ borderRadius: thumbCircle ? '100rpx' : '6rpx'
+ }"
+ ></image>
+ <text
+ class="u-card__head--left__title u-line-1"
+ :style="{
+ fontSize: titleSize + 'rpx',
+ color: titleColor
+ }"
+ >
+ {{ title }}
+ </text>
+ </view>
+ <view class="u-card__head--right u-line-1" v-if="subTitle">
+ <text
+ class="u-card__head__title__text"
+ :style="{
+ fontSize: subTitleSize + 'rpx',
+ color: subTitleColor
+ }"
+ >
+ {{ subTitle }}
+ </text>
+ </view>
+ </view>
+ <slot name="head" v-else />
+ </view>
+ <view @tap="bodyClick" class="u-card__body" :style="[{padding: padding + 'rpx'}, bodyStyle]"><slot name="body" /></view>
+ <view
+ v-if="showFoot"
+ class="u-card__foot"
+ @tap="footClick"
+ :style="[{padding: $slots.foot ? padding + 'rpx' : 0}, footStyle]"
+ :class="{
+ 'u-border-top': footBorderTop
+ }"
+ >
+ <slot name="foot" />
+ </view>
+ </view>
+</template>
+
+<script>
+/**
+ * card 卡片
+ * @description 卡片组件一般用于多个列表条目，且风格统一的场景
+ * @tutorial https://www.uviewui.com/components/card.html
+ * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
+ * @property {String} title 头部左边的标题
+ * @property {String} title-color 标题颜色（默认#303133）
+ * @property {String | Number} title-size 标题字体大小，单位rpx（默认30）
+ * @property {String} sub-title 头部右边的副标题
+ * @property {String} sub-title-color 副标题颜色（默认#909399）
+ * @property {String | Number} sub-title-size 副标题字体大小（默认26）
+ * @property {Boolean} border 是否显示边框（默认true）
+ * @property {String | Number} index 用于标识点击了第几个卡片
+ * @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
+ * @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
+ * @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16）
+ * @property {Object} head-style 头部自定义样式，对象形式
+ * @property {Object} body-style 中部自定义样式，对象形式
+ * @property {Object} foot-style 底部自定义样式，对象形式
+ * @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
+ * @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
+ * @property {Boolean} show-head 是否显示头部（默认true）
+ * @property {Boolean} show-head 是否显示尾部（默认true）
+ * @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
+ * @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60）
+ * @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
+ * @event {Function} click 整个卡片任意位置被点击时触发
+ * @event {Function} head-click 卡片头部被点击时触发
+ * @event {Function} body-click 卡片主体部分被点击时触发
+ * @event {Function} foot-click 卡片底部部分被点击时触发
+ * @example <u-card padding="30" title="card"></u-card>
+ */
+export default {
+ name: 'u-card',
+ props: {
+ // 与屏幕两侧是否留空隙
+ full: {
+ type: Boolean,
+ default: false
+ },
+ // 标题
+ title: {
+ type: String,
+ default: ''
+ },
+ // 标题颜色
+ titleColor: {
+ type: String,
+ default: '#303133'
+ },
+ // 标题字体大小，单位rpx
+ titleSize: {
+ type: [Number, String],
+ default: '30'
+ },
+ // 副标题
+ subTitle: {
+ type: String,
+ default: ''
+ },
+ // 副标题颜色
+ subTitleColor: {
+ type: String,
+ default: '#909399'
+ },
+ // 副标题字体大小，单位rpx
+ subTitleSize: {
+ type: [Number, String],
+ default: '26'
+ },
+ // 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
+ border: {
+ type: Boolean,
+ default: true
+ },
+ // 用于标识点击了第几个
+ index: {
+ type: [Number, String, Object],
+ default: ''
+ },
+ // 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx"
+ margin: {
+ type: String,
+ default: '30rpx'
+ },
+ // card卡片的圆角
+ borderRadius: {
+ type: [Number, String],
+ default: '16'
+ },
+ // 头部自定义样式，对象形式
+ headStyle: {
+ type: Object,
+ default() {
+ return {};
+ }
+ },
+ // 主体自定义样式，对象形式
+ bodyStyle: {
+ type: Object,
+ default() {
+ return {};
+ }
+ },
+ // 底部自定义样式，对象形式
+ footStyle: {
+ type: Object,
+ default() {
+ return {};
+ }
+ },
+ // 头部是否下边框
+ headBorderBottom: {
+ type: Boolean,
+ default: true
+ },
+ // 底部是否有上边框
+ footBorderTop: {
+ type: Boolean,
+ default: true
+ },
+ // 标题左边的缩略图
+ thumb: {
+ type: String,
+ default: ''
+ },
+ // 缩略图宽高，单位rpx
+ thumbWidth: {
+ type: [String, Number],
+ default: '60'
+ },
+ // 缩略图是否为圆形
+ thumbCircle: {
+ type: Boolean,
+ default: false
+ },
+ // 给head，body，foot的内边距
+ padding: {
+ type: [String, Number],
+ default: '30'
+ },
+ // 是否显示头部
+ showHead: {
+ type: Boolean,
+ default: true
+ },
+ // 是否显示尾部
+ showFoot: {
+ type: Boolean,
+ default: true
+ },
+ // 卡片外围阴影，字符串形式
+ boxShadow: {
+ type: String,
+ default: 'none'
+ }
+ },
+ data() {
+ return {};
+ },
+ methods: {
+ click() {
+ this.$emit('click', this.index);
+ },
+ headClick() {
+ this.$emit('head-click', this.index);
+ },
+ bodyClick() {
+ this.$emit('body-click', this.index);
+ },
+ footClick() {
+ this.$emit('foot-click', this.index);
+ }
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-card {
+ position: relative;
+ overflow: hidden;
+ font-size: 28rpx;
+ background-color: #ffffff;
+ box-sizing: border-box;
+
+ &-full {
+ // 如果是与屏幕之间不留空隙，应该设置左右边距为0
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+
+ &--border:after {
+ border-radius: 16rpx;
+ }
+
+ &__head {
+ &--left {
+ color: $u-main-color;
+
+ &__thumb {
+ margin-right: 16rpx;
+ }
+
+ &__title {
+ max-width: 400rpx;
+ }
+ }
+
+ &--right {
+ color: $u-tips-color;
+ margin-left: 6rpx;
+ }
+ }
+
+ &__body {
+ color: $u-content-color;
+ }
+
+ &__foot {
+ color: $u-tips-color;
+ }
+}
+</style>