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-04-01 23:59:52 +08:00
parent 1e98074fa5
commit e40e041e7a
1 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,8 +19,8 @@ export default {
s1: s1, s1: s1,
s2: s2, s2: s2,
s3: s3, s3: s3,
isDark: false,
}, },
isDark: false,
} }
}, },
setup() { setup() {
@ -47,7 +47,7 @@ export default {
const tiJiao = () => { const tiJiao = () => {
alert('提交成功！') alert('提交成功！')
} }
const shouye = (id) => { const shouYe = (id) => {
tiaoZhuan(id) tiaoZhuan(id)
} }
const canPingFangan = (id) => { const canPingFangan = (id) => {
@ -76,7 +76,7 @@ export default {
nextSlide, nextSlide,
prevSlide, prevSlide,
geet, geet,
shouye, shouYe,
canPingFangan, canPingFangan,
tiaoZhuan, tiaoZhuan,
jieJuewenTi, jieJuewenTi,
@ -101,11 +101,11 @@ export default {
</div> </div>
<div class="right-box"> <div class="right-box">
<div class="dhl-x"> <div class="dhl-x">
<div><a href="#" @click="shouye('dhl')">首页</a></div> <div><a class="dhl-yt" @click="shouYe('dhl')">首页</a></div>
<div><a href="#" @click="canPingFangan('bk')">产品方案</a></div> <div><a class="dhl-yt" @click="canPingFangan('bk')">产品方案</a></div>
<div><a href="#" @click="jieJuewenTi('fan-mk')">行业解决问题</a></div> <div><a class="dhl-yt" @click="jieJuewenTi('fan-mk')">行业解决问题</a></div>
<div><a href="#" @click="keHuanLi('bk-2')">客户案例</a></div> <div><a class="dhl-yt" @click="keHuanLi('bk-2')">客户案例</a></div>
<div><a href="#" @click="yuanYuwoMen('lx-mk')">关于我们</a></div> <div><a class="dhl-yt" @click="yuanYuwoMen('lx-mk')">关于我们</a></div>
</div> </div>
<el-button @click="geet" class="an-3" type="primary">免费咨询</el-button> <el-button @click="geet" class="an-3" type="primary">免费咨询</el-button>
</div> </div>
@ -133,11 +133,11 @@ export default {
</div> </div>
<div class="bk" id="bk"> <div class="bk" id="bk">
<div> <div>
<div class="em-4">我们的服务</div> <div class="em-4">我们的服务</div>
<div class="em-5"> <div class="em-5">
辉擎科技提供全方位的软件开发服务，从需求分析到部署维护，我们用技术为您的业务赋能。 辉擎科技提供全方位的软件开发服务，从需求分析到部署维护，我们用技术为您的业务赋能。
</div>
</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" />
@ -189,7 +189,7 @@ export default {
通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60% 通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60%
</div> </div>
<div class="bteen-box"> <div class="bteen-box">
<div style="color: #646262;">部署时间: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>
@ -205,7 +205,7 @@ export default {
通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60% 通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60%
</div> </div>
<div class="bteen-box"> <div class="bteen-box">
<div style="color: #646262;">部署时间: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>
@ -221,7 +221,7 @@ export default {
通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60% 通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60%
</div> </div>
<div class="bteen-box"> <div class="bteen-box">
<div style="color: #646262 ;">部署时间: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>
@ -232,7 +232,7 @@ export default {
</div> </div>
</div> </div>
<!-- --> <!-- -->
<div class="dt-mk"> <div class="dt-mk" id="lx-mk">
<div> <div>
<div class="em-4">最新动态</div> <div class="em-4">最新动态</div>
<div class="em-5">了解公司最新资讯与行业洞察。</div> <div class="em-5">了解公司最新资讯与行业洞察。</div>
@ -322,10 +322,10 @@ export default {
</div> </div>
</div> </div>
<!-- --> <!-- -->
<div class="lx-mk" id="lx-mk"> <div class="lx-mk">
<div class="lx-left"> <div class="lx-left">
<div class="lx-wb">联系我们</div> <div class="lx-wb">联系我们</div>
<form> <form @submit.prevent="handleSubmit">
<div> <div>
<div class="lx-wb-1">姓名</div> <div class="lx-wb-1">姓名</div>
<input type="text" placeholder="请输⼊您的姓名" class="align-placeholder" /> <input type="text" placeholder="请输⼊您的姓名" class="align-placeholder" />
@ -423,7 +423,6 @@ form input {
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
height: 700px; height: 700px;
} }
.img-8 { .img-8 {
min-width: 600px; min-width: 600px;
@ -469,7 +468,6 @@ form input {
justify-content: space-around; justify-content: space-around;
height: 500px; height: 500px;
margin-top: 50px; margin-top: 50px;
} }
.lx-wb { .lx-wb {
@ -482,8 +480,7 @@ form input {
margin-top: 180px; margin-top: 180px;
min-height: 700px; min-height: 700px;
background-color: #f7f6f6; background-color: #f7f6f6;
flex-wrap:wrap; flex-wrap: wrap;
} }
.tb { .tb {
color: #2d3fdd; color: #2d3fdd;
@ -495,22 +492,21 @@ form input {
font-size: 30px; font-size: 30px;
} }
.img-7 { .img-7 {
min-width: 600px; min-width: 500px;
height: 400px; height: 300px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px; border-radius: 10px;
} }
.fan-nr { .fan-nr {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap:wrap; flex-wrap: wrap;
} }
.fan-left { .fan-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
height: 300px; height: 300px;
margin-right: 300px;
} }
.fan-wb1 { .fan-wb1 {
font-size: 20px; font-size: 20px;
@ -540,7 +536,7 @@ form input {
.dt-box { .dt-box {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap:wrap; flex-wrap: wrap;
} }
.fbt-2 { .fbt-2 {
color: #272626; color: #272626;
@ -578,7 +574,7 @@ form input {
} }
.dt-bj { .dt-bj {
display: flex; display: flex;
width: 550px; width: 450px;
height: 500px; height: 500px;
border-radius: 10px; border-radius: 10px;
margin-top: 60px; margin-top: 60px;
@ -592,7 +588,6 @@ form input {
} }
.img-4 { .img-4 {
margin-top: 20px; margin-top: 20px;
width: 480px;
height: 250px; height: 250px;
border-radius: 10px; border-radius: 10px;
} }
@ -608,12 +603,9 @@ form input {
.an-ls-body { .an-ls-body {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-right: 100px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.an-li-box {
margin-left: 100px;
}
.em-5 { .em-5 {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
@ -631,7 +623,6 @@ form input {
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;
@ -662,7 +653,7 @@ form input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
width: 450px; width: 400px;
height: 250px; height: 250px;
margin-top: 60px; margin-top: 60px;
border-radius: 8px; border-radius: 8px;
@ -682,16 +673,15 @@ form input {
line-height: 1.5; line-height: 1.5;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 100; font-weight: 100;
margin-right: 10px;
} }
.fw { .fw {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap:wrap; flex-wrap: wrap;
} }
.fw-box { .fw-box {
width: 430px; width: 330px;
height: 280px; height: 280px;
align-content: space-around; align-content: space-around;
border-radius: 8px; border-radius: 8px;
@ -807,10 +797,10 @@ form input {
} }
.bk { .bk {
display: flex; display: flex;
flex-direction:column; flex-direction: column;
background-color: #fff; background-color: #fff;
justify-content:space-around; justify-content: space-around;
min-height:700px; min-height: 700px;
} }
.an-1 { .an-1 {
@ -875,6 +865,14 @@ form input {
gap: 20px; gap: 20px;
margin-right: 100px; margin-right: 100px;
} }
.dhl-yt {
color: black;
transition: color 0.3s;
}
.dhl-yt:hover {
color: rgb(56, 84, 195);
cursor: pointer;
}
.carousel { .carousel {
position: relative; position: relative;
width: 100%; width: 100%;