313 lines
7.6 KiB
Vue
313 lines
7.6 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/common/fastbee1_white.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="$tt('product.inputDeviceName')" 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">{{$tt('common.search')}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<!-- #ifdef MP-WEIXIN-->
|
||
|
|
<view class="navbar weixin">
|
||
|
|
<view class="navbar-left" @click="toggleSearchMode">
|
||
|
|
<view v-if="!isSearching" class="logo">
|
||
|
|
<image src="@/static/common/fastbee1_white.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="$tt('product.inputDeviceName')" 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-weixin">
|
||
|
|
<view v-if="!isSearching" class="icon search-icon" @click="toggleSearchMode"></view>
|
||
|
|
<view v-else class="search-btn" @click="sendMessage">{{$tt('common.search')}}</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<!-- #ifdef APP-PLUS -->
|
||
|
|
<view class="navbar app">
|
||
|
|
<view class="navbar-left" @click="toggleSearchMode">
|
||
|
|
<view v-if="!isSearching" class="logo">
|
||
|
|
<image src="@/static/common/fastbee1_white.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="$tt('product.inputDeviceName')" 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">{{$tt('common.search')}}</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: 20rpx 15rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weixin {
|
||
|
|
padding-left: 15rpx;
|
||
|
|
padding-right: 15rpx;
|
||
|
|
padding-top: calc(15px + var(--status-bar-height));
|
||
|
|
padding-bottom: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app {
|
||
|
|
padding-left: 15rpx;
|
||
|
|
padding-right: 15rpx;
|
||
|
|
padding-top: var(--status-bar-height);
|
||
|
|
padding-bottom: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
position: fixed;
|
||
|
|
top: 60rpx;
|
||
|
|
left: 0;
|
||
|
|
right: 20rpx;
|
||
|
|
z-index: 999;
|
||
|
|
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;
|
||
|
|
margin-left: 6px;
|
||
|
|
background-image: url('/static/common/logo_white.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: -26rpx;
|
||
|
|
/* 向左移动 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: 97%;
|
||
|
|
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: 20rpx;
|
||
|
|
/* 使用安全区域避免关闭按钮重叠 */
|
||
|
|
|
||
|
|
.search-icon {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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: $uni-color-primary;
|
||
|
|
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>
|