93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
<template>
|
||
<view class="layout">
|
||
<view class="navbar">
|
||
<!-- 占位用的，用于展示手机状态栏 -->
|
||
<view class="statusBar" :style="{height:getStatusBarHeight() + 'px'}"></view>
|
||
|
||
<!-- 使titleBar的高度等于胶囊的高度就可以解决标题和胶囊不在同一直线的问题 -->
|
||
<view class="titleBar" :style="{height:getTitleBarHeight() + 'px'}">
|
||
<view class="title">{{title}}</view>
|
||
<navigator url="/pages/search/search" class="search">
|
||
<uni-icons class="icon" type="search" size="18" color="#888"></uni-icons>
|
||
<text class="text">搜索</text>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 占位符,解决图片遮挡问题 -->
|
||
<view class="fill" :style="{height:getNavBarHeight() + 'px'}">
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
import {
|
||
getStatusBarHeight,
|
||
getTitleBarHeight,
|
||
getNavBarHeight
|
||
} from "@/utils/system.js"
|
||
|
||
//接收一个对象
|
||
defineProps({
|
||
title:{
|
||
type:String,
|
||
default:"壁纸"
|
||
}
|
||
})
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.layout{
|
||
.navbar{
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
// 防止被遮挡
|
||
z-index: 10;
|
||
// background: ;
|
||
background:
|
||
// 这个百分比控制的是颜色占的广度，越小表示从页面的百分之几开始融合
|
||
//transparent 透明 = rgba(0,0,0,0)
|
||
linear-gradient(to bottom,transparent 0%,#fff 400rpx),
|
||
linear-gradient(to right,#beecd8 20%,#F4E2D8);
|
||
|
||
// .statusBar{border: 1px solid red;}
|
||
.titleBar{
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
align-items: center;
|
||
.title{
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: $text-font-color-1;
|
||
}
|
||
.search{
|
||
width:200rpx;
|
||
height: 50rpx;
|
||
border-radius: 60rpx;
|
||
background: rgba(255,255,255,0.4);
|
||
margin-left: 30rpx;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.icon{
|
||
margin-left: 5rpx;
|
||
}
|
||
.text{
|
||
padding-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
</style> |