<!-- 个人中心 安全设置 By_liucf -->
<template>
  <div class="safe">
    <MiniTitle>
      <div slot="mini" class="miniTit">安全设置</div>
    </MiniTitle>
    <div class="box">
      <h3>账号安全</h3> 
      <div class="set">
        <p><i class="el-icon-circle-check-outline"></i>登录密码</p>
        <p>
          <i class="el-icon-circle-check-outline"></i>
          <span class="setted">已设置</span>
          <span class="modifine" @click="modifinePsw">修改</span>
        </p>
      </div>
      <p>安全性高的密码可以使账号更安全。建议您定期更换密码 ，设置一个不能由纯数字、字母组成且长度在6位~16位的密码。</p>
    </div>
  </div>
</template>
<script type="text/javascript">
  import MiniTitle from '../common/MiniTile.vue'
  export default {
    name:'SafetySetting',
    data(){
      return{}
    },
    methods:{
      modifinePsw(){
        this.$router.push({path:'/forgetPassword',query:{type:1}});
      }
    },
    components:{
      MiniTitle
    },
  }
</script>
<style lang="less" scoped>
  @import '../../less/user.less';
  .safe{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .base;
    .miniTit{
      .miniTitle;  
    }
    .box{

      padding: 20px 30px 30px;
      margin: 20px;
      
      background: #fff;
      border-radius: 2px;
      h3{
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .set{
        display: flex;
        justify-content: space-between;
        margin: 20px 0 15px 0;
      }
      .modifine{
        margin-left: 30px;
        cursor: pointer;
      }
      .el-icon-circle-check-outline{
        font-size: 16px;
        margin-right: 8px;
        vertical-align: middle;
      }
    }
  }
</style>