2019-12-19 17:58:19 +08:00
|
|
|
body{
|
|
|
|
height: 100vh;
|
|
|
|
}
|
|
|
|
.ai_content{
|
|
|
|
height: 100%;
|
|
|
|
background: #fff;
|
|
|
|
background:url(../image/timg.jpg) no-repeat center center;
|
|
|
|
background-size:contain;
|
2019-12-19 18:35:32 +08:00
|
|
|
padding-top:160px;
|
|
|
|
box-sizing: border-box;
|
2019-12-19 17:58:19 +08:00
|
|
|
}
|
|
|
|
.ai_title{
|
|
|
|
width: 100%;
|
|
|
|
height: 60px;
|
|
|
|
background: rgba(15, 25, 50, 0.3);
|
|
|
|
color: #fff;
|
|
|
|
line-height: 60px;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 30px;
|
|
|
|
}
|
|
|
|
#box {
|
|
|
|
width: 800px;
|
|
|
|
height: 600px;
|
|
|
|
background: rgba(0, 0, 0, .3);
|
2019-12-19 18:35:32 +08:00
|
|
|
margin: 0 auto;
|
2019-12-19 17:58:19 +08:00
|
|
|
}
|
|
|
|
.b_body {
|
|
|
|
width: 100%;
|
|
|
|
height: 420px;
|
|
|
|
overflow: auto;
|
|
|
|
padding: 20px 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.b-head {
|
|
|
|
width: 100%;
|
|
|
|
height: 60px;
|
|
|
|
background-color: #4CAF50;
|
|
|
|
}
|
|
|
|
.h_span {
|
|
|
|
color: #fff;
|
|
|
|
font-size: 18px;
|
|
|
|
line-height: 60px;
|
|
|
|
float: left;
|
|
|
|
user-select: none;
|
|
|
|
cursor: default;
|
|
|
|
margin-left: 30px;
|
|
|
|
}
|
|
|
|
.rotWord, .mWord {
|
|
|
|
width: 100%;
|
|
|
|
margin-top: 10px;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.rotWord span {
|
|
|
|
background: url(../image/head.jpg);
|
|
|
|
background-size:100% 100%;
|
|
|
|
border-radius: 50%;
|
|
|
|
height: 40px;
|
|
|
|
width: 40px;
|
|
|
|
margin-left: 20px;
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
.rotWord p {
|
|
|
|
word-break: break-all;
|
|
|
|
top: 4px;
|
|
|
|
float: left;
|
|
|
|
color: #fff;
|
|
|
|
font-size: 14px;
|
|
|
|
margin-left: 10px;
|
|
|
|
padding: 10px;
|
|
|
|
line-height: 24px;
|
|
|
|
background: rgba(0, 0, 255, .5);
|
|
|
|
border-radius: 6px;
|
|
|
|
max-width: 220px;
|
|
|
|
}
|
|
|
|
.mWord span {
|
|
|
|
background: url(../image/wo.png);
|
|
|
|
background-size:100% 100%;
|
|
|
|
height: 40px;
|
|
|
|
width: 40px;
|
|
|
|
float: right;
|
|
|
|
margin-right: 20px;
|
|
|
|
}
|
|
|
|
.mWord p {
|
|
|
|
word-break: break-all;
|
|
|
|
top: 2px;
|
|
|
|
float: right;
|
|
|
|
color: #fff;
|
|
|
|
font-size: 14px;
|
|
|
|
margin-right: 10px;
|
|
|
|
padding: 10px;
|
|
|
|
line-height: 24px;
|
|
|
|
background: #19b955;
|
|
|
|
border-radius: 6px;
|
|
|
|
max-width: 220px;
|
|
|
|
}
|
|
|
|
.b-footer {
|
|
|
|
width: 760px;
|
|
|
|
height: 60px;
|
|
|
|
margin: 0 20px;
|
|
|
|
font-size: 16px;
|
|
|
|
color: #666;
|
|
|
|
}
|
|
|
|
#f-left {
|
|
|
|
padding-left: 20px;
|
|
|
|
outline: none;
|
|
|
|
overflow: hidden;
|
|
|
|
width: 620px;
|
|
|
|
height: 60px;
|
|
|
|
float: left;
|
|
|
|
background: rgba(225, 225, 225, .6);
|
|
|
|
font-size: 18px;
|
|
|
|
border: none;
|
|
|
|
border-radius: 5px;
|
|
|
|
}
|
|
|
|
#btn {
|
|
|
|
width: 100px;
|
|
|
|
height: 60px;
|
|
|
|
background: #666666;
|
|
|
|
float: right;
|
|
|
|
cursor: pointer;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 60px;
|
|
|
|
font-size: 18px;
|
|
|
|
color: #fff;
|
|
|
|
user-select: none;
|
|
|
|
border-radius: 10px;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|