网页布局完成
This commit is contained in:
fanshuai
parent
b91b7bf2b4
commit
d20a81da30
105
src/components/footView.vue
Normal file
105
src/components/footView.vue
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
<template>
|
||||||
|
<div class="foot">
|
||||||
|
<div class="foot-box">
|
||||||
|
<div class="foot-1">
|
||||||
|
<div>
|
||||||
|
<img class="img" :src="imagePath.s1" alt="tb1" />
|
||||||
|
<span class="img-logo">logo</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>致力于为企业提供专业的数字化转型解决方案，助力企业实现智能化升级。</div>
|
||||||
|
</div>
|
||||||
|
<div class="foot-2">
|
||||||
|
<span>解决方案</span>
|
||||||
|
<span> <a href="#">智慧办公</a></span>
|
||||||
|
<span><a href="#">智能制造</a> </span>
|
||||||
|
<span><a href="#">数据智能</a></span>
|
||||||
|
<span><a href="#">云服务</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="foot-2">
|
||||||
|
<span>关于我们</span>
|
||||||
|
<span><a href="#">公司简介</a></span>
|
||||||
|
<span><a href="#">发展历程</a></span>
|
||||||
|
<span><a href="#">企业文化</a></span>
|
||||||
|
<span><a href="#">联系我们</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="foot-2">
|
||||||
|
<span>联系我们</span>
|
||||||
|
<span>电话:400-888-8888</span>
|
||||||
|
<span>邮箱:huiqing@huiqing-cd.com</span>
|
||||||
|
<span>地址：四川成都</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="foot-w">@2024 Company All rights reserved</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import s1 from '@/assets/images/lbt1.jpeg'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
imagePath: {
|
||||||
|
s1: s1,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
hr {
|
||||||
|
border: 0;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #333;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.foot-w {
|
||||||
|
color: #858484;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.foot {
|
||||||
|
height: 400px;
|
||||||
|
background-color: #2e2e2e;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.img {
|
||||||
|
width: 70px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.img-logo {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.foot-box {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 200px;
|
||||||
|
background-color: #2e2e2e;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 70px 0;
|
||||||
|
}
|
||||||
|
.foot-1 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.foot-1 div:nth-child(2) {
|
||||||
|
color: #858484;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
.foot-2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
color: #858484;
|
||||||
|
}
|
||||||
|
.foot-2 span:nth-child(1) {
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,6 +1,7 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
import HomeView from '../views/home/homeView.vue'
|
import HomeView from '../views/home/homeView.vue'
|
||||||
|
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
routes: [
|
routes: [
|
||||||
@ -8,7 +9,8 @@ const router = createRouter({
|
|||||||
path: '/',
|
path: '/',
|
||||||
name: 'home',
|
name: 'home',
|
||||||
component: HomeView,
|
component: HomeView,
|
||||||
}
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -5,8 +5,12 @@ import s2 from '../../assets/images/lbt2.jpeg'
|
|||||||
import s3 from '../../assets/images/lbt3.jpeg'
|
import s3 from '../../assets/images/lbt3.jpeg'
|
||||||
import tb1 from '../../assets/images/tb1.png'
|
import tb1 from '../../assets/images/tb1.png'
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
|
import FootView from '../../components/footView.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
FootView,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
imagePath: {
|
imagePath: {
|
||||||
@ -68,7 +72,7 @@ export default {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-main style="padding: 0 20px">
|
<el-main class="main" style="padding: 0 20px">
|
||||||
<div class="carousel">
|
<div class="carousel">
|
||||||
<div class="slides" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
|
<div class="slides" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
|
||||||
<div class="slide" v-for="(slide, index) in slides" :key="index">
|
<div class="slide" v-for="(slide, index) in slides" :key="index">
|
||||||
@ -250,12 +254,222 @@ export default {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- -->
|
||||||
|
<div class="fan-mk">
|
||||||
|
<div class="fan-bt">解决方案</div>
|
||||||
|
<div class="fan-nr">
|
||||||
|
<div class="fan-left">
|
||||||
|
<div class="fan-wb1">金融解决方案</div>
|
||||||
|
<div class="fan-wb2">
|
||||||
|
为金融机构提供智能风控、数据分析、客户画像等全方位解决方案，助力数字化转型
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="fan-wb3">
|
||||||
|
<el-icon class="tb"><CircleCheckFilled /></el-icon>智能风控系统
|
||||||
|
</div>
|
||||||
|
<div class="fan-wb3">
|
||||||
|
<el-icon class="tb"><CircleCheckFilled /></el-icon>数据分析平台
|
||||||
|
</div>
|
||||||
|
<div class="fan-wb3">
|
||||||
|
<el-icon class="tb"><CircleCheckFilled /></el-icon>客户画像系统
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fan-right"><img class="img-7" :src="imagePath.s1" alt="tb1" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- -->
|
||||||
|
<div class="lx-mk">
|
||||||
|
<div class="lx-left">
|
||||||
|
<div class="lx-wb">联系我们</div>
|
||||||
|
<div>
|
||||||
|
<div class="lx-wb-1">姓名</div>
|
||||||
|
<div>
|
||||||
|
<el-input v-model="input" style="width: 600px" placeholder="请输入您的姓名" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="lx-wb-1">邮箱</div>
|
||||||
|
<div>
|
||||||
|
<el-input v-model="input" style="width: 600px" placeholder="请输入您的邮箱" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="lx-wb-1">需求描述</div>
|
||||||
|
<div>
|
||||||
|
<el-input
|
||||||
|
v-model="textarea"
|
||||||
|
style="width: 600px"
|
||||||
|
:rows="6"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入您的需求描述"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="lx-an-tj">
|
||||||
|
<el-button class="lx-an-tj-1" type="primary">提交</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lx-right">
|
||||||
|
<div class="lx-right-haed">
|
||||||
|
<div class="lx-wb-2">联系方式</div>
|
||||||
|
<div class="lx-wb-3">
|
||||||
|
<el-icon class="lx-tb-1"><PhoneFilled /></el-icon>
|
||||||
|
<div>
|
||||||
|
<div>电话</div>
|
||||||
|
<div class="lx-dh">400-888-8888</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lx-wb-3">
|
||||||
|
<el-icon class="lx-tb-1"><Message /></el-icon>
|
||||||
|
<div>
|
||||||
|
<div>邮箱</div>
|
||||||
|
<div class="lx-dh">huiqing@huiqing-cd.com</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lx-wb-3">
|
||||||
|
<el-icon class="lx-tb-1"><LocationInformation /></el-icon>
|
||||||
|
<div>
|
||||||
|
<div>地址</div>
|
||||||
|
<div class="lx-dh">四川成都</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lx-right-foot">
|
||||||
|
<div class="fan-right"><img class="img-8" :src="imagePath.s1" alt="tb1" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</el-main>
|
</el-main>
|
||||||
|
<FootView></FootView>
|
||||||
</el-container>
|
</el-container>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.lx-an-tj-1 {
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
.lx-an-tj {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.lx-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 700px;
|
||||||
|
margin-left: 150px;
|
||||||
|
}
|
||||||
|
.img-8 {
|
||||||
|
width: 600px;
|
||||||
|
height: 300px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.lx-tb-1 {
|
||||||
|
font-size: 25px;
|
||||||
|
color: #2d3fdd;
|
||||||
|
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.lx-wb-3 {
|
||||||
|
margin-left: 20px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.lx-dh {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.lx-wb-2 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.lx-right-haed {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 250px;
|
||||||
|
margin-right: 300px;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 600px;
|
||||||
|
margin-top: 50px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
.lx-wb-1 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.lx-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-right: 300px;
|
||||||
|
height: 500px;
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-left: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lx-wb {
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.lx-mk {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
margin-top: 180px;
|
||||||
|
height: 700px;
|
||||||
|
background-color: #f7f6f6;
|
||||||
|
}
|
||||||
|
.tb {
|
||||||
|
color: #2d3fdd;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.fan-bt {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.img-7 {
|
||||||
|
width: 600px;
|
||||||
|
height: 400px;
|
||||||
|
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.fan-nr {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.fan-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 300px;
|
||||||
|
margin-right: 300px;
|
||||||
|
}
|
||||||
|
.fan-wb1 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.fan-wb2 {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-weight: 100;
|
||||||
|
line-height: 1.5;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
.fan-wb3 {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.5;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
.fan-mk {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top: 80px;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
.dt-box {
|
.dt-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
@ -312,6 +526,7 @@ export default {
|
|||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
width: 480px;
|
width: 480px;
|
||||||
height: 250px;
|
height: 250px;
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.an-nu-1 {
|
.an-nu-1 {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
@ -378,7 +593,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
width: 550px;
|
width: 450px;
|
||||||
height: 250px;
|
height: 250px;
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user