517 lines
14 KiB
Vue
517 lines
14 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
<!-- 导航条 -->
|
||
<div class="home_title flex">
|
||
<div class="title_l flex">
|
||
<img
|
||
v-if="LOGO_white"
|
||
:src="'./img/logo/' + LOGO_white + '.png'"
|
||
class="icon"
|
||
/>
|
||
<span>{{ $t("message.homeLayout.title") }}</span>
|
||
</div>
|
||
<div class="title_c flex_space_b">
|
||
<div v-for="item in navigationList" :key="item.id">
|
||
<p
|
||
:class="checked == item.id && 'checkedColor'"
|
||
@click="
|
||
() => {
|
||
checked = item.id;
|
||
}
|
||
"
|
||
>
|
||
{{ item.name }}
|
||
</p>
|
||
<p></p>
|
||
</div>
|
||
</div>
|
||
<div class="title_r">
|
||
<el-button
|
||
class="login_btn"
|
||
size="small"
|
||
type="primary"
|
||
@click="loginBtn"
|
||
>
|
||
{{ $t("message.homeLayout.login") }}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<vue-scroll>
|
||
<div class="content_mod1">
|
||
<div class="mark"></div>
|
||
<div class="title">工地管理专家</div>
|
||
<div class="mod_content">
|
||
帮助建设单位、施工方或工地管理者快速搭建标准化智慧工地管理平台，实现工地科技智慧管理，高效节能，构建建筑工地管理新生态。通过7X24小时不间断监控，可提供高质量数据并支持多种业务模式，实现大数据应用分析，更加有效、有针对性的管理。
|
||
</div>
|
||
</div>
|
||
<div class="content_mod2">
|
||
<div class="content_title">
|
||
<div>平台核心功能</div>
|
||
<div class="subhead">Platform core functions</div>
|
||
</div>
|
||
<el-carousel
|
||
trigger="click"
|
||
height="150px"
|
||
:autoplay="false"
|
||
arrow="never"
|
||
class="carousel"
|
||
indicator-position="none"
|
||
>
|
||
<el-carousel-item class="carousel-item">
|
||
<div class="flex_space_b carousel_content">
|
||
<div
|
||
class="item"
|
||
v-for="(item, index) in functionsList"
|
||
:key="index"
|
||
>
|
||
<div class="flex">
|
||
<img :src="item.icon" class="icon" />
|
||
<span class="name">{{ item.name }}</span>
|
||
</div>
|
||
<div class="item_content">{{ item.content }}</div>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
<div class="content_mod3">
|
||
<div class="content_title">
|
||
<div>智慧工地云平台应用场景图</div>
|
||
<div class="subhead">Smart site application scenario</div>
|
||
</div>
|
||
<div class="scenario_wrap">
|
||
<img src="@/assets/images/homeIntro/scene.png" class="scene_img" />
|
||
</div>
|
||
</div>
|
||
<div class="content_mod4">
|
||
<div class="content_title">
|
||
<div>智慧工地云平台应用案例</div>
|
||
<div class="subhead">Smart site application case</div>
|
||
</div>
|
||
<el-carousel
|
||
trigger="click"
|
||
height="150px"
|
||
:autoplay="false"
|
||
arrow="never"
|
||
class="carousel"
|
||
indicator-position="none"
|
||
>
|
||
<el-carousel-item class="carousel-item">
|
||
<div class="carousel_content">
|
||
<div
|
||
class="item"
|
||
v-for="(item, index) in caseList"
|
||
:key="index"
|
||
>
|
||
<div class="flex">
|
||
<img :src="item.icon" class="icon" />
|
||
</div>
|
||
<div class="item_content">{{ item.content }}</div>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
<div class="content_mod5">
|
||
<div class="content_title">
|
||
<div>市场与客户</div>
|
||
<div class="subhead">
|
||
多年积淀，拥有接入客户5000+，其中百强企业100+，国际客户30+
|
||
</div>
|
||
</div>
|
||
<img src="@/assets/images/homeIntro/client.png" class="client_img" />
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: "Home",
|
||
data() {
|
||
return {
|
||
navigationList: [
|
||
{ name: "产品服务", id: 1 },
|
||
{ name: "SDK&工具", id: 2 },
|
||
{ name: "文档", id: 3 },
|
||
],
|
||
checked: 1,
|
||
LOGO_white: LOGO_white,
|
||
|
||
functionsList: [
|
||
{
|
||
id: 1,
|
||
name: "劳务管理",
|
||
icon: require("@/assets/images/homeIntro/icon/icon1.png"),
|
||
content:
|
||
"工地人员信息录入、考勤统计。随时随地了解工地用工情况、提高安全管理及对工地整体的把控能力。",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "视频监控",
|
||
icon: require("@/assets/images/homeIntro/icon/icon2.png"),
|
||
content:
|
||
"施工现场安装摄像点,进行不间断监控，实时掌握工地施工形象面貌和工程进度,及时发现施工过程中存在的安全风险。",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "安全教育",
|
||
icon: require("@/assets/images/homeIntro/icon/icon3.png"),
|
||
content:
|
||
"三维动态的形式逼真模拟出多项VR应用场景，微信扫码视频学习、在线考试，提升安全意识。",
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "进度管理",
|
||
icon: require("@/assets/images/homeIntro/icon/icon4.png"),
|
||
content:
|
||
"统计分项进度情况，逾期任务预警推送，实时把控各进度的走向，确保整体工程在计划的项目周期内完工。",
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "环境监测",
|
||
icon: require("@/assets/images/homeIntro/icon/icon5.png"),
|
||
content:
|
||
"将工地的PM10，PM2.5，噪声等数据进行实时监测，当工地环境超标时，可主动开启降尘炮/围挡喷淋进行及时抑尘。",
|
||
},
|
||
{
|
||
id: 6,
|
||
name: "塔吊监控",
|
||
icon: require("@/assets/images/homeIntro/icon/icon6.png"),
|
||
content:
|
||
"实时监测超载，超重等违规行为。加装虹膜识别/人脸识别设备，杜绝无证操作，降低事故发生风险。",
|
||
},
|
||
{
|
||
id: 7,
|
||
name: "升降机监控",
|
||
icon: require("@/assets/images/homeIntro/icon/icon7.png"),
|
||
content:
|
||
"获取实时施工升降机运行数据，维保数据，满载声光报警，超载自动切断电路，提升对升降机设备的信息化管理，效预防事故发生。",
|
||
},
|
||
{
|
||
id: 8,
|
||
name: "工地广播",
|
||
icon: require("@/assets/images/homeIntro/icon/icon8.png"),
|
||
content:
|
||
"智能广播系统。对工地现场不定时的播岀通知,应急疏散通知等。 具有分区点对点广播功能，实现精准警报，及时处理警告。",
|
||
},
|
||
{
|
||
id: 9,
|
||
name: "深基坑高支模",
|
||
icon: require("@/assets/images/homeIntro/icon/icon9.png"),
|
||
content:
|
||
"基坑、高支模在线监测、基坑稳定性、压力、渗流量、支护等监测预警，可数据自动实时采集，无线传输实时预警。",
|
||
},
|
||
{
|
||
id: 10,
|
||
name: "AI识别",
|
||
icon: require("@/assets/images/homeIntro/icon/icon10.png"),
|
||
content:
|
||
"安全帽识别、车辆识别、烟火检测工服识别、升降机人数检测、入侵检测、吸烟检测等多种AI算法。",
|
||
},
|
||
{
|
||
id: 11,
|
||
name: "能耗管理",
|
||
icon: require("@/assets/images/homeIntro/icon/icon11.png"),
|
||
content:
|
||
"降低能耗使用,促进行为节能,減少浪费并限制不合理消耗,实现持续节能;提高智能管理水平。",
|
||
},
|
||
{
|
||
id: 12,
|
||
name: "安全质量",
|
||
icon: require("@/assets/images/homeIntro/icon/icon12.png"),
|
||
content:
|
||
"记录工地日常安全质量情况，发现问题，立即上报，随时拍、随时传；电子档永久保存，支持在线打印下载。",
|
||
},
|
||
],
|
||
|
||
caseList: [
|
||
{
|
||
id: 1,
|
||
icon: require("@/assets/images/homeIntro/case1.png"),
|
||
content: "宜恩县今典城市之星(一期)项目",
|
||
},
|
||
{
|
||
id: 2,
|
||
icon: require("@/assets/images/homeIntro/case2.png"),
|
||
content: "内蒙古赤峰市住建局智慧工地",
|
||
},
|
||
{
|
||
id: 3,
|
||
icon: require("@/assets/images/homeIntro/case3.png"),
|
||
content: "珠玑城际轨道智慧工地平台",
|
||
},
|
||
{
|
||
id: 4,
|
||
icon: require("@/assets/images/homeIntro/case4.png"),
|
||
content: "南方电网云南省智慧工地",
|
||
},
|
||
{
|
||
id: 5,
|
||
icon: require("@/assets/images/homeIntro/case5.png"),
|
||
content: "恩施荆南建设工程有限公司“智慧工地”",
|
||
},
|
||
{
|
||
id: 6,
|
||
icon: require("@/assets/images/homeIntro/case6.png"),
|
||
content: "武汉东西湖区智慧工地项目",
|
||
},
|
||
{
|
||
id: 7,
|
||
icon: require("@/assets/images/homeIntro/case7.png"),
|
||
content: "中国建筑深圳智慧工地",
|
||
},
|
||
{
|
||
id: 8,
|
||
icon: require("@/assets/images/homeIntro/case8.png"),
|
||
content: "上海宝冶集团智慧工地项目",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
loginBtn() {
|
||
this.$router.push({ path: "/login" });
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.flex_space_b {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.home_title {
|
||
box-sizing: border-box;
|
||
padding: 0 65px 0 23px;
|
||
background: @--bg-color-primary;
|
||
height: 61px;
|
||
}
|
||
|
||
.checkedColor {
|
||
color: @--color-primary;
|
||
position: relative;
|
||
}
|
||
.checkedColor::before {
|
||
content: "";
|
||
width: 20px;
|
||
height: 3px;
|
||
background: @--color-primary;
|
||
position: absolute;
|
||
bottom: -8px;
|
||
left: calc(50% - 10px);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.title_l {
|
||
flex-grow: 2;
|
||
font-family: PingFangSC-Semibold;
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
letter-spacing: 0;
|
||
|
||
.icon {
|
||
margin-right: 14px;
|
||
width: auto;
|
||
height: 25px;
|
||
}
|
||
}
|
||
|
||
.title_c {
|
||
flex-grow: 2;
|
||
font-family: PingFangSC-Semibold;
|
||
font-size: 14px;
|
||
color: #feffff;
|
||
letter-spacing: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.title_r {
|
||
flex-grow: 8;
|
||
text-align: right;
|
||
}
|
||
|
||
.content {
|
||
height: calc(100% - 61px);
|
||
background: #f3f4f7;
|
||
width: 100%;
|
||
.content_mod1 {
|
||
box-sizing: border-box;
|
||
padding: 153px 0 0 304px;
|
||
color: #fff;
|
||
width: 100%;
|
||
height: 505px;
|
||
background-image: url("../../assets/images/homeIntro/title_bg.gif");
|
||
background-repeat: no-repeat;
|
||
margin-bottom: 80px;
|
||
.mark {
|
||
width: 23px;
|
||
height: 7px;
|
||
background: #fff;
|
||
}
|
||
.title {
|
||
font-size: 22px;
|
||
background: rgba(0, 0, 0, 0);
|
||
text-align: left;
|
||
font-family: PingFangSC-Regular;
|
||
margin: 10px 0 28px;
|
||
}
|
||
.mod_content {
|
||
width: 534px;
|
||
height: 179px;
|
||
line-height: 31px;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 15px;
|
||
text-align: justify;
|
||
font-family: PingFangSC-Regular;
|
||
}
|
||
}
|
||
|
||
.content_title {
|
||
text-align: center;
|
||
color: rgba(38, 45, 73, 1);
|
||
font-size: 28px;
|
||
font-family: PingFangSC-Medium;
|
||
.subhead {
|
||
opacity: 0.4;
|
||
color: rgba(38, 45, 73, 1);
|
||
font-size: 15px;
|
||
line-height: 28px;
|
||
font-family: PingFangSC-Light;
|
||
}
|
||
}
|
||
|
||
.content_mod2 {
|
||
.carousel {
|
||
width: calc(100% - 608px);
|
||
height: 770px;
|
||
margin: 64px auto 0;
|
||
}
|
||
/deep/.el-carousel__container {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
.carousel_content {
|
||
width: 100%;
|
||
height: 100%;
|
||
flex-wrap: wrap;
|
||
align-items: initial;
|
||
.item {
|
||
width: 282px;
|
||
height: 205px;
|
||
border-radius: 5px;
|
||
background-color: #ffffff;
|
||
box-shadow: 0px 8px 9px 0px rgba(239, 243, 249, 1);
|
||
border: 2px solid rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
background: linear-gradient(#eeeff0, #fefefe);
|
||
padding: 20px 30px;
|
||
.name {
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 20px;
|
||
text-align: center;
|
||
font-family: PingFangSC-Medium;
|
||
margin-left: 6px;
|
||
}
|
||
.icon {
|
||
width: 51px;
|
||
height: 39px;
|
||
}
|
||
.item_content {
|
||
margin-top: 10px;
|
||
line-height: 28px;
|
||
color: rgba(138, 150, 168, 1);
|
||
font-size: 14px;
|
||
text-align: justify;
|
||
font-family: PingFangSC-Regular;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content_mod3 {
|
||
margin-top: 50px;
|
||
width: 100%;
|
||
height: 1000px;
|
||
background-color: rgba(236, 240, 249, 0.3);
|
||
box-sizing: border-box;
|
||
padding-top: 60px;
|
||
.scenario_wrap {
|
||
width: 1311px;
|
||
height: 763px;
|
||
box-sizing: border-box;
|
||
padding: 38px 60px 24px;
|
||
border-radius: 5px;
|
||
box-shadow: 0px 8px 9px 0px rgba(239, 243, 249, 1),
|
||
0px 12px 21px 0px rgba(255, 255, 255, 0);
|
||
margin: 36px auto 0;
|
||
background: linear-gradient(#f5f6f9, #ffffff);
|
||
.scene_img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content_mod4 {
|
||
width: 100%;
|
||
height: 715px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
padding-top: 60px;
|
||
.carousel {
|
||
width: calc(100% - 608px);
|
||
height: 480px;
|
||
margin: 50px auto 0;
|
||
}
|
||
/deep/.el-carousel__container {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
.carousel_content {
|
||
width: 100%;
|
||
height: 480px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
align-items: initial;
|
||
.item {
|
||
width: 295px;
|
||
height: 195px;
|
||
text-align: center;
|
||
.icon {
|
||
width: 100%;
|
||
height: 161px;
|
||
}
|
||
.item_content {
|
||
margin-top: 14px;
|
||
color: rgba(138, 150, 168, 1);
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content_mod5 {
|
||
margin-top: 71px;
|
||
height: 503px;
|
||
text-align: center;
|
||
.client_img {
|
||
margin-top: 52px;
|
||
width: calc(100% - 608px);
|
||
height: auto;
|
||
}
|
||
}
|
||
}
|
||
</style> |