7 changed files with 445 additions and 483 deletions
@ -1,61 +0,0 @@ |
|||||
<template> |
|
||||
<view class="tag_box flex-center-start" :style="{ '--borderColor': borderColor }"> |
|
||||
<view class="border" :style="borderStyle" /> |
|
||||
<text :style="{ color: labelColor }">{{ label }}</text> |
|
||||
<view class="flex1"> |
|
||||
<slot></slot> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
interface tagsInt { |
|
||||
label: string |
|
||||
labelColor?: string |
|
||||
borderColor?: string |
|
||||
borderType?: 'round' | 'line' |
|
||||
} |
|
||||
|
|
||||
const props = withDefaults(defineProps<tagsInt>(), { |
|
||||
label: '收益', |
|
||||
labelColor: '#616161', |
|
||||
borderColor: '#ff8d1a', |
|
||||
borderType: 'line' |
|
||||
}) |
|
||||
|
|
||||
const borderStyle = computed(() => { |
|
||||
if (props.borderType === 'line') { |
|
||||
return { |
|
||||
width: '8rpx', |
|
||||
height: '28rpx', |
|
||||
marginRight: '16rpx' |
|
||||
} |
|
||||
} else { |
|
||||
return { |
|
||||
width: '16rpx', |
|
||||
height: '16rpx', |
|
||||
marginRight: '13rpx' |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
.tag_box { |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 400; |
|
||||
line-height: 40rpx; |
|
||||
--borderColor: #ff8d1a; |
|
||||
|
|
||||
.border { |
|
||||
width: 8rpx; |
|
||||
height: 28rpx; |
|
||||
border-radius: 90rpx; |
|
||||
background-color: var(--borderColor); |
|
||||
} |
|
||||
|
|
||||
> .flex1 { |
|
||||
padding-left: 20rpx; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue