feat: ✨ 自定义导航栏
This commit is contained in:
parent
9c1f60b4cd
commit
889c5048ee
71
src/pages/index/components/CustomNavbar.vue
Normal file
71
src/pages/index/components/CustomNavbar.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
// 获取屏幕边界到安全区域距离
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="navbar" :style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }">
|
||||
<!-- logo文字 -->
|
||||
<view class="logo">
|
||||
<image class="logo-image" src="@/static/images/logo.png"></image>
|
||||
<text class="logo-text">新鲜 · 亲民 · 快捷</text>
|
||||
</view>
|
||||
<!-- 搜索条 -->
|
||||
<view class="search">
|
||||
<text class="icon-search">搜索商品</text>
|
||||
<text class="icon-scan"></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
/* 自定义导航条 */
|
||||
.navbar {
|
||||
background-image: url(@/static/images/navigator_bg.png);
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 20px;
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64rpx;
|
||||
padding-left: 30rpx;
|
||||
.logo-image {
|
||||
width: 166rpx;
|
||||
height: 39rpx;
|
||||
}
|
||||
.logo-text {
|
||||
flex: 1;
|
||||
line-height: 28rpx;
|
||||
color: #fff;
|
||||
margin: 2rpx 0 0 20rpx;
|
||||
padding-left: 20rpx;
|
||||
border-left: 1rpx solid #fff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10rpx 0 26rpx;
|
||||
height: 64rpx;
|
||||
margin: 16rpx 20rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
border-radius: 32rpx;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.icon-search {
|
||||
&::before {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.icon-scan {
|
||||
font-size: 30rpx;
|
||||
padding: 15rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,41 +1,14 @@
|
||||
<template>
|
||||
<CustomNavbar />
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/logo.png" />
|
||||
<view class="text-area">
|
||||
<text class="title">{{ title }}</text>
|
||||
</view>
|
||||
{{ title }}
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import CustomNavbar from './components/CustomNavbar.vue'
|
||||
import { ref } from 'vue'
|
||||
const title = ref('Hello')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
<style></style>
|
||||
|
@ -1,4 +1,9 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="status_bar">
|
||||
<view class="top_view"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="content">
|
||||
<view class="info"> 会员信息: {{ memberStore.profile }} </view>
|
||||
<button @tap="handleLogin">登录</button>
|
||||
@ -44,4 +49,18 @@ const handleTestHttp = async () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
<style lang="scss">
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.top_view {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background-color: #f8f8f8;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
x
Reference in New Issue
Block a user