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

feat:发展历程滚动

develop
杜贤金 2 years ago
parent
2bc8169c55
commit
c18d45b1f7
9 changed files with 325 additions and 222 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      README.md
  2. 2
      package.json
  3. 97
      src/components/elStep.vue
  4. 80
      src/components/footer.vue
  5. 12
      src/components/headline.vue
  6. 1
      src/main.js
  7. 149
      src/views/aboutUs.vue
  8. 180
      src/views/home.vue
  9. 24
      vue.config.js

2
README.md
Unescape View File

@ -7,7 +7,7 @@ npm install
### Compiles and hot-reloads for development
```
npm run serve
npm run dev
```
### Compiles and minifies for production

2
package.json
Unescape View File

@ -7,8 +7,10 @@
"build": "vue-cli-service build"
},
"dependencies": {
"@better-scroll/core": "^2.5.0",
"animate.css": "^3.5.1",
"axios": "^0.27.2",
"better-scroll": "^2.5.0",
"core-js": "^3.8.3",
"element-ui": "^2.15.9",
"html2canvas": "^1.4.1",

97
src/components/elStep.vue
Unescape View File

@ -0,0 +1,97 @@
<template>
<div class="steps el-steps el-steps--horizontal">
<div
class="el-step is-horizontal"
:class="{isFlex:item.index == stepList.length}"
style="flex-basis:50%;"
:style="{
'flexBasis':(item.index==stepList.length?0:50)+'%',
'maxWidth':(item.index==stepList.length?(1/stepList.length)*100:100)+'%'
}"
v-for="(item,index) in stepList"
:key="index"
>
<div class="el-step__head is-process">
<div class="el-step__line">
<i class="el-step__line-inner" style="transition-delay:0ms;border-width:0;width:0%"></i>
</div>
</div>
<div class="textCla">
<div
class="el-step__icon is-text"
:class="{success:index<active, before:index>active, active:index==active}"
@click="clickStep(index,stepFunction)"
style="position: relative;"
>
<div class="pTitle">{{item.title}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
//点击步骤条后回调
clickStep(index, callback) {
console.log(index, callback, 8787);
if (callback) callback(index);
}
},
props: {
active: { type: Number, default: 1 },
stepFunction: { type: Function, default: () => {} },
stepList: { type: Array, default: () => [] }
}
};
</script>
<style lang='less' scoped>
.textCla {
display: flex;
flex-direction: column;
}
//圈
.el-step__icon.is-text {
height: 36px;
width: 36px;
border: 5px solid #6a6c72 !important;
cursor: pointer;
}
.el-step.is-horizontal .el-step__line {
top: 18px;
}
.success {
background-color: #6a6c72 !important;
color: #6a6c72 !important;
}
.active {
background-color: #fff !important;
color: #fff;
border: 5px solid #6a6c72 !important;
}
.before {
background-color: #6a6c72;
color: #6a6c72 !important;
span {
color: #6a6c72;
}
}
.pTitle {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
position: absolute;
bottom: -30px;
}
// .pTitle2 {
// font-size: 14px;
// font-family: PingFang SC;
// font-weight: 400;
// color: #9b9b9b;
// position: absolute;
// bottom: -25px;
// }
</style>

80
src/components/footer.vue
Unescape View File

