14 changed files with 565 additions and 59 deletions
|
Before Width: | Height: | Size: 326 B |
|
Before Width: | Height: | Size: 318 B |
|
After Width: | Height: | Size: 870 KiB |
|
After Width: | Height: | Size: 212 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 402 KiB |
|
Before Width: | Height: | Size: 1.2 MiB |
@ -0,0 +1,519 @@
|
||||
<template> |
||||
<div class="home"> |
||||
<el-backtop /> |
||||
<top :activeIndex="activeIndexs"></top> |
||||
<div class="ban"> |
||||
<el-image style="width: 100%" :src="require('@/assets/img/solve/1.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" style="margin-top: 20px"> |
||||
<div class="box-style-box"> |
||||
<div class="floor" style="padding-top: 40px; background: #f5f5f5"> |
||||
<headline heading="方案介绍" footing="Product introduction" /> |
||||
<div class="floor1"> |
||||
<div> |
||||
工业互联网标识解析二级节点作为重要网络基础设施建设之一，旨在打破信息孤岛， |
||||
促进工业互联网数据互通，实现数据和信息在各要素间、各系统间的无缝传递，实现“跨企业-跨行业-跨地区-跨国家”标识数据管理和共享。 |
||||
工业互联网标识解析二级节点主要面向行业、企业提供标识解析服务，是衔接国家顶级节点和企业的重要枢纽，是工业互联网标识解析的重要组成部分。 |
||||
</div> |
||||
<div> |
||||
从产业角度来看，工业互联网标识解析二级节点能够通过二维码、电子标签等标识载体采集数据，并将标识与信息、地址等融合，有利于打破信息孤岛。 |
||||
通过“一码多识，分权管控”，实现工业大数据的按需共享，支撑数据合理流转，激发数据应用。 工业互联网标识解析二级节点国家采用新型通信牌照管理， |
||||
牌照意味着稀缺。从历史来看，采用牌照制管理的行业，投资因为有壁垒护城河，最早投资者大概率不会亏损。 |
||||
做为工业互联网国家战略的落地，建设国家二级节点具有战略属性，可将节点本身投资打包到相关国家或省财政投资项目中，提升项目级别，做大投资规模， |
||||
争取上层领导重视，提高政治站位。 |
||||
</div> |
||||
<div> |
||||
像铁公机传统基础设施中客流量必经流转地——机场、高铁站一样，未来数字世界新型基础设施数据流必经流转地就是标识解析二级节点， |
||||
其作为数字新基建枢纽长期价值将随时间愈发凸显，数据标准化、数据确权、数据定价、数据交易等一系列数据做为资源要素价值转换的关键动作都将 |
||||
依托二级节点完成，产生标识注册托管费、解析通信费、标识制做加工费、数据服务费等收益。 山东青鸟工业互联网有限公司为工业互联网标识解 |
||||
析二级节点山东省承建单位，截至2023年2月份，山东青鸟承建二级节点数量6家已正式上线，在建中3家，签约中4家。其中，济宁市，聊城市，泰安市， |
||||
滨州市，临沂市第一家为山东青鸟承建。 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 方案优势 --> |
||||
<div class="box-style"> |
||||
<div class="box-style-box"> |
||||
<div class="floor"> |
||||
<div class="floor2"> |
||||
<headline heading="方案优势" footing="Product advantage" style="padding-top: 40px" /> |
||||
<div class="floor2-box flex_btw"> |
||||
<div class="advantage" v-for="(item, index) in advantage" :key="index"> |
||||
<el-card body-style="height:280px" shadow="hover"> |
||||
<div class="title">{{ item.title }}</div> |
||||
<div class="detail">{{ item.detail }}</div> |
||||
</el-card> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 产品功能 --> |
||||
<div class="box-style"> |
||||
<div class="box-style-box"> |
||||
<div class="floor" style="margin-top: 40px; background-color: #20222a"> |
||||
<div class="floor3"> |
||||
<headline heading="产品功能" footing="Product advantage" type="white" /> |
||||
<div class="function-box"> |
||||
<div class="function" v-for="(item, index) in functions" :key="index"> |
||||
<div class="f-top"> |
||||
<el-image style="width: 57px" :src="item.img" fit="fill"></el-image> |
||||
</div> |
||||
<div class="f-bottom"> |
||||
<div class="f-title">{{ item.title }}</div> |
||||
<div class="f-detail">{{ item.detail }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 建设流程 --> |
||||
<div class="box-style"> |
||||
<div class="box-style-box"> |
||||
<div class="floor"> |
||||
<div class="floor4"> |
||||
<headline heading="建设流程" footing="Technical architecture" /> |
||||
<div class="architecture-box"> |
||||
<el-image |
||||
style="width: 100%" |
||||
:src="require('@/assets/img/solve/lc.png')" |
||||
fit="fill" |
||||
></el-image> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 业务场景 --> |
||||
<div class="box-style"> |
||||
<div class="box-style-box"> |
||||
<div class="floor"> |
||||
<div class="floor5 modelWidth"> |
||||
<headline heading="应用场景" footing="Business scenario" /> |
||||
<div class="Business"> |
||||
<div class="Business-left"> |
||||
<div class="Business-left-box"> |
||||
<div |
||||
@click="handleBusinss(item, index)" |
||||
v-for="(item, index) in Business" |
||||
:key="index" |
||||
:class="bindex == index ? 'color' : 'nocolor'" |
||||
>{{ item }}</div> |
||||
</div> |
||||
</div> |
||||
<div class="Business-center"> |
||||
<el-image |
||||
style="width: 100%" |
||||
:src="require('@/assets/img/product/cj1.png')" |
||||
fit="fill" |
||||
></el-image> |
||||
</div> |
||||
<div class="Business-right"> |
||||
<div class="top">{{ Businessname }}</div> |
||||
<div |
||||
class="bottom" |
||||
>通过统一融合的工业互联网标识解析体系，企业或用户可以利用标识访问产品在设计、生产、物流、销售到使用等各环节，实现工业制造行业全生命周期优化、产品精益化管理、产品服务化延伸、智能化生产管控、供应链优化管理等服务。</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</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"; |
||||
import ElStep from "@/components/elStep.vue"; |
||||
export default { |
||||
name: "HomeView", |
||||
components: { |
||||
top, |
||||
bottom, |
||||
headline, |
||||
ElStep |
||||
}, |
||||
data() { |
||||
return { |
||||
activeIndexs: 2, |
||||
solutabsIndex: "0", |
||||
solutabsIndexs: "0", |
||||
num: 0, //跳转楼层 |
||||
bscorll: null, |
||||
scroll: null, |
||||
scrollIndex: null, |
||||
bindex: 0, |
||||
Businessname: "工业制造", |
||||
advantage: [ |
||||
{ |
||||
title: "专家咨询", |
||||
detail: "工业互联网标识解析体系专家智库支持，提供专家咨询诊断服务。" |
||||
}, |
||||
{ |
||||
title: "经验丰富", |
||||
detail: "帮助承建10家以上标识解析二级节点通过专家评审，经验丰富。" |
||||
}, |
||||
{ |
||||
title: "生态合作", |
||||
detail: |
||||
"构建行业标识生态体系，共同建设标识解析应用开放开源社区战略合作伙伴。" |
||||
}, |
||||
{ |
||||
title: "牌照获取", |
||||
detail: "标识解析体系实行牌照制管理，由省通信管理局审批颁发。" |
||||
}, |
||||
{ |
||||
title: "使用安全", |
||||
detail: |
||||
"协议设计采用标准安全方案，外网全链路加密，杜绝窃听，确保用户数据安全。" |
||||
}, |
||||
{ |
||||
title: "运营保障", |
||||
detail: |
||||
"规范管理维护系统运行的操作流程和服务标准，提供良好的7X24服务质量。" |
||||
}, |
||||
{ |
||||
title: "技术支持", |
||||
detail: "满足顶级节点对二级节点的运营要求、技术要求和安全要求。" |
||||
}, |
||||
{ |
||||
title: "开放共赢", |
||||
detail: "坚持开放的政策，积极探索物联网行业，尽我们所能满足用户需求。" |
||||
} |
||||
], |
||||
|
||||
Business: ["工业制造", "能源", "农业", "数据", "全行业"], |
||||
functions: [ |
||||
{ |
||||
img: require("@/assets/img/solve/p1.png"), |
||||
title: "标识解析", |
||||
detail: |
||||
"标识解析的原理类似DNS寻址，解析系统递归节点通过标识前缀的指示，向顶级、二级、三级节点逐一寻址，实现跨地域、跨行业、跨企业地找到该标识所表示的资产信息数据。" |
||||
}, |
||||
{ |
||||
img: require("@/assets/img/solve/p2.png"), |
||||
title: "码引擎", |
||||
detail: |
||||
"可以独立于工业互联网标识服务模块外单独运行，在二级节点建设、维护或其他企业信息化系统不具备对接到工业互联网平台二级节点的情况下起到过渡、应急和备份作用。" |
||||
}, |
||||
{ |
||||
img: require("@/assets/img/solve/p3.png"), |
||||
title: "区块链", |
||||
detail: |
||||
"标识解析产品依托青鸟在区块链技术领域内的多年技术积累，建立一套功能完备、场景丰富的区块链服务子平台，为用户提供精准高效的区块链技术服务。" |
||||
}, |
||||
{ |
||||
img: require("@/assets/img/solve/p4.png"), |
||||
title: "数据管理", |
||||
detail: |
||||
"数据托管主要负责标识码背后数据的汇集、分发，平台在托管服务中默认创建托管空间，寄存数据并随码的发码、验证过程实现数据共享、互联互通。" |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
|
||||
methods: { |
||||
// 楼层跳转的方法index |
||||
handleSelect(index) { |
||||
this.num = index; |
||||
// 获取所有的楼层 |
||||
var inner = document.getElementsByClassName("floor"); |
||||
window.scrollTo({ |
||||
top: inner[index].offsetTop - 50, |
||||
behavior: "smooth" |
||||
}); |
||||
}, |
||||
|
||||
inputVal(val) { |
||||
this.val = val; |
||||
}, |
||||
submit() { |
||||
console.log(this.val); |
||||
}, |
||||
|
||||
handleBusinss(a, e) { |
||||
this.bindex = e; |
||||
this.Businessname = a; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="less" scoped> |
||||
.box-style { |
||||
width: 100%; |
||||
|
||||
.box-style-box { |
||||
width: 100%; |
||||
.floor { |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
|
||||
// 产品介绍 |
||||
.floor1 { |
||||
font-size: 20px; |
||||
font-family: PingFang SC; |
||||
font-weight: 400; |
||||
padding: 30px; |
||||
color: #333333; |
||||
line-height: 32px; |
||||
div { |
||||
text-indent: 2em; |
||||
} |
||||
} |
||||
//产品优势 |
||||
.floor2 { |
||||
margin-top: 30px; |
||||
width: 100%; |
||||
|
||||
.floor2-box { |
||||
flex-wrap: wrap; |
||||
& > .advantage:nth-child(5) { |
||||
visibility: hidden; |
||||
} |
||||
& > .advantage:nth-child(8) { |
||||
visibility: hidden; |
||||
} |
||||
.advantage { |
||||
width: 24%; |
||||
background: #ffffff; |
||||
margin-top: 10px; |
||||
cursor: pointer; |
||||
|
||||
.title { |
||||
font-size: 26px; |
||||
width: 100%; |
||||
text-align: center; |
||||
font-family: PingFang SC; |
||||
font-weight: 600; |
||||
color: #3370ff; |
||||
padding-bottom: 30px; |
||||
border-bottom: 2px solid #3370ff; |
||||
} |
||||
.detail { |
||||
width: 100%; |
||||
text-align: center; |
||||
font-size: 18px; |
||||
font-family: PingFang SC; |
||||
font-weight: 400; |
||||
color: #333333; |
||||
line-height: 36px; |
||||
padding-top: 30px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//产品功能 |
||||
.floor3 { |
||||
padding-top: 30px; |
||||
width: 100%; |
||||
background: url("@/assets/img/product/2.png") no-repeat center bottom; |
||||
background-size: cover; |
||||
.function-box { |
||||
width: 1000px; |
||||
margin: 0 auto; |
||||
padding-bottom: 30px; |
||||
padding-top: 30px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.function { |
||||
width: 220px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.f-bottom { |
||||
.f-title { |
||||
text-align: center; |
||||
font-size: 19px; |
||||
font-family: PingFang SC; |
||||
font-weight: 600; |
||||
color: #ffffff; |
||||
padding-top: 20px; |
||||
} |
||||
.f-detail { |
||||
text-align: center; |
||||
font-size: 14px; |
||||
font-family: PingFang SC; |
||||
font-weight: 400; |
||||
color: #ffffff; |
||||
line-height: 36px; |
||||
padding-top: 20px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
//技术架构 |
||||
.floor4 { |
||||
margin-top: 40px; |
||||
|
||||
.architecture-box { |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
|
||||
background: #ffffff; |
||||
|
||||
border-radius: 36px; |
||||
.architecture { |
||||
padding: 20px 35px; |
||||
display: flex; |
||||
height: 100%; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
.architect { |
||||
flex: 1; |
||||
width: 100%; |
||||
|
||||
display: flex; |
||||
align-content: center; |
||||
justify-content: space-between; |
||||
font-size: 21px; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #ffffff; |
||||
.manage-left { |
||||
width: 25%; |
||||
height: 88px; |
||||
border-radius: 24px 0px 0px 24px; |
||||
text-align: center; |
||||
line-height: 88px; |
||||
} |
||||
.manage-right { |
||||
width: 73%; |
||||
height: 88px; |
||||
border-radius: 0px 24px 24px 0px; |
||||
.morearchitect { |
||||
height: 88px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
justify-content: space-around; |
||||
div { |
||||
flex: 1; |
||||
margin: 0 20px; |
||||
height: 54px; |
||||
background: #ffffff; |
||||
border-radius: 12px; |
||||
text-align: center; |
||||
line-height: 54px; |
||||
font-size: 20px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//业务场景 |
||||
.floor5 { |
||||
margin-top: 40px; |
||||
margin-bottom: 90px; |
||||
.Business { |
||||
display: flex; |
||||
margin-top: 30px; |
||||
.Business-left { |
||||
flex: 1; |
||||
width: 100%; |
||||
height: 400px; |
||||
background: #ffffff; |
||||
box-shadow: 0px 0px 12px 0px rgba(2, 82, 217, 0.15); |
||||
.Business-left-box { |
||||
height: 100%; |
||||
padding: 30px 40px 30px 50px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
|
||||
div { |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
flex: 1; |
||||
font-size: 15px; |
||||
font-family: PingFang SC; |
||||
font-weight: 400; |
||||
line-height: 100%; |
||||
color: #20222a; |
||||
border-bottom: 1px solid #e5e5e5; |
||||
cursor: pointer; |
||||
} |
||||
.color { |
||||
color: #3370ff; |
||||
} |
||||
.nocolor { |
||||
color: #20222a; |
||||
} |
||||
} |
||||
} |
||||
.Business-center { |
||||
flex: 1; |
||||
padding: 0 10px; |
||||
} |
||||
.Business-right { |
||||
flex: 1; |
||||
width: 100%; |
||||
height: 400px; |
||||
background: #ffffff; |
||||
|
||||
.top { |
||||
font-size: 22px; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #20222a; |
||||
padding-top: 30px; |
||||
padding-left: 30px; |
||||
} |
||||
.bottom { |
||||
font-size: 15px; |
||||
font-family: PingFang SC; |
||||
font-weight: 400; |
||||
color: #20222a; |
||||
line-height: 30px; |
||||
padding: 10px 30px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.solutabs { |
||||
width: 100%; |
||||
margin: 0px auto; |
||||
.el-menu-demo { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue