账户安全

application/user/view/accountsafe/index.html

@@ -20,10 +20,61 @@
     }
     .td_update{
         width: 100px;
+        color: dodgerblue;
+    }
+    .tanchu{
+        top:30px;
+        left: 20%;
+        width: 400px;
+        height: 320px;
+        position: absolute;
+        border: 1px grey solid;
+        border-radius: 3px;
+        background-color: white;
+        display: none;
+    }
+    .tanchu div{
+        margin:30px auto;
+        text-align: center;
+        border-radius: 2px;
+        line-height: 30px;
     }
 
 </style>
 <div class="layui-tab layui-tab-card">
+    <div class="tanchu" id="update_email">
+        <div style="margin-top: 20px;">遇到问题</div>
+        <div style="font-size: 11px;">您正在为{$Think.session.user_email}修改登陆邮箱，请选择一种身份验证方式</div>
+        <div style="border: 1px grey solid;width:240px;height: 30px;">
+            <span>通过邮验证</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><a href="">立即验证</a></span>
+        </div>
+        <div style="border: 1px grey solid;width:240px;height: 30px;">
+            <span>通手机验证</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><a href="">立即验证</a></span>
+        </div>
+        <div style="width:60px;height: 30px;line-height:30px;background-color: dodgerblue;color: white;border-radius: 2px;" id="email_off">关闭</div>
+    </div>
+    <div class="tanchu" id="update_pwd">
+        <div style="margin-top: 20px;">遇到问题</div>
+        <div style="font-size: 11px;">您正在为{$Think.session.user_email}修改登陆密码，请选择一种身份验证方式</div>
+        <div style="border: 1px grey solid;width:240px;height: 30px;">
+            <span>通过邮验证</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><a href="">立即验证</a></span>
+        </div>
+        <div style="border: 1px grey solid;width:240px;height: 30px;">
+            <span>通手机验证</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><a href="">立即验证</a></span>
+        </div>
+        <div style="width:60px;height: 30px;line-height:30px;background-color: dodgerblue;color: white;border-radius: 2px;" id="pwd_off">关闭</div>
+    </div>
+    <div class="tanchu" id="update_phone">
+        <div style="margin-top: 20px;">遇到问题</div>
+        <div style="font-size: 11px;">您正在为{$Think.session.user_email}修改电话号码，请选择一种身份验证方式</div>
+        <div style="border: 1px grey solid;width:240px;height: 30px;">
+            <span>通过邮验证</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><a href="">立即验证</a></span>
+        </div>
+        <div style="border: 1px grey solid;width:240px;height: 30px;">
+            <span>通手机验证</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><a href="">立即验证</a></span>
+        </div>
+        <div style="width:60px;height: 30px;line-height:30px;background-color: dodgerblue;color: white;border-radius: 2px;" id="phone_off">关闭</div>
+    </div>
     <div class="updatepwd">
         <form method="post">
             <div>
@@ -31,17 +82,17 @@
                     <tr>
                         <td class="td_name">登陆邮箱</td>
                         <td class="td_info">您的登陆邮箱：{$Think.session.user_email}</td>
-                        <td class="td_update"><a href="">更改</a></td>
+                        <td class="td_update" id="email">更改</td>
                     </tr>
                     <tr>
                         <td class="td_name">登陆密码</td>
                         <td class="td_info">互联网账户存在被盗风险，建议您定期更改密码，以确保账户安全。</td>
-                        <td class="td_update"><a href="">更改</a></td>
+                        <td class="td_update" id="pwd">更改</td>
                     </tr>
                     <tr>
                         <td class="td_name">电话号码</td>
                         <td class="td_info">您已绑定手机：+ (86)&nbsp&nbsp{$user['user_phone']}</td>
-                        <td class="td_update"><a href="">更改</a></td>
+                        <td class="td_update" id="phone">更改</td>
                     </tr>
                 </table>
 
@@ -49,6 +100,26 @@
         </form>
     </div>
 </div>
+<script>
+    $("#email").click(function(){
+        document.getElementById("update_email").style.display = "block";
+    });
+    $("#email_off").click(function(){
+        document.getElementById("update_email").style.display = "none";
+    });
+    $("#pwd").click(function(){
+        document.getElementById("update_pwd").style.display = "block";
+    });
+    $("#pwd_off").click(function(){
+        document.getElementById("update_pwd").style.display = "none";
+    });
+    $("#phone").click(function(){
+        document.getElementById("update_phone").style.display = "block";
+    });
+    $("#phone_off").click(function(){
+        document.getElementById("update_phone").style.display = "none";
+    });
+</script>
 <script type="text/javascript">
     layui.use('laydate', function(){
         var laydate = layui.laydate;