fanshuai/code
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改顶部样式

Browse Source
This commit is contained in:
fanshuai 2025-03-19 22:26:57 +08:00
parent 961a4c7281
commit 1da74ffcdb
1 changed files with 48 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/views/home/homeView.vue
View File

@ -51,35 +51,29 @@ export default {
<el-container>
<!-- 顶部 -->
<el-header>
<el-row>
<div class="dhl">
<el-col :span="3">
<div class="grid-content ep-bg-purple-home" />
<img class="img-1" :src="imagePath.logo" alt="Logo" width="90" height="90" />
<em class="em-1">辉擎科技</em>
</el-col>
<el-col :span="9">
<div class="grid-content ep-bg-purple" />
</el-col>
<el-col :span="6">
<div class="grid-content ep-bg-purple-light" />
<div class="dhl-x">
<el-breadcrumb separator="">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }">产品方案</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }">行业解决问题</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }">客户案例</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }">关于我们</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }"> </el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-col>
<el-col :span="1">
<div class="grid-content ep-bg-purple" />
<el-button class="an-3" type="primary">免费咨询</el-button>
</el-col>
<div class="dhl">
<div class="left-box">
<img class="img-1" :src="imagePath.logo" alt="Logo" />
<span class="sys-title">辉擎科技</span>
</div>
</el-row>
<div class="right-box">
<div class="dhl-x">
<div>首页</div>
<div>产品方案</div>
<div>行业解决问题</div>
<div>客户案例</div>
<div>关于我们</div>
</div>
<el-button class="an-3" type="primary">免费咨询</el-button>
</div>
<!-- <div class="grid-content ep-bg-purple-home" />
<em class="em-1"></em>
<div class="grid-content ep-bg-purple-light" />
<div class="grid-content ep-bg-purple" />
-->
</div>
</el-header>
<el-main style="padding: 0 20px">
<div class="carousel">
@ -182,7 +176,7 @@ export default {
部署时间：xxxx年
<el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
</div>
<el-button class="an-4" >查看更多案例</el-button>
<el-button class="an-4">查看更多案例</el-button>
</el-col>
</el-row>
</div>
@ -200,7 +194,7 @@ export default {
本次峰会汇聚行业专家，深入探讨数字化转型趋势与实践经验，共同展望为了发展方向。
</div>
<div class="an-5">
<el-link :underline="false" style="color: #2d3fdd" >查看详情</el-link>
<el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
</div>
</el-col>
<el-col :span="6" class="bk-3-1">
@ -212,7 +206,7 @@ export default {
本次峰会汇聚行业专家，深入探讨数字化转型趋势与实践经验，共同展望为了发展方向。
</div>
<div class="an-5">
<el-link :underline="false" style="color: #2d3fdd" >查看详情</el-link>
<el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
</div>
</el-col>
<el-col :span="6" class="bk-3-1">
@ -224,7 +218,7 @@ export default {
本次峰会汇聚行业专家，深入探讨数字化转型趋势与实践经验，共同展望为了发展方向。
</div>
<div class="an-5">
<el-link :underline="false" style="color: #2d3fdd" >查看详情</el-link>
<el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
</div>
</el-col>
</el-row>
@ -236,8 +230,7 @@ export default {
</div>
</template>
<style scoped>
.an-5{
.an-5 {
margin-left: -20px;
margin-top: 20px;
width: 100px;
@ -308,7 +301,8 @@ export default {
margin-left: 30px;
}
.img-1 {
margin-top: 8px;
width: 60px;
height: 60px;
}
.bt-1 {
margin-top: -70px;
@ -360,7 +354,7 @@ export default {
font-size: 30px;
}
.an-3 {
margin-right: -20px;
/* margin-right: -20px; */
}
.an-1 {
position: absolute;
@ -407,14 +401,12 @@ export default {
font-weight: bold;
}
.dhl {
float: right;
width: 100%;
height: 50px;
height: 60px;
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
background-color: #fff;
margin-top: 10px;
}
.el-link {
margin-right: 25px;
@ -424,7 +416,7 @@ export default {
.dhl-x {
display: flex;
gap: 20px;
margin-right: 0px;
margin-right: 80px;
}
.carousel {
position: relative;
@ -469,4 +461,19 @@ export default {
.next {
right: 10px;
}
.left-box {
display: flex;
align-items: center;
}
.sys-title {
font-size: 24px;
font-weight: 600;
}
.right-box {
display: flex;
align-items: center;
}
</style>