一个页面，不含数据交互，含楼梯导航

于 2021-05-08 12:06:55 发布
阅读量52 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vq_qiqi/article/details/116518216
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分级</title>
    <link rel="stylesheet" href="http://www.zhimaipr.com/static/plugin/bootstrap-3.3.7/css/bootstrap.min.css">
    <style>
        html {
            font: 10px/1.5 "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53"
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }
        ul,li {list-style-type: none;}
        .clear {clear: both;}
        .main {
            width: 1200px;
            margin: 0 auto;
        }
        .header-top {
            height: 40px;
            background-color: rgba(26, 28, 33, 0.86);
        }
        .header-top .top-title {
            color: rgb(249, 249, 249);
            line-height: 40px;
            font-size: 16px;
        }
        .header-bottom {
            height: 60px;
            background-color: rgb(40 52 123);
        }
        .header-bottom .bott-a {
            line-height: 60px;
            text-align: center;
        }
        .header-bottom .bott-b {
            position: absolute;
            top: 0;
            right: 0;
            line-height: 60px;
        }
        .colorGray {
            width: 100%;
            background-color: rgb(249, 249, 249);
        }
        .title {
            color: #161920;
            text-align: center;
            font-size: 36px;
        }
        .fenji-chart {
            width: 580px;
            height: 580px;
            margin-top: 30px;
            background: #fff;
            box-shadow: 0 30px 50px rgba(0, 0, 0, .08);
            border-radius: 50px;
        }
        .fenji-right .circle {
            background-image: linear-gradient(0deg, rgba(76, 34, 232, 0.71) 0, #4278c7);
            width: 420px;
            height: 420px;
            border-radius: 50%;
            box-shadow: 0 25px 50px rgba(76, 34, 232, 0.45);
            position: absolute;
            right: 6px;
            top: 30px;
            z-index: 1;
        }
        .fenji-right .text-list {
            width: 430px;
            height: 370px;
            background: #fff;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
            position: absolute;
            right: 90px;
            top: 120px;
            z-index: 2;
            border-radius: 50px;
        }
        .text-list table {margin: 40px 0 0 45px;}
        .text-list th {
            width: 75px;
            padding: 15px 10px 5px 5px;
            font-weight: normal;
            font-size: 15px;
        }
        .text-list td {
            width: 280px;
            padding: 15px 10px 5px 5px;
            font-size: 13px;
        }
        .fraction {
            width: 160px;
            margin: 15px auto 0;
        }
        .con-word {
            margin-top: 20px;
            margin: 0 auto;
            width: 90%;
            font-size: 16px;
        }
        .chart {
            height: 588px;
            padding: 40px 0;
            background: #fff;
            box-shadow: 0 30px 50px rgba(0, 0, 0, .08);
            border-radius: 50px;
        }
        .conaa-ul {
            margin-bottom: 26px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
            background: #fff;
            padding: 20px 0;
            border-radius: 4px;
            text-align: center;
            margin-right: 20px;
            font-size: 12px;
            color: #aaa;
        }
        .li-chinese {
            color: #999;
            font-size: 14px;
        }
        .cont-total {
            width: 220px;
            height: 100px;
            margin: 50px auto;
            text-align: center;
        }
        .score {
            line-height: 36px;
            color: #555;
        }
        .total-score {
            display: block;
            color: #555;
        }
        footer {
            height: 66px;
            background-color: rgb(39, 39, 39);
        }
        .footer-a {
            text-align: center;
            line-height: 66px;
            font-size: 14px;
            font-weight: 600;
        }
        .color-f4a {color: #ec801b;}
        .color-1eb {color: #218f77;}
        .color-fa6 {color: #fa6b5b;}
        .color-fff {color: #fff;}
        .color-pp {color: #4278c7;}
        .curr {color: #ec801b;}
        .width-100 {width: 100%;}
        .f-s-18 {font-size: 18px;}
        .f-s-24 {font-size: 24px;}
        .f-s-36 {font-size: 36px;}
        .f-l {float: left;}
        .m-t-6 {margin: 60px auto 0;}
        .p-l-40 {padding-left: 40px;}
        .p-t-40 {padding-top: 40px;}
        .p-40 {padding: 40px 0;}
        .p-t-16 {padding-top: 16px;}
        .p-b-4 {padding-bottom: 40px;}
        .sidenav {
            position: fixed;
            bottom: 160px;
            right: 50px;
            cursor: pointer;
        }
        .sidenav li {
            position: relative;
            padding: 9px 0 9px 14px;
            margin-left: -22px;
            font-size: 16px;
            border-left: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <header>
        <div class="header-top width-100">
            <div class="main">
                <p class="top-title">专利分级管理管理系统</p>
            </div>
        </div>
        <div class="header-bottom width-100">
            <div class="main" style="position: relative;">
                <div class="bott-a f-s-24 color-fff">三维立体展示</div>
                <div class="bott-b color-fff f-s-18">导出评估报告</div></div>
        </div>
    </header>
    <div class="content">
        <div class="fenji">
            <div class="main row">
                <h2 class="title p-t-40">分级概况</h2>
                <div class="fenji-left f-l col-md-6 p-b-4">
                    <div class="fenji-chart"></div>
                </div>
                <div class="fenji-right col-md-6" style="position: relative;">
                    <div class="fenji-f-t" style="height: 530px;">
                        <div class="circle"></div>
                        <div class="text-list">
                            <table>
                                <tbody>
                                    <tr>
                                        <th class="color-pp">专利名称</th>
                                        <td>一种基于单幅线条图像的三维立体重建方法</td>
                                    </tr>
                                    <tr>
                                        <th class="color-pp">专利类型</th>
                                        <td>发明专利</td>
                                    </tr>
                                    <tr>
                                        <th class="color-pp">法律状态</th>
                                        <td>有效</td>
                                    </tr>
                                    <tr>
                                        <th class="color-pp">申 请 号</th>
                                        <td>CN201410450000.1</td>
                                    </tr>
                                    <tr>
                                        <th class="color-pp">申 请 日</th>
                                        <td>20140905</td>
                                    </tr>
                                    <tr>
                                        <th class="color-pp">IPC分类</th>
                                        <td>G06T17/00</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="fraction">
                        <span class="score f-s-18">总分:</span>
                        <span class="f-s-36 color-pp">43.21</span>
                        <span class="total-score f-s-18">￥3.30 万元</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="law clear colorGray">
            <div class="main">
                <h2 class="title p-40">法律价值度</h2>
                <div class="con-word">
                    <span class="color-fa6">该维度得分由目标专利保护层级数</span>
                    、本专利和/或同族专利经历无效后确权、本专利和/或同族专利经历复审且获权、从属权利要求数量、说明书页数、<br />
                    <span class="color-fa6">说明书页数/本技术领域说明书平均页数（本技术领域是指ipc小组）</span>
                    、是否聘请代理人、存活期等指标得出。
                </div>
                <div class="m-t-6 row">
                    <div class="col-md-6">
                        <div class="p-l-40 row">
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-fa6">46</span>分
                                <div class="li-chinese">稳定性</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-fa6">46</span>分
                                <div class="li-chinese">专利布局情况</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-fa6">70</span>分
                                <div class="li-chinese">不可规避性</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24  color-fa6">0</span>分
                                <div class="li-chinese">利侵权可判性</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24  color-fa6">70</span>分
                                <div class="li-chinese">有效性</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24  color-fa6">0</span>分
                                <div class="li-chinese">专利许可性</div>
                            </div>
                            <div class="cont-total clear">
                                <div><span class="score f-s-18">得分:</span>
                                    <span class="f-s-36  color-fa6">58</span>
                                </div>
                                <span class="total-score f-s-18">法律总分：100分</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 p-b-4"><div class="chart"></div></div>
                </div>
            </div>
        </div>
        <div class="techonogy clear">
            <div class="main">
                <h2 class="title p-40">技术价值度</h2>
                <div class="con-word">
                    该维度得分由专利类型、引用专利文献的国别、他引率、申请人数、发明人数、引用专利文献数量、自引专利数量、
                    <span class="color-1eb">技术独立性指数</span><br />
                    <span class="color-1eb">旁系引证专利数量</span>
                    、分类号数量、
                    <span class="color-1eb">普遍性</span>
                    <span class="color-1eb">、分类号分布跨度、</span>
                    扩散指数
                    、前向引证文献组合中最大时间跨度、
                    <span class="color-1eb"> 当前影响力</span>
                    等指标综合评估<br />得出。
                </div>
                <div class="m-t-6 row">
                    <div class="col-md-6  p-b-4">
                        <div class="chart"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="p-l-40 row">
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-1eb">73.50</span>分
                                <div class="li-chinese">先进性</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-1eb">62</span>分
                                <div class="li-chinese">行业发展趋势</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-1eb">60</span>分
                                <div class="li-chinese">适用用范围</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-1eb">90</span>分
                                <div class="li-chinese">配置技术依存度</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-1eb">60.33</span>分
                                <div class="li-chinese">可替代性</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-1eb">46</span>分
                                <div class="li-chinese">成熟度</div>
                            </div>
                            <div class="cont-total clear">
                                <div><span class="score f-s-18">得分:</span>
                                    <span class="f-s-36 color-1eb">65.47</span>
                                </div>
                                <span class="total-score f-s-18">技术总分：100分</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="economy clear colorGray">
            <div class="main">
                <h2 class="title p-40">经济价值度</h2>
                <div class="con-word">
                    该维度得分由市场应用情况、市场规模情况、市场占有率、竞争情况、政策适应性等指标得出。（其他经济指标暂未在图中展示）。
                </div>
                <div class="m-t-6 row">
                    <div class="col-md-6">
                        <div class="p-l-40 row">
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-f4a">46</span>分
                                <div class="li-chinese">市场应用情况</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-f4a">46</span>分
                                <div class="li-chinese">市场规模情况</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-f4a">70</span>分
                                <div class="li-chinese">市场占有率</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-f4a">50</span>分
                                <div class="li-chinese">竞争情况</div>
                            </div>
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-f4a">70</span>分
                                <div class="li-chinese">政策适应性</div>
                            </div>
                            <div class="cont-total clear">
                                <div>
                                    <span class="score f-s-18">得分:</span>
                                    <span class="f-s-36 color-f4a">58</span>
                                </div>
                                <span class="total-score f-s-18">经济总分：100分</span>
                            </div>
                        </div>
                    </div>
                    <div class="f-l col-md-6 p-b-4"><div class="chart"></div></div>
                </div>
            </div>
        </div>
    </div>
    <div class="sidenav">
        <div class="sidenav-list">
            <li>分级概况 </li>
            <li>法律价值度</li>
            <li>技术价值度</li>
            <li>经济价值度</li>
        </div>
    </div>
    <footer class="clear width-100">
        <div class="main">
            <div class="footer-a color-fff">Copyright © 2008-2021 芝麻知识产权 版权所有
                豫ICP备19005779号-2
            </div>
        </div>
    </footer>
</body>
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.js"></script>
<script>
    var Page = (function () {
        var pos = [$('.fenji'), $('.law'), $('.techonogy'), $('.economy')],
            nav = $('.sidenav-list li'),
            css = 'curr';
        for (var i in pos) {pos[i] = pos[i].offset().top - 500;}
        $(window).on('scroll', function () {
            var t = $(this).scrollTop();
            nav.removeClass('curr');
            if (t > pos[pos.length - 1]) {
                nav.eq(pos.length - 1).addClass(css);
            } else {
                for (var i = 0; i < pos.length - 1; i++)
                    if (t >= pos[i] && t < pos[i + 1]) {nav.eq(i).addClass(css);}
            }
        });
        nav.on('click', function () {
            console.log($(this).index())
            var i = $(this).index();
            $('html, body').animate({ 'scrollTop': pos[$(this).index() ] + 500 }, 500);
        });
    })();
</script>
</html>
V's Q
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值