cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-09-13 00:50:40 +08:00
Code Issues Activity

refactor: 架构升级

Browse Source
This commit is contained in:
小莫唐尼
2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/uniapp-project/examples/uni-ui/uni-card.vue
+216
View File
@@ -0,0 +1,216 @@
<!--
uni-card 卡片组件示例
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-card.html
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-card
-->
<template>
<view class="container">
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。</text>
</uni-card>
<!-- 基础卡片 -->
<uni-section title="基础卡片" type="line">
<uni-card :is-shadow="false">
<text class="uni-body">这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
</uni-card>
</uni-section>
<!-- 卡片标题+额外信息 -->
<uni-section title="卡片标题+额外信息" type="line">
<uni-card title="基础卡片" extra="额外信息">
<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
</uni-card>
</uni-section>
<!-- 双标题卡片 -->
<uni-section title="双标题卡片" type="line">
<uni-card
title="基础卡片"
sub-title="副标题"
extra="额外信息"
:thumbnail="avatar"
@click="onClick"
>
<text class="uni-body">这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
</uni-card>
</uni-section>
<!-- 通栏卡片 -->
<uni-section title="通栏卡片" type="line">
<uni-card
title="基础卡片"
:isFull="true"
sub-title="副标题"
extra="额外信息"
:thumbnail="avatar"
>
<text class="uni-body">这是一个通栏卡片 ，通栏没有外边距，左右会贴合父元素。</text>
</uni-card>
</uni-section>
<!-- 卡片封面图+操作栏 -->
<uni-section title="卡片封面图+操作栏" type="line">
<uni-card :cover="cover" @click="onClick">
<text class="uni-body">这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
<template v-slot:actions>
<view class="card-actions">
<view class="card-actions-item" @click.stop="actionsClick('分享')">
<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">分享</text>
</view>
<view class="card-actions-item" @click.stop="actionsClick('点赞')">
<uni-icons type="heart" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">点赞</text>
</view>
<view class="card-actions-item" @click.stop="actionsClick('评论')">
<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">评论</text>
</view>
</view>
</template>
</uni-card>
</uni-section>
<!-- 自定义卡片内容 -->
<uni-section title="自定义卡片内容" type="line">
<uni-card
title="基础卡片"
sub-title="副标题"
extra="额外信息"
padding="10px 0"
:thumbnail="avatar"
>
<template v-slot:title>
<uni-list>
<uni-list-item :show-switch="true" title="自定义标题" />
</uni-list>
</template>
<image style="width: 100%;" :src="cover"></image>
<text class="uni-body uni-mt-5">卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。</text>
<view slot="actions" class="card-actions">
<view class="card-actions-item" @click.stop="actionsClick('分享')">
<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">分享</text>
</view>
<view class="card-actions-item" @click.stop="actionsClick('点赞')">
<uni-icons type="heart" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">点赞</text>
</view>
<view class="card-actions-item" @click.stop="actionsClick('评论')">
<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">评论</text>
</view>
</view>
</uni-card>
</uni-section>
<!-- 卡片+列表 -->
<uni-section title="卡片+列表" type="line">
<uni-card padding="0" spacing="0">
<template v-slot:cover>
<view class="custom-cover">
<image class="cover-image" mode="aspectFill" :src="cover"></image>
<view class="cover-content">
<text class="uni-subtitle uni-white">今日新闻热点</text>
</view>
</view>
</template>
<uni-list>
<uni-list-item title="今日新闻" showArrow></uni-list-item>
<uni-list-item title="今日新闻" showArrow></uni-list-item>
</uni-list>
<view slot="actions" class="card-actions no-border">
<view class="card-actions-item" @click.stop="actionsClick('分享')">
<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">分享</text>
</view>
<view class="card-actions-item" @click.stop="actionsClick('点赞')">
<uni-icons type="heart" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">点赞</text>
</view>
<view class="card-actions-item" @click.stop="actionsClick('评论')">
<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">评论</text>
</view>
</view>
</uni-card>
</uni-section>
</view>
</template>
<script>
export default {
data() {
return {
avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
}
},
methods: {
onClick() {
uni.showToast({
title: '点击了卡片',
icon: 'none'
})
},
actionsClick(type) {
uni.showToast({
title: `点击了${type}`,
icon: 'none'
})
}
}
}
</script>
<style lang="scss">
.card-actions {
display: flex;
justify-content: space-around;
align-items: center;
height: 45px;
padding: 0 10px;
border-top: 1px solid #f0f0f0;
}
.card-actions.no-border {
border-top: none;
}
.card-actions-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex: 1;
}
.card-actions-item-text {
font-size: 12px;
color: #999;
margin-top: 5px;
}
.custom-cover {
position: relative;
width: 100%;
height: 200px;
}
.cover-image {
width: 100%;
height: 100%;
}
.cover-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx;
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
</style>