stark组件base.html

stark 组件基础页面base.html 文件

base.html

1. base.html 页面是： stark组件增，删，改，查页面的公共部分，如头部导航栏，左侧的用户权限列表栏等。

2. base.html 页面结构：

（1）公共部分的代码区域。（其他模板通过继承）。

（2）css 自定义部分，js 自定义部分，内容自定义部分，权限栏部分等（红色区域部分）。

下面问stark组件base.html文件

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CRM</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <link rel="shortcut icon" href="/static/imgs/luffy-study-logo.png">
    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/static/css/commons.css ">
    <link rel="stylesheet" href="/static/css/nav.css">
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <style>

        .pg-body > .left-menu {
            background-color: #F3F3F3;
            position: absolute;
            left: 1px;
            top: 60px;
            bottom: 0;
            width: 220px;
            overflow: auto;
        }

        .pg-body > .right-body {
            position: absolute;
            left: 225px;
            right: 0;
            top: 60px;
            bottom: 0;
            overflow: scroll;
            border-top: 0;
            font-size: 13px;
            min-width: 755px;
            padding: 20px;
        }

        .dropdown-menu {
            top: 118%;
            left: -108px;
        }

        a:hover{
                text-decoration: none!important;
            }

    </style>

   {% block css %}

   {% endblock %}

</head>
<body>

<div class="pg-header">
    <div class="nav">
        <div class="logo-area left">
            <a href="#">
                <img class="logo" src="{% static 'imgs/logo.svg' %}">
                <span style="font-size: 18px;">CRM </span>
            </a>
        </div>

        <div class="left-menu left">
            <a class="menu-item">资产管理</a>
            <a class="menu-item">用户信息</a>
            <a class="menu-item">权限管理</a>
            <div class="menu-item">
                <span>使用说明</span>
                <i class="fa fa-caret-down" aria-hidden="true"></i>
                <div class="more-info">
                    <a href="#" class="more-item">666</a>
                    <a href="#" class="more-item">888</a>
                </div>
            </div>
        </div>

        <div class="right-menu right clearfix">

            <!-- Single button -->
            <div class="btn-group user-info right">
              <img class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" width="50" height="50" class="img-circle" src="{% static 'imgs/default.jpg' %}">

              <ul class="dropdown-menu small">
                <li><a href="#" class="more-item">个人信息</a></li>
                <li><a href="/logout/" class="more-item">注销</a></li>
                <li><a href="/home/">修改密码</a></li>
                <li><a href="/home/">更换头像</a></li>
              </ul>
            </div>

            <a class="user-menu right">
                <i class="fa fa-user" aria-hidden="true"></i>
                <span>{{ request.user }}</span>
            </a>


            <a class="user-menu right">
                消息
                <i class="fa fa-commenting-o" aria-hidden="true"></i>
                <span class="badge bg-success">2</span>
            </a>

            <a class="user-menu right">
                通知
                <i class="fa fa-envelope-o" aria-hidden="true"></i>
                <span class="badge bg-success">2</span>
            </a>

            <a class="user-menu right">
                任务
                <i class="fa fa-bell-o" aria-hidden="true"></i>
                <span class="badge bg-danger">4</span>
            </a>
        </div>

    </div>
</div>

<div class="pg-body">

        <div class="left-menu">
             {% block side_bar %}
                {% load rbac %}
                {% get_menu request %}
             {% endblock side_bar %}
        </div>

    <div class="right-body">
         {% block content %}

         {% endblock content %}
    </div>
</div>

{% block js %}

 {% endblock %}
</body>
</html>

（3）.stark组件增删改查页面的，继承语句

{% extends "stark/base.html" %}

以change._view.html 页面为例：

{% extends "stark/base.html" %}

{% block css %}
<style>

        .error{
            color: red;
        }
        h3{
            text-align: center;
        }
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h3>编辑{{ table_name }}</h3>
            {% include "stark/formbase.html" %}

        </div>
    </div>
</div>
{% endblock %}

change_view.html

(4) stark 组件中，一些静态文件，font-awesome 字体图标文件夹。以及js,bootstrap.css文件等，主要是组件的依赖文件。imgs 主要用于base.html 导航栏中的图片。

stark 组件基础页面base.html 文件

base.html

猜你喜欢