|
|
@@ -1,13 +1,666 @@
|
|
|
<template>
|
|
|
- <div>这是首页111</div>
|
|
|
+ <div class="home">
|
|
|
+ <!-- 导航栏 -->
|
|
|
+ <div class="content">
|
|
|
+ <div class="content-left">
|
|
|
+ <div class="left" @click="prev">
|
|
|
+ <div class="left-mini"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-center">
|
|
|
+ <ul class="carousel" :style="{width: width + 'px', left: leftNum + 'px'}">
|
|
|
+ <template v-for="(item, i) in list">
|
|
|
+ <li class="carousel-li" :key="item.id" @mouseover="onChange(i)" @mouseout="initData">
|
|
|
+ <div class="box">
|
|
|
+ <div class="box-line box-top-right"></div>
|
|
|
+ <div class="box-line box-bottom-right"></div>
|
|
|
+ <div class="box-line box-bottom-left"></div>
|
|
|
+ <div class="box-line box-top-left"></div>
|
|
|
+ <span>{{item.title}}</span>
|
|
|
+ <div v-show="i === selectId" class="box-fixed"></div>
|
|
|
+ </div>
|
|
|
+ <div class="line">
|
|
|
+ <div class="line-content">
|
|
|
+ <div class="line-1 line-2"></div>
|
|
|
+ <div :class="['line-1', line > 0 ? 'line-2' : '']"></div>
|
|
|
+ <div :class="['line-1', line > 1 ? 'line-2' : '']"></div>
|
|
|
+ <div :class="['line-1', line > 2 ? 'line-2' : '']"></div>
|
|
|
+ <div :class="['line-1', line > 3 ? 'line-2' : '']"></div>
|
|
|
+ <div :class="['line-1', line > 4 ? 'line-2' : '']"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </template>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="content-right">
|
|
|
+ <div class="right" @click="next">
|
|
|
+ <div class="right-mini"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case" v-show="selectId === 0">
|
|
|
+ <div class="case-box case-left">
|
|
|
+ <div class="case-title">人员管控</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-one">
|
|
|
+ <span style=" padding-left: 20px;padding-right: 50px">正常</span>
|
|
|
+ <span><strong class="sign">79</strong>人次</span>
|
|
|
+ </div>
|
|
|
+ <div class="case-one">
|
|
|
+ <span style=" padding-left: 20px; padding-right: 50px">异常</span>
|
|
|
+ <span><strong class="sign">79</strong>人次</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-center">
|
|
|
+ <div class="case-title">车辆管控</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-one">
|
|
|
+ <span style="padding-left: 20px; padding-right: 50px">洗消次数</span>
|
|
|
+ <span><strong class="sign">19</strong>次</span>
|
|
|
+ </div>
|
|
|
+ <div class="case-one">
|
|
|
+ <span style="padding-left: 20px; padding-right: 50px">平均时常</span>
|
|
|
+ <span><strong class="sign">34</strong>分钟</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-center">
|
|
|
+ <div class="case-title">熏蒸监管</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-one">
|
|
|
+ <span style="padding-left: 20px; padding-right: 50px">熏蒸次数</span>
|
|
|
+ <span><strong class="sign">4</strong>次</span>
|
|
|
+ </div>
|
|
|
+ <div class="case-one">
|
|
|
+ <span style="padding-left: 20px; padding-right: 50px">平均时常</span>
|
|
|
+ <span><strong class="sign">3.4</strong>小时</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-box case-right">
|
|
|
+ <div class="case-title">死猪监管</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-one">
|
|
|
+ <span style="padding-right: 50px">抓取次数</span>
|
|
|
+ <span><strong class="sign">79</strong>人次</span>
|
|
|
+ </div>
|
|
|
+ <div class="case-one">
|
|
|
+ <span style=" padding-right: 50px">最近抓取</span>
|
|
|
+ <span><strong class="sign">07/01</strong></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case" v-show="selectId === 1">
|
|
|
+ <div class="case-box case-left">
|
|
|
+ <div class="case-title">猪舍温度</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-one">
|
|
|
+ <span style=" padding-left: 20px;padding-right: 50px">最高</span>
|
|
|
+ <span><strong class="sign">34.2</strong>℃</span>
|
|
|
+ </div>
|
|
|
+ <div class="case-one">
|
|
|
+ <span style=" padding-left: 20px; padding-right: 50px">最低</span>
|
|
|
+ <span><strong class="sign">24.1</strong>℃</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-center">
|
|
|
+ <div class="case-title">猪舍湿度</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-one">
|
|
|
+ <span style="padding-left: 40px; padding-right: 50px">最高</span>
|
|
|
+ <span><strong class="sign">95</strong>RH</span>
|
|
|
+ </div>
|
|
|
+ <div class="case-one">
|
|
|
+ <span style="padding-left: 40px; padding-right: 50px">最低</span>
|
|
|
+ <span><strong class="sign">55</strong>RH</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-center">
|
|
|
+ <div class="case-title">猪场耗电量</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-one">
|
|
|
+ <span style="padding-left: 20px; padding-right: 50px">今日累计</span>
|
|
|
+ <span><strong class="sign">325</strong>kw/h</span>
|
|
|
+ </div>
|
|
|
+ <div class="case-one">
|
|
|
+ <span style="padding-left: 20px; padding-right: 50px">本月累计</span>
|
|
|
+ <span><strong class="sign">9325</strong>kw/h</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-box case-right">
|
|
|
+ <div class="case-title">猪舍用水量</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-one">
|
|
|
+ <span style="padding-right: 50px">今日累计</span>
|
|
|
+ <span><strong class="sign">7</strong>吨</span>
|
|
|
+ </div>
|
|
|
+ <div class="case-one">
|
|
|
+ <span style=" padding-right: 50px">本月累计</span>
|
|
|
+ <span><strong class="sign">154</strong>吨</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case" v-show="selectId === 2">
|
|
|
+ <div class="case-box case-left">
|
|
|
+ <div class="case-title">总存栏</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-two">
|
|
|
+ <span><strong class="sign">15427</strong>头</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-center">
|
|
|
+ <div class="case-title">下月预计可出栏</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-two">
|
|
|
+ <span><strong class="sign">2354</strong>头</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-center">
|
|
|
+ <div class="case-title">本月累计销售额度</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-two">
|
|
|
+ <span><strong class="sign">21354.2</strong>元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-box case-right">
|
|
|
+ <div class="case-title">今日任务</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-two">
|
|
|
+ <span><strong class="sign">7</strong>个</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case" v-show="selectId === 3">
|
|
|
+ <div class="case-box case-left">
|
|
|
+ <div class="case-title">COD</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-two">
|
|
|
+ <span><strong class="sign">7.54</strong>mg/L</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-center">
|
|
|
+ <div class="case-title">累计流量</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-two">
|
|
|
+ <span><strong class="sign">123.57</strong>T</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-center">
|
|
|
+ <div class="case-title">总磷</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-two">
|
|
|
+ <span><strong class="sign">0.323</strong>mg/L</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-box case-right">
|
|
|
+ <div class="case-title">氨氮</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-two">
|
|
|
+ <span><strong class="sign">0.619</strong>mg/L</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case" v-show="selectId === 4">
|
|
|
+ <div class="case-box case-left">
|
|
|
+ <div class="case-title">今日报警</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-two">
|
|
|
+ <span><strong class="sign">9</strong>次</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-center">
|
|
|
+ <div class="case-title">平均相应时间</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-two">
|
|
|
+ <span><strong class="sign">34</strong>分钟</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-center">
|
|
|
+ <div class="case-title">今日时间提醒</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-two">
|
|
|
+ <span><strong class="sign">27</strong>次</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="case-box case-right">
|
|
|
+ <div class="case-title">未处理事件</div>
|
|
|
+ <div class="case-content">
|
|
|
+ <div class="case-two">
|
|
|
+ <span><strong class="sign">7</strong>件</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home-footer">
|
|
|
+ <div class="home-footer-blue"></div>
|
|
|
+ <div class="home-footer-map"></div>
|
|
|
+ <div class="home-footer-scatter"></div>
|
|
|
+ <div :class="['home-footer-flash', isFlash ? 'flash1': '']"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
-name: "Home"
|
|
|
+ name: "Home",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ width: '',
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: '生物安全',
|
|
|
+ url: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: '生态监测',
|
|
|
+ url: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: '生产经营',
|
|
|
+ url: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ title: '环境监测',
|
|
|
+ url: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ title: '报警信息',
|
|
|
+ url: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ title: '视频监控',
|
|
|
+ url: '',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ num: 0,
|
|
|
+ leftNum: 0,
|
|
|
+ line: 0,
|
|
|
+ // 进度条定时器
|
|
|
+ timer: null,
|
|
|
+ // 下面数据定时器
|
|
|
+ timer2: null,
|
|
|
+ selectId: 0,
|
|
|
+ // 闪光
|
|
|
+ isFlash: true,
|
|
|
+ timer3: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ prev() {
|
|
|
+ if(this.num > 0) {
|
|
|
+ this.num--;
|
|
|
+ this.leftNum += 310;
|
|
|
+ } else {
|
|
|
+ this.num = 0;
|
|
|
+ this.leftNum = 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ next() {
|
|
|
+ if(this.num >= this.list.length - 5) {
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.num++;
|
|
|
+ this.leftNum -= 310;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initLine() {
|
|
|
+ let that = this;
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ if(that.line >= 5) {
|
|
|
+ that.line = 0;
|
|
|
+ } else {
|
|
|
+ that.line++;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ onChange(i) {
|
|
|
+ clearInterval(this.timer2);
|
|
|
+ if(i > 4) {
|
|
|
+ this.selectId = 4;
|
|
|
+ } else {
|
|
|
+ this.selectId = i;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initData() {
|
|
|
+ let that = this;
|
|
|
+ this.timer2 = setInterval(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ if(that.selectId >= 4) {
|
|
|
+ that.selectId = 0;
|
|
|
+ } else {
|
|
|
+ that.selectId++;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 3000)
|
|
|
+ },
|
|
|
+ initFalsh() {
|
|
|
+ let that = this;
|
|
|
+ this.timer3 = setInterval(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ that.isFlash = !that.isFlash
|
|
|
+ })
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.width = this.list.length * (220 + 180) - 90;
|
|
|
+ this.initLine()
|
|
|
+ this.initData();
|
|
|
+ this.initFalsh();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ clearInterval(this.timer2);
|
|
|
+ clearInterval(this.timer3);
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-
|
|
|
+ .home {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 40px 0 0 0;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ width: 38px;
|
|
|
+ height: 42px;
|
|
|
+ background: url('../../assets/Home/u446.svg') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .left-mini {
|
|
|
+ width: 18px;
|
|
|
+ height: 20px;
|
|
|
+ background: url('../../assets/Home/u447.svg') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 11px;
|
|
|
+ left: 6px;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .content-center {
|
|
|
+ width: 1500px;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: 38px;
|
|
|
+ height: 42px;
|
|
|
+ background: url('../../assets/Home/u446.svg') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .right-mini {
|
|
|
+ width: 18px;
|
|
|
+ height: 20px;
|
|
|
+ background: url('../../assets/Home/u447.svg') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 11px;
|
|
|
+ left: 6px;
|
|
|
+ }
|
|
|
+ .carousel {
|
|
|
+ padding: 0 10px;
|
|
|
+ margin: 0;
|
|
|
+ list-style: none;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ transition: left ease-in .5s;
|
|
|
+ }
|
|
|
+ .carousel-li {
|
|
|
+ width: 220px;
|
|
|
+ height: 150px;
|
|
|
+ margin-right: 90px;
|
|
|
+ float: left;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .carousel-li:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .box {
|
|
|
+ width: 210px;
|
|
|
+ height: 120px;
|
|
|
+ background: url("../../assets/Home/u66.svg") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ line-height: 120px;
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 600;
|
|
|
+ color: white;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .box-fixed {
|
|
|
+ width: 205px;
|
|
|
+ height: 114px;
|
|
|
+ position: absolute;
|
|
|
+ top: 3px;
|
|
|
+ left: 3px;
|
|
|
+ background: #58a;
|
|
|
+ background: linear-gradient(-32deg,transparent 12px,#58a 0) bottom right,
|
|
|
+ linear-gradient(32deg,transparent 12px,#58a 0) bottom left,
|
|
|
+ linear-gradient(150deg,transparent 12px,#58a 0) top left,
|
|
|
+ linear-gradient(-150deg,transparent 12px,#58a 0) top right;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ opacity: .5;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ width: 150px;
|
|
|
+ height: 17px;
|
|
|
+ margin: 10px auto;
|
|
|
+ border: 2px solid #218FA0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 2px;
|
|
|
+ }
|
|
|
+ .line-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ .line-1 {
|
|
|
+ width: 19px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #20909E;
|
|
|
+ }
|
|
|
+ .line-2 {
|
|
|
+ background-color: #47E7FD;
|
|
|
+ }
|
|
|
+ .box-line {
|
|
|
+ width: 16px;
|
|
|
+ height: 27px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .box-top-right {
|
|
|
+ background: url("../../assets/Home/u64.svg") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ top: 0;
|
|
|
+ right: -15px;
|
|
|
+ }
|
|
|
+ .box-bottom-right {
|
|
|
+ background: url("../../assets/Home/u65.svg") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ bottom: 0;
|
|
|
+ right: -15px;
|
|
|
+ }
|
|
|
+ .box-bottom-left {
|
|
|
+ background: url("../../assets/Home/u63.svg") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ bottom: 0;
|
|
|
+ left: -15px;
|
|
|
+ }
|
|
|
+ .box-top-left {
|
|
|
+ background: url("../../assets/Home/u62.svg") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ top: 0;
|
|
|
+ left: -15px;
|
|
|
+ }
|
|
|
+ .case {
|
|
|
+ width: 1200px;
|
|
|
+ height: 360px;
|
|
|
+ margin: 40px auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ /*transition: ;*/
|
|
|
+ animation: anim 1s;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ @keyframes anim {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .case-box {
|
|
|
+ width: 240px;
|
|
|
+ height: 320px;
|
|
|
+ background-color: #0B5B6C;
|
|
|
+ position: relative;
|
|
|
+ top: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .case-center {
|
|
|
+ width: 300px;
|
|
|
+ height: 320px;
|
|
|
+ background-color: #0B5B6C;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .case-left {
|
|
|
+ transform: skew(0, -8deg);
|
|
|
+ }
|
|
|
+ .case-right {
|
|
|
+ transform: skew(0, 8deg);
|
|
|
+ }
|
|
|
+ .case-title {
|
|
|
+ background-color: #0D3952;
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #5DEBED;
|
|
|
+ }
|
|
|
+ .case-content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ margin-top: 20px;
|
|
|
+ /*text-align: center;*/
|
|
|
+ }
|
|
|
+ .case-one {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 80px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #5DEBED;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .sign {
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ .case-two {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 160px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #5DEBED;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .home-footer {
|
|
|
+ width: 761px;
|
|
|
+ height: 190px;
|
|
|
+ background: url("../../assets/Home/u458.svg") no-repeat;
|
|
|
+ margin: auto;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .home-footer-map {
|
|
|
+ width: 658px;
|
|
|
+ height: 121px;
|
|
|
+ background: url("../../assets/Home/u460.svg") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 25px;
|
|
|
+ left: 60px;
|
|
|
+ }
|
|
|
+ .home-footer-blue {
|
|
|
+ width: 706px;
|
|
|
+ height: 149px;
|
|
|
+ background: url("../../assets/Home/u459.svg") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 13px;
|
|
|
+ left: 35px;
|
|
|
+ }
|
|
|
+ .home-footer-scatter {
|
|
|
+ width: 894px;
|
|
|
+ height: 468px;
|
|
|
+ background: url("../../assets/Home/u461.svg") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 52%;
|
|
|
+ top: -40%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ opacity: .1;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ .home-footer-flash {
|
|
|
+ width: 640px;
|
|
|
+ height: 500px;
|
|
|
+ position: absolute;
|
|
|
+ top: -80%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background: linear-gradient(to bottom, rgba(4, 5, 26, .1), rgba(4, 5, 26, .3));
|
|
|
+ }
|
|
|
+ .flash1 {
|
|
|
+ background: linear-gradient(to bottom, rgba(102, 255, 255, .1), rgba(102, 255, 255, .3));
|
|
|
+ /*background-color: rgba(102, 255, 255, .2);*/
|
|
|
+ }
|
|
|
</style>
|
