优化代码

postcss.config.js

@@ -1,8 +1,8 @@
 module.exports = {
     plugins: {
         'postcss-px-to-viewport': {
-            viewportWidth: 1600, // 视窗的宽度，对应设计稿宽度
+            viewportWidth: 1920, // 视窗的宽度，对应设计稿宽度
-            viewportHeight: 900, // 视窗的高度，对应设计稿高度
+            viewportHeight: 1080, // 视窗的高度，对应设计稿高度
             unitPrecision: 3, // 指定 px 转换为视窗单位值的小数位数
             viewportUnit: 'vw', // 指定需要转换成的视窗单位，vw 或者 vh
             selectorBlackList: ['.ignore', '.hairlines'], // 指定不需要转换的类

src/api/account.js

@@ -1,13 +1,92 @@
 import { getAxios, postAxios, downFile } from '@/utils/axios.js'
+import axios from 'axios'
+import { ElMessage } from "element-plus";
 //获取vx二维码
 export function getVxQrcode() {
     return getAxios({ url: 'user/qrcode' })
 }
 //获取扫码结果
 export function getScanResult(data) {
-    return getAxios({ url: '/user/check/' + data})
+    return getAxios({ url: 'user/check/' + data})
+}
+//注册
+export function register(data) {
+    return postAxios({ url: 'user/registerWithMail', data })
+}
+//查询验证状态
+export function checkStatus(data) {
+    return postAxios({ url: 'user/getUserInfo', data })
+}
+//重发邮件
+export function resendEmail(data) {
+    return postAxios({ url: 'user/resendMail', data })
 }
 //登录
 export function login(data) {
-    return postAxios({ url: '/api/user/bigbrother-doLogin', data })
+    return postAxios({ url: 'user/loginWithMail', data })
+}
+//获取pk列表
+export function getPkList(data) {
+    return postAxios({ url: 'pk/pkList', data })
+}
+//站内信列表
+export function getNoticeList(data) {
+    return postAxios({ url: 'systemMessage/list', data })
+}
+//主播库列表
+export function getAnchorList(data) {
+    return postAxios({ url: 'anchor/list', data })
+}
+//主播库添加主播
+export function addAnchor(data) {
+    return postAxios({ url: 'anchor/add', data })
+}
+//主播库删除主播
+export function delAnchor(data) {
+    return postAxios({ url: 'anchor/deleteMyAnchor', data })
+    }
+//主播库修改主播
+export function editAnchor(data) {
+    return postAxios({ url: 'anchor/updateAnchorInfo', data })
+}
+//获取主播头像
+export function getAnchorAvatar(data) {
+    const url = "https://python.yolojt.com/api/" + data.name
+    return new Promise((resolve, reject) => {
+        axios.get(
+            url
+        ).then(res => {
+            if (res.code == 200) {
+                resolve(res.data) 
+            }else {
+                reject(res);
+            }
+        }).catch(err => {
+            reject(err)
+        })
+    })
+}
+//获取PK信息
+export function getPkInfo(data) {
+    return postAxios({ url: 'user/queryMyAllPkData', data })
+}
+//发布PK信息
+export function releasePkInfo(data) {
+    return postAxios({ url: 'pk/addPkData', data })
+}
+//修改PK信息
+export function editPkInfo(data) {
+    return postAxios({ url: 'pk/updatePkInfoById', data })
+}
+//删除PK信息
+export function delPkInfo(data) {
+    return postAxios({ url: 'pk/deletePkDataWithId', data })
+}
+//置顶PK信息
+export function topPkInfo(data) {
+    return postAxios({ url: 'user/pinToTop', data })
+}
+//取消置顶PK信息
+export function cancelTopPkInfo(data) {
+    return postAxios({ url: 'user/cancelPin', data })
 }

src/components/Appaside.vue

@@ -5,16 +5,22 @@
     </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 15px rgba(0, 0, 0, 0.3)' : ''}">
+        <div class="Navigation-card" v-for="(item, index) in NavigationModule" :key="index" 
-                <img class="Navigation-card-icon-img" :src="item.icon" alt="">
+        @click="handleClick(item.path, item.id)" 
-            <div class="Navigation-card-name">{{ item.name }}</div>
+        :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>
         
     </div>
     <div class="Avatar" >
-        <el-popover placement="right-end" :width="200" trigger="click">
+        <el-popover placement="right-end" :width="200" trigger="click">-
             <template #reference>
-                <img class="Avatar-img" src="@/assets/logo.png" alt="logo"></img>
+                <img class="Avatar-img" :src="avatar" alt="logo"></img>
             </template>
             <div class="Avatar-content">
                 <!-- 点击头像弹出框内容 -->
@@ -31,7 +37,7 @@
     </div>
  </div>
  <!-- 添加新PK弹窗 -->
- <el-drawer v-model="drawer">
+ <el-drawer size="25%" :with-header="false" v-model="drawer">
      <!-- 添加或修改主播 -->
      <div class="demo-panel">
           <div class="add-anchor-library">
@@ -114,6 +120,7 @@
 <script setup>
 import { useRouter } from 'vue-router';
 import { setStorage , getStorage } from '@/utils/storage.js';
+import { UserStore } from '@/stores/notice'
 const router = useRouter();
 import {
   ref, // 响应式基础
@@ -122,9 +129,12 @@ import {
   onBeforeMount, // 组件挂载前执行
   onUpdated, // 组件更新后执行
   onUnmounted, // 组件销毁前执行
+  reactive 
 } from "vue";
 import { getCountryNamesArray } from "../utils/countryUtil";
 
+const info = ref(null); // 用户信息
+const avatar = ref(null); //头像
 const country = ref([]);
 country.value = getCountryNamesArray(); //国家条目
 const genderOptions = [
@@ -153,29 +163,34 @@ const NavigationModule = [
         name: 'PK',
         id: 1,
         path: '/nav/PK',
-        icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Pk.png'
+        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'
+        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'
+        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'
+        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'
+        icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/push.png',
+        Selectedicon:'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Pk.png',
     }
 
 ]
@@ -202,7 +217,9 @@ watch(refname, async (newQuestion, oldQuestion) => {
   // 变化后执行
 });
 onMounted(() => {
-    activeId.value = Number(getStorage('activeId')) || 1;
+    activeId.value = getStorage('activeId') || 1;
+    info.value = getStorage('user')
+    avatar.value = info.value.headerIcon;
 });
 onBeforeMount(()=>{
     // 组件挂载前执行
@@ -314,6 +331,7 @@ onUnmounted(() => {
     align-items: center;
     margin-top: 30px;
     transition: all 0.3s ease;
+    background-size: 100% 100%;
 }
 .Navigation-card-icon{
     width: 20px;
@@ -362,45 +380,44 @@ onUnmounted(() => {
   align-items: center;
 }
 .input-name {
-  width: 90%;
+  width: 85%;
   height: 50px;
   margin-top: 20px;
   display: flex;
 }
 .input-name-input {
-  width: 50%;
+  width: 60%;
   height: 40px;
 }
 .myanchor {
-  width: 50%;
+  width: 40%;
   height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .myanchor-btn {
-  width: 90%;
+  width: 85%;
-  height: 35px;
+  height: 40px;
   border-radius: 5px;
-  font-size: 16px;
+  font-size: 14px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(to right, #4FCACD, #5FDBDE);
   text-align: center;
-  line-height: 35px;
+  line-height: 40px;
   transition: all 0.4s ease;
-  color: @Prompt-text-color;
+  color: #ffffff;
 }
 .myanchor-btn:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-  transform: scale(1.1);
+  transform: scale(1.05);
-  opacity: 0.8;
 }
 .country {
-  width: 90%;
+  width: 85%;
   height: 50px;
   margin-top: 20px;
 }
 .gender {
-  width: 90%;
+  width: 85%;
   height: 50px;
   margin-top: 20px;
 }
@@ -408,12 +425,12 @@ onUnmounted(() => {
   width: 100%;
 }
 .timeselect {
-  width: 90%;
+  width: 85%;
   height: 40px;
   margin-top: 20px;
 }
 .Gold-sessions {
-  width: 90%;
+  width: 85%;
   height: 50px;
   margin-top: 20px;
   display: flex;
@@ -429,38 +446,38 @@ onUnmounted(() => {
   color: @Prompt-text-color;
 }
 .Confirm {
-  width: 90%;
+  width: 85%;
   height: 50px;
   margin-top: 100px;
   text-align: center;
   line-height: 50px;
-  background-color: #ffffff;
+  background: linear-gradient(0deg, #4FCACD, #5FDBDE);
-  color: @Prompt-text-color;
+  color: #ffffff;
   font-size: 20px;
   transition: all 0.4s ease;
-  border-radius: 20px;
+  border-radius: 100px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+
 }
 .Confirm:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
   transform: scale(1.1);
   opacity: 0.8;
 }
 .Reset {
-  width: 90%;
+  width: 85%;
   height: 50px;
   margin-top: 30px;
   text-align: center;
   line-height: 50px;
-  background-color: #ffffff;
+  background: linear-gradient(0deg, #E4FFFF, #ffffff);
-  color: @Prompt-text-color;
+  color:#03ABA8;
   font-size: 20px;
   transition: all 0.4s ease;
-  border-radius: 20px;
+  border-radius: 100px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  border: 1px solid #4FCACD;
 }
 .Reset:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
   transform: scale(1.1);
   opacity: 0.8;
 }

src/components/mineSubComponent/AnchorLibrary.vue

@@ -12,28 +12,35 @@
           >
             <div class="anchor-library-card" v-for="(item, index) in list" :key="index">
               <div class="card-content">
-                <div class="card-avatar"></div>
+                <div class="card-avatar">
+                  <img
+                    style="width: 100%; height: 100%; border-radius: 100px"
+                    :src="item.headerIcon"
+                    alt=""
+                  />
+                </div>
                 <div class="personalInformation">
-                  <div class="name">来自世界上最长名的国家的某个人</div>
+                  <div class="name">{{ item.anchorId }}</div>
                   <div class="GenderAndCountry">
-                    <div class="Gender">女</div>
+                    <div
-                    <div class="Country">来自世界上最长名的国家的名称很长很长哦</div>
+                      class="Gender"
+                      :style="{
+                        background: item.gender == 1 ? '#59D8DB' : '#F3876F',
+                      }"
+                    >
+                      {{ item.gender == 1 ? "男" : "女" }}
+                    </div>
+                    <div class="Country">{{ item.country }}</div>
                   </div>
                 </div>
                 <div class="card-Operation">
-                  <div class="modify">
+                  <!-- 编辑 -->
-                    <img
+                  <div class="modify" @click="anchormodify(item)">
-                      class="modify-icon"
+                    <img class="modify-icon" src="@/assets/Editor.png" alt="" />
-                      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/recompose.png"
-                      alt=""
-                    />
                   </div>
-                  <div class="delete">
+                  <!-- 删除 -->
-                    <img
+                  <div class="delete" @click="anchordelete(item.id)">
-                      class="delete-icon"
+                    <img class="delete-icon" src="@/assets/Delete.png" alt="" />
-                      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/expurgate.png"
-                      alt=""
-                    />
                   </div>
                 </div>
               </div>
@@ -45,14 +52,21 @@
         <!-- 添加或修改主播 -->
         <div class="demo-panel">
           <div class="add-anchor-library">
-            <div class="title">添加我的主播</div>
+            <div class="title">
-            <!-- <div class="title">
+              <img class="titleimg" src="@/assets/embellish.png" alt="" />
-                    修改主播信息
+              <div v-if="!anchormodifystate">添加我的主播</div>
-                </div> -->
+              <div v-if="anchormodifystate">修改我的主播</div>
+              <img class="titleimg" src="@/assets/embellish.png" alt="" />
+            </div>
             <div class="add-anchor-library-content">
               <div class="input-name">
                 <!-- 主播名称 -->
-                <el-input v-model="anchorName" size="large" placeholder="请输入主播名称" />
+                <el-input
+                  @blur="blur()"
+                  v-model="anchorName"
+                  size="large"
+                  placeholder="请输入主播名称"
+                />
               </div>
               <div class="country">
                 <!-- 国家 -->
@@ -78,14 +92,31 @@
                   class="select"
                 />
               </div>
-              <div class="Confirm">确认</div>
+              <div class="Confirm" @click="Confirm()">确认</div>
-              <div class="Reset">重置</div>
+              <div class="Reset" @click="Reset()">重置</div>
+              <div class="Reset" v-if="anchormodifystate" @click="cancel()">取消</div>
             </div>
           </div>
         </div>
       </el-splitter-panel>
     </el-splitter>
   </div>
+  <!-- 确认删除弹窗 -->
+  <el-dialog
+    class="center-dialog"
+    v-model="centerDialogVisible"
+    title="提示"
+    width="200"
+    align-center
+  >
+    <span>确认删除该主播？</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="deleteAnchor()"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -96,8 +127,17 @@ import {
   onUpdated, // 组件更新后执行
   onUnmounted, // 组件销毁前执行
 } from "vue";
+import {
+  getAnchorList,
+  getAnchorAvatar,
+  addAnchor,
+  delAnchor,
+  editAnchor,
+} from "@/api/account";
 import { getCountryNamesArray } from "../../utils/countryUtil";
-
+import { ElLoading } from "element-plus";
+import { ElMessage } from "element-plus";
+import { setStorage, getStorage, getPromiseStorage } from "@/utils/storage.js";
 const country = ref([]);
 country.value = getCountryNamesArray(); //国家条目
 const genderOptions = [
@@ -105,20 +145,157 @@ const genderOptions = [
   { value: 2, label: "女" },
 ]; // 性别选项
 const gendervalue = ref(null); // 性别值
-const countryvalue = ref(null);//国家
+const countryvalue = ref(null); //国家
-const anchorName = ref(null);// 主播名称
+const anchorName = ref(null); // 主播名称
 const list = ref([{}, {}, {}, {}, {}, {}]);
+const user = ref(null); // 用户信息
+const AnchorProfilePicture = ref(null); // 主播头像
+const centerDialogVisible = ref(false); // 确认删除弹窗
+const anchormodifystate = ref(false); // 编辑
+const anchormodifystateId = ref(null); // 主播头像
 
-function load() {
+// 获取主播列表
-
+function AnchorList() {
+  getAnchorList({ id: user.value.id })
+    .then((res) => {
+      list.value = res;
+    })
+    .catch((err) => {
+      console.log(err);
+    });
 }
-const refname = ref('');
+//编辑主播
+function anchormodify(item) {
+  if (anchormodifystate.value == true) {
+    cancel();
+    return;
+  }
+  anchormodifystateId.value = item.id;
+  anchorName.value = item.anchorId;
+  gendervalue.value = item.gender;
+  countryvalue.value = item.country;
+  AnchorProfilePicture.value = item.headerIcon.split("/").pop();
+  anchormodifystate.value = true;
+}
+// 取消编辑
+function cancel() {
+  anchormodifystateId.value = null;
+  anchorName.value = null;
+  gendervalue.value = null;
+  countryvalue.value = null;
+  AnchorProfilePicture.value = null;
+  anchormodifystate.value = false;
+}
+// 删除主播
+const deleteAnchorID = ref(null);
+const deleteAnchor = () => {
+  delAnchor({ id: deleteAnchorID.value }).then((res) => {
+    centerDialogVisible.value = false;
+    ElMessage.success("删除成功");
+    AnchorList();
+  });
+};
+function anchordelete(id) {
+  deleteAnchorID.value = id;
+  centerDialogVisible.value = true;
+}
+// 加载更多
+function load() {}
+// 确认添加或修改主播
+function Confirm() {
+  if (anchorName.value == null || anchorName.value == "") {
+    ElMessage.error("请输入主播名称");
+    return;
+  }
+  if (gendervalue.value == null) {
+    ElMessage.error("请选择性别");
+    return;
+  }
+  if (countryvalue.value == null) {
+    ElMessage.error("请选择国家");
+    return;
+  }
+  //修改主播还是添加
+  if (anchormodifystate.value) {
+    //修改主播
+    editAnchor({
+      id: anchormodifystateId.value,
+      anchorId: anchorName.value,
+      headerIcon: AnchorProfilePicture.value,
+      gender: gendervalue.value,
+      country: countryvalue.value,
+      createUserId: user.value.id,
+    })
+      .then((res) => {
+        ElMessage.success("修改成功");
+        cancel();
+        AnchorList();
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  } else {
+    //添加主播
+    addAnchor({
+      anchorId: anchorName.value,
+      headerIcon: AnchorProfilePicture.value,
+      gender: gendervalue.value,
+      country: countryvalue.value,
+      createUserId: user.value.id,
+    })
+      .then((res) => {
+        ElMessage.success("添加成功");
+        AnchorList();
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }
+}
+// 重置
+function Reset() {
+  anchorName.value = null;
+  gendervalue.value = null;
+  countryvalue.value = null;
+}
+//输入框失去焦点
+function blur() {
+  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;
+    })
+    .catch((err) => {
+      loading.close();
+      console.log(err);
+    });
+}
+
+// 组件挂载完成后执行
+onMounted(() => {
+  getPromiseStorage("user")
+    .then((res) => {
+      user.value = res;
+      AnchorList();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+});
+
+const refname = ref("");
 watch(refname, async (newQuestion, oldQuestion) => {
   // 变化后执行
 });
-onMounted(() => {
-  // 组件挂载完成后执行
-});
 onUpdated(() => {
   // 组件更新后执行
 });
@@ -153,14 +330,15 @@ onUnmounted(() => {
   height: 100%;
   border-radius: 20px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-  background-image: linear-gradient(45deg, @bg-Sidebar-color-bottom, @bg-color);
+  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.8);
-  transform: scale(1.08);
+  transform: scale(1.05);
   opacity: 0.8;
 }
 .card-avatar {
@@ -190,9 +368,8 @@ onUnmounted(() => {
 }
 .Gender {
   font-size: 16px;
-  color: #666666;
+  color: #ffffff;
   border-radius: 50px;
-  background-color: #ffffff;
   padding: 2px 20px 2px 20px;
   margin-right: 20px;
 }
@@ -215,10 +392,18 @@ onUnmounted(() => {
 .modify-icon {
   width: 30px;
   height: 30px;
+  transition: all 0.4s ease;
+}
+.modify-icon:hover {
+  transform: scale(1.2);
 }
 .delete-icon {
   width: 30px;
   height: 30px;
+  transition: all 0.4s ease;
+}
+.delete-icon:hover {
+  transform: scale(1.2);
 }
 .demo-panel {
   width: 100%;
@@ -232,13 +417,20 @@ onUnmounted(() => {
   align-items: center;
 }
 .title {
-  width: 100%;
+  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;
+}
+.titleimg {
+  width: 44px;
+  height: 30px;
 }
 .add-anchor-library-content {
   width: 100%;
@@ -266,39 +458,41 @@ onUnmounted(() => {
   width: 100%;
 }
 .Confirm {
-  width: 80%;
+  width: 400px;
   height: 50px;
   margin-top: 200px;
   text-align: center;
   line-height: 50px;
-  background-color: #ffffff;
+  background-image: linear-gradient(to top, #4fcacd, #5fdbde);
-  color: @Prompt-text-color;
+  color: #ffffff;
-  font-size: 20px;
+  font-size: 22px;
   transition: all 0.4s ease;
-  border-radius: 20px;
+  border-radius: 25px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 }
 .Confirm:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
   transform: scale(1.1);
   opacity: 0.8;
 }
 .Reset {
-  width: 80%;
+  width: 400px;
   height: 50px;
   margin-top: 30px;
   text-align: center;
   line-height: 50px;
-  background-color: #ffffff;
+  background-image: linear-gradient(to top, #e4ffff, #ffffff);
-  color: @Prompt-text-color;
+  border: 1px solid #4fcacd;
-  font-size: 20px;
+  color: #03aba8;
+  font-size: 22px;
   transition: all 0.4s ease;
-  border-radius: 20px;
+  border-radius: 25px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 }
 .Reset:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
   transform: scale(1.1);
   opacity: 0.8;
 }
+.center-dialog {
+  background-color: #03aba8;
+}
 </style>

src/components/mineSubComponent/PKRecord.vue

@@ -6,16 +6,26 @@
         <div class="demo-panel">
           <!-- 选项卡 -->
           <div class="custom-style">
-            <el-segmented v-model="segmentedvalue" :options="options" block>
+            <div
-              <template #default="scope">
+              class="Options"
-                <div class="flex flex-col items-center gap-2 p-2">
+              v-for="time in options"
-                  <el-icon size="1.5vw">
+              @click="segmentedvalue = time.value"
-                    <component :is="scope.item.icon" />
+              :style="{
-                  </el-icon>
+                borderBottom: segmentedvalue === time.value ? '5px solid #03ABA8' : '',
-                  <div>{{ scope.item.label }}</div>
+              }"
-                </div>
+            >
-              </template>
+              <img
-            </el-segmented>
+                class="Options-icon"
+                :src="segmentedvalue === time.value ? time.SelectedIcon : time.icon"
+                alt=""
+              />
+              <div
+                class="Options-label"
+                :style="{ color: segmentedvalue === time.value ? '#03ABA8' : '#636363' }"
+              >
+                {{ time.label }}
+              </div>
+            </div>
           </div>
           <!-- list -->
           <div class="list" style="overflow: auto" v-infinite-scroll="load">
@@ -29,6 +39,11 @@
                     <div class="name">来自世界上最长名的国家的某个人</div>
                     <div class="time">PK时间：2025-07-31 19:07</div>
                     <div class="gold">
+                      <img
+                        class="goldimg"
+                        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
+                        alt=""
+                      />
                       实际金币数：
                       <div class="gold-num">10000W</div>
                     </div>
@@ -46,6 +61,11 @@
                     <div class="name">来自世界上最长名的国家的某个人</div>
                     <div class="time">PK时间：2025-07-31 19:07</div>
                     <div class="gold">
+                      <img
+                        class="goldimg"
+                        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
+                        alt=""
+                      />
                       实际金币数：
                       <div class="gold-num">10000W</div>
                     </div>
@@ -61,29 +81,33 @@
       </el-splitter-panel>
       <el-splitter-panel size="30%" :resizable="false" collapsible>
         <div class="demo-panel">
-          <div class="PKbothinfo">
+          <div class="particularsAvatar">
-            <div class="PKbothinfo-left">
+            <img class="particularsAvatar-avatar" src="" alt="" />
-              <div class="PKbothinfo-avatar">
+            <img class="particularsAvatar-avatar" src="" alt="" />
-                <!-- 头像 -->
+          </div>
-              </div>
+          <!--  -->
-              <div class="PKbothinfo-gold-num">总共：10000W</div>
+          <div class="altogether">
-            </div>
+            <div class="altogethercard">
-            <div class="PKbothinfo-right">
+              <div class="altogether-num">总共：9999999K</div>
-              <div class="PKbothinfo-avatar">
+              <img
-                <!-- 头像 -->
+                class="altogether-icon"
-              </div>
+                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
-              <div class="PKbothinfo-gold-num">总共：10000W</div>
+                alt=""
+              />
+              <div class="altogether-num">总共：9999999K</div>
             </div>
           </div>
-          <div class="PKbothinfo-center" style="overflow: auto">
+          <!--  -->
-            <div
+          <div class="goldlist">
-              class="PKbothinfolist-item"
+            <div class="goldlist-card goldlist-card-left">
-              v-for="(item, index) in PKbothinfolist"
+              <div class="goldlist-list">
-              :key="index"
+                1000w
-            >
+              </div>
-              <div class="PKbothinfolist-content">
+            </div>
-                <div class="gold-left">10000W</div>
+            <div class="goldlist-card goldlist-card-right">
-                <div class="gold-right">10000W</div>
+              <div class="goldlist-list">
+              <!-- <div class="goldlist-list" v-for="(item, index) in list" :key="index" :style="{background:?????? '#D1F6F7' : '#F9DFD9' }"> -->
+                10000000000000000w
               </div>
             </div>
           </div>
@@ -101,30 +125,25 @@ import {
   onUpdated, // 组件更新后执行
   onUnmounted, // 组件销毁前执行
 } from "vue";
-import { Promotion, Tickets } from "@element-plus/icons-vue";
 const refname = ref("");
 const segmentedvalue = ref(1);
 const options = [
   {
     label: "我发布的PK",
     value: 1,
-    icon: Tickets,
+    icon: require("@/assets/Publish.png"),
+    SelectedIcon: require("@/assets/PublishSelected.png"),
   },
   {
     label: "我邀请的PK",
     value: 2,
-    icon: Promotion,
+    icon: require("@/assets/Invitation.png"),
+    SelectedIcon: require("@/assets/InvitationSelected.png"),
   },
 ];
 const list = ref([{}, {}, {}, {}, {}, {}, {}]);
-const PKbothinfolist = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
 function load() {}
-watch(refname, async (newQuestion, oldQuestion) => {
+
-  // 变化后执行
-});
-onMounted(() => {
-  // 组件挂载完成后执行
-});
 onUpdated(() => {
   // 组件更新后执行
 });
@@ -145,22 +164,111 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
 }
-.custom-style .el-segmented {
-  height: 70px;
-  --el-segmented-item-selected-color: var(--el-text-color-primary);
-  --el-segmented-item-selected-bg-color: #4fcbcd3f;
-  // --el-border-radius-base: 20px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
 .custom-style {
-  width: 100%;
+  width: 90%;
+  height: 150px;
+  display: flex;
+
+  .Options {
+    &:first-child {
+      &.active {
+        animation: slideInFromRight 0.3s ease;
+      }
+    }
+    &:last-child {
+      &.active {
+        animation: slideInFromLeft 0.3s ease;
+      }
+    }
+  }
+}
+
+@keyframes slideInFromLeft {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.Options {
+  width: 178px;
+  height: 100px;
+  margin-right: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    background-color: #03aba8;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+  }
+
+  &.active {
+    &::after {
+      transform: translateX(0);
+    }
+  }
+
+  &.left-to-right {
+    &::after {
+      transform: translateX(-100%);
+    }
+    &.active::after {
+      transform: translateX(0);
+    }
+  }
+
+  &.right-to-left {
+    &::after {
+      transform: translateX(100%);
+    }
+    &.active::after {
+      transform: translateX(0);
+    }
+  }
+  display: flex;
+}
+.Options {
+  width: 178px;
+  height: 100px;
+  margin-right: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  align-items: center;
+  justify-content: center;
+}
+.Options-icon {
+  width: 30px;
+  height: 30px;
+  margin-right: 15px;
+}
+.Options-label {
+  font-size: 24px;
 }
 .list {
   width: 100%;
-  height: calc(100% - 70px);
+  height: calc(100% -150px);
 }
 .list-item {
   width: 100%;
@@ -176,7 +284,8 @@ onUnmounted(() => {
   height: 100%;
   border-radius: 20px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-  background-image: linear-gradient(45deg, @bg-Sidebar-color-bottom, @bg-color);
+  background-image: url(../../assets/PKbackground.png);
+  background-size: 100% 100%;
   transition: all 0.4s ease;
   display: flex;
   align-items: center;
@@ -237,6 +346,11 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
 }
+.goldimg {
+  width: 38px;
+  height: 38px;
+  margin-right: 13px;
+}
 .gold-num {
   color: @font-color;
   font-size: 18px;
@@ -271,7 +385,7 @@ onUnmounted(() => {
   border-radius: 50%;
   background-color: #fff;
 }
-.PKbothinfo-gold-num{
+.PKbothinfo-gold-num {
   font-size: 12px;
   font-weight: bold;
   color: @font-color;
@@ -343,4 +457,92 @@ onUnmounted(() => {
   border-top-right-radius: 10px;
   background-color: @win-color;
 }
+.particularsAvatar {
+  width: 100%;
+  height: 135px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+}
+.particularsAvatar-avatar {
+  width: 85px;
+  height: 85px;
+  border-radius: 50px;
+  background-color: #e9e9e9;
+}
+.altogether {
+  width: 100%;
+  height: 55px;
+  margin-top: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.altogethercard {
+  width: 90%;
+  height: 100%;
+  border-radius: 50px;
+  background-image: url(@/assets/InTotal.png);
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.altogether-icon {
+  width: 50px;
+  height: 40px;
+}
+.altogether-num {
+  width: 40%;
+  text-align: center;
+  color: #333333;
+  font-size: 20px;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+.goldlist {
+  width: 90%;
+  margin-top: 10px;
+  height: calc(100% - 200px);
+  display: flex;
+  justify-content: space-between;
+}
+.goldlist-card {
+  width: 48%;
+  height: 98%;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.goldlist-card-left {
+  background-color: #dffefc;
+  border: 1px solid #86e1e3;
+}
+.goldlist-card-right {
+  background-color: #fbece9;
+  border: 1px solid #f4d0c9;
+}
+.goldlist-list{
+  width: 85%;
+  padding-left: 2.5%;
+  padding-right: 2.5%;
+  height: 57px;
+  margin-bottom: 10px;
+  text-align: center;
+  line-height: 57px;
+  font-size: 20px;
+  font-weight: bold;
+  color: #333333;
+  border-radius: 10px;
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.goldlist-list:first-child {
+  margin-top: 20px;
+}
 </style>

src/components/mineSubComponent/PKmessage.vue

@@ -11,52 +11,75 @@
           >
             <div class="anchor-library-card" v-for="(item, index) in list" :key="index">
               <div class="card-content">
-                <div class="card-avatar"></div>
+                <div class="card-avatar">
+                  <img
+                    :src="item.anchorIcon"
+                    style="width: 100%; height: 100%; border-radius: 100px"
+                    alt=""
+                  />
+                </div>
                 <div class="personalInformation">
-                  <div class="name">来自世界上最长名的国家的某个人</div>
+                  <div class="name">{{ item.anchorId }}</div>
                   <div class="GenderAndCountry">
-                    <div class="Gender">女</div>
+                    <div
-                    <div class="Country">来自世界上最长名的国家的名称很长很长哦</div>
+                      class="Gender"
+                      :style="{
+                        background: item.sex == 1 ? '#59D8DB' : '#F3876F',
+                      }"
+                    >
+                      {{ item.sex == 1 ? "男" : "女" }}
+                    </div>
+                    <div class="Country">{{ item.country }}</div>
                     <div class="goldbox">
                       <img
                         class="gold-icon"
-                        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/species.png"
+                        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                         alt=""
                       />
                       <div class="gold">
                         金币：
-                        <div class="gold-num">999999k</div>
+                        <div class="gold-num">{{ item.coin }}K</div>
+                      </div>
+                    </div>
+                    <div class="goldbox">
+                      <img
+                        class="gold-icon"
+                        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
+                        alt=""
+                      />
+                      <div class="gold">
+                        场次：
+                        <div class="gold-num">{{ item.pkNumber }}场</div>
                       </div>
                     </div>
                   </div>
-                  <div class="time">PK时间:2025-08-31 14:06</div>
+                  <div class="time">
+                    PK时间:{{ TimestamptolocalTime(item.pkTime * 1000) }}
+                  </div>
                 </div>
                 <div class="card-Operation">
-                  <div class="modify">
+                  <div class="modify" @click="topPosition(item)">
-                    <img
+                    <!-- 置顶 -->
-                      class="modify-icon"
-                      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pin.png"
-                      alt=""
-                    />
-                    <!-- <img
-                      class="modify-icon"
-                      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/cancelPin.png"
-                      alt=""
-                    /> -->
-                  </div>
-                  <div class="modify">
-                    <img
-                      class="modify-icon"
-                      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/recompose.png"
-                      alt=""
-                    />
-                  </div>
-                  <div class="delete">
                     <img
+                      v-if="item.isPin == false"
                       class="delete-icon"
-                      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/expurgate.png"
+                      src="@/assets/topPosition.png"
                       alt=""
                     />
+                    <img
+                      v-if="item.isPin == true"
+                      class="delete-icon"
+                      src="@/assets/unpinned.png"
+                      alt=""
+                    />
+                  </div>
+                  <!-- 修改 -->
+                  <div class="modify" @click="modify(item)">
+                    <img class="modify-icon" src="@/assets/Editor.png" alt="" />
+                  </div>
+                  <!-- 删除 -->
+                  <div class="delete" @click="deletePKInfo(item)">
+                    <img class="modify-icon" src="@/assets/Delete.png" alt="" />
                   </div>
                 </div>
               </div>
@@ -68,10 +91,12 @@
         <!-- 添加或修改主播 -->
         <div class="demo-panel">
           <div class="add-anchor-library">
-            <div class="title">发布新PK</div>
+            <div class="title">
-            <!-- <div class="title">
+              <img class="titleimg" src="@/assets/embellish.png" alt="" />
-                    修改PK信息
+              <div v-if="!modifyDialogstate">发布新PK</div>
-                </div> -->
+              <div v-if="modifyDialogstate">修改PK信息</div>
+              <img class="titleimg" src="@/assets/embellish.png" alt="" />
+            </div>
             <div class="add-anchor-library-content">
               <div class="input-name">
                 <!-- 主播名称 -->
@@ -80,9 +105,10 @@
                   v-model="anchorName"
                   size="large"
                   placeholder="请输入主播名称"
+                  @blur="handleChange()"
                 />
                 <div class="myanchor">
-                  <div class="myanchor-btn">选择我的主播</div>
+                  <div class="myanchor-btn" @click="myAnchorDialogVisible = true">选择我的主播</div>
                 </div>
               </div>
               <div class="country">
@@ -111,39 +137,96 @@
               </div>
               <div class="timeselect">
                 <el-date-picker
-                  v-model="value1"
+                  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
+                  <el-input-number v-model="goldvalue" controls-position="right" />
-                    v-model="maxnum"
-                    controls-position="right"
-                    @change="handleChange"
-                  />
                 </div>
                 <div class="Goldcoinbox-right">
                   <div class="Goldcoinbox-text">场次</div>
-                  <el-input-number
+                  <el-input-number v-model="sessionnum" controls-position="right" />
-                    v-model="maxnum"
-                    controls-position="right"
-                    @change="handleChange"
-                  />
                 </div>
               </div>
-              <div class="Confirm">确认</div>
+              <div class="remark">
-              <div class="Reset">重置</div>
+                <!-- 备注 -->
+                <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 class="Reset" v-if="modifyDialogstate" @click="cancel()">取消</div>
             </div>
           </div>
         </div>
       </el-splitter-panel>
     </el-splitter>
   </div>
+  <!-- 确认删除弹窗 -->
+  <el-dialog
+    class="center-dialog"
+    v-model="centerDialogVisible"
+    title="提示"
+    width="200"
+    align-center
+  >
+    <span>确认删除该条主播PK信息？</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="deleteAnchor()"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <!-- 选择我的主播弹窗 -->
+  <el-dialog v-model="myAnchorDialogVisible" title="选择我的主播库主播" width="800">
+    <div class="myanchor-content">
+      <div class="myanchor-list">
+        <div class="anchor-library-card" v-for="(item, index) in anchorLibrary" :key="index" @click="selectStreamerLibrary(item)" :style="{transform: item == selectAnchor? 'scale(1.05)':'scale(1)'}">
+              <div class="card-content">
+                <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="Reset" @click="myAnchorDialogVisible = false">取消</div>
+        <div class="Confirm" @click="handleSelect">确认</div>
+      </div>
+    </div>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -154,7 +237,21 @@ import {
   onUpdated, // 组件更新后执行
   onUnmounted, // 组件销毁前执行
 } from "vue";
+import {
+  getPkInfo,
+  getAnchorAvatar,
+  releasePkInfo,
+  editPkInfo,
+  delPkInfo,
+  topPkInfo,
+  cancelTopPkInfo,
+  getAnchorList
+} from "@/api/account";
+import { TimestamptolocalTime } from "@/utils/timeConversion.js";
 import { getCountryNamesArray } from "../../utils/countryUtil";
+import { ElLoading } from "element-plus";
+import { ElMessage } from "element-plus";
+import { setStorage, getStorage, getPromiseStorage } from "@/utils/storage.js";
 
 const country = ref([]);
 country.value = getCountryNamesArray(); //国家条目
@@ -162,20 +259,237 @@ const genderOptions = [
   { value: 1, label: "男" },
   { value: 2, label: "女" },
 ]; // 性别选项
+const user = ref(null); // 用户信息
 const gendervalue = ref(null); // 性别值
 const countryvalue = ref(null); //国家
 const anchorName = ref(null); // 主播名称
-const refname = ref("");
+const AnchorProfilePicture = ref(""); // 主播头像
-const list = ref([{}, {}, {}, {}, {}]);
+const timevalue = ref(null); // PK时间
-
+const goldvalue = ref(null); // 金币数
-function load() {
+const sessionnum = ref(null); // 场次
-  // 加载更多数据
+const remark = ref(null); // 备注
+const list = ref([]); // PK信息列表
+const page = ref(0); // 页码
+const centerDialogVisible = ref(false); // 确认删除弹窗
+const modifyDialogstate = ref(false); // 修改弹窗
+const modifyDialogstateID = ref(null); // 修改弹窗ID
+const myAnchorDialogVisible = ref(false); // 选择我的主播弹窗
+const anchorLibrary = ref([]); // 我的主播库
+const selectAnchor = ref(null); //选中的主播信息
+// 选择我的主播
+function selectStreamerLibrary(item) {
+  selectAnchor.value = item
 }
-watch(refname, async (newQuestion, oldQuestion) => {
+
-  // 变化后执行
+
-});
+//获取我的主播库数据
+function getMyAnchorLibrary() {
+  getAnchorList({id: user.value.id}).then((res) => {
+    console.log("anchorLibrary", res);
+    anchorLibrary.value = res
+  })
+}
+// 置顶or取消置顶
+function topPosition(item) {
+
+
+}
+// 修改
+function modify(item) {
+  if (modifyDialogstate.value) {
+    cancel();
+    return;
+  }
+  modifyDialogstateID.value = item.id;
+  modifyDialogstate.value = true;
+  countryvalue.value = item.country;
+  gendervalue.value = item.sex;
+  anchorName.value = item.anchorId;
+  AnchorProfilePicture.value = item.anchorIcon.split("/").pop();
+  timevalue.value = item.pkTime * 1000;
+  goldvalue.value = item.coin;
+  sessionnum.value = item.pkNumber;
+  remark.value = item.remark;
+}
+// 取消
+function cancel() {
+  modifyDialogstateID.value = null;
+  modifyDialogstate.value = false;
+  countryvalue.value = null;
+  gendervalue.value = null;
+  anchorName.value = null;
+  AnchorProfilePicture.value = null;
+  timevalue.value = null;
+  goldvalue.value = null;
+  sessionnum.value = null;
+  remark.value = null;
+}
+// 删除
+const deletePKInfodata = ref(null);
+function deletePKInfo(item) {
+  deletePKInfodata.value = item;
+  centerDialogVisible.value = true;
+}
+// 确认删除
+function deleteAnchor() {
+  centerDialogVisible.value = false;
+  delPkInfo({
+    id: deletePKInfodata.value.id,
+  }).then((res) => {
+    ElMessage.success("删除成功");
+    list.value = [];
+    page.value = 0;
+    PKInfo();
+  });
+}
+
+// 确认发布
+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;
+  }
+  const loading = ElLoading.service({
+    lock: true,
+    text: "发布中....",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  if (modifyDialogstate.value) {
+    editPkInfo({
+      id: modifyDialogstateID.value,
+      anchorId: anchorName.value,
+      pkTime: timevalue.value / 1000,
+      sex: gendervalue.value,
+      country: countryvalue.value,
+      coin: goldvalue.value,
+      remark: remark.value,
+      status: 0,
+      senderId: user.value.id,
+      anchorIcon: AnchorProfilePicture.value,
+      pkNumber: sessionnum.value,
+    }).then((res) => {
+      loading.close();
+      ElMessage.success("修改成功");
+      list.value = [];
+      page.value = 0;
+      PKInfo();
+      cancel();
+    });
+  } else {
+    releasePkInfo({
+      anchorId: anchorName.value,
+      pkTime: timevalue.value / 1000,
+      sex: gendervalue.value,
+      country: countryvalue.value,
+      coin: goldvalue.value,
+      remark: remark.value,
+      status: 0,
+      senderId: user.value.id,
+      anchorIcon: AnchorProfilePicture.value,
+      pkNumber: sessionnum.value,
+    })
+      .then((res) => {
+        loading.close();
+        ElMessage.success("发布成功");
+        list.value = [];
+        page.value = 0;
+        PKInfo();
+        Reset();
+      })
+      .catch((err) => {
+        loading.close();
+        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 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 load() {
+  page.value++;
+  PKInfo();
+}
+
+//PK信息列表
+function PKInfo() {
+  getPkInfo({
+    userId: user.value.id,
+    page: page.value,
+    size: 10,
+  }).then((res) => {
+    console.log("list", res);
+    list.value.push(...res);
+  });
+}
+
+// 组件挂载完成后执行
 onMounted(() => {
-  // 组件挂载完成后执行
+  getPromiseStorage("user")
+    .then((res) => {
+      user.value = res;
+      PKInfo();
+      getMyAnchorLibrary();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
 });
 onUpdated(() => {
   // 组件更新后执行
@@ -183,6 +497,10 @@ onUpdated(() => {
 onUnmounted(() => {
   // 组件销毁前执行
 });
+const refname = ref(""); //
+watch(refname, async (newQuestion, oldQuestion) => {
+  // 变化后执行
+});
 </script>
 
 <style scoped lang="less">
@@ -211,15 +529,15 @@ onUnmounted(() => {
 .card-content {
   width: 90%;
   height: 100%;
-  border-radius: 20px;
+  border-radius: 10px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  background-image: url(../../assets/PKbackground.png);
-  background-image: linear-gradient(45deg, @bg-Sidebar-color-bottom, @bg-color);
+  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.8);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
   transform: scale(1.08);
   opacity: 0.8;
 }
@@ -250,17 +568,17 @@ onUnmounted(() => {
 }
 .Gender {
   font-size: 16px;
-  color: #666666;
+  color: #ffffff;
   border-radius: 50px;
-  background-color: #ffffff;
+  padding: 5px 20px 5px 20px;
-  padding: 2px 20px 2px 20px;
   margin-right: 20px;
+  line-height: 100%;
 }
 .Country {
   font-size: 16px;
-  color: #666666;
+  color: #03aba8;
   border-radius: 50px;
-  background-color: #ffffff;
+  background-color: #e4f9f9;
   padding: 2px 20px 2px 20px;
 }
 .goldbox {
@@ -300,10 +618,18 @@ onUnmounted(() => {
 .modify-icon {
   width: 30px;
   height: 30px;
+  transition: all 0.4s ease;
+}
+.modify-icon:hover {
+  transform: scale(1.3);
 }
 .delete-icon {
-  width: 30px;
+  width: 20px;
-  height: 30px;
+  height: 28px;
+  transition: all 0.4s ease;
+}
+.delete-icon:hover {
+  transform: scale(1.3);
 }
 .add-anchor-library {
   width: 100%;
@@ -313,13 +639,20 @@ onUnmounted(() => {
   align-items: center;
 }
 .title {
-  width: 100%;
+  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;
+}
+.titleimg {
+  width: 44px;
+  height: 30px;
 }
 .add-anchor-library-content {
   width: 100%;
@@ -335,11 +668,11 @@ onUnmounted(() => {
   display: flex;
 }
 .input-name-input {
-  width: 50%;
+  width: 70%;
   height: 40px;
 }
 .myanchor {
-  width: 50%;
+  width: 30%;
   height: 40px;
   display: flex;
   justify-content: center;
@@ -347,19 +680,17 @@ onUnmounted(() => {
 }
 .myanchor-btn {
   width: 90%;
-  height: 35px;
+  height: 40px;
-  border-radius: 5px;
+  border-radius: 2px;
-  font-size: 16px;
+  font-size: 12px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  background-image: linear-gradient(to top, #4fcacd, #5fdbde);
   text-align: center;
-  line-height: 35px;
+  line-height: 40px;
   transition: all 0.4s ease;
-  color: @Prompt-text-color;
+  color: #ffffff;
 }
 .myanchor-btn:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  transform: scale(1.03);
-  transform: scale(1.1);
-  opacity: 0.8;
 }
 .country {
   width: 90%;
@@ -387,7 +718,7 @@ onUnmounted(() => {
   justify-content: space-between;
   align-items: center;
 }
-.Goldcoinbox-right{
+.Goldcoinbox-right {
   display: flex;
   flex-direction: column;
 }
@@ -395,40 +726,86 @@ onUnmounted(() => {
   font-size: 12px;
   color: @Prompt-text-color;
 }
-.Confirm {
+.remark {
+  margin-top: 30px;
+  width: 98%;
+  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: 400px;
   height: 50px;
-  margin-top: 100px;
+  margin-top: 40px;
   text-align: center;
   line-height: 50px;
-  background-color: #ffffff;
+  background-image: linear-gradient(to top, #4fcacd, #5fdbde);
-  color: @Prompt-text-color;
+  color: #ffffff;
-  font-size: 20px;
+  font-size: 22px;
   transition: all 0.4s ease;
-  border-radius: 20px;
+  border-radius: 25px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 }
 .Confirm:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-  transform: scale(1.1);
+  transform: scale(1.05);
   opacity: 0.8;
 }
 .Reset {
-  width: 90%;
+  width: 400px;
   height: 50px;
   margin-top: 30px;
   text-align: center;
   line-height: 50px;
-  background-color: #ffffff;
+  background-image: linear-gradient(to top, #e4ffff, #ffffff);
-  color: @Prompt-text-color;
+  border: 1px solid #4fcacd;
-  font-size: 20px;
+  color: #03aba8;
+  font-size: 22px;
   transition: all 0.4s ease;
-  border-radius: 20px;
+  border-radius: 25px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 }
 .Reset:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-  transform: scale(1.1);
+  transform: scale(1.05);
   opacity: 0.8;
 }
+.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;
+}
+.myanchor-dialog-btn{
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content:space-around;
+  align-items: center;
+}
 </style>

src/components/mineSubComponent/PointsList.vue

@@ -2,7 +2,17 @@
     <!-- 积分列表 -->
   <div class="points-list-container">
     <div class="points-list-title">
-      我的积分:9999999999999999999999999999999
+    <img
+      class="points-icon"
+      src="@/assets/Points.png"
+      mode="scaleToFill"
+    />
+    <div class="points-text">
+      我的积分:
+      <div class="points-alwaysnum">
+        9999999999999999999999999999999
+      </div>
+    </div>
     </div>
     <div class="points-list" style="overflow: auto;">
     <div class="points-list-item" v-for="(item, index) in pointsList" :key="index">
@@ -59,10 +69,26 @@ onUnmounted(() => {
 .points-list-title{
   width: 100%;
   height: 70px;
-  color: @font-color;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.points-text{
+  margin-top: 10px;
+  color: #666666;
   font-size: 24px;
-  text-align: center;
+  display: flex;
-  line-height: 70px;
+  align-items: center;
+}
+.points-alwaysnum{
+  color: #333333;
+  font-size: 24px;
+  font-weight: bold;
+}
+.points-icon{
+  width: 52px;
+  height: 52px;
+  margin-right: 18px;
 }
 .points-list-item{
   width: 100%;
@@ -80,7 +106,7 @@ onUnmounted(() => {
   display: flex;
   justify-content: space-around;
   align-items: center;
-  background-color:@win-color;
+  background-color:#E0F4F1;
 }
 .Event{
   color: @Supplementary-text-color;

src/main.js

@@ -14,7 +14,7 @@ app.use(ElementPlus, {
 });
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
-  }
+}
 app.use(ElementPlus)      // 注册 ElementPlus
 app.use(createPinia()); // 注册 Pinia
 app.use(store); // 注册 store

src/stores/notice.js

@@ -14,8 +14,6 @@ export const tokenStore = defineStore('token', {
 	state: () => {
 	  return { token: '' }
 	},
-	// 也可以这样定义
-	// state: () => ({ count: 0 })
 	actions: {
 		setToken(token){
 			this.token = token

src/utils/axios.js

@@ -9,8 +9,7 @@ import router from '@/router'
 import { ElMessage } from 'element-plus';
 import { ref } from 'vue';
 import { defineStore } from 'pinia'
-import { tokenStore, UserStore } from '@/stores/notice'
+import { setStorage , getStorage } from '@/utils/storage.js';
-
 
 // 请求地址前缀
 let baseURL = ''
@@ -24,16 +23,16 @@ if (process.env.NODE_ENV === 'development') {
 
 // 请求拦截器
 axios.interceptors.request.use((config) => {
-    const tokenCache = tokenStore()
+    const tokenCache = getStorage('token')
     const url = sliceUrl(config.url)
     // 请求超时时间 - 毫秒
     config.timeout = 60000
     config.baseURL = baseURL
     // 自定义Content-type
     config.headers['Content-type'] = 'application/json'
-    // if (!(config.url == '' || config.url == '')) {
+    if (!(config.url == 'getVxQrcode' || config.url == 'getScanResult'||config.url == 'register')) {
-    //     config.headers['vvtoken'] = tokenCache.token;
+        config.headers['token'] = tokenCache;
-    // }
+    }
 
     return config;
 }, (error) => {
@@ -42,24 +41,39 @@ axios.interceptors.request.use((config) => {
 
 // 响应拦截器
 axios.interceptors.response.use((response) => {
-    console.log("response", response.data)
+    return addPrefixToHeaderIcon(response.data)
-    if (response.data.code == 200) {
-        return response.data.data
-    } else if (response.data.code == 40400) {
-        router.push('/')
-        ElMessage.error(response.data.code + '' + response.data.message);
-    } else {
-        ElMessage.error(response.data.code + '' + response.data.message);
-    }
-
-
-
 }, (error) => {
     // 可添加请求失败后的处理逻辑
     return Promise.reject(error)
 })
 
-
+// 处理headerIcon的前缀
+function addPrefixToHeaderIcon(data) {
+    // 处理数组：递归处理每个元素
+    if (Array.isArray(data)) {
+      data.forEach(item => addPrefixToHeaderIcon(item));
+      return;
+    }
+  
+    // 处理对象：递归处理每个属性
+    if (typeof data === 'object' && data !== null) {
+      for (const key in data) {
+        if (key === 'headerIcon' ||key === 'anchorIcon' && data.hasOwnProperty(key)) {
+          // 在headerIcon值前添加前缀（处理各种类型）anchorIconA anchorIconB anchorIcon
+          const value = data[key];
+          data[key] = "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/headerIcon/" + (
+            typeof value === 'string' ? value 
+            : value != null ? String(value) 
+            : ""
+          );
+        } else if (typeof data[key] === 'object' && data[key] !== null) {
+          // 递归处理嵌套对象或数组
+          addPrefixToHeaderIcon(data[key]);
+        }
+      }
+    }
+    return data;
+  }
 
 // axios的get请求
 export function getAxios({ url, params }) {
@@ -69,8 +83,14 @@ export function getAxios({ url, params }) {
             params
             // 请求成功，将返回的数据传递给resolve函数
         }).then(res => {
-            resolve(res)
+            if (res.code == 200) {
-            // 请求失败，将错误信息传递给reject函数
+                resolve(res.data) 
+            } else if (res.code == 40400) {
+                router.push('/')
+                ElMessage.error(res.code + '' + res.msg);
+            } else {
+                ElMessage.error(res.code + '' + res.msg);
+            }
         }).catch(err => {
             reject(err)
         })
@@ -79,6 +99,7 @@ export function getAxios({ url, params }) {
 
 // axios的post请求
 export function postAxios({ url, data }) {
+    console.log("postAxios", url, data);
     return new Promise((resolve, reject) => {
         axios.post(
             url,
@@ -89,81 +110,91 @@ export function postAxios({ url, data }) {
                 }
             }
         ).then(res => {
-            resolve(res)
+            if (res.code == 200) {
+                resolve(res.data) 
+            } else if (res.code == 40400) {
+                router.push('/')
+                console.log(res.msg);
+                ElMessage.error(res.code + '' + res.msg);
+            } else {
+                console.log(res.msg);
+                ElMessage.error(res.code + '' + res.msg);
+            }
         }).catch(err => {
             reject(err)
         })
     })
 }
-export const downFile = async (urlstr, data) => {
 
-    // 发送请求，获取文件流
+// export const downFile = async (urlstr, data) => {
-    const response = await axios.post(urlstr, data, { responseType: 'blob' });
 
-    // 获取文件名（如果后端设置了 Content-Disposition）
+//     // 发送请求，获取文件流
-    const contentDisposition = response.headers['content-disposition'];
+//     const response = await axios.post(urlstr, data, { responseType: 'blob' });
-    let fileName = 'default-file-name'; // 默认文件名
-    console.log(contentDisposition)
-    console.log(response)
-    if (contentDisposition) {
-        // 从响应头中提取文件名
-        const fileNameMatch = contentDisposition.match(/filename="(.+)"/);
-        if (fileNameMatch && fileNameMatch.length > 1) {
-            fileName = fileNameMatch[1];
-        }
-    }
 
-    // 创建一个临时的下载链接
+//     // 获取文件名（如果后端设置了 Content-Disposition）
-    const blob = new Blob([response.data], { type: response.headers['content-type'] });
+//     const contentDisposition = response.headers['content-disposition'];
-    const url = window.URL.createObjectURL(blob);
+//     let fileName = 'default-file-name'; // 默认文件名
-    const a = document.createElement('a');
+//     console.log(contentDisposition)
-    a.href = url;
+//     console.log(response)
-    a.download = fileName; // 设置下载的文件名
+//     if (contentDisposition) {
-    a.click();
+//         // 从响应头中提取文件名
+//         const fileNameMatch = contentDisposition.match(/filename="(.+)"/);
+//         if (fileNameMatch && fileNameMatch.length > 1) {
+//             fileName = fileNameMatch[1];
+//         }
+//     }
 
-    // 释放 URL 对象
+//     // 创建一个临时的下载链接
-    window.URL.revokeObjectURL(url);
+//     const blob = new Blob([response.data], { type: response.headers['content-type'] });
+//     const url = window.URL.createObjectURL(blob);
+//     const a = document.createElement('a');
+//     a.href = url;
+//     a.download = fileName; // 设置下载的文件名
+//     a.click();
+
+//     // 释放 URL 对象
+//     window.URL.revokeObjectURL(url);
 
 
-}
+// }
-//请求前验证
+// //请求前验证
-function cheekalive() {
+// function cheekalive() {
-    const userCache = UserStore()
+//     const userCache = UserStore()
-    const tokenCache = tokenStore()
+//     const tokenCache = tokenStore()
-    axios.post('api/account/cheekalive', {
+//     axios.post('api/account/cheekalive', {
-        userId: userCache.user.id,
+//         userId: userCache.user.id,
-        currcode: tokenCache.token,
+//         currcode: tokenCache.token,
-    },
+//     },
-        {
+//         {
-            headers: {
+//             headers: {
-                'Content-Type': 'application/x-www-form-urlencoded'
+//                 'Content-Type': 'application/x-www-form-urlencoded'
-            }
+//             }
-        }
+//         }
-    ).then(res => {
+//     ).then(res => {
-        console.log(res.data)
+//         console.log(res.data)
-        if (res.data) {
+//         if (res.data) {
 
-        } else {
+//         } else {
-            alert("账号在其他地方登录！")
+//             alert("账号在其他地方登录！")
-            window.location.href = '/';
+//             window.location.href = '/';
-        }
+//         }
 
 
-    })
+//     })
-}
+// }
-//节流函数
+// //节流函数
-function throttle(func, limit) {
+// function throttle(func, limit) {
-    let inThrottle;
+//     let inThrottle;
-    return function () {
+//     return function () {
-        const args = arguments;
+//         const args = arguments;
-        const context = this;
+//         const context = this;
-        if (!inThrottle) {
+//         if (!inThrottle) {
-            func.apply(context, args);
+//             func.apply(context, args);
-            inThrottle = true;
+//             inThrottle = true;
-            setTimeout(() => inThrottle = false, limit);
+//             setTimeout(() => inThrottle = false, limit);
-        }
+//         }
-    }
+//     }
-}
+// }
 
 function sliceUrl(url) {
     const lastSlash = url.lastIndexOf('/');

src/utils/storage.js

@@ -1,11 +1,28 @@
 
 //存储localStorage
 export function setStorage(key, value) {
-	window.localStorage.setItem(key, value);
+    const data = typeof value === 'object' ? JSON.stringify(value) : value;
+	window.localStorage.setItem(key, data);
 }
 //获取localStorage
 export function getStorage(key) {
-	return window.localStorage.getItem(key);
+    const data = window.localStorage.getItem(key);
+    try {
+        return JSON.parse(data);
+    } catch {
+        return data;
+    }
+}
+//获取localStorage
+export function getPromiseStorage(key) {
+    return new Promise((resolve, reject) => {
+        const data = window.localStorage.getItem(key);
+        try {
+            resolve(JSON.parse(data));
+        } catch {
+            reject(data);
+        }
+    });
 }
 //清除localStorage
 export function clearStorage() {

src/utils/timeConversion.js

@@ -0,0 +1,13 @@
+// 时间戳转换为本地时间，格式为YYYY/MM/DD hh:mm
+export function TimestamptolocalTime(date) {
+  if (!date || isNaN(date)) return '';
+  
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  const hours = String(d.getHours()).padStart(2, '0');
+  const minutes = String(d.getMinutes()).padStart(2, '0');
+  
+  return `${year}/${month}/${day} ${hours}:${minutes}`;
+}

src/views/HomeView.vue

@@ -4,7 +4,12 @@
       <!-- 登录切换 -->
       <div class="Switch">
         <div class="Switch-content" @click="fuSWitch">
-          <img v-if="refSwitch" class="Switchimg" src="../assets/switchEmail.png" alt="" />
+          <img
+            v-if="refSwitch"
+            class="Switchimg"
+            src="../assets/switchEmail.png"
+            alt=""
+          />
           <img v-if="!refSwitch" class="Switchimg" src="../assets/switchvx.png" alt="" />
         </div>
       </div>
@@ -15,66 +20,98 @@
         <div class="input-Email">
           <img class="Emailimg" src="../assets/Email.png" alt="" />
           <div class="vertical"></div>
-          <input
+          <el-input
+            type="Email"
+            size="large"
             class="input-text"
             v-model="refEmail"
             placeholder="请输入邮箱"
-            placeholder-class="input-placeholder"
-            @input=""
           />
         </div>
         <div class="input-Password">
           <img class="Passwordimg" src="../assets/Password.png" alt="" />
           <div class="vertical"></div>
-          <input
+          <el-input
+            type="Password"
+            size="large"
             class="input-text"
             v-model="refpassword"
+            show-password
             placeholder="请输入密码"
-            type="password"
-            placeholder-class="input-placeholder"
-            @input=""
           />
         </div>
-        <div class="login-btn">登录</div>
+        <div class="login-btn" @click="EmailLogin">登录</div>
       </div>
       <!-- 微信登录 -->
       <div v-if="refSwitch" class="container">
         <div class="title">微信小程序登录</div>
         <div class="striping"></div>
-        <img class="qrcode" :src="Qrcode.qrcode" alt="">
+        <img class="qrcode" :src="Qrcode.qrcode" alt="" />
         <div class="qrcode-text">使用微信小程序扫描二维码登录</div>
       </div>
     </div>
+    <div class="register" v-if="!refSwitch">
+      <div class="register-text">还没有账号？</div>
+      <div class="register-btn" @click="register">注册</div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, watch, onMounted, onUnmounted } from "vue";
-import { getVxQrcode,getScanResult } from "@/api/account"; // 导入登录接口
+import { getVxQrcode, getScanResult, login } from "@/api/account"; // 导入登录接口
-
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { tokenStore, UserStore } from '@/stores/notice'
+import { setStorage , getStorage } from '@/utils/storage.js';
+const router = useRouter();
 const refname = ref("");
 const refEmail = ref(""); // 邮箱
 const refpassword = ref(""); // 密码
 const refSwitch = ref(false); // 登录切换/true:微信登录/false:邮箱登录
 const Qrcode = ref(""); // 二维码
+const token = tokenStore()
+const user = UserStore()
+// 登录
+function EmailLogin() {
+  // 邮箱验证
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  if (!emailRegex.test(refEmail.value)) {
+    ElMessage.error("请输入有效的邮箱地址");
+    return;
+  }
+  // 密码验证
+  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,16}$/;
+  if (!passwordRegex.test(refpassword.value)) {
+    ElMessage.error("密码必须包含大小写字母和数字，长度6-16位");
+    return;
+  }
 
+  login({
+    email: refEmail.value,
+    password: refpassword.value,
+  }).then((res) => {
+    console.log(res);
+    token.setToken(res.token);
+    setStorage("token", res.token);
+    user.setUser(res);
+    setStorage("user", res);
+    router.push("/nav");
+  });
+}
 // 登录切换
 let vxloginstatus;
 function fuSWitch() {
   refSwitch.value = !refSwitch.value;
   if (refSwitch.value) {
-    vxloginstatus =setInterval(checkLogin, 2000);
+    vxloginstatus = setInterval(checkLogin, 2000);
   } else {
-      console.log("邮箱登录");
+    console.log("邮箱登录");
-      clearInterval(vxloginstatus);
+    clearInterval(vxloginstatus);
   }
 }
-
+function register() {
-// 验证邮箱地址
+  router.push("/emailRegistration");
-function isValidEmail(email) {
-  // 邮箱地址的正则表达式
-  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-  return emailRegex.test(email);
 }
 
 // 获取二维码
@@ -87,10 +124,20 @@ function fetchQrcode() {
 //查询微信扫码是否成功
 function checkLogin() {
   getScanResult(Qrcode.value.uuid).then((res) => {
-    
+    if (res.token) {
+      token.setToken(res.token);
+      setStorage("token", res.token);
+      user.setUser(res);
+      setStorage("user", res);
+      pollstop();
+      router.push("/nav");
+    }
   });
 }
-  // 轮询查询登录状态
+function pollstop() {
+  clearInterval(vxloginstatus);
+}
+// 轮询查询登录状态
 let pollInterval;
 
 watch(refname, async (newQuestion, oldQuestion) => {
@@ -101,7 +148,7 @@ onMounted(() => {
   // 初始化获取二维码
   fetchQrcode();
   // 设置每两分钟轮询一次
-  pollInterval = setInterval(fetchQrcode, 120000);
+  pollInterval = setInterval(fetchQrcode, 90000);
 });
 
 onUnmounted(() => {
@@ -120,6 +167,7 @@ onUnmounted(() => {
   background-image: url(../assets/bg.png);
   background-size: 100% 100%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 }
@@ -138,6 +186,26 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
 }
+.register {
+  width: 627px;
+  height: 40px;
+  display: flex;
+  justify-content: flex-end;
+}
+.register-text {
+  font-size: 18px;
+  color: #333333;
+  font-weight: bold;
+  margin-right: 10px;
+}
+.register-btn {
+  font-size: 18px;
+  color: #5fdbde;
+  font-weight: bold;
+  margin-right: 10px;
+  cursor: pointer;
+}
+
 .Switch {
   width: 100%;
   height: 100px;
@@ -166,12 +234,12 @@ onUnmounted(() => {
   background-color: #0aaeab;
   margin-top: 10px;
 }
-.qrcode{
+.qrcode {
   width: 200px;
   height: 200px;
   margin-top: 50px;
 }
-.qrcode-text{
+.qrcode-text {
   color: #333333;
   font-size: 18px;
   margin-top: 40px;
@@ -206,6 +274,13 @@ onUnmounted(() => {
   font-size: 20px;
   color: #999999;
 }
+:deep(.el-input__wrapper) {
+  box-shadow: none !important;
+  background-color: transparent !important;
+}
+:deep(.el-input__wrapper.is-focus) {
+  box-shadow: none !important;
+}
 .input-text:focus {
   outline: none; /* 移除默认蓝色边框 */
 }

src/views/emailRegistration.vue

@@ -1,12 +1,51 @@
 <template>
   <div class="email-registration">
-        
+    <div class="stepBar">
-
+      <el-steps
-    
+        style="background-color: #f5f5f500"
+        :active="active"
+        finish-status="success"
+        simple
+      >
+        <el-step title="账号信息" />
+        <el-step title="邮箱验证" />
+      </el-steps>
+    </div>
+    <!-- 账号信息 -->
+    <div class="form" v-if="active === 0">
+      <div class="title">注册</div>
+      <div class="Email">
+        <el-input type="text" size="large" class="input-item" v-model="Email" placeholder="请输入邮箱" />
+      </div>
+      <div class="Password">
+        <el-input type="Password" size="large" class="input-item" v-model="Password" show-password placeholder="请输入密码" />
+        <text class="password-tip">您的密码必须包含大小字母和数字，长度在6-16位之间</text>
+      </div>
+      <div class="ConfirmPassword">
+        <el-input type="Password" size="large" class="input-item" v-model="ConfirmPassword" show-password placeholder="请再次输入密码" />
+      </div>
+      <div class="btn">
+         <div class="Return" @click="Return">返回</div>
+         <div class="nextStep"@click="nextStep">下一步</div>
+      </div>
+    </div>
+    <!-- 完成注册 -->
+    <div class="form" v-if="active === 1">
+      <div class="title">邮箱验证</div>
+      <div class="Hint">
+          已向您的{{Email}}邮箱发送了一封验证邮件，请点击邮件中的链接完成注册。
+      </div>
+      <div class="ResendEmail" @click="ResendEmail">
+        重发邮件
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { register,checkStatus,resendEmail} from "@/api/account"; // 导入登录接口
+import { tokenStore, UserStore } from '@/stores/notice'
+import { setStorage , getStorage } from '@/utils/storage.js';
 import {
   ref, // 响应式基础
   watch, // 侦听器
@@ -14,10 +53,75 @@ import {
   onUpdated, // 组件更新后执行
   onUnmounted, // 组件销毁前执行
 } from "vue";
-const refname = ref('');
+import { ElMessage } from "element-plus";
-watch(refname, async (newQuestion, oldQuestion) => {
+import { useRouter } from 'vue-router'
-  // 变化后执行
+const router = useRouter()
-});
+const active = ref(0);// 当前步骤
+const Email = ref("");// 邮箱
+const Password = ref("");// 密码
+const ConfirmPassword = ref("");// 确认密码
+const token = tokenStore()
+const user = UserStore()
+//下一步
+function nextStep() {
+  // 邮箱验证
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  if (!emailRegex.test(Email.value)) {
+    ElMessage.error('请输入有效的邮箱地址');
+    return;
+  }
+
+  // 密码验证
+  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,16}$/;
+  if (!passwordRegex.test(Password.value)) {
+    ElMessage.error('密码必须包含大小写字母和数字，长度6-16位');
+    return;
+  }
+
+  // 确认密码验证
+  if (Password.value !== ConfirmPassword.value) {
+    ElMessage.error('两次输入的密码不一致');
+    return;
+  }
+  register({password: Password.value, email: Email.value, nickName: '用户' + Math.floor(Math.random() * 1000000),headerIcon:'181754562968_.pic_hd.jpg'}).then(res => {
+    active.value = active.value + 1;
+    check(res.id);
+    token.setToken(res.token);
+    setStorage('token', res.token)
+  }).catch(err => {});
+}
+
+//检查验证
+let poll;
+function check(id) {
+  poll = setInterval(() => {
+    checkStatus({id: id}).then(res => {
+      if (res.status === 0) {
+        user.setUser(res)
+        setStorage('user', res)
+        pollstop()
+        router.push('/nav')
+      }
+    })
+  }, 2000);
+}
+function pollstop() {
+  clearInterval(poll)
+}
+
+/// 重发邮件
+function ResendEmail() {
+  resendEmail({mailAddress: Email.value,type:1}).then(res => {
+    ElMessage.success('邮件已重新发送');
+  }).catch(err => {});
+}
+//返回登录页
+function Return() {
+  router.push('/')
+}
+// watch(refname, async (newQuestion, oldQuestion) => {
+//   // 变化后执行
+// });
 onMounted(() => {
   // 组件挂载完成后执行
 });
@@ -30,5 +134,194 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-/* 样式定义 */
+.email-registration {
-</style>
+  padding: 0;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  background-image: url(../assets/bg.png);
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.stepBar {
+  width: 900px;
+}
+.form {
+  margin-top: 30px;
+  width: 900px;
+  height: 600px;
+  background-image: linear-gradient(180deg, #dbf0f1, #ffffff);
+  border-radius: 10px;
+  border: 1px solid #4fcacd;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.title{
+  font-size: 30px;
+  color: #4fcacd;
+  margin-top: 70px;
+  text-align: center;
+  font-weight: bold;
+}
+.Hint{
+  width: 900px;
+  height: 400px;
+  color:#4fcacd;
+  font-size: 20px;
+  text-align: center;
+  line-height: 500px;
+  margin-top: -50px;
+}
+.ResendEmail{
+  width: 200px;
+  height: 40px;
+  background-image: linear-gradient(0deg, #4fcacd, #5fdbde);
+  border-radius: 10px;
+  color: #ffffff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 50px;
+}
+.ResendEmail:hover{
+  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+    transform: scale(1.08);
+    opacity: 0.8;
+}
+.Email{
+  margin-top: 70px;
+  width: 90%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.Password{
+  margin-top: 50px;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.ConfirmPassword{
+  margin-top: 50px;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.password-tip{
+  font-size: 12px;
+  color: #8c939d;
+  margin-top: 10px;
+}
+.btn{
+  width: 70%;
+  margin-top: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.Return{
+  width: 200px;
+  height: 40px;
+  background-image: linear-gradient(0deg, #4fcacd, #5fdbde);
+  border-radius: 10px;
+  color: #ffffff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.Return:hover{
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+    transform: scale(1.08);
+    opacity: 0.8;
+}
+.nextStep{
+  width: 200px;
+  height: 40px;
+  background-image: linear-gradient(0deg, #4fcacd, #5fdbde);
+  border-radius: 10px;
+  color: #ffffff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.nextStep:hover{
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+    transform: scale(1.08);
+    opacity: 0.8;
+}
+.avatar {
+  width: 90%;
+  margin-top: 30px;
+  height: 178px;
+}
+.input {
+  width: 90%;
+  margin-top: 100px;
+  height: 50px;
+}
+.input-item {
+  border: none;
+  width: 80%;
+  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;
+}
+.avatar-uploader {
+  width: 178px;
+  height: 178px;
+  border: 3px solid #4fcacd;
+  border-radius: 10px;
+}
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+.avatar-tip {
+  width: 178px;
+  text-align: center;
+  font-size: 12px;
+  color: #8c939d;
+}
+</style>

src/views/hosts/Forum.vue

@@ -3,16 +3,18 @@
   <div class="forum">
     <div v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
 
-      <el-card style="width: 90%">
+      <el-card style="width: 90%" class="card" v-for="(item, index) in NoticeList" :key="index">
         <template #header>
           <div class="card-header">
-            <span>Card name</span>
+            <span>{{ item.title }}</span>
           </div>
         </template>
-        <p v-for="o in 2" :key="o" class="text item">{{ "List item " + o }}</p>
+        <div class="card-body">
+          {{ item.content }}
+        </div>
         <template #footer>
           <div class="card-footer">
-            <span>Card footer</span>
+            <span>{{ item.time }}</span>
           </div>
         </template>
       </el-card>
@@ -29,7 +31,10 @@ import {
   onUpdated, // 组件更新后执行
   onUnmounted, // 组件销毁前执行
 } from "vue";
+import { getNoticeList } from "@/api/account";
 const refname = ref("");
+const NoticeList = ref([]);
+
 function load() {
   // 加载更多数据
 }
@@ -37,7 +42,9 @@ watch(refname, async (newQuestion, oldQuestion) => {
   // 变化后执行
 });
 onMounted(() => {
-  // 组件挂载完成后执行
+  getNoticeList({page: 0, size: 10}).then((res) => {
+    NoticeList.value = res;
+  });
 });
 onUpdated(() => {
   // 组件更新后执行
@@ -62,6 +69,11 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
 }
+.card{
+  border-radius: 16px;
+  border: 1px solid #4FCACD;
+  background-image: linear-gradient(180deg, #E4FFFF, #FFFFFF);
+}
 .card-header{
   font-size: 18px;
   font-weight: bold;
@@ -75,4 +87,8 @@ onUnmounted(() => {
   justify-content:flex-end;
   align-items: center;
 }
+.card-body{
+  color: #333333;
+  font-size: 24px;
+}
 </style>

src/views/hosts/Message.vue

@@ -118,6 +118,8 @@ onUnmounted(() => {
 .message {
   width: 100%;
   height: 100%;
+  border-radius: 16px;
+  background-color: #ffffff;
 }
 .demo-panel {
   display: flex;
@@ -129,6 +131,8 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   background-color: #ffffff;
+  border-top-left-radius: 16px;
+  border-bottom-left-radius: 16px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;

src/views/hosts/Mine.vue

@@ -2,22 +2,22 @@
   <!-- 我的 -->
   <div class="mine">
   <div class="custom-style">
-    <el-segmented v-model="segmentedvalue" :options="options" block>
+    <div class="Selector" v-for="item in options">
-      <template #default="scope">
+        <div class="card" @click="SelectorClick(item.value)" :class="{ 'active': item.value === segmentedvalue }">
-        <div class="flex flex-col items-center gap-2 p-2">
+          <div class="card-icon">
-          <el-icon size="1.5vw">
+          <img class="icon" :class="{ 'pk-info-icon': item.value === 2 , 'PointsList-icon': item.value === 4 }" :src="item.icon" alt=""/>
-            <component :is="scope.item.icon" />
+          </div>
-          </el-icon>
+          <div class="card-content">
-          <div>{{ scope.item.label }}</div>
+            <div class="card-title" :class="{'active-text': item.value === segmentedvalue}">{{item.label}}</div>
+          </div>
         </div>
-      </template>
+    </div>
-    </el-segmented>
   </div>
   <div class="mine-content">
-    <PointsList v-show="segmentedvalue === 4" />
+    <PointsList v-if="segmentedvalue === 4" />
-    <PKRecord v-show="segmentedvalue === 3" />
+    <PKRecord v-if="segmentedvalue === 3" />
-    <PKmessage v-show="segmentedvalue === 2" />
+    <PKmessage v-if="segmentedvalue === 2" />
-    <AnchorLibrary v-show="segmentedvalue === 1" />
+    <AnchorLibrary v-if="segmentedvalue === 1" />
   </div>  
   </div>
 </template>
@@ -31,12 +31,7 @@ import {
   onUnmounted, // 组件销毁前执行
 } from "vue";
 const refname = ref('');
-import {
+
-  Document,
-  Mic,
-  Coin,
-  List
-} from '@element-plus/icons-vue';
 import PointsList from "@/components/mineSubComponent/PointsList";
 import PKRecord from "@/components/mineSubComponent/PKRecord";
 import PKmessage from "@/components/mineSubComponent/PKmessage";
@@ -48,24 +43,33 @@ const options = [
   {
     label: '主播库',
     value: 1,
-    icon: Coin,
+    icon: require("@/assets/AnchorLibrary.png"),
   },
   {
     label: 'PK信息',
     value: 2,
-    icon: Mic,
+    icon: require("@/assets/PKInformation.png"),
   },
   {
     label: '我的PK记录',
-    value: 3,
+    value: 3, 
-    icon: List,
+    icon: require("@/assets/PKRecord.png"),
   },
   {
     label: '积分列表',
     value: 4,
-    icon: Document,
+    icon: require("@/assets/PointsList.png"),
   },
 ]
+import { throttle } from 'lodash-es';
+
+const throttledUpdate = throttle((value) => {
+  segmentedvalue.value = value;
+}, 500);
+
+function SelectorClick(value) {
+  throttledUpdate(value);
+}
 
 const segmentedvalue = ref(1);
 watch(refname, async (newQuestion, oldQuestion) => {
@@ -89,18 +93,62 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
 }
-.custom-style .el-segmented {
+.custom-style{
-  height: 70px;
+  width: 100%;
-  --el-segmented-item-selected-color: var(--el-text-color-primary);
+  height: 100px;
-  --el-segmented-item-selected-bg-color: @border-color;
+  display: flex;
-  --el-border-radius-base: 20px;
+  align-items: center;
-  -webkit-user-select: none;
+  justify-content:space-between;
-  -moz-user-select: none;
+}
-  -ms-user-select: none;
+.Selector{
-  user-select: none;
+  width: 420px;
+  height: 110px;
+}
+.card{
+  width: 100%;
+  height: 90px;
+  border-radius: 24px;
+  background-color: #CEF1EB;
+  border: 2px solid #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-icon{
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 .mine-content{
   width: 100%;
-  height: calc(100% - 70px);
+  height: calc(100% - 110px);
+  background-color: #ffffff;
+  border-radius: 16px;
+}
+.icon{
+  width:65px;
+  height: 65px;
+}
+.card-content{
+  margin-left: 62px;
+}
+.card-title{
+  font-size: 24px;
+  color: #636363;
+}
+.pk-info-icon {
+  width:50px;
+  height:72px;
+}
+.PointsList-icon{
+  width: 65px;
+  height: 69px;
+}
+.active{
+  background-image: linear-gradient(90deg, #E4FFFF, #FFFFFF);
+  border: 1px solid #03ABA8;
+}
+.active-text{
+  color: #03ABA8;
 }
 </style>

src/views/hosts/pk.vue

@@ -9,31 +9,22 @@
               <!-- 顶部面板 -->
               <div class="demo-panel">
                 <div class="controlPanel">
+                  <!-- 选择今日PK还是PK大厅 -->
                   <div
                     class="today"
-                    @click="PKistodayorhall = true"
+                    @touchstart="handleTouchStart"
-                    :style="{
+                    @touchmove="handleTouchMove"
-                      boxShadow: PKistodayorhall
+                    @touchend="handleTouchEnd"
-                        ? '0px 0px 10px rgba(0, 0, 0, 0.4)'
-                        : 'none',
-                      color: PKistodayorhall ? '#6c757d' : '',
-                    }"
                   >
-                    PK大厅
+                    <div class="today-text" @click="Switch">PK大厅</div>
+                    <div class="today-text" @click="Switch">今日PK</div>
+                    <!-- 滑块 -->
+                    <div class="slider">
+                      {{ PKistodayorhall ? "PK大厅" : "今日PK" }}
+                    </div>
                   </div>
-                  <div
+
-                    class="hall"
+                  <div class="selectbox">
-                    @click="PKistodayorhall = false"
-                    :style="{
-                      boxShadow: PKistodayorhall
-                        ? 'none'
-                        : '0px 0px 10px rgba(0, 0, 0, 0.4)',
-                      color: PKistodayorhall ? '' : '#6c757d',
-                    }"
-                  >
-                    今日PK
-                  </div>
-                  <div class="selectbox" :style="{flexDirection: PKistodayorhall? 'column' : 'row'}">
                     <!-- 国家 -->
                     <el-select-v2
                       v-model="countryvalue"
@@ -51,7 +42,6 @@
                       placeholder="请选择性别"
                       style="vertical-align: middle"
                       class="select"
-                      :style="{marginLeft: PKistodayorhall? '0px' : '30px'}"
                     />
                   </div>
                   <!-- 最大最小金币 -->
@@ -82,20 +72,37 @@
                       range-separator="至"
                       start-placeholder="最小PK时间"
                       end-placeholder="最大PK时间"
+                      format="YYYY/MM/DD hh:mm"
+                      value-format="x"
                     />
                   </div>
-                  <div class="btnbox" :style="{flexDirection: PKistodayorhall? 'column' : 'row',width: PKistodayorhall? '80px' : '190px'}">
+                  <div
+                    class="btnbox"
+                    :style="{
+                      flexDirection: PKistodayorhall ? 'column' : 'row',
+                      width: PKistodayorhall ? '5%' : '14%',
+                    }"
+                  >
+                    <!-- 搜索按钮 -->
                     <div
-                      class="primary search"
+                      class="search"
                       @click="search"
                       :style="{
-                        backgroundColor: searchStatus ? '#5a6268' : '',
+                        transform: searchStatus ? 'scale(1.1)' : '',
-                        color: searchStatus ? '#ffffff' : '',
+                        boxShadow: searchStatus
+                          ? '5px 5px 5px rgba(0, 0, 0, 0.5)'
+                          : 'none',
                       }"
-                    >
+                    ></div>
-                      搜索
+                    <!-- 重置按钮 -->
-                    </div>
+                    <div
-                    <div class="primary" @click="reset"  :style="{marginLeft: PKistodayorhall? '0px' : '30px'}">重置</div>
+                      class="primary"
+                      @click="reset"
+                      :style="{
+                        marginLeft: PKistodayorhall ? '0px' : '30px',
+                        marginTop: PKistodayorhall ? '10px' : '0px',
+                      }"
+                    ></div>
                   </div>
                 </div>
               </div>
@@ -118,20 +125,37 @@
                       >
                         <div class="infinite-card">
                           <!-- 头像 -->
-                          <div class="Avatar"></div>
+                          <div class="Avatar">
+                            <img
+                              style="width: 100%; height: 100%; border-radius: 500px"
+                              :src="item.anchorIcon"
+                              mode="scaleToFill"
+                            />
+                          </div>
                           <div class="Information">
                             <!-- 个人信息 -->
                             <div class="Information-Personal">
                               <div class="Information-name">
-                                来自世界上最长名的国家的某个人
+                                {{ item.disPlayId }}
+                              </div>
+                              <div
+                                class="Information-gender"
+                                :style="{
+                                  background: item.sex == 1 ? '#59D8DB' : '#F3876F',
+                                }"
+                              >
+                                {{ item.sex == 1 ? "男" : "女" }}
                               </div>
-                              <div class="Information-gender">女</div>
                               <div class="Information-Country">
-                                来自世界上最长名的国家的某个人
+                                {{ item.country }}
                               </div>
                             </div>
                             <!-- 时间 -->
-                            <div class="time">PK时间（北京时间）:2025-08-09 01:00</div>
+                            <div class="time">
+                              PK时间（本地时间）:{{
+                                TimestamptolocalTime(item.pkTime * 1000)
+                              }}
+                            </div>
                             <!--PK信息 -->
                             <div class="Information-PK">
                               <img
@@ -139,17 +163,17 @@
                                 src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                                 alt=""
                               />
-                              <div class="gold">金币：9999k</div>
+                              <div class="gold">金币：{{ item.coin }}K</div>
                               <img
                                 class="sessionimg"
                                 src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
                                 alt=""
                               />
-                              <div class="Session">场次：100场</div>
+                              <div class="Session">场次：{{ item.pkNumber }}场</div>
                             </div>
                             <!-- 备注信息 -->
                             <div class="Information-Remarks">
-                              这是一条备注信息他很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很
+                              {{ item.remark }}
                             </div>
                           </div>
                         </div>
@@ -162,17 +186,35 @@
                   <div class="demo-panel">
                     <div class="chat">
                       <div class="chat-name">来自世界上最长名的国家的某个人</div>
+                      <!-- 聊天列表 -->
                       <div class="chat-content"></div>
+                      <!-- 聊天输入框 -->
                       <div class="chat-input">
-                        <div class="chat-input-Controls"></div>
+                        <!-- 控件 -->
+                        <div class="chat-input-Controls">
+                          <!-- 其他的消息 -->
+                          <div class="chat-input-Other">
+                            <div class="messageModule"></div>
+                          </div>
+                          <!-- 发送 -->
+                          <div class="chat-input-Send">发送</div>
+                        </div>
+                        <!-- 输入框 -->
                         <div class="chat-input-Textarea">
-                          <el-input
+                          <div class="demo-panel">
-                            v-model="textarea"
+                            <div class="inputBox">
-                            style="width:100%"
+                              <div class="Console">
-                            :rows="4"
+                                <div class="Console-content"></div>
-                            type="textarea"
+                              </div>
-                            placeholder="请输入内容"
+                              <div class="input">
-                          />
+                                <textarea
+                                  v-model="textarea"
+                                  class="textarea"
+                                  style="width: 100%; height: 100%"
+                                />
+                              </div>
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -195,50 +237,266 @@ import {
   onMounted, // 组件挂载完成后执行
   onUpdated, // 组件更新后执行
   onUnmounted, // 组件销毁前执行
+  computed, // 计算属性
 } from "vue";
 import { getCountryNamesArray } from "../../utils/countryUtil";
-import { time } from "echarts";
+import { getPkList } from "@/api/account";
+import { setStorage, getStorage, getPromiseStorage } from "@/utils/storage.js";
+import { TimestamptolocalTime } from "@/utils/timeConversion.js";
+
+import { ElMessage } from "element-plus";
 const country = ref([]);
 country.value = getCountryNamesArray(); //国家条目
 const PKistodayorhall = ref(true); // 选择今日PK还是PK大厅/false 今日PK/true PK大厅
-const genderOptions = [
-  { value: 1, label: "男" },
-  { value: 2, label: "女" },
-]; // 性别选项
 const searchStatus = ref(false); // 搜索状态
-
 const countryvalue = ref(null); //选中的国家
 const gendervalue = ref(null); // 选中的性别
 const minnum = ref(null); // 最小金币
 const maxnum = ref(null); // 最大金币
 const timevalue = ref(null); // 时间
 const textarea = ref(""); // 聊天输入框
+const list = ref([]); // 列表数据
+const HallList = ref([]); // PK大厅列表数据
+const TodayList = ref([]); // PK列表数据
+const page = ref(0); // 页码
+const user = ref({}); // 用户信息
+const genderOptions = [
+  { value: 1, label: "男" },
+  { value: 2, label: "女" },
+]; // 性别选项
 
-const list = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]); // 列表数据
+// 获取pk列表
+function PkList(body) {
+  getPkList(body).then((res) => {
+    if (body.condition.type == 2 || body.condition.type == undefined) {
+      HallList.value.push(...res);
+      if (PKistodayorhall.value) {
+        list.value = HallList.value;
+      }
+    } else {
+      TodayList.value.push(...res);
+      if (!PKistodayorhall.value) {
+        list.value = TodayList.value;
+      }
+    }
+  });
+}
+// 加载更多
+function load() {
+  page.value++;
+  if (searchStatus.value) {
+    const body = {
+      status: 0,
+      page: page.value,
+      size: 10,
+      userId: user.value.id,
+      condition: {},
+    };
+    if (timevalue.value == null) {
+      if (PKistodayorhall.value) {
+        body.condition.type = 2;
+      } else {
+        body.condition.type = 2;
+      }
+    } else {
+      if (PKistodayorhall.value) {
+      } else {
+        body.condition.type = 1;
+      }
+    }
+    if (countryvalue.value != null) {
+      body.condition.country = countryvalue.value;
+    }
+    if (gendervalue.value != null) {
+      body.condition.sex = gendervalue.value;
+    }
 
-//搜索按钮
+    if (minnum.value != null && maxnum.value != null) {
-function search() {
+      body.condition.coin = {
-  searchStatus.value = true;
+        start: minnum.value,
+        end: maxnum.value,
+      };
+    } else if (minnum.value != null && maxnum.value == null) {
+      ElMessage.error("请输入最大金币数");
+      return;
+    } else if (minnum.value == null && maxnum.value != null) {
+      ElMessage.error("请输入最小金币数");
+      return;
+    }
+    if (timevalue.value != null) {
+      const currentTime = Date.now();
+      if (timevalue.value[0] < currentTime) {
+        ElMessage.error("开始时间不能小于当前时间");
+        return;
+      }
+      body.condition.pkTime = {
+        start: timevalue.value[0] / 1000,
+        end: timevalue.value[1] / 1000,
+      };
+    }
+    PkList(body);
+  } else {
+    const body = {
+      status: 0,
+      page: page.value,
+      size: 10,
+      userId: user.value.id,
+      condition: {},
+    };
+    if (timevalue.value == null) {
+      if (PKistodayorhall.value) {
+        body.condition.type = 2;
+      } else {
+        body.condition.type = 2;
+      }
+    } else {
+      if (PKistodayorhall.value) {
+      } else {
+        body.condition.type = 1;
+      }
+    }
+    PkList(body);
+  }
 }
 
+// 切换今日PK还是PK大厅
+function Switch() {
+  searchStatus.value = false;
+  PKistodayorhall.value = !PKistodayorhall.value;
+  if (PKistodayorhall.value) {
+    list.value = HallList.value;
+  } else {
+    list.value = TodayList.value;
+  }
+}
+
+//搜索按钮
+function search(data) {
+  const body = {
+    status: 0,
+    size: 10,
+    userId: user.value.id,
+    condition: {},
+  };
+  if (timevalue.value == null) {
+    if (PKistodayorhall.value) {
+      body.condition.type = 2;
+    } else {
+      body.condition.type = 2;
+    }
+  } else {
+    if (PKistodayorhall.value) {
+    } else {
+      body.condition.type = 1;
+    }
+  }
+  if (countryvalue.value != null) {
+    body.condition.country = countryvalue.value;
+  }
+  if (gendervalue.value != null) {
+    body.condition.sex = gendervalue.value;
+  }
+
+  if (minnum.value != null && maxnum.value != null) {
+    body.condition.coin = {
+      start: minnum.value,
+      end: maxnum.value,
+    };
+  } else if (minnum.value != null && maxnum.value == null) {
+    ElMessage.error("请输入最大金币数");
+    return;
+  } else if (minnum.value == null && maxnum.value != null) {
+    ElMessage.error("请输入最小金币数");
+    return;
+  }
+  if (timevalue.value != null) {
+    const currentTime = Date.now();
+      if (timevalue.value[0] < currentTime) {
+        ElMessage.error("开始时间不能小于当前时间");
+        return;
+      }
+    body.condition.pkTime = {
+      start: timevalue.value[0] / 1000,
+      end: timevalue.value[1] / 1000,
+    };
+  }
+  if (PKistodayorhall) {
+    HallList.value = [];
+  } else {
+    TodayList.value = [];
+  }
+  body.page = 0;
+  page.value = 0;
+  list.value = [];
+  if (data = 'Refresh') {
+    searchStatus.value = false;
+  }else{
+    searchStatus.value = true;
+  }
+  PkList(body);
+}
 //重置按钮
 function reset() {
   searchStatus.value = false;
-  countryvalue.value = null;
   gendervalue.value = null;
   minnum.value = null;
   maxnum.value = null;
+  countryvalue.value = null;
   timevalue.value = null;
+  page.value = 0;
+  search('Refresh');
 }
 
-function load() {} // 加载更多
+// 计算滑块位置
-
+const sliderPosition = computed(() => {
+  return PKistodayorhall.value ? "1%" : "13%";
+});
+// 触摸事件处理
+const touchStartX = ref(0);
+const touchEndX = ref(0);
+function handleTouchStart(e) {
+  touchStartX.value = e.touches[0].clientX;
+}
+function handleTouchMove(e) {
+  touchEndX.value = e.touches[0].clientX;
+}
+function handleTouchEnd() {
+  const diff = touchStartX.value - touchEndX.value;
+  if (Math.abs(diff) > 50) {
+    // 滑动阈值
+    PKistodayorhall.value = diff > 0;
+  }
+}
 const refname = ref(""); //
 watch(refname, async (newQuestion, oldQuestion) => {
   // 变化后执行
 });
 onMounted(() => {
-  // 组件挂载完成后执行
+  getPromiseStorage("user")
+    .then((res) => {
+      user.value = res;
+      PkList({
+        status: 0,
+        page: 1,
+        size: 10,
+        userId: user.value.id,
+        condition: {
+          type: 1,
+        },
+      });
+      PkList({
+        status: 0,
+        page: 1,
+        size: 10,
+        userId: user.value.id,
+        condition: {
+          type: 2,
+        },
+      });
+    })
+    .catch((err) => {
+      console.log(err);
+    });
 });
 onUpdated(() => {
   // 组件更新后执行
@@ -270,35 +528,39 @@ onUnmounted(() => {
 .controlPanel {
   width: 100%;
   height: 100%;
-  background-image: linear-gradient(
-    30deg,
-    @bg-Sidebar-color-bottom,
-    @bg-Sidebar-color-top
-  );
   display: flex;
   align-items: center;
   justify-content: space-around;
 }
 .today {
-  width: 150px;
+  width: 320px;
-  height: 50px;
+  height: 60px;
-  background-color: #ffffff;
+  background-color: #4fcacd;
-  border-radius: 50px;
+  border-radius: 30px;
-  transition: all 0.4s ease;
+  box-shadow: -5px 5px 6px #45aaac inset;
-  color: #e9e8e8;
+  display: flex;
-  font-size: 20px;
+  justify-content: space-around;
-  font-weight: bold;
+}
+.today-text {
+  width: 50%;
+  height: 60px;
   text-align: center;
-  line-height: 50px;
+  color: #ffffff;
-  letter-spacing: 3px;
+  font-size: 24px;
+  line-height: 60px;
 }
-.today:hover {
+.slider {
-  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+  position: absolute;
-  transform: scale(1.1);
+  width: 160px;
-  opacity: 0.8;
+  height: 60px;
-}
+  border-radius: 30px;
-.today:active {
+  color: #03aba8;
-  transform: scale(1.1) rotate(10deg);
+  text-align: center;
+  line-height: 60px;
+  font-size: 24px;
+  background-image: linear-gradient(180deg, #e4ffff, #ffffff);
+  left: v-bind(sliderPosition);
+  transition: left 0.3s ease;
 }
 .hall {
   width: 150px;
@@ -329,10 +591,12 @@ onUnmounted(() => {
 .select {
   width: 150px;
   margin-top: 10px;
+  margin-left: 50px;
 }
 .Goldcoinbox {
   width: 330px;
   display: flex;
+  margin-top: -5px;
   align-items: center;
   justify-content: space-between;
 }
@@ -355,8 +619,11 @@ onUnmounted(() => {
 }
 .timebox {
   width: 410px;
+  margin-top: 10px;
 }
 .btnbox {
+  padding-left: 20px;
+  padding-right: 20px;
   height: 100%;
   display: flex;
   justify-content: center;
@@ -365,28 +632,31 @@ onUnmounted(() => {
 .primary {
   width: 80px;
   height: 30px;
-  background-color: #e9e7e7;
+  border-radius: 5px;
-  border-radius: 10px;
+  background-image: url(../../assets/Reset.png);
-  color: @Supplementary-text-color;
+  background-size: 100% 100%;
-  font-size: 12px;
-  font-weight: bold;
-  text-align: center;
-  line-height: 30px;
-  letter-spacing: 2px;
   transition: all 0.4s ease;
 }
 .search {
-  margin-bottom: 20px;
+  width: 80px;
+  height: 30px;
+  border-radius: 5px;
+  background-image: url(../../assets/Search.png);
+  background-size: 100% 100%;
+  transition: all 0.4s ease;
+}
+.search:hover {
+  transform: scale(1.2);
+  opacity: 0.8;
 }
 .primary:hover {
-  background-color: #5a6268;
+  transform: scale(1.2);
-  color: #ffffff;
-  transform: scale(1.1);
   opacity: 0.8;
 }
 .infinite-list {
   width: 100%;
   height: 100%;
+  border-radius: 16px;
   background-color: #ffffff;
 }
 .infinite-list-item {
@@ -405,13 +675,14 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-between;
   background-image: linear-gradient(0deg, @bg-Sidebar-color-top, @bg-color);
-  border-radius: 20px;
+  border-radius: 11px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  background-image: url(../../assets/PKbackground.png);
+  background-size: 100% 100%;
   transition: all 0.4s ease;
 }
 .infinite-card:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-  transform: scale(1.1);
+  transform: scale(1.05);
   opacity: 0.8;
 }
 .Avatar {
@@ -423,7 +694,7 @@ onUnmounted(() => {
 }
 .Information {
   width: calc(100% - 160px);
-  height: 90%;
+  height: 80%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -443,7 +714,7 @@ onUnmounted(() => {
   height: 20px;
   background-color: #e9e7e7;
   border-radius: 10px;
-  color: @Prompt-text-color;
+  color: #ffffff;
   font-size: 12px;
   font-weight: bold;
   text-align: center;
@@ -454,9 +725,9 @@ onUnmounted(() => {
 .Information-Country {
   width: auto;
   height: 20px;
-  background-color: #e9e7e7;
+  background-color: #e4f9f9;
   border-radius: 10px;
-  color: @Prompt-text-color;
+  color: #03aba8;
   font-size: 12px;
   font-weight: bold;
   text-align: center;
@@ -500,11 +771,15 @@ onUnmounted(() => {
 .chat {
   width: 100%;
   height: 100%;
+  background-color: #ffffff;
+  border-top-right-radius: 16px;
+  border-left: 1px solid #03aba82f;
 }
 .chat-name {
   width: 100%;
   height: 50px;
   background-color: #ffffff;
+  border-radius: 16px;
   // border-bottom: 3px solid #b9b9b9;
   color: @Prompt-text-color;
   font-size: 16px;
@@ -518,21 +793,88 @@ onUnmounted(() => {
 }
 .chat-content {
   width: 100%;
-  height: calc(100% - 200px);
+  height: calc(100% - 170px);
 }
 .chat-input {
   width: 100%;
-  height: 150px;
+  height: 110px;
-  // border-top: 3px solid #b9b9b9;
+  // border-top: 1px solid #03aba8;
+  // background-color: #dfdfdf;
 }
 .chat-input-Controls {
   width: 100%;
   height: 50px;
-  background-color: @border-color;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.chat-input-Other {
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.messageModule {
+  width: 50px;
+  height: 50px;
+  background-color: #03aba8;
+}
+.chat-input-Send {
+  width: 20%;
+  height: 70%;
+  text-align: center;
+  line-height: 35px;
+  font-size: 16px;
+  color: #03aba8;
+  border-radius: 10px;
+  margin-right: 6px;
+  transition: all 0.4s ease;
+}
+.chat-input-Send:hover {
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
+  background-color: #03aba82d;
+  // color: #ffffff;
 }
 .chat-input-Textarea {
   width: 100%;
-  height: 80px;
+  height: 60px;
-  // background-color: #ffffff;
+}
+.inputBox {
+  width: 100%;
+  height: 100%;
+  border-top: 2px solid #03aba82f;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.input {
+  width: 98%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+}
+.textarea {
+  width: 90%;
+  height: 90%;
+  max-height: 90%;
+  border: none;
+  outline: none;
+  overflow: hidden;
+  background-color: #ff000000;
+  font-size: 12px;
+  margin-left: 5px;
+  margin-right: 5px;
+  color: #000000;
+  letter-spacing: 1px;
+  resize: none;
+}
+</style>
+
+<style>
+.el-splitter-bar__disable:before {
+  background-color: #ffffff00 !important;
 }
 </style>

src/views/nav.vue

@@ -30,16 +30,17 @@ html {
 .common-layout {
   width: 100vw;
   height: 100vh;
+  background-image: url(../assets/bg.png);
+  background-size: 100% 100%;
 }
 .nav-main {
   width: 95vw;
   height: 100vh;
-  background-color:@bg-color;
 }
 .nav-aside {
   width: 5vw;
   height: 100vh;
-  background-image: linear-gradient(0deg, @bg-Sidebar-color-top, @bg-color);
+  // background-image: linear-gradient(0deg, @bg-Sidebar-color-top, @bg-color);
-  border: 2px solid @border-color;
+  // border: 2px solid @border-color;
 }
 </style>

vue.config.js

@@ -8,8 +8,8 @@ module.exports = defineConfig({
         postcssOptions: {
           plugins: [
             require('postcss-px-to-viewport')({
-              viewportWidth: 1600, // 视窗的宽度，对应设计稿宽度
+              viewportWidth: 1920, // 视窗的宽度，对应设计稿宽度
-              viewportHeight: 900, // 视窗的高度，对应设计稿高度
+              viewportHeight: 1080, // 视窗的高度，对应设计稿高度
               unitPrecision: 3, // 指定 px 转换为视窗单位值的小数位数
               viewportUnit: 'vw', // 指定需要转换成的视窗单位，vw 或者 vh
               selectorBlackList: ['.ignore', '.hairlines'], // 指定不需要转换的类