29 lines
1.2 KiB
Vue
29 lines
1.2 KiB
Vue
<template>
|
|
<view class="popup-header">
|
|
<view class="popup-header-spacer" aria-hidden="true"></view>
|
|
<text class="popup-header-title" :class="{ 'popup-header-title-danger': tone === 'danger' }">{{ title }}</text>
|
|
<button class="popup-header-close" :aria-label="`关闭${title}`" @tap="$emit('close')">
|
|
<uni-icons type="closeempty" color="#52657c" size="24" />
|
|
</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
emits: ['close'],
|
|
props: {
|
|
title: { type: String, required: true },
|
|
tone: { type: String, default: 'default' }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.popup-header { display: grid; min-height: 48px; align-items: center; grid-template-columns: 48px minmax(0, 1fr) 48px; }
|
|
.popup-header-title { display: block; color: #1f2937; font-size: 17px; font-weight: 700; line-height: 24px; text-align: center; }
|
|
.popup-header-title-danger { color: #b42318; }
|
|
.popup-header-close { display: flex; width: 48px; height: 48px; margin: 0; padding: 0; align-items: center; justify-content: center; border: 0; border-radius: 8px; line-height: 48px; background: transparent; }
|
|
.popup-header-close::after { border: 0; }
|
|
.popup-header-close:active { background: #eef2f6; }
|
|
</style>
|