thzxcx/uni
1
0
Fork 0
generated from thzxcx/vue3
Code Pull Requests Packages Releases Activity

feat: 卡片等组件

Browse Source
This commit is contained in:
赵劲奉
2023-07-10 19:26:19 +08:00
parent ec2f619775
commit d1e7778644
28 changed files with 1108 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/card-actions/index.vue Normal file
View File

@ -0,0 +1,48 @@
<!--
* @Author: peerless_hero peerless_hero@outlook.com
* @Date: 2023-07-08 01:44:59
* @LastEditors: peerless_hero peerless_hero@outlook.com
* @LastEditTime: 2023-07-10 04:27:19
* @FilePath: \uni\packages\card-actions\index.vue
* @Description:
*
-->
<template>
<view class="th-card-actions" color="#3b82f6" w-full flex flex-row items-center justify-center overflow-hidden>
<view h-1px bg="#dcdcdc" />
<view
v-for="(action, index) in actions"
:key="index"
active="bg-#f2f7ff"
fs-26
h-106rpx
leh-106
cursor-pointer
flex-grow
text-center
@click="emit('select', index)"
>
{{ action.text }}
<Image v-if="action.icon" :src="action.icon" mode="scaleToFill" />
</view>
</view>
</template>
<script lang="ts" setup name="CardActions">
defineProps<{
actions?: Array<{
/** 按钮文字 */
text?: string
/** 图标 */
icon?: string
}>
}>()
const emit = defineEmits<{
(event: 'select',
/** 单击的索引值 */
index: number): void
}>()
emit('select', 0)
</script>

8
packages/card-item/index.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<view>
CardItem
</view>
</template>
<script lang="ts" setup name="CardItem">
</script>

8
packages/card-subtitle/index.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<view>
CardSubtitle
</view>
</template>
<script lang="ts" setup name="CardSubtitle">
</script>

45
packages/card-text/index.vue Normal file
View File

@ -0,0 +1,45 @@
<!--
* @Author: peerless_hero peerless_hero@outlook.com
* @Date: 2023-07-08 01:44:46
* @LastEditors: zhaojinfeng 121016171@qq.com
* @LastEditTime: 2023-07-10 19:07:56
* @FilePath: \uni\packages\card-text\index.vue
* @Description:
*
-->
<template>
<View mx-24rpx break-all mt-16rpx flex>
<View color="#909399" shrink-0>
<slot name="label">
{{ label }}
<template v-if="label">
：
</template>
</slot>
</View>
<View color="#3a3a3a" flex-grow>
<slot name="text">
<Text>
{{ text }}
</Text>
</slot>
</View>
<View>
<View h-48rpx w-128rpx rounded-8rpx border-solid color="#f3a73f" border="#f6ddb8" bg="#fff6e8" border-2rpx fs-24 leh-48 text-center>
试试
</View>
</View>
</View>
</template>
<script lang="ts" setup name="CardText">
withDefaults(defineProps<{
/** 标签文字，可用插槽 */
label?: string
/** 文字，可用插槽 */
text?: string
}>(), {
label: '',
text: '',
})
</script>

21
packages/card-title/index.vue Normal file
View File

@ -0,0 +1,21 @@
<!--
* @Author: zhaojinfeng 121016171@qq.com
* @Date: 2023-07-10 14:39:45
* @LastEditors: zhaojinfeng 121016171@qq.com
* @LastEditTime: 2023-07-10 17:25:59
* @FilePath: \uni\packages\card-title\index.vue
* @Description:
*
-->
<template>
<View fs-30 font-500 leh-42 mx-24rpx mt-24rpx mb-12rpx color="#3A3A3A">
<slot>{{ title }}</slot>
</View>
</template>
<script lang="ts" setup name="CardTitle">
defineProps<{
/** 标题，支持插槽 */
title?: string
}>()
</script>

444
packages/card/index.vue Normal file
View File

@ -0,0 +1,444 @@
<!--
* @Author: peerless_hero peerless_hero@outlook.com
* @Date: 2023-07-08 01:36:19
* @LastEditors: zhaojinfeng 121016171@qq.com
* @LastEditTime: 2023-07-10 18:43:32
* @FilePath: \uni\packages\card\index.vue
* @Description:
*
-->
<template>
<View class="th-card" bg-white rounded-16rpx m-24rpx max-w-702rpx overflow-hidden>
<slot />
<View v-if="noCardActions" h-16rpx />
</View>
</template>
<script lang="ts" setup name="Card">
/** 不存在操作栏组件时，自动增加底部的内边距 */
const noCardActions = useSlots().default().every(({ type }) =>
typeof type !== 'object' || !('name' in type) || type.name !== 'CardActions',
)
</script>
<style lang="scss">
.th-card {
box-shadow: 0px 1px 6px 0px rgba(216,216,216,0.5);
}
.group_1 {
--at-apply: p-24rpx box-shadow: 0px 1px 6px 0px #d8d8d880;
background-color: #ffffff;
border-radius: 8px;
position: relative;
align-self: center;
}
.text_5 {
--at-apply: leh-42 m-24rpx fs-30 overflow-wrap: break-word;
color: #3a3a3a;
font-weight: 500;
text-align: left;
white-space: nowrap;
}
.block_6 {
--at-apply: m-16rpx
}
.text-wrapper_2 {
--at-apply: p-6rpx background-color: rgba(242, 247, 255, 1);
border-radius: 4px;
border: 1px solid rgba(188, 221, 255, 1);
padding: 6rpx 18rpx 4rpx 18rpx;
}
.text_6 {
overflow-wrap: break-word;
color: rgba(41, 121, 255, 1);
font-size: 24rpx;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 34rpx;
}
.text-wrapper_3 {
border-radius: 4px;
border: 1px solid rgba(251, 199, 199, 1);
padding: 6rpx 18rpx 4rpx 18rpx;
}
.text_7 {
overflow-wrap: break-word;
color: rgba(228, 61, 51, 1);
font-size: 24rpx;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 34rpx;
}
.text_8 {
--at-apply: m-16rpx fs-24 leh-36 width: 654rpx;
height: 108rpx;
overflow-wrap: break-word;
color: rgba(106, 106, 106, 1);
font-size: 24rpx;
text-align: left;
line-height: 36rpx;
margin: 16rpx 0 0 24rpx;
}
.text-wrapper_19 {
--at-apply: m-16rpx width: 504rpx;
margin: 16rpx 150rpx 0 24rpx;
}
.text_9 {
--at-apply: fs-24 leh-34 overflow-wrap: break-word;
color: rgba(144, 147, 153, 1);
font-size: 24rpx;
text-align: left;
white-space: nowrap;
line-height: 34rpx;
}
.text_10 {
--at-apply: fs-24 leh-36 height: 34rpx;
overflow-wrap: break-word;
color: rgba(106, 106, 106, 1);
font-size: 24rpx;
text-align: left;
white-space: nowrap;
line-height: 36rpx;
}
.text-wrapper_20 {
--at-apply: m-16rpx width: 244rpx;
margin: 16rpx 410rpx 0 24rpx;
}
.text_11 {
--at-apply: fs-24 leh-36 overflow-wrap: break-word;
color: rgba(144, 147, 153, 1);
font-size: 24rpx;
text-align: left;
white-space: nowrap;
line-height: 34rpx;
}
.text_12 {
--at-apply: fs-24 leh-36 height: 34rpx;
overflow-wrap: break-word;
color: rgba(106, 106, 106, 1);
font-size: 24rpx;
text-align: left;
white-space: nowrap;
line-height: 36rpx;
}
.text-wrapper_21 {
--at-apply: m-16rpx
}
.text_13 {
--at-apply: fs-24 leh-34 overflow-wrap: break-word;
color: rgba(144, 147, 153, 1);
font-size: 24rpx;
text-align: left;
white-space: nowrap;
line-height: 34rpx;
}
.text_14 {
--at-apply: fs-24 leh-34 height: 34rpx;
overflow-wrap: break-word;
color: rgba(106, 106, 106, 1);
font-size: 24rpx;
text-align: left;
white-space: nowrap;
line-height: 36rpx;
}
.block_7 {
width: 602rpx;
margin: 24rpx 76rpx 0 0;
}
.group_2 {
background-color: rgba(242, 247, 255, 1);
border-radius: 0px 0px 0px 8px;
position: relative;
padding: 36rpx 124rpx 34rpx 124rpx;
}
.image-text_9 {
width: 102rpx;
}
.thumbnail_11 {
width: 34rpx;
height: 34rpx;
margin-bottom: 2rpx;
}
.text-group_1 {
--at-apply: fs-26 leh-34 overflow-wrap: break-word;
color: rgba(41, 121, 255, 1);
font-size: 26rpx;
text-align: right;
white-space: nowrap;
line-height: 36rpx;
}
.image_1 {
position: absolute;
left: 24rpx;
top: 0;
width: 654rpx;
height: 2rpx;
}
.image-text_10 {
width: 152rpx;
margin: 36rpx 0 34rpx 0;
}
.thumbnail_12 {
width: 32rpx;
height: 32rpx;
margin: 2rpx 0 2rpx 0;
}
.text-group_2 {
--at-apply: fs-24 leh-36 overflow-wrap: break-word;
color: rgba(41, 121, 255, 1);
font-size: 26rpx;
text-align: left;
white-space: nowrap;
line-height: 36rpx;
}
</style>
<!-- <style lang="scss">
// html {
// font-size: 37.5px;
// }
.group_1 {
box-shadow: 0px 1px 6px 0px rgba(216, 216, 216, 0.5);
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
position: relative;
height: 7.12rem;
align-self: center;
padding-right: 0.32rem;
}
.text_5 {
overflow-wrap: break-word;
color: rgba(58, 58, 58, 1);
font-size: 0.4rem;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 0.56rem;
// margin: 0.32rem 3.12rem 0 0.32rem;
}
.block_6 {
width: 2.88rem;
margin: 0.214rem 5.84rem 0 0.32rem;
}
.text-wrapper_2 {
background-color: rgba(242, 247, 255, 1);
border-radius: 4px;
border: 1px solid rgba(188, 221, 255, 1);
padding: 0.08rem 0.24rem 0.054rem 0.24rem;
}
.text_6 {
overflow-wrap: break-word;
color: rgba(41, 121, 255, 1);
font-size: 0.32rem;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 0.454rem;
}
.text-wrapper_3 {
border-radius: 4px;
border: 1px solid rgba(251, 199, 199, 1);
padding: 0.08rem 0.24rem 0.054rem 0.24rem;
}
.text_7 {
overflow-wrap: break-word;
color: rgba(228, 61, 51, 1);
font-size: 0.32rem;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 0.454rem;
}
.text_8 {
width: 8.72rem;
height: 1.44rem;
overflow-wrap: break-word;
color: rgba(106, 106, 106, 1);
font-size: 0.32rem;
text-align: left;
line-height: 0.48rem;
margin: 0.214rem 0 0 0.32rem;
}
.text-wrapper_19 {
width: 6.72rem;
margin: 0.214rem 2rem 0 0.32rem;
}
.text_9 {
overflow-wrap: break-word;
color: rgba(144, 147, 153, 1);
font-size: 0.32rem;
text-align: left;
white-space: nowrap;
line-height: 0.454rem;
}
.text_10 {
height: 0.454rem;
overflow-wrap: break-word;
color: rgba(106, 106, 106, 1);
font-size: 0.32rem;
text-align: left;
white-space: nowrap;
line-height: 0.48rem;
}
.text-wrapper_20 {
width: 3.254rem;
margin: 0.214rem 5.467rem 0 0.32rem;
}
.text_11 {
overflow-wrap: break-word;
color: rgba(144, 147, 153, 1);
font-size: 0.32rem;
text-align: left;
white-space: nowrap;
line-height: 0.454rem;
}
.text_12 {
height: 0.454rem;
overflow-wrap: break-word;
color: rgba(106, 106, 106, 1);
font-size: 0.32rem;
text-align: left;
white-space: nowrap;
line-height: 0.48rem;
}
.text-wrapper_21 {
width: 5.44rem;
margin: 0.214rem 3.28rem 0 0.32rem;
}
.text_13 {
overflow-wrap: break-word;
color: rgba(144, 147, 153, 1);
font-size: 0.32rem;
text-align: left;
white-space: nowrap;
line-height: 0.454rem;
}
.text_14 {
height: 0.454rem;
overflow-wrap: break-word;
color: rgba(106, 106, 106, 1);
font-size: 0.32rem;
text-align: left;
white-space: nowrap;
line-height: 0.48rem;
}
.block_7 {
width: 8.027rem;
margin: 0.32rem 1.014rem 0 0;
}
.group_2 {
background-color: rgba(242, 247, 255, 1);
border-radius: 0px 0px 0px 8px;
position: relative;
padding: 0.48rem 1.654rem 0.454rem 1.654rem;
}
.image-text_9 {
width: 1.36rem;
}
.thumbnail_11 {
width: 0.454rem;
height: 0.454rem;
margin-bottom: 0.027rem;
}
.text-group_1 {
overflow-wrap: break-word;
color: rgba(41, 121, 255, 1);
font-size: 0.346rem;
text-align: right;
white-space: nowrap;
line-height: 0.48rem;
}
.image_1 {
position: absolute;
left: 0.32rem;
top: 0;
width: 8.72rem;
height: 0.027rem;
}
.image-text_10 {
width: 2.027rem;
margin: 0.48rem 0 0.454rem 0;
}
.thumbnail_12 {
width: 0.427rem;
height: 0.427rem;
margin: 0.027rem 0 0.027rem 0;
}
.text-group_2 {
overflow-wrap: break-word;
color: rgba(41, 121, 255, 1);
font-size: 0.346rem;
text-align: left;
white-space: nowrap;
line-height: 0.48rem;
}
</style> -->

