duxianjin..
/
qn-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat:时间轴滚动

develop
杜贤金 2 years ago
parent
c18d45b1f7
commit
e25d55120f
2 changed files with 170 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      src/components/elStep.vue
  2. 206
      src/views/aboutUs.vue

33
src/components/elStep.vue
Unescape View File

@ -3,25 +3,34 @@
<div <div
class="el-step is-horizontal" class="el-step is-horizontal"
:class="{ isFlex: item.index == stepList.length }" :class="{ isFlex: item.index == stepList.length }"
style="flex-basis:50%;" style="flex-basis: 50%"
:style="{ :style="{
'flexBasis':(item.index==stepList.length?0:50)+'%', flexBasis: (item.index == stepList.length ? 0 : 50) + '%',
'maxWidth':(item.index==stepList.length?(1/stepList.length)*100:100)+'%' maxWidth:
(item.index == stepList.length ? (1 / stepList.length) * 100 : 100) +
'%',
}" }"
v-for="(item, index) in stepList" v-for="(item, index) in stepList"
:key="index" :key="index"
> >
<div class="el-step__head is-process"> <div class="el-step__head is-process">
<div class="el-step__line"> <div class="el-step__line">
<i class="el-step__line-inner" style="transition-delay:0ms;border-width:0;width:0%"></i> <i
class="el-step__line-inner"
style="transition-delay: 0ms; border-width: 0; width: 0%"
></i>
</div> </div>
</div> </div>
<div class="textCla"> <div class="textCla">
<div <div
class="el-step__icon is-text" class="el-step__icon is-text"
:class="{success:index<active, before:index>active, active:index==active}" :class="{
success: index < active,
before: index > active,
active: index == active,
}"
@click="clickStep(index, stepFunction)" @click="clickStep(index, stepFunction)"
style="position: relative;" style="position: relative"
> >
<div class="pTitle">{{ item.title }}</div> <div class="pTitle">{{ item.title }}</div>
</div> </div>
@ -33,16 +42,16 @@
export default { export default {
methods: { methods: {
//点击步骤条后回调 //点击步骤条后回调
clickStep(index, callback) { clickStep(index) {
console.log(index, callback, 8787); // if (callback) callback(index);
if (callback) callback(index); this.$emit("clickStep", index);
} },
}, },
props: { props: {
active: { type: Number, default: 1 }, active: { type: Number, default: 1 },
stepFunction: { type: Function, default: () => {} }, stepFunction: { type: Function, default: () => {} },
stepList: { type: Array, default: () => [] } stepList: { type: Array, default: () => [] },
} },
}; };
</script> </script>
<style lang='less' scoped> <style lang='less' scoped>

206
src/views/aboutUs.vue
Unescape View File

