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-31 17:18:01 +08:00
parent ec2ad3aa5a
commit ab70c9337c
2 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <title>辉擎科技</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

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

@ -19,6 +19,7 @@ export default {
s1: s1, s1: s1,
s2: s2, s2: s2,
s3: s3, s3: s3,
isDark: false,
}, },
} }
}, },
@ -131,10 +132,12 @@ export default {
<button class="next" @click="nextSlide">&#10095;</button> --> <button class="next" @click="nextSlide">&#10095;</button> -->
</div> </div>
<div class="bk" id="bk"> <div class="bk" id="bk">
<div>
<div class="em-4">我们的服务</div> <div class="em-4">我们的服务</div>
<div class="em-5"> <div class="em-5">
辉擎科技提供全方位的软件开发服务，从需求分析到部署维护，我们用技术为您的业务赋能。 辉擎科技提供全方位的软件开发服务，从需求分析到部署维护，我们用技术为您的业务赋能。
</div> </div>
</div>
<div class="fw"> <div class="fw">
<div class="fw-box"> <div class="fw-box">
<img class="img-2" :src="imagePath.tb1" alt="tb1" /> <img class="img-2" :src="imagePath.tb1" alt="tb1" />
@ -186,7 +189,7 @@ export default {
通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60% 通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60%
</div> </div>
<div class="bteen-box"> <div class="bteen-box">
<div style="color: #646262 font-weight: 100;">部署时间:xxxx年</div> <div style="color: #646262;">部署时间:xxxx年</div>
<el-link :underline="false" style="color: #3d8dce">查看详情</el-link> <el-link :underline="false" style="color: #3d8dce">查看详情</el-link>
</div> </div>
</div> </div>
@ -202,7 +205,7 @@ export default {
通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60% 通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60%
</div> </div>
<div class="bteen-box"> <div class="bteen-box">
<div style="color: #646262 font-weight: 100;">部署时间:xxxx年</div> <div style="color: #646262;">部署时间:xxxx年</div>
<el-link :underline="false" style="color: #3d8dce">查看详情</el-link> <el-link :underline="false" style="color: #3d8dce">查看详情</el-link>
</div> </div>
</div> </div>
@ -218,7 +221,7 @@ export default {
通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60% 通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60%
</div> </div>
<div class="bteen-box"> <div class="bteen-box">
<div style="color: #646262 font-weight: 100;">部署时间:xxxx年</div> <div style="color: #646262 ;">部署时间:xxxx年</div>
<el-link :underline="false" style="color: #3d8dce">查看详情</el-link> <el-link :underline="false" style="color: #3d8dce">查看详情</el-link>
</div> </div>
</div> </div>
@ -420,7 +423,7 @@ form input {
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
height: 700px; height: 700px;
margin-left: 150px; margin-left: 100px;
} }
.img-8 { .img-8 {
width: 600px; width: 600px;
@ -437,6 +440,7 @@ form input {
margin-left: 20px; margin-left: 20px;
display: flex; display: flex;
} }
.lx-dh { .lx-dh {
font-weight: bold; font-weight: bold;
} }
@ -476,8 +480,10 @@ form input {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-top: 180px; margin-top: 180px;
height: 700px; min-height: 700px;
background-color: #f7f6f6; background-color: #f7f6f6;
flex-wrap:wrap;
} }
.tb { .tb {
color: #2d3fdd; color: #2d3fdd;
@ -497,6 +503,7 @@ form input {
.fan-nr { .fan-nr {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap:wrap;
} }
.fan-left { .fan-left {
display: flex; display: flex;
@ -528,11 +535,12 @@ form input {
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
margin-top: 80px; margin-top: 80px;
height: 500px; min-height: 500px;
} }
.dt-box { .dt-box {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap:wrap;
} }
.fbt-2 { .fbt-2 {
color: #272626; color: #272626;
@ -580,7 +588,7 @@ form input {
.dt-mk { .dt-mk {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 700px; min-height: 700px;
} }
.img-4 { .img-4 {
margin-top: 20px; margin-top: 20px;
@ -595,11 +603,13 @@ form input {
.an-nu { .an-nu {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 10px 0px;
} }
.an-ls-body { .an-ls-body {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-right: 100px; margin-right: 100px;
flex-wrap: wrap;
} }
.an-li-box { .an-li-box {
margin-left: 100px; margin-left: 100px;
@ -616,11 +626,12 @@ form input {
margin-top: 50px; margin-top: 50px;
} }
.bk-2 { .bk-2 {
height: 700px; min-height: 700px;
background-color: #f7f6f6; background-color: #f7f6f6;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
} }
.bteen-box { .bteen-box {
display: flex; display: flex;
@ -641,9 +652,7 @@ form input {
justify-content: space-around; justify-content: space-around;
letter-spacing: 1px; letter-spacing: 1px;
} }
.fdc {
flex-wrap: wrap;
}
.top-box { .top-box {
display: flex; display: flex;
height: 55px; height: 55px;
@ -677,8 +686,9 @@ form input {
.fw { .fw {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
height: 400px; flex-wrap:wrap;
margin-top: 60px;
} }
.fw-box { .fw-box {
width: 430px; width: 430px;
@ -687,6 +697,8 @@ form input {
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
letter-spacing: 2px; letter-spacing: 2px;
margin-top: 40px;
margin-bottom: 40px;
} }
.img-2 { .img-2 {
width: 55px; width: 55px;
@ -794,10 +806,11 @@ form input {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
} }
.bk { .bk {
position: relative; display: flex;
flex-direction:column;
background-color: #fff; background-color: #fff;
margin-top: 90px; justify-content:space-around;
height: 600px; min-height:700px;
} }
.an-1 { .an-1 {
@ -815,9 +828,7 @@ form input {
margin-left: -440px; margin-left: -440px;
width: 150px; width: 150px;
} }
.box {
height: 100%;
}
.em-3 { .em-3 {
position: absolute; position: absolute;
top: 190px; top: 190px;