304 lines
6.9 KiB
Vue
304 lines
6.9 KiB
Vue
<template>
|
|
<view>
|
|
<!-- #ifdef H5-->
|
|
<view class="navbar h5">
|
|
<view class="navbar-left" @click="toggleSearchMode">
|
|
<view v-if="!isSearching" class="logo">
|
|
<image src="../../static/750.png" mode="widthFix" style="width: 260rpx;"></image>
|
|
</view>
|
|
<view v-else class="icon"></view>
|
|
</view>
|
|
<view class="navbar-center" v-if="isSearching">
|
|
<input class="search-input" type="text" v-model="searchQuery" placeholder="请输入设备名称"
|
|
confirm-type="search" @confirm="sendMessage" />
|
|
<uni-icons v-if="searchQuery" class="icon-right" type="clear" size="22" color="#007aff"
|
|
@click="clearinput()"></uni-icons>
|
|
</view>
|
|
<view class="navbar-right">
|
|
<view v-if="!isSearching" class="icon search-icon" @click="toggleSearchMode"></view>
|
|
<view v-else class="search-btn" @click="sendMessage">搜索</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS || MP-WEIXIN-->
|
|
<view class="navbar weixin">
|
|
<view class="navbar-left" @click="toggleSearchMode">
|
|
<view v-if="!isSearching" class="logo">
|
|
<image src="../../static/750.png" mode="widthFix" style="width: 260rpx;"></image>
|
|
</view>
|
|
<view v-else class="icon"></view>
|
|
</view>
|
|
<view class="navbar-center" v-if="isSearching">
|
|
<input class="search-input-weixin" type="text" v-model="searchQuery" placeholder="请输入设备名称"
|
|
confirm-type="search" @confirm="sendMessage" />
|
|
<uni-icons v-if="searchQuery" class="icon-right" type="clear" size="22" color="#007aff"
|
|
@click="clearinput()"></uni-icons>
|
|
</view>
|
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="navbar-right">
|
|
<view v-if="!isSearching" class="icon search-icon" @click="toggleSearchMode"></view>
|
|
<view v-else class="search-btn" @click="sendMessage">搜索</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN-->
|
|
<view class="navbar-right-weixin">
|
|
<view v-if="!isSearching" class="icon search-icon" @click="toggleSearchMode"></view>
|
|
<view v-else class="search-btn" @click="sendMessage">搜索</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Navbar",
|
|
data() {
|
|
return {
|
|
statusBarHeight: 20, // 默认值，等会会动态获取
|
|
isSearching: false,
|
|
searchQuery: ""
|
|
};
|
|
},
|
|
mounted() {
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
this.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
|
|
},
|
|
methods: {
|
|
clearinput() {
|
|
this.searchQuery = ''
|
|
this.$emit('messageSent', this.searchQuery); // 发送搜索事件
|
|
},
|
|
toggleSearchMode() {
|
|
this.isSearching = !this.isSearching;
|
|
},
|
|
sendMessage() {
|
|
console.log("搜索内容:", this.searchQuery);
|
|
this.$emit('messageSent', this.searchQuery); // 发送搜索事件
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20%);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scaleUp {
|
|
from {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
to {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes hoverAnimation {
|
|
from {
|
|
transform: scale(1);
|
|
}
|
|
|
|
to {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
.h5 {
|
|
padding: 10rpx 15rpx;
|
|
}
|
|
|
|
.weixin {
|
|
padding-left: 15rpx;
|
|
padding-right: 15rpx;
|
|
padding-top: calc(15px + var(--status-bar-height));
|
|
padding-bottom: 15rpx;
|
|
|
|
}
|
|
|
|
.navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: rgba(0, 122, 255, 0.8);
|
|
backdrop-filter: blur(25rpx) saturate(180%);
|
|
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.25);
|
|
border: 1rpx solid rgba(255, 255, 255, 0.4);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 44px;
|
|
z-index: 999;
|
|
|
|
border-radius: 0 0 30rpx 30rpx;
|
|
animation: fadeIn 0.5s ease;
|
|
|
|
.navbar-left {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.logo {
|
|
animation: fadeIn 0.8s ease;
|
|
}
|
|
|
|
.icon {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
background-image: url('/static/750.png');
|
|
background-size: cover;
|
|
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
|
|
animation: scaleUp 0.5s ease;
|
|
transition: transform 0.2s ease;
|
|
|
|
&:hover {
|
|
animation: hoverAnimation 0.3s forwards;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.navbar-center {
|
|
position: relative;
|
|
flex: 4;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
animation: fadeIn 0.8s ease;
|
|
|
|
.search-input {
|
|
padding-left: 2rem;
|
|
margin-left: -40rpx;
|
|
/* 向左移动 input */
|
|
width: 97%;
|
|
padding: 12rpx 20rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.5);
|
|
border-radius: 50rpx;
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(12rpx);
|
|
height: 38rpx;
|
|
color: #535353;
|
|
font-size: 28rpx;
|
|
box-shadow: inset 0 2rpx 12rpx rgba(0, 122, 255, 0.3);
|
|
animation: scaleUp 0.5s ease;
|
|
}
|
|
|
|
.icon-right {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0.75rem;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.search-input-weixin {
|
|
margin-left: -20rpx;
|
|
/* 向左移动 input */
|
|
width: 87%;
|
|
padding: 12rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.5);
|
|
border-radius: 50rpx;
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(12rpx);
|
|
height: 35rpx;
|
|
color: #535353;
|
|
font-size: 28rpx;
|
|
box-shadow: inset 0 2rpx 12rpx rgba(0, 122, 255, 0.3);
|
|
animation: scaleUp 0.5s ease;
|
|
}
|
|
|
|
}
|
|
|
|
.navbar-right-weixin {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding-right: 180rpx;
|
|
/* 使用安全区域避免关闭按钮重叠 */
|
|
|
|
.search-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-image: url('/static/login/search.png');
|
|
background-size: cover;
|
|
filter: drop-shadow(0 3rpx 6rpx rgba(225, 225, 225, 0.3));
|
|
transition: transform 0.2s ease;
|
|
|
|
&:hover {
|
|
animation: hoverAnimation 0.3s forwards;
|
|
}
|
|
}
|
|
|
|
.search-btn {
|
|
padding: 10rpx 15rpx;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
color: #0069d9;
|
|
border-radius: 50rpx;
|
|
font-size: 30rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(8rpx);
|
|
transition: transform 0.2s ease;
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.navbar-right {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
|
|
.search-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
background-image: url('/static/login/search.png');
|
|
background-size: cover;
|
|
filter: drop-shadow(0 3rpx 6rpx rgba(225, 225, 225, 0.3));
|
|
transition: transform 0.2s ease;
|
|
|
|
&:hover {
|
|
animation: hoverAnimation 0.3s forwards;
|
|
}
|
|
}
|
|
|
|
.search-btn {
|
|
padding: 10rpx 25rpx;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
color: #0069d9;
|
|
border-radius: 50rpx;
|
|
font-size: 30rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(8rpx);
|
|
transition: transform 0.2s ease;
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
</style> |