Zlpt_Portal/src/layout/header.vue

<script setup lang="ts">
import { debounce } from 'lodash'
import $bus from '@/utils/bus'
import { mainStore } from 'store/main'
import { useStore } from 'store/user'
import { cartStore } from 'store/cart'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    getHotSearchListApi,
    getBookCarDetailsApi,
    getCompanyListApi,
    getHotSearch,
} from 'http/api/home/index'
import userClass from '../hooks/userClass'
import {
    getUserInfo, //用户信息
    editMessageApi, //修改
    resetPwd, // 重置密码
    editPhone, // 修改手机号
} from 'http/api/personalCenter'
const { getCompanyList } = userClass()
import imgSrc from '@/assets/img/logo.png'
import { el } from 'element-plus/es/locale'
const store: any = mainStore()
const searchTypeName = ref('装备')
const userStore = useStore()
const cart = cartStore()
const isType: any = localStorage.getItem('rolesType')
userStore.editMenuList(1)
const route = useRoute()
const router = useRouter()
const isRolesSelect = ref<boolean>(false)
const rolesName = ref<any>('1')
rolesName.value = localStorage.getItem('rolesType')
const isAdmin = ref(false)
const roles = store.userInfo.roles
const activeLoginCompanyName = ref('')
const searchCheckVisible = ref(false)
import { storeToRefs } from 'pinia'
const { userInfo, token }: any = storeToRefs(store)
const tokenNew = localStorage.getItem('tokenNew')
if (roles?.length > 0) {
    isAdmin.value = roles.some((e: any) => e.roleKey == 'admin')
}

// 是否显示退出登录
const isShowLogout = computed(() => {
    return store.token
})

watch(
    userInfo,
    (newValue, oldCount) => {
        if (newValue.companyId) {
            getCompanyListApi()
                .then((res: any) => {
                    res.data.filter((e: any) => {
                        if (e.companyId == newValue.companyId) {
                            activeLoginCompanyName.value = e.companyName
                        }
                    })
                })
                .catch((err: any) => {
                    console.log('🚀 ~ getCompanyListApi ~ err:', err)
                })
        }
    },
    { immediate: true },
)
// watch(token, (newValue, oldCount) => {
//     if (newValue) {
//         getUserListData()
//         getBookCarDetailsData()
//     }
// })
// 监听 tokenNew 有值时请求用户信息

const setActiveCompanyName = () => {
    // const companyList = userStore.companyList
    // const activeCompany: any = companyList.filter(
    //     (e: any) => e.companyId == store.userInfo.companyId,
    // )
    // activeLoginCompanyName.value = activeCompany[0]?.companyName
    // localStorage.setItem('currentCompanyName', activeLoginCompanyName.value)
}

// if (userStore.companyList.length === 0) {
// } else {
//     setActiveCompanyName()
// }

const placeholderText = ref('搜索设备关键词')

//忘记密码
// 忘记密码
const handlerForget = () => {
        window.location.href = 'http://sgwpdm.ah.sgcc.com.cn/iws/cas/pre-forget-password'
}

// 退出登录
const handlerLogout = () => {
    ElMessageBox.confirm('是否确定退出登录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            store.cleanUpToken('')
            store.clearUserInfo('')
            localStorage.clear()
            sessionStorage.clear()
            ElMessage({
                type: 'success',
                message: '已退出登录',
            })
            if (import.meta.env.VITE_API_URL == '/proxyApi') {
                router.push('/login') // 公司-登录
            } else {
                // 宏源-登录
                setTimeout(() => {
                    window.location.replace('http://sgwpdm.ah.sgcc.com.cn/iws/mall-view/')
                }, 500)
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

// 搜索查询绑定值
const keywordIptValue = ref('')

// 输入框 dom
const inputRef: any = ref(null)

// 输入框下方历史搜索记录
// const searchHistoryList = computed(() => {
//     return store.searchHistoryList.slice(0, 1)
// })

const searchHistoryList = ref<any>(['挖掘机', '塔式起重机', '挖掘机', '吊机'])

// 获取热词
const getHotSearchListData = async () => {
    const { data: res }: any = await getHotSearchListApi()

    searchHistoryList.value = res
    console.log(res, '热词')
}

if (tokenNew) {
    getHotSearchListData()
}

// 搜索按钮
const searchKeywordBtn = () => {
    /* 去除空格 */
    keywordIptValue.value = keywordIptValue.value.replace(/\s*/g, '')

    store.addHistoryRecord(keywordIptValue.value)

    if (route.path.includes('equipList')) {
        if (searchTypeName.value === '装备') {
            $bus.emit('search', keywordIptValue.value)
        } else {
            router.push({
                name: 'parity',
                query: { keyWord: keywordIptValue.value },
            })
        }
    }
    if (route.path.includes('parity')) {
        if (searchTypeName.value == '需求') {
            $bus.emit('search', keywordIptValue.value)
        } else {
            router.push({
                name: 'equipList',
                query: { keyWord: keywordIptValue.value },
            })
        }
        $bus.emit('search', keywordIptValue.value)
    }
    if (route.path.includes('home')) {
        if (searchTypeName.value === '装备') {
            router.push({
                name: 'equipList',
                query: { keyWord: keywordIptValue.value },
            })
        }
        if (searchTypeName.value === '需求') {
            router.push({
                name: 'parity',
                query: { keyWord: keywordIptValue.value },
            })
        }
    }
    if (route.path.includes('enterpriseZone')) {
        if (searchTypeName.value == '装备') {
            router.push({
                name: 'equipList',
                query: { keyWord: keywordIptValue.value },
            })
        }
        if (searchTypeName.value == '需求') {
            router.push({
                name: 'parity',
                query: { keyWord: keywordIptValue.value },
            })
        }
    }

    if (route.path.includes('equipDetail')) {
        if (searchTypeName.value == '装备') {
            router.push({
                name: 'equipList',
                query: { keyWord: keywordIptValue.value },
            })
        }
        if (searchTypeName.value == '需求') {
            router.push({
                name: 'parity',
                query: { keyWord: keywordIptValue.value },
            })
        }
    }
}

// 点击下方搜索记录时
const handleHistory = (hisValue: any) => {
    keywordIptValue.value = hisValue
    searchKeywordBtn()
    // inputRef.value.focus()
}
//页面刷新回显模糊搜索词
$bus.on('callBackText', (val) => {
    nextTick(() => {
        keywordIptValue.value = val
    })
})

// 角色切换按钮
const onRolesCheck = () => {
    if (isAdmin.value) return
    isRolesSelect.value = !isRolesSelect.value
}
// 选择角色
const onSelectRoles = (type: number) => {
    if (type === 1) {
        rolesName.value = '1'
        userStore.editMenuList(1)
        userStore.editUserMenuList(1)
        localStorage.setItem('rolesType', '1')
        userStore.editcurrentMenuItem('goodsManagement')
        window.location.reload()
    } else {
        rolesName.value = '2'
        userStore.editMenuList(2)
        userStore.editUserMenuList(2)
        localStorage.setItem('rolesType', '2')
        userStore.editcurrentMenuItem('sourcingNeed')
        window.location.reload()
    }
    isRolesSelect.value = false
}

const getBookCarDetailsData = async () => {
    const res: any = await getBookCarDetailsApi()
    console.log('🚀 ~ getBookCarDetailsData ~ res:', res)
    let amountNum = 0
    if (res.data && res.data.length > 0) {
        res.data.forEach((e: any) => {
            amountNum = e.devInfoVoList.length + amountNum
            console.log('🚀 ~ res.data.forEach ~ amountNum:', amountNum)
        })
    }
    cart.SET_CART_NUM(amountNum)
}
const cartNum = computed(() => {
    return cart.cartNum

    // let amountNum = 0
    // cardList.value.forEach((e: any) => {
    //     amountNum = e.devInfoVoList.length + amountNum
    // })
    // return amountNum
})

// 查看预约车
const onCarts = () => {
    console.log('跳转预约车页面')
    router.push({
        name: 'cart',
    })
}

const nickNameNew = computed(() => {
    return store.userInfo.nickName
})

const onJumpUser = () => {
    router.push({ name: 'my-user' })
    // const isType: any = localStorage.getItem('rolesType')
    // if (isType == 3) {
    //     const host = window.location.origin

    //     if (host.indexOf('sgwpdm.ah.sgcc.com.cn') > -1) {
    //         window.open(`${host}/iws/glweb/login?token@${store.token}@`)
    //     } else {
    //         // window.open(`${host}/glweb/?token@${store.token}@`)
    //         if (import.meta.env.VITE_ENV === 'production') {
    //             window.open(`${host}/glweb/?token@${store.token}@`)
    //         } else {
    //             window.open(`${host}/iws/glweb/?token@${store.token}@`)
    //         }
    //     }
    // } else {
    //     router.push({ name: 'my-user' })
    // }
}

const onClickLogin = () => {
    if (import.meta.env.VITE_API_URL == '/proxyApi') {
        router.push('/login') // 公司-重定向登录
    } else {
        // 宏源-重定向登录
        setTimeout(() => {
            window.location.replace(
                'http://sgwpdm.ah.sgcc.com.cn/iws/cas/login?appId=3874dcb953f184dc75450e33d6d6d4fa&service=http://sgwpdm.ah.sgcc.com.cn/iws/mall-view/',
            )
        }, 500)
    }
}

// 查看消息
const onJumpMessage = () => {
    router.push({
        name: 'message',
    })
}

const form: any = ref({
    userId: '',
    name: '',
    nickName: '',
    userName: '',
    password: '',
    phoneNumber: '',
    deptId: '',
})
const dialogUserInfoVisible = ref(false)
// const circleUrl = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')

const circleUrl = computed(() => {
    return store.userInfo.avatar
})
const onAccountManage = () => {
    dialogUserInfoVisible.value = true
}
const getUserListData = async () => {
    let res: any = await getUserInfo()
    form.value = res.data
    console.log('🚀 ~ getUserListData ~ form.value:', form.value)
}

const resetPassword = async () => {
    ElMessageBox.confirm('确定要重置密码吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const params = {
            password: form.value.password,
            userId: form.value.userId,
        }
        let res: any = await resetPwd(params)
        if (res.code === 200) {
            ElMessage.success('重置成功')
        }
    })
}

const resetPhone = async () => {
    ElMessageBox.confirm('确定要修改手机号吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const params = {
            userId: form.value.userId,
            phoneNumber: form.value.phoneNumber,
        }
        let res: any = await editPhone(params)
        if (res.code === 200) {
            ElMessage.success('修改成功')
        }
    })
}

