132 lines
3.3 KiB
Plaintext
132 lines
3.3 KiB
Plaintext
<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">济南远阳数码</view>
|
||
<view class="description">专注于电子组件研发20年，提供优质产品与服务！</view>
|
||
</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,
|
||
// 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> |