移动端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

69 lines
1.3 KiB

<template>
<view class="container">
<view class="fit-content"></view>
<view class="operation" v-if="isCustom">
<slot></slot>
</view>
<view v-else>
<view class="operation" v-if="isTab">
<text class="title">{{ title }}</text>
</view>
<view class="operation wd-flex wd-flex-row wd-items-center" style="gap: 10px" v-else @tap="goback">
<view class="icon-box">
<u-icon name="arrow-left" size="12"></u-icon>
</view>
<text class="title wd-text-16 wd-font-800">{{ title }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
name: 's-header',
data() {
return {}
},
props: {
title: String,
isTab: {
type: Boolean,
default: false
},
isCustom: {
type: Boolean,
default: false
}
},
methods: {
goback() {
this.$emit('goback')
}
}
}
</script>
<style lang="scss" scoped>
.container {
background-color: #fff;
box-shadow: 0 1px 2px 1px $cs-shadow-color;
z-index: 1;
margin-bottom: 2px;
.fit-content {
height: 6vh;
}
.operation {
padding: 10px;
.title {
color: #000;
font-size: 18px;
font-weight: bold;
}
.icon-box {
padding: 5px;
border-radius: 50%;
box-shadow: 0 0 4px 2px $cs-shadow-color;
}
}
}
</style>