qjkankan_v1.1.1/packages/code/src/views/base/passwordSettings.vue

<template>
  <div class="password-settings">
    <span class="title">设置访问密码</span>
    <br>
    <div class="input-wrapper">
      <input
        :type="canSee ? 'text' : 'password'"
        placeholder="请输入访问密码，限20位"
        :maxlength="20"
        oninput="value=value.replace(/\s+/g,'')"
        v-model="info.password"
      >
      <i class="iconfont" @click="canSee = !canSee" :class="canSee ? ' icon-editor_on' : 'icon-editor_off'"></i>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  components: {
  },
  data() {
    return {
      password:'',
      canSee: false,
    }
  },
  computed: {
    ...mapGetters({
      info:'info'
    })
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.password-settings {
  padding: 24px 30px;
  background: #252526;
  height: 546px;
  .title {
    font-size: 18px;
    color: #FFFFFF;
  }
  > .input-wrapper {
    margin-top: 16px;
    position: relative;
    border: 1px solid #404040;
    padding: 0 16px;
    background: #1A1B1D;
    border-radius: 2px;
    height: 36px;
    width: 500px;
    &:focus-within {
      border-color: #0076F6;
    }
    > input {
      border: none;
      background: transparent;
      outline: none;
      height: 100%;
      width: calc(100% - 22px);
      padding: 0;
      color: #fff;
      letter-spacing: 1px;
      font-size: 14px;
      background: redv;
    }
    > i {
      padding: 5px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 11px;
      font-size: 14px;
      color: rgba(255, 255, 255);
    }
  }
}
</style>