1466 lines
37 KiB
Vue
1466 lines
37 KiB
Vue
<template>
|
||
<div class="app-aside">
|
||
<div class="logo">
|
||
<img class="logo-img" src="@/assets/logo.png" alt="logo"></img>
|
||
</div>
|
||
<div class="Navigation">
|
||
|
||
<div class="Navigation-card" v-for="(item, index) in NavigationModule" :key="index"
|
||
@click="handleClick(item.path, item.id)"
|
||
:style="{backgroundColor: item.id === activeId|| item.id === 5? '#ffffff' : '' ,
|
||
boxShadow: item.id === activeId|| item.id === 5? '5px 5px 5px rgba(0, 0, 0, 0.2)' : '',
|
||
backgroundImage: item.id === activeId? `url(${require('@/assets/selectSidebar.png')})` : ''}">
|
||
|
||
<img class="Navigation-card-icon-img" :src="item.id === activeId&& item.id !== 5? item.Selectedicon : item.icon" alt=""/>
|
||
<div class="Navigation-card-name" :style="{color: item.id === activeId? '#03ABA8' : '' ,}">{{ item.name }}</div>
|
||
<div class="redDot" v-if="item.id === 3 && chatList.unreadTotal != 0">
|
||
{{ chatList.unreadTotal }}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="Avatar" >
|
||
<el-popover placement="right-end" :width="250" trigger="click">
|
||
<template #reference>
|
||
<img class="Avatar-img" :src="avatar" alt="logo"></img>
|
||
</template>
|
||
<div class="Avatar-content">
|
||
<!-- 点击头像弹出框内容 -->
|
||
<div class="Avatar-content-name">
|
||
{{ info.nickName }}
|
||
</div>
|
||
<div class="Avatar-content-btn" style="overflow:auto;">
|
||
<div class="Avatar-list" v-for="(item, index) in Avatarlist" :key="index" @click="popoverClick(item.id)">
|
||
<div>{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
<!-- 添加新PK弹窗 -->
|
||
<el-drawer size="25%" :with-header="false" v-model="drawer">
|
||
<!-- 添加或修改主播 -->
|
||
<div class="demo-panel">
|
||
<div class="add-anchor-library">
|
||
<div class="title">
|
||
<img class="titleimg" src="@/assets/embellish.png" alt="" />
|
||
<div>发布新PK</div>
|
||
<img class="titleimg" src="@/assets/embellish.png" alt="" />
|
||
</div>
|
||
<div class="add-anchor-library-content">
|
||
<div class="input-name">
|
||
<!-- 主播名称 -->
|
||
<el-input
|
||
class="input-name-input"
|
||
v-model="anchorName"
|
||
size="large"
|
||
placeholder="请输入主播名称"
|
||
@blur="handleChange()"
|
||
/>
|
||
<div class="myanchor">
|
||
<div class="myanchor-btn" @click="myAnchorDialogVisible = true">
|
||
选择我的主播
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="country">
|
||
<!-- 国家 -->
|
||
<el-select-v2
|
||
v-model="countryvalue"
|
||
filterable
|
||
:options="country"
|
||
placeholder="请选择国家"
|
||
size="large"
|
||
style="vertical-align: middle"
|
||
class="select"
|
||
/>
|
||
</div>
|
||
<div class="gender">
|
||
<!-- 性别 -->
|
||
<el-select-v2
|
||
v-model="gendervalue"
|
||
filterable
|
||
:options="genderOptions"
|
||
size="large"
|
||
placeholder="请选择性别"
|
||
style="vertical-align: middle"
|
||
class="select"
|
||
/>
|
||
</div>
|
||
<div class="timeselect">
|
||
<el-date-picker
|
||
v-model="timevalue"
|
||
type="datetime"
|
||
placeholder="选择PK时间"
|
||
size="large"
|
||
style="width: 100%; height: 100%"
|
||
format="YYYY/MM/DD hh:mm"
|
||
value-format="x"
|
||
/>
|
||
</div>
|
||
<div class="Gold-sessions">
|
||
<div class="Goldcoinbox-right">
|
||
<div class="Goldcoinbox-text">金币数（单位为K）</div>
|
||
<el-input-number v-model="goldvalue" controls-position="right" />
|
||
</div>
|
||
<div class="Goldcoinbox-right">
|
||
<div class="Goldcoinbox-text">场次</div>
|
||
<el-input-number v-model="sessionnum" controls-position="right" />
|
||
</div>
|
||
</div>
|
||
<div class="remark">
|
||
<!-- 备注 -->
|
||
<textarea
|
||
v-model="remark"
|
||
class="textarea"
|
||
style="width: 100%; height: 100%"
|
||
maxlength="50"
|
||
placeholder="请输入备注（选填）"
|
||
/>
|
||
</div>
|
||
<div class="Confirm" @click="Confirm()">确认</div>
|
||
<div class="Reset" @click="Reset()">重置</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-drawer>
|
||
<!-- 选择我的主播弹窗 -->
|
||
<el-dialog v-model="myAnchorDialogVisible" center title="选择我的主播库主播" width="800" align-center>
|
||
<div class="myanchor-content">
|
||
<div class="myanchor-list">
|
||
<div
|
||
class="anchor-library-card"
|
||
v-for="(item, index) in anchorLibrary"
|
||
:key="index"
|
||
@click="selectStreamerLibrary(item)"
|
||
>
|
||
<div class="card-content" :style="{ backgroundImage: item == selectAnchor ? '' : '',background: item == selectAnchor ? '#FFFBFA' : '',border: item == selectAnchor ? '1px solid #F4D0C9' : ''}">
|
||
<div class="card-avatar">
|
||
<img
|
||
style="width: 100%; height: 100%; border-radius: 100px"
|
||
:src="item.headerIcon"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div class="personalInformation">
|
||
<div class="name">{{ item.anchorId }}</div>
|
||
<div class="GenderAndCountry">
|
||
<div
|
||
class="Gender"
|
||
:style="{
|
||
background: item.gender == 1 ? '#59D8DB' : '#F3876F',
|
||
}"
|
||
>
|
||
{{ item.gender == 1 ? "男" : "女" }}
|
||
</div>
|
||
<div class="Country">{{ item.country }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="myanchor-dialog-btn">
|
||
<div class="myAnchorDialogReset" @click="myAnchorDialogVisible = false">取消</div>
|
||
<div class="myAnchorDialogConfirm" @click="myAnchorDialogConfirm()">确认</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog v-model="settingsVisible" center title="设置" width="800" align-center>
|
||
<div class="settings-content">
|
||
<!-- 头像设置 -->
|
||
<div class="avatar-setting">
|
||
<el-upload class="avatar-uploader"
|
||
action="http://192.168.1.174:8086/file/uploadHeadIcon"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess"
|
||
:before-upload="beforeAvatarUpload"
|
||
:headers="headers"
|
||
>
|
||
<img :src="avatar" class="avatar" />
|
||
</el-upload>
|
||
<div class="Hint">点击上方头像修改头像</div>
|
||
</div>
|
||
<!-- 昵称设置 -->
|
||
<div class="nickname-setting">
|
||
<input type="text" class="nickname-input" v-model="info.nickName" @blur="handleNickNameChange"/>
|
||
<div class="Hint">点击输入修改昵称</div>
|
||
</div>
|
||
<div class="email-setting" @click="ResendEmail" v-if="info.mailVerification == 1">
|
||
<div v-if="isResendEmail == 0">
|
||
向（{{info.email}}）重发邮箱验证
|
||
</div>
|
||
<div v-if="isResendEmail == 1">
|
||
{{timeLeft}}
|
||
</div>
|
||
</div>
|
||
<!-- 邮箱设置 -->
|
||
<div class="email-setting" @click="emailVisiblefu">修改邮箱（{{info.email}}）</div>
|
||
<!-- 密码设置 -->
|
||
<div class="password-setting"@click="passwordVisiblefn">修改密码</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 修改密码弹窗 -->
|
||
<el-dialog v-model="passwordVisible" center title="修改密码" width="600" align-center>
|
||
<div class="password-content">
|
||
<el-input
|
||
type="password"
|
||
v-model="password"
|
||
placeholder="请输入旧密码"
|
||
size="large"
|
||
class="password-input"
|
||
show-password
|
||
/>
|
||
<el-input
|
||
type="password"
|
||
v-model="newPassword"
|
||
placeholder="请输入新密码"
|
||
size="large"
|
||
class="password-input"
|
||
show-password
|
||
/>
|
||
<el-input
|
||
type="password"
|
||
v-model="confirmPassword"
|
||
placeholder="请确认新密码"
|
||
size="large"
|
||
class="password-input"
|
||
show-password
|
||
/>
|
||
<div class="password-btn" @click="changePassword()">确定</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 修改邮箱弹窗 -->
|
||
<el-dialog v-model="emailVisible" center title="修改邮箱" width="600" align-center>
|
||
<div class="password-content">
|
||
<div class="email-content">
|
||
<div class="emailNumber">
|
||
{{ info.email }}
|
||
</div>
|
||
<div class="email-input">
|
||
<el-input type="text" size="large" class="input-item" v-model="Email" placeholder="请输入旧邮箱验证码" />
|
||
<div class="email-Verification-btn" @click="sendEmail()">
|
||
|
||
<div class="email-Verification-btn-text" v-if="isSendEmail == 0">
|
||
获取验证码
|
||
</div>
|
||
|
||
<div id="timer" class="email-Verification-btn-text" v-else-if="isSendEmail == 1">
|
||
<!-- 倒计时 -->
|
||
{{ timeLeft }}S
|
||
</div>
|
||
|
||
<div class="email-Verification-btn-text" v-else-if="isSendEmail == 2">
|
||
重新发送
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="newEmail">
|
||
<el-input type="text" size="large" class="newEmail-item" v-model="newEmail" placeholder="请输入新邮箱" />
|
||
</div>
|
||
<div class="email-btn" @click="changeEmail()">
|
||
修改
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useRouter } from 'vue-router';
|
||
import { setStorage , getStorage , getPromiseStorage,clearStorage} from '@/utils/storage.js';
|
||
import { UserStore } from '@/stores/notice'
|
||
import { ElMessage } from "element-plus";
|
||
import { ElLoading } from "element-plus";
|
||
import {
|
||
getAnchorList,
|
||
releasePkInfo,
|
||
getAnchorAvatar,
|
||
signIn,
|
||
editUserInfo,
|
||
resendEmail,
|
||
editEmail,
|
||
getUserInfo,
|
||
logout
|
||
} from "@/api/account";
|
||
import {
|
||
ref, // 响应式基础
|
||
watch, // 侦听器
|
||
onMounted, // 组件挂载完成后执行
|
||
onBeforeMount, // 组件挂载前执行
|
||
onUpdated, // 组件更新后执行
|
||
onUnmounted, // 组件销毁前执行
|
||
reactive
|
||
} from "vue";
|
||
import { getCountryNamesArray } from "../utils/countryUtil";
|
||
import {
|
||
goEasyGetConversations,
|
||
goEasyDisConnect,
|
||
} from "@/utils/goeasy.js";
|
||
import { goeasy } from "../main";
|
||
import GoEasy from "goeasy";
|
||
var im = goeasy.im;
|
||
const info = ref({}); // 用户信息
|
||
const avatar = ref(null); //头像
|
||
const country = ref([]);
|
||
country.value = getCountryNamesArray(); //国家条目
|
||
const genderOptions = [
|
||
{ value: 1, label: "男" },
|
||
{ value: 2, label: "女" },
|
||
]; // 性别选项
|
||
const gendervalue = ref(null); // 性别值
|
||
const countryvalue = ref(null); //国家
|
||
const anchorName = ref(null); // 主播名称
|
||
const AnchorProfilePicture = ref(""); // 主播头像
|
||
const timevalue = ref(null); // PK时间
|
||
const goldvalue = ref(null); // 金币数
|
||
const sessionnum = ref(null); // 场次
|
||
const remark = ref(null); // 备注
|
||
const Avatarlist = [
|
||
{
|
||
name:'签到',
|
||
id:1
|
||
},
|
||
{
|
||
name: '设置',
|
||
id: 2,
|
||
},
|
||
{
|
||
name: '联系客服(点击复制邮箱)',
|
||
id: 3,
|
||
},
|
||
{
|
||
name: '退出登录',
|
||
id: 4,
|
||
}
|
||
]
|
||
const NavigationModule = [
|
||
{
|
||
name: 'PK',
|
||
id: 1,
|
||
path: '/nav/PK',
|
||
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Pk.png',
|
||
Selectedicon:'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/SelectPKpage.png'
|
||
},
|
||
{
|
||
name: '站内信',
|
||
id: 2,
|
||
path: '/nav/Forum',
|
||
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Forum.png',
|
||
Selectedicon:'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Selectinsitemessagepage.png'
|
||
},
|
||
{
|
||
name: '消息',
|
||
id: 3,
|
||
path: '/nav/Message',
|
||
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Message.png',
|
||
Selectedicon:'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Selectmessagepage.png'
|
||
},
|
||
{
|
||
name: '我的',
|
||
id: 4,
|
||
path: '/nav/Mine',
|
||
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Mine.png',
|
||
Selectedicon:'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Mypagehasbeenselected.png'
|
||
},
|
||
{
|
||
id: 5,
|
||
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/push.png',
|
||
Selectedicon:'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Pk.png',
|
||
}
|
||
|
||
]
|
||
const drawer = ref(false)// 添加新PK弹窗
|
||
const activeId = ref(1);//选中的导航id
|
||
const router = useRouter();
|
||
const myAnchorDialogVisible = ref(false); // 选择我的主播弹窗
|
||
const selectAnchor = ref(null); // 选择的主播
|
||
const anchorLibrary = ref([]); // 主播库
|
||
const settingsVisible = ref(false); // 设置弹窗
|
||
const passwordVisible = ref(false); // 修改密码弹窗
|
||
const password = ref(''); // 旧密码
|
||
const newPassword = ref(''); // 新密码
|
||
const confirmPassword = ref(''); // 确认新密码
|
||
const emailVisible = ref(false); // 修改邮箱弹窗
|
||
const Email = ref(''); // 邮箱验证码
|
||
const isSendEmail = ref(0); // 是否发送邮箱验证码
|
||
const isResendEmail = ref(0); // 是否重发邮箱验证
|
||
const timeLeft = ref(60); // 倒计时
|
||
const newEmail = ref(''); // 新邮箱
|
||
const chatList = ref({
|
||
unreadTotal: 0,
|
||
}); // 会话列表
|
||
|
||
//监听会话消息
|
||
function onConversationsUpdated(conversations) {
|
||
chatList.value = conversations;
|
||
if (chatList.value.unreadTotal != 0) {
|
||
initNotification();
|
||
}
|
||
}
|
||
//谷歌通知提醒
|
||
function initNotification() {
|
||
if (Notification.permission !== "granted") {
|
||
Notification.requestPermission().then(showNotification);
|
||
} else {
|
||
showNotification();
|
||
}
|
||
}
|
||
|
||
function showNotification() {
|
||
const notification = new Notification("新消息到达", {
|
||
body: "您有 "+ chatList.value.unreadTotal +" 封未读消息",
|
||
lang: "zh-CN", // 语言
|
||
});
|
||
notification.addEventListener('click', () => {
|
||
window.location.href = "https://pk.webapp.yolozs.com/nav/Message";
|
||
});
|
||
}
|
||
|
||
//获取会话列表
|
||
function getChatList() {
|
||
goEasyGetConversations().then((res) => {
|
||
chatList.value = res.content;
|
||
}).catch((err) => {});
|
||
}
|
||
|
||
//重发邮箱验证
|
||
function ResendEmail() {
|
||
if (isResendEmail.value == 1) {
|
||
return;
|
||
}
|
||
resendEmail({
|
||
mailAddress: info.value.email,
|
||
type: 2,
|
||
}).then(res => {
|
||
isResendEmail.value = 1;
|
||
setInterval(startCountdown, 1000);
|
||
}).catch((err) => {});
|
||
}
|
||
|
||
//修改新邮箱
|
||
function changeEmail() {
|
||
if (Email.value == null || Email.value == "") {
|
||
ElMessage.error("请输入邮箱验证码");
|
||
return;
|
||
}
|
||
if (newEmail.value == null || newEmail.value == "") {
|
||
ElMessage.error("请输入新邮箱");
|
||
return;
|
||
}
|
||
// 邮箱验证
|
||
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||
if (!emailRegex.test(newEmail.value)) {
|
||
ElMessage.error("请输入有效的邮箱地址");
|
||
return;
|
||
}
|
||
editEmail({
|
||
mailAddress: newEmail.value,
|
||
code: Email.value,
|
||
}).then(res => {
|
||
ElMessage.success("修改成功,请至新邮箱中验证邮箱");
|
||
emailVisible.value = false;
|
||
UserInfo();
|
||
}).catch((err) => {});
|
||
}
|
||
|
||
//获取验证码
|
||
function sendEmail() {
|
||
if (isSendEmail.value == 1) {
|
||
return;
|
||
}
|
||
resendEmail({
|
||
mailAddress: info.value.email,
|
||
type: 4,
|
||
}).then(res => {
|
||
isSendEmail.value = 1;
|
||
setInterval(startCountdown, 1000);
|
||
}).catch((err) => {});
|
||
}
|
||
|
||
function startCountdown() {
|
||
if(timeLeft.value > 0) {
|
||
timeLeft.value--;
|
||
} else {
|
||
isSendEmail.value = 2;
|
||
isResendEmail.value = 0;
|
||
timeLeft.value = 60;
|
||
}
|
||
}
|
||
//打开修改邮箱弹窗
|
||
function emailVisiblefu() {
|
||
if (info.value.mailVerification == 1) {
|
||
ElMessage.error("您暂时无法修改邮箱，请先验证邮箱,如果已经验证请刷新页面");
|
||
return;
|
||
}
|
||
emailVisible.value = true;
|
||
}
|
||
// 打开修改密码弹窗
|
||
function passwordVisiblefn() {
|
||
if (info.value.mailVerification == 1) {
|
||
ElMessage.error("您暂时无法修改密码，请先验证邮箱,如果已经验证请刷新页面");
|
||
return;
|
||
}
|
||
passwordVisible.value = true;
|
||
}
|
||
|
||
// 修改密码
|
||
function changePassword() {
|
||
if (password.value == null || password.value == "") {
|
||
ElMessage.error("请输入旧密码");
|
||
return;
|
||
}
|
||
if (newPassword.value == null || newPassword.value == "") {
|
||
ElMessage.error("请输入新密码");
|
||
return;
|
||
}
|
||
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,16}$/;
|
||
if (!passwordRegex.test(newPassword.value)) {
|
||
ElMessage.error("密码必须包含大小写字母和数字，长度6-16位");
|
||
return;
|
||
}
|
||
if (confirmPassword.value == null || confirmPassword.value == "") {
|
||
ElMessage.error("请确认新密码");
|
||
return;
|
||
}
|
||
if (newPassword.value !== confirmPassword.value) {
|
||
ElMessage.error("两次密码输入不一致");
|
||
return;
|
||
}
|
||
editUserInfo({
|
||
id: info.value.id,
|
||
newPassword:newPassword.value,
|
||
confirmPassword: confirmPassword.value,
|
||
oldPassword: password.value,
|
||
}).then(res => {
|
||
passwordVisible.value = false;
|
||
ElMessage.success("修改成功");
|
||
}).catch((err) => {});
|
||
}
|
||
//修改昵称
|
||
function handleNickNameChange() {
|
||
editUserInfo({
|
||
id: info.value.id,
|
||
nickName: info.value.nickName,
|
||
}).then(res => {
|
||
setStorage("user", res);
|
||
ElMessage.success("修改成功");
|
||
UserInfo();
|
||
}).catch((err) => {});
|
||
}
|
||
// 上传头像
|
||
const headers = {
|
||
token: getStorage("token")
|
||
}
|
||
const handleAvatarSuccess = (
|
||
response,
|
||
uploadFile
|
||
) => {
|
||
avatar.value = URL.createObjectURL(uploadFile.raw)
|
||
editUserInfo({
|
||
id: info.value.id,
|
||
headerIcon: response.data.filename,
|
||
}).then(res => {
|
||
setStorage("user", res);
|
||
ElMessage.success("修改成功");
|
||
UserInfo();
|
||
}).catch((err) => {});
|
||
}
|
||
|
||
const beforeAvatarUpload = (rawFile) => {
|
||
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png'){
|
||
ElMessage.error('请上传 jpg/png 格式的图片')
|
||
return false
|
||
} else if (rawFile.size / 1024 / 1024 > 2) {
|
||
ElMessage.error('图片大小不能超过2M')
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
|
||
|
||
|
||
//输入框失去焦点
|
||
function handleChange() {
|
||
if (anchorName.value == null || anchorName.value == "") {
|
||
ElMessage.error("请输入主播名称");
|
||
return;
|
||
}
|
||
const loading = ElLoading.service({
|
||
lock: true,
|
||
text: "查询主播中....",
|
||
background: "rgba(0, 0, 0, 0.7)",
|
||
});
|
||
getAnchorAvatar({ name: anchorName.value })
|
||
.then((res) => {
|
||
loading.close();
|
||
AnchorProfilePicture.value = res;
|
||
ElMessage.success("查询成功");
|
||
})
|
||
.catch((err) => {
|
||
loading.close();
|
||
});
|
||
}
|
||
// 确认发布
|
||
function Confirm() {
|
||
const currentTime = Date.now();
|
||
if (anchorName.value == null || anchorName.value == "") {
|
||
ElMessage.error("请输入主播名称");
|
||
return;
|
||
}
|
||
if (gendervalue.value == null || gendervalue.value == "") {
|
||
ElMessage.error("请选择性别");
|
||
return;
|
||
}
|
||
if (timevalue.value == null || timevalue.value == "") {
|
||
ElMessage.error("请选择PK时间");
|
||
return;
|
||
}
|
||
if (currentTime > timevalue.value) {
|
||
ElMessage.error("PK时间不能早于当前时间");
|
||
return;
|
||
}
|
||
if (countryvalue.value == null || countryvalue.value == "") {
|
||
ElMessage.error("请选择国家");
|
||
return;
|
||
}
|
||
if (goldvalue.value == null || goldvalue.value == "") {
|
||
ElMessage.error("请输入金币数");
|
||
return;
|
||
}
|
||
if (sessionnum.value == null || sessionnum.value == "") {
|
||
ElMessage.error("请输入场次");
|
||
return;
|
||
}
|
||
releasePkInfo({
|
||
anchorId: anchorName.value,
|
||
pkTime: timevalue.value / 1000,
|
||
sex: gendervalue.value,
|
||
country: countryvalue.value,
|
||
coin: goldvalue.value,
|
||
remark: remark.value,
|
||
status: 0,
|
||
senderId: info.value.id,
|
||
anchorIcon: AnchorProfilePicture.value,
|
||
pkNumber: sessionnum.value,
|
||
})
|
||
.then((res) => {
|
||
ElMessage.success("发布成功");
|
||
Reset();
|
||
drawer.value = false;
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
}
|
||
|
||
// 重置
|
||
function Reset() {
|
||
anchorName.value = null;
|
||
gendervalue.value = null;
|
||
timevalue.value = null;
|
||
goldvalue.value = null;
|
||
sessionnum.value = null;
|
||
remark.value = null;
|
||
countryvalue.value = null;
|
||
}
|
||
|
||
// 选择我的主播弹窗确认
|
||
function myAnchorDialogConfirm() {
|
||
if (selectAnchor.value == null) {
|
||
ElMessage.error("请选择主播");
|
||
return;
|
||
}
|
||
AnchorProfilePicture.value = selectAnchor.value.headerIcon.split("/").pop();
|
||
anchorName.value = selectAnchor.value.anchorId;
|
||
gendervalue.value = selectAnchor.value.gender;
|
||
countryvalue.value = selectAnchor.value.country;
|
||
myAnchorDialogVisible.value = false;
|
||
}
|
||
// 选择主播库主播
|
||
function selectStreamerLibrary(item) {
|
||
selectAnchor.value = item;
|
||
}
|
||
|
||
//获取主播库
|
||
function getAnchorLibrary() {
|
||
getAnchorList(
|
||
{
|
||
id: info.value.id
|
||
}
|
||
).then(res => {
|
||
anchorLibrary.value = res;
|
||
}).catch((err) => {});
|
||
}
|
||
|
||
//侧边导航
|
||
function handleClick(path, id) {
|
||
if (id === 5) {
|
||
drawer.value = true;
|
||
}else{
|
||
activeId.value = id;
|
||
setStorage('activeId', id);
|
||
router.push(path);
|
||
}
|
||
}
|
||
// 复制到剪切板
|
||
function copyToClipboard(text) {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
ElMessage.success("邮箱地址已复制到剪切板");
|
||
}).catch(err => {
|
||
ElMessage.error("复制失败，请手动复制");
|
||
console.error('复制失败: ', err);
|
||
});
|
||
}
|
||
//头像弹出框
|
||
function popoverClick(id) {
|
||
if (id === 1) {
|
||
// 签到
|
||
setsignIn()
|
||
}else if (id === 2) {
|
||
// 设置
|
||
UserInfo();
|
||
settingsVisible.value = true;
|
||
}else if (id === 3) {
|
||
// 联系客服
|
||
copyToClipboard('PK@TikTok0.xyz')
|
||
}else if (id === 4) {
|
||
// 退出登录
|
||
router.push('/')
|
||
logout({
|
||
id: info.value.id,
|
||
}).then(res => {
|
||
goEasyDisConnect().then(() => {
|
||
ElMessage.success("退出登录成功");
|
||
clearStorage("user")
|
||
clearStorage("token")
|
||
clearStorage("activeId")
|
||
}).catch((err) => {});
|
||
}).catch((err) => {});
|
||
}
|
||
|
||
}
|
||
//签到
|
||
function setsignIn() {
|
||
signIn({
|
||
userId: info.value.id,
|
||
}).then(res => {
|
||
ElMessage.success("签到成功");
|
||
}).catch((err) => {});
|
||
}
|
||
|
||
//获取用户数据
|
||
function UserInfo() {
|
||
getUserInfo({
|
||
id: info.value.id,
|
||
}).then(res => {
|
||
info.value = res;
|
||
setStorage("user", res);
|
||
if (info.value.status == 2) {
|
||
router.push('/ActivateEmail')
|
||
}
|
||
if (info.value.mailVerification == 1) {
|
||
ElMessage.error("邮箱未验证,请至设置验证邮箱，如果已经验证请刷新页面");
|
||
}
|
||
}).catch((err) => {});
|
||
}
|
||
|
||
const refname = ref('');
|
||
|
||
watch(refname, async (newQuestion, oldQuestion) => {
|
||
// 变化后执行
|
||
});
|
||
onMounted(() => {
|
||
getPromiseStorage('activeId').then(res => {
|
||
activeId.value = res || 1;
|
||
}).catch((err) => {});
|
||
getPromiseStorage('user').then(res => {
|
||
info.value = res;
|
||
avatar.value = info.value.headerIcon;
|
||
getAnchorLibrary()
|
||
UserInfo();
|
||
}).catch((err) => {});
|
||
|
||
setTimeout(() => {
|
||
getChatList();
|
||
im.on(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, onConversationsUpdated);
|
||
}, 1000);
|
||
});
|
||
onBeforeMount(()=>{
|
||
// 组件挂载前执行
|
||
});
|
||
onUpdated(() => {
|
||
// 组件更新后执行
|
||
});
|
||
onUnmounted(() => {
|
||
// 组件销毁前执行
|
||
});
|
||
</script>
|
||
<style scoped lang="less">
|
||
.app-aside{
|
||
width: 100%;
|
||
height: 95%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content:space-between;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
.logo{
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-top: 20px;
|
||
border-radius: 10px;
|
||
}
|
||
.logo-img{
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 10px;
|
||
}
|
||
.Avatar{
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50px;
|
||
background-color: #ffffff;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.Avatar:hover{
|
||
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.08);
|
||
opacity: 0.8;
|
||
}
|
||
.Avatar-content{
|
||
width: 100%;
|
||
height: 250px;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
.Avatar-content-name{
|
||
width: 100%;
|
||
height: 50px;
|
||
color: @font-color;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
font-weight: bold;
|
||
border-bottom: 1px solid @border-color;
|
||
white-space: nowrap; /* 防止换行 */
|
||
overflow: hidden; /* 隐藏溢出内容 */
|
||
text-overflow: ellipsis;
|
||
}
|
||
.Avatar-content-btn{
|
||
width: 100%;
|
||
height: calc(100% - 50px);
|
||
}
|
||
.Avatar-list{
|
||
width: 100%;
|
||
height: 50px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transition: all 0.3s ease;
|
||
color: @Prompt-text-color;
|
||
font-size: 16px;
|
||
}
|
||
.Avatar-list:hover{
|
||
background-color: #f5f5f5;
|
||
}
|
||
.Avatar-img{
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.Avatar-img:hover{
|
||
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.08);
|
||
opacity: 0.8;
|
||
}
|
||
.Navigation{
|
||
width: 100%;
|
||
height: 75%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.Navigation-card{
|
||
position: relative;
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 30px;
|
||
transition: all 0.3s ease;
|
||
background-size: 100% 100%;
|
||
}
|
||
.Navigation-card-icon{
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
.Navigation-card-icon-img{
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
.Navigation-card-name{
|
||
font-size: 12px;
|
||
color:@Prompt-text-color;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.redDot{
|
||
padding: 3px 6px 3px 6px;
|
||
border-radius: 50px;
|
||
background-color: #ff0000;
|
||
color: #ffffff;
|
||
font-size: 10px;
|
||
position: absolute;
|
||
top: -10px;
|
||
right: -10px;
|
||
text-align: center;
|
||
line-height: 10px;
|
||
}
|
||
|
||
.Navigation-card:hover{
|
||
transform: scale(1.1);
|
||
opacity: 0.8;
|
||
background-color: #ffffff;
|
||
}
|
||
.demo-panel {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.add-anchor-library {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.titleimg {
|
||
width: 44px;
|
||
height: 30px;
|
||
}
|
||
.title {
|
||
width: 80%;
|
||
height: 70px;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
text-align: center;
|
||
line-height: 70px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
}
|
||
.add-anchor-library-content {
|
||
width: 100%;
|
||
height: calc(100% - 70px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.input-name {
|
||
width: 85%;
|
||
height: 50px;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
}
|
||
.input-name-input {
|
||
width: 60%;
|
||
height: 40px;
|
||
}
|
||
.myanchor {
|
||
width: 40%;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.myanchor-btn {
|
||
width: 85%;
|
||
height: 40px;
|
||
border-radius: 5px;
|
||
font-size: 14px;
|
||
background: linear-gradient(to right, #4FCACD, #5FDBDE);
|
||
text-align: center;
|
||
line-height: 40px;
|
||
transition: all 0.4s ease;
|
||
color: #ffffff;
|
||
}
|
||
.myanchor-btn:hover {
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.05);
|
||
}
|
||
.country {
|
||
width: 85%;
|
||
height: 50px;
|
||
margin-top: 20px;
|
||
}
|
||
.gender {
|
||
width: 85%;
|
||
height: 50px;
|
||
margin-top: 20px;
|
||
}
|
||
.select {
|
||
width: 100%;
|
||
}
|
||
.timeselect {
|
||
width: 85%;
|
||
height: 40px;
|
||
margin-top: 20px;
|
||
}
|
||
.Gold-sessions {
|
||
width: 85%;
|
||
height: 50px;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.Goldcoinbox-right{
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.Goldcoinbox-text {
|
||
font-size: 12px;
|
||
color: @Prompt-text-color;
|
||
}
|
||
.remark {
|
||
margin-top: 30px;
|
||
width: 90%;
|
||
height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// margin-top: 10px;
|
||
}
|
||
.textarea {
|
||
width: 90%;
|
||
height: 90%;
|
||
max-height: 90%;
|
||
border: 1px solid #4fcacd;
|
||
border-radius: 10px;
|
||
outline: none;
|
||
overflow: hidden;
|
||
background-color: #ff000000;
|
||
font-size: 16px;
|
||
margin-left: 5px;
|
||
margin-right: 5px;
|
||
color: #000000;
|
||
letter-spacing: 1px;
|
||
resize: none;
|
||
}
|
||
.Confirm {
|
||
width: 85%;
|
||
height: 50px;
|
||
margin-top: 100px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
background: linear-gradient(0deg, #4FCACD, #5FDBDE);
|
||
color: #ffffff;
|
||
font-size: 20px;
|
||
transition: all 0.4s ease;
|
||
border-radius: 100px;
|
||
|
||
}
|
||
.Confirm:hover {
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.1);
|
||
opacity: 0.8;
|
||
}
|
||
.Confirm:active {
|
||
transition: all 0.1s ease;
|
||
transform: scale(0.95) !important;
|
||
}
|
||
.myAnchorDialogConfirm{
|
||
width: 300px;
|
||
height: 50px;
|
||
margin-top: 30px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
background: linear-gradient(0deg, #4FCACD, #5FDBDE);
|
||
color: #ffffff;
|
||
font-size: 20px;
|
||
transition: all 0.4s ease;
|
||
border-radius: 100px;
|
||
|
||
}
|
||
.myAnchorDialogConfirm:hover {
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.1);
|
||
opacity: 0.8;
|
||
}
|
||
.myAnchorDialogConfirm:active {
|
||
transition: all 0.1s ease;
|
||
transform: scale(0.95) !important;
|
||
}
|
||
.Reset {
|
||
width: 85%;
|
||
height: 50px;
|
||
margin-top: 30px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
background: linear-gradient(0deg, #E4FFFF, #ffffff);
|
||
color:#03ABA8;
|
||
font-size: 20px;
|
||
transition: all 0.4s ease;
|
||
border-radius: 100px;
|
||
border: 1px solid #4FCACD;
|
||
}
|
||
.Reset:hover {
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.1);
|
||
opacity: 0.8;
|
||
}
|
||
.Reset:active {
|
||
transition: all 0.1s ease;
|
||
transform: scale(0.95) !important;
|
||
}
|
||
.myAnchorDialogReset{
|
||
width: 300px;
|
||
height: 50px;
|
||
margin-top: 30px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
background: linear-gradient(0deg, #E4FFFF, #ffffff);
|
||
color:#03ABA8;
|
||
font-size: 20px;
|
||
transition: all 0.4s ease;
|
||
border-radius: 100px;
|
||
border: 1px solid #4FCACD;
|
||
}
|
||
.myAnchorDialogReset:hover {
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.1);
|
||
opacity: 0.8;
|
||
}
|
||
.myAnchorDialogReset:active {
|
||
transition: all 0.1s ease;
|
||
transform: scale(0.95) !important;
|
||
}
|
||
.myanchor-content {
|
||
width: 100%;
|
||
height: 600px;
|
||
}
|
||
.myanchor-list {
|
||
width: 100%;
|
||
height: 500px;
|
||
background-color: #e0f4f1;
|
||
border-radius: 16px;
|
||
border: 1px solid #4fcacd;
|
||
overflow: auto;
|
||
}
|
||
.myanchor-list::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.anchor-library-card {
|
||
width: 100%;
|
||
height: 150px;
|
||
margin-bottom: 15px;
|
||
margin-top: 15px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.card-content {
|
||
width: 90%;
|
||
height: 100%;
|
||
border-radius: 10px;
|
||
background-image: url(@/assets/PKbackground.png);
|
||
background-size: 100% 100%;
|
||
transition: all 0.4s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.card-content:hover {
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.08);
|
||
opacity: 0.8;
|
||
}
|
||
.card-avatar {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
background-color: #ffffff;
|
||
margin-left: 20px;
|
||
}
|
||
.personalInformation {
|
||
width: calc(100% - 340px);
|
||
height: 100px;
|
||
margin-left: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.name {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
.GenderAndCountry {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.Gender {
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
border-radius: 50px;
|
||
padding: 5px 20px 5px 20px;
|
||
margin-right: 20px;
|
||
line-height: 100%;
|
||
}
|
||
.Country {
|
||
font-size: 16px;
|
||
color: #03aba8;
|
||
border-radius: 50px;
|
||
background-color: #e4f9f9;
|
||
padding: 2px 20px 2px 20px;
|
||
}
|
||
.myanchor-dialog-btn {
|
||
width: 100%;
|
||
height: 100px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.settings-content{
|
||
width: 100%;
|
||
height: 700px;
|
||
background-image: linear-gradient(180deg, #dbf0f1, #ffffff);
|
||
border-radius: 16px;
|
||
border: 1px solid #4fcacd;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
.avatar-uploader .avatar {
|
||
width: 178px;
|
||
height: 178px;
|
||
border-radius: 10px;
|
||
margin-top: 50px;
|
||
}
|
||
.avatar-setting{
|
||
width: 178px;
|
||
}
|
||
.Hint{
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #999999;
|
||
font-size: 12px;
|
||
}
|
||
.nickname-setting{
|
||
width: 500px;
|
||
height: 50px;
|
||
margin-top: 30px;
|
||
}
|
||
.nickname-input{
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
background: none;
|
||
border-bottom: 1px solid #4fcacd;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
}
|
||
.nickname-input:focus{
|
||
outline: none;
|
||
}
|
||
.email-setting{
|
||
width: 500px;
|
||
height: 50px;
|
||
margin-top: 60px;
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
background: linear-gradient(0deg, #4FCACD, #5FDBDE);
|
||
border-radius: 50px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
color: #ffffff;
|
||
transition: all 0.4s ease;
|
||
}
|
||
.email-setting:hover{
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.05);
|
||
opacity: 0.8;
|
||
}
|
||
.email-setting:active {
|
||
transition: all 0.1s ease;
|
||
transform: scale(0.95) !important;
|
||
}
|
||
.password-setting{
|
||
width: 500px;
|
||
height: 50px;
|
||
margin-top: 50px;
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
background: linear-gradient(0deg, #E4FFFF, #ffffff);
|
||
border-radius: 50px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
color: #03ABA8;
|
||
border: 1px solid #4FCACD;
|
||
transition: all 0.4s ease;
|
||
}
|
||
.password-setting:active {
|
||
transition: all 0.1s ease;
|
||
transform: scale(0.95) !important;
|
||
}
|
||
.password-setting:hover{
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.05);
|
||
opacity: 0.8;
|
||
}
|
||
.password-content{
|
||
width: 100%;
|
||
height: 500px;
|
||
background-image: linear-gradient(180deg, #dbf0f1, #ffffff);
|
||
border-radius: 16px;
|
||
border: 1px solid #4fcacd;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
.password-input{
|
||
width: 500px;
|
||
height: 50px;
|
||
margin-top: 50px;
|
||
}
|
||
.password-btn{
|
||
width: 500px;
|
||
height: 50px;
|
||
margin-top: 50px;
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
background: linear-gradient(0deg, #E4FFFF, #ffffff);
|
||
border-radius: 50px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
color: #03ABA8;
|
||
border: 1px solid #4FCACD;
|
||
transition: all 0.4s ease;
|
||
}
|
||
.password-btn:active {
|
||
transition: all 0.1s ease;
|
||
transform: scale(0.95) !important;
|
||
}
|
||
.password-btn:hover{
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.05);
|
||
opacity: 0.8;
|
||
}
|
||
.email-content{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.emailNumber{
|
||
color: #03ABA8;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin-top: 50px;
|
||
}
|
||
.email-input{
|
||
margin-top: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.email-Verification-btn{
|
||
width: 100px;
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: #03ABA8 1px solid;
|
||
border-radius: 5px;
|
||
margin-left: 10px;
|
||
transition: all 0.4s ease;
|
||
}
|
||
.email-Verification-btn:hover{
|
||
background-color: #03ABA8;
|
||
color: #ffffff;
|
||
transform: scale(1.1);
|
||
opacity: 0.8;
|
||
}
|
||
.email-Verification-btn:active{
|
||
background-color: #03ABA8;
|
||
color: #ffffff;
|
||
transform: scale(0.90) !important;
|
||
}
|
||
.email-btn{
|
||
width: 500px;
|
||
height: 50px;
|
||
margin-top: 50px;
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
background: linear-gradient(0deg, #4FCACD, #5FDBDE);
|
||
border-radius: 50px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
color: #ffffff;
|
||
transition: all 0.4s ease;
|
||
}
|
||
.email-btn:active {
|
||
transition: all 0.1s ease;
|
||
transform: scale(0.95) !important;
|
||
}
|
||
.email-btn:hover{
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.05);
|
||
opacity: 0.8;
|
||
}
|
||
.input-item {
|
||
border: none;
|
||
width: 300px;
|
||
height: 100%;
|
||
background-color: #ffffff00;
|
||
border-bottom: 1px solid #4fcacd;
|
||
}
|
||
.newEmail-item{
|
||
border: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #ffffff00;
|
||
border-bottom: 1px solid #4fcacd;
|
||
}
|
||
// :deep(.el-input__wrapper) {
|
||
// box-shadow: none !important;
|
||
// background-color: transparent !important;
|
||
// }
|
||
// :deep(.el-input__wrapper.is-focus) {
|
||
// box-shadow: none !important;
|
||
// }
|
||
.email-Verification-btn-text{
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
.newEmail{
|
||
margin-top: 50px;
|
||
width: 410px;
|
||
}
|
||
</style>
|