@ -5,34 +5,17 @@
<div class="left">
<div class="type" v-for="(item, index) in footArray" :key="index">
<div class="line"></div>
<div class="font" v-for="(items, indexs) in item" :key="indexs">
{{ items.name }}
</div>
<div class="font" v-for="(items, indexs) in item" :key="indexs">{{ items.name }}</div>
</div>
</div>
<div class="right">
<div class="need">
<div class="flex_btw">
<input
id="input1"
type="text"
v-model="formInline.name"
placeholder="姓名"
/>
<input
id="input2"
type="text"
v-model="formInline.phone"
placeholder="手机"
/>
<input id="input1" type="text" v-model="formInline.name" placeholder="姓名" />
<input id="input2" type="text" v-model="formInline.phone" placeholder="手机" />
</div>
<div style="margin-top: 6px; flex: 2">
<input
id="input3"
type="text"
v-model="formInline.need"
placeholder="您的需求"
/>
<input id="input3" type="text" v-model="formInline.need" placeholder="您的需求" />
</div>
<div class="submit">提交申请</div>
</div>
@ -46,20 +29,13 @@
<div>总部电话：17610200139</div>
<div>客服微信：17610200139</div>
</div>
<div class="address-bottom">
地址：山东省济南市历下区千佛山路1号建邦创意星空广场A座10楼A1002室
</div>
<div class="address-bottom">
运营中心：山东省济南市历下区千佛山路1号建邦创意星空广场A座10楼A1002室
</div>
<div class="address-bottom">地址：山东省济南市历下区千佛山路1号建邦创意星空广场A座10楼A1002室</div>
<div class="address-bottom">运营中心：山东省济南市历下区千佛山路1号建邦创意星空广场A座10楼A1002室</div>
<div class="address-bottom">ICP备案号：京ICP备13008577号-1</div>
</div>
<div class="qr flex">
<div>
<img
style="width: 80px; height: 80px"
:src="require('@/assets/img/home/qr.png')"
/>
<img style="width: 80px; height: 80px" :src="require('@/assets/img/home/qr.png')" />
<div class="wx">微信公众号</div>
</div>
</div>
@ -75,56 +51,56 @@ export default {
footArray: [
[
{
name: "工业SAAS平台",
name: "工业SAAS平台"
},
{
name: "硬件设备",
name: "硬件设备"
},
{
name: "工业互联网",
name: "工业互联网"
},
{
name: "数促中心",
},
name: "数促中心"
}
],
[
{
name: "公司资讯",
name: "公司资讯"
},
{
name: "行业动态",
name: "行业动态"
},
{
name: "工业互联网",
name: "工业互联网"
},
{
name: "技术分享",
},
name: "技术分享"
}
],
[
{
name: "商业合作",
},
name: "商业合作"
}
],
[
{
name: "企业介绍",
name: "企业介绍"
},
{
name: "发展历程",
name: "发展历程"
},
{
name: "愿景使命",
},
],
name: "愿景使命"
}
]
],
formInline: {
name: "",
phone: "",
need: "",
},
need: ""
}
};
},
}
};
</script>
@ -141,7 +117,7 @@ export default {
.left {
flex: 1.5;
display: flex;
align-items: start;
align-items: flex-start;
justify-content: space-between;
padding-right: 100px;
position: relative;

12
src/components/headline.vue
Unescape View File

@ -1,15 +1,10 @@
<template>
<div class="mode">
<div class="title flex_col">
<div :class="type == 'white' ? 'noheading' : 'heading'">
{{ this.heading }}
</div>
<div :class="type == 'white' ? 'noheading' : 'heading'">{{ this.heading }}</div>
<div class="footing">{{ this.footing }}</div>
<div>
<img
style="height: 24px; width: 200px"
src="@/assets/img/home/line.png"
/>
<img style="height: 24px; width: 200px" src="@/assets/img/home/line.png" />
</div>
</div>
</div>
@ -19,7 +14,7 @@ export default {
props: ["heading", "footing", "type"],
data() {
return {};
},
}
};
</script>
@ -45,6 +40,7 @@ export default {
color: #666;
opacity: 0.3;
margin-top: -18px;
margin-bottom: 10px;
}
}
</style>

1
src/main.js
Unescape View File

@ -4,6 +4,7 @@ import router from "./router";
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import animated from 'animate.css'
Vue.use(animated);
Vue.use(Element);
import "@/assets/css/style.css";

149
src/views/aboutUs.vue
Unescape View File

