申请方案弹窗

assets/scss/cus-client/cus-client-common.scss

@@ -374,3 +374,34 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   // 指示器
   .el-carousel__indicators{display: none}
 }
+
+/* 网站通用弹窗-申请方案 */
+.application-scheme-dialog{
+  .el-dialog{width: 610px;border-radius: 8px;}
+  .el-dialog__body{
+    padding: 30px 120px 60px;
+    i{width:213px;height:92px;display: block;background-image: url("~static/images/client/course/course-dialog-img.png");margin: 0 auto;}
+    p{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin:24px 0 36px;}
+    span{@include setFontStyle(-6);color: rgba(0,0,0,0.65);}
+    a{@include setFontStyle(-6);color: #2B5CFD;float: right;}
+    // 申请注册按钮
+    .application-scheme-btn{height: 40px;line-height: 40px;@include setFontStyle(-4);background: #1890FF;border-radius: 4px;color: #FFFFFF;text-align: center;margin-bottom: 16px;}
+  }
+  // 输入框上下间距
+  .el-form-item{margin-bottom: 24px}
+
+  // 输入框左右间距
+  .el-input .el-input__inner{padding: 0 15px 0 35px;}
+
+  //输入框图标
+  .dialog-input-tel:after,.dialog-input-code:after{width: 16px;height: 16px;content: "";display: inline-block;position: absolute;top: 12px;left: 12px;}
+  .dialog-input-tel:after{background-image: url("~static/images/client/course/course-dialog-icon1.svg");}
+  .dialog-input-code:after{background-image: url("~static/images/client/course/course-dialog-icon2.svg");}
+
+  // 输入框-验证码
+  .dialog-input-code{width: calc(100% - 114px);}
+  .dialog-code-btn.el-button{padding: 12px 15px;margin-left: 8px;}
+
+  // 滑块
+  .nc-container{.nc_wrapper{width:100%!important;margin-bottom: 24px;}}
+}

pages/courseware/index.vue

@@ -118,31 +118,26 @@
 
     <el-dialog
       :close-on-click-modal="false"
-      title="请绑定手机号"
       :visible.sync="telDl"
       @close="delDlClose"
-      class="response-small-dialog"
+      class="application-scheme-dialog"
       center>
-      <el-form :model="telChangeDate" status-icon :rules="telRules" ref="ruleTelForm" label-width="80px"
-               class="demo-ruleForm response-dialog-form-input">
-        <el-form-item label="手机号：" prop="tel">
-          <el-input v-model="telChangeDate.tel" placeholder="请输入手机号"></el-input>
+      <i></i>
+      <p>免费获得课程开发解决方案</p>
+      <el-form :model="telChangeDate" status-icon :rules="telRules" ref="ruleTelForm" class="application-scheme-form">
+        <el-form-item  prop="tel">
+          <el-input v-model="telChangeDate.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
         </el-form-item>
         <div id="your-dom-id" class="nc-container"></div>
-        <el-form-item label="验证码：" prop="verification">
+        <el-form-item prop="verification">
           <div class="verification">
-            <el-input v-model="telChangeDate.verification" placeholder="请输入验证码"></el-input>
-            <el-button size="small" @click="checkVerification" :disabled="btnTextDisabled">{{btnText}}
-            </el-button>
+            <el-input v-model="telChangeDate.verification" placeholder="请输入验证码" class="dialog-input-code"></el-input>
+            <el-button  @click="checkVerification" :disabled="btnTextDisabled" class="dialog-code-btn">{{btnText}}</el-button>
           </div>
         </el-form-item>
       </el-form>
-      <p class="tips-p"><i class="el-icon-warning"></i><span
-        style="margin-left: 10px;">您的手机号将作为手机端账号使用，未经授权不会主动公开，请放心</span>
-      </p>
-      <p class="tips-p">每个手机号只能绑定一个账号</p>
-
-      <div @click="dialogSave">申请方案</div>
+      <div class="application-scheme-btn" @click="dialogSave">申请方案</div>
+      <span>免费热线：400-052-2130</span><a>在线客服</a>
     </el-dialog>
 
 

static/images/client/course/course-dialog-icon1.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="16" height="16"/>
+    <g fill="#000" fill-opacity=".25" fill-rule="nonzero" transform="translate(2.953 .984)">
+      <path d="M8.9671875,0.0125 L1.1375,0.0125 C0.515625,0.0125 0.0125,0.515625 0.0125,1.1375 L0.0125,12.9046875 C0.0125,13.5265625 0.515625,14.0296875 1.1375,14.0296875 L8.9671875,14.0296875 C9.5890625,14.0296875 10.0921875,13.5265625 10.0921875,12.9046875 L10.0921875,1.1375 C10.0921875,0.515625 9.5875,0.0125 8.9671875,0.0125 Z M1.1375,1.1375 L8.9671875,1.1375 L8.9671875,1.1375 L8.9671875,9.3109375 L1.1375,9.3109375 L1.1375,1.1375 C1.1375,1.1375 1.1375,1.1375 1.1375,1.1375 Z M8.9671875,12.9046875 L1.1375,12.9046875 C1.1375,12.9046875 1.1375,12.9046875 1.1375,12.9046875 L1.1375,10.4359375 L8.9671875,10.4359375 L8.9671875,12.9046875 C8.9671875,12.9046875 8.9671875,12.9046875 8.9671875,12.9046875 Z"/>
+      <path d="M5.578125,11.075 L4.609375,11.075 C4.2984375,11.075 4.046875,11.3265625 4.046875,11.6375 C4.046875,11.9484375 4.2984375,12.2 4.609375,12.2 L5.578125,12.2 C5.8890625,12.2 6.140625,11.9484375 6.140625,11.6375 C6.140625,11.3265625 5.8890625,11.075 5.578125,11.075 Z"/>
+    </g>
+  </g>
+</svg>

static/images/client/course/course-dialog-icon2.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="16" height="16"/>
+    <path fill="#000" fill-opacity=".25" fill-rule="nonzero" d="M12.9046875,0.0140625 L1.1375,0.0140625 C0.515625,0.0140625 0.0125,0.5171875 0.0125,1.1390625 L0.0125,10.91875 C0.0125,11.540625 0.515625,12.04375 1.1375,12.04375 L12.9046875,12.04375 C13.5265625,12.04375 14.0296875,11.540625 14.0296875,10.91875 L14.0296875,1.1390625 C14.0296875,0.51875 13.525,0.0140625 12.9046875,0.0140625 Z M11.6984375,1.1390625 L7.509375,4.640625 L7.484375,4.6609375 L7.4625,4.684375 C7.35625,4.796875 7.2125,4.8578125 7.0578125,4.859375 C7.05625,4.859375 7.05625,4.859375 7.0546875,4.859375 C6.9015625,4.859375 6.7578125,4.7984375 6.6515625,4.6890625 L6.6296875,4.6671875 L2.3515625,1.1390625 L11.6984375,1.1390625 Z M12.9046875,10.91875 L1.1375,10.91875 C1.1375,10.91875 1.1375,10.91875 1.1375,10.91875 L1.1375,1.596875 L5.86875,5.4953125 C6.1875,5.8109375 6.60625,5.984375 7.05625,5.984375 C7.059375,5.984375 7.0609375,5.984375 7.0640625,5.984375 C7.515625,5.9828125 7.9375,5.80625 8.2546875,5.4859375 L12.90625,1.5984375 L12.90625,10.91875 C12.9046875,10.91875 12.9046875,10.91875 12.9046875,10.91875 Z" transform="translate(.984 1.984)"/>
+  </g>
+</svg>