诚祥网站开发

pages/cpyfw/index.vue

@@ -6,21 +6,21 @@
         <h4 class="client-title">产品体验</h4>
         <div class="cpty-box">
           <!-- 家政公司 -->
-          <div class="cpty-card-box">
+          <div class="cpty-card-box" @click="tyBtn">
             <img :src="tyImg1"/>
             <h3 class="title">家政公司</h3>
             <p class="desc">家政人员培训，全流程管理</p>
           </div>
 
           <!-- 家政人员 -->
-          <div class="cpty-card-box">
+          <div class="cpty-card-box" @click="tyBtn">
             <img :src="tyImg2"/>
             <h3 class="title">家政人员</h3>
             <p class="desc">家政类课程学习，家政工作推荐</p>
           </div>
 
           <!-- 管理端 -->
-          <div class="cpty-card-box">
+          <div class="cpty-card-box" @click="tyBtn">
             <img :src="tyImg3"/>
             <h3 class="title">管理端</h3>
             <p class="desc">灵活创建，数据化维护</p>
@@ -114,6 +114,27 @@
             <img :src="jzImg4" class="jzry-img">
         </div>
       </div>
+
+      <el-dialog
+        :close-on-click-modal="false"
+        :visible.sync="telDl"
+        @close="delDlClose"
+        title="家政学"
+        class="cpty-dialog"
+        center>
+        <el-form :model="telChangeDate" status-icon :rules="telRules" ref="ruleTelForm" class="application-scheme-form">
+          <el-form-item  prop="name">
+            <el-input v-model="telChangeDate.name" placeholder="请输入姓名" class="dialog-input-tel"></el-input>
+          </el-form-item>
+          <el-form-item  prop="tel">
+            <el-input v-model="telChangeDate.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
+          </el-form-item>
+          <el-form-item  prop="jzName">
+            <el-input v-model="telChangeDate.jzName" placeholder="请输入家政公司名称" class="dialog-input-tel"></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="application-scheme-btn" @click="dialogSave">提交</div>
+      </el-dialog>
     </div>
 </template>
 
@@ -140,7 +161,27 @@
           jzImg3:   require(`~/static/images/website/product/cp-icon3.png`),
           jzBj:   require(`~/static/images/website/product/row-bj2.png`),
           jzImg4:   require(`~/static/images/website/product/cp-img5.png`),
-        }}
+
+          // dialog
+          telChangeDate:   {},
+          telDl: false,
+          telRules:        {
+            name:          [
+              { trigger: 'blur', required: true, message: '请输入姓名' },
+            ],
+            tel:          [
+              { trigger: 'blur', required: true, message: '请输入手机号' },
+            ],
+            jzName:          [
+              { trigger: 'blur', required: true, message: '请输入家政公司名称' },
+            ],
+        },
+        }},
+      methods:    {
+        tyBtn(){
+          this.telDl = true;
+        }
+      }
     };
 </script>