@ -3,11 +3,7 @@
<el-backtop />
<top :activeIndex="activeIndexs"></top>
<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 class="solutabs">
<el-menu
@ -35,9 +31,9 @@
山东青鸟工业互联网有限公司为山东省第4家获批的国家工业互联网标识解析二级节点（综合型）、国家高新技术企业、山东省双软企业、科技型中小企业、创新型中小企业、山东省第一批网络安全重点企业、山东省大数据创新服务机构、济南市工业互联网产业链群链主企业，主要从事物联网领域的标识解析系统研发与服务，是一家致力于为客户提供可信数字基础设施的标识解析增值运营商，提供物联网、工业云、工业大数据等产品、解决方案及平台运营。公司运营中心位于济南中央商务区CBD。团队核心成员毕业于山东大学、吉林大学、中国人大、山东财经等知名高校，均在物联网、大数据、通信运营领域拥有
10 年以上工作经验。
</div>
<div style="padding-top: 20px">
作为省物联网协会孵化的工业互联网标识解析二级节点，山东青鸟所建设工业互联网标识解析物联网行业省级节点公共服务平台、省物联网检测认证公共服务平台已纳入“山东省国民经济十四五规划和2035年远景目标”中的新型基础设施建设部分的重要内容。
</div>
<div
style="padding-top: 20px"
>作为省物联网协会孵化的工业互联网标识解析二级节点，山东青鸟所建设工业互联网标识解析物联网行业省级节点公共服务平台、省物联网检测认证公共服务平台已纳入“山东省国民经济十四五规划和2035年远景目标”中的新型基础设施建设部分的重要内容。</div>
</div>
</div>
</div>
@ -54,10 +50,32 @@
style="padding-top: 40px"
/>
<div class="time-line">
<div class=""></div>
<div class>
<ElStep :stepFunction="stepFunction" :active="active" :stepList="stepList"></ElStep>
</div>
</div>
</div>
<div class="allscroll modelWidth" ref="scroll">
<div class="scroll modelWidth flex">
<div class="scollview" v-for="(item,index) in 7" :key="index
">
<div class="year">2021</div>
<div class="scrollcontent">
<div class="months">2月</div>
<div class="right">山东青鸟通过2022年工业互联网试点</div>
</div>
</div>
</div>
</div>
<div style="width: 100%; height: 300px">1231232</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>
@ -228,9 +246,7 @@
<div class="floor5 modelWidth">
<headline heading="联系方式" footing="Contact information" />
<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">工业互联网业务：15066150005 王老师</div>
<div class="inform">物联网业务：15169050007 王老师</div>
@ -248,12 +264,15 @@
import top from "@/components/header.vue";
import bottom from "@/components/footer.vue";
import headline from "@/components/headline.vue";
import ElStep from "@/components/elStep.vue";
import BScroll from "better-scroll";
export default {
name: "HomeView",
components: {
top,
bottom,
headline,
ElStep
},
data() {
return {
@ -261,24 +280,39 @@ export default {
solutabsIndex: "0",
solutabsIndexs: "0",
num: 0, //跳转楼层
active: 0, //发展历程
stepList: [
{ index: 1, title: "2020" },
{ index: 2, title: "2021" },
{ index: 3, title: "2022" },
{ index: 4, title: "现在" }
],
bscorll: null,
scroll: null
};
},
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;
}
}
};
},
// mounted() {
// this.$nextTick(() => {
// this.scroll = new Bscroll(this.$refs.scroll, {});
// });
// },
// 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) {
@ -287,14 +321,28 @@ export default {
var inner = document.getElementsByClassName("floor");
window.scrollTo({
top: inner[index].offsetTop - 50,
behavior: "smooth",
behavior: "smooth"
});
},
handleSelects(index) {
//荣誉
},
},
inputVal(val) {
this.val = val;
},
submit() {
console.log(this.val);
},
stepFunction(index) {
this.active = index;
this.goStep(this.active);
},
goStep(index) {
console.log(index, 78787);
}
}
};
</script>
<style lang="less" scoped>
@ -327,6 +375,45 @@ export default {
background-size: cover;
.time-line {
text-align: center;
width: 600px;
margin: 30px auto 0;
}
}
//时间线
.scroll {
height: 200px;
width: 1200px;
padding-top: 15px;
.scollview {
width: 25%;
padding: 0 6px;
.year {
font-size: 24px;
font-family: PingFang SC;
font-weight: 500;
font-style: italic;
color: #20222a;
padding-bottom: 9px;
border-bottom: 1px solid #e5e5e5;
}
.scrollcontent {
display: flex;
padding-top: 15px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
font-style: italic;
color: #666666;
line-height: 32px;
.months {
width: 10%;
}
.right {
width: 88%;
padding-left: 2%;
}
}
}
}

180
src/views/home.vue
Unescape View File

