论坛 › 官方频道 › 用户组【星钻等级系列】全新来袭！

沈野 发表于 2023-6-15 12:25:45

用户组【星钻等级系列】全新来袭！

<style>
/* ==========【全局间距统一调节区｜直接修改px数值】========== */
:root {
    --space-banner-search: 50px;    /* 顶部横幅图片 ↔ 搜索框 垂直间距 */
    --space-search-grid: 50px;       /* 搜索框 ↔ 四格内容区域 垂直间距 */
    --space-grid-button: 50px;       /* 四格内容区域 ↔ 折叠按钮 垂直间距 */
    --space-button-panel: 15px;   /* 折叠按钮 ↔ 展开面板 垂直间距 */
    --space-panel-music: 14px;       /* 展开面板 ↔ 网易云播放器 垂直间距 */
    --grid-item-gap: 100px;         /* 4个白色内框横向间隔 */

    --innerbox-padding: 20px;      /* ✅白色内框【内部四周边距】调节 */
    --inner-text-margin: 6px;      /* ✅内框文字段落上下间距 */
    --inner-img-margin: 8px;         /* ✅内框图片上下外边距 */
}
/* ========================================================== */

/* ========== 【可修改区域 全局卡片基础参数】 ========== */
/* 卡片整体宽度 */
.float_card_wrap {
    max-width: 720px; /* ← 修改外层大卡片整体宽度 */
    width: 96%;
    margin: 15px auto;
    font-family: "Microsoft Yahei",sans-serif;
    box-sizing: border-box;
}
/* 卡片外容器背景、圆角、边框 */
.main_float_card {
    background: #11124F; /* ← 卡片主体背景色 */
    border-radius: 18px;
    padding: 16px;
    overflow: hidden;
    transition: transform 0.6s ease; /* ✅【浮动动画时间】修改0.6s调整快慢 */
}
/* ✅【鼠标悬浮浮动效果】 */
.main_float_card:hover {
    transform: translateY(-6px); /* ← 浮动上移距离，数字越大浮得越高 */
}
/* =================================================== */

/* 卡片顶部横幅图片 */
.top_banner_img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; /* ← 横幅圆角大小 */
    margin-bottom: var(--space-banner-search); /* 引用间距变量 */
    object-fit: cover;
}

/* 搜索框外层容器：实现搜索框整体居中 */
.search_wrap{
    width: 86%; /* ← 修改搜索框整体宽度 */
    margin: 0 auto var(--space-search-grid) auto; /* 水平居中 + 底部间距变量 */
}

/* 顶部椭圆搜索框 ✅文字居中 */
.card_search_box {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    border-radius: 999px !important; /* 强制椭圆形 */
    border: none;
    padding: 0 18px;
    font-size: 14px;
    outline: none;
    background: #474BB6; /* ← 搜索框背景色 */
    color: #fff;
    text-align: center; /* &#ffffff;输入文字居中 */
}
.card_search_box::placeholder {
    color: #b4b8c8;
    text-align: center; /* ✅占位提示文字居中 */
}

/* 四格容器 2列布局 ✅【固定像素宽度，直接改数字生效】 */
.box_grid {
    display: grid;
    grid-template-columns: 222px 222px;
    gap: var(--grid-item-gap); /* 网格横向间距变量 */
    justify-content: center; /* 宽度不足时整体居中排列 */
    margin-bottom: var(--space-grid-button); /* 底部间距变量 */
}

/* 单个内容内框样式 */
.single_inner_box {
    background: #ffffff; /* ← 小内框背景色 */
    border-radius: 12px; /* ← 内框圆角 */
    padding: var(--innerbox-padding); /* ✅内框四周内边距（由变量控制） */
    box-sizing: border-box;
}
/* 小框内文本居左 */
.single_inner_box p {
    margin: var(--inner-text-margin) 0; /* ✅文字上下间距变量 */
    font-size: 13px;
    text-align: left;
    color: #C053DA;
}
/* 内框图片统一尺寸 + 全部居左显示 */
.single_inner_box img {
    max-width: 180px;
    max-height: 600px;
    width: auto;
    height: auto;
    display: block;
    margin: var(--inner-img-margin) 0; /* ✅图片上下间距变量 */
    border-radius: 6px;
    object-fit: contain;
}

/* 底部折叠区域 */
.fold_panel {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    margin-top: var(--space-button-panel);
    display: none;
}
.fold_panel.show {
    display: block;
}
.fold_text {
    font-size: 14px;
    color: #222;
    line-height: 1.7;
    text-align: center;
    margin: 0;
    white-space: pre-wrap;
}

/* 椭圆折叠按钮 */
.fold_btn {
    display: block;
    width: 86%;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 999px;
    background: #474BB6;
    color: #fff;
    border: none;
    margin: 0 auto;
    cursor: pointer;
    font-size: 14px;
}

/* 网易云播放器容器 */
.music_player_box {
    margin-top:var(--space-panel-music);
    border-radius:10px;
    overflow:hidden;
}
.music_player_box iframe{
    width:100%;
    border:none;
    display:block;
}
</style>

