21 changed files with 827 additions and 87 deletions
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 336 KiB |
|
After Width: | Height: | Size: 278 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,4 @@
|
||||
const Mock = require('mockjs'); |
||||
//格式： Mock.mock( url, post/get , 返回的数据)；
|
||||
Mock.mock('/home/userInfo', 'get', require('./json/home')); |
||||
Mock.mock('/news/press', 'get', require('./json/news')); |
||||
@ -0,0 +1,39 @@
|
||||
{ |
||||
"result": "success", |
||||
"data": { |
||||
"number": { |
||||
"a": "61", |
||||
"b": "2300", |
||||
"c": "2700" |
||||
}, |
||||
"left": [ |
||||
{ |
||||
"name": "国家工业互联网标识解析二级节点", |
||||
"detail": "工业互联网标识解析体系类似互联网领域的域名解析系统（DNS）， 是全球工业互联网安全运行的核心基础设施之一。" |
||||
}, |
||||
{ |
||||
"name": "国家中小企业工业互联网数字化转型促进中心", |
||||
"detail": "国家中小企业工业互联网数字化转型促进中心是全国唯一一家面向中小企业、立足优势产业集聚、服务民立足优势产业集聚、服务民" |
||||
}, |
||||
{ |
||||
"name": "济南市先进制造业和数字经济标志性产业链群链主企业", |
||||
"detail": "济南市工业和信息化局按照“系统集成能力强、国内外市场占有率高、 产品竞争力强、产业链拉动作用大”的原则，从10个标志性产业链群。" |
||||
} |
||||
], |
||||
"right": [ |
||||
{ |
||||
"name": "国家高新技术企业", |
||||
"detail": "工业互联网标识解析体系类似互联网领域的域名解析系统（DNS）， 是全球工业互联网安全运行的核心基础设施之一。" |
||||
}, |
||||
{ |
||||
"name": "山东省科技型、创新型中小企业", |
||||
"detail": "国家中小企业工业互联网数字化转型促进中心是全国唯一一家面向中小企业、立足优势产业集聚、服务民立足优势产业集聚、服务民" |
||||
}, |
||||
{ |
||||
"name": "山东省大数据创新服务机构", |
||||
"detail": "大数据时代到来，数据价值及数据库国产化的重要性日益凸显，加快推动大数据产业高质量发展，对于抢抓新时代产业变革新机遇、构对于抢抓新时代产业变革新机遇、构" |
||||
} |
||||
] |
||||
}, |
||||
"msg": "" |
||||
} |
||||
@ -0,0 +1,22 @@
|
||||
{ |
||||
"result": "success", |
||||
"data": { |
||||
"records": [ |
||||
{ |
||||
"img": "", |
||||
"time": "20220", |
||||
"name": "工业互联网标识解析平台应用推广论坛暨远盾网络二级节点建设启动仪式成功召开", |
||||
"detail": "7月18日，为加快工业互联网标识解析二级节点建设，深化标识解析应用推广，加快形成面向重点行业的规模化标识解析服务能力，发挥榜样带头作用，加快推进工业互联网创新发展，助力全省新旧动能转换。在济南市成功召开工业互联网标识解析平台应用推广论坛暨远盾网络二级节点建设启动仪式。" |
||||
}, |
||||
{ |
||||
"name": "国家中小企业工业互联网数字化转型促进中心", |
||||
"detail": "国家中小企业工业互联网数字化转型促进中心是全国唯一一家面向中小企业、立足优势产业集聚、服务民立足优势产业集聚、服务民" |
||||
}, |
||||
{ |
||||
"name": "济南市先进制造业和数字经济标志性产业链群链主企业", |
||||
"detail": "济南市工业和信息化局按照“系统集成能力强、国内外市场占有率高、 产品竞争力强、产业链拉动作用大”的原则，从10个标志性产业链群。" |
||||
} |
||||
] |
||||
}, |
||||
"msg": "" |
||||
} |
||||
@ -0,0 +1,586 @@
|
||||
<template> |
||||
<div class="home"> |
||||
<el-backtop /> |
||||
<top :activeIndex="activeIndexs"></top> |
||||
<div class="ban"> |
||||
<el-image |
||||
style="width: 100%" |
||||
:src="require('@/assets/img/product/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> |
||||
</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"> |
||||
<div class="architecture"> |
||||
<div class="architect"> |
||||
<div class="manage-left" style="background-color: #3370ff"> |
||||
基础管理 |
||||
</div> |
||||
|
||||
<div class="manage-right" style="background-color: #3370ff"> |
||||
<div class="morearchitect" style="color: #3370ff"> |
||||
<div>通道管理</div> |
||||
<div>元流量池管理</div> |
||||
<div>元套餐管理</div> |
||||
<div>础卡管理</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="architect"> |
||||
<div class="manage-left" style="background-color: #e49409"> |
||||
通信管理 |
||||
</div> |
||||
|
||||
<div class="manage-right" style="background-color: #e49409"> |
||||
<div class="morearchitect" style="color: #e49409"> |
||||
<div>出库卡管理</div> |
||||
<div>套餐组管理</div> |
||||
<div>套餐管理</div> |
||||
<div>流量池管理</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="architect"> |
||||
<div class="manage-left" style="background-color: #3370ff"> |
||||
信息管理 |
||||
</div> |
||||
|
||||
<div class="manage-right" style="background-color: #3370ff"> |
||||
<div class="morearchitect" style="color: #3370ff"> |
||||
<div>日流量历史查询</div> |
||||
<div>月流量历史查询</div> |
||||
<div>卡信息管理</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="architect"> |
||||
<div class="manage-left" style="background-color: #e49409"> |
||||
系统管理 |
||||
</div> |
||||
<div class="manage-right" style="background-color: #e49409"> |
||||
<div class="morearchitect" style="color: #e49409"> |
||||
<div>用户管理</div> |
||||
<div>机构管理</div> |
||||
<div>岗位管理</div> |
||||
<div>字典管理</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</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"> |
||||
智慧工厂定位管理系统通过应用目前最先进的超宽带定位技术，配合5G，通过工业标识卡以电子标签作为标识码，将其与人员进行绑定，并且在定位区域内，无需任何高精度基站，对电子标签进行识别和定位，由此实现了对受控目标的实时定位和追踪管理，系统定位精度达到0.3米。人员轨迹连续，无偏跳。同时标签协议亦可无缝对接门禁系统，可根据授权刷卡开门。 |
||||
</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: 1, |
||||
solutabsIndex: "0", |
||||
solutabsIndexs: "0", |
||||
num: 0, //跳转楼层 |
||||
bscorll: null, |
||||
scroll: null, |
||||
scrollIndex: null, |
||||
bindex: 0, |
||||
Businessname: "智能制造工厂", |
||||
advantage: [ |
||||
{ |
||||
title: "基于标识安全基座", |
||||
detail: "支持独立安全存储、防篡改、防攻击能力，达到EAL4+安全等级", |
||||
}, |
||||
{ |
||||
title: "数据加密", |
||||
detail: |
||||
"对传输过程中的如标识注册、更新加密等数据进行更高级别的数据加密。", |
||||
}, |
||||
{ |
||||
title: "接入便捷", |
||||
detail: |
||||
"统一三大运营商接口，缩短开发周期，帮助用户节省开发和运营成本。", |
||||
}, |
||||
{ |
||||
title: "产品全面", |
||||
detail: "支持三大运营商，支持插拔式，网络制式包括 3G/4G。", |
||||
}, |
||||
{ |
||||
title: "使用安全", |
||||
detail: |
||||
"协议设计采用标准安全方案，外网全链路加密，杜绝窃听，确保用户数据安全。", |
||||
}, |
||||
{ |
||||
title: "数据统计", |
||||
detail: |
||||
"实时展示用户持有的物联卡流量、资费和状态等详细信息，同时也提供了流量资费超量预警。", |
||||
}, |
||||
{ |
||||
title: "优质服务", |
||||
detail: "秉承服务宗旨，快速响应用户需求，承诺7 × 24小时极速响应。", |
||||
}, |
||||
{ |
||||
title: "开放共赢", |
||||
detail: |
||||
"坚持开放的政策，积极探索物联网行业，尽我们所能满足用户需求。", |
||||
}, |
||||
], |
||||
|
||||
Business: ["智能制造工厂", "智慧农业", "车联网", "共享设备", "环境监测"], |
||||
functions: [ |
||||
{ |
||||
img: require("@/assets/img/product/t1.png"), |
||||
title: "短信发送功能", |
||||
detail: |
||||
"我们支持给物联卡下发短信，向用户服务器推送回执以及回复，满足用户使用非数据通道控制设备的功能。", |
||||
}, |
||||
{ |
||||
img: require("@/assets/img/product/t2.png"), |
||||
title: "卡片信息查询", |
||||
detail: "用户既可查询账户持有的所有卡片信息，功能齐全。", |
||||
}, |
||||
{ |
||||
img: require("@/assets/img/product/t3.png"), |
||||
title: "卡片资费管理", |
||||
detail: "可进行资费管理，同时满足平台用户和终端用户管理卡片需求。", |
||||
}, |
||||
{ |
||||
img: require("@/assets/img/product/t4.png"), |
||||
title: "流量信息展示", |
||||
detail: |
||||
"控制台可查看整个流量池或者单卡流量使用情况，方便用户进行个性化的套餐管理，优化成本。", |
||||
}, |
||||
{ |
||||
img: require("@/assets/img/product/t5.png"), |
||||
title: "自动告警功能", |
||||
detail: |
||||
"支持自定义告警阈值设置，实现短信、邮件和 API 等多种方式流量自动化告警，有效降低流量使用的风险性。", |
||||
}, |
||||
], |
||||
}; |
||||
}, |
||||
|
||||
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 { |
||||
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 center; |
||||
background-size: cover; |
||||
.function-box { |
||||
width: 1000px; |
||||
margin: 0 auto; |
||||
padding-bottom: 30px; |
||||
padding-top: 30px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.function { |
||||
width: 180px; |
||||
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%; |
||||
|
||||
height: 492px; |
||||
background: #ffffff; |
||||
border: 8px solid #3f86ff; |
||||
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