企业认证H5

assets/css/otherpage/companyVerifyInput.scss

@@ -1,3 +1,5 @@
+@import "../scssCommon.scss";
+
 .companyVerifyInput {
   width: 1000px !important;
   min-height: 937px;
@@ -175,3 +177,176 @@
     }
   }
 }
+
+
+.companyVerifyInputMobile {
+  width: 100vw !important;
+  //min-height: 937px;
+  background: rgba(255, 255, 255, 1);
+  padding: 0 pxtovw(10) pxtovw(80) pxtovw(10);
+  margin: 0;
+
+  .titleArea {
+    width: 100%;
+    height: pxtovw(62);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: pxtovw(2) solid rgba(0, 0, 0, 0.06);
+
+    p {
+      font-size: pxtovw(20);
+      font-weight: 500;
+      color: rgba(29, 42, 58, 1);
+      line-height: pxtovw(28);
+      height: pxtovw(28);
+    }
+  }
+
+  .bodyArea {
+    width: 100%;
+    margin: 0 auto;
+
+    .topTips {
+      margin-top: pxtovw(32);
+      p {
+        color: #666666;
+        font-size: pxtovw(13);
+        line-height: pxtovw(25);
+        &:nth-child(1) {
+          color: #222;
+          font-size: pxtovw(14);
+        }
+      }
+    }
+
+    .inputArea {
+      .inputBox {
+        margin-top: pxtovw(31);
+        p {
+          height: pxtovw(20);
+          font-size: pxtovw(14);
+          font-weight: 500;
+          color: rgba(25, 34, 46, 1);
+          line-height: pxtovw(20);
+          text-align: left;
+        }
+        input {
+          margin-top: pxtovw(5);
+          width: pxtovw(350);
+          height: pxtovw(44);
+          background: rgba(255, 255, 255, 1);
+          border-radius: pxtovw(3);
+          border: pxtovw(1) solid rgba(221, 225, 230, 1);
+          padding: pxtovw(10);
+        }
+      }
+    }
+
+    .uploadFile {
+      margin-top: pxtovw(29);
+
+      .name {
+        height: pxtovw(18);
+        font-size: pxtovw(13);
+        font-weight: 600;
+        color: rgba(25, 34, 46, 1);
+        line-height: pxtovw(18);
+        span {
+          height: pxtovw(18);
+          font-size: pxtovw(13);
+          font-weight: 600;
+          color: #FF5B3B;
+          line-height: pxtovw(18);
+        }
+      }
+
+      .avatar-uploader {
+        margin-top: pxtovw(9);
+        width: pxtovw(184);
+        height: pxtovw(136);
+        overflow: hidden;
+        position: relative;
+        background: #fff;
+        .el-icon-delete {
+          display: none;
+        }
+
+        .el-upload {
+          width: pxtovw(184);
+          height: pxtovw(136);
+          border: pxtovw(1) dashed #409eff;
+          border-radius: pxtovw(6);
+          cursor: pointer;
+          position: relative;
+          overflow: hidden;
+          img {
+            width: 100%;
+            height: auto;
+            object-fit: contain;
+            object-position: top left;
+          }
+          &:hover {
+            border-color: #409eff;
+            .el-icon-delete {
+              display: block;
+            }
+          }
+        }
+        .avatar-uploader-icon {
+          position: absolute;
+          top: 0;
+          left: 0;
+          font-size: pxtovw(44);
+          color: #999;;
+          width: pxtovw(184);
+          height: pxtovw(136);
+          line-height: pxtovw(100);
+          text-align: center;
+        }
+        .avatar {
+          width: pxtovw(184);
+          height: pxtovw(136);
+          display: block;
+        }
+        .title {
+          position: absolute;
+          left: 50%;
+          bottom: pxtovw(40);
+          transform: translateX(-50%);
+          font-size: pxtovw(13);
+          font-weight: 500;
+          color: #409eff;
+          line-height: pxtovw(18);
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .submitButton {
+      margin-top: pxtovw(30);
+      display: flex;
+      align-items: center;
+      height: pxtovw(55);
+
+      .right {
+        width: pxtovw(350);
+        height: pxtovw(46);
+        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 {
+          height: pxtovw(20);
+          font-size: pxtovw(14);
+          font-weight: 500;
+          color: rgba(255, 255, 255, 1);
+          line-height: pxtovw(20);
+        }
+      }
+    }
+  }
+}

pages/otherpage/companyVerifyInput/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="companyVerifyInput">
+  <div :class="mobile ? 'companyVerifyInputMobile' : 'companyVerifyInput'">
     <div class="titleArea">
       <p>企业认证</p>
     </div>
@@ -62,6 +62,11 @@
         imageUrl: ''
       }
     },
+    asyncData({app}) {
+      return {
+        mobile: app.$deviceType.isMobile(),
+      }
+    },
     async created() {
 
     },