|
@@ -1,1067 +0,0 @@
|
|
-<template>
|
|
|
|
- <div class="visualization">
|
|
|
|
-
|
|
|
|
- <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="block3">
|
|
|
|
- <img src="../../../assets/images/furnace.png" alt="">
|
|
|
|
- </div>
|
|
|
|
- <div class="line1">
|
|
|
|
- 循环进料
|
|
|
|
- </div>
|
|
|
|
- <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
|
|
|
- <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx1">
|
|
|
|
- </el-popover>
|
|
|
|
- <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow1">
|
|
|
|
- <div class="line2">高压给水</div>
|
|
|
|
- <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
|
|
|
- <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx2">
|
|
|
|
- </el-popover>
|
|
|
|
- <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow2">
|
|
|
|
- <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow21">
|
|
|
|
- <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow22">
|
|
|
|
- <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow23">
|
|
|
|
- <div class="line21"></div>
|
|
|
|
- <div class="line22"></div>
|
|
|
|
- <div class="line3">高压蒸汽</div>
|
|
|
|
- <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
|
|
|
- <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx3">
|
|
|
|
- </el-popover>
|
|
|
|
- <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow3">
|
|
|
|
- <div class="line4">缓解气</div>
|
|
|
|
- <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
|
|
|
- <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx4">
|
|
|
|
- </el-popover>
|
|
|
|
- <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
|
|
|
- <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx41">
|
|
|
|
- </el-popover>
|
|
|
|
- <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow4">
|
|
|
|
- <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow41">
|
|
|
|
- <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow42">
|
|
|
|
- <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow43">
|
|
|
|
- <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow44">
|
|
|
|
- <div class="line41"></div>
|
|
|
|
- <div class="line42"></div>
|
|
|
|
- <div class="line43"></div>
|
|
|
|
- <div class="line44"></div>
|
|
|
|
- <div class="line45"></div>
|
|
|
|
-
|
|
|
|
- <div class="line5">蒸汽</div>
|
|
|
|
- <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
|
|
|
- <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx5">
|
|
|
|
- </el-popover>
|
|
|
|
- <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow5">
|
|
|
|
- <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow51">
|
|
|
|
- <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow52">
|
|
|
|
- <div class="line51"></div>
|
|
|
|
- <div class="line52"></div>
|
|
|
|
- <div class="line6"></div>
|
|
|
|
- <div class="line61"></div>
|
|
|
|
- <div class="line62"></div>
|
|
|
|
- <div class="line63"></div>
|
|
|
|
- <div class="line64"></div>
|
|
|
|
- <div class="line65"></div>
|
|
|
|
- <div class="line66"></div>
|
|
|
|
- <div class="line67"></div>
|
|
|
|
- <div class="line68"></div>
|
|
|
|
- <div class="line69"></div>
|
|
|
|
- <div class="line70"></div>
|
|
|
|
- <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow6">
|
|
|
|
- <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow61">
|
|
|
|
- <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow62">
|
|
|
|
- <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow63">
|
|
|
|
- <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow64">
|
|
|
|
- <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow65">
|
|
|
|
- <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow66">
|
|
|
|
- <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow67">
|
|
|
|
- <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow68">
|
|
|
|
- </div>
|
|
|
|
- </el-col>
|
|
|
|
- <!-- 右侧 -->
|
|
|
|
- <el-col :span="5">
|
|
|
|
- </el-col>
|
|
|
|
- </el-row>
|
|
|
|
- <el-dialog :close-on-click-modal="false" 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() {
|
|
|
|
- clearTimeout(this.timeout);
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- lxClick() {
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-};
|
|
|
|
-</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/bgimg.jpg) 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;
|
|
|
|
- }
|
|
|
|
- .right-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;
|
|
|
|
- }
|
|
|
|
- .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;
|
|
|
|
- .block1-tips {
|
|
|
|
- position: absolute;
|
|
|
|
- bottom: 120px;
|
|
|
|
- right: 2px;
|
|
|
|
- width: 40px;
|
|
|
|
- height: 110px;
|
|
|
|
- font-size: 22px;
|
|
|
|
- color: #fff;
|
|
|
|
- line-height: 28px;
|
|
|
|
- padding-top: 11px;
|
|
|
|
- text-align: center;
|
|
|
|
- background-color: #6ea7d3;
|
|
|
|
- }
|
|
|
|
- .block1 {
|
|
|
|
- position: absolute;
|
|
|
|
- bottom: 100px;
|
|
|
|
- right: 50px;
|
|
|
|
- width: 50px;
|
|
|
|
- height: 362px;
|
|
|
|
- border: 1px #ccc dotted;
|
|
|
|
- border-radius: 3px; // display: flex;
|
|
|
|
- // align-items: flex-end;
|
|
|
|
- overflow: hidden;
|
|
|
|
- .block1-capsule {
|
|
|
|
- display: inline-block;
|
|
|
|
- width: 20px;
|
|
|
|
- height: 96px;
|
|
|
|
- border-radius: 10px;
|
|
|
|
- background-color: #61ddb1;
|
|
|
|
- margin: 10px 15px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .block2-tips {
|
|
|
|
- position: absolute;
|
|
|
|
- bottom: 246px;
|
|
|
|
- right: 244px;
|
|
|
|
- width: 110px;
|
|
|
|
- height: 40px;
|
|
|
|
- font-size: 22px;
|
|
|
|
- color: #fff;
|
|
|
|
- letter-spacing: 2px;
|
|
|
|
- padding-top: 2px;
|
|
|
|
- text-align: center;
|
|
|
|
- background-color: #6ea7d3;
|
|
|
|
- }
|
|
|
|
- .block2 {
|
|
|
|
- position: absolute;
|
|
|
|
- bottom: 240px;
|
|
|
|
- right: 130px;
|
|
|
|
- width: 350px;
|
|
|
|
- height: 220px;
|
|
|
|
- border: 1px #ccc dotted;
|
|
|
|
- border-radius: 3px;
|
|
|
|
- padding: 50px 0 0 12px;
|
|
|
|
- .block2-capsule {
|
|
|
|
- display: inline-block;
|
|
|
|
- width: 20px;
|
|
|
|
- height: 100px;
|
|
|
|
- border-radius: 10px;
|
|
|
|
- background-color: #61ddb1;
|
|
|
|
- margin: 10px 8px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .block3-tips {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 160px;
|
|
|
|
- left: 780px;
|
|
|
|
- width: 40px;
|
|
|
|
- height: 110px;
|
|
|
|
- font-size: 22px;
|
|
|
|
- color: #fff;
|
|
|
|
- line-height: 28px;
|
|
|
|
- padding-top: 11px;
|
|
|
|
- text-align: center;
|
|
|
|
- background-color: #6ea7d3;
|
|
|
|
- }
|
|
|
|
- .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%;
|
|
|
|
- img {
|
|
|
|
- height: 900px;
|
|
|
|
- margin-top: -210px;
|
|
|
|
- margin-left: -59px;
|
|
|
|
- width: 180px;
|
|
|
|
- }
|
|
|
|
- .block3-capsule {
|
|
|
|
- display: inline-block;
|
|
|
|
- width: 80px;
|
|
|
|
- height: 24px;
|
|
|
|
- border-radius: 10px;
|
|
|
|
- background-color: #61ddb1;
|
|
|
|
- margin: 10px 15px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .line1 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 190px;
|
|
|
|
- left: -140px;
|
|
|
|
- width: 780px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- color: #fff;
|
|
|
|
- text-align: left;
|
|
|
|
- line-height: 24px;
|
|
|
|
- }
|
|
|
|
- .lx1 {
|
|
|
|
- cursor: pointer;
|
|
|
|
- position: absolute;
|
|
|
|
- top: 178px;
|
|
|
|
- left: 19px;
|
|
|
|
- }
|
|
|
|
- .arrow1 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 180px;
|
|
|
|
- left: 633px;
|
|
|
|
- }
|
|
|
|
- .line2 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 225px;
|
|
|
|
- left: -140px;
|
|
|
|
- width: 780px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- color: #fff;
|
|
|
|
- text-align: left;
|
|
|
|
- line-height: 24px;
|
|
|
|
- }
|
|
|
|
- .lx2 {
|
|
|
|
- cursor: pointer;
|
|
|
|
- position: absolute;
|
|
|
|
- top: 213px;
|
|
|
|
- left: 19px;
|
|
|
|
- }
|
|
|
|
- .arrow2 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 215px;
|
|
|
|
- left: 633px;
|
|
|
|
- }
|
|
|
|
- .arrow21 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 215px;
|
|
|
|
- left: 433px;
|
|
|
|
- }
|
|
|
|
- .arrow22 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 369px;
|
|
|
|
- left: 440px;
|
|
|
|
- }
|
|
|
|
- .arrow23 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 375px;
|
|
|
|
- left: 634px;
|
|
|
|
- }
|
|
|
|
- .line21 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 226px;
|
|
|
|
- left: 450px;
|
|
|
|
- width: 1px;
|
|
|
|
- height: 160px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line22 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 385px;
|
|
|
|
- left: 451px;
|
|
|
|
- width: 198px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line3 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 420px;
|
|
|
|
- left: -140px;
|
|
|
|
- width: 780px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- color: #fff;
|
|
|
|
- text-align: left;
|
|
|
|
- line-height: 24px;
|
|
|
|
- }
|
|
|
|
- .lx3 {
|
|
|
|
- cursor: pointer;
|
|
|
|
- position: absolute;
|
|
|
|
- top: 408px;
|
|
|
|
- left: 19px;
|
|
|
|
- }
|
|
|
|
- .arrow3 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 410px;
|
|
|
|
- left: 633px;
|
|
|
|
- }
|
|
|
|
- .line4 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 455px;
|
|
|
|
- left: -140px;
|
|
|
|
- width: 681px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- color: #fff;
|
|
|
|
- text-align: left;
|
|
|
|
- line-height: 24px;
|
|
|
|
- }
|
|
|
|
- .lx4 {
|
|
|
|
- cursor: pointer;
|
|
|
|
- position: absolute;
|
|
|
|
- top: 444px;
|
|
|
|
- left: 19px;
|
|
|
|
- }
|
|
|
|
- .lx41 {
|
|
|
|
- cursor: pointer;
|
|
|
|
- position: absolute;
|
|
|
|
- top: 444px;
|
|
|
|
- left: 440px;
|
|
|
|
- }
|
|
|
|
- .arrow4 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 445px;
|
|
|
|
- left: 318px;
|
|
|
|
- }
|
|
|
|
- .arrow41 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 670px;
|
|
|
|
- left: 311px;
|
|
|
|
- }
|
|
|
|
- .arrow42 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 636px;
|
|
|
|
- left: 696px;
|
|
|
|
- }
|
|
|
|
- .arrow43 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 574px;
|
|
|
|
- left: 531px;
|
|
|
|
- }
|
|
|
|
- .arrow44 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 451px;
|
|
|
|
- left: 531px;
|
|
|
|
- }
|
|
|
|
- .line41 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 456px;
|
|
|
|
- left: 541px;
|
|
|
|
- width: 1px;
|
|
|
|
- height: 160px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line42 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 616px;
|
|
|
|
- left: 541px;
|
|
|
|
- width: 90px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line43 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 456px;
|
|
|
|
- left: 320px;
|
|
|
|
- width: 1px;
|
|
|
|
- height: 230px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line44 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 685px;
|
|
|
|
- left: 320px;
|
|
|
|
- width: 387px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line45 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 641px;
|
|
|
|
- left: 706px;
|
|
|
|
- width: 1px;
|
|
|
|
- height: 44px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line5 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 93px;
|
|
|
|
- top: -6px;
|
|
|
|
- left: 580px;
|
|
|
|
- width: 652px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- color: #fff;
|
|
|
|
- text-align: right;
|
|
|
|
- line-height: 24px;
|
|
|
|
- }
|
|
|
|
- .lx5 {
|
|
|
|
- cursor: pointer;
|
|
|
|
- position: absolute;
|
|
|
|
- top: -17px;
|
|
|
|
- left: 1048px;
|
|
|
|
- }
|
|
|
|
- .arrow5 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: -15px;
|
|
|
|
- left: 575px;
|
|
|
|
- }
|
|
|
|
- .arrow51 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 239px;
|
|
|
|
- left: 571px;
|
|
|
|
- }
|
|
|
|
- .arrow52 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 245px;
|
|
|
|
- left: 634px;
|
|
|
|
- }
|
|
|
|
- .line51 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: -5px;
|
|
|
|
- left: 580px;
|
|
|
|
- width: 1px;
|
|
|
|
- height: 256px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line52 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 255px;
|
|
|
|
- left: 580px;
|
|
|
|
- width: 69px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line6 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 287px;
|
|
|
|
- left: 259px;
|
|
|
|
- width: 130px;
|
|
|
|
- height: 40px;
|
|
|
|
- background-image: url(../../../assets/images/pot1.png);
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
- }
|
|
|
|
- .arrow6 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 262px;
|
|
|
|
- left: 366px;
|
|
|
|
- }
|
|
|
|
- .arrow61 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 257px;
|
|
|
|
- left: 514px;
|
|
|
|
- }
|
|
|
|
- .arrow62 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 333px;
|
|
|
|
- left: 520px;
|
|
|
|
- }
|
|
|
|
- .arrow63 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 338px;
|
|
|
|
- left: 634px;
|
|
|
|
- }
|
|
|
|
- .arrow64 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 297px;
|
|
|
|
- left: 386px;
|
|
|
|
- }
|
|
|
|
- .arrow65 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 539px;
|
|
|
|
- left: 337px;
|
|
|
|
- }
|
|
|
|
- .arrow66 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 544px;
|
|
|
|
- left: 514px;
|
|
|
|
- }
|
|
|
|
- .arrow67 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 505px;
|
|
|
|
- left: 373px;
|
|
|
|
- }
|
|
|
|
- .arrow68 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 319px;
|
|
|
|
- left: 367px;
|
|
|
|
- }
|
|
|
|
- .line61 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 267px;
|
|
|
|
- left: 376px;
|
|
|
|
- width: 1px;
|
|
|
|
- height: 20px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line62 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 266px;
|
|
|
|
- left: 375px;
|
|
|
|
- width: 156px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line63 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 267px;
|
|
|
|
- left: 530px;
|
|
|
|
- width: 1px;
|
|
|
|
- height: 75px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line64 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 348px;
|
|
|
|
- left: 530px;
|
|
|
|
- width: 119px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line65 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 307px;
|
|
|
|
- left: 399px;
|
|
|
|
- width: 251px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line66 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 321px;
|
|
|
|
- left: 377px;
|
|
|
|
- width: 1px;
|
|
|
|
- height: 194px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line67 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 514px;
|
|
|
|
- left: 377px;
|
|
|
|
- width: 154px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line68 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 327px;
|
|
|
|
- left: 346px;
|
|
|
|
- width: 1px;
|
|
|
|
- height: 227px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line69 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 554px;
|
|
|
|
- left: 348px;
|
|
|
|
- width: 181px;
|
|
|
|
- height: 1px;
|
|
|
|
- background-color: #5183f5;
|
|
|
|
- }
|
|
|
|
- .line70 {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 491px;
|
|
|
|
- left: 530px;
|
|
|
|
- width: 20px;
|
|
|
|
- height: 87px;
|
|
|
|
- border: 1px solid #fff;
|
|
|
|
- }
|
|
|
|
- .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;
|
|
|
|
- // 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;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .copyright {
|
|
|
|
- height: 30px;
|
|
|
|
- line-height: 25px;
|
|
|
|
- text-align: center;
|
|
|
|
- font-size: 14px;
|
|
|
|
- color: #6ea7d3;
|
|
|
|
- position: absolute;
|
|
|
|
- bottom: 0px;
|
|
|
|
- width: 100%;
|
|
|
|
- transition: all 1s;
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|