2025-09-09 17:29:38 +08:00
|
|
|
|
<!DOCTYPE html>
|
2025-09-29 17:29:56 +08:00
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>Title</title>
|
|
|
|
|
|
<link href="/css/common.css" rel="stylesheet"/>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
body{
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
padding: 0px;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #444;
|
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
}
|
|
|
|
|
|
.root{
|
2025-09-09 17:29:38 +08:00
|
|
|
|
|
2025-09-29 17:29:56 +08:00
|
|
|
|
}
|
|
|
|
|
|
.header{
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: 0px;
|
|
|
|
|
|
z-index: 999;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 120px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
background-color: #2160a6;
|
|
|
|
|
|
padding: 0px 50px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
.logo-box{
|
|
|
|
|
|
width: 239px;
|
|
|
|
|
|
height: 72px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.btn-box button{
|
|
|
|
|
|
width: 70px;
|
|
|
|
|
|
height: 35px;
|
|
|
|
|
|
border: 1px solid white;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
.login-btn{
|
|
|
|
|
|
background: transparent;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.register-btn{
|
|
|
|
|
|
background: white;
|
|
|
|
|
|
color: #2160a6;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
.banner-box{
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.banner-box:after{
|
|
|
|
|
|
content:'';
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
height: 0;
|
|
|
|
|
|
clear:both;
|
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.banner-box img{
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item1{
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
margin: 30px 0px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.title{
|
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-stretch: normal;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.sub-title{
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
font-stretch: normal;
|
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item2{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
color: #d2e8fc;
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item2 .item2-div{
|
|
|
|
|
|
width: 500px;
|
|
|
|
|
|
height: 320px;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
background-position: 100%;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item2-div-left{
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 500px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item2-div-left .item2-data-title,.item2-center-box .item2-data-title{
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
padding: 10px 0px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.itme2-data{
|
|
|
|
|
|
width: 240px;
|
|
|
|
|
|
height: 240px;
|
|
|
|
|
|
background-color: red;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item2-center-box{
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
width: 1000px;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.itme2-center-data{
|
|
|
|
|
|
width: 500px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding-top: 2%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.itme2-center-data .itme2-center-subtitle{
|
|
|
|
|
|
width: 22px;
|
|
|
|
|
|
font-family: SourceHan SansCN;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-stretch: normal;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
|
writing-mode: vertical-lr;
|
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.itme2-center-item-box .item-icon{
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
width: 33px;
|
|
|
|
|
|
height: 33px;
|
|
|
|
|
|
line-height: 33px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
background-color: #0a4b8e;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
}
|
|
|
|
|
|
.itme2-center-item-box .item-content{
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.itme2-center-item-box li{
|
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.itme2-center-item-box li:last-child{
|
|
|
|
|
|
margin-bottom: 0px;
|
|
|
|
|
|
}
|
2025-09-09 17:29:38 +08:00
|
|
|
|
|
2025-09-29 17:29:56 +08:00
|
|
|
|
.item3{
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 500px;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
background-position: 100%;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
background-repeat:no-repeat ;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
padding: 20px 0px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3 .item3-title,.item3 .item3-sub-title{
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3 .item3-title{
|
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-stretch: normal;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3 .item3-sub-title{
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-stretch: normal;
|
|
|
|
|
|
color: #d2e8fc;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3 .item3-content-box{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
margin-top: 60px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3 .item3-content{
|
|
|
|
|
|
width: 1300px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3-content .item3-content-left,.item3-content .item3-content-right{
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
width: 50%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3-content .item3-left-item{
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
padding: 8px 5%;
|
|
|
|
|
|
border-bottom: 2px solid #00a0e9;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
background-position: 100%;
|
|
|
|
|
|
background-repeat:no-repeat;
|
|
|
|
|
|
background-image: url("/img/home/index/juxing.png");
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3-content .item3-left-item:first-child{
|
|
|
|
|
|
border-top: 2px solid #00a0e9;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3-left-item .item-icon{
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 5%;
|
|
|
|
|
|
top: 18px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3-content .item3-content-right{
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
background-position: 100%;
|
|
|
|
|
|
background-repeat:no-repeat;
|
|
|
|
|
|
background-image: url("/img/home/index/juxing-centnt.png");
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
border-left: 2px solid #00a0e9;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3-left-item-avtive{
|
|
|
|
|
|
background-image: url("/img/home/index/juxing-active.png")!important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3-content-right{
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item3-content-item {
|
|
|
|
|
|
color: #d2e8fc;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
|
white-space:nowrap;
|
|
|
|
|
|
overflow:hidden;
|
|
|
|
|
|
text-overflow:ellipsis;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item4{
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item4 .item4-title{
|
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-stretch: normal;
|
|
|
|
|
|
margin: 30px
|
|
|
|
|
|
}
|
|
|
|
|
|
.item4 .item4-content-box{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
padding: 20px 100px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item4-content-item{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item4-icon{
|
|
|
|
|
|
width: 100px;
|
|
|
|
|
|
height: 100px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item4-buttom{
|
|
|
|
|
|
color: black;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
}
|
2025-09-09 17:29:38 +08:00
|
|
|
|
|
2025-09-29 17:29:56 +08:00
|
|
|
|
.item5{
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 620px;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
background-position: 100%;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
background-repeat:no-repeat;
|
|
|
|
|
|
background-image: url("/img/home/index/5.png");
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin: 20px 0px 240px 0px;
|
|
|
|
|
|
}
|
2025-09-09 17:29:38 +08:00
|
|
|
|
|
2025-09-29 17:29:56 +08:00
|
|
|
|
.item5 .item5-title{
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-stretch: normal;
|
|
|
|
|
|
padding: 30px
|
|
|
|
|
|
}
|
|
|
|
|
|
.item5 .item5-subTitle
|
|
|
|
|
|
{
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item5 .item5-conent-box{
|
|
|
|
|
|
background: white;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
width: 75%;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 40px 0px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
top: 240px;
|
|
|
|
|
|
box-shadow: 0px 5px 10px 0px #e6e6e6;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item5 .item5-content-item{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
padding: 0px 40px ;
|
|
|
|
|
|
border-right: 1px solid black;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item5 .item5-item-title{
|
|
|
|
|
|
color:#0f539c;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item5 .item5-item-content{
|
|
|
|
|
|
color: black;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item5 .item5-content-item:last-child{
|
|
|
|
|
|
border-right:none;
|
|
|
|
|
|
}
|
2025-09-09 17:29:38 +08:00
|
|
|
|
|
2025-09-29 17:29:56 +08:00
|
|
|
|
.footer .footer-content-box{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
background-color: #212e39;
|
|
|
|
|
|
padding: 20px 0px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.footer-content-box .footer-content-left{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
border-right: 1px solid #35404a;
|
|
|
|
|
|
}
|
|
|
|
|
|
.footer-content-left ul{
|
|
|
|
|
|
padding: 20px 100px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.footer-content-left .footer-item-title{
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.footer-content-left .footer-item{
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.footer-content-box .footer-content-right{
|
|
|
|
|
|
padding: 32px 0px 0px 100px;
|
|
|
|
|
|
}
|
2025-09-09 17:29:38 +08:00
|
|
|
|
|
2025-09-29 17:29:56 +08:00
|
|
|
|
.footer .footer-bottom-box{
|
|
|
|
|
|
color: #666a6d;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
background-color: black;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.footer-bottom-box>span{
|
|
|
|
|
|
margin:0px 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.footer-bottom-box .beian{
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
.footer-item a:hover{
|
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="root">
|
|
|
|
|
|
<div class="header">
|
|
|
|
|
|
<div class="logo-box">
|
|
|
|
|
|
<img src="/img/home/index/logo.png" alt="东进航科" width="239" height="72">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn-box">
|
|
|
|
|
|
<button class="login-btn" @click="sendParentMsg('login')">登录</button>
|
|
|
|
|
|
<button class="register-btn" @click="sendParentMsg('register')">注册</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="main">
|
|
|
|
|
|
<div class="banner-box">
|
|
|
|
|
|
<img src="/img/home/index/banner1.png" alt="东进航空">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item1">
|
|
|
|
|
|
<div class="title">众多优秀案例，为客户需求保驾护航</div>
|
|
|
|
|
|
<div class="sub-title">拥有众多行业重量级用户，让天下没有难飞的无人机</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item2">
|
|
|
|
|
|
<div class="item2-div" :style="{backgroundImage:'url('+item2.left+')'}">
|
|
|
|
|
|
<div class="item2-div-left">
|
|
|
|
|
|
<!-- <div class="item2-data-title">平台数据概览</div>-->
|
|
|
|
|
|
<!-- <div>-->
|
|
|
|
|
|
<!-- <div class="itme2-data">-->
|
2025-09-09 17:29:38 +08:00
|
|
|
|
|
2025-09-29 17:29:56 +08:00
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item2-div" :style="{backgroundImage:'url('+item2.center+')'}">
|
|
|
|
|
|
<div class="item2-center-box">
|
|
|
|
|
|
<div class="item2-data-title">平台数据概览</div>
|
|
|
|
|
|
<div style="display: flex">
|
|
|
|
|
|
<div class="itme2-center-data">
|
|
|
|
|
|
<div class="itme2-center-subtitle">赋能交通监测 执法和分析</div>
|
|
|
|
|
|
<div class="itme2-center-item-box">
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<span class="item-icon">01</span>
|
|
|
|
|
|
<span class="item-content">定时路线规划和巡检</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<span class="item-icon">02</span>
|
|
|
|
|
|
<span class="item-content">快速掌握交通流量情况</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<span class="item-icon">03</span>
|
|
|
|
|
|
<span class="item-content">智能客流情况分析</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<span class="item-icon">04</span>
|
|
|
|
|
|
<span class="item-content">交通应急管理与指挥调度</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<span class="item-icon">05</span>
|
|
|
|
|
|
<span class="item-content">助力交通巡航</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="itme2-center-data">
|
|
|
|
|
|
<div class="itme2-center-subtitle">景区（海岸线）城市治理</div>
|
|
|
|
|
|
<div class="itme2-center-item-box">
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<span class="item-icon">01</span>
|
|
|
|
|
|
<span class="item-content">结合潮汐进行路线规划与巡检</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<span class="item-icon">02</span>
|
|
|
|
|
|
<span class="item-content">客流与车辆计数与分析</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<span class="item-icon">03</span>
|
|
|
|
|
|
<span class="item-content">无人机巡飞、悬停与喊话</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<span class="item-icon">04</span>
|
|
|
|
|
|
<span class="item-content">固体垃圾巡查发现</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<span class="item-icon">05</span>
|
|
|
|
|
|
<span class="item-content">城市治理事件闭环处置</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
2025-09-09 17:29:38 +08:00
|
|
|
|
|
2025-09-29 17:29:56 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item2-div" :style="{backgroundImage:'url('+item2.right+')'}"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item3" :style="{backgroundImage:'url('+item3.item3ImgSrc+')'}">
|
|
|
|
|
|
<div class="item3-title">{{item3.title}}</div>
|
|
|
|
|
|
<div class="item3-sub-title">{{item3.subTitle}}</div>
|
|
|
|
|
|
<div class="item3-content-box">
|
|
|
|
|
|
<div class="item3-content">
|
|
|
|
|
|
<div class="item3-content-left">
|
|
|
|
|
|
<div class="item3-left-item"
|
|
|
|
|
|
v-for="(item,index) in item3.content"
|
|
|
|
|
|
:class="item3Index === index?'item3-left-item-avtive':''"
|
|
|
|
|
|
@click="handlerItem3Click(index)">
|
|
|
|
|
|
{{item.title}}
|
|
|
|
|
|
<img src="/img/home/index/sanjiao.png" class="item-icon">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item3-content-right">
|
|
|
|
|
|
<div class="item3-content-item"
|
|
|
|
|
|
v-for="(item,index) in item3Conetnts">
|
|
|
|
|
|
{{index+1}}、{{item}}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item4">
|
|
|
|
|
|
<div class="item4-title">功能模块</div>
|
|
|
|
|
|
<div class="item4-content-box">
|
|
|
|
|
|
<div class="item4-content-item" v-for="item in item4">
|
|
|
|
|
|
<img :src="item.icon" :alt="item.text" class="item4-icon">
|
|
|
|
|
|
<div class="item4-buttom">{{item.text}}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item5">
|
|
|
|
|
|
<div class="item5-title">巡检应用场景</div>
|
|
|
|
|
|
<div class="item5-subTitle">实时解读无人机的回传画面；打造多场景无人机AI应用，支持城市治理、环境治理、能源巡检、安防应急等多场景应用；对视频流进行AI识别分析，并将结果实时推送回云端，支持多场景同步解析人工接管：对于无人机飞行策略，操作人员可手动接管。实现无人机飞行任务，灵活、便捷、全方位视角观察。</div>
|
|
|
|
|
|
<div class="item5-conent-box">
|
|
|
|
|
|
<div class="item5-content-item">
|
|
|
|
|
|
<div class="item5-item-title">
|
|
|
|
|
|
<div>能源</div>
|
|
|
|
|
|
<img src="/img/home/index/xian.png"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item5-item-content">电网巡检</div>
|
|
|
|
|
|
<div class="item5-item-content">风机巡检</div>
|
|
|
|
|
|
<div class="item5-item-content">光伏巡检</div>
|
|
|
|
|
|
<div class="item5-item-content">石化巡检</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item5-content-item">
|
|
|
|
|
|
<div class="item5-item-title">
|
|
|
|
|
|
<div>交通</div>
|
|
|
|
|
|
<img src="/img/home/index/xian.png"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item5-item-content">交通巡检</div>
|
|
|
|
|
|
<div class="item5-item-content">公路巡检</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item5-content-item">
|
|
|
|
|
|
<div class="item5-item-title">
|
|
|
|
|
|
<div>安防应急</div>
|
|
|
|
|
|
<img src="/img/home/index/xian.png"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item5-item-content">安防巡检</div>
|
|
|
|
|
|
<div class="item5-item-content">应急巡检</div>
|
|
|
|
|
|
<div class="item5-item-content">工地巡检</div>
|
|
|
|
|
|
<div class="item5-item-content">园区巡检</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item5-content-item">
|
|
|
|
|
|
<div class="item5-item-title">
|
|
|
|
|
|
<div>环境</div>
|
|
|
|
|
|
<img src="/img/home/index/xian.png"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item5-item-content">水利巡检</div>
|
|
|
|
|
|
<div class="item5-item-content">林业巡检</div>
|
|
|
|
|
|
<div class="item5-item-content">环保巡检</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item5-content-item">
|
|
|
|
|
|
<div class="item5-item-title">
|
|
|
|
|
|
<div>其它</div>
|
|
|
|
|
|
<img src="/img/home/index/xian.png"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item5-item-content">基站巡检</div>
|
|
|
|
|
|
<div class="item5-item-content">城管巡检</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="footer">
|
|
|
|
|
|
<div class="footer-content-box">
|
|
|
|
|
|
<div class="footer-content-left">
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li class="footer-item-title">友情链接</li>
|
|
|
|
|
|
<li class="footer-item">
|
|
|
|
|
|
<a href="">华为应用商店</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="footer-item">
|
|
|
|
|
|
<a href="">小米应用商店</a></li>
|
|
|
|
|
|
<li class="footer-item">
|
|
|
|
|
|
<a href="">OPPO应用商店</a></li>
|
|
|
|
|
|
<li class="footer-item">
|
|
|
|
|
|
<a href="">苹果应用商店</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li class="footer-item-title">素材专题<li>
|
|
|
|
|
|
<li class="footer-item"><a href="">网站导航</a></li>
|
|
|
|
|
|
<li class="footer-item"><a href="">热门专题</a></li>
|
|
|
|
|
|
<li class="footer-item"><a href="">推荐专题</a></li>
|
|
|
|
|
|
<li class="footer-item"><a href="">搜索排行</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li class="footer-item-title">服务协议<li>
|
|
|
|
|
|
<li class="footer-item"><a href="">版权声明</a></li>
|
|
|
|
|
|
<li class="footer-item"><a href="">售后服务</a></li>
|
|
|
|
|
|
<li class="footer-item"><a href="">用户协议</a></li>
|
|
|
|
|
|
<li class="footer-item"><a href="">隐私政策</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li class="footer-item-title">了解我们<li>
|
|
|
|
|
|
<li class="footer-item"><a href="">关于我们</a></li>
|
|
|
|
|
|
<li class="footer-item"><a href="">联系我们</a></li>
|
|
|
|
|
|
<li class="footer-item"><a href="">帮助中心</a></li>
|
|
|
|
|
|
<li class="footer-item"><a href="">授权保障</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="footer-content-right">
|
|
|
|
|
|
<img src="/img/home/index/erweima.png" alt="二维码">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="footer-bottom-box">
|
|
|
|
|
|
<span>
|
|
|
|
|
|
版权所有 @ {{ footerDesc.banquan }}
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span class="beian">
|
|
|
|
|
|
{{ footerDesc.beian }}
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span>
|
|
|
|
|
|
联系电话: {{ footerDesc.phone }}
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span>
|
|
|
|
|
|
E-mail: {{ footerDesc.email }}
|
|
|
|
|
|
</span>
|
2025-09-09 17:29:38 +08:00
|
|
|
|
</div>
|
2025-09-29 17:29:56 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
<script src="/js/vue.global.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const {createApp} = Vue;
|
|
|
|
|
|
createApp({
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return{
|
|
|
|
|
|
item3Index:0,
|
|
|
|
|
|
item2:{
|
|
|
|
|
|
left:"/img/home/index/172933.png",
|
|
|
|
|
|
center:"/img/home/index/2.png",
|
|
|
|
|
|
right:"/img/home/index/3.png"
|
|
|
|
|
|
},
|
|
|
|
|
|
item3:{
|
|
|
|
|
|
item3ImgSrc:"/img/home/index/4.png",
|
|
|
|
|
|
title:'飞行控制平台',
|
|
|
|
|
|
subTitle:'对飞行任务进行统一管理，并对单个任务进行编辑，查看历史记录等。可查看每个任务的执行情况，采集的数据和历史记录',
|
|
|
|
|
|
content:[
|
|
|
|
|
|
{
|
|
|
|
|
|
title:"无人机操控",
|
|
|
|
|
|
datas:[
|
|
|
|
|
|
"可进行云台控制、飞行控制、手动接管。",
|
|
|
|
|
|
"操作飞机前后左右、上升下降、旋转移动。",
|
|
|
|
|
|
"可以实现对无人机远程控制，指点飞行，并控制无人机拍照、录像。",
|
|
|
|
|
|
"实现无人机自动任务定时执行、手动任务执行和临时任务执行。",
|
|
|
|
|
|
"可实现无人机第三方设备挂载和远程控制。",
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title:"资源中心",
|
|
|
|
|
|
datas:[
|
|
|
|
|
|
"配置无人机基础信息。",
|
|
|
|
|
|
"配置机库基础信息。",
|
|
|
|
|
|
"绑定站点，可查看站点状态信息、日志、详情等信息。",
|
|
|
|
|
|
"可手动清除任务及清除无人机文件。",
|
|
|
|
|
|
"飞行任务数据实时记录及云端上传。",
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title:"飞行策略规划",
|
|
|
|
|
|
datas:[
|
|
|
|
|
|
"规划无人飞行的任务路线。",
|
|
|
|
|
|
"配置各个航点的飞行速庶、高度、信航角度、云台角度。",
|
|
|
|
|
|
"配置名个航点的执行动作，包括悬停、旋转、 录像、拍照等动作。",
|
|
|
|
|
|
"支持无人机飞行任务的在线地图可视化配置及航点动作设置。",
|
|
|
|
|
|
"支持KML和KMZ文件外部导入。",
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title:"飞机任务管理",
|
|
|
|
|
|
datas:[
|
|
|
|
|
|
"配置自动任务信息。",
|
|
|
|
|
|
"配置手动任务信息。",
|
|
|
|
|
|
"配置快速任务信息。",
|
|
|
|
|
|
"支持无人机飞行任务时的拍照和视频。",
|
|
|
|
|
|
"可手动清除任务及清除无人机文件。",
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title:"飞机历史任务",
|
|
|
|
|
|
datas:[
|
|
|
|
|
|
"可查看无人机的飞行任务信息，进行每次任务的追溯。",
|
|
|
|
|
|
"任务详情可记录任务的高度及实时状态等信息，可查看视频和图片。",
|
|
|
|
|
|
"记录任务日志和上传视频和图片",
|
|
|
|
|
|
"如视频和图片上传失败可进行手动同步操作。",
|
|
|
|
|
|
"无人机在飞行中未执行完全部任务，可进行断点续飞，执行未完成的任务。",
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
item3Conetnts:[],
|
|
|
|
|
|
item4:[
|
|
|
|
|
|
{text:"实时监控",icon:'/img/home/index/shishi.png'},
|
|
|
|
|
|
{text:"任务管理",icon:'/img/home/index/renwu.png'},
|
|
|
|
|
|
{text:"飞行成果",icon:'/img/home/index/arid.png'},
|
|
|
|
|
|
{text:"飞行回放",icon:'/img/home/index/lishi.png'},
|
|
|
|
|
|
{text:"视频直播",icon:'/img/home/index/shipin.png'},
|
|
|
|
|
|
{text:"数据统计",icon:'/img/home/index/data.png'},
|
|
|
|
|
|
{text:"航线规划",icon:'/img/home/index/hangxian.png'},
|
|
|
|
|
|
],
|
|
|
|
|
|
item5:{
|
|
|
|
|
|
backImg:"/img/home/index/5.png"
|
|
|
|
|
|
},
|
|
|
|
|
|
footerDesc:{
|
|
|
|
|
|
banquan:"北京东进航空科技有限公司",
|
|
|
|
|
|
beian:"京ICP备13025552号 ",
|
|
|
|
|
|
phone:"010-51651919",
|
|
|
|
|
|
email:"market@mdr.com.cn",
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
this.initData()
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
handlerItem3Click(index){
|
|
|
|
|
|
this.item3Index = index
|
|
|
|
|
|
this.item3Conetnts = this.item3.content[index].datas;
|
|
|
|
|
|
},
|
|
|
|
|
|
initData(){
|
|
|
|
|
|
this.item3Conetnts = this.item3.content[this.item3Index].datas;
|
|
|
|
|
|
},
|
|
|
|
|
|
sendParentMsg(data){
|
|
|
|
|
|
window.parent.postMessage({
|
|
|
|
|
|
cmd:'myIframe',
|
|
|
|
|
|
params : {
|
|
|
|
|
|
info : data
|
|
|
|
|
|
}
|
|
|
|
|
|
},'*');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}).mount("#root")
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</html>
|
