|
|
@@ -0,0 +1,932 @@
|
|
|
+<template>
|
|
|
+ <!-- <div > -->
|
|
|
+ <div class="visualization">
|
|
|
+ <div style="height: 50px;"></div>
|
|
|
+ <el-row>
|
|
|
+ <!-- 左侧 -->
|
|
|
+ <el-col :span="4">
|
|
|
+ <div style="color: #0d1528;">
|
|
|
+ 12
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <!-- 中间 -->
|
|
|
+ <el-col :span="14">
|
|
|
+ <div class="center-top1">
|
|
|
+ </div>
|
|
|
+ <div class="center-top">
|
|
|
+ <div class="line2">R-510</div>
|
|
|
+ <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow2">
|
|
|
+ <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow23">
|
|
|
+ <div class="line23"></div>
|
|
|
+ <div class="line24"></div>
|
|
|
+
|
|
|
+ <div class="line41"></div>
|
|
|
+ <div class="line42">
|
|
|
+ </div>
|
|
|
+ <div class="line43"></div>
|
|
|
+ <div class="line44">
|
|
|
+ </div>
|
|
|
+ <div class="line45">C4产品</div>
|
|
|
+ <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow42">
|
|
|
+ <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow43">
|
|
|
+
|
|
|
+ <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow52">
|
|
|
+ <div class="line51"></div>
|
|
|
+ <div class="line6"></div>
|
|
|
+ <div class="line61"></div>
|
|
|
+ <div class="line62"></div>
|
|
|
+ <div class="line63"></div>
|
|
|
+ <div class="line64"></div>
|
|
|
+ <div class="line66"></div>
|
|
|
+ <div class="line67"></div>
|
|
|
+ <div class="line68"></div>
|
|
|
+ <div class="line69"></div>
|
|
|
+ <div class="line70"></div>
|
|
|
+ <div class="line71">RPG产品</div>
|
|
|
+
|
|
|
+ <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow6">
|
|
|
+ <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow61">
|
|
|
+ <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow63">
|
|
|
+ <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow67">
|
|
|
+
|
|
|
+ <div class="entity">
|
|
|
+ <!-- <img src="../../../assets/images/pot.png" alt=""> -->
|
|
|
+ </div>
|
|
|
+ <div class="entity1">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="entity2">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="entity3">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="entity4">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <!-- 右侧 -->
|
|
|
+ <el-col :span="5">
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog title="详情" center :visible.sync="dialogVisible" :append-to-body="true" width="40%">
|
|
|
+ <div>
|
|
|
+ 测试
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button
|
|
|
+ type="primary" size="mini" @click="dialogVisible = false">确 认</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 最底边栏控件 -->
|
|
|
+ <!-- <div class="copyright">技术支持：某某股份有限公司</div> -->
|
|
|
+ </div>
|
|
|
+ <!-- </div> -->
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ components: {},
|
|
|
+ //在vue自定义指令中添加该指令
|
|
|
+ directives: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ function fixStyles() {
|
|
|
+ // 渲染完毕后，修改菜单的高度占满屏幕高度
|
|
|
+ let bodyHeight = document.documentElement.clientHeight; // 去除topbar的高度
|
|
|
+ document.querySelector(".visualization").style.height = bodyHeight + "px";
|
|
|
+ }
|
|
|
+ fixStyles();
|
|
|
+ var _scaleBody = true;
|
|
|
+ var _innerWidth = _scaleBody ? 1920 : window.innerWidth;
|
|
|
+ var _innerHeight = _scaleBody ? 1080 : window.innerHeight;
|
|
|
+ // 页面动态缩放适应屏幕尺寸
|
|
|
+ window.onresize = function() {
|
|
|
+ fixStyles();
|
|
|
+ let BodyStyle = document.querySelector(".visualization").style;
|
|
|
+ BodyStyle["margin"] = "0px";
|
|
|
+ BodyStyle["width"] = _innerWidth + "px";
|
|
|
+ BodyStyle["height"] = _innerHeight + "px";
|
|
|
+ BodyStyle["transform-origin"] = "left top 0px";
|
|
|
+ BodyStyle["transform"] =
|
|
|
+ "translateZ(0) scale(" +
|
|
|
+ window.innerWidth / _innerWidth +
|
|
|
+ "," +
|
|
|
+ window.innerHeight / _innerHeight +
|
|
|
+ ")";
|
|
|
+ BodyStyle["overflow"] = "hidden";
|
|
|
+ document.getElementsByTagName("body")[0].style["overflow"] = "hidden";
|
|
|
+ };
|
|
|
+ window.onresize();
|
|
|
+ },
|
|
|
+ beforeDestroy() {},
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+/* 全局样式 */
|
|
|
+
|
|
|
+.anchorBL {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.mymap>div {
|
|
|
+ background-color: #081734 !important;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes myrotate {
|
|
|
+ 0% {
|
|
|
+ transform: rotateZ(0deg);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: rotateZ(360deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotateZ(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes myrotateCenter {
|
|
|
+ 0% {
|
|
|
+ transform: rotateZ(0deg);
|
|
|
+ }
|
|
|
+ 80% {
|
|
|
+ transform: rotateZ(360deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotateZ(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss" rel="stylesheet/scss" scoped>
|
|
|
+.fa-container {
|
|
|
+ // width: 100%;
|
|
|
+ // height: calc(100vh - 135px);
|
|
|
+ // overflow: hidden;
|
|
|
+ background-color: #101129;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.visualization {
|
|
|
+ height: calc(100vh - 84px); // background-color: #101129;
|
|
|
+ background-color: #0d1528;
|
|
|
+ margin: 0;
|
|
|
+ width: 1920px;
|
|
|
+ height: 1080px; // transform-origin: left top 0px;
|
|
|
+ box-sizing: border-box; // overflow: hidden;
|
|
|
+ // background: url(../../../assets/images/bg.png) 0% 0% / 100% 100% repeat scroll rgb(0, 0, 0);
|
|
|
+ // background: linear-gradient(
|
|
|
+ // 180deg,
|
|
|
+ // rgba(7, 28, 55, 1) 0%,
|
|
|
+ // rgba(7, 28, 55, 1) 0%,
|
|
|
+ // rgba(7, 28, 55, 1) 65%,
|
|
|
+ // rgba(0, 0, 0, 1) 100%,
|
|
|
+ // rgba(0, 0, 0, 1) 100%
|
|
|
+ // );
|
|
|
+ perspective: 1200px;
|
|
|
+ .htmleaf-header {
|
|
|
+ // position: absolute;
|
|
|
+ // top: 0.4%;
|
|
|
+ // left: 49%;
|
|
|
+ // -webkit-transform: translateX(-50%);
|
|
|
+ // transform: translateX(-50%);
|
|
|
+ width: 100%;
|
|
|
+ height: 90px;
|
|
|
+ line-height: 60px; // background-image: url(../../../assets/screen/title.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ #main-title {
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 70px;
|
|
|
+ width: 700px;
|
|
|
+ line-height: 70px;
|
|
|
+ text-align: center;
|
|
|
+ font-family: Arial, Microsoft YaHei, \\9ed1\4f53, \\5b8b\4f53;
|
|
|
+ font-weight: 300; // color: #e3d772;
|
|
|
+ color: #1eaed2;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ font-size: 2.4em;
|
|
|
+ font-weight: bolder;
|
|
|
+ span {
|
|
|
+ width: auto;
|
|
|
+ height: 70px;
|
|
|
+ line-height: 77px;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .scale-out {
|
|
|
+ -webkit-animation: 0.5s ease-out;
|
|
|
+ animation: 0.5s ease-out;
|
|
|
+ -webkit-animation-fill-mode: forwards;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ }
|
|
|
+ .float-right {
|
|
|
+ float: right;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin: 12px 0 6px 0;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ svg {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-filters {
|
|
|
+ position: absolute;
|
|
|
+ top: 7.5%;
|
|
|
+ width: 15%;
|
|
|
+ height: 3%;
|
|
|
+ left: 9%;
|
|
|
+ z-index: 501;
|
|
|
+ .select-wrap {
|
|
|
+ color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .navigation {
|
|
|
+ position: absolute;
|
|
|
+ top: 4.8%;
|
|
|
+ width: 20%;
|
|
|
+ height: 4%;
|
|
|
+ right: 1.14%;
|
|
|
+ z-index: 503;
|
|
|
+ .container {
|
|
|
+ width: 100%;
|
|
|
+ height: 45px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .time {
|
|
|
+ position: relative;
|
|
|
+ float: right;
|
|
|
+ margin-right: 34px;
|
|
|
+ height: 100%;
|
|
|
+ width: 75%;
|
|
|
+ #currentTime {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ font-family: Microsoft Yahei;
|
|
|
+ font-size: 1em;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ color: #b2e1ea;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-shadow: 0 0 5px rgba(20, 135, 243, 0.8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top-title {
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: left;
|
|
|
+ color: #06cfe8; // height: 30px;
|
|
|
+ // line-height: 30px;
|
|
|
+ padding-left: 20px;
|
|
|
+ position: relative;
|
|
|
+ .top-icon {
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 0px;
|
|
|
+ img {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .inner {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: absolute;
|
|
|
+ top: -2.125rem;
|
|
|
+ right: -1.583rem;
|
|
|
+ bottom: -0.875rem;
|
|
|
+ left: -5.5rem; // border: 1px solid red;
|
|
|
+ padding: 0.5rem 0 1rem;
|
|
|
+ }
|
|
|
+ .person-status {
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: #101b46; // background-image: url(../../../assets/screen/rect.png);
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ margin: 10px 15px;
|
|
|
+ }
|
|
|
+ .circle-container {
|
|
|
+ // background-image: url(../../../assets/screen/circle1.png);
|
|
|
+ background-size: cover;
|
|
|
+ width: 90px;
|
|
|
+ height: 90px;
|
|
|
+ margin: 10px;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .plan-tips {
|
|
|
+ text-align: left;
|
|
|
+ padding-top: 26px;
|
|
|
+ color: #8294a5;
|
|
|
+ }
|
|
|
+ .plan-num {
|
|
|
+ text-align: left;
|
|
|
+ background: linear-gradient(0deg, #5183f5, #5183f5, #61ddb1, #61ddb1);
|
|
|
+ font-style: normal;
|
|
|
+ background-size: cover;
|
|
|
+ font-family: electronicFont;
|
|
|
+ font-size: 36px;
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ }
|
|
|
+ .circle1 {
|
|
|
+ margin-top: 15px;
|
|
|
+ height: 55px;
|
|
|
+ width: 55px;
|
|
|
+ animation: animation-rotate 4s linear infinite;
|
|
|
+ }
|
|
|
+ .circle2 {
|
|
|
+ height: 100px;
|
|
|
+ animation: animation-rotate 4s linear infinite;
|
|
|
+ }
|
|
|
+ .left-top {
|
|
|
+ height: 258px; // background-image: url(../../../assets/screen/border.png);
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
|
|
|
+ border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
|
|
|
+ margin: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 0 8px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .left-center {
|
|
|
+ height: 258px;
|
|
|
+ border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
|
|
|
+ border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
|
|
|
+ margin: 20px;
|
|
|
+ padding: 0 8px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .left-bottom {
|
|
|
+ height: 258px;
|
|
|
+ border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
|
|
|
+ border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
|
|
|
+ margin: 20px;
|
|
|
+ padding: 0 8px;
|
|
|
+ position: relative;
|
|
|
+ .goods-container {
|
|
|
+ height: 130px; // background-image: url(../../../assets/screen/bg02.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 10px 10px; // padding: 15px;
|
|
|
+ // border: 2px solid red;
|
|
|
+ // border-image: url(../../../assets/screen/bg02.png) 30 30 30 30;
|
|
|
+ // border-width: 50px 50px 50px 50px;
|
|
|
+ }
|
|
|
+ .goods-tips {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #06cfe8;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 30px;
|
|
|
+ }
|
|
|
+ .goods-num {
|
|
|
+ font-size: 36px;
|
|
|
+ font-family: electronicFont;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-top {
|
|
|
+ height: 258px;
|
|
|
+ border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
|
|
|
+ border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
|
|
|
+ margin: 20px;
|
|
|
+ padding: 0 8px;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .right-center {
|
|
|
+ height: 258px;
|
|
|
+ border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
|
|
|
+ border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
|
|
|
+ margin: 20px;
|
|
|
+ padding: 0 8px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .center-top1 {
|
|
|
+ height: 100px;
|
|
|
+ position: relative; // background-color: #080a20;
|
|
|
+ }
|
|
|
+ .center-top2 {
|
|
|
+ height: 100px;
|
|
|
+ position: relative; // background-color: #080a20;
|
|
|
+ }
|
|
|
+ .center-top {
|
|
|
+ height: 860px;
|
|
|
+ position: relative; // background-color: #080a20;
|
|
|
+ .entity {
|
|
|
+ // border: 1px greenyellow solid;
|
|
|
+ height: 300px;
|
|
|
+ width: 55px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 353px;
|
|
|
+ background-image: url(../../../assets/images/WechatIMG36.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ img {
|
|
|
+ width: 60px;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: -6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .entity1 {
|
|
|
+ // border: 1px greenyellow solid;
|
|
|
+ height: 40px;
|
|
|
+ width: 120px;
|
|
|
+ position: absolute;
|
|
|
+ top: -49px;
|
|
|
+ left: 553px;
|
|
|
+ background-image: url(../../../assets/images/WechatIMG34.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .entity2 {
|
|
|
+ // border: 1px greenyellow solid;
|
|
|
+ height: 50px;
|
|
|
+ width: 100px;
|
|
|
+ position: absolute;
|
|
|
+ top: 46px;
|
|
|
+ left: 562px;
|
|
|
+ background-image: url(../../../assets/images/WechatIMG33.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .entity3 {
|
|
|
+ // border: 1px greenyellow solid;
|
|
|
+ height: 300px;
|
|
|
+ width: 55px;
|
|
|
+ position: absolute;
|
|
|
+ top: 400px;
|
|
|
+ left: 553px;
|
|
|
+ background-image: url(../../../assets/images/WechatIMG36.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .entity4 {
|
|
|
+ // border: 1px greenyellow solid;
|
|
|
+ height: 300px;
|
|
|
+ width: 55px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ left: 751px;
|
|
|
+ background-image: url(../../../assets/images/WechatIMG36.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .block3 {
|
|
|
+ position: absolute;
|
|
|
+ top: 140px;
|
|
|
+ left: 650px;
|
|
|
+ width: 110px;
|
|
|
+ height: 500px; // border: 1px #ccc dotted;
|
|
|
+ border-radius: 3px; // background-image: url(../../../assets/images/furnace.png);
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ .block3-capsule {
|
|
|
+ display: inline-block;
|
|
|
+ width: 80px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #61ddb1;
|
|
|
+ margin: 10px 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 90px;
|
|
|
+ left: -100px;
|
|
|
+ width: 442px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ text-align: left;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .lx1 {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ top: 78px;
|
|
|
+ left: 19px;
|
|
|
+ }
|
|
|
+ .arrow1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 80px;
|
|
|
+ left: 337px;
|
|
|
+ }
|
|
|
+ .line2 {
|
|
|
+ position: absolute;
|
|
|
+ top: 130px;
|
|
|
+ left: 166px;
|
|
|
+ width: 182px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ text-align: left;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .lx2 {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ top: 118px;
|
|
|
+ left: 19px;
|
|
|
+ }
|
|
|
+ .arrow2 {
|
|
|
+ position: absolute;
|
|
|
+ top: 120px;
|
|
|
+ left: 337px;
|
|
|
+ }
|
|
|
+ .arrow21 {
|
|
|
+ position: absolute;
|
|
|
+ top: 215px;
|
|
|
+ left: 433px;
|
|
|
+ }
|
|
|
+ .arrow22 {
|
|
|
+ position: absolute;
|
|
|
+ top: 369px;
|
|
|
+ left: 440px;
|
|
|
+ }
|
|
|
+ .arrow23 {
|
|
|
+ position: absolute;
|
|
|
+ top: -45px;
|
|
|
+ left: 538px;
|
|
|
+ }
|
|
|
+ .line23 {
|
|
|
+ position: absolute;
|
|
|
+ top: -36px;
|
|
|
+ left: 379px;
|
|
|
+ width: 1px;
|
|
|
+ height: 36px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line24 {
|
|
|
+ position: absolute;
|
|
|
+ top: -36px;
|
|
|
+ left: 379px;
|
|
|
+ width: 167px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line41 {
|
|
|
+ position: absolute;
|
|
|
+ top: 63px;
|
|
|
+ left: 778px;
|
|
|
+ width: 1px;
|
|
|
+ height: 37px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line42 {
|
|
|
+ position: absolute;
|
|
|
+ top: 63px;
|
|
|
+ left: 403px;
|
|
|
+ width: 220px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ text-align: right;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .line43 {
|
|
|
+ position: absolute;
|
|
|
+ top: 171px;
|
|
|
+ left: 778px;
|
|
|
+ width: 1px;
|
|
|
+ height: 37px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line44 {
|
|
|
+ position: absolute;
|
|
|
+ top: -31px;
|
|
|
+ left: 776px;
|
|
|
+ width: 1px;
|
|
|
+ height: 80px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ text-align: right;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .line45 {
|
|
|
+ position: absolute;
|
|
|
+ top: -54px;
|
|
|
+ left: 750px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .arrow42 {
|
|
|
+ position: absolute;
|
|
|
+ top: 53px;
|
|
|
+ left: 396px;
|
|
|
+ }
|
|
|
+ .arrow43 {
|
|
|
+ position: absolute;
|
|
|
+ top: -39px;
|
|
|
+ left: 766px;
|
|
|
+ }
|
|
|
+ .line5 {
|
|
|
+ position: absolute;
|
|
|
+ top: 110px;
|
|
|
+ left: 600px;
|
|
|
+ width: 55px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ color: #5183f5;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .arrow52 {
|
|
|
+ position: absolute;
|
|
|
+ position: absolute;
|
|
|
+ top: 29px;
|
|
|
+ left: 607px;
|
|
|
+ }
|
|
|
+ .line51 {
|
|
|
+ position: absolute;
|
|
|
+ top: -17px;
|
|
|
+ left: 616px;
|
|
|
+ width: 1px;
|
|
|
+ height: 60px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line52 {
|
|
|
+ position: absolute;
|
|
|
+ top: 140px;
|
|
|
+ left: 655px;
|
|
|
+ width: 96px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line6 {
|
|
|
+ position: absolute;
|
|
|
+ top: 287px;
|
|
|
+ left: 259px;
|
|
|
+ width: 130px;
|
|
|
+ height: 40px; // background-image: url(../../../assets/images/pot.png);
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .arrow6 {
|
|
|
+ position: absolute;
|
|
|
+ top: 600px;
|
|
|
+ left: 767px;
|
|
|
+ }
|
|
|
+ .arrow61 {
|
|
|
+ position: absolute;
|
|
|
+ top: 214px;
|
|
|
+ left: 740px;
|
|
|
+ }
|
|
|
+ .arrow63 {
|
|
|
+ position: absolute;
|
|
|
+ top: 215px;
|
|
|
+ left: 394px;
|
|
|
+ }
|
|
|
+ .arrow64 {
|
|
|
+ position: absolute;
|
|
|
+ top: 297px;
|
|
|
+ left: 386px;
|
|
|
+ }
|
|
|
+ .arrow66 {
|
|
|
+ position: absolute;
|
|
|
+ top: 723px;
|
|
|
+ left: 870px;
|
|
|
+ }
|
|
|
+ .arrow67 {
|
|
|
+ position: absolute;
|
|
|
+ top: 487px;
|
|
|
+ left: 538px;
|
|
|
+ }
|
|
|
+ .arrow68 {
|
|
|
+ position: absolute;
|
|
|
+ top: 319px;
|
|
|
+ left: 367px;
|
|
|
+ }
|
|
|
+ .line61 {
|
|
|
+ position: absolute;
|
|
|
+ top: 224px;
|
|
|
+ left: 579px;
|
|
|
+ width: 1px;
|
|
|
+ height: 176px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line62 {
|
|
|
+ position: absolute;
|
|
|
+ top: 224px;
|
|
|
+ left: 406px;
|
|
|
+ width: 174px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line63 {
|
|
|
+ position: absolute;
|
|
|
+ top: 224px;
|
|
|
+ left: 657px;
|
|
|
+ width: 1px;
|
|
|
+ height: 509px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line64 {
|
|
|
+ position: absolute;
|
|
|
+ top: 224px;
|
|
|
+ left: 657px;
|
|
|
+ width: 97px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line66 {
|
|
|
+ position: absolute;
|
|
|
+ top: 302px;
|
|
|
+ left: 377px;
|
|
|
+ width: 1px;
|
|
|
+ height: 194px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line67 {
|
|
|
+ position: absolute;
|
|
|
+ top: 496px;
|
|
|
+ left: 377px;
|
|
|
+ width: 174px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line68 {
|
|
|
+ position: absolute;
|
|
|
+ top: 702px;
|
|
|
+ left: 578px;
|
|
|
+ width: 1px;
|
|
|
+ height: 30px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line69 {
|
|
|
+ position: absolute;
|
|
|
+ top: 732px;
|
|
|
+ left: 578px;
|
|
|
+ width: 80px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ text-align: right;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .line70 {
|
|
|
+ position: absolute;
|
|
|
+ top: 352px;
|
|
|
+ left: 777px;
|
|
|
+ width: 1px;
|
|
|
+ height: 255px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ }
|
|
|
+ .line71 {
|
|
|
+ position: absolute;
|
|
|
+ top: 621px;
|
|
|
+ left: 750px;
|
|
|
+ width: 100px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .line72 {
|
|
|
+ position: absolute;
|
|
|
+ top: 590px;
|
|
|
+ left: 777px;
|
|
|
+ width: 170px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #5183f5;
|
|
|
+ text-align: right;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .block4-tips {
|
|
|
+ position: absolute;
|
|
|
+ top: 342px;
|
|
|
+ left: 360px;
|
|
|
+ width: 40px;
|
|
|
+ height: 110px;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 28px;
|
|
|
+ padding-top: 11px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #6ea7d3;
|
|
|
+ }
|
|
|
+ .block4 {
|
|
|
+ position: absolute;
|
|
|
+ top: 140px;
|
|
|
+ left: 200px;
|
|
|
+ width: 370px;
|
|
|
+ height: 500px;
|
|
|
+ border: 1px #ccc dotted;
|
|
|
+ border-radius: 3px;
|
|
|
+ padding-top: 60px;
|
|
|
+ .block4-capsule {
|
|
|
+ display: inline-block;
|
|
|
+ width: 80px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #61ddb1;
|
|
|
+ margin: 18px 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .green-status {
|
|
|
+ background-color: #61ddb1 !important;
|
|
|
+ }
|
|
|
+ .red-status {
|
|
|
+ background-color: #f89588 !important;
|
|
|
+ }
|
|
|
+ .grey-status {
|
|
|
+ background-color: #9192ab !important;
|
|
|
+ }
|
|
|
+ .btm-tips {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ height: 40px;
|
|
|
+ width: 100%; // border: 1px red solid;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #06cfe8;
|
|
|
+ text-align: center;
|
|
|
+ .green-block {
|
|
|
+ display: inline-block;
|
|
|
+ height: 20px;
|
|
|
+ width: 40px;
|
|
|
+ margin: 0 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ vertical-align: middle;
|
|
|
+ background-color: #61ddb1;
|
|
|
+ }
|
|
|
+ .yellow-block {
|
|
|
+ display: inline-block;
|
|
|
+ height: 20px;
|
|
|
+ width: 40px;
|
|
|
+ margin: 0 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ vertical-align: middle;
|
|
|
+ background-color: #ffd102;
|
|
|
+ }
|
|
|
+ .red-block {
|
|
|
+ display: inline-block;
|
|
|
+ height: 20px;
|
|
|
+ width: 40px;
|
|
|
+ margin: 0 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ vertical-align: middle;
|
|
|
+ background-color: #f89588;
|
|
|
+ }
|
|
|
+ .grey-block {
|
|
|
+ display: inline-block;
|
|
|
+ height: 20px;
|
|
|
+ width: 40px;
|
|
|
+ margin: 0 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ vertical-align: middle;
|
|
|
+ background-color: #9192ab;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center-bottom {
|
|
|
+ height: 258px; // border: 2px solid red;
|
|
|
+ // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
|
|
|
+ // border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 0 8px;
|
|
|
+ position: relative;
|
|
|
+ .goods-container {
|
|
|
+ height: 130px; // background-image: url(../../../assets/screen/bg02.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 10px 50px; // padding: 15px;
|
|
|
+ }
|
|
|
+ .goods-tips {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #06cfe8;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 30px;
|
|
|
+ }
|
|
|
+ .goods-num {
|
|
|
+ font-size: 36px;
|
|
|
+ font-family: electronicFont;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .copyright {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6ea7d3;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ width: 100%;
|
|
|
+ transition: all 1s;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
walter.zhou