feat：封装header及bottombtn组件
parent
d5710f1e87
commit
6c4e9d5e8c
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<view class="header-section">
|
||||
<view class="header-content">
|
||||
<text class="header-title">{{ title }}</text>
|
||||
<text v-if="subTitle" class="header-desc">{{ subTitle }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-section {
|
||||
--status-top: var(--status-bar-height, 0px);
|
||||
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
||||
padding: calc(40rpx + var(--status-top)) 30rpx 80rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
.header-title {
|
||||
display: block;
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.header-desc {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<view class="bottom-action-bar">
|
||||
<view class="action-row">
|
||||
<view
|
||||
v-for="(btn, index) in normalizedButtons"
|
||||
:key="index"
|
||||
class="action-btn"
|
||||
:class="btn.type === 'primary' ? 'btn-primary' : 'btn-default'"
|
||||
@click="handleClick(btn, index)"
|
||||
>
|
||||
<text class="btn-text" :class="btn.type === 'primary' ? 'text-primary' : 'text-default'">{{ btn.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
buttons: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['action'])
|
||||
|
||||
const normalizedButtons = computed(() => {
|
||||
if (!Array.isArray(props.buttons) || props.buttons.length === 0) {
|
||||
return [{ text: '返回', type: 'default', key: 'back' }]
|
||||
}
|
||||
return props.buttons.map((b) => ({
|
||||
text: b && b.text ? b.text : '按钮',
|
||||
type: b && b.type === 'primary' ? 'primary' : 'default',
|
||||
key: b && b.key ? b.key : ''
|
||||
}))
|
||||
})
|
||||
|
||||
function handleClick(btn, index) {
|
||||
emit('action', { ...btn, index })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottom-action-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 -6rpx 24rpx rgba(0, 0, 0, 0.08);
|
||||
padding: 20rpx 24rpx calc(20rpx + env(safe-area-inset-bottom));
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background: #ffffff;
|
||||
border: 2rpx solid #dcdfe6;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-default {
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue