首页
This commit is contained in:
235
src/components/pageTopBar/pageTopBar.vue
Normal file
235
src/components/pageTopBar/pageTopBar.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<div class="top-bg-img-box pos-r">
|
||||
<img src="../../assets/homeImage/indexBg.png" class="bg-img" alt="">
|
||||
<div class="info-box">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="dis-f jus-x al-item index-top-navigation-box">
|
||||
<div class="index-top-navigation dis-f al-item body-maxWidth">
|
||||
<div class="navigation-text" :class="{ 'navigation-text-click': i === 1 }" v-for="(item, i) in topTab" :key="i">
|
||||
{{
|
||||
item.title }}</div>
|
||||
<img src="" class="user-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x al-item">
|
||||
<div class="logo-box dis-f al-item body-maxWidth">
|
||||
<img src="../../assets/homeImage/logo.png" class="logo-img" alt="">
|
||||
<img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x al-item" style="margin-top:20px;">
|
||||
<div class="body-maxWidth">
|
||||
<el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<div style="width:100%;height:100%;" class="dis-f jus-x al-item">
|
||||
<img class="carousel-img" src="../../assets/homeImage/carousel.svg" alt="">
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btm-seach-btn-box dis-f al-item jus-x">
|
||||
<div class="body-maxWidth dis-f" style="height:48px;">
|
||||
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in seachTab"
|
||||
:key="i">
|
||||
<el-badge :value="12">
|
||||
{{ item.title }}
|
||||
</el-badge>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let topTab = [
|
||||
{
|
||||
title: '寄托首页',
|
||||
}, {
|
||||
title: '论坛'
|
||||
}, {
|
||||
title: 'Offer榜'
|
||||
}, {
|
||||
title: '港校租房'
|
||||
}, {
|
||||
title: '院校库'
|
||||
}, {
|
||||
title: '兑换店'
|
||||
}, {
|
||||
title: '搜索'
|
||||
}, {
|
||||
title: '招生官'
|
||||
}, {
|
||||
title: '中外合办院校'
|
||||
}
|
||||
]
|
||||
let seachTab = [
|
||||
{
|
||||
title: '首页',
|
||||
}, {
|
||||
title: '个人房源'
|
||||
}, {
|
||||
title: '中介房源'
|
||||
}, {
|
||||
title: '品牌公寓'
|
||||
}, {
|
||||
title: '求房源'
|
||||
}, {
|
||||
title: '我的'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.jus-x {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-maxWidth {
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.s-w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-bg-img-box {
|
||||
width: 100%;
|
||||
height: 568px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.756862745098039);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.index-top-navigation-box {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.index-top-navigation-box .navigation-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: rgba(215, 215, 215, 0.988235294117647);
|
||||
text-align: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.index-top-navigation-box .navigation-text-click {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #62B1FF;
|
||||
border-bottom: 3px solid rgba(98, 177, 255, 1);
|
||||
}
|
||||
|
||||
.index-top-navigation {
|
||||
height: 60px;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.top-bg-img-box .user-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .logo-box {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .logo-box .logo-img {
|
||||
object-fit: contain;
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .logo-box .logo-text-img {
|
||||
object-fit: contain;
|
||||
width: 173px;
|
||||
height: 31px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box {
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.596078431372549);
|
||||
border-bottom: 4px solid rgba(78, 144, 204, 1);
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn {
|
||||
width: 120px;
|
||||
height: 43px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #E2EDF7;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn-click {
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
border: none;
|
||||
border-bottom: 0px;
|
||||
border-radius: 8px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.carousel-img {
|
||||
margin: 0 auto;
|
||||
width: 660px;
|
||||
height: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user