960 lines
28 KiB
Vue
960 lines
28 KiB
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 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
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (tokenNew) {
|
|
getUserListData()
|
|
getBookCarDetailsData()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 头部个人信息 收藏夹 手机版等图标 -->
|
|
<div class="header-container">
|
|
<div class="header-user-info">
|
|
<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">
|
|
<!-- <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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 中间logo 部分 -->
|
|
<div class="logo-ipt-container">
|
|
<div class="home-logo" @click="$router.push('/home')"></div>
|
|
<div class="home-search">
|
|
<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>
|
|
<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;
|
|
background-color: orange;
|
|
background: url('@/assets/img/logo.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;
|
|
|
|
.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>
|