-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (137 loc) · 6.09 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet/less" href="./index.less">
<link rel="stylesheet" href="./jquery.toast.min.css">
<script src="jquery-3.2.1.js"></script>
<script src="less.js"></script>
<script src="vue.js"></script>
<script src="jquery.toast.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="left">
<!--这里一栏用于手机页面的返回按钮-->
<div id="left-return">
<img src="left.svg" alt="返回">
</div>
<div class="info-top">
<div class="info-title">
计算机作品大赛
</div>
<div class="info-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, quasi?
</div>
<!--<hr>-->
<div class="info-opera">
<div class="set_1_btn Vbtn-3 info-enterback"> <svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"></rect>
</svg> <span>进入后台</span> </div>
<div class="set_1_btn Vbtn-3 info-baoming"> <svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"></rect>
</svg> <span>报名</span> </div>
</div>
</div>
</div>
<div id="right">
<div id="top">
<div id="title">Competition List</div>
<div id="tabs">
<a id="btn-starting" class="active" href="#starting">进行中</a>
<a id="btn-prepare" href="#prepare">未开始</a>
<a id="btn-done" href="#done">已结束</a>
</div>
</div>
<hr>
<div id="listcontent">
<div id="starting">
<!--datacid为比赛标记号-->
<!--data-alerady表示此项比赛用户是否已报名-->
<div class="litem" data-cid="2" data-already="true">
<img class="lback" src="back.jpg">
<div class="ltext">
<div class="ltitle">
abcde
</div>
<div class="ldesc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, veritatis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, qui.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, veniam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, odio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, veritatis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, qui.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, veniam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, odio.
</div>
</div>
</div>
<!--第二个item-->
<div class="litem" data-cid="1" data-already="false">
<img class="lback" src="back.jpg">
<div class="ltext">
<div class="ltitle">
计算机作品大赛
</div>
<div class="ldesc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, veritatis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, qui.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, veniam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, odio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, veritatis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, qui.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, veniam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, odio.
</div>
</div>
</div>
</div>
<div id="prepare">
<div class="litem" data-cid="1" data-already="false">
<img class="lback" src="back.jpg">
<div class="ltext">
<div class="ltitle">
计算机作品大赛
</div>
<div class="ldesc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, veritatis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, qui.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, veniam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, odio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, veritatis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, qui.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, veniam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, odio.
</div>
</div>
</div>
</div>
<div id="done">aaaaaaaaa</div>
</div>
</div>
<div id="widgets">
<!--挂件区域-->
<div id="user-widget">
<!--用户相关挂件-->
<img src="account.svg" alt="用户信息">
<div id="user-plane">
<!--用户信息面板-->
<!--或者登陆面板-->
fasdfadfadf
</div>
</div>
<div id="list-widget">
<!--手机选择列表挂件-->
<img src="Category.svg" alt="分类列表">
<div id="list-plane">
<!--手机列表面板-->
<a id="mbtn-starting" class="active" href="#starting">进行中</a>
<a id="mbtn-prepare" href="#prepare">未开始</a>
<a id="mbtn-done" href="#done">已结束</a>
</div>
</div>
</div>
</body>
</html>