<div class="float_card_wrap">
    <div class="main_float_card">
      <!-- 卡片顶部通栏图片 -->
      <img class="top_banner_img" src="https://www.qqmcc.net/data/attachment/album/202608/04/144821r5m056nbcl9800fs.png">

      <!-- ✅增加外层容器，实现搜索框整体居中 -->
      <div class="search_wrap">
            <input class="card_search_box" placeholder="星耀升级用户组全新来袭">
      </div>

      <!-- 2×2 四个内框容器 -->
      <div class="box_grid">

            <!-- ========== 第一个内框 ========== -->
            <div class="single_inner_box">
                <p>   星耀</p>
                <img src="https://www.qqmcc.net/data/attachment/album/202607/21/152106ewqddkjkrkycrybz.png"> <!--图片1直链-->
                <img src="https://www.qqmcc.net/data/attachment/common/e2/common_97_usergroup_icon.gif?qPz7zK"> <!--GIF1直链-->
                <p>   星耀王者1星</p>
                <img src="https://www.qqmcc.net/data/attachment/album/202608/04/143859ji5exfd3x8px222c.png"> <!--GIF2直链-->
                <img src="https://www.qqmcc.net/data/attachment/album/202608/04/142125vqov5s4ks4p48o5o.png"> <!--图片2直链-->
                <img src="https://www.qqmcc.net/data/attachment/album/202306/20/190902z1vwlhfuwbqlttxt.png"> <!--图片3直链-->
            </div>

            <!-- ========== 第二个内框 ========== -->
            <div class="single_inner_box">
               <p>   星耀</p>
                <img src="https://www.qqmcc.net/data/attachment/album/202607/21/152106ewqddkjkrkycrybz.png"> <!--图片1直链-->
                <img src="https://www.qqmcc.net/data/attachment/common/ed/common_98_usergroup_icon.gif?F5V755"> <!--GIF1直链-->
                <p>   星耀王者2星</p>
                <img src="https://www.qqmcc.net/data/attachment/album/202608/04/143859ji5exfd3x8px222c.png"> <!--GIF2直链-->
                <img src="https://www.qqmcc.net/data/attachment/album/202608/04/142125vqov5s4ks4p48o5o.png"> <!--图片2直链-->
                <img src="https://www.qqmcc.net/data/attachment/album/202306/20/190902z1vwlhfuwbqlttxt.png"> <!--图片3直链-->
            </div>

            <!-- ========== 第三个内框 ========== -->
            <div class="single_inner_box">
               <p>   星耀</p>
                <img src="https://www.qqmcc.net/data/attachment/album/202607/21/152106ewqddkjkrkycrybz.png"> <!--图片1直链-->
                <img src="https://www.qqmcc.net/data/attachment/common/ac/common_99_usergroup_icon.gif?Zz6R0m"> <!--GIF1直链-->
                <p>   星耀王者3星</p>
                <img src="https://www.qqmcc.net/data/attachment/album/202608/04/143859ji5exfd3x8px222c.png"> <!--GIF2直链-->
                <img src="https://www.qqmcc.net/data/attachment/album/202608/04/142125vqov5s4ks4p48o5o.png"> <!--图片2直链-->
                <img src="https://www.qqmcc.net/data/attachment/album/202306/20/190902z1vwlhfuwbqlttxt.png"> <!--图片3直链-->
            </div>

            <!-- ========== 第四个内框 ========== -->
            <div class="single_inner_box">
                <p>   星耀</p>
                <img src="https://www.qqmcc.net/data/attachment/album/202607/21/152106ewqddkjkrkycrybz.png"> <!--图片1直链-->
                <img src="https://www.qqmcc.net/data/attachment/common/f8/common_100_usergroup_icon.gif?Nqy2pO"> <!--GIF1直链-->
                <p>   星耀至尊</p>
                <img src="https://www.qqmcc.net/data/attachment/album/202608/04/143859ji5exfd3x8px222c.png"> <!--GIF2直链-->
                <img src="https://www.qqmcc.net/data/attachment/album/202608/04/142125vqov5s4ks4p48o5o.png"> <!--图片2直链-->
                <img src="https://www.qqmcc.net/data/attachment/album/202306/20/190902z1vwlhfuwbqlttxt.png"> <!--图片3直链-->
            </div>
      </div>

      <!-- 底部折叠按钮 -->
      <button class="fold_btn" onclick="toggleFold(this)">点击查看获取用户组详情</button>

      <!-- 底部白色展开面板 -->
      <div class="fold_panel">
            <p class="fold_text">为激励音乐/电影版块发帖，特设计版块用户组
凡是论坛用户在【高清头像】【音乐分享】【高清壁纸】当月分享
并发布帖 5+即可跟帖申请
四阶段位按每月完成度计算依次为【星钻1】【星钻2】【星钻3】【王者】连续四月
1. 发放用户组/勋章有效期为：30天（详情用户组页面自行切换）
2. 发布的帖子在申请日至用户组有效期内禁止删除，关闭等操作</p>
      </div>

      <!-- 网易云外链播放器 -->
      <div class="music_player_box">
            <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=1 src="//music.163.com/outchain/player?type=2&id=1435828582&auto=1&height=32"></iframe></iframe>
      </div>

    </div>
</div>

<script>
// 折叠展开切换逻辑
function toggleFold(btn) {
    var panel = btn.parentElement.querySelector('.fold_panel');
    panel.classList.toggle('show');
    if(panel.classList.contains('show')){
      btn.innerText = '收起详情';
    }else{
      btn.innerText = '获取用户组详情';
    }
}
</script>

沈野 发表于 2023-8-22 19:07:03

跟帖格式如下：
作者楼主的用户名和UID：
申请所属区块用户组：例/音乐分享

发帖数量↓（以此类推）
1.
标题：
地址：

2.
标题：
地址：

3.
标题：
地址：

查看完整版本: 用户组【星钻等级系列】全新来袭！