飞讯的主页优化设计与会议室

主页优化

使用layui的模板库，设计左侧导航栏，采用新的二级导航菜单

具体代码实现

应先引入layui的css与js

<link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>

会议室方面

通览页

设计一个环形进度条显示正在使用的会议室占比

 代码实现

html部分

 <div class="layui-col-md4">

                    <div v-cloak id="app1" class="layui-anim layui-anim-scale">
                        <div class="circle">
                            <div
                                    style="position: absolute;z-index: 999;width: 1rem;height:1rem;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 20px;">
                                <div>
                                    {{deg}}/{{total}}
                                </div>
                                <div>
                                    {{deg*100/total}}%
                                </div>
                            </div>
                            <div :style="circleDeg > 180 ? '' : 'clip: rect(0, 1rem, 1rem, 0.5rem);'" class="slice">
                                <div :style="{'--deg':circleDeg > 180 ? 180 : circleDeg}" class="bar"></div>
                                <div v-if="circleDeg > 180" :style="{'--deg':circleDeg - 180}" class="fill"></div>
                            </div>
                        </div>
                        <!-- <span>22%</span> -->

                        角度：<input v-model="deg" type="number" />
                    </div>

script部分

<script>
                        new Vue({
                            el: "#app1",
                            data: function () {
                                return {
                                    deg: 0,
                                    total:100
                                }
                            },
                            filters:{
                                toFixed2:function(num){
                                    return (num * 100).toFixed(2)
                                }
                            },
                            computed: {
                                circleDeg: function () {
                                    return (this.deg/this.total)*360
                                }
                            }
                        })
                    </script>

css部分

.circle {
            position: relative;
            /* font-size: 193px; */
            width: 1rem;
            height: 1rem;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            background-color: #e7ebe3;
        }

        .circle:after {
            position: absolute;
            top: 0.08rem;
            left: 0.08rem;
            display: block;
            content: " ";
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            background-color: white;
            width: 0.84rem;
            height: 0.84rem;
            -webkit-transition-property: all;
            -moz-transition-property: all;
            -o-transition-property: all;
            transition-property: all;
            -webkit-transition-duration: 0.2s;
            -moz-transition-duration: 0.2s;
            -o-transition-duration: 0.2s;
            transition-duration: 0.2s;
            -webkit-transition-timing-function: ease-in;
            -moz-transition-timing-function: ease-in;
            -o-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
        }

        .circle .slice {
            position: absolute;
            width: 1rem;
            height: 1rem;

        }

        .bar {
            width: 1rem;
            height: 1rem;
            position: absolute;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            border: 0.08rem solid #009688;
            box-sizing: border-box;
            clip: rect(0, 0.5rem, 1rem, 0rem);
            /* 截出一个半圆 */
            transform: rotate(calc(1deg * var(--deg)));
        }

        .fill {
            width: 1rem;
            height: 1rem;
            position: absolute;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            border: 0.08rem solid #009688;
            box-sizing: border-box;
            clip: rect(0, 1rem, 1rem, 0.5rem);
            /* 截出一个半圆 */
            transform: rotate(calc(1deg * var(--deg)));
        }

还使用layui的进度条表示用户活跃度

<p style="font-size: 50px;">用户活跃度</p>
                    <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                        <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
                    </div>

 表格页

由于暂未完成后端，所以只有表格框架

 

<%--
  Created by IntelliJ IDEA.
  User: NineTheta
  Date: 2022/3/25
  Time: 19:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/main.css"/>
    <link rel="stylesheet" href="../layui/css/layui.css" meida="all">
    <script src="../layui/layui.js"></script>

</head>
<body>
<div class="topbar-wrap white" style="margin-left: 200px">
    <jsp:include page="/main/top.jsp"></jsp:include>
</div>
<div class="container clearfix">


    <div style="width: 200px;margin-top: 50px" >
        <jsp:include page="/main/left.jsp"></jsp:include>
    </div>
    <div style="margin-left: 200px;">
        <div class="result-wrap">
            <fieldset class="table-search-fieldset" style="color: #009688">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px" id="btn">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">角色名称</label>
                                <div class="layui-input-inline">
                                    <!--注意此处input标签里的id-->
                                    <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <!--注意此处button标签里的type属性-->
                                <button type="button" class="layui-btn layui-btn-primary"  lay-submit data-type="reload" lay-filter="data-search-btn" style="color:#428bca"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
            <table id="demo" lay-filter="test"></table>

           
            <script>
                layui.use('table', function(){
                    var table = layui.table;

                    //第一个实例
                    table.render({
                        elem: '#demo'
                        ,height: 312
                        ,url: '/json/package.json' //数据接口
                        ,page: true //开启分页
                        ,cols: [[ //表头
                            {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                            ,{field: 'username', title: '编号', width:80}
                            ,{field: 'sex', title: '价格', width:80, sort: true}
                            ,{field: 'sign', title: '种类', width:80}
                            ,{field: 'experience', title: '日期', width: 177}
                            ,{field: 'logins', title: '日期', width: 177}
                            ,{field: 'wealth', title: '日期', width: 177}
                            ,{field: 'classify', title: '日期', width: 177}
                            ,{field: 'score', title: '日期', width: 177}


                        ]],
                        response: {
                            statusName: 'status' //成功的状态码，默认：code
                            ,statusCode: 0
                            ,msgName: 'hint' //状态信息的字段名称，默认：msg
                            ,countName: 'total' //数据总数的字段名称，默认：count
                            ,dataName: 'rows' //数据列表的字段名称，默认：data
                        },
                    });
                    var keyword = document.getElementById('demoReload').value;
                    console.log(keyword);
                    table.reload('demo', {

                        where: {
                            username:  "111"	//在表格中进行搜索
                        }
                        ,page: {
                            curr: 1
                        }
                    });
                });
            </script>
        </div>
    </div>
</div>
</body>
</html>