diff --git a/src/components/header.vue b/src/components/header.vue
index 08a5e28..4216f82 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -152,7 +152,7 @@ export default {
name: "大数据核验平台",
},
],
- activeIndex: 0,
+
timer: null,
showIndex: 0,
};
@@ -161,7 +161,6 @@ export default {
methods: {
//跳转导航
hanldeNav(index) {
- this.activeIndex = index;
if (index == 4) {
this.$router.push({
path: "/aboutUs",
diff --git a/src/views/aboutUs.vue b/src/views/aboutUs.vue
new file mode 100644
index 0000000..9672c6d
--- /dev/null
+++ b/src/views/aboutUs.vue
@@ -0,0 +1,127 @@
+<template>
+ <div class="home">
+ <el-backtop />
+ <top :activeIndex="activeIndexs"></top>
+ <div class="ban">
+ <el-image
+ style="width: 100%; height: 500px"
+ :src="require('@/assets/img/home/content.png')"
+ fit="fill"
+ ></el-image>
+ </div>
+ <div class="solutabs">
+ <el-menu
+ :default-active="solutabsIndex"
+ class="el-menu-demo"
+ mode="horizontal"
+ @select="handleSelect"
+ active-text-color="#3370FF"
+ >
+ <el-menu-item index="0">公司简介</el-menu-item>
+ <el-menu-item index="1">发展历程</el-menu-item>
+ <el-menu-item index="2">愿景使命</el-menu-item>
+ <el-menu-item index="3">公司团队</el-menu-item>
+ <el-menu-item index="4">联系方式</el-menu-item>
+ </el-menu>
+ </div>
+ <div>
+ <div class="box-style">
+ <div class="box-style-box">
+ <div class="floor"><h1>1</h1></div>
+ </div>
+ </div>
+ <div class="box-style">
+ <div class="box-style-box">
+ <div class="floor"><h1>2</h1></div>
+ </div>
+ </div>
+ <div class="box-style">
+ <div class="box-style-box">
+ <div class="floor"><h1>3</h1></div>
+ </div>
+ </div>
+ <div class="box-style">
+ <div class="box-style-box">
+ <div class="floor"><h1>4</h1></div>
+ </div>
+ </div>
+ <div class="box-style">
+ <div class="box-style-box">
+ <div class="floor"><h1>5</h1></div>
+ </div>
+ </div>
+ </div>
+ <bottom />
+ <el-backtop />
+ </div>
+</template>
+<script>
+import top from "@/components/header.vue";
+import bottom from "@/components/footer.vue";
+import headline from "@/components/headline.vue";
+export default {
+ name: "HomeView",
+ components: {
+ top,
+ bottom,
+ headline,
+ },
+ data() {
+ return {
+ activeIndexs: 4,
+ solutabsIndex: "0",
+ num: 0, //跳转楼层
+ };
+ },
+ created() {
+ var that = this;
+ var inner = document.getElementsByClassName("floor");
+ // 注册滚动监听事件
+ window.onscroll = function () {
+ // 获取滚动条距离页面底部的距离
+ var tops = document.documentElement.scrollTop || document.body.scrollTop;
+ // console.log(tops)
+ //判断滚动的位置，从而改变楼层选项的样式
+ for (var i = 0; i < inner.length; i++) {
+ if (inner[i].offsetTop <= tops + 200 && tops <= inner[i].offsetTop) {
+ that.num = i;
+ }
+ }
+ };
+ },
+ methods: {
+ // 楼层跳转的方法index
+ handleSelect(index) {
+ this.num = index;
+ // 获取所有的楼层
+ var inner = document.getElementsByClassName("floor");
+ window.scrollTo({
+ top: inner[index].offsetTop - 50,
+ behavior: "smooth",
+ });
+ },
+ },
+};
+</script>
+<style lang="less" scoped>
+.box-style {
+ width: 100%;
+
+ .box-style-box {
+ width: 100%;
+ }
+}
+
+.solutabs {
+ width: 100%;
+ margin: 0px auto;
+ .el-menu-demo {
+ display: flex;
+ justify-content: space-between;
+ }
+}
+.floor {
+ width: 100%;
+ height: 500px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home.vue b/src/views/home.vue
index c6da4a3..f18cf74 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -125,7 +125,7 @@
<div class="solutabscontent">
<div class="left">
<el-image
- style="width: 40vw; height: 400px"
+ style="width: 100%"
:src="require('@/assets/img/home/content.png')"
></el-image>
</div>
@@ -141,7 +141,9 @@
</div>
<div class="soluright">
<div>物联数据感知</div>
- <div>以物联网智能监管终端为核心，通过物联网技术感...</div>
+ <div>
+ 以物联网智能监管终端为核心，通过物联网技术监管终端为核心，通过物联网技术监管终端为核心，通过物联网技术感...
+ </div>
</div>
</div>
<div class="understand">
@@ -226,14 +228,14 @@
<!-- 新闻中心 -->
<div
class="box-style"
- style="background: #e5eff9; padding-top: 60px; padding-bottom: 40px"
+ style="background: #e5eff9; padding-top: 60px; padding-bottom: 60px"
>
<div class="box-style-box">
<headline heading="新闻中心" footing="News Center" />
<div class="journalism">
<div class="jo-left">
<el-image
- style="width: 100%; height: 400px"
+ style="width: 100%"
:src="require('@/assets/img/home/content.png')"
fit="fill"
></el-image>
@@ -242,9 +244,8 @@
<div class="jo-content" v-for="item in 3" :key="item">
<div class="jo-img">
<el-image
- style="height: 100%; width: 100%"
+ style="height: 100%"
:src="require('@/assets/img/home/content.png')"
- fit="fill"
></el-image>
</div>
<div class="jo-detail">
@@ -272,11 +273,14 @@
<div class="partner">
<div class="partner-left">
<div>
- <img :src="require('@/assets/img/home/hb.png')" />
+ <img
+ style="width: 100%"
+ :src="require('@/assets/img/home/hb.png')"
+ />
</div>
</div>
<div class="partner-right-box">
- <div class="partner-right" :style="{ top }">
+ <div class="partner-right">
<div
class="par-company"
v-for="(item, index) in company"
@@ -461,7 +465,6 @@ export default {
//指数
.technical {
height: 130px;
-
text-align: center;
.exponent {
flex: 1.5;
@@ -654,15 +657,17 @@ export default {
margin-top: 20px;
display: flex;
width: 100%;
-
+ justify-content: space-around;
.left {
- width: 60%;
+ width: 50%;
}
.right {
- width: 40%;
+ width: 45%;
+
.right-content {
width: 100%;
- padding: 30px 0 0 20%;
+ padding: 30px 10px 0 0;
+
.top {
font-size: 24px;
font-family: PingFang SC;
@@ -678,6 +683,8 @@ export default {
}
.soluright {
padding-left: 10px;
+ width: 90%;
+
& > div:nth-child(1) {
font-size: 18px;
font-family: PingFang SC;
@@ -691,6 +698,7 @@ export default {
font-weight: 600;
color: #6a7890;
line-height: 32px;
+ width: 90%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -891,29 +899,27 @@ export default {
.jo-right {
width: 48%;
- height: 100%;
display: flex;
flex-direction: column;
- align-items: center;
-
+ justify-content: space-between;
.jo-content {
width: 100%;
- height: 120px;
display: flex;
- flex: 1;
align-items: center;
- margin-bottom: 18px;
+
.jo-img {
width: 30%;
- height: 120px;
+ display: flex;
+ align-items: center;
}
.jo-detail {
width: 70%;
- height: 120px;
+ padding: 10px 15px;
background: #fff;
- padding: 20px 30px;
+ height: 94px;
.jo-title {
font-size: 14px;
+
font-family: PingFang SC;
font-weight: 500;
color: #333333;
@@ -927,7 +933,6 @@ export default {
font-family: PingFang SC;
font-weight: 400;
color: #333333;
- line-height: 26px;
padding-top: 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
@@ -960,8 +965,8 @@ export default {
align-items: end;
.par-company {
- width: 240px;
- height: 80px;
+ width: 200px;
+ height: 60px;
border: 1px solid #d7dbf0;
background: #ffffff;