139 lines
3.3 KiB
Vue
139 lines
3.3 KiB
Vue
<template>
|
|
<view class="navbar">
|
|
<view class="navbar-fixed">
|
|
<!-- 状态栏占位 -->
|
|
<view :style="{height: props.statusBarHeight+'px'}"></view>
|
|
<!-- 导航栏内容 -->
|
|
<view class="navbar-content" :style="{height:props.navbarHeight+'px',width:props.windowWidth+'px'}">
|
|
<view class="header">
|
|
<view class="company-name">{{title}}</view>
|
|
<nut-animate type="flicker" :loop="true">
|
|
<view class="description">{{desc}}</view>
|
|
</nut-animate>
|
|
</view>
|
|
</view>
|
|
<!-- <nut-searchbar clearable v-model="search_val" background="transparent" input-background="#fff"
|
|
@search="onSearch" @clear="onClear">
|
|
<template #rightout>
|
|
<nut-icon @click="onScan" name="scan2" custom-color="#ffffff" />
|
|
</template>
|
|
</nut-searchbar> -->
|
|
</view>
|
|
<!-- 占位状态栏+导航栏的高度,使下面的内容不会被遮挡 -->
|
|
<view :style="{height:(statusBarHeight + navbarHeight+ navbarSearchBoxHeight)+'px'}"></view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
defineProps
|
|
} from 'vue';
|
|
// import {
|
|
// fetchGoodsList
|
|
// } from '../../api/goods';
|
|
import {
|
|
navigateTo
|
|
} from '@/utils/helper';
|
|
|
|
// const navbarSearchBoxHeight = 50
|
|
const navbarSearchBoxHeight = 0
|
|
const props = defineProps({
|
|
statusBarHeight: Number,
|
|
windowWidth: Number,
|
|
navbarHeight: Number,
|
|
title:String,
|
|
desc:String,
|
|
// onIndexPageSearch:Function,
|
|
// onIndexPageClear:Function
|
|
})
|
|
|
|
|
|
|
|
// const search_val = ref('')
|
|
// const onSearch = () => {
|
|
// if(props.onIndexPageSearch) {
|
|
// props.onIndexPageSearch(search_val.value)
|
|
// }
|
|
// }
|
|
// const onClear = () => {
|
|
// if(props.onIndexPageClear) {
|
|
// props.onIndexPageClear()
|
|
// }
|
|
|
|
// }
|
|
// const onScan =() => {
|
|
// uni.scanCode({
|
|
// onlyFromCamera:true,
|
|
// success: (res) => {
|
|
// fetchGoodsList({
|
|
// search_params: {goods_no:res.result}
|
|
// }).then(res => {
|
|
// if (res.list.total >= 1) {
|
|
// navigateTo("/pages/mall/item/index?id=" + res.list?.data[0]?.goods_id)
|
|
// } else {
|
|
// uni.showToast({
|
|
// icon:'none',
|
|
// title:'暂无该商品'
|
|
// })
|
|
// }
|
|
// })
|
|
// },
|
|
// fail: () => {
|
|
// uni.showToast({
|
|
// icon:'none',
|
|
// title:'扫码失败'
|
|
// })
|
|
// }
|
|
// })
|
|
// }
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.navbar {}
|
|
|
|
.navbar-fixed {
|
|
/* // 固定定位 */
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
width: 100%;
|
|
/* background: linear-gradient(90deg, #b79dff, #f2a4ff); */
|
|
/* 渐变背景 */
|
|
background-image: -webkit-linear-gradient(60deg, rgba(233, 100, 67, 1), rgba(198, 77, 255, 1));
|
|
background-image: linear-gradient(30deg, rgba(233, 100, 67, 1), rgba(198, 77, 255, 1));
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% auto;
|
|
opacity: 1;
|
|
/* 确保背景不透明 */
|
|
}
|
|
|
|
.navbar-content {
|
|
display: flex;
|
|
flex-flow: column;
|
|
|
|
/* // 水平居中 */
|
|
justify-content: center;
|
|
/* // 垂直居中 */
|
|
/* // align-items: center; */
|
|
padding: 0 30rpx;
|
|
/* // 盒内显示 (父元素和子元素宽度都是100%,但是父元素加了左右内填充,会导致子元素不在父元素内) */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.company-name {
|
|
font-family: Akrobat ExtraBold !important;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
font-weight: 700
|
|
}
|
|
|
|
.description {
|
|
font-family: Akrobat ExtraBold !important;
|
|
color: #fff;
|
|
font-size: 16rpx
|
|
}
|
|
</style> |