const hotWordList = ref<any[]>([])
// 输入框值改变
const changeInputValue = debounce(async () => {
    // console.log('🚀 ~ changeInputValue ~ keywordIptValue.value:', keywordIptValue.value)
    if (!keywordIptValue.value) {
        hotWordList.value = []
        return
    }
    // 这里调用接口
    try {
        const params = {
            deviceName: keywordIptValue.value,
            maStatus: 2,
        }
        const res: any = await getHotSearch(params)
        // console.log('🚀 ~ changeInputValue ~ res:', res)
        // 取前5个
        const arr = res.data.rows.filter((item: any, index: number, self: any) => {
            return self.findIndex((e: any) => e.deviceName === item.deviceName) === index
        })
        if (res.data.rows && res.data.rows.length > 5) {
            // 过滤掉 deviceName 重复的数据
            hotWordList.value = arr.slice(0, 5)
        } else {
            hotWordList.value = arr
        }
        // console.log('🚀 ~ changeInputValue ~ hotWordList.value:', hotWordList.value)
    } catch (error) {
        console.log('🚀 ~ changeInputValue ~ error:', error)
        hotWordList.value = []
    }
}, 500)

// 点击热词
const onHotWord = (item: any) => {
    // console.log('🚀 ~ onHotWord ~ e:', item.deviceName)
    keywordIptValue.value = item.deviceName
}
// 数据大屏
const onJumpScreen = () => {
    router.push({
        name: 'big-screen',
    })
}

// 隐藏下拉展示
const hideDropdown = () => {
    console.log("xxxxxxxxxxxxxxxxxxx")
  hotWordList.value = []
  searchCheckVisible.value = false
}


const homeSearchRef = ref<HTMLElement | null>(null)
// 处理全局点击事件
const handleClickOutside = (event: MouseEvent) => {
  if (homeSearchRef.value && !homeSearchRef.value.contains(event.target as Node)) {
    hideDropdown()
  }
}

