67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<!-- 顶部导航栏 - 单元格 -->
|
||
<template>
|
||
<view class="ss-flex ss-col-center">
|
||
<!-- 类型一： 文字 -->
|
||
<view
|
||
v-if="data.type === 'text'"
|
||
class="nav-title inline"
|
||
:style="[{ color: data.textColor, width: width }]"
|
||
>
|
||
{{ data.text }}
|
||
</view>
|
||
<!-- 类型二： 图片 -->
|
||
<view
|
||
v-if="data.type === 'image'"
|
||
:style="[{ width: width }]"
|
||
class="menu-icon-wrap ss-flex ss-row-center ss-col-center"
|
||
@tap="sheep.$router.go(data.url)"
|
||
>
|
||
<image class="nav-image" :src="sheep.$url.cdn(data.imgUrl)" mode="aspectFit"></image>
|
||
</view>
|
||
<!-- 类型三： 搜索框 -->
|
||
<view class="ss-flex-1" v-if="data.type === 'search'" :style="[{ width: width }]">
|
||
<s-search-block
|
||
:placeholder="data.placeholder || '搜索关键字'"
|
||
:radius="data.borderRadius"
|
||
elBackground="#fff"
|
||
:height="height"
|
||
:width="width"
|
||
@click="sheep.$router.go('/pages/index/search')"
|
||
></s-search-block>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import sheep from '@/sheep';
|
||
import { computed } from 'vue';
|
||
|
||
// 接收参数
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
width: {
|
||
type: String,
|
||
default: '1px',
|
||
},
|
||
});
|
||
|
||
const height = computed(() => sheep.$platform.capsule.height);
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.nav-title {
|
||
font-size: 36rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
|
||
.menu-icon-wrap {
|
||
.nav-image {
|
||
height: 24px;
|
||
}
|
||
}
|
||
</style>
|