tk-mini-program-PC/src/components/Appaside.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() {
  new Notification("新消息到达", {
    body: "您有 "+ chatList.value.unreadTotal +" 封未读消息",
    lang: "zh-CN", // 语言
    // onClick: () => window.location.href = "/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>