样式修复

master
yujialong 3 years ago
parent b7e4c65c0e
commit 6b8196ed4b
  1. 4
      public/index.html
  2. 0
      src/assets/img/index/banner1-1.png
  3. 0
      src/assets/img/index/banner1-2.png
  4. 0
      src/assets/img/index/banner1-3.png
  5. 0
      src/assets/img/index/banner1-text.png
  6. BIN
      src/assets/img/index/banner2-1.png
  7. BIN
      src/assets/img/index/banner2-2.png
  8. BIN
      src/assets/img/index/banner2-text.png
  9. BIN
      src/assets/img/index/banner3-1.png
  10. BIN
      src/assets/img/index/banner3-2.png
  11. BIN
      src/assets/img/index/banner3-3.png
  12. BIN
      src/assets/img/index/banner3-text.png
  13. BIN
      src/assets/img/index/client.png
  14. BIN
      src/assets/img/index/dataforward.png
  15. BIN
      src/assets/img/index/occupationlab.png
  16. BIN
      src/assets/img/index/school1.png
  17. BIN
      src/assets/img/index/school2.png
  18. BIN
      src/assets/img/index/school3.png
  19. BIN
      src/assets/img/index/school4.png
  20. BIN
      src/assets/img/index/school5.png
  21. BIN
      src/assets/img/index/slide2.png
  22. 5
      src/layouts/header/index.vue
  23. 68
      src/pages/about/list/index.vue
  24. 203
      src/pages/index/list/index.vue
  25. 2
      src/setting.js
  26. 4
      src/styles/common.scss
  27. BIN
      src/styles/font/DIN-Condensed-Bold.ttf

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="职站,教学,教育,在线编程"> <meta name="keywords" content="职站,教学,教育,在线编程">
<meta name="description" content="职站是一款辅助院校教师开展虚拟仿真实验教学的智能云实践平台。平台采用了大数据,云计算等技术,为学校搭建信息化平台提供了基础,可助力院校实现教学智能化升级。职站平台设计遵循着极简、高效的理念,可帮助老师轻松开展实验教学,并支持自定义发布考核和练习,智能统计和检验学生的日常实训练习效果;老师还可以通过可视化图表报告直观查看学生实训成绩,评估教学成果。"/> <meta name="description" content="致力于成为教育产业数字化的推动者,成就百万教育产业数字化的创业者"/>
<meta name="baidu-site-verification" content="code-TRfXe8xIkJ" /> <meta name="baidu-site-verification" content="code-TRfXe8xIkJ" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css">
<title>或然官网</title> <title>深圳或然科技有限公司</title>
</head> </head>
<body> <body>
<noscript> <noscript>

Before

Width:  |  Height:  |  Size: 519 KiB

After

Width:  |  Height:  |  Size: 519 KiB

Before

Width:  |  Height:  |  Size: 623 KiB

After

Width:  |  Height:  |  Size: 623 KiB

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 575 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 245 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 294 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 68 KiB

