|
@@ -6,7 +6,8 @@
|
|
|
<div class="content">
|
|
|
<div class="dialog_title">请输入房间密码</div>
|
|
|
<div class="pass_container">
|
|
|
- <v-otp-input
|
|
|
+ <input v-model.trim="password" class="pass-input" type="password" maxlength="4"/>
|
|
|
+ <!-- <v-otp-input
|
|
|
class="otp-input-container"
|
|
|
ref="otpInput"
|
|
|
input-classes="otp-input"
|
|
@@ -19,11 +20,13 @@
|
|
|
:placeholder="['*', '*', '*', '*']"
|
|
|
@on-change="handleOnChange"
|
|
|
@on-complete="handleOnComplete"
|
|
|
- />
|
|
|
+ /> -->
|
|
|
</div>
|
|
|
|
|
|
<div class="created_btn">
|
|
|
- <div class="created_cancel" v-if="!isSingle" @click="closeCreated">{{ t('base.cancel') }}</div>
|
|
|
+ <div class="created_cancel" v-if="!isSingle" @click="closeCreated">{{
|
|
|
+ t('base.cancel')
|
|
|
+ }}</div>
|
|
|
<div class="created_confirm" @click="createdConfirm">{{ t('base.confirm') }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -39,7 +42,7 @@
|
|
|
import { useI18n } from '/@/hooks/useI18n';
|
|
|
import browser from '/@/utils/browser';
|
|
|
// import { useSocket } from '/@/hooks/userSocket';
|
|
|
- import VOtpInput from 'vue3-otp-input';
|
|
|
+ // import VOtpInput from 'vue3-otp-input';
|
|
|
import { useRoom } from '/@/hooks/useRoom';
|
|
|
import { useRtcStore } from '/@/store/modules/rtc';
|
|
|
|
|
@@ -60,7 +63,7 @@
|
|
|
isSingle: {
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
- }
|
|
|
+ },
|
|
|
});
|
|
|
watchEffect(() => {
|
|
|
ifShow.value = props.show;
|
|
@@ -86,12 +89,12 @@
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
- const handleOnChange = () => {};
|
|
|
+ // const handleOnChange = () => {};
|
|
|
|
|
|
- const handleOnComplete = (value: string) => {
|
|
|
- console.log('OTP completed: ', value);
|
|
|
- password.value = value;
|
|
|
- };
|
|
|
+ // const handleOnComplete = (value: string) => {
|
|
|
+ // console.log('OTP completed: ', value);
|
|
|
+ // password.value = value;
|
|
|
+ // };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
@@ -315,10 +318,29 @@
|
|
|
-webkit-appearance: none;
|
|
|
margin: 0;
|
|
|
}
|
|
|
+
|
|
|
+ input {
|
|
|
+ outline: none;
|
|
|
+
|
|
|
+ }
|
|
|
input::placeholder {
|
|
|
font-size: 15px;
|
|
|
text-align: center;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
+ .pass-input{
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ width: 80%;
|
|
|
+ margin: 0 auto;
|
|
|
+ color: #000;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+ html:focus-within {
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|