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

利用flex布局，修改了代码布局

Browse Source
This commit is contained in:
fanshuai 2025-03-20 16:50:08 +08:00
parent 1da74ffcdb
commit b91b7bf2b4
5 changed files with 314 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "test",
"version": "0.0.0",
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"element-plus": "^2.9.6",
"pinia": "^3.0.1",
"vue": "^3.5.13",

1
package.json
View File

@ -11,6 +11,7 @@
"format": "prettier --write src/"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"element-plus": "^2.9.6",
"pinia": "^3.0.1",
"vue": "^3.5.13",

BIN
src/assets/images/tb1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 12 KiB

6
src/main.js
View File

@ -5,7 +5,7 @@ import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
@ -13,6 +13,8 @@ const app = createApp(App)
app.use(createPinia())
app.use(router)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus)
app.mount('#app')

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

@ -66,13 +66,6 @@ export default {
</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">
@ -98,138 +91,333 @@ export default {
<div class="em-5">
辉擎科技提供全方位的软件开发服务，从需求分析到部署维护，我们用技术为您的业务赋能。
</div>
<el-row :gutter="40">
<el-col :span="5" class="bk-1-1">
<div class="grid-content ep-bg-purple" />
<img class="img-2" :src="imagePath.tb1" alt="tb1" width="160" height="190" />
<div class="bt-1">人工智能平台</div>
<div class="em-6">
<div class="fw">
<div class="fw-box">
<img class="img-2" :src="imagePath.tb1" alt="tb1" />
<div class="rgzn">人工智能平台</div>
<div class="tgfw">
提供企业级AI能力，包括机器学习、深度学习、自然语言处理等核心技术支持
</div>
</el-col>
<el-col :span="5" class="bk-1-1">
<div class="grid-content ep-bg-purple" />
<img class="img-2" :src="imagePath.tb1" alt="tb1" width="160" height="190" />
<div class="bt-1">人工智能平台</div>
<div class="em-6">
</div>
<div class="fw-box">
<img class="img-2" :src="imagePath.tb1" alt="tb1" />
<div class="rgzn">人工智能平台</div>
<div class="tgfw">
提供企业级AI能力，包括机器学习、深度学习、自然语言处理等核心技术支持
</div>
</el-col>
<el-col :span="5" class="bk-1-1">
<div class="grid-content ep-bg-purple" />
<img class="img-2" :src="imagePath.tb1" alt="tb1" width="160" height="190" />
<div class="bt-1">人工智能平台</div>
<div class="em-6">
</div>
<div class="fw-box">
<img class="img-2" :src="imagePath.tb1" alt="tb1" />
<div class="rgzn">人工智能平台</div>
<div class="tgfw">
提供企业级AI能力，包括机器学习、深度学习、自然语言处理等核心技术支持
</div>
</el-col>
<el-col :span="5" class="bk-1-1">
<div class="grid-content ep-bg-purple" />
<img class="img-2" :src="imagePath.tb1" alt="tb1" width="160" height="190" />
<div class="bt-1">人工智能平台</div>
<div class="em-6">
</div>
<div class="fw-box">
<img class="img-2" :src="imagePath.tb1" alt="tb1" />
<div class="rgzn">人工智能平台</div>
<div class="tgfw">
提供企业级AI能力，包括机器学习、深度学习、自然语言处理等核心技术支持
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<!-- -->
<div class="bk-2">
<div>
<div class="em-4">成功案例</div>
<div class="em-5">服务超过1000家企业客户，助力企业数字化转型。</div>
<el-row :gutter="40">
<el-col :span="6" class="bk-2-2">
<div class="grid-content ep-bg-purple" />
<img class="img-3" :src="imagePath.tb1" alt="tb1" width="120" height="70" />
<div class="bt-2">远洋集团</div>
<div class="wb-1">房地产行业</div>
<div class="em-7">
通过部署智能分析平台，实现销售数据可视化分析，提升决策效率超过60%
<div class="em-5">服务超过1000家企业客户,助力企业数字化转型。</div>
</div>
<div class="sj-1">
部署时间：xxxx年
<el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
<div class="an-li-box">
<div class="an-ls-body">
<div class="an-li">
<div class="top-box">
<img class="img-2" :src="imagePath.tb1" alt="tb1" />
<div class="sys">
<div class="sys-title">远洋集团</div>
<div class="fdc">房地产行业</div>
</div>
</el-col>
<el-col :span="6" class="bk-2-2">
<div class="grid-content ep-bg-purple" />
<img class="img-3" :src="imagePath.tb1" alt="tb1" width="120" height="70" />
<div class="bt-2">远洋集团</div>
<div class="wb-1">房地产行业</div>
<div class="em-7">
通过部署智能分析平台，实现销售数据可视化分析，提升决策效率超过60%
</div>
<div class="sj-1">
部署时间：xxxx年
<el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
<div class="chenter-box">
通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60%
</div>
</el-col>
<el-col :span="6" class="bk-2-2">
<div class="grid-content ep-bg-purple" />
<img class="img-3" :src="imagePath.tb1" alt="tb1" width="120" height="70" />
<div class="bt-2">远洋集团</div>
<div class="wb-1">房地产行业</div>
<div class="em-7">
通过部署智能分析平台，实现销售数据可视化分析，提升决策效率超过60%
<div class="bteen-box">
<div style="color: #646262 font-weight: 100;">部署时间:xxxx年</div>
<el-link :underline="false" style="color: #3d8dce">查看详情</el-link>
</div>
<div class="sj-1">
部署时间：xxxx年
<el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
</div>
<el-button class="an-4">查看更多案例</el-button>
</el-col>
</el-row>
<div class="an-li">
<div class="top-box">
<img class="img-2" :src="imagePath.tb1" alt="tb1" />
<div class="sys">
<div class="sys-title">远洋集团</div>
<div class="fdc">房地产行业</div>
</div>
</div>
<div class="chenter-box">
通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60%
</div>
<div class="bteen-box">
<div style="color: #646262 font-weight: 100;">部署时间:xxxx年</div>
<el-link :underline="false" style="color: #3d8dce">查看详情</el-link>
</div>
</div>
<div class="an-li">
<div class="top-box">
<img class="img-2" :src="imagePath.tb1" alt="tb1" />
<div class="sys">
<div class="sys-title">远洋集团</div>
<div class="fdc">房地产行业</div>
</div>
</div>
<div class="chenter-box">
通过部署智能分析平台,实现销售数据可视化分析,提升决策效率超过60%
</div>
<div class="bteen-box">
<div style="color: #646262 font-weight: 100;">部署时间:xxxx年</div>
<el-link :underline="false" style="color: #3d8dce">查看详情</el-link>
</div>
</div>
</div>
</div>
<div class="an-nu">
<el-button class="an-nu-1">查看更多案例</el-button>
</div>
</div>
<!-- -->
<div class="bk-3">
<div class="dt-mk">
<div>
<div class="em-4">最新动态</div>
<div class="em-5">了解公司最新资讯与行业洞察。</div>
<el-row :gutter="40">
<el-col :span="6" class="bk-3-1">
<div class="grid-content ep-bg-purple" />
<img class="img-4" :src="imagePath.s1" alt="tb1" width="100%" height="250" />
<div class="sj-2">2024年3月15日</div>
<div class="bt-3">2024数字化转型峰会圆满举行</div>
<div class="em-8">
</div>
<div class="dt-box">
<div class="dt-bj">
<div class="bt-nr">
<div class="img">
<img class="img-4" :src="imagePath.s1" alt="tb1" />
</div>
<div class="bt-nr-1">
<div class="shij">2024年3月15日</div>
<div class="fbt-1">2024数字化转型峰会圆满举行</div>
<div class="fbt-2">
本次峰会汇聚行业专家，深入探讨数字化转型趋势与实践经验，共同展望为了发展方向。
</div>
<div class="an-5">
<el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
<div class="xq-1">
<el-link :underline="false" style="color: #2d3fdd"
>查看详情<el-icon><Right /></el-icon
></el-link>
</div>
</el-col>
<el-col :span="6" class="bk-3-1">
<div class="grid-content ep-bg-purple" />
<img class="img-4" :src="imagePath.s1" alt="tb1" width="100%" height="250" />
<div class="sj-2">2024年3月15日</div>
<div class="bt-3">2024数字化转型峰会圆满举行</div>
<div class="em-8">
</div>
</div>
</div>
<div class="dt-bj">
<div class="bt-nr">
<div class="img">
<img class="img-4" :src="imagePath.s1" alt="tb1" />
</div>
<div class="bt-nr-1">
<div class="shij">2024年3月15日</div>
<div class="fbt-1">2024数字化转型峰会圆满举行</div>
<div class="fbt-2">
本次峰会汇聚行业专家，深入探讨数字化转型趋势与实践经验，共同展望为了发展方向。
</div>
<div class="an-5">
<el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
<div class="xq-1">
<el-link :underline="false" style="color: #2d3fdd"
>查看详情<el-icon><Right /></el-icon
></el-link>
</div>
</el-col>
<el-col :span="6" class="bk-3-1">
<div class="grid-content ep-bg-purple" />
<img class="img-4" :src="imagePath.s1" alt="tb1" width="100%" height="250" />
<div class="sj-2">2024年3月15日</div>
<div class="bt-3">2024数字化转型峰会圆满举行</div>
<div class="em-8">
</div>
</div>
</div>
<div class="dt-bj">
<div class="bt-nr">
<div class="img">
<img class="img-4" :src="imagePath.s1" alt="tb1" />
</div>
<div class="bt-nr-1">
<div class="shij">2024年3月15日</div>
<div class="fbt-1">2024数字化转型峰会圆满举行</div>
<div class="fbt-2">
本次峰会汇聚行业专家，深入探讨数字化转型趋势与实践经验，共同展望为了发展方向。
</div>
<div class="an-5">
<el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
<div class="xq-1">
<el-link :underline="false" style="color: #2d3fdd"
>查看详情<el-icon><Right /></el-icon
></el-link>
</div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<!-- -->
</el-main>
</el-container>
</div>
</div>
</template>
<style scoped>
.dt-box {
display: flex;
justify-content: space-around;
}
.fbt-2 {
color: #272626;
}
.fbt-1 {
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
}
.shij {
color: #a19f9f;
}
.xq-1 {
display: flex;
}
.bt-nr-1 {
display: flex;
flex-direction: column;
height: 200px;
justify-content: space-around;
margin-left: 35px;
margin-right: 15px;
line-height: 1.5;
letter-spacing: 2px;
}
.img {
display: flex;
align-items: center;
justify-content: center;
}
.bt-nr {
display: flex;
flex-direction: column;
}
.dt-bj {
display: flex;
width: 550px;
height: 500px;
border-radius: 10px;
margin-top: 60px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.dt-mk {
display: flex;
flex-direction: column;
height: 700px;
}
.img-4 {
margin-top: 20px;
width: 480px;
height: 250px;
}
.an-nu-1 {
width: 200px;
height: 50px;
}
.an-nu {
display: flex;
justify-content: center;
}
.an-ls-body {
display: flex;
justify-content: space-around;
margin-right: 100px;
}
.an-li-box {
margin-left: 100px;
}
.em-5 {
text-align: center;
margin-top: 20px;
font-weight: 100;
}
.em-4 {
text-align: center;
font-weight: bold;
font-size: 30px;
margin-top: 50px;
}
.bk-2 {
height: 700px;
background-color: #f7f6f6;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.bteen-box {
display: flex;
justify-content: space-between;
margin-left: 20px;
}
.chenter-box {
margin-left: 20px;
margin-right: 30px;
line-height: 1.5;
font-weight: 100;
letter-spacing: 2px;
}
.sys {
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
letter-spacing: 1px;
}
.fdc {
flex-wrap: wrap;
}
.top-box {
display: flex;
height: 55px;
margin-top: 20px;
}
.an-li {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 550px;
height: 250px;
margin-top: 60px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
.rgzn {
margin-left: 20px;
margin-top: 30px;
font-size: 20px;
font-weight: bold;
}
.tgfw {
margin-left: 20px;
margin-top: 25px;
font-size: 14px;
line-height: 1.5;
letter-spacing: 2px;
font-weight: 100;
}
.fw {
display: flex;
justify-content: space-around;
height: 400px;
margin-top: 60px;
}
.fw-box {
width: 430px;
height: 280px;
align-content: space-around;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
letter-spacing: 2px;
}
.img-2 {
width: 55px;
height: 55px;
margin-left: 20px;
}
.an-5 {
margin-left: -20px;
margin-top: 20px;
@ -248,9 +436,7 @@ export default {
margin-top: 15px;
font-weight: bold;
}
.img-4 {
margin-top: 20px;
}
.bk-3-1 {
height: 470px;
border-radius: 5px;
@ -293,13 +479,7 @@ export default {
margin-top: -80px;
margin-left: 110px;
}
.bk-2 {
height: 500px;
}
.img-2 {
margin-top: 15px;
margin-left: 30px;
}
.img-1 {
width: 60px;
height: 60px;
@ -344,18 +524,7 @@ export default {
margin-top: 90px;
height: 600px;
}
.em-5 {
margin-top: 30px;
text-align: center;
}
.em-4 {
text-align: center;
font-weight: bold;
font-size: 30px;
}
.an-3 {
/* margin-right: -20px; */
}
.an-1 {
position: absolute;
top: 300px;
@ -404,7 +573,7 @@ export default {
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
justify-content: space-around;
align-items: center;
background-color: #fff;
}
@ -416,7 +585,7 @@ export default {
.dhl-x {
display: flex;
gap: 20px;
margin-right: 80px;
margin-right: 100px;
}
.carousel {
position: relative;
@ -465,10 +634,11 @@ export default {
.left-box {
display: flex;
align-items: center;
margin-left: 80px;
}
.sys-title {
font-size: 24px;
font-size: 30px;
font-weight: 600;
}