原来设计的效果如下
后来根据需求又改了一版效果如下
源码分享：
{% load customtag %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<link rel="icon" type="image/png" href="../media/img/default/icon.png">
<title>HDK系统</title>
<!-- CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/custom.css" rel="stylesheet">
</head>
<body>
<div id="topcss">
<div style="height:30px;"><div style="padding-top:10px;padding-left:10px;float:left;width:50%;">{{uname}},欢迎回来!</div>
<div style="padding-top:10px;padding-right:10px;float:right;width:50%;"><a href="/logout" style="float:right;">注销</a></div>
</div>
<div style="height:30px;padding-top:10px;padding-left:10px;">到期时间:<k style="color:red;">{{hdkconfinfo.hdk_endtime|date:"Y-m-d H:i:s"}}</k></div>
<div style="height:30px;padding-top:10px;padding-left:10px;">状态: <k style="font-size:13px;">
{% if hdktaskinfo.hdktask_status == 1 %}
<d style="color:#33FF00;">(执行中)</d>
{% else %}
<d style="color:red;">(未执行)</d>
{% endif %}
</k></div>
<div style="height:30px;padding-top:10px;padding-left:10px;">分类: <input id="0" type="radio" name="hdksort" checked />全部 <input id="1" type="radio" name="hdksort"/>女装 <input id="2" type="radio" name="hdksort"/>男装 <input id="3" type="radio" name="hdksort"/>内衣 <input id="4" type="radio" name="hdksort"/>美妆</div>
<div style="height:30px;padding-top:10px;padding-left:10px;"> <input id="5" type="radio" name="hdksort"/>饰品 <input id="6" type="radio" name="hdksort" />鞋品 <input id="7" type="radio" name="hdksort"/>箱包 <input id="8" type="radio" name="hdksort"/>儿童 <input id="9" type="radio" name="hdksort"/>母婴</div>
<div style="height:30px;padding-top:10px;padding-left:10px;"> <input id="10" type="radio" name="hdksort"/>居家 <input id="11" type="radio" name="hdksort" />美食 <input id="12" type="radio" name="hdksort"/>数码 <input id="13" type="radio" name="hdksort"/>家电 <input id="14" type="radio" name="hdksort"/>其他</div>
<div style="height:30px;padding-top:10px;padding-left:10px;"> <input id="15" type="radio" name="hdksort"/>车品 <input id="16" type="radio" name="hdksort" />文体 <input id="17" type="radio" name="hdksort"/>宠物 </div>
<div style="height:10px;margin-left:10px;width:100%;font-size:13px;"></div>
<div style="height:30px;padding-top:10px;padding-left:10px;">店铺: <input id="1" type="radio" name="hdkshop" checked />天猫 <input id="2" type="radio" name="hdkshop"/>官网旗舰店 <input id="3" type="radio" name="hdkshop"/>阿里健康大药房 <input id="4" type="radio" name="hdkshop"/>天猫超市</div>
<div style="height:30px;padding-top:10px;padding-left:10px;"> <input id="7" type="radio" name="hdkshop" />极有家 <input id="8" type="radio" name="hdkshop"/>ifashion <input id="9" type="radio" name="hdkshop"/>天猫国际 <input id="10" type="radio" name="hdkshop"/>全球购</div>
<div style="height:30px;padding-top:10px;padding-left:10px;"> <input id="11" type="radio" name="hdkshop" />品牌直销 <input id="12" type="radio" name="hdkshop"/>金牌卖家 <input id="13" type="radio" name="hdkshop"/>企业店铺</div>
<div style="height:10px;margin-left:10px;width:100%;font-size:13px;"></div>
<div style="height:15px;width:100%;"></div>
{% if hdktaskinfo.hdktask_status == 1 %}
<span style="margin-left:10px;height:30px;width:40px;font-size:13px;"><a>执行中...请稍后下载查看</a></span>
{% else %}
<span style="margin-left:10px;height:30px;width:40px;border:1px solid red;border-radius:10%;cursor:pointer;" οnclick="runhdk()"><a>执行</a></span>
{% endif %}
<div style="height:25px;width:100%;"></div>
<div style="margin-left:10px;height:30px;width:auto">最新excel请点击<a href="{% url 'downhdk' %}">这里</a>下载</div>
<div style="margin-top:10px;height:25px;margin-left:10px;width:100%;font-size:13px;color:red;">ps:目前仅支持店铺一栏筛选一个条件后的链接可识别</div>
</div>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/custom.js"></script>
<script src="/static/js/layer/layer.js"></script>
</body>
</html>
对应服务端源码关注py编程历史文章获取
![[SEO优化必备]ECSHOP商城全站自定义TITLE标题插件](https://img-blog.csdnimg.cn/c4b72abaa90c48398b8a48ffbf045e6c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBARUNTSE9Q5byA5Y-R,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
