01.java实现冷饮批发管理系统-页面设计之【登录页面】

冷不防 2024-02-17 19:01 31阅读 0赞

吴庆冷饮批发管理系统1.0正在研发中... 开发人员：小白吴庆君

我这边设计的所有页面都是利用easyui来布局，其中涉及到的一个简单的知识点就是:easyui中的layout布局可以嵌套布局，也是一种线型布局的感觉。以上纯本人个人见解，有不足之处，还请网友帮忙指出。首先就是第一个登录页面设计。

1.  <!DOCTYPE html> 
2.  <html> 
3.   <head> 
4.   <meta charset="UTF-8"> 
5.   <title>冷饮批发/用户登录</title> 
6.   <link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css"> 
7.   <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css"> 
8.   <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /> 
9.   <script type="text/javascript" src="../js/easyui/jquery.min.js"></script> 
10.  <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script> 
11.  <script type="text/javascript" src="../js/bootstrap.min.js"></script> 
12.  </head> 
13.  <body > 
14.  <div id="cc"**class**="easyui-layout" style="width:1000px;height:750px;overflow:hidden;margin: 0 auto;" > 
15.  <div data-options="region:'north'" style="height:50px;" ></div> 
16.  <div data-options="region:'center'" style="padding:0px;background:\#eee;" > 
17. 
18.  <div **class**="easyui-layout" fit="true" border="false"> 
19.   
22.  <div data-options="region:'west'" style="width:550px;text-align:center;" border="false"> 
23.  <div **class**="easyui-layout" fit="true" border="false"> 
24.  <div region="north" style="height:50px;" border="false"> </div> 
25.  <div region="west" border="false" style="width:300px;height:90px;background:url(../img/love01.png);background-repeat: no-repeat;"> 
26.  </div> 
27.  <div region="center" style="font-family:'微软雅黑';" border="false"> 
28.  <p style="position: relative;margin-top:120px;padding-left:20px;"> 
29.  <span style="font-size:30px;font-weight:800;">冷饮批发<br />管理系统</span><br/> 
30.  <span>Cold drinks wholesale management system</span> 
31.  </p> 
32.  </div> 
33.  </div> 
34.  </div>  
35.  <div region="center" border="false"> 
36.  <div **class**="easyui-layout" fit="true" border="false" > 
37.  <div data-options="region:'north'" style="height:50px;" border="false"> 
38. 
39.  </div> 
40.  <div region="west" style="width:50px;position: relative;" border="false"> 
41.  <img src="../img/split.png" style="position:absolute;left:0px;top:80px;"/> 
42.  </div> 
43.  <div region="center" border="false"> 
44.  <div **class**="easyui-panel" title="开始批发" iconCls="icon-user"
45.  style="text-align: center;width:300px;height:380px;padding-top:50px;"> 
46.  <form id="ff" method="post"> 
47.  <div> 
48.  <input **class**="easyui-textbox"
49.  data-options="iconCls:'icon-man',prompt:'请输入用户名'"
50.  style="width:240px;height:30px;"> 
51.  </div> 
52.  <div style="margin-top: 20px;"> 
53.  <input **class**="easyui-textbox" type="password"
54.  data-options="iconCls:'icon-lock',prompt:'请输入密码'"
55.  style="width:240px;height:30px;"> 
56.  </div> 
57.  <div style="margin-top: 30px;"> 
58.  <p> 
59.  <a href="\#" style="width:160px;height:30px;"**class**="easyui-linkbutton" iconCls="icon-accept">登录</a> 
60.  <a style="margin-left:10px;width:80px;height:30px;" href="\#" >忘记密码?</a> 
61.  </p> 
62.  </div> 
63.  <div style="margin-top: 40px;"> 
64.  <p> 
65.  <span style="font-size:20px;font-weight:800;">新用户</span><br /> 
66.  <a href="\#"**class**="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">请输入您的送货地址</a> 
67.  </p> 
68.  </div> 
69.  </form> 
70.  </div> 
71.  </div> 
72.  <div region="east" style="width:20px;" border="false"> 
73.  </div> 
74.  <div region="south" style="height:10px;" border="false"> 
75. 
76.  </div> 
77.  </div> 
78.  </div> 
79. 
80. 
81.  </div> 
82. 
83.  </div> 
84.  <div data-options="region:'south',split:false" style="height:30px;text-align: center;" border="false"> 
85.  版权所有@冷饮批发管理系统 Copyright 2016\-2017
86.  </div> 
87.  </div> 
88.  </body> 
89. </html>

效果图如下：

![Center][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ada1ac5b53f243a588f4af3ad487000a.png