@ -3,7 +3,11 @@
<el-backtop /> <el-backtop />
<top :activeIndex="activeIndexs"></top> <top :activeIndex="activeIndexs"></top>
<div class="ban"> <div class="ban">
<el-image style="width: 100%" :src="require('@/assets/img/home/pressimg.png')" fit="fill"></el-image> <el-image
style="width: 100%"
:src="require('@/assets/img/home/pressimg.png')"
fit="fill"
></el-image>
</div> </div>
<div class="solutabs"> <div class="solutabs">
<el-menu <el-menu
@ -31,9 +35,9 @@
山东青鸟工业互联网有限公司为山东省第4家获批的国家工业互联网标识解析二级节点（综合型）、国家高新技术企业、山东省双软企业、科技型中小企业、创新型中小企业、山东省第一批网络安全重点企业、山东省大数据创新服务机构、济南市工业互联网产业链群链主企业，主要从事物联网领域的标识解析系统研发与服务，是一家致力于为客户提供可信数字基础设施的标识解析增值运营商，提供物联网、工业云、工业大数据等产品、解决方案及平台运营。公司运营中心位于济南中央商务区CBD。团队核心成员毕业于山东大学、吉林大学、中国人大、山东财经等知名高校，均在物联网、大数据、通信运营领域拥有 山东青鸟工业互联网有限公司为山东省第4家获批的国家工业互联网标识解析二级节点（综合型）、国家高新技术企业、山东省双软企业、科技型中小企业、创新型中小企业、山东省第一批网络安全重点企业、山东省大数据创新服务机构、济南市工业互联网产业链群链主企业，主要从事物联网领域的标识解析系统研发与服务，是一家致力于为客户提供可信数字基础设施的标识解析增值运营商，提供物联网、工业云、工业大数据等产品、解决方案及平台运营。公司运营中心位于济南中央商务区CBD。团队核心成员毕业于山东大学、吉林大学、中国人大、山东财经等知名高校，均在物联网、大数据、通信运营领域拥有
10 年以上工作经验。 10 年以上工作经验。
</div> </div>
<div <div style="padding-top: 20px">
style="padding-top: 20px" 作为省物联网协会孵化的工业互联网标识解析二级节点，山东青鸟所建设工业互联网标识解析物联网行业省级节点公共服务平台、省物联网检测认证公共服务平台已纳入“山东省国民经济十四五规划和2035年远景目标”中的新型基础设施建设部分的重要内容。
>作为省物联网协会孵化的工业互联网标识解析二级节点，山东青鸟所建设工业互联网标识解析物联网行业省级节点公共服务平台、省物联网检测认证公共服务平台已纳入“山东省国民经济十四五规划和2035年远景目标”中的新型基础设施建设部分的重要内容。</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -51,30 +55,44 @@
/> />
<div class="time-line"> <div class="time-line">
<div class> <div class>
<ElStep :stepFunction="stepFunction" :active="active" :stepList="stepList"></ElStep> <ElStep
</div> @clickStep="stepFunction"
</div> :active="active"
</div> :stepList="stepList"
<div class="allscroll modelWidth" ref="scroll"> ></ElStep>
<div class="scroll modelWidth flex"> </div>
<div class="scollview" v-for="(item,index) in 7" :key="index </div>
"> </div>
<div class="year">2021</div> <div class="allscroll">
<div class="scrollcontent"> <div class="scroll">
<div class="months">2月</div> <el-carousel
<div class="right">山东青鸟通过2022年工业互联网试点</div> type="card"
indicator-position="none"
:autoplay="false"
:initial-index="scrollIndex"
@change="handleScroll"
ref="scroll"
>
<el-carousel-item
v-for="(item, index) in history"
:key="index"
>
<div class="scollview">
<div class="year">{{ item.name }}</div>
<div
class="scrollcontent"
v-for="(items, indexs) in item.arr"
:key="indexs"
>
<div class="months">{{ items.month }}</div>
<div class="right">
{{ items.content }}
</div> </div>
</div> </div>
</div> </div>
</el-carousel-item>
</el-carousel>
</div> </div>
<div class="person-wrap" ref="personWrap">
<ul class="person-list" ref="personTab">
<li class="person-item">1</li>
<li class="person-item">2</li>
<li class="person-item">3</li>
<li class="person-item">4</li>
<li class="person-item">5</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@ -246,7 +264,9 @@
<div class="floor5 modelWidth"> <div class="floor5 modelWidth">
<headline heading="联系方式" footing="Contact information" /> <headline heading="联系方式" footing="Contact information" />
<div class="floor5-title">济南总部</div> <div class="floor5-title">济南总部</div>
<div class="inform">山东省济南市历下区千佛山路1号建邦创意星空广场A座10楼A1002室</div> <div class="inform">
山东省济南市历下区千佛山路1号建邦创意星空广场A座10楼A1002室
</div>
<div class="inform">总部电话：0531-58252556</div> <div class="inform">总部电话：0531-58252556</div>
<div class="inform">工业互联网业务：15066150005 王老师</div> <div class="inform">工业互联网业务：15066150005 王老师</div>
<div class="inform">物联网业务：15169050007 王老师</div> <div class="inform">物联网业务：15169050007 王老师</div>
@ -265,14 +285,13 @@ import top from "@/components/header.vue";
import bottom from "@/components/footer.vue"; import bottom from "@/components/footer.vue";
import headline from "@/components/headline.vue"; import headline from "@/components/headline.vue";
import ElStep from "@/components/elStep.vue"; import ElStep from "@/components/elStep.vue";
import BScroll from "better-scroll";
export default { export default {
name: "HomeView", name: "HomeView",
components: { components: {
top, top,
bottom, bottom,
headline, headline,
ElStep ElStep,
}, },
data() { data() {
return { return {
@ -285,34 +304,92 @@ export default {
{ index: 1, title: "2020" }, { index: 1, title: "2020" },
{ index: 2, title: "2021" }, { index: 2, title: "2021" },
{ index: 3, title: "2022" }, { index: 3, title: "2022" },
{ index: 4, title: "现在" } { index: 4, title: "现在" },
], ],
bscorll: null, bscorll: null,
scroll: null scroll: null,
}; history: [
{
name: "2020",
arr: [
{
month: "1月",
content: "山东青鸟通过2022年工业互联网试点",
},
{
month: "2月",
content: "山东青鸟通过2022年工业互联网试点",
},
{
month: "3月",
content: "山东青鸟通过2022年工业互联网试点",
}, },
// mounted() { ],
// this.$nextTick(() => { },
// this.scroll = new Bscroll(this.$refs.scroll, {}); {
// }); name: "2021",
// }, arr: [
// created() { {
// var that = this; month: "1月",
// var inner = document.getElementsByClassName("floor"); content: "山东青鸟通过2022年工业互联网试点",
// // 注册滚动监听事件 },
// window.onscroll = function() { {
// // 获取滚动条距离页面底部的距离 month: "2月",
// var tops = document.documentElement.scrollTop || document.body.scrollTop; content: "山东青鸟通过2022年工业互联网试点",
// // console.log(tops) },
// //判断滚动的位置，从而改变楼层选项的样式 ],
// for (var i = 0; i < inner.length; i++) { },
// if (inner[i].offsetTop <= tops + 200 && tops <= inner[i].offsetTop) { {
// that.num = i; name: "2022",
// } arr: [
// } {
// }; month: "1月",
// }, content: "山东青鸟通过2022年工业互联网试点",
},
{
month: "2月",
content: "山东青鸟通过2022年工业互联网试点",
},
{
month: "3月",
content: "山东青鸟通过2022年工业互联网试点",
},
{
month: "4月",
content: "山东青鸟通过2022年工业互联网试点",
},
],
},
{
name: "2023",
arr: [
{
month: "1月",
content: "山东青鸟通过2022年工业互联网试点",
},
{
month: "2月",
content: "山东青鸟通过2022年工业互联网试点",
},
{
month: "3月",
content: "山东青鸟通过2022年工业互联网试点",
},
{
month: "4月",
content: "山东青鸟通过2022年工业互联网试点",
},
],
},
],
scrollIndex: null,
};
},
created() {
this.scrollIndex = this.history.length - 1;
this.active = this.history.length - 1;
},
methods: { methods: {
// 楼层跳转的方法index // 楼层跳转的方法index
handleSelect(index) { handleSelect(index) {
@ -321,7 +398,7 @@ export default {
var inner = document.getElementsByClassName("floor"); var inner = document.getElementsByClassName("floor");
window.scrollTo({ window.scrollTo({
top: inner[index].offsetTop - 50, top: inner[index].offsetTop - 50,
behavior: "smooth" behavior: "smooth",
}); });
}, },
@ -337,12 +414,15 @@ export default {
}, },
stepFunction(index) { stepFunction(index) {
this.active = index; this.active = index;
this.goStep(this.active); this.scrollIndex = index;
this.$refs.scroll.activeIndex = index;
},
//时间轴
handleScroll(e) {
this.active = e;
this.scrollIndex = e;
},
}, },
goStep(index) {
console.log(index, 78787);
}
}
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -381,13 +461,15 @@ export default {
} }
//时间线 //时间线
.scroll { .scroll {
height: 200px; // width: 1200px;
width: 1200px;
padding-top: 15px; padding-top: 15px;
position: relative;
.scollview { .scollview {
width: 25%; display: inline-block;
padding: 0 6px; position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
.year { .year {
font-size: 24px; font-size: 24px;
font-family: PingFang SC; font-family: PingFang SC;

Write Preview
Loading…
Cancel
Save