IM-webClient/index.html at master · weimeittx/IM-webClient · GitHub

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>

    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>


    <script type="text/javascript" charset="utf-8" src="uedit/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="uedit/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="uedit/lang/zh-cn/zh-cn.js"></script>
</head>
<body>

<div class="main">
    <!--导航-->
    <div class="left">
        <ul>
            <li><img src="img/head.png"></li>
            <li><span class="glyphicon glyphicon-envelope active"></span></li>
            <li><span class="glyphicon glyphicon-user unactive"></span></li>
            <li><span class="glyphicon glyphicon-cloud unactive"></span></li>
        </ul>
        <span class="setting"><span class="glyphicon glyphicon-wrench unactive"></span></span>
    </div>
    <!--列表-->
    <div class="chat-list">
        <div class="search">
            <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
            </div>
        </div>
        <ul>
            <li class="active">
                <div class="item-1">
                    <img src="img/head.png">
                </div>
                <div class="item-2">
                    <div class="chat-name">瑞泰尔大家庭</div>
                    <div class="content">刘晓江：砸了 买苹果</div>
                </div>
                <div class="item-3">
                    <span class="close glyphicon glyphicon-remove"></span>
                    <span class="date">23:30</span>
                </div>

            </li>
            <li>
                <div class="item-1">
                    <img src="img/head.png">
                </div>
                <div class="item-2">
                    <div class="chat-name">瑞泰尔大家庭</div>
                    <div class="content">刘晓江：砸了 买苹果</div>
                </div>
                <div class="item-3">
                    <span class="close glyphicon glyphicon-remove"></span>
                    <span class="date">23:30</span>
                </div>

            </li>
            <!--<li>
                <span class="unread"></span>
                <img src="img/head.png">
                <span class="chat-name">瑞泰尔大家庭</span>
                <span class="date">23:30</span>
                <span class="content">刘晓江:砸了  买苹果</span>
            </li>
            <li>
                <span class="unread"></span>
                <img src="img/head.png">
                <span class="chat-name">瑞泰尔大家庭</span>
                <span class="date">23:30</span>
                <span class="content">刘晓江:砸了  买苹果</span>
            </li>-->
        </ul>
    </div>
    <!--主-->
    <div class="right">
        <div class="title">
            <div class="win-oper">
                <span class="glyphicon glyphicon-minus min"></span>
                <span class="glyphicon glyphicon-remove exit"></span>
            </div>
            <!--<div class="toolbar">-->
                <!--<span class="glyphicon glyphicon-plane"></span>-->
                <!--<span class="glyphicon glyphicon-calendar"></span>-->
                <!--<span class="glyphicon glyphicon-random"></span>-->
            <!--</div>-->
            <div class="title-name">
                <span class="text">麻将群(32人)</span>
                <span class="oper glyphicon glyphicon-chevron-down"></span>
            </div>
        </div>
        <div class="chat-main">
            <div class="message-view">
                <div class="left-message">
                    <img src="img/head.png">
                    <div class="content-message">
                        <p>sdasd<span style="text-decoration: line-through;">sadasdsadasd<strong>asdsad</strong></span></p>
                        <p>sdasd<span style="text-decoration: line-through;">sadasdsadasd<strong>asdsad</strong></span></p>
                        <p>sdasd<span style="text-decoration: line-through;">sadasdsadasd<strong>asdsad</strong></span></p>
                        <p>sdasd<span style="text-decoration: line-through;">sadasdsadasd<strong>asdsad</strong></span></p>
                    </div>
                </div>
                <div class="right-message">
                    <img src="img/head.png">
                    <div class="content-message">
                        <p>sdasd<span style="text-decoration: line-through;">sadasds<br>adasd<strong>asdsad</strong></span></p>
                    </div>
                </div>

            </div>
            <div class="split"></div>
            <div class="chat-input">
                <script id="editor" type="text/plain" style="width:100%;height:149px;"></script>
            </div>
            <div class="operation">
                <a id="send" class="btn btn-default btn-sm send">发送</a>
            </div>
        </div>

    </div>

</div>
</body>
</html>