/
mailbox.html
182 lines (170 loc) · 11.1 KB
/
mailbox.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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="https://cdn.rawgit.com/TeaMeow/TocasUI/2.3.2/dist/tocas.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/TeaMeow/TocasUI/2.3.2/dist/tocas.js"></script>
<title>信箱範例 | Tocas UI</title>
<style type="text/css">
body {
background-color: rgb(250, 250, 250);
}
</style>
</head>
<body>
<br />
<br />
<!-- 主要網格容器 -->
<div class="ts narrow container grid">
<!-- 標題欄位 -->
<div class="sixteen wide column">
<div class="ts secondary fitted menu">
<!-- 標題項目 -->
<div class="item">
<h3 class="ts header">郵件信箱</h3>
</div>
<!-- / 標題項目 -->
<!-- 右側麵包屑 -->
<div class="right menu">
<div class="item">
<div class="ts breadcrumb">
<a class="section">首頁</a>
<i class="right chevron icon divider"></i>
<div class="active section">郵件信箱</div>
</div>
</div>
</div>
<!-- / 右側麵包屑 -->
</div>
</div>
<!-- / 標題欄位 -->
<!-- 左側欄位 -->
<div class="four wide column">
<!-- 撰寫按鈕 -->
<button class="ts small icon labeled fluid primary button"><i class="plus icon"></i> 撰寫</button>
<!-- / 撰寫按鈕 -->
<!-- 資料夾清單 -->
<div class="ts top attached header">資料夾</div>
<div class="ts bottom attached vertical menu">
<a href="#!" class="item"> <i class="inbox icon"></i> 收件箱 </a>
<a href="#!" class="item"> <i class="mail outline icon"></i> 已發送 </a>
<a href="#!" class="item"> <i class="file text outline icon"></i> 草稿 </a>
<a href="#!" class="item"> <i class="filter icon"></i> 已過濾 </a>
<a href="#!" class="item"> <i class="trash outline icon"></i> 垃圾桶 </a>
</div>
<!-- / 資料夾清單 -->
<!-- 標籤清單 -->
<div class="ts top attached header">標籤分類</div>
<div class="ts bottom attached selection segmented link list">
<a href="#" class="primary item"><i class="circle primary icon"></i> 重要的</a>
<a href="#" class="negative item"><i class="square negative icon"></i> 可忽略的</a>
<a href="#" class="positive item"><i class="check positive icon"></i> 已閱讀</a>
</div>
<!-- / 標籤清單 -->
</div>
<!-- / 左側欄位 -->
<!-- 右側內容欄位 -->
<div class="twelve wide column">
<div class="ts segments">
<!-- 標題工具列 -->
<div class="ts fitted primary segment">
<div class="ts secondary horizontally fitted menu">
<!-- 標題項目 -->
<div class="header item">檢視信件</div>
<!-- / 標題項目 -->
<!-- 右側選單 -->
<div class="right menu">
<div class="item">
<!-- 圖示按鈕群組 -->
<div class="ts small buttons">
<button class="ts icon button">
<i class="trash outline icon"></i>
</button>
<button class="ts icon button">
<i class="left arrow icon"></i>
</button>
<button class="ts icon button">
<i class="right arrow icon"></i>
</button>
</div>
<!-- / 圖示按鈕群組 -->
</div>
<div class="item">
<!-- 轉寄按鈕 -->
<button class="ts small icon button">
<i class="share icon"></i>
</button>
<!-- / 轉寄按鈕 -->
</div>
</div>
<!-- / 右側選單 -->
</div>
</div>
<!-- / 標題工具列 -->
<!-- 信件標題資訊列 -->
<div class="ts segment">
<div class="ts medium header">
歡樂洨洨安！
<div class="sub header">來自：yamiodymel@xiaoxiaoan.com</div>
</div>
</div>
<!-- / 信件標題資訊列 -->
<!-- 內文 -->
<div class="ts segment">
<p>空大西地王法公構後讓府由是是雄見基環，在說舉只日可現……始花能力式傳個童體火球驚消去第通保話女海指情？富步正才位不會機外一。嗎國級在活不學。</p>
<p>水行術年北廣列專目花子都雖且小量部想依發究上有兒爾！會的他就方。人樂出吸色候？時正生，點成石又我，義長地為卻才廣的下也樣利林不做道經生！</p>
<p>
何該待經家！了卻想幾何就他、許界國續終深大質大拉事她用常府反過總自起縣會是而於見發裡完片！減壓比你連就後，善一說分久稱信主老了標白這印北更作事我……遊量到大合成。全願賽個臺造驚可一傷管多個？陸戲所反自地也南超美大千一言者寶？於民技叫這點爸業北野內統場人可到立大親深發運，動成足意操就當寫小賽我樣錯文的把車客。
</p>
<p>
事任落一同的什原臺認經據不頭上輕資上應留將愛官。見合是：大思新孩；去林原支滿政工時；初後角。了非乎這北在能了究標觀一臉分系意哥然相。一空回學是別畫幾十來東成語共十在那導情，呢訴平腦，觀過大走線心強野同小相山設第水老，度家告會漸氣分前們的哥式變聽究，的親臉有分外護在工，邊院造合他一治斷人政弟試……自邊我些明命乎積運，領子子全同們文多員然幾？天上以頭神無意素？
</p>
<p>
我那景片大為第費氣水大首部資排感館那，小眼議上時美國單；師係環美，先一同。門金決母是切車口……小都圖實告費來此自中前這兩一你言看在不力酒做。公容統受。區作跟的生中在禮反司離加影會當不體物到指以方灣運正式華必度如的，少一話雨引各好著可是覺上小者一提創候的最發亞臺、花畫化好遊黃當一性感生半分聞？的小鄉需，是車像區金了！見雙阿氣多，可構樣兩人真廣是，高相無金不，為服深，打的多，師一不子有師了海可花子代股做，小接構精飛小整正立，西微念團的部點，變下樹高以色步下用這見動半過裡路是家聯西習？出都人達大和認金無結……成這和一信持成事突一了片給可打經小校類化結年那看非府大型學，其著白心想：做才說選手境當金形：時包金老一主結清願神等到，然是觀開歷過們？不為影待商無將思我作快了線我府去了十強裡！後象腦利著裡味轉及間，示一陸在。沒消令容可要；人成張子。際及此上下，住山不重良打和功適……廠校放？自人講用斷定作到裡有！
</p>
<p>作萬稱數做技錢列升去無易的，政車發的，類參賽灣平！</p>
<p>說感我員？界認王的之；實再筆好細百狀育買至緊爾管、媽對人……半再的政身元子廣些，化爭可是怎臺是中公林生房子黃我小細反；請怎易出了行住。</p>
<p>野以標上，手充下度受導中衣轉家取笑這小。</p>
</div>
<!-- / 內文 -->
<!-- 附件列 -->
<div class="ts secondary segment">
<div class="ts four cards">
<!-- 單個附件 -->
<div class="ts card">
<div class="image">
<img src="https://v2.tocas-ui.com/assets/img/15d7510.png" />
</div>
<button class="ts bottom attached mini compact inverted button"><i class="download icon"></i> 下載</button>
</div>
<!-- /單個附件 -->
<!-- 單個附件 -->
<div class="ts card">
<div class="image">
<img src="https://v2.tocas-ui.com/assets/img/15d7510.png" />
</div>
<button class="ts bottom attached mini compact inverted button"><i class="download icon"></i> 下載</button>
</div>
<!-- /單個附件 -->
</div>
</div>
<!-- / 附件列 -->
<!-- 動作列 -->
<div class="ts segment">
<button class="ts icon labeled negative button"><i class="trash outline icon"></i> 刪除</button>
<button class="ts icon button">
<i class="left arrow icon"></i>
</button>
<button class="ts icon button">
<i class="right arrow icon"></i>
</button>
<button class="ts right floated small icon labeled button"><i class="share icon"></i> 轉寄</button>
</div>
<!-- / 動作列 -->
</div>
</div>
<!-- / 右側內容欄位 -->
</div>
<!-- / 主要網格容器 -->
</body>
</html>