@ -16,11 +16,7 @@
<div class="technical flex_center">
<div class="exponent max">
<div class="imgs max">
<img
class="logo3"
style="height: 90px"
src="@/assets/img/home/logo3.png"
/>
<img class="logo3" style="height: 90px" src="@/assets/img/home/logo3.png" />
<div class="exponentTitle">平台服务指数</div>
<div class="more-box">更多数据 →</div>
</div>
@ -68,32 +64,21 @@
<div class="detail-box" v-for="(item, index) in saas" :key="index">
<div class="contant">
<div>
<img style="width: 55px" :src="item.img" alt="" />
<img style="width: 55px" :src="item.img" alt />
</div>
<div class="title1">{{ item.title1 }}</div>
<div class="title2">{{ item.title2 }}</div>
<div class="showplay">
<div
v-for="(items, indexs) in item.arr"
:key="indexs"
class="showplayName"
>
<div v-for="(items, indexs) in item.arr" :key="indexs" class="showplayName">
<span>{{ items.names }}</span>
</div>
</div>
</div>
<div class="bottom">
<el-image
:src="require('@/assets/img/home/dian.png')"
fit="fill"
></el-image>
<el-image :src="require('@/assets/img/home/dian.png')" fit="fill"></el-image>
</div>
</div>
<el-image
class="word"
:src="require('@/assets/img/home/word.png')"
fit="fill"
></el-image>
<el-image class="word" :src="require('@/assets/img/home/word.png')" fit="fill"></el-image>
</div>
</div>
</div>
@ -117,37 +102,25 @@
@select="handleSelect"
active-text-color="#3370FF"
>
<el-menu-item index="1"
>工业互联网标识解析企业节点一体化设备</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="3">工业互联网标识解析二级节点建设服务</el-menu-item>
<el-menu-item index="4">青鸟智能物联管控系统</el-menu-item>
</el-menu>
<div class="solutabscontent">
<div class="left">
<el-image
style="width: 100%"
:src="require('@/assets/img/home/content.png')"
></el-image>
<el-image style="width: 100%" :src="require('@/assets/img/home/content.png')"></el-image>
</div>
<div class="right">
<div class="right-content">
<div class="top">工业互联网+区块链</div>
<div class="bottom" v-for="item in 3" :key="item">
<div class="leftimg">
<img
src="@/assets/img/home/computer.png"
style="width: 40px"
/>
<img src="@/assets/img/home/computer.png" style="width: 40px" />
</div>
<div class="soluright">
<div>物联数据感知</div>
<div>
以物联网智能监管终端为核心，通过物联网技术监管终端为核心，通过物联网技术监管终端为核心，通过物联网技术感...
</div>
<div>以物联网智能监管终端为核心，通过物联网技术监管终端为核心，通过物联网技术监管终端为核心，通过物联网技术感...</div>
</div>
</div>
<div class="understand">
@ -187,11 +160,7 @@
</div>
<div class="usround-box">
<div class="usround">
<img
class="usround-img"
src="@/assets/img/home/us1.png"
alt=""
/>
<img class="usround-img" src="@/assets/img/home/us1.png" alt />
</div>
</div>
</div>
@ -199,22 +168,14 @@
<div class="usecenter">
<img src="@/assets/img/home/outquan.png" style="width: 250px" />
<div class="annular">
<img
class="uselogo"
src="@/assets/img/home/logo2.png"
style="width: 130px"
/>
<img class="uselogo" src="@/assets/img/home/logo2.png" style="width: 130px" />
</div>
</div>
<div class="useright">
<div class="useleft-detail" v-for="item in 3" :key="item">
<div class="usround-box">
<div class="usround">
<img
class="usround-img"
src="@/assets/img/home/us1.png"
alt=""
/>
<img class="usround-img" src="@/assets/img/home/us1.png" alt />
</div>
</div>
<div class="usContent">
@ -230,10 +191,7 @@
</div>
</div>
<!-- 新闻中心 -->
<div
class="box-style"
style="background: #e5eff9; padding-top: 60px; padding-bottom: 60px"
>
<div class="box-style" style="background: #e5eff9; padding-top: 60px; padding-bottom: 60px">
<div class="box-style-box">
<headline heading="新闻中心" footing="News Center" />
<div class="journalism">
@ -248,21 +206,17 @@
<div class="jo-right">
<div class="jo-content" v-for="item in 3" :key="item">
<div class="jo-img">
<el-image
style="height: 100%"
:src="require('@/assets/img/home/pressleft.png')"
></el-image>
<el-image style="height: 100%" :src="require('@/assets/img/home/pressleft.png')"></el-image>
</div>
<div class="jo-detail">
<div class="jo-title">
热烈祝贺山东青鸟顺利通过国家“高新技术企业”认定
</div>
<div class="jo-title">热烈祝贺山东青鸟顺利通过国家“高新技术企业”认定</div>
<div class="jo-title-bottom">
根据《高新技术企业认定管理办法》（国科发火〔2016〕32号）
和《高新技术企业认定管理工作指引》（国科发火〔2016〕...
</div>
<div class="jo-more">
了结更多<i class="el-icon-video-play"></i>
了结更多
<i class="el-icon-video-play"></i>
</div>
</div>
</div>
@ -272,29 +226,19 @@
</div>
<!-- 合作客户 -->
<div
class="box-style"
style="background: #fff; padding-top: 60px; padding-bottom: 40px"
>
<div class="box-style" style="background: #fff; padding-top: 60px; padding-bottom: 40px">
<div class="box-style-box">
<headline heading="合作客户" footing="Solution" />
<div class="partner">
<div class="partner-left">
<div>
<img
style="width: 100%"
: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">
<div
class="par-company"
v-for="(item, index) in company"
:key="index"
>
<img :src="item.img" alt="" />
<div class="par-company" v-for="(item, index) in company" :key="index">
<img :src="item.img" alt />
</div>
</div>
</div>
@ -314,7 +258,7 @@ export default {
components: {
top,
bottom,
headline,
headline
},
data() {
return {
@ -329,21 +273,21 @@ export default {
arr: [
{
icon: "",
names: "权威授权",
names: "权威授权"
},
{
icon: "",
names: "严格准入",
names: "严格准入"
},
{
icon: "",
names: "精确查询",
names: "精确查询"
},
{
icon: "",
names: "安全稳定",
},
],
names: "安全稳定"
}
]
},
{
name: "2",
@ -353,21 +297,21 @@ export default {
arr: [
{
icon: "",
names: "星火链网",
names: "星火链网"
},
{
icon: "",
names: "数据存证",
names: "数据存证"
},
{
icon: "",
names: "标识赋码",
names: "标识赋码"
},
{
icon: "",
names: "行业监管",
},
],
names: "行业监管"
}
]
},
{
name: "3",
@ -377,21 +321,21 @@ export default {
arr: [
{
icon: "",
names: "接入便捷",
names: "接入便捷"
},
{
icon: "",
names: "产品全面",
names: "产品全面"
},
{
icon: "",
names: "使用安全",
names: "使用安全"
},
{
icon: "",
names: "数据统计",
},
],
names: "数据统计"
}
]
},
{
name: "4",
@ -401,55 +345,55 @@ export default {
arr: [
{
icon: "",
names: "敏捷易用",
names: "敏捷易用"
},
{
icon: "",
names: "完备高效",
names: "完备高效"
},
{
icon: "",
names: "灵活开放",
names: "灵活开放"
},
{
icon: "",
names: "安全可靠",
},
],
},
names: "安全可靠"
}
]
}
],
company: [
{
img: require("@/assets/img/home/jt1.png"),
img: require("@/assets/img/home/jt1.png")
},
{
img: require("@/assets/img/home/jt2.png"),
img: require("@/assets/img/home/jt2.png")
},
{
img: require("@/assets/img/home/jt3.png"),
img: require("@/assets/img/home/jt3.png")
},
{
img: require("@/assets/img/home/jt4.png"),
img: require("@/assets/img/home/jt4.png")
},
{
img: require("@/assets/img/home/jt1.png"),
img: require("@/assets/img/home/jt1.png")
},
{
img: require("@/assets/img/home/jt2.png"),
img: require("@/assets/img/home/jt2.png")
},
{
img: require("@/assets/img/home/jt3.png"),
},
],
img: require("@/assets/img/home/jt3.png")
}
]
};
},
methods: {
handleSelect(e) {
this.solutabsIndex = e;
},
},
}
}
};
</script>
<style lang="less" scoped>
@ -781,7 +725,7 @@ export default {
.useleft {
display: flex;
flex-direction: column;
align-items: end;
align-items: flex-end;
flex: 2;
text-align: right;
& > .useleft-detail:nth-child(2) {
@ -837,7 +781,7 @@ export default {
.useright {
display: flex;
flex-direction: column;
align-items: start;
align-items: flex-start;
flex: 2;
text-align: left;
@ -1003,7 +947,7 @@ export default {
.partner-right {
display: flex;
flex-direction: column;
align-items: end;
align-items: flex-end;
.par-company {
width: 200px;

24
vue.config.js
Unescape View File

@ -4,17 +4,17 @@ module.exports = {
outputDir: "dist",
assetsDir: "static",
devServer: {
proxy: {
"/fsms-library": {
target: "https://zhinengku.zhixunanquan.com/fsms-library",
// target: "http://192.168.0.101:8104/fsms-library",
changeOrigin: true,
secure: false,
// 路径重写
pathRewrite: {
"^/fsms-library": "",
},
}
},
// proxy: {
// "/fsms-library": {
// // target: "https://zhinengku.zhixunanquan.com/fsms-library",
// // target: "http://192.168.0.101:8104/fsms-library",
// changeOrigin: true,
// secure: false,
// // 路径重写
// pathRewrite: {
// "^/fsms-library": "",
// },
// }
// },
},
};

Write Preview
Loading…
Cancel
Save