优化代码
This commit is contained in:
pengxiaolong
@@ -1,71 +1,13 @@
|
||||
import { getAxios, postAxios, downFile } from '@/utils/axios.js'
|
||||
import { ElMessage } from 'element-plus';
|
||||
//租户获取登录id
|
||||
export function rentgetloginID(data) {
|
||||
return getAxios({ url: `/api/tenant/get-id-by-name?name=${data.name}`})
|
||||
//获取vx二维码
|
||||
export function getVxQrcode() {
|
||||
return getAxios({ url: 'user/qrcode' })
|
||||
}
|
||||
//获取扫码结果
|
||||
export function getScanResult(data) {
|
||||
return getAxios({ url: '/user/check/' + data})
|
||||
}
|
||||
//登录
|
||||
export function login(data) {
|
||||
return postAxios({ url: '/api/user/bigbrother-doLogin', data })
|
||||
}
|
||||
//获取国家
|
||||
export function getCountryinfo(data) {
|
||||
return postAxios({ url: '/api/common/country_info', data })
|
||||
}
|
||||
|
||||
//查询tk账号查询次数
|
||||
export function tkaccountuseinfo(accountName) {
|
||||
return getAxios({ url: `/api/common/accountCount?accountName=${accountName}` })
|
||||
}
|
||||
|
||||
export function tkhostdata(data) {
|
||||
return postAxios({ url: '/api/big-brother/page', data })
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export function apiGetCart() {
|
||||
return getAxios({ url: '/cgi-bin/cart/latest' })
|
||||
}
|
||||
// export function login(data) {
|
||||
// return postAxios({ url: 'api/account/login', data })
|
||||
// }
|
||||
export function cheekalive(data) {
|
||||
return postAxios({ url: 'api/account/cheekalive', data })
|
||||
}
|
||||
|
||||
export function dicts(data) {
|
||||
return postAxios({ url: 'api/param/dicts', data })
|
||||
}
|
||||
export function tkhostdetail(data) {
|
||||
return postAxios({ url: 'api/tkinfo/tkhostdetail', data })
|
||||
}
|
||||
//导出表格
|
||||
export function exporthosts(data) {
|
||||
return postAxios({ url: 'api/export/hostsinfo', data })
|
||||
}
|
||||
export function downList(url, data) {
|
||||
return downFile(url, data)
|
||||
}
|
||||
|
||||
//查询员工
|
||||
export function getStaffList(data) {
|
||||
return postAxios({ url: 'api/account/list', data })
|
||||
}
|
||||
//分配主播
|
||||
export function managerhosts(data) {
|
||||
return postAxios({ url: 'api/account/managerhosts', data })
|
||||
}
|
||||
//编辑主播
|
||||
export function upholdinfo(data) {
|
||||
return postAxios({ url: 'api/tkinfo/upholdinfo', data })
|
||||
}
|
||||
|
||||
//查看名字
|
||||
export function accountName(str) {
|
||||
return postAxios({ url: 'api/account/accountName?accounts=' + str })
|
||||
}
|
||||
|
||||
|
||||
BIN
src/assets/Email.png
Normal file
BIN
src/assets/Email.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/Password.png
Normal file
BIN
src/assets/Password.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/bg.png
Normal file
BIN
src/assets/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/switchEmail.png
Normal file
BIN
src/assets/switchEmail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
BIN
src/assets/switchvx.png
Normal file
BIN
src/assets/switchvx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
@@ -11,10 +11,104 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="Avatar">
|
||||
<img class="Avatar-img" src="@/assets/logo.png" alt="logo"></img>
|
||||
<div class="Avatar" >
|
||||
<el-popover placement="right-end" :width="200" trigger="click">
|
||||
<template #reference>
|
||||
<img class="Avatar-img" src="@/assets/logo.png" alt="logo"></img>
|
||||
</template>
|
||||
<div class="Avatar-content">
|
||||
<!-- 点击头像弹出框内容 -->
|
||||
<div class="Avatar-content-name">
|
||||
来自世界上最长名的国家的某个人
|
||||
</div>
|
||||
<div class="Avatar-content-btn" style="overflow:auto;">
|
||||
<div class="Avatar-list" v-for="(item, index) in Avatarlist" :key="index" @click="popoverClick(item.id)">
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加新PK弹窗 -->
|
||||
<el-drawer v-model="drawer">
|
||||
<!-- 添加或修改主播 -->
|
||||
<div class="demo-panel">
|
||||
<div class="add-anchor-library">
|
||||
<div class="title">发布新PK</div>
|
||||
<!-- <div class="title">
|
||||
修改PK信息
|
||||
</div> -->
|
||||
<div class="add-anchor-library-content">
|
||||
<div class="input-name">
|
||||
<!-- 主播名称 -->
|
||||
<el-input
|
||||
class="input-name-input"
|
||||
v-model="anchorName"
|
||||
size="large"
|
||||
placeholder="请输入主播名称"
|
||||
/>
|
||||
<div class="myanchor">
|
||||
<div class="myanchor-btn">选择我的主播</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="country">
|
||||
<!-- 国家 -->
|
||||
<el-select-v2
|
||||
v-model="countryvalue"
|
||||
filterable
|
||||
:options="country"
|
||||
placeholder="请选择国家"
|
||||
size="large"
|
||||
style="vertical-align: middle"
|
||||
class="select"
|
||||
/>
|
||||
</div>
|
||||
<div class="gender">
|
||||
<!-- 性别 -->
|
||||
<el-select-v2
|
||||
v-model="gendervalue"
|
||||
filterable
|
||||
:options="genderOptions"
|
||||
size="large"
|
||||
placeholder="请选择性别"
|
||||
style="vertical-align: middle"
|
||||
class="select"
|
||||
/>
|
||||
</div>
|
||||
<div class="timeselect">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetime"
|
||||
placeholder="选择PK时间"
|
||||
size="large"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
</div>
|
||||
<div class="Gold-sessions">
|
||||
<div class="Goldcoinbox-right">
|
||||
<div class="Goldcoinbox-text">金币数（单位为K）</div>
|
||||
<el-input-number
|
||||
v-model="maxnum"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="Goldcoinbox-right">
|
||||
<div class="Goldcoinbox-text">场次</div>
|
||||
<el-input-number
|
||||
v-model="maxnum"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Confirm">确认</div>
|
||||
<div class="Reset">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -29,7 +123,31 @@ import {
|
||||
onUpdated, // 组件更新后执行
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
import { getCountryNamesArray } from "../utils/countryUtil";
|
||||
|
||||
const country = ref([]);
|
||||
country.value = getCountryNamesArray(); //国家条目
|
||||
const genderOptions = [
|
||||
{ value: 1, label: "男" },
|
||||
{ value: 2, label: "女" },
|
||||
]; // 性别选项
|
||||
const gendervalue = ref(null); // 性别值
|
||||
const countryvalue = ref(null); //国家
|
||||
const anchorName = ref(null); // 主播名称
|
||||
const Avatarlist = [
|
||||
{
|
||||
name: '设置',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: '联系客服',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: '退出登录',
|
||||
id: 3,
|
||||
}
|
||||
]
|
||||
const NavigationModule = [
|
||||
{
|
||||
name: 'PK',
|
||||
@@ -61,28 +179,30 @@ const NavigationModule = [
|
||||
}
|
||||
|
||||
]
|
||||
const activeId = ref(1);
|
||||
const drawer = ref(false)
|
||||
const activeId = ref(null);
|
||||
function handleClick(path, id) {
|
||||
|
||||
if (id === 5) {
|
||||
|
||||
drawer.value = true;
|
||||
}else{
|
||||
activeId.value = id;
|
||||
setStorage('activeId', id);
|
||||
router.push(path);
|
||||
}
|
||||
}
|
||||
|
||||
function popoverClick(id) {
|
||||
|
||||
}
|
||||
|
||||
const refname = ref('');
|
||||
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
onMounted(() => {
|
||||
// 组件挂载完成后执行
|
||||
try{
|
||||
activeId.value = getStorage('activeId');
|
||||
0 }catch(e){
|
||||
activeId.value = 1
|
||||
}
|
||||
activeId.value = Number(getStorage('activeId')) || 1;
|
||||
});
|
||||
onBeforeMount(()=>{
|
||||
// 组件挂载前执行
|
||||
@@ -122,6 +242,49 @@ onUnmounted(() => {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50px;
|
||||
background-color: #ffffff;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Avatar:hover{
|
||||
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.08);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.Avatar-content{
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
.Avatar-content-name{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
color: @font-color;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid @border-color;
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.Avatar-content-btn{
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
.Avatar-list{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
color: @Prompt-text-color;
|
||||
font-size: 16px;
|
||||
}
|
||||
.Avatar-list:hover{
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.Avatar-img{
|
||||
width: 60px;
|
||||
@@ -131,7 +294,7 @@ onUnmounted(() => {
|
||||
}
|
||||
.Avatar-img:hover{
|
||||
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
transform: scale(1.08);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.Navigation{
|
||||
@@ -170,4 +333,135 @@ onUnmounted(() => {
|
||||
opacity: 0.8;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.demo-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.add-anchor-library {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
}
|
||||
.add-anchor-library-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.input-name {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
}
|
||||
.input-name-input {
|
||||
width: 50%;
|
||||
height: 40px;
|
||||
}
|
||||
.myanchor {
|
||||
width: 50%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.myanchor-btn {
|
||||
width: 90%;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
transition: all 0.4s ease;
|
||||
color: @Prompt-text-color;
|
||||
}
|
||||
.myanchor-btn:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.country {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.gender {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
.timeselect {
|
||||
width: 90%;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.Gold-sessions {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.Goldcoinbox-right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.Goldcoinbox-text {
|
||||
font-size: 12px;
|
||||
color: @Prompt-text-color;
|
||||
}
|
||||
.Confirm {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #ffffff;
|
||||
color: @Prompt-text-color;
|
||||
font-size: 20px;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.Confirm:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.Reset {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #ffffff;
|
||||
color: @Prompt-text-color;
|
||||
font-size: 20px;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.Reset:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<!-- 主播库 -->
|
||||
<div class="anchor-library">
|
||||
<el-splitter>
|
||||
<el-splitter-panel size="70%">
|
||||
<el-splitter-panel size="75%">
|
||||
<!-- 主播列表 -->
|
||||
<div class="demo-panel">
|
||||
<div
|
||||
@@ -52,7 +52,7 @@
|
||||
<div class="add-anchor-library-content">
|
||||
<div class="input-name">
|
||||
<!-- 主播名称 -->
|
||||
<el-input v-model="refname" size="large" placeholder="请输入主播名称" />
|
||||
<el-input v-model="anchorName" size="large" placeholder="请输入主播名称" />
|
||||
</div>
|
||||
<div class="country">
|
||||
<!-- 国家 -->
|
||||
@@ -97,16 +97,22 @@ import {
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
import { getCountryNamesArray } from "../../utils/countryUtil";
|
||||
const refname = ref("");
|
||||
|
||||
const country = ref([]);
|
||||
country.value = getCountryNamesArray(); //国家条目
|
||||
const genderOptions = [
|
||||
{ value: 1, label: "男" },
|
||||
{ value: 2, label: "女" },
|
||||
]; // 性别选项
|
||||
const gendervalue = ref(null); // 性别值
|
||||
const countryvalue = ref(null);//国家
|
||||
const anchorName = ref(null);// 主播名称
|
||||
const list = ref([{}, {}, {}, {}, {}, {}]);
|
||||
|
||||
function load() {}
|
||||
function load() {
|
||||
|
||||
}
|
||||
const refname = ref('');
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
@@ -154,7 +160,7 @@ onUnmounted(() => {
|
||||
}
|
||||
.card-content:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
transform: scale(1.08);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.card-avatar {
|
||||
|
||||
@@ -1,6 +1,96 @@
|
||||
<template>
|
||||
<!-- 我的PK记录 -->
|
||||
<div>我的PK记录</div>
|
||||
<!-- 我的PK记录 -->
|
||||
<div class="pk-record">
|
||||
<el-splitter>
|
||||
<el-splitter-panel>
|
||||
<div class="demo-panel">
|
||||
<!-- 选项卡 -->
|
||||
<div class="custom-style">
|
||||
<el-segmented v-model="segmentedvalue" :options="options" block>
|
||||
<template #default="scope">
|
||||
<div class="flex flex-col items-center gap-2 p-2">
|
||||
<el-icon size="1.5vw">
|
||||
<component :is="scope.item.icon" />
|
||||
</el-icon>
|
||||
<div>{{ scope.item.label }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-segmented>
|
||||
</div>
|
||||
<!-- list -->
|
||||
<div class="list" style="overflow: auto" v-infinite-scroll="load">
|
||||
<div v-for="(item, index) in list" :key="index" class="list-item">
|
||||
<div class="list-content">
|
||||
<div class="information">
|
||||
<div class="avatar">
|
||||
<!-- 头像 -->
|
||||
</div>
|
||||
<div class="content-left">
|
||||
<div class="name">来自世界上最长名的国家的某个人</div>
|
||||
<div class="time">PK时间：2025-07-31 19:07</div>
|
||||
<div class="gold">
|
||||
实际金币数：
|
||||
<div class="gold-num">10000W</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vs">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="information">
|
||||
<div class="content-right">
|
||||
<div class="name">来自世界上最长名的国家的某个人</div>
|
||||
<div class="time">PK时间：2025-07-31 19:07</div>
|
||||
<div class="gold">
|
||||
实际金币数：
|
||||
<div class="gold-num">10000W</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<!-- 头像 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-splitter-panel>
|
||||
<el-splitter-panel size="30%" :resizable="false" collapsible>
|
||||
<div class="demo-panel">
|
||||
<div class="PKbothinfo">
|
||||
<div class="PKbothinfo-left">
|
||||
<div class="PKbothinfo-avatar">
|
||||
<!-- 头像 -->
|
||||
</div>
|
||||
<div class="PKbothinfo-gold-num">总共：10000W</div>
|
||||
</div>
|
||||
<div class="PKbothinfo-right">
|
||||
<div class="PKbothinfo-avatar">
|
||||
<!-- 头像 -->
|
||||
</div>
|
||||
<div class="PKbothinfo-gold-num">总共：10000W</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="PKbothinfo-center" style="overflow: auto">
|
||||
<div
|
||||
class="PKbothinfolist-item"
|
||||
v-for="(item, index) in PKbothinfolist"
|
||||
:key="index"
|
||||
>
|
||||
<div class="PKbothinfolist-content">
|
||||
<div class="gold-left">10000W</div>
|
||||
<div class="gold-right">10000W</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-splitter-panel>
|
||||
</el-splitter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -11,7 +101,24 @@ import {
|
||||
onUpdated, // 组件更新后执行
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
const refname = ref('');
|
||||
import { Promotion, Tickets } from "@element-plus/icons-vue";
|
||||
const refname = ref("");
|
||||
const segmentedvalue = ref(1);
|
||||
const options = [
|
||||
{
|
||||
label: "我发布的PK",
|
||||
value: 1,
|
||||
icon: Tickets,
|
||||
},
|
||||
{
|
||||
label: "我邀请的PK",
|
||||
value: 2,
|
||||
icon: Promotion,
|
||||
},
|
||||
];
|
||||
const list = ref([{}, {}, {}, {}, {}, {}, {}]);
|
||||
const PKbothinfolist = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
|
||||
function load() {}
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
@@ -26,6 +133,214 @@ onUnmounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式定义 */
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
.pk-record {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
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%;
|
||||
}
|
||||
.list {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
.list-item {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.list-content {
|
||||
width: 90%;
|
||||
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);
|
||||
transition: all 0.4s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.list-content:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.08);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.vs {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.information {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.content-left {
|
||||
width: calc(100% - 150px);
|
||||
height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.content-right {
|
||||
width: calc(100% - 150px);
|
||||
height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.name {
|
||||
color: @font-color;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.time {
|
||||
color: @Prompt-text-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
.gold {
|
||||
color: @font-color;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.gold-num {
|
||||
color: @font-color;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.PKbothinfo {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
}
|
||||
.PKbothinfo-left {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-right: 1px solid @border-color;
|
||||
}
|
||||
.PKbothinfo-right {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-left: 1px solid @border-color;
|
||||
}
|
||||
.PKbothinfo-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.PKbothinfo-gold-num{
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: @font-color;
|
||||
}
|
||||
.PKbothinfo-center {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* 隐藏滚动条外观 */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
scrollbar-color: transparent; /* Firefox */
|
||||
|
||||
/* Webkit 浏览器（Chrome/Safari） */
|
||||
&::-webkit-scrollbar {
|
||||
display: none; /* 直接隐藏滚动条 */
|
||||
/* 或者透明处理 */
|
||||
/* width: 0; height: 0; */
|
||||
/* background: transparent; */
|
||||
}
|
||||
}
|
||||
.PKbothinfolist-item {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.PKbothinfolist-content {
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
transition: all 0.4s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.PKbothinfolist-content:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.02);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.gold-left {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
color: @font-color;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
border-right: 2px solid @lose-color;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
background-color: @lose-color;
|
||||
}
|
||||
.gold-right {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
color: @font-color;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
border-left: 2px solid @win-color;
|
||||
border-bottom-right-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: @win-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,149 @@
|
||||
<template>
|
||||
<!-- PK信息 -->
|
||||
<div>PK信息</div>
|
||||
<!-- PK信息 -->
|
||||
<div class="pk-message">
|
||||
<el-splitter>
|
||||
<el-splitter-panel>
|
||||
<div class="demo-panel">
|
||||
<div
|
||||
class="anchor-library-list"
|
||||
style="overflow: auto"
|
||||
v-infinite-scroll="load"
|
||||
>
|
||||
<div class="anchor-library-card" v-for="(item, index) in list" :key="index">
|
||||
<div class="card-content">
|
||||
<div class="card-avatar"></div>
|
||||
<div class="personalInformation">
|
||||
<div class="name">来自世界上最长名的国家的某个人</div>
|
||||
<div class="GenderAndCountry">
|
||||
<div class="Gender">女</div>
|
||||
<div class="Country">来自世界上最长名的国家的名称很长很长哦</div>
|
||||
<div class="goldbox">
|
||||
<img
|
||||
class="gold-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/species.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="gold">
|
||||
金币：
|
||||
<div class="gold-num">999999k</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time">PK时间:2025-08-31 14:06</div>
|
||||
</div>
|
||||
<div class="card-Operation">
|
||||
<div class="modify">
|
||||
<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
|
||||
class="delete-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/expurgate.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-splitter-panel>
|
||||
<el-splitter-panel size="25%" :resizable="false" collapsible>
|
||||
<!-- 添加或修改主播 -->
|
||||
<div class="demo-panel">
|
||||
<div class="add-anchor-library">
|
||||
<div class="title">发布新PK</div>
|
||||
<!-- <div class="title">
|
||||
修改PK信息
|
||||
</div> -->
|
||||
<div class="add-anchor-library-content">
|
||||
<div class="input-name">
|
||||
<!-- 主播名称 -->
|
||||
<el-input
|
||||
class="input-name-input"
|
||||
v-model="anchorName"
|
||||
size="large"
|
||||
placeholder="请输入主播名称"
|
||||
/>
|
||||
<div class="myanchor">
|
||||
<div class="myanchor-btn">选择我的主播</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="country">
|
||||
<!-- 国家 -->
|
||||
<el-select-v2
|
||||
v-model="countryvalue"
|
||||
filterable
|
||||
:options="country"
|
||||
placeholder="请选择国家"
|
||||
size="large"
|
||||
style="vertical-align: middle"
|
||||
class="select"
|
||||
/>
|
||||
</div>
|
||||
<div class="gender">
|
||||
<!-- 性别 -->
|
||||
<el-select-v2
|
||||
v-model="gendervalue"
|
||||
filterable
|
||||
:options="genderOptions"
|
||||
size="large"
|
||||
placeholder="请选择性别"
|
||||
style="vertical-align: middle"
|
||||
class="select"
|
||||
/>
|
||||
</div>
|
||||
<div class="timeselect">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetime"
|
||||
placeholder="选择PK时间"
|
||||
size="large"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
</div>
|
||||
<div class="Gold-sessions">
|
||||
<div class="Goldcoinbox-right">
|
||||
<div class="Goldcoinbox-text">金币数（单位为K）</div>
|
||||
<el-input-number
|
||||
v-model="maxnum"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="Goldcoinbox-right">
|
||||
<div class="Goldcoinbox-text">场次</div>
|
||||
<el-input-number
|
||||
v-model="maxnum"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Confirm">确认</div>
|
||||
<div class="Reset">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-splitter-panel>
|
||||
</el-splitter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -11,7 +154,23 @@ import {
|
||||
onUpdated, // 组件更新后执行
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
const refname = ref('');
|
||||
import { getCountryNamesArray } from "../../utils/countryUtil";
|
||||
|
||||
const country = ref([]);
|
||||
country.value = getCountryNamesArray(); //国家条目
|
||||
const genderOptions = [
|
||||
{ value: 1, label: "男" },
|
||||
{ value: 2, label: "女" },
|
||||
]; // 性别选项
|
||||
const gendervalue = ref(null); // 性别值
|
||||
const countryvalue = ref(null); //国家
|
||||
const anchorName = ref(null); // 主播名称
|
||||
const refname = ref("");
|
||||
const list = ref([{}, {}, {}, {}, {}]);
|
||||
|
||||
function load() {
|
||||
// 加载更多数据
|
||||
}
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
@@ -26,6 +185,250 @@ onUnmounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式定义 */
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
.pk-message {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.anchor-library-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.anchor-library-card {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
background-image: linear-gradient(45deg, @bg-Sidebar-color-bottom, @bg-color);
|
||||
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);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.card-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.personalInformation {
|
||||
width: calc(100% - 340px);
|
||||
height: 100px;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.GenderAndCountry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Gender {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
border-radius: 50px;
|
||||
background-color: #ffffff;
|
||||
padding: 2px 20px 2px 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.Country {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
border-radius: 50px;
|
||||
background-color: #ffffff;
|
||||
padding: 2px 20px 2px 20px;
|
||||
}
|
||||
.goldbox {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.gold-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.gold {
|
||||
color: @Prompt-text-color;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.gold-num {
|
||||
font-size: 16px;
|
||||
color: @font-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.time {
|
||||
font-size: 14px;
|
||||
color: @Prompt-text-color;
|
||||
}
|
||||
.card-Operation {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.modify-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.delete-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.add-anchor-library {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
}
|
||||
.add-anchor-library-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.input-name {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
}
|
||||
.input-name-input {
|
||||
width: 50%;
|
||||
height: 40px;
|
||||
}
|
||||
.myanchor {
|
||||
width: 50%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.myanchor-btn {
|
||||
width: 90%;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
transition: all 0.4s ease;
|
||||
color: @Prompt-text-color;
|
||||
}
|
||||
.myanchor-btn:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.country {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.gender {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
.timeselect {
|
||||
width: 90%;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.Gold-sessions {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.Goldcoinbox-right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.Goldcoinbox-text {
|
||||
font-size: 12px;
|
||||
color: @Prompt-text-color;
|
||||
}
|
||||
.Confirm {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #ffffff;
|
||||
color: @Prompt-text-color;
|
||||
font-size: 20px;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.Confirm:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.Reset {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #ffffff;
|
||||
color: @Prompt-text-color;
|
||||
font-size: 20px;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.Reset:hover {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,26 @@
|
||||
<template>
|
||||
<!-- 积分列表 -->
|
||||
<div>积分列表</div>
|
||||
<div class="points-list-container">
|
||||
<div class="points-list-title">
|
||||
我的积分:9999999999999999999999999999999
|
||||
</div>
|
||||
<div class="points-list" style="overflow: auto;">
|
||||
<div class="points-list-item" v-for="(item, index) in pointsList" :key="index">
|
||||
<div class="points-list-content">
|
||||
<div class="Event">
|
||||
签到增加积分
|
||||
</div>
|
||||
<div class="points-num">
|
||||
+200
|
||||
</div>
|
||||
<div class="time">
|
||||
2025-08-01 14:27
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -12,6 +32,7 @@ import {
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
const refname = ref('');
|
||||
const pointsList = ref([{},{},{},{},{},{},{},{},{},{},{},{},{},{}]);
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
@@ -26,6 +47,52 @@ onUnmounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式定义 */
|
||||
<style scoped lang="less">
|
||||
.points-list-container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.points-list{
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
.points-list-title{
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
color: @font-color;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
}
|
||||
.points-list-item{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items: center;
|
||||
}
|
||||
.points-list-content{
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background-color:@win-color;
|
||||
}
|
||||
.Event{
|
||||
color: @Supplementary-text-color;
|
||||
font-size: 16px;
|
||||
}
|
||||
.points-num{
|
||||
color: @font-color;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.time{
|
||||
color:@Prompt-text-color;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,18 @@
|
||||
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
|
||||
import emailRegistration from '../views/emailRegistration.vue'
|
||||
import { setStorage , getStorage } from '@/utils/storage.js';
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
name: 'login',
|
||||
component: HomeView
|
||||
},
|
||||
|
||||
{
|
||||
path: '/emailRegistration',
|
||||
name: 'emailRegistration',
|
||||
component: emailRegistration
|
||||
},
|
||||
{
|
||||
path: '/nav',
|
||||
name: 'nav',
|
||||
@@ -42,4 +47,23 @@ const router = createRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
// // 添加导航守卫
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// // 假设你有一个方法来检查用户是否已登录
|
||||
// const isAuthenticated = () => {
|
||||
// return localStorage.getItem('token') !== null;
|
||||
// };
|
||||
|
||||
// // 定义需要登录才能访问的路由
|
||||
// const requiresAuth = ['nav', 'pk', 'Forum', 'Message', 'Mine'];
|
||||
|
||||
// // 如果需要登录且用户未登录，则重定向到登录页面
|
||||
// if (requiresAuth.includes(to.name) && !isAuthenticated()) {
|
||||
// next({ name: 'login' });
|
||||
// } else {
|
||||
// next();
|
||||
// }
|
||||
// });
|
||||
|
||||
export default router
|
||||
|
||||
|
||||
@@ -5,6 +5,11 @@
|
||||
@bg-Sidebar-color-bottom: #E9ECEF; // 侧边栏底色
|
||||
@Supplementary-text-color: #495057; // 补充文字色
|
||||
@Prompt-text-color: #6c757d; // 提示文字色
|
||||
@Warning-text-color: #FFC107; // 警告文字色
|
||||
@Error-text-color: #DC3545; // 错误文字色
|
||||
@Success-text-color: #28A745; // 成功文字色
|
||||
@lose-color: #ff000010; // 输赢颜色
|
||||
@win-color: #0099ff10; // 输赢颜色
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -7,49 +7,33 @@ import { getToken, getUser } from '@/utils/storage'
|
||||
import router from '@/router'
|
||||
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { usePythonBridge, } from '@/utils/pythonBridge'
|
||||
import { ref } from 'vue';
|
||||
import { defineStore } from 'pinia'
|
||||
import { tokenStore,UserStore } from '@/stores/notice'
|
||||
|
||||
|
||||
|
||||
|
||||
const { stopScript } = usePythonBridge();
|
||||
import { tokenStore, UserStore } from '@/stores/notice'
|
||||
|
||||
|
||||
// 请求地址前缀
|
||||
let baseURL = ''
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// 生产环境
|
||||
// baseURL = "https://api.tkpage.yolozs.com"
|
||||
baseURL = "http://47.79.98.113:8101"
|
||||
// baseURL = "http://192.168.0.103:8085/"
|
||||
// baseURL = "http://192.168.1.174:8101"
|
||||
baseURL = "http://192.168.1.174:8086/"
|
||||
} else {
|
||||
// 测试环境
|
||||
// baseURL = "http://120.26.251.180:8085/"
|
||||
// 开发环境
|
||||
// baseURL = "https://api.tkpage.yolozs.com"
|
||||
baseURL = "http://47.79.98.113:8101"
|
||||
// baseURL = "http://192.168.1.174:8101"
|
||||
// baseURL = "http://api.tkpage.vvtiktok.cn"
|
||||
baseURL = "http://192.168.1.174:8086/"
|
||||
}
|
||||
|
||||
// 请求拦截器
|
||||
axios.interceptors.request.use((config) => {
|
||||
const tokenCache = tokenStore()
|
||||
console.log("config", config)
|
||||
const url = sliceUrl(config.url)
|
||||
console.log("url", url)
|
||||
// 请求超时时间 - 毫秒
|
||||
config.timeout = 60000
|
||||
config.baseURL = baseURL
|
||||
// 自定义Content-type
|
||||
config.headers['Content-type'] = 'application/json'
|
||||
if (!(config.url == 'bigbrother-doLogin' || config.url == 'get-id-by-name')) {
|
||||
config.headers['vvtoken'] = tokenCache.token;
|
||||
}
|
||||
// if (!(config.url == '' || config.url == '')) {
|
||||
// config.headers['vvtoken'] = tokenCache.token;
|
||||
// }
|
||||
|
||||
return config;
|
||||
}, (error) => {
|
||||
@@ -59,17 +43,16 @@ axios.interceptors.request.use((config) => {
|
||||
// 响应拦截器
|
||||
axios.interceptors.response.use((response) => {
|
||||
console.log("response", response.data)
|
||||
if (response.data.code == 0) {
|
||||
console.log("response", response.data.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{
|
||||
} else {
|
||||
ElMessage.error(response.data.code + '' + response.data.message);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}, (error) => {
|
||||
// 可添加请求失败后的处理逻辑
|
||||
@@ -161,7 +144,6 @@ function cheekalive() {
|
||||
if (res.data) {
|
||||
|
||||
} else {
|
||||
stopScript();
|
||||
alert("账号在其他地方登录！")
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
@@ -1,30 +1,241 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div class="HomeView">
|
||||
<div class="login">
|
||||
<!-- 登录切换 -->
|
||||
<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/switchvx.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 标题 -->
|
||||
<div v-if="!refSwitch" class="container">
|
||||
<div class="title">欢迎登录</div>
|
||||
<div class="striping"></div>
|
||||
<div class="input-Email">
|
||||
<img class="Emailimg" src="../assets/Email.png" alt="" />
|
||||
<div class="vertical"></div>
|
||||
<input
|
||||
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
|
||||
class="input-text"
|
||||
v-model="refpassword"
|
||||
placeholder="请输入密码"
|
||||
type="password"
|
||||
placeholder-class="input-placeholder"
|
||||
@input=""
|
||||
/>
|
||||
</div>
|
||||
<div class="login-btn">登录</div>
|
||||
</div>
|
||||
<!-- 微信登录 -->
|
||||
<div v-if="refSwitch" class="container">
|
||||
<div class="title">微信小程序登录</div>
|
||||
<div class="striping"></div>
|
||||
<img class="qrcode" :src="Qrcode.qrcode" alt="">
|
||||
<div class="qrcode-text">使用微信小程序扫描二维码登录</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref, // 响应式基础
|
||||
watch, // 侦听器
|
||||
onMounted, // 组件挂载完成后执行
|
||||
onUpdated, // 组件更新后执行
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
const refname = ref('');
|
||||
import { ref, watch, onMounted, onUnmounted } from "vue";
|
||||
import { getVxQrcode,getScanResult } from "@/api/account"; // 导入登录接口
|
||||
|
||||
const refname = ref("");
|
||||
const refEmail = ref(""); // 邮箱
|
||||
const refpassword = ref(""); // 密码
|
||||
const refSwitch = ref(false); // 登录切换/true:微信登录/false:邮箱登录
|
||||
const Qrcode = ref(""); // 二维码
|
||||
|
||||
// 登录切换
|
||||
let vxloginstatus;
|
||||
function fuSWitch() {
|
||||
refSwitch.value = !refSwitch.value;
|
||||
if (refSwitch.value) {
|
||||
vxloginstatus =setInterval(checkLogin, 2000);
|
||||
} else {
|
||||
console.log("邮箱登录");
|
||||
clearInterval(vxloginstatus);
|
||||
}
|
||||
}
|
||||
|
||||
// 验证邮箱地址
|
||||
function isValidEmail(email) {
|
||||
// 邮箱地址的正则表达式
|
||||
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||
return emailRegex.test(email);
|
||||
}
|
||||
|
||||
// 获取二维码
|
||||
function fetchQrcode() {
|
||||
getVxQrcode().then((res) => {
|
||||
Qrcode.value = res;
|
||||
console.log(res);
|
||||
});
|
||||
}
|
||||
//查询微信扫码是否成功
|
||||
function checkLogin() {
|
||||
getScanResult(Qrcode.value.uuid).then((res) => {
|
||||
|
||||
});
|
||||
}
|
||||
// 轮询查询登录状态
|
||||
let pollInterval;
|
||||
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 组件挂载完成后执行
|
||||
});
|
||||
onUpdated(() => {
|
||||
// 组件更新后执行
|
||||
// 初始化获取二维码
|
||||
fetchQrcode();
|
||||
// 设置每两分钟轮询一次
|
||||
pollInterval = setInterval(fetchQrcode, 120000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 组件销毁前执行
|
||||
// 清除轮询
|
||||
clearInterval(pollInterval);
|
||||
clearInterval(vxloginstatus);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式定义 */
|
||||
</style>
|
||||
.HomeView {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-image: url(../assets/bg.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.login {
|
||||
width: 627px;
|
||||
height: 514px;
|
||||
background-image: linear-gradient(180deg, #dbf0f1, #ffffff);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #4fcacd;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.Switch {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
.Switch-content {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
margin-top: 7px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.Switchimg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.title {
|
||||
font-size: 36px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-top: -31px;
|
||||
}
|
||||
.striping {
|
||||
width: 68px;
|
||||
height: 3px;
|
||||
background-color: #0aaeab;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.qrcode{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.qrcode-text{
|
||||
color: #333333;
|
||||
font-size: 18px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.input-Email {
|
||||
width: 488px;
|
||||
height: 71px;
|
||||
border-radius: 4px;
|
||||
background-color: #f4f4f4;
|
||||
border: 1px solid #e4e4e4;
|
||||
margin-top: 43px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Emailimg {
|
||||
width: 28.7px;
|
||||
height: 22.2px;
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
.vertical {
|
||||
width: 1px;
|
||||
height: 38px;
|
||||
background-color: #d9d9d9;
|
||||
margin-right: 25px;
|
||||
}
|
||||
.input-text {
|
||||
width: 360px;
|
||||
height: 38px;
|
||||
border: none;
|
||||
background-color: #0aaeab00;
|
||||
font-size: 20px;
|
||||
color: #999999;
|
||||
}
|
||||
.input-text:focus {
|
||||
outline: none; /* 移除默认蓝色边框 */
|
||||
}
|
||||
.input-Password {
|
||||
width: 488px;
|
||||
height: 71px;
|
||||
border-radius: 4px;
|
||||
background-color: #f4f4f4;
|
||||
border: 1px solid #e4e4e4;
|
||||
margin-top: 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Passwordimg {
|
||||
width: 26.4px;
|
||||
height: 29.3px;
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
.login-btn {
|
||||
width: 487px;
|
||||
height: 70px;
|
||||
border-radius: 4px;
|
||||
background-image: linear-gradient(0deg, #4fcacd, #5fdbde);
|
||||
margin-top: 38px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
font-size: 30px;
|
||||
font-weight: Medium;
|
||||
box-shadow: 0px 5px 15px rgba(15, 101, 98, 0.43);
|
||||
}
|
||||
</style>
|
||||
|
||||
34
src/views/emailRegistration.vue
Normal file
34
src/views/emailRegistration.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="email-registration">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref, // 响应式基础
|
||||
watch, // 侦听器
|
||||
onMounted, // 组件挂载完成后执行
|
||||
onUpdated, // 组件更新后执行
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
const refname = ref('');
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
onMounted(() => {
|
||||
// 组件挂载完成后执行
|
||||
});
|
||||
onUpdated(() => {
|
||||
// 组件更新后执行
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// 组件销毁前执行
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式定义 */
|
||||
</style>
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<!-- 站内信 -->
|
||||
<div class="forum">
|
||||
<div v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<!-- 消息页面 -->
|
||||
<div class="message">
|
||||
<div style="height: 100%">
|
||||
<el-splitter>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<!-- 我的 -->
|
||||
<div class="mine">
|
||||
<div class="custom-style">
|
||||
<el-segmented v-model="segmentedvalue" :options="options" block>
|
||||
@@ -13,10 +14,10 @@
|
||||
</el-segmented>
|
||||
</div>
|
||||
<div class="mine-content">
|
||||
<PointsList v-if="segmentedvalue === 4" />
|
||||
<PKRecord v-if="segmentedvalue === 3" />
|
||||
<PKmessage v-if="segmentedvalue === 2" />
|
||||
<AnchorLibrary v-if="segmentedvalue === 1" />
|
||||
<PointsList v-show="segmentedvalue === 4" />
|
||||
<PKRecord v-show="segmentedvalue === 3" />
|
||||
<PKmessage v-show="segmentedvalue === 2" />
|
||||
<AnchorLibrary v-show="segmentedvalue === 1" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="pk">
|
||||
<!-- -->
|
||||
<!-- pK页面 -->
|
||||
<div class="el-scrollbar__wrap">
|
||||
<el-splitter>
|
||||
<el-splitter-panel collapsible>
|
||||
|
||||
Reference in New Issue
Block a user