boxmoe_header_banner_img

Hello! 欢迎来到喵享星球！

加载中

POST
文章导读
未分类

分析代码

avatar
风晓起 2026年2月2日 26
0 评论 


<!DOCTYPE html>

<html lang=”zh-CN”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>数据查询</title>

<script src=”https://cdn.tailwindcss.com”></script>

<link href=”https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css” rel=”stylesheet”>

<script>

tailwind.config = {

theme: {

extend: {

colors: {

primary: ‘#00C88C’,

secondary: ‘#007AFF’,

textRed: ‘#FF3B30’,

bgGray: ‘#F5F5F5’,

borderGray: ‘#E5E5E5’,

},

fontFamily: {

sans: [‘PingFang SC’, ‘Helvetica Neue’, ‘Arial’, ‘sans-serif’],

},

}

}

}

</script>

</head>

<body class=”bg-gray-50 font-sans”>

<!– 顶部导航栏 –>

<div class=”bg-white shadow-sm”>

<div class=”container mx-auto px-4 py-3 flex items-center justify-between”>

<a href=”#” class=”text-gray-800 text-lg font-medium”>

<i class=”fa fa-chevron-left mr-2″></i>

数据查询

</a>

</div>

</div>


<!– 项目标题 –>

<div class=”bg-white border-b border-gray-200 py-4 px-4″>

<div class=”container mx-auto flex items-center justify-between”>

<div class=”flex items-center”>

<div class=”w-8 h-8 bg-blue-500 rounded flex items-center justify-center text-white mr-2″>

<i class=”fa fa-cloud”></i>

</div>

<h1 class=”text-xl font-medium”>移动云盘</h1>

</div>

<button class=”text-primary text-sm flex items-center”>

切换项目

<i class=”fa fa-chevron-down ml-1 text-xs”></i>

</button>

</div>

</div>


<!– 说明文字 –>

<div class=”bg-white py-3 px-4 border-b border-gray-200″>

<p class=”text-red-500 text-sm”>

重点月与非重点月区别：重点月指的11月，12月，1月。其他月份均为非重点月

<br>

重点月单价：新用户7元，非新用户3元

<br>

非重点月单价：新用户5.5元，非新用户2元

</p>

<p class=”text-gray-500 text-xs mt-1″>查询数据仅供参考，实际以结算数据为准</p>

</div>


<!– 条件筛选 –>

<div class=”bg-white my-3 px-4 py-3 mx-4 rounded-lg shadow-sm”>

<div class=”flex items-center justify-between mb-3″>

<h2 class=”text-lg font-medium”>条件筛选</h2>

<button id=”toggleFilter” class=”text-primary text-sm flex items-center”>

收起条件查询

<i class=”fa fa-chevron-up ml-1 text-xs”></i>

</button>

</div>


<div id=”filterContent” class=”space-y-3″>

<!– 时间选择 –>

<div class=”flex items-center space-x-3″>

<div class=”flex-1″>

<input type=”text” placeholder=”开始时间” class=”w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/50″>

</div>

<span class=”text-gray-400″>-</span>

<div class=”flex-1″>

<input type=”text” placeholder=”结束时间” class=”w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/50″>

</div>

</div>


<!– 合作ID输入 –>

<div>

<input type=”text” placeholder=”请输入合作ID” class=”w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/50″>

</div>


<!– 查询按钮 –>

<button class=”w-full bg-primary hover:bg-primary/90 text-white py-2 rounded-md font-medium transition-colors”>

立即查询

</button>

</div>

</div>


<!– 数据统计 –>

<div class=”bg-white mx-4 rounded-lg shadow-sm overflow-hidden”>

<div class=”px-4 py-3 border-b border-gray-200 flex items-center justify-between”>

<h2 class=”text-lg font-medium flex items-center”>

<i class=”fa fa-bar-chart text-primary mr-2″></i>

数据统计

</h2>

<button class=”text-primary text-sm flex items-center”>

<i class=”fa fa-refresh mr-1″></i>

刷新

</button>

</div>


<div class=”px-4 py-3″>

<p class=”text-gray-500 text-sm”>如发现近期数据异常，请自查分享资源是否涉及违规</p>

</div>


<!– 数据卡片 –>

<div class=”grid grid-cols-3 gap-3 px-4 py-4″>

<div class=”text-center”>

<p class=”text-2xl font-medium text-gray-800″>0</p>

<p class=”text-sm text-gray-500 mt-1″>新用户数量</p>

</div>

<div class=”text-center”>

<p class=”text-2xl font-medium text-gray-800″>0</p>

<p class=”text-sm text-gray-500 mt-1″>新用户收益</p>

</div>

<div class=”text-center”>

<p class=”text-2xl font-medium text-gray-800″>0</p>

<p class=”text-sm text-gray-500 mt-1″>非新用户数量</p>

</div>

<div class=”text-center”>

<p class=”text-2xl font-medium text-gray-800″>0</p>

<p class=”text-sm text-gray-500 mt-1″>非新用户收益</p>

</div>

<div class=”text-center”>

<p class=”text-2xl font-medium text-gray-800″>0</p>

<p class=”text-sm text-gray-500 mt-1″>总收益</p>

</div>

</div>


<!– 数据表格 –>

<div class=”border-t border-gray-200″>

<table class=”w-full”>

<thead>

<tr class=”bg-gray-50″>

<th class=”px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider”>日期</th>

<th class=”px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider”>备注</th>

<th class=”px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider”>合作ID</th>

<th class=”px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider”>新</th>

</tr>

</thead>

<tbody>

<tr>

<td colspan=”4″ class=”px-4 py-8 text-center text-sm text-gray-500″>

暂无数据

</td>

</tr>

</tbody>

</table>

</div>

</div>


<script>

// 条件筛选展开/收起功能

const toggleButton = document.getElementById(‘toggleFilter’);

const filterContent = document.getElementById(‘filterContent’);


toggleButton.addEventListener(‘click’, () => {

if (filterContent.style.display === ‘none’) {

filterContent.style.display = ‘block’;

toggleButton.innerHTML = ‘收起条件查询 <i class=”fa fa-chevron-up ml-1 text-xs”></i>’;

} else {

filterContent.style.display = ‘none’;

toggleButton.innerHTML = ‘展开条件查询 <i class=”fa fa-chevron-down ml-1 text-xs”></i>’;

}

});

</script>

</body>

</html>

评论（0）

查看评论列表

暂无评论

发表评论

搜索

最新评论

    广告 01-24

    标题
    flex-direction: column; margin: 0; margin-bottom: 2.5rem; padding: 15px 0; background-image: none;