<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block Title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/base_info.css' %}">
    {% block css %}{% endblock %}
</head>
<body>
<div class="left-box">
    <div class="lay-out">
        {% if request.session.role == "Farmers" %}
            <a href="/exper_6/index" class="nav-link">主页</a>
            {% if not request.session.isExistFarmer %}
                <a href="/exper_6/farmerBasicInfo" class="nav-link">农户信息填报</a>
            {% endif %}
            {% if request.session.isExistFarmer %}
                <a href="/exper_6/mangerAudit/{{ request.session.farmerId }}#farmerBasicInfo"
                   class="nav-link">查看农户基本信息</a>
                <a href="/exper_6/mangerAudit/{{ request.session.farmerId }}#familyMember"
                   class="nav-link">查看家庭成员信息</a>
                <a href="/exper_6/mangerAudit/{{ request.session.farmerId }}#familyAsset"
                   class="nav-link">查看资产负债信息</a>
                <a href="/exper_6/mangerAudit/{{ request.session.farmerId }}#familyFinance"
                   class="nav-link">查看家庭收支信息</a>
                <a href="/exper_6/mangerAudit/{{ request.session.farmerId }}#enterprise"
                   class="nav-link">查看经营信息</a>
                <a href="/exper_6/auditCredits" class="nav-link">查看审核进度</a>
            {% endif %}
            <a href="/exper_6/signOut" class="nav-link">退出登录</a>
        {% endif %}
        {% if request.session.role == "Manger" %}
            <a href="/exper_6/mangerAudit/{{ request.session.farmerId }}#farmerBasicInfo"
               class="nav-link">审核农户基本信息</a>
            <a href="/exper_6/mangerAudit/{{ request.session.farmerId }}#familyMember"
               class="nav-link">审核家庭成员信息</a>
            <a href="/exper_6/mangerAudit/{{ request.session.farmerId }}#familyAsset"
               class="nav-link">审核资产负债信息</a>
            <a href="/exper_6/mangerAudit/{{ request.session.farmerId }}#familyFinance"
               class="nav-link">审核家庭收支信息</a>
            <a href="/exper_6/mangerAudit/{{ request.session.farmerId }}#enterprise"
               class="nav-link">审核经营信息</a>
            <a href="/exper_6/pendingReview" class="nav-link">返回主页</a>
        {% endif %}
    </div>
</div>
<div class="right-box">
    {% block form %}{% endblock %}
</div>
{% block script %}{% endblock %}
</body>
</html>
<pre><code class="language-css">.lay-out {
  display: flex;
  flex-direction: column;
}

.nav-link {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.nav-link:hover {
  background-color: #f2f2f2;
}
</code></pre>
<p>To make the options appear in a vertical column, you can add the following CSS code to the &quot;base_info.css&quot; file:</p>
<pre><code class="language-css">.lay-out {
  display: flex;
  flex-direction: column;
}

.nav-link {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.nav-link:hover {
  background-color: #f2f2f2;
}
</code></pre>
<p>This CSS code sets the <code>flex-direction</code> property of the <code>.lay-out</code> class to <code>column</code>, which makes the child elements appear vertically. The <code>.nav-link</code> class styles the links as blocks and adds some padding and hover effects.</p>
<p>Make sure to link the &quot;base_info.css&quot; file correctly in your HTML template:</p>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;{% static 'css/base_info.css' %}&quot;&gt;
</code></pre>
<p>With this CSS code, the options in the left navigation box will be displayed in a vertical column.</p>

原文地址: https://www.cveoy.top/t/topic/o4G8 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录