|
|
@@ -1,263 +1,279 @@
|
|
|
<template>
|
|
|
<div class="content">
|
|
|
- <img src="../assets/02logo.png" class="logo" alt>
|
|
|
+ <div style="width:100%;height:100vh;overflow:auto" ref="page">
|
|
|
+
|
|
|
+ <div class="swiper-container">
|
|
|
+ <img src="../assets/02logo.png" class="logo" alt>
|
|
|
+
|
|
|
+ <div class="zixun" @click="goConnect">免费咨询</div>
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide bg swiper-item1" :style="{backgroundImage:'url('+require('../assets/01banner.png')+')'}">
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">
|
|
|
+ 线下地点
|
|
|
+ <br>AR赋能平台
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="zixun">免费咨询</div>
|
|
|
+ <p>
|
|
|
+ 无论身处何地，用户都可以使用《一米世界》，
|
|
|
+ <br>通过手机摄像头实时的探索和查看周围商场、商铺、景点、博物馆、
|
|
|
+ <br>商品、交通设施的各种信息。
|
|
|
+ </p>
|
|
|
|
|
|
- <div class="swiper-container">
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide bg swiper-item1" v-for="i in 3" :style="{backgroundImage:'url('+require('../assets/01banner.png')+')'}">
|
|
|
- <div class="left">
|
|
|
- <div class="title">
|
|
|
- 线下地点
|
|
|
- <br>AR赋能平台
|
|
|
- </div>
|
|
|
+ <p>
|
|
|
+ 无论室内还是室外，用户都可以使用《一米世界》进行导航，
|
|
|
+ <br>其目的地可以是一个地方，一个位置，甚至可以是一件东西。
|
|
|
+ </p>
|
|
|
|
|
|
- <p>
|
|
|
- 无论身处何地，用户都可以使用《一米世界》，
|
|
|
- <br>通过手机摄像头实时的探索和查看周围商场、商铺、景点、博物馆、
|
|
|
- <br>商品、交通设施的各种信息。
|
|
|
- </p>
|
|
|
+ <div class="about" @click="goAbout">关于我们</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <p>
|
|
|
- 无论室内还是室外，用户都可以使用《一米世界》进行导航，
|
|
|
- <br>其目的地可以是一个地方，一个位置，甚至可以是一件东西。
|
|
|
- </p>
|
|
|
+ <div class="center">
|
|
|
+ <div class="title">
|
|
|
+ 快速部署
|
|
|
+ <br>无需增加额外成本
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="about">关于我们</div>
|
|
|
- </div>
|
|
|
+ <div class="day bg" :style="{backgroundImage:'url('+require('../assets/03.png')+')'}">
|
|
|
+ <div class="name">3</div>
|
|
|
+ <div class="unit">工作日</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="center">
|
|
|
- <div class="title">
|
|
|
- 快速部署
|
|
|
- <br>无需增加额外成本
|
|
|
+ <div class="bottom">更具内容，3-15个工作日</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="day bg" :style="{backgroundImage:'url('+require('../assets/03.png')+')'}">
|
|
|
- <div class="name">3</div>
|
|
|
- <div class="unit">工作日</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">快速更新 灵活配置</div>
|
|
|
+ <img src="../assets/04.png" alt>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="bottom">更具内容，3-15个工作日</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="right">
|
|
|
- <div class="title">快速更新 灵活配置</div>
|
|
|
- <img src="../assets/04.png" alt>
|
|
|
</div>
|
|
|
+ <div class="swiper-slide bg" :style="{backgroundImage:'url('+require('../assets/02banner.jpg')+')'}"></div>
|
|
|
+ <div class="swiper-slide bg" :style="{backgroundImage:'url('+require('../assets/03banner.jpg')+')'}"></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="swiper-pagination"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="main">
|
|
|
- <div class="mainTitle" style="margin:1.1rem 0 0">应用场景</div>
|
|
|
|
|
|
- <div class="sceneList" style="margin-top:0.4rem">
|
|
|
- <div class="sceneItem">
|
|
|
- <img src="../assets/07.png" alt>
|
|
|
- <div class="name">旅游景区</div>
|
|
|
- </div>
|
|
|
- <div class="sceneItem">
|
|
|
- <img src="../assets/08.png" alt>
|
|
|
- <div class="name">线下商业体</div>
|
|
|
- </div>
|
|
|
- <div class="sceneItem">
|
|
|
- <img src="../assets/09.png" alt>
|
|
|
- <div class="name">酒店</div>
|
|
|
- </div>
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="sceneList">
|
|
|
- <div class="sceneItem">
|
|
|
- <img src="../assets/10.png" alt>
|
|
|
- <div class="name">学校</div>
|
|
|
- </div>
|
|
|
- <div class="sceneItem">
|
|
|
- <img src="../assets/11.png" alt>
|
|
|
- <div class="name">地产</div>
|
|
|
- </div>
|
|
|
- <div class="sceneItem">
|
|
|
- <img src="../assets/12.png" alt>
|
|
|
- <div class="name">交通</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="mainTitle" style="margin:1.1rem 0 0">应用场景</div>
|
|
|
|
|
|
- <div class="solute">
|
|
|
- <div class="left">
|
|
|
- <div class="title">
|
|
|
- 快速定位
|
|
|
- <br>精确导航
|
|
|
+ <div class="sceneList" style="margin-top:0.4rem">
|
|
|
+ <div class="sceneItem" @click="chooseVideo('旅游景区')">
|
|
|
+ <img src="../assets/07.png" alt>
|
|
|
+ <div class="name">旅游景区</div>
|
|
|
+ </div>
|
|
|
+ <div class="sceneItem" @click="chooseVideo('线下商业体')">
|
|
|
+ <img src="../assets/08.png" alt>
|
|
|
+ <div class="name">线下商业体</div>
|
|
|
+ </div>
|
|
|
+ <div class="sceneItem" @click="chooseVideo('酒店')">
|
|
|
+ <img src="../assets/09.png" alt>
|
|
|
+ <div class="name">酒店</div>
|
|
|
</div>
|
|
|
- <p>
|
|
|
- 游客可以快速查找定位景点、展品、车位，从而提升旅游
|
|
|
- <br>效率，减少寻找和行走的时间。
|
|
|
- </p>
|
|
|
- <div class="btn">解决方案</div>
|
|
|
</div>
|
|
|
- <div class="right">
|
|
|
- <div class="rightContent">
|
|
|
- <div class="top bg" :style="{backgroundImage:'url('+require('../assets/14.png')+')'}">1m</div>
|
|
|
|
|
|
- <p>无论您身在何处，用户都可以使用“一米世界”通过手机摄像头，实时浏览和查看购物中心、商店、景点、博物馆、商品和交通设施的各种信息。</p>
|
|
|
+ <div class="sceneList" @click="chooseVideo('学校')">
|
|
|
+ <div class="sceneItem">
|
|
|
+ <img src="../assets/10.png" alt>
|
|
|
+ <div class="name">学校</div>
|
|
|
+ </div>
|
|
|
+ <div class="sceneItem" @click="chooseVideo('地产')">
|
|
|
+ <img src="../assets/11.png" alt>
|
|
|
+ <div class="name">地产</div>
|
|
|
+ </div>
|
|
|
+ <div class="sceneItem" @click="chooseVideo('交通')">
|
|
|
+ <img src="../assets/12.png" alt>
|
|
|
+ <div class="name">交通</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/13.png')+')'}"></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="solute solute2">
|
|
|
- <div class="right">
|
|
|
- <div class="rightContent bg" :style="{backgroundImage:'url('+require('../assets/16.png')+')'}">
|
|
|
- <div>持续更新内容</div>
|
|
|
+ <div class="solute">
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">
|
|
|
+ 快速定位
|
|
|
+ <br>精确导航
|
|
|
+ </div>
|
|
|
+ <p>
|
|
|
+ 游客可以快速查找定位景点、展品、车位，从而提升旅游
|
|
|
+ <br>效率，减少寻找和行走的时间。
|
|
|
+ </p>
|
|
|
+ <div class="btn" @click="downLoad('快速定位精准导航解决方案.pdf')">解决方案</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/15.png')+')'}"></div>
|
|
|
- </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="rightContent">
|
|
|
+ <div class="top bg" :style="{backgroundImage:'url('+require('../assets/14.png')+')'}">1m</div>
|
|
|
|
|
|
- <div class="left">
|
|
|
- <div class="title">
|
|
|
- 智能讲解
|
|
|
- <br>主题再现
|
|
|
+ <p>无论您身在何处，用户都可以使用“一米世界”通过手机摄像头，实时浏览和查看购物中心、商店、景点、博物馆、商品和交通设施的各种信息。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/solute1.jpg')+')'}"></div>
|
|
|
</div>
|
|
|
- <p>
|
|
|
- 根据游客所在的位置，触发智能讲解员，讲解的内容不仅仅是
|
|
|
- <br>语音，还包括文字、图片、视频、三维角色、甚至整个场景的
|
|
|
- <br>还原。
|
|
|
- </p>
|
|
|
- <div class="btn">解决方案</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="solute solute3">
|
|
|
- <div class="left">
|
|
|
- <div class="title">
|
|
|
- 随时随地
|
|
|
- <br>虚拟娱乐
|
|
|
+ <div class="solute solute2">
|
|
|
+ <div class="right">
|
|
|
+ <div class="rightContent bg" :style="{backgroundImage:'url('+require('../assets/16.png')+')'}">
|
|
|
+ <div>持续更新内容</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/solute2.jpg')+')'}"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">
|
|
|
+ 智能讲解
|
|
|
+ <br>主题再现
|
|
|
+ </div>
|
|
|
+ <p>
|
|
|
+ 根据游客所在的位置，触发智能讲解员，讲解的内容不仅仅是
|
|
|
+ <br>语音，还包括文字、图片、视频、三维角色、甚至整个场景的
|
|
|
+ <br>还原。
|
|
|
+ </p>
|
|
|
+ <div class="btn" @click="downLoad('智能讲解主题再现解决方案.pdf')">解决方案</div>
|
|
|
</div>
|
|
|
- <p>
|
|
|
- 游客将不断获得趣味的互动和惊喜的体验，从而让枯燥的
|
|
|
- <br>排队等待变得有趣，并可从中获益。
|
|
|
- </p>
|
|
|
- <div class="btn">解决方案</div>
|
|
|
</div>
|
|
|
- <div class="right">
|
|
|
- <!-- <div class="rightContent">
|
|
|
+
|
|
|
+ <div class="solute solute3">
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">
|
|
|
+ 随时随地
|
|
|
+ <br>虚拟娱乐
|
|
|
+ </div>
|
|
|
+ <p>
|
|
|
+ 游客将不断获得趣味的互动和惊喜的体验，从而让枯燥的
|
|
|
+ <br>排队等待变得有趣，并可从中获益。
|
|
|
+ </p>
|
|
|
+ <div class="btn" @click="downLoad('随时随地虚拟娱乐解决方案.pdf')">解决方案</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <!-- <div class="rightContent">
|
|
|
<div class="top bg" style="font-size:1rem" :style="{backgroundImage:'url('+require('../assets/14.png')+')'}">∞</div>
|
|
|
|
|
|
<p>无论您身在何处，用户都可以使用“一米世界”通过手机摄像头，实时浏览和查看购物中心、商店、景点、博物馆、商品和交通设施的各种信息。</p>
|
|
|
- </div>-->
|
|
|
- <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/17.png')+')'}"></div>
|
|
|
+ </div>-->
|
|
|
+ <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/solute3.jpg')+')'}"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="solute solute2">
|
|
|
- <div class="right">
|
|
|
- <!-- <div class="rightContent bg" :style="{backgroundImage:'url('+require('../assets/16.png')+')'}">
|
|
|
+ <div class="solute solute2">
|
|
|
+ <div class="right">
|
|
|
+ <!-- <div class="rightContent bg" :style="{backgroundImage:'url('+require('../assets/16.png')+')'}">
|
|
|
<div>其他内容</div>
|
|
|
- </div>-->
|
|
|
- <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/15.png')+')'}"></div>
|
|
|
- </div>
|
|
|
+ </div>-->
|
|
|
+ <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/solute4.jpg')+')'}"></div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="left">
|
|
|
- <div class="title">
|
|
|
- 无限内容
|
|
|
- <br>百变时空
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">
|
|
|
+ 无限内容
|
|
|
+ <br>百变时空
|
|
|
+ </div>
|
|
|
+ <p>
|
|
|
+ 哪怕是同一个景点
|
|
|
+ <br>语音，还包括文字、图片、视频、三维角色、甚至整个场景的
|
|
|
+ <br>还原。
|
|
|
+ </p>
|
|
|
+ <div class="btn" @click="downLoad('无限内容百变时空解决方案.pdf')">解决方案</div>
|
|
|
</div>
|
|
|
- <p>
|
|
|
- 哪怕是同一个景点
|
|
|
- <br>语音，还包括文字、图片、视频、三维角色、甚至整个场景的
|
|
|
- <br>还原。
|
|
|
- </p>
|
|
|
- <div class="btn">解决方案</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="solute solute3">
|
|
|
- <div class="left">
|
|
|
- <div class="title">
|
|
|
- 精准信息
|
|
|
- <br>快速决策
|
|
|
+ <div class="solute solute3">
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">
|
|
|
+ 精准信息
|
|
|
+ <br>快速决策
|
|
|
+ </div>
|
|
|
+ <p>
|
|
|
+ 根据游客所在的位置，全面推送周围的商铺、商品、折扣
|
|
|
+ <br>、活动信息，促进游客消费转化。
|
|
|
+ </p>
|
|
|
+ <div class="btn" @click="downLoad('精准信息快速决策解决方案.pdf')">解决方案</div>
|
|
|
</div>
|
|
|
- <p>
|
|
|
- 根据游客所在的位置，全面推送周围的商铺、商品、折扣
|
|
|
- <br>、活动信息，促进游客消费转化。
|
|
|
- </p>
|
|
|
- <div class="btn">解决方案</div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <!-- <div class="rightContent">
|
|
|
+ <div class="right">
|
|
|
+ <!-- <div class="rightContent">
|
|
|
<div class="top bg" :style="{backgroundImage:'url('+require('../assets/14.png')+')'}">1m</div>
|
|
|
|
|
|
<p>无论您身在何处，用户都可以使用“一米世界”通过手机摄像头，实时浏览和查看购物中心、商店、景点、博物馆、商品和交通设施的各种信息。</p>
|
|
|
- </div>-->
|
|
|
+ </div>-->
|
|
|
|
|
|
- <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/17.png')+')'}"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="company bg" :style="{backgroundImage:'url('+require('../assets/18.png')+')'}">
|
|
|
- <div class="title">
|
|
|
- 即将落地或
|
|
|
- <br>已经落地的项目
|
|
|
+ <div class="rightColor bg" :style="{backgroundImage:'url('+require('../assets/solute5.jpg')+')'}"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="subTitle">最终解释权属于我公司。</div>
|
|
|
|
|
|
- <img v-for="item in imgList" :src="item.img" :style="item.style" alt>
|
|
|
- </div>
|
|
|
+ <div class="company bg" :style="{backgroundImage:'url('+require('../assets/18.png')+')'}">
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">
|
|
|
+ 即将落地或
|
|
|
+ <br>已经落地的项目
|
|
|
+ </div>
|
|
|
+ <div class="subTitle">最终解释权属于我公司。</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="introduce">
|
|
|
- <div class="title">公司介绍</div>
|
|
|
- <div class="subTitle">南京一米世界软件科技有限公司业务包括增强现实、人工智能、区块链、大数据等技术及解决方案的研发，开发并提供大量基于互联网的产品与服务。公司秉承“用科技让世界更有趣”的企业使命，用最新的科技为旅游、零售、公共交通、医疗等传统行业赋能。</div>
|
|
|
- </div>
|
|
|
+ <!-- <img v-for="item in imgList" :src="item.img" :style="item.style" alt> -->
|
|
|
+ <img class="rightImg" src="../assets/29.png" alt>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="connect bg" :style="{backgroundImage:'url('+require('../assets/28.png')+')'}">
|
|
|
- <div class="left">
|
|
|
- <div class="title">联系我们</div>
|
|
|
- <div class="btn">7*24小时竭诚为您服务</div>
|
|
|
+ <div class="introduce" ref='introduce'>
|
|
|
+ <div class="title">公司介绍</div>
|
|
|
+ <div class="subTitle">南京一米世界软件科技有限公司业务包括增强现实、人工智能、区块链、大数据等技术及解决方案的研发，开发并提供大量基于互联网的产品与服务。公司秉承“用科技让世界更有趣”的企业使命，用最新的科技为旅游、零售、公共交通、医疗等传统行业赋能。</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="center">
|
|
|
- <div class="title">联系方式</div>
|
|
|
+ <div class="connect bg" ref="connect" :style="{backgroundImage:'url('+require('../assets/28.png')+')'}">
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">联系我们</div>
|
|
|
+ <div class="btn">7*24小时竭诚为您服务</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="item">电话：025-58762849</div>
|
|
|
- <div class="item">手机：13357817864</div>
|
|
|
- <div class="item">邮箱：2582936849@qq.com</div>
|
|
|
- <div class="item">
|
|
|
- <span>地址：江苏省南京市河西大街198号</span>
|
|
|
- <br>
|
|
|
- <span style="margin-left:0.54rem;">同进大厦三单元</span>
|
|
|
+ <div class="center">
|
|
|
+ <div class="title">联系方式</div>
|
|
|
+
|
|
|
+ <div class="item">电话：025-58762849</div>
|
|
|
+ <div class="item">手机：13357817864</div>
|
|
|
+ <div class="item">邮箱：2582936849@qq.com</div>
|
|
|
+ <div class="item">
|
|
|
+ <span>地址：江苏省南京市河西大街198号</span>
|
|
|
+ <br>
|
|
|
+ <span style="margin-left:0.54rem;">同进大厦三单元</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="right">
|
|
|
- <el-form ref="form" size="mini" :model="form" label-position="left" label-width="0.8rem" style="max-width:4.66rem;margin-left:0.72rem;">
|
|
|
- <div class="title">留言板</div>
|
|
|
- <el-form-item label="手机">
|
|
|
- <el-input v-model="form.phone" style="width:2.2rem"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="地址">
|
|
|
- <el-cascader :options="options" v-model="form.selectedOptions" style="width:2.2rem"></el-cascader>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="留言">
|
|
|
- <el-input type="textarea" v-model="form.desc"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="验证码">
|
|
|
- <div class="yanzhen">
|
|
|
- <el-input v-model="form.yanzhen" style="width:1.3rem"></el-input>
|
|
|
- <img :src="$baseUrl+'/auth/image?'+autoData" style="height:0.31rem" alt>
|
|
|
- <span @click="getAuto">换一张</span>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label-width="0">
|
|
|
- <el-button type="primary" @click="onSubmit" style="width:4.66rem">提交</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <div class="right">
|
|
|
+ <el-form ref="form" size="mini" :model="form" label-position="left" label-width="0.8rem" style="max-width:4.66rem;margin-left:0.72rem;">
|
|
|
+ <div class="title">留言板</div>
|
|
|
+ <el-form-item label="手机">
|
|
|
+ <el-input v-model="form.phone" style="width:2.2rem"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="地址">
|
|
|
+ <el-cascader :options="options" v-model="form.selectedOptions" style="width:2.2rem"></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="留言">
|
|
|
+ <el-input type="textarea" v-model="form.desc" resize='none'></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="验证码">
|
|
|
+ <div class="yanzhen">
|
|
|
+ <el-input v-model="form.yanzhen" style="width:1.3rem"></el-input>
|
|
|
+ <img :src="$baseUrl+'/auth/image?'+autoData" style="height:0.31rem" alt>
|
|
|
+ <span @click="getAuto">换一张</span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label-width="0">
|
|
|
+ <el-button type="primary" @click="onSubmit" style="width:4.66rem">提交</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="pageBottom">Copyright © 南京一米世界软件科技有限公司 备案号：苏ICP备18010231号</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="pageBottom">Copyright © 南京一米世界软件科技有限公司 备案号：苏ICP备18010231号</div>
|
|
|
+ <div class="box" v-if="showVideo" @click="showVideo=false">
|
|
|
+ <div class="video animated fadeInDownBig" @click.stop>
|
|
|
+ <video ref="vedioPage1" controls width="100%" height="100%">
|
|
|
+ <source :src="'http://oss.izouma.com/yimishijie/'+video+'.mp4'" type="video/mp4">
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -273,18 +289,20 @@ export default {
|
|
|
var mySwiper = new Swiper('.swiper-container', {
|
|
|
pagination: {
|
|
|
el: '.swiper-pagination',//自动隐藏
|
|
|
+ clickable :true,
|
|
|
}
|
|
|
})
|
|
|
this.getImgs(19);
|
|
|
}, 1000)
|
|
|
- console.log(citys)
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
imgList: [],
|
|
|
form: {},
|
|
|
- autoData: ''
|
|
|
+ autoData: '',
|
|
|
// options:[]
|
|
|
+ video: '',
|
|
|
+ showVideo: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -372,6 +390,19 @@ export default {
|
|
|
},
|
|
|
getAuto() {
|
|
|
this.autoData = Date.parse(new Date())
|
|
|
+ },
|
|
|
+ chooseVideo(src) {
|
|
|
+ this.showVideo = true
|
|
|
+ this.video = src
|
|
|
+ },
|
|
|
+ goAbout(){
|
|
|
+ this.$refs.page.scrollTop=this.$refs.introduce.offsetTop
|
|
|
+ },
|
|
|
+ goConnect(){
|
|
|
+ this.$refs.page.scrollTop=this.$refs.connect.offsetTop
|
|
|
+ },
|
|
|
+ downLoad(fileName){
|
|
|
+ window.open('http://oss.izouma.com/yimishijie/'+fileName)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -418,7 +449,7 @@ export default {
|
|
|
|
|
|
.left {
|
|
|
position: absolute;
|
|
|
- left: 2rem;
|
|
|
+ left: 10%;
|
|
|
top: 3.57rem;
|
|
|
.title {
|
|
|
font-size: 0.68rem;
|
|
|
@@ -458,7 +489,7 @@ export default {
|
|
|
border-radius: 0.5rem;
|
|
|
background-color: #fff;
|
|
|
position: absolute;
|
|
|
- left: 9.15rem;
|
|
|
+ right: 34.6%;
|
|
|
top: 4.57rem;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -507,7 +538,7 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
position: absolute;
|
|
|
- left: 13.22rem;
|
|
|
+ right: 12.3%;
|
|
|
top: 5.21rem;
|
|
|
.title {
|
|
|
font-size: 0.28rem;
|
|
|
@@ -542,6 +573,7 @@ export default {
|
|
|
|
|
|
.sceneItem {
|
|
|
position: relative;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
img {
|
|
|
width: 3.86rem;
|
|
|
@@ -562,10 +594,12 @@ export default {
|
|
|
}
|
|
|
.solute {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-top: 2.81rem;
|
|
|
+ width: 100%;
|
|
|
.left {
|
|
|
+ margin: 0 auto;
|
|
|
.title {
|
|
|
font-size: 0.477rem;
|
|
|
font-weight: bold;
|
|
|
@@ -653,7 +687,6 @@ export default {
|
|
|
padding: 0 1.04rem 0.72rem 0;
|
|
|
|
|
|
margin-left: 0;
|
|
|
- margin-right: 2.75rem;
|
|
|
}
|
|
|
.rightColor {
|
|
|
width: 7.35rem;
|
|
|
@@ -692,6 +725,11 @@ export default {
|
|
|
position: relative;
|
|
|
margin-top: 2.84rem;
|
|
|
overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ .left {
|
|
|
+ // min-width: 4rem;
|
|
|
+ }
|
|
|
.title {
|
|
|
font-size: 0.48rem;
|
|
|
color: #fff;
|
|
|
@@ -705,8 +743,13 @@ export default {
|
|
|
color: rgba(255, 255, 255, 0.8);
|
|
|
}
|
|
|
|
|
|
- img {
|
|
|
- position: absolute;
|
|
|
+ // img {
|
|
|
+ // position: absolute;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .rightImg {
|
|
|
+ width: 11.56rem;
|
|
|
+ margin-left: 12%;
|
|
|
}
|
|
|
}
|
|
|
.introduce {
|
|
|
@@ -735,6 +778,9 @@ export default {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
margin-top: 2rem;
|
|
|
+ background-position: left center;
|
|
|
+ width: 100%;
|
|
|
+ background-size: contain;
|
|
|
.left {
|
|
|
margin-left: 2.01rem;
|
|
|
.title {
|
|
|
@@ -804,11 +850,11 @@ export default {
|
|
|
margin-left: 0.05rem;
|
|
|
}
|
|
|
|
|
|
- span{
|
|
|
+ span {
|
|
|
cursor: pointer;
|
|
|
text-decoration: underline;
|
|
|
color: #524ed1;
|
|
|
- margin-left: .1rem;
|
|
|
+ margin-left: 0.1rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -822,4 +868,20 @@ export default {
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.box {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 200;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ .video {
|
|
|
+ width: 15rem;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
