编辑器-基础-访问密码功能与样式

src/views/base/Toolbar.vue

@@ -66,6 +66,7 @@
       </menu>
       <div class="settings-view-wrapper">
         <OpeningTipSettings v-show="activeTab === '开场提示'"></OpeningTipSettings>
+        <PasswordSettings v-show="activeTab === '访问密码'"></PasswordSettings>
       </div>
     </div>
     <eidt-panel
@@ -113,6 +114,7 @@
 import { getMaterialList} from "@/api";
 import EidtPanel from "./EditPanel";
 import OpeningTipSettings from '@/views/base/openingTipSettings.vue'
+import PasswordSettings from "@/views/base/passwordSettings.vue";
 import Table from "@/components/tableSelect";
 import Table2 from "@/components/tableSelect2";
 import Select from "@/components/select";
@@ -127,6 +129,7 @@ export default {
     Table2,
     Select,
     OpeningTipSettings,
+    PasswordSettings,
   },
   data() {
     return {
@@ -273,7 +276,7 @@ export default {
 .main {
   position: fixed;
   width: 930px;
-  top: 15%;
+  top: 90px;
   left: calc(50% - (930px) / 2);
 }
 
@@ -296,13 +299,16 @@ export default {
     border-radius: 2px;
     height: 36px;
     width: 100%;
+    &:focus-within {
+      border-color: #0076F6;
+    }
     > input {
       border: none;
       background: transparent;
       outline: none;
       height: 100%;
       width: calc(100% - 50px);
-      padding: none;
+      padding: 0;
       color: #fff;
       letter-spacing: 1px;
       font-size: 14px;
@@ -326,6 +332,9 @@ export default {
     border-radius: 2px;
     height: 123px;
     width: 100%;
+    &:focus-within {
+      border-color: #0076F6;
+    }
     > textarea {
       padding: 9px 16px 30px 16px;
       resize: none;
@@ -334,7 +343,7 @@ export default {
       outline: none;
       width: 100%;
       height: calc(100% - 30px);
-      padding: none;
+      padding: 0;
       color: #fff;
       letter-spacing: 1px;
       font-size: 14px;

src/views/base/passwordSettings.vue

@@ -0,0 +1,84 @@
+<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>