回退 active.vue
This commit is contained in:
parent
2a0ccebfac
commit
ccf6bea361
@ -3,7 +3,7 @@
|
|||||||
<v-navigation-bar title-color="#333" background-color="#fff" title="活动列表">
|
<v-navigation-bar title-color="#333" background-color="#fff" title="活动列表">
|
||||||
</v-navigation-bar>
|
</v-navigation-bar>
|
||||||
<view class="body">
|
<view class="body">
|
||||||
<view class="card" :title="item.name" v-for="(item, index) in activeList" :key="index">
|
<uni-card :title="item.name" v-for="item in activeList">
|
||||||
<text class="uni-body">{{ item.remark }}</text>
|
<text class="uni-body">{{ item.remark }}</text>
|
||||||
<view slot="actions" class="card-actions">
|
<view slot="actions" class="card-actions">
|
||||||
<picker v-if="item.type=='kkyl'" @change="bindPickerChange" :value="index" :range="array">
|
<picker v-if="item.type=='kkyl'" @change="bindPickerChange" :value="index" :range="array">
|
||||||
@ -17,7 +17,7 @@
|
|||||||
<button @click="joinCzylActPrex(item)" type="primary">参加</button>
|
<button @click="joinCzylActPrex(item)" type="primary">参加</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</uni-card>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
@ -265,6 +265,7 @@ export default {
|
|||||||
height: 0;
|
height: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 30rpx 0;
|
padding: 30rpx 0;
|
||||||
|
margin: 0 32rpx;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -272,19 +273,8 @@ export default {
|
|||||||
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
.card {
|
|
||||||
background-color: #fff;
|
|
||||||
margin: 0 32rpx;
|
|
||||||
padding: 30rpx;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
row-gap: 10rpx;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
26
uni_modules/uni-card/changelog.md
Normal file
26
uni_modules/uni-card/changelog.md
Normal file
@ -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目录规范
|
||||||
270
uni_modules/uni-card/components/uni-card/uni-card.vue
Normal file
270
uni_modules/uni-card/components/uni-card/uni-card.vue
Normal file
@ -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>
|
||||||
90
uni_modules/uni-card/package.json
Normal file
90
uni_modules/uni-card/package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
12
uni_modules/uni-card/readme.md
Normal file
12
uni_modules/uni-card/readme.md
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## Card 卡片
|
||||||
|
> **组件名：uni-card**
|
||||||
|
> 代码块： `uCard`
|
||||||
|
|
||||||
|
卡片视图组件。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-card)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user