62 lines
1.4 KiB
Vue
62 lines
1.4 KiB
Vue
<template>
|
|
<div class="rank-check">
|
|
<h2>Tier</h2>
|
|
<!-- <a-collapse :expand-icon-position="expandIconPosition">
|
|
<a-collapse-panel header="Hero"> -->
|
|
<a-checkbox-group :value="marketplaceList.rank" :options="heroList" @change="onChange" />
|
|
<!-- </a-collapse-panel>
|
|
</a-collapse> -->
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive } from "vue";
|
|
// import { SettingOutlined } from "@ant-design/icons-vue";
|
|
import { useMarketplaceStore } from "@/store/marketplace"
|
|
// import { emit } from "process";
|
|
const emit = defineEmits(['clickHeroChild'])
|
|
const marketplaceList = useMarketplaceStore()
|
|
const heroList = [
|
|
{ label: "Tier1", value: "1" },
|
|
{ label: "Tier2", value: "2" },
|
|
{ label: "Tier3", value: "3" },
|
|
{ label: "Tier4", value: "4" },
|
|
{ label: "Tier5", value: "5" },
|
|
];
|
|
const state = reactive({
|
|
value: [],
|
|
});
|
|
const expandIconPosition = ref("end");
|
|
const onChange = (e) => {
|
|
// marketplaceList.rank = e
|
|
emit('clickRankChild',e)
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.rank-check {
|
|
border-bottom: 2px solid #3b3c59;
|
|
margin: 20px 0;
|
|
padding-bottom: 20px;
|
|
h2 {
|
|
font-family: 'Poppins';
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #BB7FFF;
|
|
margin-bottom: 10px;
|
|
}
|
|
:deep(.ant-checkbox-group) {
|
|
display: block;
|
|
.ant-checkbox-wrapper {
|
|
display: flex !important;
|
|
span {
|
|
color: #BB7FFF;
|
|
}
|
|
.ant-checkbox {
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|