优化代码
This commit is contained in:
pengxiaolong
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