cquavui/public/index.html
2025-09-29 17:29:56 +08:00

740 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<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{
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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">-->
<!-- </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>
</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>
</div>
</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>