1 Star 0 Fork 7

Mia/frontend102

forked from quseit/react-test 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
userChatRoom.css 5.34 KB
一键复制 编辑 原始数据 按行查看 历史
hhh 提交于 2021-11-16 09:35 . 01
.loginBackground{
background:url(image/teamBackground.jpg) no-repeat;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-size: cover;
}
.loginbox{
height: 380px;
width: 480px;
/* margin-top: -227px; */
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: rgba(255,255,255,0.6);
border-radius: 12px;
}
.loginbox .title{
margin: 30px 0 0 39px;
}
.loginbox input{
padding: 11px 10px;
max-height: 40px;
background: #fff;
border: 1px solid #E0E0E0;
border-radius: 4px;
font-size: 14px;
width: 321px;
color: #000;
outline: none;
}
.loginbox .input{
margin-top: 30px;
}
.loginbox .input input{
outline: none;
}
.loginbox .input span{
display: inline-block;
font-size: 14px;
color: #000;
letter-spacing: 0;
text-align: right;
width: 82px;
height: 40px;
line-height: 40px;
margin-right: 15px;
font-weight: 200;
}
.loginbox .loginBox{
height: 38px;
position: relative;
}
.loginbox .loginBox .loginText{
margin: 0 auto;
padding-left: 10px;
}
/* 登录按钮 */
.loginbox #login{
border-radius: 25px;
border:none;
width: 240px;
height: 45px;
position: absolute;
top: 0;bottom: 0;right: 0;left: 0;
margin: 70px auto;
color: white;
font-size: large;
letter-spacing:10px;
text-align: center;
background-color: rgba(120, 145, 137, 0.8);
}
.loginbox #login:hover{
border-radius: 25px;
border:none;
width: 240px;
height: 45px;
position: absolute;
top: 0;bottom: 0;right: 0;left: 0;
margin: 70px auto;
color: white;
font-size: large;
letter-spacing:10px;
text-align: center;
background-color: rgba(113, 158, 144, 0.8);;
}
/* 注册按钮 */
.register{
width: 65px;
height: 25px;
border: none;
position: absolute;
border-radius: 5px;
top: 0;
right: 0%;
bottom: 0px;
left: 83%;
transform: translateY(536%);
background-color: rgb(227 237 239);
color: rgb(116, 114, 114);
text-align: center;
font-size: 14px;
}
.register:hover{
width: 65px;
height: 25px;
border: none;
position: absolute;
border-radius: 5px;
top: 0;
right: 0%;
bottom: 0px;
left: 83%;
transform: translateY(536%);
background-color: rgb(187 199 202);
color: rgb(247 255 254);
text-align: center;
font-size: 14px;
}
.home{
width: 100%;
height: 910px;
display:none;
flex-direction: column;
}
.home .hd{
width: 100%;
height: 70px;
background-color: white;
}
.home .hd .hdl{
color:#383838;
letter-spacing: 2px;
font-size: larger;
font-weight: 600;
line-height: 70px;
}
.home .bd1{
width: 100%;
height: 600px;
background: url(image/03.png) no-repeat;
background-size: cover;
}
/* chat with us按钮 */
.chatbt{
width: 150px;
height: 55px;
border-radius: 30px;
line-height: 55px;
text-align: center;
font-size: larger;
border: none;
background-color: #1f2b36;
color:#f8ffff;
top: 88%;
right: 35px;
position: fixed;
}
.chatroom{
width: 350px;
height: 600px;
border-radius: 20px;
box-shadow:-2px -2px 21px #98948e;
display: none;
position: fixed;
right: 5%;
top: 20%;
}
.chatroom .hd{
border-top-left-radius: 20px;
border-top-right-radius: 20px;
height: 55px;
background-color: #1F2B36;
}
.chatroom .hd .hdl{
color:#ebf4fa;
font-size: 24px;
line-height: 55px;
margin-left: 30px;
display: flex;
flex-direction: row;
}
.chatroom .body{
height: 490px;
border-bottom: 1px solid #ececed;
background-color: white;
overflow: scroll;
overflow-x: hidden;
}
.chatroom .body::-webkit-scrollbar{
width: 10px;
height: 10px;
}
.chatroom .body::-webkit-scrollbar-thumb{
border-radius: 5px;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.05);
background: rgba(0, 0, 0,0.1);
}
.chatroom .bottom{
height: 60px;
width: 350px;
background-color: white;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display: flex;
flex-direction: row;
}
.chatroom .bottom .Text{
border: none;
outline: none;
width: 288px;
height: 35px;
padding: 4px;
}
.chatroom .bottom .send{
border: none;
width: 44px;
height: 28px;
/* background-image: url("image/05.png");
background-size: cover; */
background-color: rgb(179, 228, 228);
border-radius: 20px;
margin:15px;
}
.isme{
color:rgb(248, 52, 52);
display: flex;
margin: 13px 0;
flex-direction: column;
align-items: flex-end;
}
.notMe{
color:rgb(119, 114, 114);
display: flex;
margin:13px 0;
flex-direction: column;
align-items: flex-start;
}
.Text{
display: flex;
flex-direction: row;
}
.teamText{
padding:5px 18px;
margin: auto 10px;
/* height: 38px; */
border-radius: 15px;
background-color: #f4f8fc;
color:#495358;
max-width: 200px;
line-height: 25px;
font-size:16px;
word-break: break-word;
}
.ismeText{
border:1.5px solid #4f82a3;
padding:8px 19px;
margin: auto 18px;
border-radius: 18px;
color:#55adda;
max-width: 200px;
line-height: 17px;
font-size:17px;
word-break: break-word;
font-family:Georgia, 'Times New Roman', Times, serif;
}
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/mia-gitee/frontend102.git
git@gitee.com:mia-gitee/frontend102.git
mia-gitee
frontend102
frontend102
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385