first commit

历届学生/18课程/class18_2/项目/上课项目/聊天室/fontend/css/clear.css

@@ -0,0 +1,6 @@
+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+}

历届学生/18课程/class18_2/项目/上课项目/聊天室/fontend/css/index.css

@@ -0,0 +1,239 @@
+@keyframes Doudong {
+  0% {
+    transform: translateX(0px);
+  }
+
+  25% {
+    transform: translateX(170px);
+  }
+
+  50% {
+    transform: translateX(0);
+  }
+
+  75% {
+    transform: translateX(-170px);
+  }
+
+  100% {
+    transform: translateX(0px);
+  }
+}
+
+.shake {
+    animation: Doudong 0.01s infinite;
+}
+.chat {
+    width: 1100px;
+    height: 750px;
+    margin: 5% auto;
+    border: 1px solid #d9dcde;
+    box-shadow: 1px 1px 20px #c7c3c3;
+    overflow: hidden;
+}
+.chat_left {
+    width: 800px;
+    height: 100%;
+    float: left;
+    position: relative;
+}
+.title {
+    position: absolute;
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    left: 0;
+    top: 0;
+    padding: 0 15px;
+    border-bottom: 1px solid #d9dcde;
+    background: #fff;
+    z-index: 99;
+    box-sizing: border-box;
+    justify-content: space-between;
+}
+.userinfo {
+    display: flex;
+    align-items: center;
+}
+.userinfo img {
+    width: 25px;
+    height: 25px;
+    margin-right: 10px;
+    border-radius: 100%;
+}
+.title p {
+    margin: 0;
+}
+.chat_message {
+    width: 100%;
+    height: 80%;
+    padding-top: 60px;
+    box-sizing: border-box;
+    overflow-y: scroll;
+}
+.message {
+    display: flex;
+    margin-bottom: 40px;
+}
+.message .userlogo {
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    margin-right: 12px;
+}
+.right {
+    justify-content: flex-end;
+}
+.right .userlogo {
+    order: 3;
+    margin-right: 0 !important;
+    margin-left: 12px;
+}
+.right .r_message {
+    text-align: right;
+}
+.system {
+    text-align: center;
+    margin-bottom: 40px;
+}
+.system span {
+    padding: 9px 14px;
+    background: #f8f8f8;
+    color: #9e9d9d;
+    font-size: 13px;
+    border-radius: 12px;
+}
+.r_message .name {
+    font-size: 14px;
+    color: #9fa8c5;
+    margin-bottom: 6px;
+}
+.r_message .content {
+    padding: 10px 10px;
+    color: #333;
+    font-size: 16px;
+    background: #f3f3f3;
+    border-radius: 12px;
+}
+.content img {
+    max-width: 480px !important;
+}
+.chat_input {
+    width: 100%;
+    height: 19%;
+    border-top: 1px solid #d9dcde;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+.gif,
+.expression {
+    position: absolute;
+    left: 0;
+    bottom: 142px;
+    width: 400px;
+    height: 200px;
+    overflow-y: scroll;
+    margin: 0;
+    padding: 0;
+    border: 1px solid #d9dcde;
+}
+.fontedit {
+    width: 100%;
+    height: 40px;
+    background: #f6f7f9;
+    position: absolute;
+    left: 0;
+    bottom: 132px;
+    margin: 0;
+    padding: 0;
+    padding-left: 16px;
+}
+.fontedit li {
+    float: left;
+    height: 100%;
+    line-height: 40px;
+    margin-right: 21px;
+}
+.fontedit li span{}
+.fontedit li .FontSize{}
+.fontedit li .Colors{}
+.expression {
+    padding: 5px;
+    box-sizing: border-box;
+}
+.expression li {
+    width: 20px;
+    text-align: center;
+    float: left;
+    height: 20px;
+    margin-right: 5px;
+    margin-bottom: 7px;
+}
+.expression li img{
+    width: 100%;
+    height: 100%;
+}
+.gif li {
+    width: 20%;
+    text-align: center;
+    float: left;
+    height: 77px;
+}
+.gif li img{
+    width: 100%;
+}
+.chat_right {
+    float: left;
+    width: 298px;
+    height: 100%;
+    box-sizing: border-box;
+    background: #f6f7f9;
+}
+.chat_right p {
+    height: 40px;
+    margin: 0;
+    line-height: 40px;
+    font-size: 14px;
+    color: #777;
+    border-bottom: 1px solid #d9dcde;
+    padding: 0px 15px 15px 15px;
+}
+
+.action {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    padding-left: 15px;
+}
+.action i {
+    margin-right: 15px;
+}
+.chat_inputbox {
+    flex: 1;
+    outline: none;
+    padding-left: 10px;
+    box-sizing: border-box;
+}
+.chat_inputbox img {
+    width: 20px;
+}
+.chat_right ul {
+    margin: 0;
+    padding: 0;
+    padding: 0px 15px 15px 15px;
+}
+.chat_right ul li{
+    height: 40px;
+    display: flex;
+    align-items: center;
+    margin: 8px 0;
+}
+.chat_right ul li img{
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    margin-right: 10px;
+}
+.chat_right ul li span{}

历届学生/18课程/class18_2/项目/上课项目/聊天室/fontend/css/login.css

@@ -0,0 +1,50 @@
+.login {
+    width: 248px;
+    height: 315px;
+    border: 1px solid #d9dcde;
+    margin: 20% auto;
+    text-align: center;
+    padding: 0 15px;
+    box-sizing: border-box;
+    border-radius: 10px;
+    box-shadow: 1px 1px 20px #c7c3c3;
+}
+.login img {
+    width: 100px;
+    height: 100px;
+    border-radius: 100%;
+    margin-top: 30px;
+    margin-bottom: 20px;
+}
+
+.input input {
+    width: 100%;
+    height: 36px;
+    outline: none;
+    border: none;
+    border-bottom: 1px solid #d9dcde;
+}
+.entry {
+    margin-top: 15px;
+    width: 100%;
+    height: 35px;
+    background: #7eb2dc;
+    color: #fff;
+    text-align: center;
+    line-height: 35px;
+    font-size: 16px;
+    border-radius: 15px;
+}
+
+#SelectImg .modal-body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+#SelectImg .modal-body img {
+    width: 100px;
+    height: 100px;
+}
+.select_active {
+        border: 1px solid red;
+}