|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<title>fantasticbin的聊天室</title>
|
|
|
<link rel="stylesheet" href="css/amazeui.min.css" />
|
|
|
<link rel="stylesheet" href="css/main.css" />
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="box">
|
|
|
<div class="wechat">
|
|
|
|
|
|
<div class="sidestrip">
|
|
|
<div class="am-dropdown" data-am-dropdown>
|
|
|
<!--头像插件-->
|
|
|
<div class="own_head am-dropdown-toggle"></div>
|
|
|
<div class="am-dropdown-content">
|
|
|
<div class="own_head_top">
|
|
|
<div class="own_head_top_text">
|
|
|
<p class="own_name"><span class="nickname"></span><img src="images/icon/head.png" alt="" /></p>
|
|
|
<p class="own_numb"></p>
|
|
|
</div>
|
|
|
<img src="images/head/2.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="own_head_bottom">
|
|
|
<p class="area"><span>地区</span></p>
|
|
|
<div class="own_head_bottom_img">
|
|
|
<a href=""><img src="images/icon/head_1.png" /></a>
|
|
|
<a href=""><img src="images/icon/head_2.png" /></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--三图标-->
|
|
|
<div class="sidestrip_icon">
|
|
|
<a id="si_1" style="background: url(images/icon/head_2_1.png) no-repeat;"></a>
|
|
|
<a id="si_2"></a>
|
|
|
<a id="si_3"></a>
|
|
|
</div>
|
|
|
|
|
|
<!--底部扩展键-->
|
|
|
<div id="doc-dropdown-justify-js">
|
|
|
<div class="am-dropdown" id="doc-dropdown-js" style="position: initial;">
|
|
|
<div class="sidestrip_bc am-dropdown-toggle"></div>
|
|
|
<ul class="am-dropdown-content" style="">
|
|
|
<li>
|
|
|
<a href="#" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">意见反馈</a>
|
|
|
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
|
|
|
<div class="am-modal-dialog">
|
|
|
<div class="am-modal-hd">
|
|
|
Modal 标题
|
|
|
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>×</a>
|
|
|
</div>
|
|
|
<div class="am-modal-bd">
|
|
|
Modal 内容。本 Modal 无法通过遮罩层关闭。
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
<li><a href="#">备份与恢复</a></li>
|
|
|
<li><a href="#">设置</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--聊天列表-->
|
|
|
<div class="middle on">
|
|
|
<div class="wx_search">
|
|
|
<input type="text" placeholder="搜索" />
|
|
|
<button>+</button>
|
|
|
</div>
|
|
|
<div class="office_text">
|
|
|
<ul class="user_list">
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--好友列表-->
|
|
|
<div class="middle">
|
|
|
<div class="wx_search">
|
|
|
<input type="text" placeholder="搜索" />
|
|
|
<button>+</button>
|
|
|
</div>
|
|
|
<div class="office_text">
|
|
|
<ul class="friends_list">
|
|
|
<li>
|
|
|
<p>新的朋友</p>
|
|
|
<div class="friends_box">
|
|
|
<div class="user_head"><img src="images/head/1.jpg" /></div>
|
|
|
<div class="friends_text">
|
|
|
<p class="user_name">新的朋友</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<p>公众号</p>
|
|
|
<div class="friends_box">
|
|
|
<div class="user_head"><img src="images/head/2.jpg" /></div>
|
|
|
<div class="friends_text">
|
|
|
<p class="user_name">公众号</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<p>A</p>
|
|
|
<div class="friends_box">
|
|
|
<div class="user_head"><img src="images/head/3.jpg" /></div>
|
|
|
<div class="friends_text">
|
|
|
<p class="user_name">彭于晏丶plus</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="friends_box">
|
|
|
<div class="user_head"><img src="images/head/4.jpg" /></div>
|
|
|
<div class="friends_text">
|
|
|
<p class="user_name">陈依依</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="friends_box">
|
|
|
<div class="user_head"><img src="images/head/5.jpg" /></div>
|
|
|
<div class="friends_text">
|
|
|
<p class="user_name">毛毛</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<p>B</p>
|
|
|
<div class="friends_box">
|
|
|
<div class="user_head"><img src="images/head/6.jpg" /></div>
|
|
|
<div class="friends_text">
|
|
|
<p class="user_name">苏笑言</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="friends_box">
|
|
|
<div class="user_head"><img src="images/head/7.jpg" /></div>
|
|
|
<div class="friends_text">
|
|
|
<p class="user_name">往事不再提</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<p>C</p>
|
|
|
<div class="friends_box">
|
|
|
<div class="user_head"><img src="images/head/8.jpg" /></div>
|
|
|
<div class="friends_text">
|
|
|
<p class="user_name">夏继涛</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="friends_box">
|
|
|
<div class="user_head"><img src="images/head/9.jpg" /></div>
|
|
|
<div class="friends_text">
|
|
|
<p class="user_name">早安无恙</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="friends_box">
|
|
|
<div class="user_head"><img src="images/head/10.jpg" /></div>
|
|
|
<div class="friends_text">
|
|
|
<p class="user_name">王鹏</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<p>D</p>
|
|
|
<div class="friends_box">
|
|
|
<div class="user_head"><img src="images/head/11.jpg" /></div>
|
|
|
<div class="friends_text">
|
|
|
<p class="user_name">涨了潮了</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="friends_box">
|
|
|
<div class="user_head"><img src="images/head/12.jpg" /></div>
|
|
|
<div class="friends_text">
|
|
|
<p class="user_name">Ktz丶中融资</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--程序列表-->
|
|
|
<div class="middle">
|
|
|
<div class="wx_search">
|
|
|
<input type="text" placeholder="搜索收藏内容" />
|
|
|
<button>+</button>
|
|
|
</div>
|
|
|
<div class="office_text">
|
|
|
<ul class="icon_list">
|
|
|
<li class="icon_active">
|
|
|
<div class="icon"><img src="images/icon/icon.png" alt="" /></div>
|
|
|
<span>全部收藏</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="icon"><img src="images/icon/icon1.png" alt="" /></div>
|
|
|
<span>链接</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="icon"><img src="images/icon/icon2.png" alt="" /></div>
|
|
|
<span>相册</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="icon"><img src="images/icon/icon3.png" alt="" /></div>
|
|
|
<span>笔记</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="icon"><img src="images/icon/icon4.png" alt="" /></div>
|
|
|
<span>文件</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="icon"><img src="images/icon/icon5.png" alt="" /></div>
|
|
|
<span>音乐</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="icon"><img src="images/icon/icon6.png" alt="" /></div>
|
|
|
<span>标签</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--聊天窗口-->
|
|
|
<div class="talk_window">
|
|
|
<div class="windows_top">
|
|
|
<div class="windows_top_box">
|
|
|
<span></span>
|
|
|
<ul class="window_icon">
|
|
|
<li><a href=""><img src="images/icon/icon7.png" /></a></li>
|
|
|
<li><a href=""><img src="images/icon/icon8.png" /></a></li>
|
|
|
<li><a href=""><img src="images/icon/icon9.png" /></a></li>
|
|
|
<li><a href=""><img src="images/icon/icon10.png" /></a></li>
|
|
|
</ul>
|
|
|
<div class="extend" class="am-btn am-btn-success" data-am-offcanvas="{target: '#doc-oc-demo3'}"></div>
|
|
|
<!-- 侧边栏内容 -->
|
|
|
<div id="doc-oc-demo3" class="am-offcanvas">
|
|
|
<div class="am-offcanvas-bar am-offcanvas-bar-flip">
|
|
|
<div class="am-offcanvas-content">
|
|
|
<p><a href="http://music.163.com/#/song?id=385554" target="_blank">网易音乐</a></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--聊天内容-->
|
|
|
<div class="windows_body">
|
|
|
<div class="office_text" style="height: 100%;">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="windows_input" id="talkbox">
|
|
|
<div class="input_icon">
|
|
|
<a href="javascript:;"></a>
|
|
|
<a href="javascript:;"></a>
|
|
|
<a href="javascript:;"></a>
|
|
|
<a href="javascript:;"></a>
|
|
|
<a href="javascript:;"></a>
|
|
|
<a href="javascript:;"></a>
|
|
|
</div>
|
|
|
<div class="input_box">
|
|
|
<textarea name="" rows="" cols="" id="input_box"></textarea>
|
|
|
<button id="send">发送（S）</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
|
<script type="text/javascript" src="js/amazeui.min.js"></script>
|
|
|
<script type="text/javascript" src="js/zUI.js"></script>
|
|
|
<script type="text/javascript" src="js/wechat.js"></script>
|
|
|
</body>
|
|
|
</html> |