戴艳蓉 3 years ago
parent
commit
cdae8f8a23
2 changed files with 329 additions and 316 deletions
  1. BIN
      src/assets/img/state@2x.png
  2. 329 316
      src/views/order/orderRes.vue

BIN
src/assets/img/state@2x.png


+ 329 - 316
src/views/order/orderRes.vue

@@ -2,8 +2,8 @@
   <div class="orderRes" style="padding-top: 46px">
     <van-nav-bar title="下单结果" class="van-nav-bar-my-fixed" fixed />
     <div class="page-main" v-loading="loading">
-      <div class="dagou" :class="{ ok: ok }">
-        <!-- <input type="checkbox" > -->
+      <img :src="img" class="page-main-img" alt="" />
+      <!-- <div class="dagou" :class="{ ok: ok }">
         <svg width="100" height="100">
           <circle
             fill="none"
@@ -25,7 +25,7 @@
             class="tick"
           />
         </svg>
-      </div>
+      </div> -->
       <div class="tc" style="margin: -10px 0 30px 0">
         <p style="color: #a67e4b">恭喜您,下单成功!</p>
       </div>
@@ -60,6 +60,8 @@ export default {
   data() {
     return {
       //初始小球不显示
+
+      img: require("@/assets/img/state@2x.png"),
       resData: null,
       id: "",
       ok: false,
@@ -107,6 +109,16 @@ export default {
   width: 100%;
   height: 100%;
   background: #e6e6dc !important;
+  .page-main {
+    width: 100%;
+    text-align: center;
+    .page-main-img {
+      box-sizing: border-box;
+      display: inline-block;
+      padding:50px 0 8px 0;
+      width: 35%;
+    }
+  }
   .dagou {
     display: flex;
     width: 100%;
@@ -159,7 +171,7 @@ export default {
     }
   }
   .yingdao {
-    padding: 0 16px;
+    padding: 5px 16px;
     box-sizing: border-box;
     button {
       width: 30.5%;
@@ -172,326 +184,327 @@ export default {
       }
       &:last-child {
         margin: 0 6.5% 0 13%;
-        color: #a67e4b;
+        color: #333;
         // background: #f2f2f2;
-        border: 1px solid #a67e4b;
-        background: #e6e6dc;
+        border: 1px solid #333;
+        background: transparent;
         // border-color: rgb(255, 131, 39);
         // color: rgb(255, 131, 39);
       }
     }
   }
 }
-.code-main {
-  padding: 16px 16px 10px 16px;
-  img {
-    display: inline-block;
-    width: 80%;
-    margin: 0 10% 5px 10%;
-  }
-  p {
-    text-align: center;
-    line-height: 25px;
-  }
-}
-.mine-cell-list {
-  border-top: 0.01rem solid #ebedf0;
-  border-bottom: 0.01rem solid #ebedf0;
-}
-.mine-logout {
-  padding: 100px 20px 0 20px;
-  button {
-    width: 100%;
-    border: 0;
-  }
-}
-.mine-service {
-  padding: 16px 16px 16px 16px;
-  background: #fff;
 
-  .mine-service-title {
-    color: #000;
-    font-size: 18px;
-    font-weight: bolder;
-    padding: 0 3px 3px 3px;
-  }
-  ul {
-    width: 100%;
-    // border-top: 0.01rem solid #ebedf0;
-    li {
-      float: left;
-      width: 50%;
-      position: relative;
-      padding: 8px 0 0 0;
+// .code-main {
+//   padding: 16px 16px 10px 16px;
+//   img {
+//     display: inline-block;
+//     width: 80%;
+//     margin: 0 10% 5px 10%;
+//   }
+//   p {
+//     text-align: center;
+//     line-height: 25px;
+//   }
+// }
+// .mine-cell-list {
+//   border-top: 0.01rem solid #ebedf0;
+//   border-bottom: 0.01rem solid #ebedf0;
+// }
+// .mine-logout {
+//   padding: 100px 20px 0 20px;
+//   button {
+//     width: 100%;
+//     border: 0;
+//   }
+// }
+// .mine-service {
+//   padding: 16px 16px 16px 16px;
+//   background: #fff;
 
-      img.service-bg {
-        float: left;
-        margin: 0;
-        height: 75px;
-        width: 100%;
-      }
-      div {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        padding: 20px;
-        box-sizing: border-box;
-        p {
-          float: left;
-          width: calc(100% - 40px);
-          color: #fff;
-          height: 45px;
-          line-height: 45px;
-          font-size: 16px;
-          text-align: center;
-          // padding: 0 5% 0 0;
-          box-sizing: border-box;
-          font-weight: bolder;
-        }
-        img {
-          float: left;
-          width: 40px;
-          box-sizing: border-box;
-          padding: 2% 2%;
-          height: 45px;
-          width: 40px;
-        }
-      }
-      &:nth-child(1) {
-        padding-right: 3px;
-        // padding-top: 6px;
-        // padding-bottom: 5px;
-      }
-      &:nth-child(2) {
-        padding-left: 3px;
-        // div {
-        //   img {
-        //     padding: 2% 0;
-        //   }
-        // }
-      }
-    }
-  }
-}
-.mine-resume {
-  padding-top: 46px;
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 246px;
-  .edit {
-    position: absolute;
-    right: 0;
-    top: 98px;
-    background: #04d1dc;
-    height: 30px;
-    line-height: 30px;
-    color: #fff;
-    padding: 0 10px 0 16px;
-    border-top-left-radius: 15px;
-    font-size: 14px;
-    border-bottom-left-radius: 15px;
-  }
-  .mineBg {
-    width: 100%;
-    display: inline-block;
-    height: 200px;
-  }
-  .mine-resume-main {
-    position: absolute;
-    padding-top: 46px;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 2;
-    ul {
-      width: 100%;
-      li {
-        float: left;
-        width: calc(100% - 155px);
-        &:first-child {
-          width: 125px;
-          height: 100%;
-          padding: 58px 5px 0 16px;
-          text-align: center;
-          img {
-            width: 48px;
-            height: 48px;
-            border: 1px solid #eee;
-            display: inline-block;
-            border-radius: 50%;
-            padding: 8px;
-          }
-        }
-        &:nth-child(2) {
-          // padding: 40px 0 0 0;
-          padding: 52px 0 0 0;
-          color: #fff;
-          font-size: 16px;
-          p::before,
-          p::after,
-          b::after,
-          b::before {
-            clear: both;
-            content: "";
-            box-sizing: border-box;
-          }
-          p {
-            width: 100%;
-            height: 40px;
-            line-height: 40px;
-            > span {
-              float: left;
-              &:first-child {
-                width: 120px;
-                display: inline-block;
-                overflow: hidden;
-              }
-            }
-            b {
-              float: left;
-              font-weight: lighter;
-              height: 27px;
-              width: 70px;
-              margin: 4px 0 0 0;
-              vertical-align: top;
-              border-radius: 18px;
-              border: 1px solid #fff;
-              text-align: center;
-              i {
-                vertical-align: top;
-                font-size: 14px;
-                height: 25px;
-                line-height: 25px;
-              }
-              span {
-                clear: both;
-                padding: 0 4px 0 4px;
-                vertical-align: top;
-                font-size: 12px;
-                height: 25px;
-                line-height: 25px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .mine-unresume-main {
-    position: absolute;
-    padding-top: 46px;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 2;
-    text-align: center;
-    img {
-      width: 48px;
-      height: 48px;
-      border: 1px solid #eee;
-      display: inline-block;
-      border-radius: 50%;
-      padding: 8px;
-      margin: 50px 0 0 0;
-    }
-    div {
-      width: 100%;
-      padding: 12px 0 0 0;
-      b {
-        display: inline-block;
-        font-weight: lighter;
-        height: 27px;
-        width: 60px;
-        margin: 4px 0 0 0;
-        vertical-align: top;
-        border-radius: 18px;
-        border: 1px solid #fff;
-        text-align: center;
-        color: #fff;
-        i {
-          vertical-align: top;
-          font-size: 14px;
-          height: 25px;
-          line-height: 25px;
-        }
-        span {
-          clear: both;
-          padding: 0 4px 0 4px;
-          vertical-align: top;
-          font-size: 12px;
-          height: 25px;
-          line-height: 25px;
-        }
-      }
-    }
-  }
-}
-.color_ {
-  // color: rgb(64, 120, 202);
-}
-input[type="search"]::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-}
-.search {
-  input {
-    background: rgba(242, 242, 247, 1);
-    border-radius: 15px;
-    height: 30px;
-    text-align: center;
-  }
-}
-.doge {
-  width: 140px;
-  height: 72px;
-  margin-top: 8px;
-  border-radius: 4px;
-}
-.tiaojian {
-  padding-bottom: 10px;
-  .search-tab {
-    font-size: 12px;
-    color: #333333;
-    .van-cell__right-icon {
-      color: #cccccc;
-      font-size: 12px;
-      line-height: normal;
-      height: auto;
-    }
+//   .mine-service-title {
+//     color: #000;
+//     font-size: 18px;
+//     font-weight: bolder;
+//     padding: 0 3px 3px 3px;
+//   }
+//   ul {
+//     width: 100%;
+//     // border-top: 0.01rem solid #ebedf0;
+//     li {
+//       float: left;
+//       width: 50%;
+//       position: relative;
+//       padding: 8px 0 0 0;
 
-    .van-cell__right-icon::before {
-      -webkit-transform: rotate(90deg);
-      transform: rotate(90deg);
-      -webkit-transition: -webkit-transform 0.3s;
-      transition: -webkit-transform 0.3s;
-      transition: transform 0.3s;
-      transition: transform 0.3s, -webkit-transform 0.3s;
-      margin-top: 2px;
-    }
-  }
-  .search-tab.active {
-    color: rgb(64, 120, 202);
-    .van-cell__right-icon::before {
-      -webkit-transform: rotate(-90deg);
-      transform: rotate(-90deg);
-      color: rgb(64, 120, 202);
-    }
-  }
-  .search-tab.colorActive {
-    color: rgb(64, 120, 202);
-    .van-cell__right-icon::before {
-      color: rgb(64, 120, 202);
-    }
-  }
-}
-.tab-content {
-  overflow: hidden;
-  .tab-content-list {
-    overflow-y: auto;
-    div:nth-child(1) {
-      margin-top: 0px;
-    }
-  }
-}
+//       img.service-bg {
+//         float: left;
+//         margin: 0;
+//         height: 75px;
+//         width: 100%;
+//       }
+//       div {
+//         position: absolute;
+//         top: 0;
+//         left: 0;
+//         width: 100%;
+//         padding: 20px;
+//         box-sizing: border-box;
+//         p {
+//           float: left;
+//           width: calc(100% - 40px);
+//           color: #fff;
+//           height: 45px;
+//           line-height: 45px;
+//           font-size: 16px;
+//           text-align: center;
+//           // padding: 0 5% 0 0;
+//           box-sizing: border-box;
+//           font-weight: bolder;
+//         }
+//         img {
+//           float: left;
+//           width: 40px;
+//           box-sizing: border-box;
+//           padding: 2% 2%;
+//           height: 45px;
+//           width: 40px;
+//         }
+//       }
+//       &:nth-child(1) {
+//         padding-right: 3px;
+//         // padding-top: 6px;
+//         // padding-bottom: 5px;
+//       }
+//       &:nth-child(2) {
+//         padding-left: 3px;
+//         // div {
+//         //   img {
+//         //     padding: 2% 0;
+//         //   }
+//         // }
+//       }
+//     }
+//   }
+// }
+// .mine-resume {
+//   padding-top: 46px;
+//   position: relative;
+//   box-sizing: border-box;
+//   width: 100%;
+//   height: 246px;
+//   .edit {
+//     position: absolute;
+//     right: 0;
+//     top: 98px;
+//     background: #04d1dc;
+//     height: 30px;
+//     line-height: 30px;
+//     color: #fff;
+//     padding: 0 10px 0 16px;
+//     border-top-left-radius: 15px;
+//     font-size: 14px;
+//     border-bottom-left-radius: 15px;
+//   }
+//   .mineBg {
+//     width: 100%;
+//     display: inline-block;
+//     height: 200px;
+//   }
+//   .mine-resume-main {
+//     position: absolute;
+//     padding-top: 46px;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     z-index: 2;
+//     ul {
+//       width: 100%;
+//       li {
+//         float: left;
+//         width: calc(100% - 155px);
+//         &:first-child {
+//           width: 125px;
+//           height: 100%;
+//           padding: 58px 5px 0 16px;
+//           text-align: center;
+//           img {
+//             width: 48px;
+//             height: 48px;
+//             border: 1px solid #eee;
+//             display: inline-block;
+//             border-radius: 50%;
+//             padding: 8px;
+//           }
+//         }
+//         &:nth-child(2) {
+//           // padding: 40px 0 0 0;
+//           padding: 52px 0 0 0;
+//           color: #fff;
+//           font-size: 16px;
+//           p::before,
+//           p::after,
+//           b::after,
+//           b::before {
+//             clear: both;
+//             content: "";
+//             box-sizing: border-box;
+//           }
+//           p {
+//             width: 100%;
+//             height: 40px;
+//             line-height: 40px;
+//             > span {
+//               float: left;
+//               &:first-child {
+//                 width: 120px;
+//                 display: inline-block;
+//                 overflow: hidden;
+//               }
+//             }
+//             b {
+//               float: left;
+//               font-weight: lighter;
+//               height: 27px;
+//               width: 70px;
+//               margin: 4px 0 0 0;
+//               vertical-align: top;
+//               border-radius: 18px;
+//               border: 1px solid #fff;
+//               text-align: center;
+//               i {
+//                 vertical-align: top;
+//                 font-size: 14px;
+//                 height: 25px;
+//                 line-height: 25px;
+//               }
+//               span {
+//                 clear: both;
+//                 padding: 0 4px 0 4px;
+//                 vertical-align: top;
+//                 font-size: 12px;
+//                 height: 25px;
+//                 line-height: 25px;
+//               }
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+//   .mine-unresume-main {
+//     position: absolute;
+//     padding-top: 46px;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     z-index: 2;
+//     text-align: center;
+//     img {
+//       width: 48px;
+//       height: 48px;
+//       border: 1px solid #eee;
+//       display: inline-block;
+//       border-radius: 50%;
+//       padding: 8px;
+//       margin: 50px 0 0 0;
+//     }
+//     div {
+//       width: 100%;
+//       padding: 12px 0 0 0;
+//       b {
+//         display: inline-block;
+//         font-weight: lighter;
+//         height: 27px;
+//         width: 60px;
+//         margin: 4px 0 0 0;
+//         vertical-align: top;
+//         border-radius: 18px;
+//         border: 1px solid #fff;
+//         text-align: center;
+//         color: #fff;
+//         i {
+//           vertical-align: top;
+//           font-size: 14px;
+//           height: 25px;
+//           line-height: 25px;
+//         }
+//         span {
+//           clear: both;
+//           padding: 0 4px 0 4px;
+//           vertical-align: top;
+//           font-size: 12px;
+//           height: 25px;
+//           line-height: 25px;
+//         }
+//       }
+//     }
+//   }
+// }
+// .color_ {
+//   // color: rgb(64, 120, 202);
+// }
+// input[type="search"]::-webkit-search-cancel-button {
+//   -webkit-appearance: none;
+// }
+// .search {
+//   input {
+//     background: rgba(242, 242, 247, 1);
+//     border-radius: 15px;
+//     height: 30px;
+//     text-align: center;
+//   }
+// }
+// .doge {
+//   width: 140px;
+//   height: 72px;
+//   margin-top: 8px;
+//   border-radius: 4px;
+// }
+// .tiaojian {
+//   padding-bottom: 10px;
+//   .search-tab {
+//     font-size: 12px;
+//     color: #333333;
+//     .van-cell__right-icon {
+//       color: #cccccc;
+//       font-size: 12px;
+//       line-height: normal;
+//       height: auto;
+//     }
+
+//     .van-cell__right-icon::before {
+//       -webkit-transform: rotate(90deg);
+//       transform: rotate(90deg);
+//       -webkit-transition: -webkit-transform 0.3s;
+//       transition: -webkit-transform 0.3s;
+//       transition: transform 0.3s;
+//       transition: transform 0.3s, -webkit-transform 0.3s;
+//       margin-top: 2px;
+//     }
+//   }
+//   .search-tab.active {
+//     color: rgb(64, 120, 202);
+//     .van-cell__right-icon::before {
+//       -webkit-transform: rotate(-90deg);
+//       transform: rotate(-90deg);
+//       color: rgb(64, 120, 202);
+//     }
+//   }
+//   .search-tab.colorActive {
+//     color: rgb(64, 120, 202);
+//     .van-cell__right-icon::before {
+//       color: rgb(64, 120, 202);
+//     }
+//   }
+// }
+// .tab-content {
+//   overflow: hidden;
+//   .tab-content-list {
+//     overflow-y: auto;
+//     div:nth-child(1) {
+//       margin-top: 0px;
+//     }
+//   }
+// }
 </style>