Skip to content

liyeyun
liyeyun
Commit 7155b91e authored by shilei's avatar shilei
Browse files
Options

commonHeader

parent ce523e70
Hide whitespace changes
Inline Side-by-side
Showing with 223 additions and 12 deletions
src/components/common/CommonFooter.vue
View file @ 7155b91e
......@@ -23,7 +23,7 @@
</div>
<div class="flex w-[629px] justify-between font-yahei text-xs text-[#F1F3F4]">
<p>地址：北京市丰台区汽车博物馆西路8号院2号楼3层301-1</p>
<p>电话：400-831-1221</p>
<p>电话：400-833-0813</p>
<p>邮箱：service@liyeyun.com</p>
</div>
</div>
......
src/components/common/CommonHeader.vue
View file @ 7155b91e
......@@ -2,6 +2,29 @@
<div class="header-view flex items-center justify-between pl-[40px]">
<!-- <div>logo</div> -->
<div class="flex flex-1 justify-start">
<div class="flex w-[220px] mr-7 items-center" v-if="route.name === 'home'">
<img class="w-[49px] h-[40px]" src="@/assets/images/logo.png" alt="" />
<span class="text-[#333] text-[26px] font-yahei font-bold ml-1">立业云</span>
<div
class="flex items-center city-space ml-4"
@mouseenter="changeCityStatus(1)"
@mouseleave="changeCityStatus(0)"
>
<p class="city text-sm" :class="{ 'city-active': showCityView }">{{ currentCity }}</p>
<img
v-show="!showCityView"
class="w-3 h-3 default-icon"
src="@/assets/images/icon-arrow_down2.png"
alt=""
/>
<img
v-show="showCityView"
class="w-3 h-3 hover-icon"
src="@/assets/images/icon-triangle.png"
alt=""
/>
</div>
</div>
<ElMenu
class="!border-none"
mode="horizontal"
......@@ -22,17 +45,35 @@
产业分类
</ElMenuItem>
</ElSubMenu>
<ElMenuItem v-else :index="menu.path" :route="menu.path">
<ElMenuItem
v-else-if="!(route.name === 'home' && menu.name === '首页')"
:index="menu.path"
:route="menu.path"
>
{{ menu.name }}
</ElMenuItem>
</template>
</ElMenu>
</div>
<div class="flex items-center pr-[56px] text-base font-medium text-[#333333]">
<div class="flex items-center pr-[56px] text-base text-[#333333]">
<div>
<div v-if="userInfo" class="flex items-center">
<img src="@/assets/images/icon-avatar.png" class="w-[26px] h-[26px] mr-3" />
<span class="cursor-pointer mr-5" @click="toUserCenter">{{ userInfo.phone }}</span>
<ElDropdown trigger="click">
<div class="flex items-center">
<img src="@/assets/images/icon-avatar.png" class="w-[26px] h-[26px] mr-3" />
<span class="cursor-pointer mr-5 text-base text-[#333333]">
{{ userInfo.phone }}
</span>
</div>
<template #dropdown>
<div
class="cursor-pointer text-base text-[#333333] w-[100px] h-10 leading-10 text-center"
@click="toUserCenter"
>
个人中心
</div>
</template>
</ElDropdown>
<span class="cursor-pointer" @click="handleLogout">退出</span>
</div>
<div v-else class="cursor-pointer">
......@@ -43,7 +84,33 @@
</div>
<div class="ml-4 flex items-center text-base font-medium text-[#C0322B]">
<img class="w-4 h-4 mr-2" src="@/assets/images/icon-phone_call.png" />
<span>400-900-1786</span>
<span>400-833-0813</span>
</div>
</div>
<!-- 城市选择 -->
<div
class="city-view py-[30px]"
v-show="showCityView"
@mouseenter="changeCityStatus(1)"
@mouseleave="changeCityStatus(0)"
>
<div class="flex">
<div
class="color-[#1a1a1a] text-base mr-[41px] shrink-0"
v-for="cities in cityList"
:key="cities.label"
>
<span class="font-medium">{{ cities.label }}</span>
<p
class="mt-6 cursor-pointer city-item"
:class="{ 'text-[#c03226]': city === currentCity }"
@click="handleCityClick(city)"
v-for="city in cities.items"
:key="city"
>
{{ city }}
</p>
</div>
</div>
</div>
</div>
......@@ -52,10 +119,12 @@
import type { HeaderMenuItem } from '@/types/common.ts';
import { useLoginModal } from '@/components/login/login.ts';
import { useAppStore } from '@/stores/app.ts';
import { computed } from 'vue';
import { computed, ref, onMounted } from 'vue';
import { useJump } from '@/composable/useJump.ts';
import { RouteName } from '@/router/router.ts';
import { useRoute } from 'vue-router';
// import cookie from 'js-cookie';
import { useCity } from '@/composable/useCity.ts';
const props = withDefaults(
defineProps<{
......@@ -73,6 +142,65 @@ const userInfo = computed(() => {
return appStore.userInfo;
});
const currentCity = ref<string>('全国');
const { getProvinces } = useCity();
const provinceList = getProvinces();
const cityList = [
{
label: '全国',
items: ['全国'],
},
{
label: '直辖市',
items: ['北京', '上海', '天津', '重庆'],
},
{
label: '华东',
items: ['山东', '江苏', '浙江', '安徽'],
},
{
label: '华南',
items: ['广东', '广西', '福建', '海南'],
},
{
label: '华中',
items: ['湖北', '湖南', '江西', '河南'],
},
{
label: '华北',
items: ['河北', '山西', '内蒙古'],
},
{
label: '东北',
items: ['辽宁', '吉林', '黑龙江'],
},
{
label: '西南',
items: ['四川', '云南', '贵州', '西藏'],
},
{
label: '西北',
items: ['陕西', '新疆', '青海', '宁夏', '甘肃'],
},
{
label: '港澳台',
items: ['香港', '澳门', '台湾'],
},
];
onMounted(() => {
setTimeout(() => {
const city = route.query.c;
console.log('city', city, route);
if (city) {
currentCity.value = city as string;
}
}, 0);
});
const getParentName = (menu: HeaderMenuItem) => {
const current = menu.subMenus!.find(({ path }) => {
return props.currentPath === path;
......@@ -80,6 +208,44 @@ const getParentName = (menu: HeaderMenuItem) => {
return current?.name || menu.name;
};
const showCityView = ref<boolean>(false);
let cityStatus = 0;
const changeCityStatus = (status: number) => {
cityStatus = status;
if (status === 0) {
setTimeout(() => {
if (cityStatus === 0) {
showCityView.value = false;
}
});
} else {
showCityView.value = true;
}
};
const handleCityClick = (cityName: string) => {
currentCity.value = cityName;
// cookie.set('city', cityName);
const cityInFilter = provinceList.filter((item) => {
return item.name.replace(/\s+/g, '').indexOf(cityName) > -1;
});
if (cityInFilter.length) {
router.replace({
name: route.name!,
query: {
city: cityInFilter[0].name,
c: cityName,
},
});
} else {
router.replace({
name: route.name!,
query: {},
});
}
showCityView.value = false;
};
const handleLogin = (type: 'loginByPhone' | 'register') => {
const { open } = useLoginModal();
open(type);
......@@ -97,15 +263,17 @@ const handleLogout = () => {
const handleMenuChange = () => {};
</script>
<style scoped>
<style lang="scss" scoped>
.header-view {
box-shadow: 0 2px 8px 0 rgba(90, 0, 0, 0.1);
/* min-width: 1200px; */
position: relative;
// width: 926px;
// margin: 0 auto;
::v-deep {
.el-menu--horizontal > .el-menu-item {
color: #333333;
font-weight: 600;
font-size: 14px;
// font-weight: 600;
font-size: 16px;
&:hover {
background-color: #fff;
color: #c0322b;
......@@ -123,4 +291,33 @@ const handleMenuChange = () => {};
}
}
}
.city-space {
position: relative;
padding-right: 20px;
.city {
color: #333333;
line-height: 60px;
cursor: pointer;
}
&:hover {
.city {
color: #c0322b;
}
}
}
.city-view {
position: absolute;
top: 60px;
background: #fff;
width: 100%;
padding-left: 40px;
margin-left: -40px;
z-index: 99;
.city-item:hover {
color: #c0322b;
}
}
.city-active {
color: #c0322b;
}
</style>
src/composable/useCity.ts
View file @ 7155b91e
......@@ -39,6 +39,15 @@ export function useCity() {
}
};
const getProvinces = () => {
const provinces = [];
for (let i = 0; i < provinceList.length; i++) {
provinces.push({ name: provinceList[i].name, value: provinceList[i].value });
}
return provinces;
};
return {
provinceList,
currentProvince,
......@@ -47,5 +56,6 @@ export function useCity() {
currentCityList,
currentRegionList,
findByName,
getProvinces,
};
}
src/views/contact/ContactUs.vue
View file @ 7155b91e
......@@ -18,7 +18,7 @@
<img class="mr-[92px] h-[172px] w-[172px]" src="@/assets/images/logo.png" alt="" />
<div class="flex flex-col justify-center font-yahei text-base text-[#1a1a1a]">
<p class="mb-[22px]">联系地址：北京市丰台区丰台科技园 华夏幸福创新中心B座3层</p>
<p class="mb-[22px]">联系电话：400-831-1221</p>
<p class="mb-[22px]">联系电话：400-833-0813</p>
<p>商务合作：service@liyeyun.com</p>
</div>
</div>
......
src/views/home/HomeView.vue
View file @ 7155b91e
......@@ -194,6 +194,7 @@ import ParkItem from '@/components/list/ParkItem.vue';
import { RouteName } from '@/router/router.ts';
import { useJump } from '@/composable/useJump.ts';
import { ParkItemType } from '@/types/enum.ts';
import { useRoute } from 'vue-router';
const { open } = useJump();
const activeTab = ref<string>('develop');
......@@ -223,6 +224,8 @@ type PageData = {
};
const homePageData = ref<PageData>();
const route = useRoute();
const toList = () => {
let name: RouteName = RouteName.developZoneList;
switch (searchType.value) {
......@@ -249,6 +252,7 @@ const toList = () => {
query: {
searchParams: JSON.stringify({
name: searchKey.value,
provinceName: route.query.city,
}),
},
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment