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

佚名 7年前 (2019-05-13) 随笔 1428人围观抢沙发百度已收录

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

base.html

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

2. base.html 页面结构：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

（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: 14px;">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 页面为例：