Browse Source

修改数据整理页面。

chuwu 5 years ago
parent
commit
7a023d455b

+ 0 - 473
src/components/data_admin/buildData/style.less

@@ -1,473 +0,0 @@
-#app {
-    min-width: 1098px;
-    min-height: 767px;
-    position: relative;
-    overflow-x: auto;
-    .left-main {
-      width: calc(100% - 251px);
-      height: 100%;
-      position: relative;
-      float: left;
-    }
-    .right-main {
-      float: right;
-      height: 100%;
-      width: 250px;
-      border-left: 1px solid #ccc;
-    }
-  }
-  #buildData {
-    overflow: hidden;
-    height: 100%;
-    width: 100%;
-    flex-direction: column;
-    display: flex;
-    .icon {
-      position: absolute;
-      z-index: 99;
-      bottom: 20px;
-      left: 20px;
-    }
-    img::after {
-      content: "\e87d";
-      font-family: "iconfont" !important;
-      font-size: 30px;
-      font-style: normal;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      font-family: FontAwesome;
-      color: rgb(100, 100, 100);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      z-index: 2;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: #ddd;
-    }
-    .Blue {
-      color: #409eff;
-    }
-    .img_view {
-      position: relative;
-      video {
-        width: 100%;
-        height: 100%;
-        border: 1px solid #606266;
-      }
-    }
-    .active_swiper {
-      border: 2px solid #409eff !important;
-    }
-    .build_header {
-      min-width: 800px;
-      height: 3rem;
-      width: 100%;
-      border-bottom: 0.01rem solid #ccc;
-    }
-    .point_view {
-      position: absolute;
-      width: 100%;
-      overflow: hidden;
-      top: 3.1rem;
-      z-index: 500;
-      background-color: #fff;
-    }
-    .build_label {
-      height: 18rem;
-      width: 100%;
-      position: relative;
-      font-size: 0.8rem;
-      .turn_left,
-      .turn_right {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        height: 100%;
-        line-height: 18rem;
-        width: 4rem;
-        z-index: 90;
-        // flex: 1;
-        i {
-          cursor: pointer;
-          font-size: 4rem;
-        }
-      }
-      .turn_left {
-        left: 0;
-      }
-      .turn_right {
-        right: 0;
-      }
-      .label_view {
-        height: 100%;
-        padding: 1rem 4rem;
-        border-bottom: 0.01rem solid #ccc;
-        .swiper-container {
-          width: 100%;
-          height: 100%;
-        }
-        .swiper-wrapper{
-          height: 100%;
-        }
-        .active_swiper{
-          width: 100%;
-          height: 100%;
-        }
-        .swiper-slide {
-          background: #fff;
-          border: 1px solid #333;
-          height: 100%;
-          display: inline-block;
-          float: left;
-          h3 {
-            font-size: 1.2rem;
-            font-weight: bold;
-            line-height: 3rem;
-          }
-          .all_view {
-            margin-top: 5rem;
-            text-align: center;
-          }
-          .msg_view {
-            margin-top: 4rem;
-            text-align: center;
-            height: 5.5rem;
-          }
-          // .msg_view:first-child{
-          //     margin-top: 2rem;
-          // }
-          .img_view {
-            height: 100%;
-            width: 100%;
-            overflow: hidden;
-            position: relative;
-            .title_view {
-              width: 100%;
-              height: 100%;
-              position: absolute;
-              left: 0px;
-              top: 0px;
-              // background: url("./../../static/property-grad.png") top left
-              //   repeat-x;
-              // width: 100%;
-              // position: absolute;
-              // opacity: 0.9;
-              color: #fff;
-              // background: rgba(0,0,0,0.1);
-              z-index: 88;
-              padding-left: 6px;
-            }
-            p.btn {
-              position: absolute;
-              right: 1rem;
-              bottom: 0.6rem;
-              cursor: pointer;
-              z-index: 99;
-            }
-          }
-        }
-        .first_tag {
-          padding: 4rem 0;
-          text-align: center;
-          h3 {
-            line-height: 4rem;
-          }
-        }
-      }
-    }
-    .label_show {
-      height: 3rem;
-      margin-top: 30px;
-      .label_btn {
-        width: 15rem;
-        height: 3rem;
-        line-height: 3rem;
-        margin: 0 auto;
-        text-align: center;
-        cursor: pointer;
-        background-color: #ccc;
-        border-radius: 0.2rem;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        span,
-        i {
-          color: #606266;
-        }
-      }
-    }
-    .build_operate {
-      height: 3rem;
-      line-height: 3rem;
-      margin-top: 6rem;
-      .build_msg {
-        float: right;
-        font-size: 12px;
-        height: 1.5rem;
-        line-height: 1.5rem;
-        margin-top: 0.75rem;
-        padding: 0 1rem;
-        margin-right: 2rem;
-        background-color: #f3c0c0;
-        color: #000;
-        border-radius: 5px;
-      }
-      /* 定义keyframe动画,命名为blink */
-      @keyframes blink {
-        0% {
-          background-color: #cc0000;
-        }
-        100% {
-          background-color: #e99292;
-        }
-      }
-      /* 定义blink类*/
-      .blink {
-        color: #fff;
-        background-color: #cc0000;
-        animation: blink 3s linear infinite;
-      }
-      span {
-        margin-left: 1rem;
-        display: inline-block;
-        cursor: pointer;
-      }
-      span:first-child::after {
-        content: "|";
-        color: #000;
-        margin-left: 1rem;
-      }
-      .undo_btn {
-        cursor: pointer;
-        float: right;
-        margin-right: 1rem;
-      }
-    }
-    .build_table {
-      flex: 1;
-      overflow-y: hidden;
-      height: 484px;
-      .el-tabs{
-        height:480px;
-      }
-      .data_page {
-        position: absolute;
-        width: 100%;
-        bottom: 1rem;
-        background-color: #fff;
-      }
-    }
-    .build_pic {
-      width: 100%;
-      height: 200px;
-      position: relative;
-      background-color: #fff;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      padding: 0.4rem 4rem;
-      border-top: 0.01rem solid #ccc;
-      .pic_show {
-        position: absolute;
-        top: -2.3rem;
-        right: 2rem;
-        padding: 0.4rem 1rem;
-        border: 1px solid #dcdfe6;
-        margin-bottom: 3rem;
-        color: #606266;
-        background: #fff;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-      .turn_left,
-      .turn_right {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        height: 100%;
-        width: 4rem;
-        z-index: 90;
-        // flex: 1;
-        i {
-          cursor: pointer;
-          font-size: 4rem;
-        }
-      }
-      .turn_left {
-        left: 0;
-      }
-      .turn_right {
-        right: 117px;
-      }
-      .pic_view {
-        width: 100%;
-        height: 100%;
-      }
-      .swiper-container {
-        width: 100%;
-        height: 100%;
-      }
-      .swiper-slide {
-        padding: 0.6rem;
-        background: #fff;
-        border: 1px solid #333;
-        .img_view {
-          height: 100%;
-          width: 100%;
-          overflow: hidden;
-          position: relative;
-          p {
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            left: 0;
-            background-color: rgba(175, 175, 175, 0.4);
-            text-align: center;
-          }
-        }
-      }
-      // .pic_view{
-      //     width: 100%;
-      //     height: 100%;
-      //     padding-left: 1rem 4rem;
-      // }
-    }
-    .modification {
-      .el-dialog__body {
-        .mod_title {
-          max-height: 8rem;
-          .qr_code,
-          .msg_main {
-            float: left;
-          }
-          .qr_code {
-            width: 35%;
-            height: 100%;
-            padding: 0 0.6rem 0.3rem;
-            img {
-              width: 100%;
-              display: block;
-              height: 100%;
-            }
-          }
-          .msg_main {
-            width: 55%;
-            p {
-              overflow: hidden;
-              text-overflow: ellipsis;
-              display: -webkit-box;
-              -webkit-line-clamp: 2;
-              -webkit-box-orient: vertical;
-            }
-            .input_view {
-              margin-top: 0.5rem;
-              position: relative;
-              input {
-                width: 100%;
-                height: 1.5rem;
-                padding-left: 0.5rem;
-                box-sizing: border-box;
-              }
-              i {
-                position: absolute;
-                right: 10px;
-                font-size: 18px;
-                top: 2px;
-                color: #409eff;
-                display: inline-block;
-                width: 20px;
-                cursor: pointer;
-                transition: all 0.4s;
-              }
-            }
-          }
-        }
-        .cant_mod {
-          width: 100%;
-          .table_header {
-            border: 1px solid #000;
-            border-bottom: none;
-            font-weight: 900;
-            padding-left: 0.5rem;
-          }
-          table {
-            width: 100%;
-            border-color: #b6ff00;
-            border-collapse: collapse;
-            border: 1px solid #000;
-            tr {
-              line-height: 1.5rem;
-              td {
-                border: 1px solid #000;
-                padding-left: 1rem;
-              }
-            }
-          }
-          .locale_pic {
-            p {
-              line-height: 1.8rem;
-              font-weight: 900;
-              margin-top: 0.5rem;
-              border-bottom: 1px solid #000;
-            }
-            div {
-              ul {
-                padding-left: 5px;
-                li {
-                  width: 45%;
-                  float: left;
-                  margin: 10px;
-                  height: 12rem;
-                  overflow: hidden;
-                  position: relative;
-                  img {
-                    width: 100%;
-                    height: 193px;
-                    display: block;
-                    border: 1px solid #000;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    .iframe_view {
-      position: fixed;
-      z-index: 99999;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: rgba(0, 0, 0, 0.5);
-      .iframe_no {
-        position: fixed;
-        z-index: 99999;
-        border-radius: 50%;
-        cursor: pointer;
-        height: 80px;
-        overflow: hidden;
-        right: -40px;
-        top: -40px;
-        transition: background-color 0.15s;
-        width: 80px;
-        background-color: rgba(0, 0, 0, 0.6);
-        // background-color: #b6ff00;
-        .iconfont {
-          margin-top: 48px;
-          display: inline-block;
-          margin-left: 16px;
-          font-size: 16px;
-          color: #fff;
-        }
-      }
-      iframe {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }

+ 503 - 0
src/components/data_admin/buildData/style.scss

@@ -0,0 +1,503 @@
+$borderColor: #DCDFE6;
+$bgColor: #548FF0;
+$errorColor: #F56C6C;
+$warningColor:#E6A23C;
+$color: #409EFF;
+$bg2: #fff;
+$larger:16px; //小标题
+h3 {
+    font-style: normal;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+}
+
+#app {
+    .left-main {
+        // width: calc(100% - 251px);
+        display: inline-block;
+        position: absolute;
+        left: 10px;
+        top: 90px;
+        bottom: 0;
+        right: 261px;
+    }
+    .right-main {
+        // height: 100%;
+        width: 250px;
+        position: absolute;
+        top: 90px;
+        right: 10px;
+        bottom: 0;
+        border: 1px solid $borderColor;
+        box-sizing: border-box;
+    }
+}
+
+.build_header {
+    // min-width: 800px;
+    width: 100%;
+    line-height: 45px;
+    width: 100%;
+    border: 1px solid $borderColor;
+    border-top: none;
+    box-sizing: border-box;
+    background-color: $bg2;
+    padding-left: 20px;
+    box-sizing: border-box;
+    border-radius: 4px;
+}
+
+#buildData {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    // flex-direction: column;
+    // display: flex;
+    background-color: $bg2;
+    .icon {
+        position: absolute;
+        z-index: 99;
+        bottom: 20px;
+        left: 20px;
+    }
+    img::after {
+        content: "icon";
+        // font-family: "iconfont" !important;
+        font-style: normal;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        color: #F56C6C;
+        // display: flex;
+        // justify-content: center;
+        // align-items: center;
+        position: absolute;
+        text-align: center;
+        font-size: 12px;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        line-height: 140px;
+        background-color: #EBEEF5;
+    }
+    .Blue {
+        color: #409eff;
+    }
+    .img_view {
+        position: relative;
+        video {
+            width: 100%;
+            height: 100%;
+            border: 1px solid $borderColor;
+        }
+    }
+    .active_swiper {
+        border: 2px solid #409eff !important;
+    }
+    .point_view {
+        position: absolute;
+        width: 100%;
+        overflow: hidden;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 500;
+        background-color: #fff;
+    }
+    .build_label {
+        height: 180px;
+        width: 100%;
+        position: relative;
+        font-size: 0.8rem;
+        border-bottom: 1px solid $borderColor;
+        .turn_left,
+        .turn_right {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            height: 100%;
+            line-height: 180px;
+            width: 4rem;
+            z-index: 90;
+            // flex: 1;
+            i {
+                cursor: pointer;
+                font-size: 4rem;
+            }
+        }
+        .turn_left {
+            left: 0;
+        }
+        .turn_right {
+            right: 0;
+        }
+        .label_view {
+            width: 100%;
+            overflow-x: auto;
+            .swiper-container {
+                width: 100%;
+            }
+            .active_swiper {
+                width: 100%;
+            }
+            .swiper-slide {
+                background: #fff;
+                border: 1px solid $borderColor;
+                height: 150px;
+                width: 150px;
+                margin: 20px;
+                display: inline-block;
+                box-sizing: border-box;
+                h3 {
+                    font-size: $larger;
+                }
+                .all_view {
+                    margin-top: 50px;
+                    text-align: center;
+                }
+                .msg_view {
+                    margin-top: 35px;
+                    text-align: center;
+                    height: 5.5rem;
+                }
+                // .msg_view:first-child{
+                //     margin-top: 2rem;
+                // }
+                .img_view {
+                    height: 100%;
+                    width: 100%;
+                    overflow: hidden;
+                    position: relative;
+                    .title_view {
+                        width: 100%;
+                        height: 100%;
+                        position: absolute;
+                        left: 0px;
+                        top: 0px;
+                        // background: url("./../../static/property-grad.png") top left
+                        //   repeat-x;
+                        // width: 100%;
+                        // position: absolute;
+                        // opacity: 0.9;
+                        color: #303133;
+                        // background: rgba(0,0,0,0.1);
+                        z-index: 88;
+                        padding-left: 6px;
+                        box-sizing: border-box;
+                    }
+                    .btn {
+                        position: absolute;
+                        right: 10px;
+                        bottom: 10px;
+                        cursor: pointer;
+                        z-index: 599;
+                    }
+                }
+            }
+            .first_tag {
+                padding: 4rem 0;
+                text-align: center;
+                h3 {
+                    line-height: 4rem;
+                }
+            }
+        }
+    }
+    .label_show {
+        height: 35px;
+        margin-top: 0;
+        text-align: center;
+        border: 1px solid #DCDFE6;
+        border-right: none;
+        border-left: none;
+    }
+    .build_operate {
+        height: 3rem;
+        line-height: 3rem;
+        margin-top: 30px;
+        width: 100%;
+        // border: 1px solid #DCDFE6;
+        // padding-left: 20px;
+        // box-sizing: border-box;
+        .build_msg {
+            float: right;
+            font-size: 12px;
+            height: 1.5rem;
+            line-height: 1.5rem;
+            margin-top: 0.75rem;
+            padding: 0 1rem;
+            margin-right: 2rem;
+            background-color: #f3c0c0;
+            color: #000;
+            border-radius: 5px;
+        }
+        /* 定义keyframe动画,命名为blink */
+        @keyframes blink {
+            0% {
+                background-color: $errorColor;
+            }
+            100% {
+                background-color: $warningColor;
+            }
+        }
+        /* 定义blink类*/
+        .blink {
+            color: #fff;
+            background-color: $errorColor;
+            animation: blink 3s linear infinite;
+        }
+        span {
+            margin-left: 1rem;
+            display: inline-block;
+            cursor: pointer;
+        }
+        span:first-child::after {
+            content: "|";
+            color: #000;
+            margin-left: 1rem;
+        }
+        .undo_btn {
+            cursor: pointer;
+            float: right;
+            margin-right: 1rem;
+        }
+    }
+    .build_table {
+        // flex: 1;
+        overflow: hidden;
+        width: 100%;
+        // height: 400px;
+        .el-tabs {
+            // height: 400px;
+            width: 100%;
+        }
+        .el-tabs__content {
+            height: 100%;
+        }
+        .data_page {
+            // position: absolute;
+            width: 100%;
+            // bottom: 0;
+            background-color: #fff;
+        }
+    }
+    .build_pic {
+        width: 100%;
+        height: 200px;
+        position: relative;
+        background-color: #fff;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        // padding: 0.4rem 4rem;
+        border-top: 1px solid $borderColor;
+        .pic_show {
+            position: absolute;
+            top: -2.3rem;
+            right: 2rem;
+            padding: 0.4rem 1rem;
+            border: 1px solid $borderColor;
+            margin-bottom: 3rem;
+            color: #606266;
+            background: #fff;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .turn_left,
+        .turn_right {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            height: 100%;
+            width: 4rem;
+            z-index: 90;
+            // flex: 1;
+            i {
+                cursor: pointer;
+                font-size: 4rem;
+            }
+        }
+        .turn_left {
+            left: 0;
+        }
+        .turn_right {
+            right: 117px;
+        }
+        .pic_view {
+            width: 100%;
+            height: 100%;
+        }
+        .swiper-container {
+            width: 100%;
+            height: 100%;
+        }
+        #swiperPic {
+            padding-top: 10px;
+            box-sizing: border-box;
+            .swiper-slide {
+                padding: 10px;
+                box-sizing: border-box;
+                background: #fff;
+                border: 1px solid $borderColor;
+                .img_view {
+                    height: 100%;
+                    width: 100%;
+                    overflow: hidden;
+                    position: relative;
+                    p {
+                        position: absolute;
+                        bottom: 0;
+                        right: 0;
+                        left: 0;
+                        background-color: rgba(175, 175, 175, 0.4);
+                        text-align: center;
+                    }
+                }
+            }
+            .pic_view {
+                width: 100%;
+                height: 100%;
+                padding-left: 1rem 4rem;
+            }
+        }
+    }
+    .modification {
+        .el-dialog__body {
+            .mod_title {
+                max-height: 8rem;
+                .qr_code,
+                .msg_main {
+                    float: left;
+                }
+                .qr_code {
+                    width: 35%;
+                    height: 100%;
+                    padding: 0 0.6rem 0.3rem;
+                    img {
+                        width: 100%;
+                        display: block;
+                        height: 100%;
+                    }
+                }
+                .msg_main {
+                    width: 55%;
+                    p {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        -webkit-line-clamp: 2;
+                        -webkit-box-orient: vertical;
+                    }
+                    .input_view {
+                        margin-top: 0.5rem;
+                        position: relative;
+                        input {
+                            width: 100%;
+                            height: 1.5rem;
+                            padding-left: 0.5rem;
+                            box-sizing: border-box;
+                        }
+                        i {
+                            position: absolute;
+                            right: 10px;
+                            font-size: 18px;
+                            top: 2px;
+                            color: #409eff;
+                            display: inline-block;
+                            width: 20px;
+                            cursor: pointer;
+                            transition: all 0.4s;
+                        }
+                    }
+                }
+            }
+            .cant_mod {
+                width: 100%;
+                .table_header {
+                    border: 1px solid $borderColor;
+                    border-bottom: none;
+                    font-weight: 900;
+                    padding-left: 0.5rem;
+                }
+                table {
+                    width: 100%;
+                    border-color: #b6ff00;
+                    border-collapse: collapse;
+                    border: 1px solid $borderColor;
+                    tr {
+                        line-height: 1.5rem;
+                        td {
+                            border: 1px solid $borderColor;
+                            padding-left: 1rem;
+                        }
+                    }
+                }
+                .locale_pic {
+                    p {
+                        line-height: 1.8rem;
+                        font-weight: 900;
+                        margin-top: 0.5rem;
+                        border-bottom: 1px solid $borderColor;
+                    }
+                    div {
+                        ul {
+                            padding-left: 5px;
+                            li {
+                                width: 45%;
+                                float: left;
+                                margin: 10px;
+                                height: 12rem;
+                                overflow: hidden;
+                                position: relative;
+                                img {
+                                    width: 100%;
+                                    height: 193px;
+                                    display: block;
+                                    border: 1px solid $borderColor;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .iframe_view {
+        position: fixed;
+        z-index: 99999;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        .iframe_no {
+            position: fixed;
+            z-index: 99999;
+            border-radius: 50%;
+            cursor: pointer;
+            height: 80px;
+            overflow: hidden;
+            right: -40px;
+            top: -40px;
+            transition: background-color 0.15s;
+            width: 80px;
+            background-color: rgba(0, 0, 0, 0.6);
+            // background-color: #b6ff00;
+            .iconfont {
+                margin-top: 48px;
+                display: inline-block;
+                margin-left: 16px;
+                font-size: 16px;
+                color: #fff;
+            }
+        }
+        iframe {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

File diff suppressed because it is too large
+ 1792 - 2032
src/views/data_admin/buildData/index.vue