Merge branch '2xinfeng-dev' of www.gitinn.com:proginn/proginn-frontend into dev

components/common/connectUs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="connectUs">
+  <div :class="{connectUs: !mobile, connectUsMobile: mobile}">
     <div class="toastBox" v-if="isShowToast">
       <div class="toastArea">
         <div class="title">行业解决方案专属客服</div>
@@ -29,6 +29,7 @@ export default {
     return {
       name: "",
       phone: "",
+      mobile: this.$deviceType.isMobile()
     };
   },
   computed: {},
@@ -68,7 +69,8 @@ export default {
 </script>
 
 <style lang="scss">
-
+  @import "~@/assets/css/scssCommon.scss";
+.connectUs {
   .toastBox {
     position: fixed;
     width: 100vw;
@@ -162,4 +164,101 @@ export default {
     }
 
   }
+
+}
+.connectUsMobile {
+  .toastBox {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 888;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .toastArea {
+      position: relative;
+      width: pxtovw(355);
+      height: pxtovw(403);
+      background: rgba(255, 255, 255, 1);
+      border-radius: pxtovw(3);
+      padding: pxtovw(30) pxtovw(30);
+
+      .title {
+        font-size: pxtovw(19);
+        font-weight: 500;
+        color: rgba(34, 34, 34, 1);
+        line-height: pxtovw(26);
+        text-align: center;
+      }
+
+      .tips {
+        margin-top: pxtovw(8);
+        margin-bottom: pxtovw(14);
+        font-size: pxtovw(12);
+        font-weight: 400;
+        color: rgba(153, 153, 153, 1);
+        line-height: pxtovw(17);
+        text-align: center;
+      }
+
+      .nameCell, .phoneCell {
+        margin-top: pxtovw(25);
+
+        .label {
+          font-size: pxtovw(14);
+          font-weight: 500;
+          color: rgba(25, 34, 46, 1);
+          line-height: pxtovw(20);
+        }
+        input {
+          margin-top: pxtovw(5);
+          padding: pxtovw(10);
+          width: pxtovw(295);
+          height: pxtovw(48);
+          background: rgba(255, 255, 255, 1);
+          border-radius: pxtovw(3);
+          border: pxtovw(1) solid rgba(221, 225, 230, 1);
+        }
+      }
+      .nameCell {
+        margin-top: pxtovw(39);
+      }
+
+      .submitBtn {
+        margin-top: pxtovw(18);
+        width: pxtovw(295);
+        height: pxtovw(48);
+        background: rgba(48, 142, 255, 1);
+        box-shadow: 0 pxtovw(2) pxtovw(6) 0 rgba(48, 142, 255, 0.3);
+        border-radius: pxtovw(2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        p {
+          font-size: pxtovw(14);
+          font-weight: 500;
+          color: rgba(255, 255, 255, 1);
+          line-height: pxtovw(20);
+        }
+      }
+
+      .closeIcon {
+        position: absolute;
+        right: pxtovw(20);
+        top: pxtovw(34);
+        width: pxtovw(16);
+        height: pxtovw(16);
+        background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
+        background-size: cover;
+        cursor: pointer;
+      }
+    }
+
+  }
+}
 </style>