master

分支 (2)

管理

管理

master

feature-success

soga
/
demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5.3 Fixed-Width Left Sidebar & Fluid Right Content</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">


    <link href="https://at.alicdn.com/t/c/font_4516942_2xj7mn9ccfe.css" rel="stylesheet">
    <style>
        /* 可以根据需要调整左侧栏的固定宽度 */
        .sidebar {
            width: 11vw;
            position: fixed; /* 保持左侧栏固定不动 */
            top: 0;
            bottom: 0;
            left: 0;
            background-color: #f8f9fa;
            overflow-y: auto; /* 添加滚动条以应对高度超出视口的情况 */
        }

        /* 为右侧内容区域添加适当的内边距，以避免被左侧栏遮挡 */
        .content {
            margin-left: 11vw; /* 应等于左侧栏宽度加上可能的边框或内边距 */
        }


        .left-menu{
            padding:0 !important;
            margin:0;
        }

        .sidebar a {
            text-decoration: none;
            color: #fff;
            height: 60px;
            padding:10px 0 0 10px !important;
            margin:0;
        }
        .sidebar a:hover {
            text-decoration: none;
            color: #1783E1;
            background-color: #32434C;
        }


        .main-tooth{
           color: blue;
        }

        .main-tooth td {
            height: 3.25vw;
            border:1px solid #ccc;
            color: blue;
            padding: 0;
            margin:0;
            vertical-align: bottom;
        }
        .main-tooth .blue {
          background: rgba(23, 131, 255, 0.2);
          color: blue;
        }

        .main-tooth .green {
          background: rgba(0, 255, 0, 0.1);
        }

        .td-no-border {
            border: none;
            border-width:0 !important;
            border-image-width:  0;
        }

        .td-no-border td{
            border: none;
            background-color: rgba(255,0,0,0);
            height: 2vw;
            text-align:right;
        }


        /* 为特定td添加自定义类，方便应用倒三角形样式 */
        .triangle-text {
            position: relative;
            /* 可选：添加内边距以确保倒三角形与td内容之间有足够的空间 */
            padding-top: 2.8vh;
        }
        .triangle-text::before {
            content: "6.3";
            display: inline-block;
            text-align:right;
            vertical-align: text-top;
            position: absolute;
            top: -2.8vh; /* 调整以改变倒三角形与td顶部的距离 */
            left: 50%; /* 将倒三角形居中对齐 */
            transform: translateX(-50%); /* 实现水平居中 */
            color: #000;
        }


        /* 为特定td添加自定义类，方便应用倒三角形样式 */
        .triangle-orange {
            position: relative;
            /* 可选：添加内边距以确保倒三角形与td内容之间有足够的空间 */
            padding-top: 2.8vh;
        }
        .triangle-orange::before {
            content: "";
            display: inline-block;
            text-align:center;
            vertical-align: text-top;
            position: absolute;
            top: -1.8vh; /* 调整以改变倒三角形与td顶部的距离 */
            left: 50%; /* 将倒三角形居中对齐 */
            transform: translateX(-50%); /* 实现水平居中 */
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 1.66vh 1.66vh  0 1.66vh; /* 调整边框宽度以改变倒三角形大小 */
            border-color: #fd9c00 transparent transparent transparent; /* 黄色三角形，第一个颜色是填充色，后面三个是透明 */
            opacity: 1;
        }


        /* 为特定td添加自定义类，方便应用倒三角形样式 */
        .triangle-green {
            position: relative;
            /* 可选：添加内边距以确保倒三角形与td内容之间有足够的空间 */
            padding-top: 1.8vh;
            border: 2px solid #00d200 !important;
            transition: opacity 0.5s ease-in;
        }
        .triangle-green::before {
            content: "";
            position: absolute;
            top: -1.8vh; /* 调整以改变倒三角形与td顶部的距离 */
            left: 50%; /* 将倒三角形居中对齐 */
            transform: translateX(-50%); /* 实现水平居中 */
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 1.66vh 1.66vh  0 1.66vh; /* 调整边框宽度以改变倒三角形大小 */
            border-color: #00d200 transparent transparent transparent; /* 黄色三角形，第一个颜色是填充色，后面三个是透明 */
            opacity: 1;
        }


        .btn-scale-on-click {
            transition: transform 0.2s;
        }

        .btn-scale-on-click:hover {
           background-color: #eee;
        }

        .btn-scale-on-click:focus,
        .btn-scale-on-click:active {
            transform: scale(1.2);
            background-color: #eee;
            border-color:#0d86f6 !important;
        }

        .btn-main-ico {color: #0d86f6; font-size: 40px;}
        .btn-main-text {text-align: left;}
        .btn-main-name {color: #000; font-size: 24px;}
        .btn-main-remark {color: #aaa; font-size: 12px;}

    </style>
</head>
<body>

    <div class="d-flex flex-column vh-100">
        <!-- 左侧固定宽度栏 -->
        <nav class="sidebar p-3" style="padding:0 !important;margin:0;background-color: #2A3740;">
            <div style="background-color: #111F24;color: #fff;height: 80px;text-align: center;font-size: 20px;margin:0;padding:15px 0 0 0;">
                睿思通
            </div>
            <div class="left-menu d-flex flex-column  p-3"  style="font-size:18px;color: #fff;">
                <!-- Menu items with icons -->
                <a href="#" class="menu-item d-block text-decoration-none">
                    <i class="iconfont icon-baocun-copy"></i>
                    <span class="ms-2">保存</span>
                </a>
                <a href="#" class="menu-item d-block text-decoration-none">
                    <i class="iconfont icon-weibiaoti--"></i>
                    <span class="ms-2">生成报告</span>
                </a>
                <a href="#" class="menu-item d-block text-decoration-none">
                    <i class="iconfont icon-fengxianpinggu"></i>
                    <span class="ms-2">风险评估</span>
                </a>
                <a href="#" class="menu-item d-block text-decoration-none">
                    <i class="iconfont icon-shanchu"></i>
                    <span class="ms-2">删除</span>
                </a>
                <a href="#" class="menu-item d-block text-decoration-none">
                    <i class="iconfont icon-xinjian"></i>
                    <span class="ms-2">新建/查找</span>
                </a>
                <a href="#" class="menu-item d-block text-decoration-none">
                    <i class="iconfont icon-xuanjiao"></i>
                    <span class="ms-2">宣教</span>
                </a>
                <a href="#" class="menu-item d-block text-decoration-none">
                    <i class="iconfont icon-AI"></i>
                    <span class="ms-2">智能语音</span>
                </a>
                <a href="#" class="menu-item d-block text-decoration-none">
                    <i class="iconfont icon-zhaoxiangji"></i>
                    <span class="ms-2">照相</span>
                </a>
            </div>

        </nav>

        <!-- 右侧动态宽度内容区域 -->
        <main class="content flex-grow-1">

            <div class="container" style="padding:0 !important;margin:0 !important;max-width: none;">

                <div class="d-flex align-items-center"  style="background-color: rgb(24,37,49);color:#fff;height: 50px; font-size: 20px;justify-content:space-between;">
                    <div>
                        <i class="iconfont icon-user"></i>  李先生 | 男 | 28岁 | 2024042101 | 历史记录
                    </div>

                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            李医生
                        </button>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">李医生</a></li>
                          <li><a class="dropdown-item" href="#">王医生</a></li>
                          <li><a class="dropdown-item" href="#">张医生</a></li>
                        </ul>
                    </div>
                </div>

                <div style="padding:5vw 4vw 2vw 4vw">
                    <div class="border d-flex" style="background-image:url('./main.png');border-bottom: none !important; width:80vw;height:28vw; background-size:100% 100%;display: flex;
                    flex-direction: column;">
                        <table class="table table-bordered border-primary main-tooth" style="table-layout: fixed;overflow: hidden;white-space: nowrap;  margin-top:-2vw;" id="main_table">

                        </table>
                    </div>
                </div>


                <div style="padding:0 4vw 0 4vw">

                    <div class="d-flex justify-content-around ">
                        <button type="button" class="btn btn-lg btn-outline-secondary border shadow-sm btn-scale-on-click d-flex align-items-center">
                            <div class="flex-shrink-0 me-2">
                                <i class="iconfont icon-yachixiufu1 btn-main-ico"></i>
                            </div>
                            <div class="flex-grow-1 btn-main-text" >
                                <h6 class="fst-italic fs-6 btn-main-name">牙列检测</h6>
                                <small class="fs-7 btn-main-remark">标记牙列状态</small>
                            </div>
                        </button>

                        <button type="button" class="btn btn-lg btn-outline-secondary border shadow-sm btn-scale-on-click d-flex align-items-center">
                            <div class="flex-shrink-0 me-2">
                                <i class="iconfont icon-lashenyachi-xuanzhong btn-main-ico"></i>
                            </div>
                            <div class="flex-grow-1 btn-main-text">
                                <span class="fst-italic fs-6 btn-main-name">测量</span>
                                <br>
                                <span class="fs-7 btn-main-remark">测量牙周袋深度</span>
                            </div>
                        </button>

                        <button type="button" class="btn btn-lg btn-outline-secondary border shadow-sm btn-scale-on-click d-flex align-items-center">
                            <div class="flex-shrink-0 me-2">
                                <i class="iconfont icon-shoushuchuxieliang btn-main-ico"></i>
                            </div>
                            <div class="flex-grow-1 btn-main-text">
                                <span class="fst-italic fs-6 btn-main-name">出血</span>
                                <br >
                                <span class="fs-7 btn-main-remark">标记牙出血</span>
                            </div>
                        </button>

                        <button type="button" class="btn btn-lg btn-outline-secondary border shadow-sm btn-scale-on-click d-flex align-items-center">
                            <div class="flex-shrink-0 me-2">
                                <i class="iconfont icon-yachichuxie btn-main-ico"></i>
                            </div>
                            <div class="flex-grow-1 btn-main-text">
                                <span class="fst-italic fs-6 btn-main-name">溢脓</span>
                                <br>
                                <span class="fs-7 btn-main-remark">标记牙溢脓</span>
                            </div>
                        </button>

                        <button type="button" class="btn btn-lg btn-outline-secondary border shadow-sm btn-scale-on-click d-flex align-items-center">
                            <div class="flex-shrink-0 me-2">
                                <i class="iconfont icon-yachisongdong btn-main-ico"></i>
                            </div>
                            <div class="flex-grow-1 btn-main-text">
                                <span class="fst-italic fs-6 btn-main-name">松动度</span>
                                <br>
                                <span class="fs-7 btn-main-remark">标记牙松动度</span>
                            </div>
                        </button>

                        <button type="button" class="btn btn-lg btn-outline-secondary border shadow-sm btn-scale-on-click d-flex align-items-center">
                            <div class="flex-shrink-0 me-2">
                                <i class="iconfont icon-yachixiufu btn-main-ico"></i>
                            </div>
                            <div class="flex-grow-1 btn-main-text">
                                <span class="fst-italic fs-6 btn-main-name">根分叉</span>
                                <br>
                                <span class="fs-7 btn-main-remark">标记牙根分叉</span>
                            </div>
                        </button>
                    </div>
                </div>

                <div>
                    <div class="" style="margin-top:10px;padding:10px;">

                        <button type="button" class="btn btn-primary" id="btn_set">设置牙周深度（演示随机）</button>
                        <button type="button" class="btn btn-primary" id="btn_set2">设置退縮/增生（演示随机）</button>
                        <button type="button" class="btn btn-primary" id="btn_next">下一个</button>
                        <span style="text-align: right; font-size: 14px;color:#888;float: right;">睿思通提供技术支持</span>
                    </div>
                </div>

            </div>
        </main>
    </div>

    <!-- <div style="text-align: center; font-size: 24px;">3</div>
    <div style="text-align: right; font-size: 12px;">.6</div> -->
    <script id="tab1" type="text/html">
		{{each array_1}}
        <td class="{{$value.class}}" id="btn_{{$value.id}}_1">
        </td>
        <td class="{{$value.class}}" id="btn_{{$value.id}}_2">
        </td>
        <td class="{{$value.class}}" id="btn_{{$value.id}}_3">
        </td>
		{{/each}}
	</script>

    <script>

        var roadPath = 1;
        var g_position = 0;
        var g_positionChild = 0;
        var g_checkPositionLast = "";
        var g_setPositon = 0;
        var g_setPositonChild = 0;

        initPoint6();

        document.getElementById("btn_set").addEventListener('click',function(){
            var dom = document.getElementById("btn_" + g_position + "_" + g_positionChild);
            if(g_setPositon !== 0) {
                document.getElementById("btn_" + g_setPositon + "_" + g_setPositonChild).classList.remove('triangle-orange');
            }
            var num1 = Math.floor(Math.random() * 10) + 1;
            var num2 = Math.floor(Math.random() * 10) + 1;
            var html =  '<div style="text-align: center; font-size: 20px;">' + num1 + '</div><div style="text-align: right; font-size: 9px;">.' + num2 + '</div>';
            dom.innerHTML = "";
            dom.insertAdjacentHTML("beforeend",html);
            dom.classList.add('triangle-orange');
            g_setPositon = g_position;
            g_setPositonChild = g_positionChild;
		},false);


        document.getElementById("btn_set2").addEventListener('click',function(){
            // var dom = document.getElementById("btn_" + g_position + "_" + g_positionChild + "_top");
            // var num1 = Math.floor(Math.random() * 10) + 1;
            // var num2 = Math.floor(Math.random() * 10) + 1;
            // var html =  '<span style="font-size:20px">' + num1 + '</span><span style="font-size:9px">.' + num2 + '<span>';
            // dom.innerHTML = "";
            // dom.insertAdjacentHTML("beforeend",html);

            var dom = document.getElementById("btn_" + g_position + "_" + g_positionChild );
            var dom2 = document.getElementById("btn_" + g_position + "_" + g_positionChild + "_top");
            if(g_setPositon !== 0) {
                document.getElementById("btn_" + g_setPositon + "_" + g_setPositonChild).classList.remove('triangle-orange');
            }
            var num1 = Math.floor(Math.random() * 10) + 1;
            var num2 = Math.floor(Math.random() * 10) + 1;
            var html =  '<span style="font-size:20px">' + num1 + '</span><span style="font-size:9px">.' + num2 + '<span>';
            dom2.innerHTML = "";
            dom2.insertAdjacentHTML("beforeend",html);
            dom.classList.add('triangle-orange');
            g_setPositon = g_position;
            g_setPositonChild = g_positionChild;

		},false);


        document.getElementById("btn_next").addEventListener('click',function(){

            if(g_position === 0) {
                g_position =  18;
                g_positionChild =  1;
                g_checkPositionLast = "btn_18_1";
                document.getElementById("btn_" + g_position + "_" + g_positionChild).classList.add('triangle-green');
                return;
            }

            document.getElementById("btn_" + g_position + "_" + g_positionChild).classList.remove('triangle-green');
            var id = getNext(1,g_position,g_positionChild);
            document.getElementById("btn_" + id).classList.add('triangle-green');

		},false);


        function getNext(path,position,child) {

            if(path === 1) {
                if(child === 1 || child === 2) {
                    g_positionChild++;
                    return position + "_" + (++child);
                }

                g_positionChild = 1;
                if((position <= 18 && position > 11)  ||  (position <= 48 && position > 41)) {
                    --g_position;
                    return (--position) + "_1";
                }
                if((position >= 21 && position < 28) || (position >= 31 && position < 38) ) {
                    ++g_position;
                    return (++position) + "_1";
                }
                if(position === 11 ) {
                    g_position = 21;
                    return "21_1";
                }
                if(position === 28 ) {
                    g_position = 48;
                    return "48_1";
                }
                if(position === 41 ) {
                    g_position = 31;
                    return "31_1";
                }
                if(position === 38 ) {
                    g_position = 18;
                    return "18_1";
                }
            }


        }


        function point6Click(){

            var table = document.getElementById('main_table');

            for (var i = 0; i < table.rows.length; i++) {
                var row = table.rows[i];
                if(i === 1 || i === 2 || i === 5 || i === 6) {

                    for (var j = 0; j < row.cells.length; j++) {
                    var cell = row.cells[j];
                    cell.addEventListener('click', function(event) {
                        if(g_position !== 0) {
                            document.getElementById("btn_" + g_position + "_" + g_positionChild).classList.remove('triangle-green');
                        }
                        var clickedCell = event.target;
                        var cellId = clickedCell.id;
                        var array = cellId.split("_");
                        g_position = array[1];
                        g_positionChild = array[2];
                        clickedCell.classList.add('triangle-green');

                    });
                }

                }

            }


        }

        function initPoint6(){
            var html = '<tr class="td-no-border">';
            for(i = 18;i >= 11; i--) {
                html = html + '<td id="btn_' + i + '_1_top"></td><td id="btn_' + i  + '_2_top"></td><td id="btn_'  + i + '_3_top"></td>';
            }
            for(i = 21;i<= 28 ; i++) {
                html = html + '<td id="btn_' + i + '_1_top"></td><td id="btn_' + i  + '_2_top"></td><td id="btn_'  + i + '_3_top"></td>';
            }

            html = html + "</tr><tr>"
            for(i = 18;i >= 11 ; i--) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_1"></td><td class="blue" id="btn_' + i  + '_2"></td><td class="blue" id="btn_'  + i + '_3"></td>';
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_1"></td><td class="green" id="btn_' + i + '_2"></td><td class="green" id="btn_'  + i + '_3"></td>';
                }
            }
            console.log(html)
            for(i = 21;i<= 28 ; i++) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_1"></td><td class="blue" id="btn_' + i + '_2"></td><td class="blue" id="btn_'  + i + '_3"></td>';
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_1"></td><td class="green" id="btn_' + i  + '_2"></td><td class="green" id="btn_'  + i + '_3"></td>';
                }
            }
            html = html + "</tr><tr>"
            for(i = 18;i>= 11 ; i--) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_4"></td><td class="blue" id="btn_' + i + '_5"></td><td class="blue" id="btn_'  + i + '_6"></td>';
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_4"></td><td class="green" id="btn_' + i + '_5"></td><td class="green" id="btn_'  + i + '_6"></td>';
                }
            }
            for(i = 21;i<= 28 ; i++) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_4"></td><td class="blue" id="btn_' + i + '_5"></td><td class="blue" id="btn_'  + i + '_6"></td>';
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_4"></td><td class="green" id="btn_' + i + '_5"></td><td class="green" id="btn_'  + i + '_6"></td>';
                }
            }
            html = html + '</tr><tr style="height:13vw;border:none;"></tr><tr class="td-no-border">';


            for(i = 48;i >= 41; i--) {
                html = html + '<td id="btn_' + i + '_1_top"></td><td id="btn_' + i  + '_2_top"></td><td id="btn_'  + i + '_3_top"></td>';
            }
            for(i = 31;i <= 38; i++) {
                html = html + '<td id="btn_' + i + '_1_top"></td><td id="btn_' + i  + '_2_top"></td><td id="btn_'  + i + '_3_top"></td>';
            }

            html = html + '</tr><tr>';

            for(i = 48;i >= 41 ; i--) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_1"></td><td class="blue" id="btn_' + i + '_2"></td><td class="blue" id="btn_'  + i + '_3"></td>';
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_1"></td><td class="green" id="btn_' + i + '_2"></td><td class="green" id="btn_'  + i + '_3"></td>';
                }
            }
            for(i = 31;i<= 38 ; i++) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_1"></td><td class="blue" id="btn_' + i + '_2"></td><td class="blue" id="btn_'  + i + '_3"></td>';
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_1"></td><td class="green" id="btn_' + i + '_2"></td><td class="green" id="btn_'  + i + '_3"></td>';
                }
            }
            html =    html + "</tr><tr>"
            for(i = 48;i>= 41 ; i--) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_4"></td><td class="blue" id="btn_' + i + '_5"></td><td class="blue" id="btn_'  + i + '_6"></td>';
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_4"></td><td class="green" id="btn_' + i + '_5"></td><td class="green" id="btn_'  + i + '_6"></td>';
                }
            }
            for(i = 31;i<= 38 ; i++) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_4"></td><td class="blue" id="btn_' + i + '_5"></td><td class="blue" id="btn_'  + i + '_6"></td>';
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_4"></td><td class="green" id="btn_' + i + '_5"></td><td class="green" id="btn_'  + i + '_6"></td>';
                }
            }
            html =  html + "</tr>"
            var main_table = document.getElementById("main_table");
            main_table.innerHTML = "";
            main_table.insertAdjacentHTML("beforeend",html);
            point6Click();

        }


    </script>


    <!-- 引入 Bootstrap JavaScript Bundle with Popper -->
    <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>
</body>
</html>