Widget:DragonSoul

<style>





.dragonsoul-title {
    margin-left:120px;
    font-size:x-large;
    position:relative;
}
.dragonsoul-title-background-attack {
    background-image: linear-gradient(to right, #ff6f6f6e, transparent);
    padding-left: 18px;
    font-style: italic;
    z-index: -2;
    border-radius:1px
}
.dragonsoul-title-background-defense {
    background-image: linear-gradient(to right, #a3f2ff4a, transparent);
    padding-left: 18px;
    font-style: italic;
    z-index: -2;
    border-radius:1px
}
.dragonsoul-title-background-support {
    background-image: linear-gradient(to right, #ffdea34a, transparent);
    padding-left: 18px;
    font-style: italic;
    z-index: -2;
    border-radius:1px
}
.dragonsoul-title-deco {
    position:absolute;
    bottom: 15px;
    left:12px;
    z-index:0
}

.dragonsoul-rare {
    position:absolute;
    top:-180px;
    left:190px;
}

.dragonsoul-setEffect-container {
    position:absolute;
    top:-160px;
    left:240px;
    width:600px
}

.dragonsoul-setEffect-title {
    background-image:linear-gradient(to top,white 0 ,transparent 1px);
    margin-bottom:8px;
    text-shadow:0 0 10px black;
    width:100px
}
.dragonsoul-setEffect-text {
    color: #f5f5f5;
    text-shadow: 0 0 10px black;
}
.dragonsoul-setEffect-badge {
    color: #f3b5b6;
    background: #ffffff4f;
    padding: 0 4px;
    border-radius: 5px;
    margin-right: 4px;
}





/*----------------龙文使我旋转部分jpg---------------------*/


.dragonsoul-circle-bg {
    position: relative;
    width: 700px;
    height:400px;
    margin: 0 auto;
    background-image: url(https://patchwiki.biligame.com/images/cassell/8/8c/7rwn2yrmoy5m2pispf7bge0v9l1rsi5.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 120%;
    margin-top:220px;
    margin-bottom:200px
    }

.dragonsoul-circle-container {
    position: relative;
    width: 345px;
    height: 345px;
    border-radius:50%;
    transform:rotate(12deg) translate(51%, -4%);
    

}

.dragonsoul-circle-item {
    position: absolute;
    top: 50%;  /* 让所有部位以容器中心为基准 */
    left: 50%;
    transform-origin: 0 0; /* 从中心开始旋转 */
    transform: translate(-50%, -50%); /* 使每个部位居中 */
}
.dragonsoul-circle-item:not(.dragonsoul-bg) {
    cursor:pointer;
}

.dragonsoul-circle-item.dragonsoul-bg img:not(.dragonsoul-text-box-icon.dragonsoul-star.select-dragonsoul-img) {
    width: 72px; /* 图标大小，可调整 */
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}

.dragonsoul-star img{
width:8px!important;
height:auto!important;
}
.dragonsoul-circle-item img:not(.dragonsoul-text-box-icon.dragonsoul-star.select-dragonsoul-img) {
width: 56px;
 height: 56px;
 overflow:visible
}

.dragon-frame {
    position: absolute;
    width: 100%; /* 使框架与图标的大小相同 */
    height: 100%;
    transform-origin: 50% 50%; /* 保证底框从中心旋转 */
}

.center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 确保中心图标在容器正中心 */
}

.center-icon img {
    width: 80px; /* 中心图标大小，可调整 */
    height: 80px;
    border-radius: 50%;
}



/*1号位*/
.dragonsoul-bg1 {
    transform:rotate(0deg) translate(205px) rotate(170deg);
}
.dragonsoul-1{
    transform:rotate(-22deg) translate(141px) rotate(12deg);
}
/*2号位*/
.dragonsoul-bg2 {
    transform:rotate(55deg) translate(215px) rotate(160deg);
}
.dragonsoul-2 {
    transform:rotate(51deg) translate(133px) rotate(-61deg);
}
/*3号位*/
.dragonsoul-bg3 {
    transform:rotate(123deg) translate(202px) rotate(180deg);
}
.dragonsoul-3{
    transform:rotate(124deg) translate(163px) rotate(229deg);
}
/*4号位*/
.dragonsoul-bg4 {
    transform:rotate(177deg) translate(215px) rotate(-192deg);
}
.dragonsoul-4{
    transform:rotate(176deg) translate(205px) rotate(172deg);
}
/*光*/
.dragonsoul-bgLight {
    transform:rotate(233deg) translate(215px) rotate(-200deg);
}
.dragonsoul-Light{
    transform:rotate(223deg) translate(209px) rotate(124deg);
}
/*暗*/
.dragonsoul-bgDark {
    transform:rotate(302deg) translate(195px) rotate(-175deg);
}
.dragonsoul-Dark{
    transform:rotate(277deg) translate(181px) rotate(72deg);
}




/* 文本框的整体样式 */
.dragonsoul-text-box {
    position: absolute;
    padding: 5px 8px;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
    color: #ffffff;
    width:240px;
    font-size: 12px;
    border-radius: 6px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 轻微阴影效果 */
    transition: 0.3s all ease-in;
}
.dragonsoul-text-box:hover {
    box-shadow: 0 0 10px #ffffff45;
    /* transform: rotate(-1deg); */
    transition: 0.3s all ease-in;
    font-size: 13px;
    /* transform: scale(1.05); */
    width: 260px;
}

.dragonsoul-text-box-name {
    font-size:15px;
    font-style:italic;
    color:#f3b5b6
}
.dragonsoul-text-box-starEffect-container {
    isplay:flex;
    flex-direction: column;
}
.dragonsoul-text-box-starEffect-eachRow {
    display:flex;
    justify-content: space-between;
}
.dragonsoul-text-box-starEffect-item {
    width:45%;
    display:flex;
    justify-content:space-between
}


/* 根据每个龙文图标的方向来定位文本框 */
.dragonsoul-text-box-1 { /* 1号龙文的文本框 */
    transform: translate(120px, -30px) rotate(-2deg); /* 向外偏移 */
}
.dragonsoul-text-box-2 { /* 2号龙文的文本框 */
    transform: translate(120px, 0px) rotate(-2deg);
}
.dragonsoul-text-box-3 { /* 3号龙文的文本框 */
    transform: translate(-340px, -10px) rotate(-5deg);
}
.dragonsoul-text-box-4 { /* 4号龙文的文本框 */
    transform: translate(-330px, -120px);
}
.dragonsoul-text-box-Light { /* 光龙文的文本框 */
    transform: translate(-360px, -180px) rotate(1deg);
}
.dragonsoul-text-box-Dark { /* 暗龙文的文本框 */
    transform: translate(120px, -80px) rotate(-1deg);
}




/*------------龙文选择*/
.select-dragonsoul-img img {
	width:27px!important;
	height:27px!important;
}
.dragonsoul-select-title {
	position: sticky;
    top: 0;
    width: 100%;
    background: #000000e0;
    height: 27px;
    color: pink;
    text-align: center;
    padding-top: 4px;
}
.dragonsoul-select-container {
    display: none; /* 默认隐藏 */
    opacity: 0;
    transform: scale(0.8); /* 初始缩小 */
    width: 200px;
    background: #000000f0;
    padding: 0px 8px 4px 8px;
    color: white;
    border-radius: 10px;
    transition: opacity 0.3s ease, transform 0.3s ease; /* 渐变效果 */
    font-size: small;
    position: relative;
    height: 320px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
        scrollbar-width: thin; /* 适用于 Firefox，滚动条变细 */
    scrollbar-color: #f4cfd4bd #1a1a1a00; /* 滚动条颜色（前景色和背景色） */
    border:1px solid #ffc0cb45;
}

.dragonsoul-select-container.show {
    display: block; /* 显示时切换为 block */
    opacity: 1; /* 完全不透明 */
    transform: scale(1); /* 恢复正常大小 */
}


/* 针对 Webkit 浏览器（Chrome、Edge、Safari）的自定义滚动条样式 */
.dragonsoul-select-container::-webkit-scrollbar {
    width: 3px; /* 滚动条宽度 */
    background-color: #1a1a1a00; /* 滚动条背景颜色 */
}

.dragonsoul-select-container::-webkit-scrollbar-thumb {
    background-color: #93b4ff; /* 滚动条滑块颜色 */
    border-radius: 4px; /* 滑块圆角 */
}

.dragonsoul-select-container::-webkit-scrollbar-thumb:hover {
    background-color: #6699cc; /* 鼠标悬停时滑块颜色 */
}

.dragonsoul-select-container::-webkit-scrollbar-track {
    background-color: #0d0d0d; /* 滚动条轨道颜色 */
}

.dragonsoul-select-item {
    margin: 2px 0px;
    padding: 0 4px;
    transition:0.2s all ease-in;
}
.dragonsoul-select-item:hover {
	cursor:pointer;
	border-radius: 5px;
    background: #ffffff1a;
    transition:0.2s all ease-in;
	
}
.dragonsoul-select-item.selected {
    text-shadow: 0 0 #bfbfbf;
    color: #ffc4c4;
    background: #ffffff2e;
    border-radius: 5px;
    margin: 4px 0px;
    transition: 0.2s all ease-in;
}

</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
    console.log("JavaScript 已加载并运行！");

    // 获取所有触发按钮
    const items = document.querySelectorAll('[id^="select-button-"]');

    items.forEach(item => {
        item.addEventListener("click", function () {
            const idSuffix = item.id.replace("select-button-", ""); // 获取后缀
            const selectContainer = document.getElementById('select-dragonsoul-container-' + idSuffix);

            if (selectContainer) {
                // 检查当前容器是否显示
                if (selectContainer.classList.contains('show')) {
                    // 如果显示，则移除动画并隐藏
                    selectContainer.classList.remove('show');
                    console.log("隐藏:", selectContainer.id);

                    // 等待动画结束后设置 display: none
                    setTimeout(() => {
                        selectContainer.style.display = 'none';
                        console.log(selectContainer.id + " 已隐藏！");
                    }, 300); // 动画时长应与 CSS 保持一致
                } else {
                    // 如果隐藏，则显示并添加动画
                    selectContainer.style.display = 'block';
                    setTimeout(() => {
                        selectContainer.classList.add('show');
                        // 显示后绑定选项点击事件
                        bindSelectItemClickEvents(selectContainer);
                    }, 10); // 微小延迟以触发动画
                    console.log(selectContainer.id + " 已显示！");
                }
            }
        });
    });

    // 为容器中的每个项绑定点击事件
    function bindSelectItemClickEvents(selectContainer) {
        selectContainer.querySelectorAll(".dragonsoul-select-item").forEach(item => {
            item.addEventListener("click", function () {
                console.log("选中项被点击！");

                // 清除其他选中的状态
                selectContainer.querySelectorAll(".dragonsoul-select-item").forEach(i => i.classList.remove("selected"));

                // 为当前项添加选中样式
                this.classList.add("selected");
            });
        });
    }
});

</script>