APP下载小工具

完整代码

<style>
        /* 侧边栏下载卡片样式 — 简洁现代，适配任何wordpress主题 */
        .sidebar-app-download {
            /* background: linear-gradient(145deg, #ffffff 0%, #f7f9fc 100%); */
            border-radius: 18px;
            padding: .5rem .8rem 1.5rem .8rem;
            /* box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.1); */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            /* border: 1px solid rgba(226, 232, 240, 0.6); */
            transition: transform 0.2s ease;
            max-width: 100%;
            box-sizing: border-box;
        }
        .sidebar-app-download:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 30px -10px rgba(0,0,0,0.15);
        }
        .sidebar-app-download .app-title {
            font-size: 1.35rem;
            font-weight: 700;
            margin: 0 0 0.4rem 0;
            color: #1e293b;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .sidebar-app-download .app-title i {
            color: #3b82f6;
            font-size: 1.5rem;
        }
        .sidebar-app-download .app-sub {
            font-size: 0.9rem;
            color: #475569;
            margin-bottom: 1.5rem;
            line-height: 1.5;
            border-left: 3px solid #3b82f6;
            padding-left: 12px;
            background: rgba(59, 130, 246, 0.04);
            border-radius: 0 6px 6px 0;
        }
        .sidebar-app-download .app-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .sidebar-app-download .app-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px 10px;
            border-radius: 60px;  /* 圆角按钮风格 */
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 0.3px;
            transition: all 0.25s;
            border: none;
            cursor: pointer;
            width: 100%;
            box-sizing: border-box;
            gap: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        }
        .sidebar-app-download .app-btn i {
            font-size: 1.4rem;
        }
        /* iOS按钮 */
        .app-btn-ios {
            background: #000000;
            color: white;
        }
        .app-btn-ios:hover {
            background: #1c1c1e;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }
        /* Google Play按钮 */
        .app-btn-android {
            background: #3b7c3e;  /* 更接近官方绿色 */
            background: linear-gradient(145deg, #3b7c3e, #2d6a30);
            color: white;
        }
        .app-btn-android:hover {
            background: #2e6a31;
            box-shadow: 0 8px 16px rgba(46, 125, 50, 0.25);
        }
        /* APK直接下载按钮 (如果需要可取消注释) */
        .app-btn-apk {
            background: #f97316;
            color: white;
        }
        .app-btn-apk:hover {
            background: #ea580c;
        }
        /* 注脚提示 */
        .app-footer-note {
            margin-top: 1.2rem;
            font-size: 0.75rem;
            text-align: center;
            color: #94a3b8;
            border-top: 1px dashed #cbd5e1;
            padding-top: 0.8rem;
        }
        .app-footer-note a {
            color: #3b82f6;
            text-decoration: none;
        }
        .app-footer-note a:hover {
            text-decoration: underline;
        }
        /* 针对较窄侧边栏优化文字 */
        @media (max-width: 300px) {
            .sidebar-app-download .app-btn {
                font-size: 0.9rem;
                padding: 12px 6px;
            }
        }
    </style>
    <div class="sidebar-app-download">
        <div class="app-title">
            <i class="fas fa-rocket"></i> 下载官方App
        </div>
        <div class="app-sub">
            随时随地，尽在指尖。<br>获取更流畅的移动体验。
        </div>

        <div class="app-buttons">
            <!-- APK直链 -->
            <a href="https://pan.xunlei.com/s/VOlnJiFYDMDkcjsYhCKfMcWRA1?pwd=7kwh" target="_blank" rel="noopener noreferrer" class="app-btn app-btn-apk"><i class="fas fa-download"></i> 直接下载APK</a>
			  <!-- iOS App Store 按钮 — 请替换 # 为您的App Store链接 -->
            <a href="https://pan.xunlei.com/s/VOlnJiFYDMDkcjsYhCKfMcWRA1?pwd=7kwh" target="_blank" rel="noopener noreferrer" class="app-btn app-btn-ios">
                <i class="fab fa-apple"></i> Apple Store 下载
            </a>
			<!-- 您的Google Play链接
            <a href="#" target="_blank" rel="noopener noreferrer" class="app-btn app-btn-android">
                <i class="fab fa-google-play"></i> Google Play 下载
            </a> -->
        </div>

   <!-- 这里只是一个示意，您可以替换成真实的二维码图片 
        <div class="app-footer-note">
            <i class="fas fa-qrcode" style="margin-right: 4px;"></i> 扫描二维码在手机上打开<br>
            <span style="display: inline-block; background: #f1f5f9; border-radius: 8px; padding: 6px 12px; margin-top: 6px; font-size: 0.7rem; color: #334155;">示例：展示二维码区域</span>
        </div>-->
    </div>

 

精简代码

<style>
/* 侧边栏下载卡片样式 — 简洁现代，适配任何WordPress主题 */
.sidebar-app-download {
    border-radius: 18px;
    padding: .5rem .8rem 1.5rem .8rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: transform 0.2s ease;
    max-width: 100%;
    box-sizing: border-box;
}
.sidebar-app-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 30px -10px rgba(0,0,0,0.15);
}
.sidebar-app-download .app-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.4rem 0;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sidebar-app-download .app-title i {
    color: #3b82f6;
    font-size: 1.5rem;
}
.sidebar-app-download .app-sub {
    font-size: 0.9rem;
    color: #475569;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    border-left: 3px solid #3b82f6;
    padding-left: 12px;
    background: rgba(59, 130, 246, 0.04);
    border-radius: 0 6px 6px 0;
}
.sidebar-app-download .app-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sidebar-app-download .app-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.3px;
    transition: all 0.25s;
    border: none;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.sidebar-app-download .app-btn i {
    font-size: 1.4rem;
}
/* iOS按钮 */
.app-btn-ios {
    background: #000000;
    color: white;
}
.app-btn-ios:hover {
    background: #a1a1a8;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
/* APK直接下载按钮 */
.app-btn-apk {
    background: #f97316;
    color: white;
}
.app-btn-apk:hover {
    background: #f7c32e;
}
/* 针对较窄侧边栏优化文字 */
@media (max-width: 300px) {
    .sidebar-app-download .app-btn {
        font-size: 0.9rem;
        padding: 12px 6px;
    }
}
</style>
<div class="sidebar-app-download">
<div class="app-title">
<i class="fas fa-rocket"></i> 下载官方App
</div>
<div class="app-sub">
赠本站会员<br>随时随地，尽在指尖。<br>获取更流畅的移动体验。
</div>
<div class="app-buttons">
<!-- APK直链 -->
<a href="https://pan.xunlei.com/s/VOlnJiFYDMDkcjsYhCKfMcWRA1?pwd=7kwh" target="_blank" rel="noopener noreferrer" class="app-btn app-btn-apk"><i class="fas fa-download"></i> 直接下载APK</a>
<!-- iOS App Store 按钮 — 请替换为真实App Store链接 -->
<a href="https://pan.xunlei.com/s/VOlnJiFYDMDkcjsYhCKfMcWRA1?pwd=7kwh" target="_blank" rel="noopener noreferrer" class="app-btn app-btn-ios">
<i class="fab fa-apple"></i> Apple Store 下载
</a>
</div>
</div>

 

版权声明：原创作品，未经允许不得转载，否则将追究法律责任。
本站资源有的自互联网收集整理，如果侵犯了您的合法权益，请联系本站我们会及时删除。
本站资源仅供研究、学习交流之用，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担。
本文链接:源头网https://www.58588885.com/46154.html
许可协议:《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权