<template> <view class="flex_searchbar"> <i class="logo"></i> <view class="search_view flex"> <icon type="search" class="search_icon" size="16" @click="search"></icon> <input type="text" @click="search" class="search_input" v-model="keyword" placeholder="请输入商品名称"> </view> <text class="login_btn" @click="jumpPhpPage('app=member&act=login')" v-if="!isLogin">登录</text> <i v-else class="eosfont person_icon" @click="jumpPhpPage('app=member')"></i> </view> </template> <script> import { php } from '../common/host.js'; export default { props: { isLogin: { type: Number, default: 0 } }, data() { return { keyword: '' } }, methods: { jumpPhpPage(url) { let link = url ? `${php}${url}` : php; window.location.href = link; }, search() { uni.navigateTo({ url: `/pages/searchhistory/searchhistory?keyword=${this.keyword}` }); } }, components: { } } </script> <style lang="less" scoped> .person_icon { font-size: 48rpx; line-height: 60rpx; } .flex_searchbar { display: flex; justify-content: space-between; padding: 20rpx 24rpx; position: fixed; width: 100%; top: 0; left: 0; box-sizing: border-box; z-index: 100; background: #fff; .flex { display: flex; } .logo { width: 192rpx; height: 60rpx; background: url(../static/index/2931581575297_.pic.jpg) no-repeat; background-size: 100% 100%; } .search_view { width: 380rpx; height: 60rpx; background: #F5F5F5; border-radius: 30rpx; } .search_icon { display: flex; justify-content: center; align-items: center; width: 56rpx; height: 56rpx; } .search_input { height: 60rpx; font-size: 28rpx; } .login_btn { width: 92rpx; height: 60rpx; line-height: 60rpx; background: #FFCD00; border-radius: 16rpx; color: #212121; font-size: 28rpx; text-align: center; } } </style>