privacy-protection/PP-binding/frontend/web/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平台绑定统计</title>
    <link rel="stylesheet" href="./style/index.css">
    <script src="./script/index.js"></script>
</head>
<body>
<div class="title-container" id="title-container">
    <h1 class="title">平台绑定统计</h1>
</div>

<div class="main-container">
    <div class="tools-container" id="tools-container">
        <button class="add-item-button" id="add-item-button">添加</button>
        <input placeholder="输入关键字查询"/>
        <div class="count">总共&nbsp;<span>210</span>&nbsp;条数据</div>
    </div>
    <div class="table-container">
        <div class="table-header">
            <div>基础工具类型</div>
            <div>基础工具ID</div>
            <div>绑定到</div>
            <div>危险等级</div>
            <div>用户名</div>
            <div>密码</div>
            <div>备注</div>
            <div>绑定的其他平台</div>
            <div>操作</div>
        </div>

        <div class="table-outer-scrollable-container" id="table-outer-scrollable-container">
            <div class="table-items-container">
                <div>{{手机号}}</div>
                <div>{{12345678900}}</div>
                <div>{{滴滴打车}}</div>
                <div>{{安全}}</div>
                <div>{{小爱同学}}</div>
                <div>{{123456}}</div>
                <div>{{暂无}}</div>
                <div class="more-platform-container">
                    <div>{{邮箱}},&nbsp;</div>
                    <div>{{微信}},&nbsp;</div>
                    <div>{{qq}},&nbsp;</div>
                    <div>{{微博}}</div>
                </div>
                <div>
                    <button class="change-item-button">修改</button>
                    <div class="white-space"></div>
                    <button class="delete-item-button">删除</button>
                </div>
            </div>
            <div class="table-items-container">
                <div>{{手机号}}</div>
                <div>{{12345678900}}</div>
                <div>{{滴滴打车}}</div>
                <div>{{安全}}</div>
                <div>{{小爱同学}}</div>
                <div>{{123456}}</div>
                <div>{{暂无}}</div>
                <div class="more-platform-container">
                    <div>{{邮箱}},&nbsp;</div>
                    <div>{{微信}},&nbsp;</div>
                    <div>{{qq}},&nbsp;</div>
                    <div>{{微博}}</div>
                </div>
                <div>
                    <button class="change-item-button">修改</button>
                    <div class="white-space"></div>
                    <button class="delete-item-button">删除</button>
                </div>
            </div>
        </div>
    </div>
</div>

<dialog class="add-item-dialog" id="add-item-dialog">
    <!--    title bar -->
    <div class="title-bar-container">
        <div class="close-button" id="add-item-dialog-close-button"></div>
        <div class="title">添加一条数据</div>
    </div>
</dialog>
</body>
</html>