DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<link rel="stylesheet" href="./vue/element_ui.css" />
<script src="./vue/vue.js">script>
<script src="./vue/unocss.js">script>
<script src="./vue/element_ui.js">script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.check_dui {
border-left: 18px solid transparent;
border-right: 0 solid transparent;
border-bottom: 18px solid #0fa3ff;
right: 0;
bottom: 0;
width: 0;
height: 0;
}
.check_dui .dui_icon {
transform: translateX(-85%) translateY(-10px);
font-size: 12px;
color: #ffffff;
}
style>
head>
<body>
<div id="app" class="h-100vh flex justify-center items-center">
<div class="flex w-300px">
<div
class="flex flex-col h-300px w-150px gap-15px overflow-y-auto overflow-x-hidden left_scrollbar"
>
<div
v-for="cartoon in settingBox.cartoon"
class="cursor-pointer w-140px h-40px leading-40px px-10px rounded-3px relative border-1px border-solid"
:class="cartoon.id == settingBox.idActive ? 'border-#0fa3ff' : ' border-#d5d7e2'"
@click="changeClassify(cartoon.id)"
>
{{cartoon.name}}
<div
class="check_dui absolute"
v-show="cartoon.id == settingBox.idActive"
>
<i class="el-icon-check dui_icon">i>
div>
div>
div>
<div
class="flex-1 w-0 h-480px pl-20px border-l-solid border-1px border-#DDDFE4 flex flex-col overflow-x-hidden"
>
<div class="text_title text-14px mb-10px">选择角色 ：div>
<div class="flex-1 h-0 left_scrollbar overflow-y-auto">
<div class="flex flex-wrap gap-15px">
<div
v-for="item in settingBox.skuList"
:key="item.role"
@click="settingCheckSku(item.role)"
:class="settingBox.selectSku.includes(item.role) ? 'bg-#0fa3ff color-#fff' : 'border-1px border-solid border-#d5d7e2'"
class="relative h-32px w-full flex items-center rounded-2px px-8px rounded-3px color-#606266 text-14px cursor-pointer"
>
<div class="flex-1 !line-clamp-1">{{item.roleName}}div>
div>
div>
div>
<div class="flex justify-end mt-15px">
<el-button size="small" type="primary" @click="saveCartoon"
>确定el-button
>
div>
div>
div>
div>
<script>
new Vue({
el: '#app',
data() {
return {
settingBox: {
idActive: 1,
selectSku: [],
skuList: [],
cartoon: [
{
name: '无职转生',
id: 1,
},
{
name: '葬送得芙莉莲',
id: 2,
},
],
},
};
},
watch: {
'settingBox.idActive': {
handler(item) {
if (item == 1) {
this.settingBox.skuList = [
{
roleName: '鲁迪乌斯',
role: 1,
},
{
roleName: '艾莉丝',
role: 2,
},
{
roleName: '希露菲',
role: 3,
},
{
roleName: '洛琪希',
role: 4,
},
];
} else {
this.settingBox.skuList = [
{
roleName: '芙莉莲',
role: 5,
},
{
roleName: '菲伦',
role: 6,
},
{
roleName: '休塔尔克',
role: 7,
},
];
}
},
immediate: true,
deep: true,
},
},
computed: {},
methods: {
settingCheckSku(id) {
if (this.settingBox.selectSku.includes(id)) {
this.settingBox.selectSku = this.settingBox.selectSku.filter(
(v) => v != id
);
} else {
this.settingBox.selectSku.push(id);
}
},
changeClassify(id) {
this.settingBox.idActive = id;
},
saveCartoon() {
console.log(this.settingBox.selectSku);
},
},
});
script>
body>
html>
