diff --git a/postcss.config.js b/postcss.config.js index e994077..432b478 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,8 +1,8 @@ module.exports = { plugins: { 'postcss-px-to-viewport': { - viewportWidth: 1600, // 视窗的宽度，对应设计稿宽度 - viewportHeight: 900, // 视窗的高度，对应设计稿高度 + viewportWidth: 1920, // 视窗的宽度，对应设计稿宽度 + viewportHeight: 1080, // 视窗的高度，对应设计稿高度 unitPrecision: 3, // 指定 px 转换为视窗单位值的小数位数 viewportUnit: 'vw', // 指定需要转换成的视窗单位，vw 或者 vh selectorBlackList: ['.ignore', '.hairlines'], // 指定不需要转换的类 diff --git a/src/api/account.js b/src/api/account.js index 441b7e5..aa83256 100644 --- a/src/api/account.js +++ b/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 }) } diff --git a/src/assets/AnchorLibrary.png b/src/assets/AnchorLibrary.png new file mode 100644 index 0000000..a6126ae Binary files /dev/null and b/src/assets/AnchorLibrary.png differ diff --git a/src/assets/Delete.png b/src/assets/Delete.png new file mode 100644 index 0000000..b65c7d9 Binary files /dev/null and b/src/assets/Delete.png differ diff --git a/src/assets/Editor.png b/src/assets/Editor.png new file mode 100644 index 0000000..2a349ec Binary files /dev/null and b/src/assets/Editor.png differ diff --git a/src/assets/InTotal.png b/src/assets/InTotal.png new file mode 100644 index 0000000..15fb73d Binary files /dev/null and b/src/assets/InTotal.png differ diff --git a/src/assets/Invitation.png b/src/assets/Invitation.png new file mode 100644 index 0000000..89e316f Binary files /dev/null and b/src/assets/Invitation.png differ diff --git a/src/assets/InvitationSelected.png b/src/assets/InvitationSelected.png new file mode 100644 index 0000000..8462bdb Binary files /dev/null and b/src/assets/InvitationSelected.png differ diff --git a/src/assets/PKInformation.png b/src/assets/PKInformation.png new file mode 100644 index 0000000..fa065e2 Binary files /dev/null and b/src/assets/PKInformation.png differ diff --git a/src/assets/PKRecord.png b/src/assets/PKRecord.png new file mode 100644 index 0000000..d99ca32 Binary files /dev/null and b/src/assets/PKRecord.png differ diff --git a/src/assets/PKbackground.png b/src/assets/PKbackground.png new file mode 100644 index 0000000..5c79c33 Binary files /dev/null and b/src/assets/PKbackground.png differ diff --git a/src/assets/Points.png b/src/assets/Points.png new file mode 100644 index 0000000..b57c914 Binary files /dev/null and b/src/assets/Points.png differ diff --git a/src/assets/PointsList.png b/src/assets/PointsList.png new file mode 100644 index 0000000..3be5f81 Binary files /dev/null and b/src/assets/PointsList.png differ diff --git a/src/assets/Publish.png b/src/assets/Publish.png new file mode 100644 index 0000000..e3938a1 Binary files /dev/null and b/src/assets/Publish.png differ diff --git a/src/assets/PublishSelected.png b/src/assets/PublishSelected.png new file mode 100644 index 0000000..dd02ad6 Binary files /dev/null and b/src/assets/PublishSelected.png differ diff --git a/src/assets/Reset.png b/src/assets/Reset.png new file mode 100644 index 0000000..24d7a89 Binary files /dev/null and b/src/assets/Reset.png differ diff --git a/src/assets/Search.png b/src/assets/Search.png new file mode 100644 index 0000000..e49338c Binary files /dev/null and b/src/assets/Search.png differ diff --git a/src/assets/embellish.png b/src/assets/embellish.png new file mode 100644 index 0000000..6da63a9 Binary files /dev/null and b/src/assets/embellish.png differ diff --git a/src/assets/selectSidebar.png b/src/assets/selectSidebar.png new file mode 100644 index 0000000..92cf220 Binary files /dev/null and b/src/assets/selectSidebar.png differ diff --git a/src/assets/topPosition.png b/src/assets/topPosition.png new file mode 100644 index 0000000..c3943bb Binary files /dev/null and b/src/assets/topPosition.png differ diff --git a/src/assets/unpinned.png b/src/assets/unpinned.png new file mode 100644 index 0000000..7b69c97 Binary files /dev/null and b/src/assets/unpinned.png differ diff --git a/src/components/Appaside.vue b/src/components/Appaside.vue index 8596403..fbaef8c 100644 --- a/src/components/Appaside.vue +++ b/src/components/Appaside.vue @@ -5,16 +5,22 @@
-
- -
{{ item.name }}
+
+ + + +
{{ item.name }}
- + -
@@ -31,7 +37,7 @@
- +
@@ -114,6 +120,7 @@ diff --git a/src/components/mineSubComponent/PointsList.vue b/src/components/mineSubComponent/PointsList.vue index bd092f7..1d4e64f 100644 --- a/src/components/mineSubComponent/PointsList.vue +++ b/src/components/mineSubComponent/PointsList.vue @@ -2,7 +2,17 @@
- 我的积分:9999999999999999999999999999999 + +
+ 我的积分: +
+ 9999999999999999999999999999999 +
+
@@ -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; - line-height: 70px; + display: flex; + 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; diff --git a/src/main.js b/src/main.js index 672999b..cd461f2 100644 --- a/src/main.js +++ b/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 diff --git a/src/stores/notice.js b/src/stores/notice.js index 574f36a..57b6911 100644 --- a/src/stores/notice.js +++ b/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 diff --git a/src/utils/axios.js b/src/utils/axios.js index 9ef9669..1742a16 100644 --- a/src/utils/axios.js +++ b/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 == '')) { - // config.headers['vvtoken'] = tokenCache.token; - // } + if (!(config.url == 'getVxQrcode' || config.url == 'getScanResult'||config.url == 'register')) { + 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) - 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); - } - - - + return addPrefixToHeaderIcon(response.data) }, (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) - // 请求失败，将错误信息传递给reject函数 + if (res.code == 200) { + 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) => { - // 发送请求，获取文件流 - const response = await axios.post(urlstr, data, { responseType: 'blob' }); +// export const downFile = async (urlstr, data) => { - // 获取文件名（如果后端设置了 Content-Disposition） - const contentDisposition = response.headers['content-disposition']; - 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]; - } - } +// // 发送请求，获取文件流 +// const response = await axios.post(urlstr, data, { responseType: 'blob' }); - // 创建一个临时的下载链接 - 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(); +// // 获取文件名（如果后端设置了 Content-Disposition） +// const contentDisposition = response.headers['content-disposition']; +// 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]; +// } +// } - // 释放 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() { - const userCache = UserStore() - const tokenCache = tokenStore() - axios.post('api/account/cheekalive', { - userId: userCache.user.id, - currcode: tokenCache.token, - }, - { - headers: { - 'Content-Type': 'application/x-www-form-urlencoded' - } - } - ).then(res => { - console.log(res.data) - if (res.data) { +// } +// //请求前验证 +// function cheekalive() { +// const userCache = UserStore() +// const tokenCache = tokenStore() +// axios.post('api/account/cheekalive', { +// userId: userCache.user.id, +// currcode: tokenCache.token, +// }, +// { +// headers: { +// 'Content-Type': 'application/x-www-form-urlencoded' +// } +// } +// ).then(res => { +// console.log(res.data) +// if (res.data) { - } else { - alert("账号在其他地方登录！") - window.location.href = '/'; - } +// } else { +// alert("账号在其他地方登录！") +// window.location.href = '/'; +// } - }) -} -//节流函数 -function throttle(func, limit) { - let inThrottle; - return function () { - const args = arguments; - const context = this; - if (!inThrottle) { - func.apply(context, args); - inThrottle = true; - setTimeout(() => inThrottle = false, limit); - } - } -} +// }) +// } +// //节流函数 +// function throttle(func, limit) { +// let inThrottle; +// return function () { +// const args = arguments; +// const context = this; +// if (!inThrottle) { +// func.apply(context, args); +// inThrottle = true; +// setTimeout(() => inThrottle = false, limit); +// } +// } +// } function sliceUrl(url) { const lastSlash = url.lastIndexOf('/'); diff --git a/src/utils/storage.js b/src/utils/storage.js index 6533c37..c07ed31 100644 --- a/src/utils/storage.js +++ b/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() { diff --git a/src/utils/timeConversion.js b/src/utils/timeConversion.js new file mode 100644 index 0000000..6985936 --- /dev/null +++ b/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}`; +} diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 576ed39..ea70749 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -4,7 +4,12 @@
- +
@@ -15,66 +20,98 @@
-
-
- +
微信小程序登录
- +
使用微信小程序扫描二维码登录
+
+
还没有账号？
+
注册
+
\ No newline at end of file +.email-registration { + 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; +} + diff --git a/src/views/hosts/Forum.vue b/src/views/hosts/Forum.vue index f188206..2ad5110 100644 --- a/src/views/hosts/Forum.vue +++ b/src/views/hosts/Forum.vue @@ -3,16 +3,18 @@
- + -

{{ "List item " + o }}

+
+ {{ item.content }} +
@@ -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; +} diff --git a/src/views/hosts/Message.vue b/src/views/hosts/Message.vue index b20ab17..5dda02f 100644 --- a/src/views/hosts/Message.vue +++ b/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; diff --git a/src/views/hosts/Mine.vue b/src/views/hosts/Mine.vue index fa7e3a7..e016304 100644 --- a/src/views/hosts/Mine.vue +++ b/src/views/hosts/Mine.vue @@ -2,22 +2,22 @@
- - - +
- - - - + + + +
@@ -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, - icon: List, + value: 3, + 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 { - height: 70px; - --el-segmented-item-selected-color: var(--el-text-color-primary); - --el-segmented-item-selected-bg-color: @border-color; - --el-border-radius-base: 20px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +.custom-style{ + width: 100%; + height: 100px; + display: flex; + align-items: center; + justify-content:space-between; +} +.Selector{ + 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; } \ No newline at end of file diff --git a/src/views/hosts/pk.vue b/src/views/hosts/pk.vue index 0d99ff6..8debf50 100644 --- a/src/views/hosts/pk.vue +++ b/src/views/hosts/pk.vue @@ -9,31 +9,22 @@
+
- PK大厅 +
PK大厅
+
今日PK
+ +
+ {{ PKistodayorhall ? "PK大厅" : "今日PK" }} +
-
- 今日PK -
-
+ +
@@ -82,20 +72,37 @@ range-separator="至" start-placeholder="最小PK时间" end-placeholder="最大PK时间" + format="YYYY/MM/DD hh:mm" + value-format="x" />
-
+
+
- 搜索 -
-
重置
+ >
+ +
@@ -118,20 +125,37 @@ >
-
+
+ +
- 来自世界上最长名的国家的某个人 + {{ item.disPlayId }} +
+
+ {{ item.sex == 1 ? "男" : "女" }}
-
女
- 来自世界上最长名的国家的某个人 + {{ item.country }}
-
PK时间（北京时间）:2025-08-09 01:00
+
+ PK时间（本地时间）:{{ + TimestamptolocalTime(item.pkTime * 1000) + }} +
-
金币：9999k
+
金币：{{ item.coin }}K
-
场次：100场
+
场次：{{ item.pkNumber }}场
- 这是一条备注信息他很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很 + {{ item.remark }}
@@ -162,17 +186,35 @@
来自世界上最长名的国家的某个人
+
+
-
+ +
+ +
+
+
+ +
发送
+
+
- +
+
+
+
+
+
+