优化代码
This commit is contained in:
pengxiaolong
173
src/components/Appaside.vue
Normal file
173
src/components/Appaside.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="app-aside">
|
||||
<div class="logo">
|
||||
<img class="logo-img" src="@/assets/logo.png" alt="logo"></img>
|
||||
</div>
|
||||
<div class="Navigation">
|
||||
|
||||
<div class="Navigation-card" v-for="(item, index) in NavigationModule" :key="index" @click="handleClick(item.path, item.id)" :style="{backgroundColor: item.id === activeId|| item.id === 5? '#ffffff' : '' ,boxShadow: item.id === activeId|| item.id === 5? '5px 5px 15px rgba(0, 0, 0, 0.3)' : ''}">
|
||||
<img class="Navigation-card-icon-img" :src="item.icon" alt="">
|
||||
<div class="Navigation-card-name">{{ item.name }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="Avatar">
|
||||
<img class="Avatar-img" src="@/assets/logo.png" alt="logo"></img>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import { setStorage , getStorage } from '@/utils/storage.js';
|
||||
const router = useRouter();
|
||||
import {
|
||||
ref, // 响应式基础
|
||||
watch, // 侦听器
|
||||
onMounted, // 组件挂载完成后执行
|
||||
onBeforeMount, // 组件挂载前执行
|
||||
onUpdated, // 组件更新后执行
|
||||
onUnmounted, // 组件销毁前执行
|
||||
} from "vue";
|
||||
|
||||
const NavigationModule = [
|
||||
{
|
||||
name: 'PK',
|
||||
id: 1,
|
||||
path: '/nav/PK',
|
||||
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Pk.png'
|
||||
},
|
||||
{
|
||||
name: '站内信',
|
||||
id: 2,
|
||||
path: '/nav/Forum',
|
||||
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Forum.png'
|
||||
},
|
||||
{
|
||||
name: '消息',
|
||||
id: 3,
|
||||
path: '/nav/Message',
|
||||
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Message.png'
|
||||
},
|
||||
{
|
||||
name: '我的',
|
||||
id: 4,
|
||||
path: '/nav/Mine',
|
||||
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Mine.png'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/push.png'
|
||||
}
|
||||
|
||||
]
|
||||
const activeId = ref(1);
|
||||
function handleClick(path, id) {
|
||||
|
||||
if (id === 5) {
|
||||
|
||||
}else{
|
||||
activeId.value = id;
|
||||
router.push(path);
|
||||
}
|
||||
}
|
||||
const refname = ref('');
|
||||
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
onMounted(() => {
|
||||
// 组件挂载完成后执行
|
||||
try{
|
||||
activeId.value = getStorage('activeId');
|
||||
0 }catch(e){
|
||||
activeId.value = 1
|
||||
}
|
||||
});
|
||||
onBeforeMount(()=>{
|
||||
// 组件挂载前执行
|
||||
});
|
||||
onUpdated(() => {
|
||||
// 组件更新后执行
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// 组件销毁前执行
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.app-aside{
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content:space-between;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.logo{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-top: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.logo-img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.Avatar{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.Avatar-img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.Avatar-img:hover{
|
||||
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.Navigation{
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.Navigation-card{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.Navigation-card-icon{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.Navigation-card-icon-img{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.Navigation-card-name{
|
||||
font-size: 12px;
|
||||
color:@Prompt-text-color;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.Navigation-card:hover{
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@@ -1,160 +0,0 @@
|
||||
<template>
|
||||
<div ref="chart" style="width: 500px; height: 300px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { tkhostdata, dicts, tkhostdetail } from '@/api/account';
|
||||
|
||||
export default {
|
||||
name: 'EChartsComponent',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
dataType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
time: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
seriesData: [],
|
||||
num: 0,
|
||||
inputTime: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.inputTime = this.time
|
||||
this.getTkhostdetail();
|
||||
console.log(this.time)
|
||||
|
||||
console.log(this.getPrevious7Days(this.inputTime))
|
||||
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
if (!this.$refs.chart) {
|
||||
console.error('DOM element not found');
|
||||
return;
|
||||
}
|
||||
const myChart = echarts.init(this.$refs.chart);
|
||||
const option = {
|
||||
title: {
|
||||
text: this.title
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: [this.title]
|
||||
},
|
||||
xAxis: {
|
||||
data: [this.getPrevious7Days(this.inputTime)[0].slice(4), this.getPrevious7Days(this.inputTime)[1].slice(4), this.getPrevious7Days(this.inputTime)[2].slice(4), this.getPrevious7Days(this.inputTime)[3].slice(4), this.getPrevious7Days(this.inputTime)[4].slice(4), this.getPrevious7Days(this.inputTime)[5].slice(4), this.getPrevious7Days(this.inputTime)[6].slice(4)]
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
name: this.title,
|
||||
type: 'line',
|
||||
data: [this.seriesData[0], this.seriesData[1], this.seriesData[2], this.seriesData[3], this.seriesData[4], this.seriesData[5], this.seriesData[6]],
|
||||
smooth: true
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
console.log(this.dataTime)
|
||||
|
||||
},
|
||||
getTkhostdetail() {
|
||||
tkhostdetail({
|
||||
hostId: this.id,
|
||||
dataType: this.dataType,
|
||||
searchTimeStart: this.getPrevious7Days(this.inputTime)[0],
|
||||
searchTimeEnd: this.getPrevious7Days(this.inputTime)[6]
|
||||
}).then(res => {
|
||||
// console.log("返回数据", res[0][this.getPrevious7Days(this.inputTime)[2]])
|
||||
//echarts 数据初始化
|
||||
this.seriesData = [
|
||||
res[0][this.getPrevious7Days(this.inputTime)[0]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[0]][this.dataType]),
|
||||
res[0][this.getPrevious7Days(this.inputTime)[1]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[1]][this.dataType]),
|
||||
res[0][this.getPrevious7Days(this.inputTime)[2]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[2]][this.dataType]),
|
||||
res[0][this.getPrevious7Days(this.inputTime)[3]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[3]][this.dataType]),
|
||||
res[0][this.getPrevious7Days(this.inputTime)[4]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[4]][this.dataType]),
|
||||
res[0][this.getPrevious7Days(this.inputTime)[5]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[5]][this.dataType]),
|
||||
res[0][this.getPrevious7Days(this.inputTime)[6]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[6]][this.dataType]),
|
||||
]
|
||||
|
||||
this.initChart();
|
||||
this.num++
|
||||
console.log("返回数据", this.seriesData)
|
||||
console.log("返回数据", this.num)
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
// getCurrentDate() {
|
||||
// const dates = [];
|
||||
// const today = new Date();
|
||||
|
||||
// for (let i = 6; i >= 0; i--) {
|
||||
// const date = new Date(today);
|
||||
// date.setDate(today.getDate() - i);
|
||||
|
||||
// const year = date.getFullYear();
|
||||
// const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
// const day = String(date.getDate()).padStart(2, '0');
|
||||
|
||||
// dates.push(`${year}${month}${day}`);
|
||||
// }
|
||||
|
||||
// return dates;
|
||||
// },
|
||||
getPrevious7Days(dateStr) {
|
||||
// 验证输入格式是否正确
|
||||
if (!/^\d{8}$/.test(dateStr)) {
|
||||
console.error('输入的格式不是YYYYMMDD.');
|
||||
return [];
|
||||
}
|
||||
|
||||
// 解析输入的日期字符串
|
||||
const year = parseInt(dateStr.substring(0, 4));
|
||||
const month = parseInt(dateStr.substring(4, 6)) - 1; // 月份从 0 开始
|
||||
const day = parseInt(dateStr.substring(6, 8));
|
||||
|
||||
// 创建日期对象
|
||||
const date = new Date(year, month, day);
|
||||
|
||||
// 存储结果的数组
|
||||
const result = [];
|
||||
|
||||
// 计算前 7 天的日期
|
||||
for (let i = 0; i <= 6; i++) {
|
||||
const currentDate = new Date(date);
|
||||
currentDate.setDate(date.getDate() - i); // 减去 i 天
|
||||
|
||||
// 格式化为 YYYYMMDD
|
||||
const formattedDate = `${currentDate.getFullYear()}${(currentDate.getMonth() + 1).toString().padStart(2, '0')}${currentDate.getDate().toString().padStart(2, '0')}`;
|
||||
result.push(formattedDate);
|
||||
}
|
||||
|
||||
// 按时间顺序排序（从最早到最晚）
|
||||
result.sort((a, b) => a.localeCompare(b));
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<div class="logo">
|
||||
<!-- <img style="margin-right: 10px;" src="@/assets/logo.png"> -->
|
||||
<img src="@/assets/logotext.png">
|
||||
</div>
|
||||
<ul>
|
||||
<li @click="updateActiveIndex(1)">
|
||||
<div>
|
||||
<img v-show="activeIndex == 1" src="@/assets/navAction.png" autoplay loop muted class="background-img">
|
||||
<div style="display: flex;">
|
||||
<img v-show="activeIndex == 1" src="@/assets/workAction.png" style="margin-right: 10px;">
|
||||
<img v-show="activeIndex == 2" src="@/assets/workAction.png" style="margin-right: 10px;">
|
||||
<div :style="activeIndex == 1 ? 'color: #000' : 'color: #fff'" class="center-justify">工作台</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li @click="updateActiveIndex(2)">
|
||||
<div>
|
||||
<img v-show="activeIndex == 2" src="@/assets/navAction.png" autoplay loop muted class="background-img">
|
||||
|
||||
<div style="display: flex;">
|
||||
<img v-show="activeIndex == 2" src="@/assets/listAction.png" style="margin-right: 10px;">
|
||||
<img v-show="activeIndex == 1" src="@/assets/listAction.png" style="margin-right: 10px;">
|
||||
<div :style="activeIndex == 2 ? 'color: #000' : 'color: #fff'" class="center-justify">主播列表</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a @click="$router.push('/')" href="javascript:void(0);"
|
||||
style="position: absolute; bottom: 30px; color: aliceblue; font-size: 20px; font-weight: 500;">
|
||||
退出登录
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { getUser } from '@/utils/storage'
|
||||
import { defineEmits } from 'vue';
|
||||
|
||||
|
||||
|
||||
const userInfo = ref(getUser())
|
||||
|
||||
let activeIndex = ref(1);
|
||||
|
||||
const emit = defineEmits(['activeIndex']);
|
||||
|
||||
|
||||
const updateActiveIndex = (index) => {
|
||||
activeIndex.value = index;
|
||||
emit('activeIndex', index);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 900px;
|
||||
width: 280px;
|
||||
background-color: @bg-color;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.logo {
|
||||
border-bottom: 1px solid #fff;
|
||||
padding-top: 20px;
|
||||
|
||||
img:nth-of-type(1) {
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
img:nth-of-type(2) {
|
||||
height: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
margin-top: 50px;
|
||||
padding-top: 30px;
|
||||
padding-left: 30px;
|
||||
margin-bottom: 50px;
|
||||
height: 64px;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
|
||||
}
|
||||
|
||||
/* .sidebar a:hover {
|
||||
background-color: #e0e0e0;
|
||||
} */
|
||||
|
||||
|
||||
.background-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 13px;
|
||||
width: 247px;
|
||||
height: 126px;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
/* 确保视频在内容之下 */
|
||||
}
|
||||
|
||||
.center-justify {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
298
src/components/mineSubComponent/AnchorLibrary.vue
Normal file
298
src/components/mineSubComponent/AnchorLibrary.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<!-- 主播库 -->
|
||||
<div class="anchor-library">
|
||||
<el-splitter>
|
||||
<el-splitter-panel size="70%">
|
||||
<!-- 主播列表 -->
|
||||
<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>
|
||||
</div>
|
||||
<div class="card-Operation">
|
||||
<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%" :collapsible="true" :resizable="false">
|
||||
<!-- 添加或修改主播 -->
|
||||
<div class="demo-panel">
|
||||
<div class="add-anchor-library">
|
||||
<div class="title">添加我的主播</div>
|
||||
<!-- <div class="title">
|
||||
修改主播信息
|
||||
</div> -->
|
||||
<div class="add-anchor-library-content">
|
||||
<div class="input-name">
|
||||
<!-- 主播名称 -->
|
||||
<el-input v-model="refname" size="large" placeholder="请输入主播名称" />
|
||||
</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="Confirm">确认</div>
|
||||
<div class="Reset">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-splitter-panel>
|
||||
</el-splitter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref, // 响应式基础
|
||||
watch, // 侦听器
|
||||
onMounted, // 组件挂载完成后执行
|
||||
onUpdated, // 组件更新后执行
|
||||
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 list = ref([{}, {}, {}, {}, {}, {}]);
|
||||
|
||||
function load() {}
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
onMounted(() => {
|
||||
// 组件挂载完成后执行
|
||||
});
|
||||
onUpdated(() => {
|
||||
// 组件更新后执行
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// 组件销毁前执行
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.anchor-library {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.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.1);
|
||||
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-around;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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: 80%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.country {
|
||||
width: 80%;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.gender {
|
||||
width: 80%;
|
||||
height: 80px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
.Confirm {
|
||||
width: 80%;
|
||||
height: 50px;
|
||||
margin-top: 200px;
|
||||
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: 80%;
|
||||
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>
|
||||
31
src/components/mineSubComponent/PKRecord.vue
Normal file
31
src/components/mineSubComponent/PKRecord.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<!-- 我的PK记录 -->
|
||||
<div>我的PK记录</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>
|
||||
31
src/components/mineSubComponent/PKmessage.vue
Normal file
31
src/components/mineSubComponent/PKmessage.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<!-- PK信息 -->
|
||||
<div>PK信息</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>
|
||||
31
src/components/mineSubComponent/PointsList.vue
Normal file
31
src/components/mineSubComponent/PointsList.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<!-- 积分列表 -->
|
||||
<div>积分列表</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>
|
||||
Reference in New Issue
Block a user