导航栏修正
This commit is contained in:
WindowBird
parent
186103e8cf
commit
9593e007e6
9
common/style/base-style.scss
Normal file
9
common/style/base-style.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
$brand-theme-color:#28B389; //品牌主体红色
|
||||
|
||||
$border-color:#e0e0e0; //边框颜色
|
||||
$border-color-light:#efefef; //边框亮色
|
||||
|
||||
$text-font-color-1:#000; //文字主色
|
||||
$text-font-color-2:#676767; //副标题颜色
|
||||
$text-font-color-3:#a7a7a7; //浅色
|
||||
$text-font-color-4:#e4e4e4; //更浅
|
||||
19
common/style/common-style.scss
Normal file
19
common/style/common-style.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
view,swiper,swiper-item{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pageBg{
|
||||
background:
|
||||
linear-gradient(to bottom,transparent,#fff 400rpx),
|
||||
linear-gradient(to right,#beecd8 20%,#F4E2D8);
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.loadingLayout{
|
||||
padding:30rpx 0;
|
||||
}
|
||||
|
||||
.safe-area-inset-bottom{
|
||||
height: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
85
components/custom-nav-bar/custom-nav-bar.vue
Normal file
85
components/custom-nav-bar/custom-nav-bar.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<view class="layout">
|
||||
<view class="navbar">
|
||||
<view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
|
||||
<view
|
||||
:style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }"
|
||||
class="titleBar"
|
||||
>
|
||||
<view class="title">{{ title }}</view>
|
||||
<navigator class="search" url="/pages/search/search">
|
||||
<uni-icons class="icon" color="#888" size="18" type="search"></uni-icons>
|
||||
<text class="text">></text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
getStatusBarHeight,
|
||||
getTitleBarHeight,
|
||||
getNavBarHeight,
|
||||
getLeftIconLeft,
|
||||
} from '@/utils/system.js'
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '壁纸',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout {
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
background: #ffddca;
|
||||
|
||||
.statusBar {
|
||||
}
|
||||
|
||||
.titleBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #3d3d3d;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 220rpx;
|
||||
height: 50rpx;
|
||||
margin-left: 10rpx;
|
||||
color: #3d3d3d;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fill {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<template>
|
||||
<view class="header">
|
||||
<view class="location-info" @click="onLocationClick">
|
||||
<image class="location" :src="locationIcon"></image>
|
||||
<text class="company-name">{{ companyName }}</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HomeHeader',
|
||||
props: {
|
||||
companyName: {
|
||||
type: String,
|
||||
default: '福鼎创特物联科技有限公司',
|
||||
},
|
||||
locationIcon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onLocationClick() {
|
||||
this.$emit('location-click')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
padding: 106rpx 30rpx 20rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #ffddca;
|
||||
z-index: 999;
|
||||
|
||||
.location-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
flex: 1;
|
||||
|
||||
.location {
|
||||
width: 27rpx;
|
||||
height: 31rpx;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
color: #3d3d3d;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -64,5 +64,11 @@
|
|||
"requiredPrivateInfos": [
|
||||
"getLocation"
|
||||
]
|
||||
},
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^custom-nav-bar": "@/components/custom-nav-bar/custom-nav-bar.vue"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
<template>
|
||||
<view class="home-container">
|
||||
<!-- 头部信息 -->
|
||||
<home-header
|
||||
:company-name="companyName"
|
||||
:location-icon="commonEnum.LOCATION"
|
||||
@location-click="onLocationClick"
|
||||
/>
|
||||
|
||||
<custom-nav-bar title="福鼎创特物联科技有限公司"></custom-nav-bar>
|
||||
|
||||
<!-- 公告栏 -->
|
||||
<announcement-bar
|
||||
|
|
@ -39,14 +36,12 @@
|
|||
|
||||
<script>
|
||||
import commonEnum from '../../enum/commonEnum'
|
||||
import HomeHeader from '../../components/home-header/home-header.vue'
|
||||
import AnnouncementBar from '../../components/announcement-bar/announcement-bar.vue'
|
||||
import BannerSwiper from '../../components/banner-swiper/banner-swiper.vue'
|
||||
import EquipmentList from '../../components/equipment-list/equipment-list.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HomeHeader,
|
||||
AnnouncementBar,
|
||||
BannerSwiper,
|
||||
EquipmentList,
|
||||
|
|
@ -168,7 +163,6 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.home-container {
|
||||
background: linear-gradient(to bottom, #ffddca 0px, #ffddca 450rpx, #f5f5f5 450rpx, #f5f5f5 100%);
|
||||
min-height: 100vh;
|
||||
padding-bottom: 120rpx; /* 为底部导航留出空间 */
|
||||
max-width: 750rpx;
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
3
uni.scss
3
uni.scss
|
|
@ -12,6 +12,9 @@
|
|||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 引入项目自定义样式变量 */
|
||||
@import '@/common/style/base-style.scss';
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
|
|
|
|||
27
utils/system.js
Normal file
27
utils/system.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
const SYSTEM_INFO = uni.getSystemInfoSync()
|
||||
|
||||
export const getStatusBarHeight = () => SYSTEM_INFO.statusBarHeight || 15
|
||||
|
||||
export const getTitleBarHeight = () => {
|
||||
if (uni.getMenuButtonBoundingClientRect) {
|
||||
let { top, height } = uni.getMenuButtonBoundingClientRect()
|
||||
return height + (top - getStatusBarHeight()) * 2
|
||||
} else {
|
||||
return 40
|
||||
}
|
||||
}
|
||||
|
||||
export const getNavBarHeight = () => getStatusBarHeight() + getTitleBarHeight()
|
||||
|
||||
export const getLeftIconLeft = () => {
|
||||
// #ifdef MP-TOUTIAO
|
||||
let {
|
||||
leftIcon: { left, width },
|
||||
} = tt.getCustomButtonBoundingClientRect()
|
||||
return left + parseInt(width)
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-TOUTIAO
|
||||
return 0
|
||||
// #endif
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user