onMounted(() => {
    document.addEventListener('click', handleClickOutside)
    if (tokenNew) {
        getUserListData()
        getBookCarDetailsData()
    }
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<template>
    <!-- 头部个人信息  收藏夹  手机版等图标 -->
    <div class="header-container">
        <div class="header-user-info" style="display: none">
            <div class="header-box">
                <div class="header-item" v-if="isShowLogout">
                    <a class="user-name">
                        <span class="name"> {{ activeLoginCompanyName }} / {{ nickNameNew }} </span>
                        <el-icon style="margin-left: 4px">
                            <ArrowDown />
                        </el-icon>

                        <!-- <div class="user-center">
                            <div style="text-align: right">
                                <el-button size="small" @click="onAccountManage">
                                    账号管理
                                </el-button>
                            </div>
                            <div class="user-container">
                                <el-avatar :size="50" :src="circleUrl" />
                                <div class="info">
                                    <div>姓名：{{ form.nickName }}</div>
                                    <div>登录账号：{{ form.userName }}</div>
                                </div>
                            </div>
                        </div> -->
                    </a>
                    <div class="line"></div>
                </div>

                <div class="header-item" v-if="isShowLogout">
                    <a @click="onJumpMessage" v-if="!form.msgNum || form.msgNum == 0">消息</a>
                    <el-badge
                        v-else
                        :value="form.msgNum ? Number(form.msgNum) : ''"
                        :max="99"
                        @click="onJumpMessage"
                        style="margin: 0 10px"
                        >消息</el-badge
                    >
                    <div class="line"></div>
                </div>
                <div class="header-item" v-if="isShowLogout">
                    <a @click="onJumpUser">个人中心</a>
                    <div class="line"></div>
                </div>
                <!-- <div class="header-item" v-if="isShowLogout">
                    <a @click="onJumpScreen">数据大屏</a>
                    <div class="line"></div>
                </div> -->
                <div class="header-item">
                    <!-- <a v-if="!isShowLogout" class="a-border-none" @click="$router.push('/login')">
                        登录
                    </a> -->
                    <a v-if="!isShowLogout" @click="onClickLogin"> 登录 </a>
                    <!-- <span v-if="!isShowLogout" style="margin: 0 3px">/</span>
                    <a
                        v-if="!isShowLogout"
                        style="padding: 0 20px 0 0"
                        @click="$router.push('/register')"
                    >
                        注册
                    </a> -->
                    <a v-else @click="handlerLogout">退出登录</a>
					<a @click="handlerForget">忘记密码</a>
                </div>
            </div>
        </div>

        <!-- 中间logo 部分 -->
        <div class="logo-ipt-container">
            <div class="home-logo" @click="$router.push('/equipList')"></div>
<!--            <div class="home-logo"></div>-->
            <div class="home-search" ref="homeSearchRef">
                <input
                    :placeholder="searchTypeName === '装备' ? '搜索装备关键词' : '搜索需求关键词'"
                    type="text"
                    v-model.trim="keywordIptValue"
                    @keydown.enter="searchKeywordBtn"
                    ref="inputRef"
                    @focus="placeholderText = ''"
                    @blur="
                        placeholderText =
                            searchTypeName === '装备' ? '搜索装备关键词' : '搜索需求关键词'
                    "
                    @input="changeInputValue"
                />
                <button class="search-btn" @click="searchKeywordBtn">搜索</button>
                <div
                    class="left-check-box"
                    @click="
                        () => {
                            searchCheckVisible = !searchCheckVisible
                        }
                    "
                >
                    {{ searchTypeName }}
                    <el-icon style="margin-left: 5px"><ArrowDownBold /></el-icon>
                </div>

                <div class="check-container" v-if="searchCheckVisible">
                    <div
                        style="border-top-left-radius: 6px; border-top-right-radius: 6px"
                        @click="
                            () => {
                                searchTypeName = '装备'
                                searchCheckVisible = false
                            }
                        "
                    >
                        装备
                    </div>
                    <div
                        @click="
                            () => {
                                searchTypeName = '需求'
                                searchCheckVisible = false
                            }
                        "
                        style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px"
                    >
                        需求
                    </div>
                </div>
                <!-- 热词 -->
                <!-- <div class="hot-word">
                    <span
                        v-for="(item, index) in hotWordList"
                        :key="index"
                        @click="onHotWord(item)"
                        style="margin-right: 10px; cursor: pointer"
                    >
                        {{ item.deviceName }}
                    </span>
                </div> -->
                <!-- 竖着下拉展示包含相关值的数据 -->
                <div v-if="hotWordList.length > 0" class="dropdown-list">
                    <div
                        v-for="(item, index) in hotWordList"
                        :key="index"
                        class="dropdown-item"
                        @click="onHotWord(item); hideDropdown()"
                    >
                        {{ item.deviceName }}
                    </div>
                </div>
            </div>
            <div class="cart-container">
                <div class="cart-icon" @click="onCarts">
                    <el-badge :value="cartNum">
                        <svg class="icon" aria-hidden="true" style="width: 30px; height: 30px">
                            <use xlink:href="#icon-gouwuche2"></use>
                        </svg>
                    </el-badge>
                    <span style="margin-left: 15px"> 预约车 </span>
                </div>
            </div>
        </div>
    </div>
    <el-dialog
        width="50%"
        title="账户管理"
        destroy-on-close
        v-model="dialogUserInfoVisible"
        :close-on-click-modal="false"
        :before-close="
            () => {
                dialogUserInfoVisible = false
            }
        "
    >
        <el-form :model="form" label-width="120px">
            <el-form-item label="姓名">
                <el-input v-model="form.nickName" disabled></el-input>
            </el-form-item>
            <el-form-item label="登录账号">
                <el-input v-model="form.userName" disabled></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <div style="display: flex; width: 100%">
                    <el-input v-model="form.password" show-password></el-input>
                    <el-button type="text" icon="EditPen" @click="resetPassword">
                        修改密码
                    </el-button>
                </div>
            </el-form-item>
            <el-form-item label="联系电话">
                <div style="display: flex; width: 100%">
                    <el-input v-model="form.phoneNumber" style="flex: 1"></el-input>
                    <el-button type="text" icon="EditPen" @click="resetPhone">重新绑定</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<style lang="scss" scoped>
.header-container {
    .header-user-info {
        background-color: #f5f5f5;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 999;
    }

    /* 头部个人信息部分 */
    .header-box {
        width: 1552px;
        margin: 0 auto;
        height: 37px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .header-item {
        height: 37px;
        display: flex;
        align-items: center;
        color: #6d6d6d;
        cursor: pointer;

        .lease-name {
            background-color: #c9e7e5;
            color: #47c4ad;
            padding: 4px 6px;
            font-weight: bold;
            font-size: 16px;
            border-radius: 4px;
        }
        .line {
            width: 1px;
            height: 15px;
            background-color: #666655;
        }

        .user-name {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;

            .user-center {
                display: none;
                width: 100%;
                position: absolute;
                bottom: -106px;
                left: 0;
                padding: 10px 20px;
                background-color: #fff;
                box-sizing: border-box;
                border-radius: 4px;
                box-shadow: 0 2px 4px #ccc;

                .user-container {
                    display: flex;
                    align-items: center;

                    .info {
                        margin-left: 26px;
                        font-size: 18px;
                        letter-spacing: 2px;
                        div {
                            padding: 4px 0;
                        }
                    }
                }
            }
        }

        .user-name:hover {
            color: #6d6d6d;

            & .user-center {
                display: block;
            }
        }

        img {
            vertical-align: middle;
        }

        a {
            padding: 0 20px;
            // border-right: 1px solid #666655;
        }

        a:hover {
            color: #3cb4a6;
        }

        .a-border-none {
            border: none;
            padding: 0;
        }
    }

    .roles-check {
        position: relative;
    }
    .roles-check .select-list {
        // height: 50px;
        // display: none;
        position: absolute;
        left: 1%;
        bottom: 0;
        transform: translateY(100%);
        width: 98%;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        z-index: 999;
        transition: all 1s linear;

        div {
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            text-align: center;
            letter-spacing: 1px;
        }

        div:hover {
            color: #fff;
            background-color: #00a288;
        }
    }

    // .roles-check:hover .select-list {
    //     display: block;
    // }

    .last-item {
        position: relative;
        z-index: 998;
        padding-left: 20px;
        .qr-code {
            position: absolute;
            left: -70px;
            top: -140px;
            width: 140px;
            height: 140px;
            background-color: #fff;
            visibility: hidden;
            padding: 10px;
            box-shadow: 0 2px 2px 2px #ccc;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #333;
            .el-image {
                width: 120px;
                height: 120px;
                margin-bottom: 5px;
            }
        }
    }

    .last-item:hover > .qr-code {
        visibility: visible;
        transform: translateY(177px);
        transition: all 0.6s;
    }

    /* 中间logo  搜索框部分 */
    .logo-ipt-container {
        width: 1552px;
        margin: 0 auto;
        position: relative;
        display: flex;
        align-items: center;
        background-color: #eeeff6;
        padding: 30px;
        box-sizing: border-box;
        // box-sizing: content-box;

        // padding: 30px 0 60px 0;

        .home-logo {
            // width: 286px;
            // height: 100%;
            width: 240px;
            height: 80px;
            /* height: 40px; // 贵州 */
            background-color: orange;
            background: url('@/assets/img/logo.png') no-repeat;
            /* background: url('@/assets/img/logo-gz.png') no-repeat; */ // 贵州
            background-size: 100% 100%;
            cursor: pointer;
        }

        .home-search {
            position: relative;
            flex: 1;
            width: 100%;
            margin: 0 20px;
            // width: 1000px;
            // margin-left: 40px;

                // 下拉列表样式
                .dropdown-list {
                    position: absolute;
                    // 基于输入框左侧定位，通过 padding-left 调整
                    left: 100px; 
                    // 基于输入框右侧定位，通过减去按钮宽度调整
                    right: 105px; 
                    top: calc(100% - 5px); 
                    background-color: #fff;
                    border: 1px solid #ccc;
                    border-top: none;
                    border-radius: 0 0 27px 27px; 
                    z-index: 999;
                    max-height: 200px;
                    overflow-y: auto;
                }

                // 下拉列表项样式
                .dropdown-item {
                    padding: 10px;
                    cursor: pointer;
                }

                .dropdown-item:hover {
                    background-color: #f5f5f5;
                }

            .hot-word {
                margin: 15px 0 0 10%;
                max-width: 80%;
                display: flex;
                flex-wrap: wrap;
            }

            .left-check-box {
                position: absolute;
                left: 0;
                top: 0;
                height: 53px;
                width: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-right: 1px solid #3cb4a6;
                // font-size: 14px;
                color: #11806f;
                cursor: pointer;
            }

            .check-container {
                position: absolute;
                left: 0;
                bottom: 0;
                transform: translateY(100%);
                width: 100px;
                background-color: #fff;
                border-radius: 6px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                z-index: 999;
                transition: all 1s linear;
                cursor: pointer;

                div {
                    height: 35px;
                    // font-size: 14px;
                    line-height: 35px;
                    text-align: center;
                    letter-spacing: 1px;
                }

                div:hover {
                    color: #fff;
                    background-color: #00a288;
                }
            }
        }

        .cart-container {
            width: 130px;
            // background-color: orange;
            // height: 60px;
            // flex: 1;
        }

        // img {
        //     margin-left: 38px;
        //     width: 160px;
        //     height: 60px;
        //     cursor: pointer;
        // }

        input {
            width: 100%;
            height: 54px;
            display: block;
            border: 1px solid #3cb4a6;
            border-radius: 27px;
            line-height: 54px;
            color: #333;
            text-shadow: 0 0 0 #333;
            padding-left: 110px;
            box-sizing: border-box;
        }

        input:focus {
            outline: 1px solid #3cb4a6;
        }

        input::-webkit-input-placeholder {
            color: #949494;
        }
        .search-btn {
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 43px;
            transform: translate(-5px, 5px);
            border-radius: 43px;
            background: linear-gradient(132deg, #22ab9b 0%, #0d7462 100%);
            box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5);
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 18px;
            box-sizing: border-box;
        }

        .ipt-down {
            position: absolute;
            bottom: 25px;
            left: 22%;
            overflow: hidden;

            a {
                max-width: 140px;
                padding: 0 10px;
                color: #727272;
                font-size: 14px;
                cursor: pointer;
                overflow: hidden;
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        .cart-icon {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            span {
                margin-left: 10px;
                color: #1abc9c;
            }
        }
    }
}
</style>