@ -42,6 +42,11 @@ $height: 64px;
.logo{ .logo{
margin: 0 50px 0 63px; margin: 0 50px 0 63px;
} }
.nav-wrap {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
} }
@media (max-width: 1430px) { @media (max-width: 1430px) {
.header { .header {

@ -55,31 +55,31 @@
<ul class="list"> <ul class="list">
<li> <li>
<img class="arrow" src="@/assets/img/about/arrow.png" alt=""> <img class="arrow" src="@/assets/img/about/arrow.png" alt="">
<h6>2018.12</h6> <h6 class="wow fadeInDown" data-wow-delay="0.1s">2018.12</h6>
<p class="text">或然科技筹备成立</p> <p class="text">或然科技筹备成立</p>
</li> </li>
<li> <li>
<h6>2019.12</h6> <h6 class="wow fadeInUp" data-wow-delay="0.5s">2019.12</h6>
<p class="text">核心团队组建完成</p> <p class="text">核心团队组建完成</p>
<img class="arrow" src="@/assets/img/about/arrow.png" alt=""> <img class="arrow" src="@/assets/img/about/arrow.png" alt="">
</li> </li>
<li> <li>
<img class="arrow" src="@/assets/img/about/arrow.png" alt=""> <img class="arrow" src="@/assets/img/about/arrow.png" alt="">
<h6>2020.10</h6> <h6 class="wow fadeInDown" data-wow-delay="0.9s">2020.10</h6>
<p class="text">或然技术中台V1.0发布</p> <p class="text">或然技术中台V1.0发布</p>
</li> </li>
<li> <li>
<h6>2021.03</h6> <h6 class="wow fadeInUp" data-wow-delay="1.4s">2021.03</h6>
<p class="text">职站平台V1.0发布</p> <p class="text">职站平台V1.0发布</p>
<img class="arrow" src="@/assets/img/about/arrow.png" alt=""> <img class="arrow" src="@/assets/img/about/arrow.png" alt="">
</li> </li>
<li> <li>
<img class="arrow" src="@/assets/img/about/arrow.png" alt=""> <img class="arrow" src="@/assets/img/about/arrow.png" alt="">
<h6>2021.07</h6> <h6 class="wow fadeInDown" data-wow-delay="1.8s">2021.07</h6>
<p class="text">助力第一个城市合伙人完成了第一个项目落地</p> <p class="text">助力第一个城市合伙人完成了第一个项目落地</p>
</li> </li>
<li> <li>
<h6>2022.05</h6> <h6 class="wow fadeInUp" data-wow-delay="2.2s">2022.05</h6>
<p class="text">Dataforward平台V1.0发布</p> <p class="text">Dataforward平台V1.0发布</p>
<img class="arrow" src="@/assets/img/about/arrow.png" alt=""> <img class="arrow" src="@/assets/img/about/arrow.png" alt="">
</li> </li>
@ -112,7 +112,7 @@
<div class="item"> <div class="item">
<div class="line"> <div class="line">
<img class="icon" src="@/assets/img/about/phone.png" alt=""> <img class="icon" src="@/assets/img/about/phone.png" alt="">
合作咨询林经理 18818574533 合作咨询孙经理 18565785395
</div> </div>
<div class="line"> <div class="line">
<img class="icon" src="@/assets/img/about/mail.png" alt=""> <img class="icon" src="@/assets/img/about/mail.png" alt="">
@ -131,6 +131,7 @@
</template> </template>
<script> <script>
import WOW from 'wow.js'
import Setting from '@/setting' import Setting from '@/setting'
import util from '@/libs/util' import util from '@/libs/util'
export default { export default {
@ -140,12 +141,15 @@ export default {
} }
}, },
mounted() {}, mounted() {
new WOW().init()
},
methods: {} methods: {}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css);
.wrap { .wrap {
position: relative; position: relative;
background-color: #F9F9F9; background-color: #F9F9F9;
@ -182,12 +186,12 @@ export default {
.inner { .inner {
position: relative; position: relative;
width: 1200px; width: 1200px;
padding: 67px 0; padding: 87px 0 67px;
margin: 0 auto; margin: 0 auto;
} }
.en { .en {
position: absolute; position: absolute;
top: 40px; top: 60px;
left: 50%; left: 50%;
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -210,6 +214,7 @@ export default {
position: relative; position: relative;
font-size: 30px; font-size: 30px;
color: #0B1D30; color: #0B1D30;
font-weight: bold;
} }
.brief { .brief {
margin: 20px 0 30px; margin: 20px 0 30px;
@ -233,6 +238,7 @@ export default {
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
height: 153px; height: 153px;
margin-top: -220px;
color: #fff; color: #fff;
background: url(../../../assets/img/about/about2.png) 0 0/cover no-repeat; background: url(../../../assets/img/about/about2.png) 0 0/cover no-repeat;
.inner { .inner {
@ -276,7 +282,7 @@ export default {
} }
} }
img{ img{
width: 64px; width: 70px;
transition: .6s; transition: .6s;
} }
h6{ h6{
@ -294,18 +300,26 @@ export default {
} }
} }
.progress { .progress {
.inner {
width: auto;
}
.list { .list {
display: flex; display: flex;
justify-content: center;
margin-top: 200px; margin-top: 200px;
} }
li { li {
position: relative; position: relative;
max-width: 180px;
margin-right: 80px; margin-right: 80px;
text-align: center; text-align: center;
h6 { h6 {
margin: 20px 0 10px; margin: 20px 0 10px;
font-size: 40px; font-size: 40px;
font-family: dinBold;
font-weight: bold;
color: #2D67F6; color: #2D67F6;
line-height: 48px;
} }
.text { .text {
font-size: 15px; font-size: 15px;
@ -314,15 +328,39 @@ export default {
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 15px; top: 9px;
left: 98px; left: 76px;
width: 168px; width: 168px;
height: 1px; height: 1px;
border: 3px solid; border: 3px solid;
border-image: linear-gradient(209deg, rgba(32, 101, 255, 0.01), rgba(32, 101, 255, 1), rgba(32, 101, 255, 0)) 3 3; border-image: linear-gradient(209deg, rgba(32, 101, 255, 0.01), rgba(32, 101, 255, 1), rgba(32, 101, 255, 0)) 3 3;
} }
&:nth-child(2) {
margin-right: 75px;
&:after {
left: 82px;
}
}
&:nth-child(3) {
margin-right: 67px;
&:after {
left: 93px;
}
}
&:nth-child(4) {
margin-right: 51px;
}
&:nth-child(5) {
margin-right: 27px;
&:after {
left: 108px;
}
}
&:last-child {
margin-right: 0;
}
&:nth-child(even) { &:nth-child(even) {
margin-top: -117px; margin-top: -130px;
.arrow { .arrow {
transform: rotateX(180deg); transform: rotateX(180deg);
} }
@ -330,7 +368,7 @@ export default {
margin: 10px 0 20px; margin: 10px 0 20px;
} }
&:after { &:after {
top: 133px; top: 139px;
} }
} }
&:last-child:after { &:last-child:after {

@ -1,14 +1,28 @@
<template> <template>
<div class="wrap index"> <div class="wrap index">
<div class="banner"> <div class="banner">
<img class="text" src="@/assets/img/index/banner-text.png" alt=""> <el-carousel height="688px" autoplay :interval="5000">
<el-carousel-item>
<div class="bg banner-bg1"></div>
<img class="text wow fadeInLeft" src="@/assets/img/index/banner1-text.png" alt="">
</el-carousel-item>
<el-carousel-item>
<div class="bg banner-bg2"></div>
<img class="text wow fadeInLeft" src="@/assets/img/index/banner2-text.png" alt="">
</el-carousel-item>
<el-carousel-item>
<div class="bg banner-bg3"></div>
<img class="text wow fadeInLeft" src="@/assets/img/index/banner3-text.png" alt="">
</el-carousel-item>
</el-carousel>
</div> </div>
<!-- 为什么加入我们 --> <!-- 为什么加入我们 -->
<div class="adv" id="part2"> <div class="adv" id="part2">
<div class="inner"> <div class="inner">
<h6 class="i-title">为什么加入我们</h6> <h6 class="i-title wow fadeInDown">为什么加入我们</h6>
<p class="en">WHY JOIN US</p> <p class="en">WHY JOIN US</p>
<p class="brief">专业全面高效</p> <p class="brief wow fadeInDown">专业全面高效</p>
<ul class="list"> <ul class="list">
<li class="wow fadeInDown" data-wow-delay="0.5s"> <li class="wow fadeInDown" data-wow-delay="0.5s">
<img src="@/assets/img/index/index3.png" alt=""> <img src="@/assets/img/index/index3.png" alt="">
@ -31,7 +45,7 @@
<!-- 关于我们 --> <!-- 关于我们 -->
<div class="about" id="part1"> <div class="about" id="part1">
<div class="desc wow fadeInDown"> <div class="desc wow fadeInDown">
<h6 class="i-title">关于我们</h6> <h6 class="i-title wow fadeInDown">关于我们</h6>
<p class="en">ABOUT US</p> <p class="en">ABOUT US</p>
<div class="text">深圳或然科技有限公司核心团队组建于2019年公司致力于采用业界领先的信息化技术和过硬的软件研发能力服务于教育产业利用我司技术优势将区块链云计算大数据人工智能等行业前沿技术与教育产业进行深度融合为客户提供功能先进运行高效且便于使用的产业数字化综合解决方案</div> <div class="text">深圳或然科技有限公司核心团队组建于2019年公司致力于采用业界领先的信息化技术和过硬的软件研发能力服务于教育产业利用我司技术优势将区块链云计算大数据人工智能等行业前沿技术与教育产业进行深度融合为客户提供功能先进运行高效且便于使用的产业数字化综合解决方案</div>
</div> </div>
@ -39,7 +53,7 @@
<!-- 我们的服务 --> <!-- 我们的服务 -->
<div class="service" id="part3"> <div class="service" id="part3">
<div class="inner"> <div class="inner">
<h6 class="i-title">我们的服务</h6> <h6 class="i-title wow fadeInDown">我们的服务</h6>
<p class="en">OUR SERVICES</p> <p class="en">OUR SERVICES</p>
<div class="service-pic"> <div class="service-pic">
@ -76,7 +90,7 @@
<!-- 我们的产品 --> <!-- 我们的产品 -->
<div class="product"> <div class="product">
<div class="inner"> <div class="inner">
<h6 class="i-title">我们的产品</h6> <h6 class="i-title wow fadeInDown">我们的产品</h6>
<p class="en">OUR PRODUCTS</p> <p class="en">OUR PRODUCTS</p>
<div class="pics"> <div class="pics">
<div class="pro-bg1"> <div class="pro-bg1">
@ -85,13 +99,13 @@
<img src="@/assets/img/index/pro-bg1-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s"> <img src="@/assets/img/index/pro-bg1-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s">
<el-carousel class="carousel" ref="carousel" height="338px" autoplay :interval="5000" arrow="never"> <el-carousel class="carousel" ref="carousel" height="338px" autoplay :interval="5000" arrow="never">
<el-carousel-item> <el-carousel-item>
<img src="@/assets/img/index/slide1.png" alt=""> <img class="car-img" src="@/assets/img/index/slide1.png" alt="">
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<img src="@/assets/img/index/slide2.png" alt=""> <img class="car-img" src="@/assets/img/index/slide2.png" alt="">
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<img src="@/assets/img/index/slide3.png" alt=""> <img class="car-img" src="@/assets/img/index/slide3.png" alt="">
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="arrow a-left" @click="carouselSwitch('carousel', 0)"></div> <div class="arrow a-left" @click="carouselSwitch('carousel', 0)"></div>
@ -99,8 +113,8 @@
</div> </div>
<div class="text"> <div class="text">
<div class="title-wrap"> <div class="title-wrap">
<p class="text-title">职站平台</p> <img class="t-logo" src="@/assets/img/index/occupationlab.png" alt="">
<p class="en">Occupation lab</p> <p class="text-title">Occupation Lab</p>
</div> </div>
<p class="desc wow fadeInLeft" data-wow-delay="0.7s">职站是一款辅助院校教师开展虚拟仿真实验教学的智能云实践平台平台采用了大数据云计算等技术为学校搭建信息化平台提供了基础可助力院校实现教学智能化升级职站平台设计遵循着极简高效的理念可帮助老师轻松开展实验教学并支持自定义发布考核和练习智能统计和检验学生的日常实训练习效果老师还可以通过可视化图表报告直观查看学生实训成绩评估教学成果</p> <p class="desc wow fadeInLeft" data-wow-delay="0.7s">职站是一款辅助院校教师开展虚拟仿真实验教学的智能云实践平台平台采用了大数据云计算等技术为学校搭建信息化平台提供了基础可助力院校实现教学智能化升级职站平台设计遵循着极简高效的理念可帮助老师轻松开展实验教学并支持自定义发布考核和练习智能统计和检验学生的日常实训练习效果老师还可以通过可视化图表报告直观查看学生实训成绩评估教学成果</p>
</div> </div>
@ -127,8 +141,8 @@
<div class="pics"> <div class="pics">
<div class="text"> <div class="text">
<div class="title-wrap"> <div class="title-wrap">
<p class="text-title">数据前瞻平台</p> <img class="t-logo" src="@/assets/img/index/dataforward.png" alt="">
<p class="en">Dataforward</p> <p class="text-title">数据前瞻</p>
</div> </div>
<p class="desc wow fadeInLeft" data-wow-delay="0.7s">数据前瞻财经数据库涵盖股票数据期货数据债券数据期权数据利率数据公募数据和宏观数据拥有超40年的历史数据可为用户解读预测分析模拟市场趋势经济周期和世界事件影响提供必要的数据支持平台的数据均来源于各大专业财经权威网站和数据官方发布平台并经过专业的数据分类和整理可让用户轻松便捷地搜索并批量下载到自己研究所需的数据极大地减轻自己搜索整理数据的时间提高研究效率, 从而高效的输出研究成果</p> <p class="desc wow fadeInLeft" data-wow-delay="0.7s">数据前瞻财经数据库涵盖股票数据期货数据债券数据期权数据利率数据公募数据和宏观数据拥有超40年的历史数据可为用户解读预测分析模拟市场趋势经济周期和世界事件影响提供必要的数据支持平台的数据均来源于各大专业财经权威网站和数据官方发布平台并经过专业的数据分类和整理可让用户轻松便捷地搜索并批量下载到自己研究所需的数据极大地减轻自己搜索整理数据的时间提高研究效率, 从而高效的输出研究成果</p>
</div> </div>
@ -138,13 +152,13 @@
<img src="@/assets/img/index/pro-bg1-4.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s"> <img src="@/assets/img/index/pro-bg1-4.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s">
<el-carousel class="carousel" ref="carousel1" height="338px" autoplay :interval="5000" arrow="never"> <el-carousel class="carousel" ref="carousel1" height="338px" autoplay :interval="5000" arrow="never">
<el-carousel-item> <el-carousel-item>
<img src="@/assets/img/index/slide4.png" alt=""> <img class="car-img" src="@/assets/img/index/slide4.png" alt="">
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<img src="@/assets/img/index/slide5.png" alt=""> <img class="car-img" src="@/assets/img/index/slide5.png" alt="">
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<img src="@/assets/img/index/slide6.png" alt=""> <img class="car-img" src="@/assets/img/index/slide6.png" alt="">
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="arrow a-left" @click="carouselSwitch('carousel1', 0)"></div> <div class="arrow a-left" @click="carouselSwitch('carousel1', 0)"></div>
@ -174,18 +188,18 @@
<!-- 城市合伙人联盟 --> <!-- 城市合伙人联盟 -->
<div class="parner"> <div class="parner">
<div class="inner"> <div class="inner">
<h6 class="i-title">城市合伙人联盟</h6> <h6 class="i-title wow fadeInDown">城市合伙人联盟</h6>
<p class="en">ALLIANCE MAP</p> <p class="en">ALLIANCE MAP</p>
<p class="brief">共创共享共赢</p> <p class="brief wow fadeInDown">共创共享共赢</p>
<div class="chart" id="map"></div> <div class="chart" id="map"></div>
</div> </div>
</div> </div>
<!-- 合作客户 --> <!-- 合作客户 -->
<div class="client"> <div class="client">
<div class="inner"> <div class="inner">
<h6 class="i-title">合作客户</h6> <h6 class="i-title wow fadeInDown">合作客户</h6>
<p class="en">PARTNERSHIP</p> <p class="en">PARTNERSHIP</p>
<p class="brief">助力100+所院校客户实现数字化升级</p> <p class="brief wow fadeInDown">助力100+所院校客户实现数字化升级</p>
<div class="client-pic"> <div class="client-pic">
<img class="bg" src="@/assets/img/index/index0.png" alt=""> <img class="bg" src="@/assets/img/index/index0.png" alt="">
<div class="text"> <div class="text">
@ -193,7 +207,7 @@
<img src="@/assets/img/index/comma1.png" alt=""> <img src="@/assets/img/index/comma1.png" alt="">
他们说 他们说
</div> </div>
<div class="text">这里是一段评价描述或然科技帮助我们完成了平台化的战略转型产值也在5年间翻了超十倍在各行业都</div> <div class="text">平台功能丰富操作简单自动判分功能能更高效的批改作业给学生更好的指导</div>
<div class="c-title2"> <div class="c-title2">
河海大学老师 河海大学老师
<img src="@/assets/img/index/comma2.png" alt=""> <img src="@/assets/img/index/comma2.png" alt="">
@ -202,22 +216,19 @@
</div> </div>
<ul class="client-list"> <ul class="client-list">
<li> <li>
<img src="@/assets/img/logo.png" alt=""> <img src="@/assets/img/index/school1.png" alt="">
</li>
<li>
<img src="@/assets/img/logo.png" alt="">
</li> </li>
<li> <li>
<img src="@/assets/img/logo.png" alt=""> <img src="@/assets/img/index/school2.png" alt="">
</li> </li>
<li> <li>
<img src="@/assets/img/logo.png" alt=""> <img src="@/assets/img/index/school3.png" alt="">
</li> </li>
<li> <li>
<img src="@/assets/img/logo.png" alt=""> <img src="@/assets/img/index/school4.png" alt="">
</li> </li>
<li> <li>
<img src="@/assets/img/logo.png" alt=""> <img src="@/assets/img/index/school5.png" alt="">
</li> </li>
</ul> </ul>
</div> </div>
@ -239,7 +250,7 @@
</div> </div>
<div class="text"> <div class="text">
<p class="title">售前咨询</p> <p class="title">售前咨询</p>
<p class="tel-num" style="margin-bottom: 5px"></p> <p class="tel-num" style="margin-bottom: 5px">老师</p>
<p class="tel-num">18019930142</p> <p class="tel-num">18019930142</p>
</div> </div>
</div> </div>
@ -311,10 +322,10 @@ export default {
visualMap: { visualMap: {
show: false, show: false,
}, },
// defaultCenter: [ 117.283042, 31.86119 ],
geo: { geo: {
map: 'china', map: 'china',
silent: false, silent: false,
center: [110, 36],
itemStyle: { itemStyle: {
color: '#0D336F', // color: '#0D336F', //
borderColor: '#5D7AA5',// borderColor: '#5D7AA5',//
@ -322,14 +333,23 @@ export default {
}, },
label:{ label:{
color: '#fff', // color: '#fff', //
show: false, // backgroundColor: '#f00',
formatter: function(params) { formatter: function(params) {
return params.name return params.name
}, },
rich: { rich: {
} }
}, },
zoom : 1.1, // emphasis:{
label: {
color: '#fff', //
},
itemStyle: {
color: '#1C76FD', //
backgroundColor: '#1C76FD'
}
},
zoom : 1.7, //
roam: true, // roam: true, //
}, },
series: [ series: [
@ -347,6 +367,7 @@ export default {
return params.name + " " + params.data.quantity return params.name + " " + params.data.quantity
} }
}, },
top: '30%',
type: 'scatter', type: 'scatter',
coordinateSystem: 'geo', coordinateSystem: 'geo',
symbolSize: 15, symbolSize: 15,
@ -363,15 +384,57 @@ export default {
} }
}, },
data:[ data:[
{name:"武汉", value: [114.311582,30.598467], quantity: 55.5, unit: '吨'}, {name:"武汉", value: [114.311582,30.598467], quantity: 55.5},
{name:"广州", value: [113.23333, 23.16667], quantity: 12.5, unit: '吨'}, {name:"广州", value: [113.23333, 23.16667], quantity: 12.5},
{name:"深圳", value: [114.064552,22.548457], quantity: 13.4, unit: '吨'}, {name:"深圳", value: [114.064552,22.548457], quantity: 13.4},
{name:"成都", value: [104.06667, 30.66667], quantity: 568.2, unit: '吨'}, {name:"成都", value: [104.06667, 30.66667], quantity: 568.2},
{name:"合肥", value: [117.17,31.52], quantity: 876.2, unit: '吨'}, {name:"合肥", value: [117.17,31.52], quantity: 876.2},
] ]
} }
] ]
}) })
let index = -1
setInterval(function () {
//
chart.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: index
})
//
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index + 1
})
//
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index
})
//
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index + 1
})
index++
if (index > 4) {
chart.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: 5
})
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: 5
})
index = -1
}
}, 2000)
}, },
} }
}; };
@ -385,14 +448,29 @@ export default {
.banner { .banner {
position: relative; position: relative;
height: 688px; height: 688px;
background: url(../../../assets/img/index/banner-1.png) 0 0/cover no-repeat,
url(../../../assets/img/index/banner-3.png) 0 0/auto no-repeat,
url(../../../assets/img/index/banner-2.png) top right/auto no-repeat;
background-color: #0F5BED; background-color: #0F5BED;
.bg {
width: 100%;
height: 100%;
}
.banner-bg1 {
background: url(../../../assets/img/index/banner1-1.png) 0 0/cover no-repeat,
url(../../../assets/img/index/banner1-3.png) 0 0/auto no-repeat,
url(../../../assets/img/index/banner1-2.png) top right/auto no-repeat;
}
.banner-bg2 {
background: url(../../../assets/img/index/banner2-1.png) (56px bottom)/auto no-repeat,
url(../../../assets/img/index/banner2-2.png) (95% 174px)/auto no-repeat;
}
.banner-bg3 {
background: url(../../../assets/img/index/banner3-2.png) (right 176px)/auto no-repeat,
url(../../../assets/img/index/banner3-1.png) (left 92px)/auto no-repeat,
url(../../../assets/img/index/banner3-3.png) (top right)/auto no-repeat;
}
.text { .text {
position: absolute; position: absolute;
top: 255px; top: 255px;
left: 203px; left: 350px;
} }
} }
.i-title{ .i-title{
@ -416,12 +494,12 @@ export default {
.inner{ .inner{
position: relative; position: relative;
width: 1200px; width: 1200px;
padding: 67px 0; padding: 87px 0 67px;
margin: 0 auto; margin: 0 auto;
} }
.en { .en {
position: absolute; position: absolute;
top: 40px; top: 60px;
left: 50%; left: 50%;
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -437,7 +515,7 @@ export default {
color: #5A6B7E; color: #5A6B7E;
} }
.about { .about {
padding: 100px 0 120px; padding: 130px 0 150px;
background: url(../../../assets/img/index/about1.png) 0 0/100% 100% no-repeat; background: url(../../../assets/img/index/about1.png) 0 0/100% 100% no-repeat;
.en { .en {
top: 27px; top: 27px;
@ -485,7 +563,7 @@ export default {
} }
} }
img{ img{
width: 64px; width: 70px;
transition: .6s; transition: .6s;
} }
h6{ h6{
@ -581,18 +659,16 @@ export default {
} }
.title-wrap { .title-wrap {
position: relative; position: relative;
display: flex;
align-items: flex-end;
margin-bottom: 30px;
.text-title { .text-title {
z-index: 2; padding-left: 12px;
position: relative; margin-left: 12px;
margin-bottom: 36px;
font-size: 26px; font-size: 26px;
line-height: 1;
color: #0B1D30; color: #0B1D30;
} border-left: 1px solid #DEE4F1;
.en {
top: 14px;
text-align: left;
font-size: 30px;
color: #C6D5E1;
} }
} }
.product { .product {
@ -623,7 +699,7 @@ export default {
} }
} }
img{ img{
width: 90px; width: 70px;
transition: .6s; transition: .6s;
} }
h6{ h6{
@ -642,6 +718,10 @@ export default {
.carousel { .carousel {
width: 500px; width: 500px;
margin-left: 50px; margin-left: 50px;
.car-img {
width: 100%;
height: 100%;
}
} }
.arrow { .arrow {
position: absolute; position: absolute;
@ -736,7 +816,10 @@ export default {
} }
} }
.chart { .chart {
height: 500px; height: 600px;
}
.client {
background: url(../../../assets/img/index/client.png) 0 0/cover no-repeat;
} }
.client-pic { .client-pic {
display: flex; display: flex;
@ -761,8 +844,8 @@ export default {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
font-size: 20px; font-size: 18px;
color: #0B1D30; color: #535C6E;
img { img {
margin-left: 19px; margin-left: 19px;
} }
@ -800,7 +883,7 @@ export default {
width: 60px; width: 60px;
} }
.text{ .text{
width: 340px; width: 450px;
} }
h6{ h6{
margin: 30px 0 10px; margin: 30px 0 10px;

@ -26,7 +26,7 @@ const Setting = {
* 基础配置 * 基础配置
* */ * */
platformId: 1, // 平台标识,1职站,2数据平台,3中台 platformId: 1, // 平台标识,1职站,2数据平台,3中台
titleSuffix: '或然官网', // 网页标题的后缀 titleSuffix: '深圳或然科技有限公司', // 网页标题的后缀
routerMode: "hash", // 路由模式,可选值为 history 或 hash routerMode: "hash", // 路由模式,可选值为 history 或 hash
showProgressBar: true, // 页面切换时,是否显示模拟的进度条 showProgressBar: true, // 页面切换时,是否显示模拟的进度条
apiBaseURL: host, // 接口请求地址 apiBaseURL: host, // 接口请求地址

@ -5,6 +5,10 @@
font-family: youshe; font-family: youshe;
src: url('font/YouSheBiaoTiHei.ttf'); src: url('font/YouSheBiaoTiHei.ttf');
} }
@font-face {
font-family: dinBold;
src: url('font/DIN-Condensed-Bold.ttf');
}
@font-face { @font-face {
font-family: din; font-family: din;
src: url('font/din.otf'); src: url('font/din.otf');

Loading…
Cancel
Save