<!DOCTYPE html>
<html>
<head>
<style>
/* 原有样式保持不变 */
@media screen and (max-width: 768px){
    .tmall_tab {
        position:fixed;
        bottom:5rem;
        left:.8rem;
        z-index:100;
        width:4.7rem;
    }
    .tmall_tab a{
        display:block;
        width:4.7rem;
        height:6rem;
        background:url(https://img01.sogoucdn.com/app/a/100540022/2021102010531046160626.png) no-repeat;
        background-size: 100%;
    }
}
@media screen and (min-width: 768px){
    .tmall_tab {
        position: fixed;
        left: 6%;
        bottom: 175px;
        z-index: 100;
        width:140px;
    }
    .tmall_tab a{
        display: block;
        width: 140px;
        height:168px;
        background:url(https://img01.sogoucdn.com/app/a/100540022/2021102010531046160626.png) no-repeat;
    }
}

/* 新增关闭按钮样式 */
.close-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #999;
    cursor: pointer;
    z-index: 101;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.close-btn:hover {
    background: #f0f0f0;
    transform: rotate(90deg);
}

.close-btn::before,
.close-btn::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    background: #666;
}

.close-btn::before {
    transform: rotate(45deg);
}

.close-btn::after {
    transform: rotate(-45deg);
}

/* 动画效果保持原有 */
/* ...原有动画代码... */
</style>
</head>
<body>
<!-- 新增关闭按钮结构 -->
<div class="tmall_tab">
    <a href="#" target="_blank"></a>
    <div class="close-btn" onclick="this.parentElement.style.display='none'"></div>
</div>
</body>
</html>