8
packages/default-layout/index.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<view w-750rpx bg="#f7f7f7" h-1500rpx>
DefaultLayout
</view>
</template>
<script lang="ts" setup name="DefaultLayout">
</script>

37
packages/prompt/index.vue Normal file
View File

@ -0,0 +1,37 @@
<!--
* @Author: zhaojinfeng 121016171@qq.com
* @Date: 2023-06-25 15:55:08
* @LastEditors: zhaojinfeng 121016171@qq.com
* @LastEditTime: 2023-06-25 19:14:25
* @FilePath: \uni\packages\prompt\index.vue
* @Description:
*
-->
<template>
<div>xx</div>
<!-- <view>
xxx
</view> -->
</template>
<script lang="ts" setup name="Prompt">
const props = withDefaults(
defineProps<{
/** 标题 */
title: string
/** 是否必填 */
required?: boolean
/** 输入框的提示文字 */
placeholder?: string
/** 输入框的默认值 */
defaulrValue?: string
}>(),
{
required: false,
},
)
console.log(uni)
const mask = ref(false)
const value = ref(props.defaulrValue)
</script>

33
packages/search-picker/index.vue Normal file
View File

@ -0,0 +1,33 @@
<!--
* @Author: zhaojinfeng 121016171@qq.com
* @Date: 2023-06-25 19:26:10
* @LastEditors: zhaojinfeng 121016171@qq.com
* @LastEditTime: 2023-06-25 19:42:51
* @FilePath: \uni\packages\search-picker\index.vue
* @Description:
*
-->
<template>
<view>
<a-popup show>
xxxxxxxxxxxxxxxxxxxxxxxx
</a-popup>
SearchPicker
</view>
</template>
<script lang="ts" setup name="SearchPicker">
withDefaults(
defineProps<{
/** 是否必填 */
required?: boolean
/** 输入框的提示文字 */
placeholder?: string
/** 输入框的默认值 */
defaulrValue?: string
}>(),
{
required: false,
},
)
</script>