You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1175 lines
22 KiB
1175 lines
22 KiB
|
|
/**滚动条的宽度*/
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
/**滚动条的滑块*/
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #13439E;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/**只需要加上这一行*/
|
|
::-webkit-scrollbar-corner {
|
|
background-color: transparent;
|
|
}
|
|
|
|
textarea {
|
|
resize: none; /* 禁止用户手动拖动调整大小 */
|
|
}
|
|
|
|
textarea::-webkit-input-placeholder { /* Chrome, Opera, Safari */
|
|
color: #fff;
|
|
}
|
|
|
|
textarea:-moz-placeholder { /* Firefox 18- */
|
|
color: #fff;
|
|
opacity: 1; /* 修复老版本Firefox的不透明度问题 */
|
|
}
|
|
|
|
textarea::-moz-placeholder { /* Firefox 19+ */
|
|
color: #fff;
|
|
opacity: 1; /* 修复Firefox的不透明度问题 */
|
|
}
|
|
|
|
textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
color: #fff;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "DOUYU-Regular";
|
|
src: url('../fonts/斗鱼追光体.ttf');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "PingFang";
|
|
src: url('../fonts/PingFang.ttc');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ai-wrapper{
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #0F1B46;
|
|
font-family: 'DOUYU-Regular';
|
|
overflow: hidden;
|
|
}
|
|
|
|
.doubleExit{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
line-height: 1rem;
|
|
text-align: center;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.ai-bg{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 6;
|
|
}
|
|
/* 头部 */
|
|
.ai-header-wrapper{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1.8125rem;
|
|
overflow: hidden;
|
|
z-index: 999;
|
|
}
|
|
|
|
.ai-header{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.header-left{
|
|
position: absolute;
|
|
top: .45rem;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
.header-btn{
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 2.2875rem;
|
|
height: 1.1125rem;
|
|
line-height: .7rem;
|
|
font-size: .175rem;
|
|
color: #fff;
|
|
background: url('../images/header-btn.png') no-repeat left top;
|
|
background-size:cover;
|
|
}
|
|
|
|
.header-btn span{
|
|
display: block;
|
|
width: .25rem;
|
|
height: .25rem;
|
|
margin-top: .175rem;
|
|
margin-right: .025rem;
|
|
}
|
|
|
|
.header-home span{
|
|
background: url('../images/icon_home_full.png') no-repeat left top;
|
|
background-size:cover;
|
|
}
|
|
|
|
.header-return{
|
|
margin-left: -0.75rem;
|
|
}
|
|
|
|
.header-return span{
|
|
background: url('../images/return.png') no-repeat left top;
|
|
background-size:cover;
|
|
}
|
|
|
|
.header-login{
|
|
position: absolute;
|
|
top: .45rem;
|
|
right: 0;
|
|
}
|
|
|
|
.header-login span{
|
|
background: url('../images/icon_my_full.png') no-repeat left top;
|
|
background-size:cover;
|
|
}
|
|
|
|
.header-btn:hover{
|
|
background: url('../images/header-btn-hover.png') no-repeat left top;
|
|
background-size:cover;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header-title {
|
|
width: 24.025rem;
|
|
height: 1.8125rem;
|
|
margin: 0 auto;
|
|
background: url('../images/header.png') no-repeat left top;
|
|
background-size:cover;
|
|
}
|
|
|
|
.header-title h2{
|
|
font-size: .475rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 300;
|
|
text-align: center;
|
|
background: -webkit-linear-gradient(90deg, #fff 0%, #9FCAFF 70%);
|
|
background: linear-gradient(180deg, #fff 0%, #9FCAFF 70%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
color: transparent;
|
|
text-shadow: 0px 11px 11px rgba(105,173,255,0.34), 0px 0px 24px rgba(105,173,255,0.68);
|
|
}
|
|
/* 首页菜单部分 */
|
|
.ai-index{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.index-list {
|
|
position: absolute;
|
|
top: 2.5rem;
|
|
}
|
|
|
|
.list-left{
|
|
left: 1.5rem;
|
|
}
|
|
|
|
.list-right{
|
|
right: 1.5rem;
|
|
}
|
|
|
|
.index-list li{
|
|
position: relative;
|
|
width: 5rem;
|
|
height: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
z-index: 9999;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.index-list li::before{
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 5rem;
|
|
height: 2.5rem;
|
|
background: url('../images/index-box2.png') no-repeat left top;
|
|
background-size:cover;
|
|
z-index: 10;
|
|
}
|
|
|
|
.other-bg li::before{
|
|
background: url('../images/index-box.png') no-repeat left top;
|
|
background-size:cover;
|
|
}
|
|
|
|
|
|
.index-list li a{
|
|
position: relative;
|
|
display: block;
|
|
width: calc(100% - .625rem);
|
|
height: calc(100% - .5rem);
|
|
padding: .5rem 0 0 .625rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.index-list li a p{
|
|
position: relative;
|
|
font-size: .4rem;
|
|
z-index: 99;
|
|
color: #fff;
|
|
}
|
|
|
|
.index-list li a span{
|
|
position: relative;
|
|
font-size: .3rem;
|
|
font-family: 'PingFang';
|
|
background: -webkit-linear-gradient(360deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
|
|
background: linear-gradient(360deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
color: transparent;
|
|
z-index: 99;
|
|
}
|
|
|
|
.index-list li a img{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
display: block;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
z-index: 99;
|
|
}
|
|
|
|
.list-right li::before{
|
|
transform: rotateY(-180deg)
|
|
/* transform: scaleY(-1); */
|
|
}
|
|
|
|
.list-left li:nth-child(1),
|
|
.list-left li:nth-child(3){
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.list-right li:nth-child(2){
|
|
/* margin-left: 1rem; */
|
|
}
|
|
|
|
.list-right li a{
|
|
text-align: right;
|
|
padding: .5rem .625rem 0 0;
|
|
}
|
|
|
|
.list-right li a{
|
|
padding: .5rem .625rem 0 0;
|
|
}
|
|
|
|
.list-right li img{
|
|
left: 0;
|
|
}
|
|
|
|
/* 没有背景框的时候 */
|
|
.no-box-style li::before{
|
|
background: none;
|
|
}
|
|
|
|
.no-box-style li a img{
|
|
position: absolute;
|
|
right: -0.25rem;
|
|
top: -.75rem;
|
|
display: block;
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
}
|
|
|
|
.no-box-style.list-right li a img{
|
|
left: -0.25rem;
|
|
}
|
|
|
|
.no-box-style li a span{
|
|
background: none;
|
|
-webkit-background-clip:initial;
|
|
background-clip:initial;
|
|
-webkit-text-fill-color:#3D528B;
|
|
color: #3D528B;
|
|
}
|
|
|
|
|
|
.list-left li:nth-child(1) {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.list-left li:nth-child(2) {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 280px;
|
|
animation-delay: .3s;
|
|
}
|
|
|
|
.list-left li:nth-child(3) {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 560px;
|
|
animation-delay: .6s;
|
|
}
|
|
|
|
.list-right li:nth-child(1) {
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 0;
|
|
}
|
|
|
|
.list-right li:nth-child(2) {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 280px;
|
|
animation-delay: .3s;
|
|
}
|
|
|
|
.list-right li:nth-child(3) {
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 560px;
|
|
animation-delay: .6s;
|
|
}
|
|
|
|
|
|
/* 首页-机器人+底图 */
|
|
.index-middle{
|
|
width: 11.25rem;
|
|
}
|
|
|
|
.index-middle img{
|
|
display: block;
|
|
}
|
|
|
|
.ai-human{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 9;
|
|
/* animation-duration: .4s;
|
|
animation-delay: .3s; */
|
|
}
|
|
|
|
.ai-bottom{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 6;
|
|
}
|
|
|
|
/* 编程体验 */
|
|
.page-content{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: calc(100% - 2.75rem);
|
|
padding-top: 2.75rem;
|
|
z-index: 10;
|
|
font-family: 'PingFang';
|
|
}
|
|
|
|
/* AI资源库 */
|
|
.ai-resource{
|
|
width: calc(100% - 2.5rem);
|
|
height: calc(100% - 2.5rem);
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ai-resource li a{
|
|
display: block;
|
|
width: 5rem;
|
|
height: 3.5rem;
|
|
background: url("../images/page-box2.png") no-repeat left top;
|
|
background-size: cover;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.list-img {
|
|
width: 4.6rem;
|
|
height: 2.725rem;
|
|
padding-top: .2rem;
|
|
margin: 0 auto .125rem auto;
|
|
border-radius: .1rem;
|
|
overflow: hidden;
|
|
}
|
|
.list-img img{
|
|
display: block;
|
|
height: 2.725rem;
|
|
border-radius: .1rem;
|
|
}
|
|
|
|
.ai-resource li p{
|
|
font-size: .25rem;
|
|
height: .375rem;
|
|
line-height: .375rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 作品展示 */
|
|
.work-wrapper{
|
|
width: 1692px;
|
|
height: 948px;
|
|
margin: -1.425rem auto 0 auto;
|
|
background: url("../images/list-bg.png") no-repeat left top;
|
|
background-size: cover;
|
|
/* overflow: hidden; */
|
|
}
|
|
|
|
.work-content{
|
|
position: relative;
|
|
padding: .125rem .5rem 0 .5rem;
|
|
}
|
|
|
|
.work-header{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding: .35rem .5rem .125rem .4rem;
|
|
height: .525rem;
|
|
line-height: .525rem;
|
|
font-size: .35rem;
|
|
color: #90B6FF;
|
|
text-align: left;
|
|
}
|
|
|
|
.work-header p:first-child{
|
|
width: .8rem;
|
|
}
|
|
|
|
.work-header p.item-name{
|
|
width: 6.725rem;
|
|
}
|
|
|
|
.work-header p:last-child{
|
|
flex: 1;
|
|
}
|
|
.swiper-container {
|
|
padding-top: .1875rem;
|
|
height: 10.25rem;
|
|
}
|
|
.swiper-btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: .5rem;
|
|
height: 2.5rem;
|
|
margin-top: -1.25rem;
|
|
cursor: pointer;
|
|
}
|
|
.swiper-prev{
|
|
left: -0.875rem;
|
|
background: url("../images/left.png") no-repeat left top;
|
|
background-size: cover;
|
|
}
|
|
|
|
.swiper-next{
|
|
right: -0.875rem;
|
|
background: url("../images/right.png") no-repeat left top;
|
|
background-size: cover;
|
|
}
|
|
|
|
.work-list li a{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding-left: .5rem;
|
|
margin-bottom: .275rem;
|
|
height: 1.25rem;
|
|
line-height: 1.25rem;
|
|
font-size: .35rem;
|
|
color: #fff;
|
|
text-align: left;
|
|
background: linear-gradient( 90deg, #2C509B 0%, rgba(44,80,155,0.6) 100%);
|
|
border-radius: .2rem;
|
|
}
|
|
|
|
.item-num{
|
|
width: .525rem;
|
|
height: .525rem;
|
|
border-radius: 100%;
|
|
text-align: center;
|
|
line-height: .525rem;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 60%);
|
|
}
|
|
|
|
.item-name {
|
|
width: 6.875rem;
|
|
margin: 0 .25rem;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item-author,
|
|
.item-time{
|
|
width: 3rem;
|
|
margin-right: .25rem;
|
|
}
|
|
|
|
.list-star{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
width: 3rem;
|
|
}
|
|
|
|
.list-star span{
|
|
display: block;
|
|
width: .4rem;
|
|
height: .4rem;
|
|
margin-right: .125rem;
|
|
background: url("../images/index-img5.png") no-repeat left top;
|
|
background-size: cover;
|
|
}
|
|
.list-star span.active-star{
|
|
position: relative;
|
|
display: block;
|
|
background: url("../images/index-img4.png") no-repeat left top;
|
|
background-size: cover;
|
|
}
|
|
|
|
.list-star span.active-star::before{
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: .25rem;
|
|
height: .25rem;
|
|
border-radius: 100%;
|
|
background-color: rgba(255,183,76,0.3);
|
|
box-shadow: 0px 0px 12px 0px rgba(255,183,76,0.34), 0px 0px 24px 0px #FFB74C;
|
|
filter: blur(4px);
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.item-handle{
|
|
width: 1.75rem;
|
|
height: 1.1rem;
|
|
background: url("../images/index-img6.png") no-repeat left top;
|
|
background-size: cover;
|
|
margin-left: -0.125rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ai数字人 start */
|
|
.chat-wrapper {
|
|
position: absolute;
|
|
right: .5rem;
|
|
top: 1.4rem;
|
|
width: 14.8125rem;
|
|
height: 11rem;
|
|
padding: .3rem;
|
|
background: url("../images/list-bg.png") no-repeat left top;
|
|
background-size: 100% 100%;
|
|
z-index: 99;
|
|
font-family: 'PingFang';
|
|
}
|
|
|
|
.chat-content {
|
|
width: 100%;
|
|
height: calc(100% - 2.925rem);
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.chat-message {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: .35rem;
|
|
color: #fff;
|
|
margin-bottom: .2rem;
|
|
}
|
|
|
|
.chat-message p {
|
|
position: relative;
|
|
line-height: .625rem;
|
|
padding: .125rem .2rem;
|
|
background: rgba(0,0,0,0.2);
|
|
border-radius: .35rem .1rem .35rem .35rem;
|
|
max-width: 90%;
|
|
}
|
|
|
|
.chat-message p span{
|
|
position: absolute;
|
|
left: .05rem;
|
|
bottom: -0.5rem;
|
|
width: 1rem;
|
|
padding-left: .3rem;
|
|
height: .4rem;
|
|
text-align: center;
|
|
line-height: .4rem;
|
|
border: 1px solid #4CA7FF;
|
|
color: #4CA7FF;
|
|
border-radius: .075rem;
|
|
font-size: .2rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chat-message p span::before{
|
|
content: '';
|
|
position: absolute;
|
|
left: .05rem;
|
|
top: 50%;
|
|
width: .3rem;
|
|
height: .3rem;
|
|
background: url("../images/index-img7.png") no-repeat left top;
|
|
background-size: 100% 100%;
|
|
margin-top: -0.15rem;
|
|
}
|
|
|
|
.chat-message p span:hover{
|
|
background-color: rgba(255,255,255,.2);
|
|
}
|
|
|
|
.chat-message p span.remove-btn{
|
|
padding-left: 0;
|
|
border: none;
|
|
color: #999;
|
|
}
|
|
|
|
.chat-message p span.remove-btn::before{
|
|
border: none;
|
|
color: #999;
|
|
background: none;
|
|
}
|
|
|
|
.chat-message p span.remove-btn:hover{
|
|
background-color: transparent;
|
|
cursor: default;
|
|
}
|
|
|
|
/* .chat-message img {
|
|
display: block;
|
|
width: .5rem;
|
|
height: .5rem;
|
|
border-radius: 50%;
|
|
} */
|
|
|
|
.bot-message {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.bot-message p {
|
|
line-height: .6rem;
|
|
background-color: rgb(255,255,255,0.2);
|
|
border-radius: .1rem .35rem .35rem .35rem;
|
|
}
|
|
|
|
.loading{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
height: .825rem;
|
|
}
|
|
.loading img{
|
|
display: block;
|
|
width: .8375rem;
|
|
margin: 0 .1rem;
|
|
}
|
|
|
|
/* .loading i {
|
|
display: block;
|
|
width: .15rem;
|
|
height: .15rem;
|
|
margin: 0 .075rem;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
animation: rotate 2s linear infinite;
|
|
}
|
|
|
|
.loading i:nth-child(1) {
|
|
animation: jump 1.2s -0.4s linear infinite;
|
|
}
|
|
|
|
.loading i:nth-child(2) {
|
|
animation: jump 1.2s -0.2s linear infinite;
|
|
}
|
|
|
|
.loading i:nth-child(3) {
|
|
animation: jump 1.2s linear infinite;
|
|
}
|
|
|
|
@keyframes jump {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: scale(0.8);
|
|
opacity: 1.0;
|
|
}
|
|
40% {
|
|
transform: scale(1.1);
|
|
opacity: 0.8;
|
|
}
|
|
} */
|
|
|
|
.chat-send {
|
|
width: 100%;
|
|
height: 2.625rem;
|
|
margin-top: .3rem;
|
|
background: linear-gradient( 90deg, #2C509B 0%, rgba(44,80,155,0.6) 100%);
|
|
border-radius: .2rem;
|
|
}
|
|
|
|
.chat-send textarea {
|
|
display: block;
|
|
width: calc(100% - .5rem);
|
|
height: 1rem;
|
|
font-size: .3rem;
|
|
line-height: .45rem;
|
|
border: none;
|
|
padding: .25rem;
|
|
background-color: transparent;
|
|
color: #fff;
|
|
}
|
|
|
|
.send-button-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 .25rem 0 0;
|
|
margin-top: .2rem;
|
|
}
|
|
|
|
.hot-word span{
|
|
position: relative;
|
|
display: inline-block;
|
|
font-size: .25rem;
|
|
color: #fff;
|
|
line-height: .625rem;
|
|
margin: 0 .125rem;
|
|
padding: .075rem .2rem .075rem .6rem;
|
|
background: rgba(0,0,0,0.2);
|
|
border-radius: .35rem .1rem .35rem .35rem;
|
|
}
|
|
|
|
.hot-word span::before{
|
|
content: "";
|
|
position: absolute;
|
|
left: .15rem;
|
|
top: 50%;
|
|
width: .375rem;
|
|
height: .375rem;
|
|
background: url("../images/wenhao.png") no-repeat left top;
|
|
background-size: 100% 100%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.hot-word span:hover{
|
|
background-color: rgba(0,0,0,0.6);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.send-button {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: .9rem;
|
|
height: .725rem;
|
|
line-height: .725rem;
|
|
padding-left: .75rem;
|
|
font-size: .325rem;
|
|
text-align: left;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #06BFFF 0%, #2B74FF 100%);
|
|
border-radius: .725rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.send-button::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: .2rem;
|
|
top: 50%;
|
|
width: .45rem;
|
|
height: .45rem;
|
|
background: url("../images/index-img8.png") no-repeat left top;
|
|
background-size: .45rem .45rem;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.send-disabled-button {
|
|
background: rgba(255,255,255,.2);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ai数字人 end */
|
|
|
|
.page-big-ai{
|
|
display: block;
|
|
height: 7.5rem;
|
|
margin: -1rem auto 0 auto;
|
|
}
|
|
|
|
.program-mode {
|
|
position: relative;
|
|
/* margin: 0 auto; */
|
|
}
|
|
|
|
.program-mode .ai-resource{
|
|
justify-content: center;
|
|
}
|
|
|
|
.program-mode .ai-resource li{
|
|
margin: 0 .5rem;
|
|
}
|
|
|
|
.program-mode .swiper-prev{
|
|
left: 1rem;
|
|
}
|
|
|
|
.program-mode .swiper-next{
|
|
right: 1rem;
|
|
}
|
|
|
|
/* layer 样式修改 */
|
|
.layui-layer-video{
|
|
background: linear-gradient( 180deg, #183375 0%, #122050 100%);
|
|
border-radius: 0.1rem !important;
|
|
}
|
|
.layui-layer-video .layui-layer-title{
|
|
font-size: .3rem !important;
|
|
font-weight: 500;
|
|
color: #fff !important;
|
|
background: linear-gradient( 90deg, #5B9DFF 0%, rgba(91,157,255,0) 100%);
|
|
border-bottom: none !important;
|
|
border-radius: 0.1rem .1rem 0 0 !important;
|
|
}
|
|
.layui-layer-setwin{
|
|
right: .125rem !important;
|
|
top: .125rem !important;
|
|
}
|
|
.layui-layer-setwin a.layui-layer-close{
|
|
width: .4rem !important;
|
|
height: .4rem !important;
|
|
color: #fff !important;
|
|
background: url("../images/index-img3.png") no-repeat left top !important;
|
|
background-size: .4rem .4rem !important;
|
|
}
|
|
.layui-layer-video .layui-layer-content{
|
|
padding: .3rem !important;
|
|
}
|
|
.layui-layer-video .layui-layer-content .empty-data{
|
|
width: 50%;
|
|
}
|
|
.layui-layer-video .layui-layer-content .empty-data img{
|
|
width: 2.125rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.layui-layer-video.layui-layer-iframe iframe{
|
|
height: 8.75rem !important;
|
|
}
|
|
|
|
#videoBox{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* pdf页面 */
|
|
.perview-wrapper{
|
|
background: linear-gradient( 180deg, #183375 0%, #122050 100%);
|
|
font-family: 'PingFang';
|
|
}
|
|
.style-line-top{
|
|
width: 100%;
|
|
height: .05rem;
|
|
background: linear-gradient( 90deg, rgba(91, 157, 255, 0.8) 0%, rgba(91, 157, 255, 0.1) 60%);
|
|
box-shadow: 0px 0px 5px 0px #1766FF, 0px 0px 12px 0px #1766FF, 0px 0px 20px 0px #1766FF;
|
|
}
|
|
.perview-wrapper .ai-header-wrapper{
|
|
height: 1rem;
|
|
font-family: 'DOUYU-Regular';
|
|
}
|
|
.perview-wrapper .ai-header{
|
|
height: calc(100% - .05rem);
|
|
}
|
|
.perview-wrapper .header-left{
|
|
top: .15rem;
|
|
left: -0.125rem;
|
|
}
|
|
.perview-wrapper .header-login{
|
|
top: .15rem;
|
|
}
|
|
|
|
#my-pdf {
|
|
position: fixed;
|
|
top: 1rem;
|
|
left: 0;
|
|
width: calc(100vw);
|
|
height: calc(100vh - 1rem);
|
|
z-index: 999;
|
|
}
|
|
|
|
#leftpdf{
|
|
height: calc(100%);
|
|
}
|
|
|
|
.perview-codeVideo{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 1rem;
|
|
height: calc(100vh - 1.3rem);
|
|
padding: 0 .3rem .3rem .3rem;
|
|
background: url("../images/content-bg.png") no-repeat right bottom;
|
|
background-size: 9.2875rem 8.55rem;
|
|
}
|
|
|
|
.perview-code{
|
|
position: relative;
|
|
width: 15.7rem;
|
|
height: 12.2rem;
|
|
overflow: hidden;
|
|
background-color: #000;
|
|
}
|
|
|
|
.empty-data{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 2.125rem;
|
|
text-align: center;
|
|
font-size: .35rem;
|
|
color: #fff;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.empty-data img{
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.perview-video{
|
|
width: 7.4rem;
|
|
}
|
|
|
|
.video-content {
|
|
width: 100%;
|
|
height: 4.5rem;
|
|
background-color: #000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.perview-info{
|
|
font-size: .35rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.perview-info li {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
line-height: .525rem;
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.perview-info li i{
|
|
position: relative;
|
|
display: block;
|
|
color: #83D2FE;
|
|
padding-left: .5rem;
|
|
}
|
|
|
|
.perview-info li i::before{
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
width: .45rem;
|
|
height: .45rem;
|
|
margin-top: -0.225rem;
|
|
}
|
|
|
|
.perview-info li:nth-child(1) i::before {
|
|
background: url("../images/index-img10.png") no-repeat left top;
|
|
background-size: cover;
|
|
}
|
|
.perview-info li:nth-child(2) i::before {
|
|
background: url("../images/index-img11.png") no-repeat left top;
|
|
background-size: cover;
|
|
}
|
|
.perview-info li:nth-child(3) i::before {
|
|
background: url("../images/index-img12.png") no-repeat left top;
|
|
background-size: cover;
|
|
}
|
|
.perview-info li:nth-child(4) i::before {
|
|
background: url("../images/index-img13.png") no-repeat left top;
|
|
background-size: cover;
|
|
}
|
|
.perview-info li:nth-child(5) i::before {
|
|
background: url("../images/index-img14.png") no-repeat left top;
|
|
background-size: cover;
|
|
}
|
|
|
|
/* 登录 */
|
|
.layui-layer.layui-layer-login{
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.layui-layer.layui-layer-login .layui-layer-setwin{
|
|
right: 40px !important;
|
|
top: 40px !important;
|
|
}
|
|
|
|
.layer-login{
|
|
font-family: 'PingFang';
|
|
width: 400px!important;
|
|
height: 560px!important;
|
|
padding: .5rem !important;
|
|
background: linear-gradient( 180deg, #183375 0%, #122050 100%);
|
|
border-radius: .1rem!important;
|
|
z-index: 9999;
|
|
}
|
|
.layer-login h3{
|
|
font-family: 'DOUYU-Regular';
|
|
text-align: center;
|
|
font-size: .45rem;
|
|
background: -webkit-linear-gradient(90deg, #fff 0%, #9FCAFF 70%);
|
|
background: linear-gradient(180deg, #fff 0%, #9FCAFF 70%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
color: transparent;
|
|
text-shadow: 0px 0px 11px rgba(105,173,255,0.34), 0px 0px 24px rgba(105,173,255,0.68);
|
|
}
|
|
.login-form{
|
|
font-size: .35rem;
|
|
color: #fff;
|
|
padding: .8rem 0 .375rem 0;
|
|
}
|
|
.login-form input{
|
|
display: block;
|
|
width: calc(100% - .4rem);
|
|
height: .8rem;
|
|
line-height: .8rem;
|
|
padding: 0 .2rem;
|
|
border: 1px solid #6078CB;
|
|
background-color: #111E4B;
|
|
border-radius: .1rem;
|
|
font-size: .3rem;
|
|
color: #CCCCCC;
|
|
margin: .075rem 0 .3rem 0;
|
|
}
|
|
|
|
::-ms-reveal {
|
|
filter: invert(100%);
|
|
}
|
|
|
|
.login-submit{
|
|
width: 100%;
|
|
height: .8rem;
|
|
line-height: .8rem;
|
|
font-size: .35rem;
|
|
color: #fff;
|
|
background: linear-gradient( 135deg, #06BFFF 0%, #2B74FF 100%);
|
|
text-align: center;
|
|
border-radius: .8rem;
|
|
cursor: pointer;
|
|
}
|
|
.user-info {
|
|
font-size: .35rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
.user-info img{
|
|
display: block;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.user-name{
|
|
margin-top: .3rem;
|
|
font-size: .5rem;
|
|
}
|
|
.user-other{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: .5rem 0 .75rem 0;
|
|
}
|
|
.user-other li span{
|
|
font-size: .3rem;
|
|
color: rgba(255,255,255,0.6);
|
|
}
|
|
|
|
.change-accout-btn{
|
|
width: 100%;
|
|
height: .8rem;
|
|
line-height: .8rem;
|
|
text-align: center;
|
|
border-radius: .8rem;
|
|
border: 1px solid #06BFFF;
|
|
cursor: pointer;
|
|
}
|
|
.wechat-login{
|
|
padding-top: .8rem;
|
|
}
|
|
|
|
.wechat-login img{
|
|
display: block;
|
|
width: 4rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.wechat-login span{
|
|
display: block;
|
|
font-size: .35rem;
|
|
color: #fff;
|
|
margin-top: .3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.page-iframe{
|
|
margin-top: 1rem;
|
|
height: calc(100vh - 1rem);
|
|
}
|
|
.iframe {
|
|
background-color: #fff;
|
|
border: none;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.page-cont-title{
|
|
font-family: 'PingFang';
|
|
font-size: .3rem;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
line-height: .7rem;
|
|
text-shadow: 0px 0px 20px #0B88FC, 0px 0px 35px #0B0B88, 0px 0px 51px #0B88FC;
|
|
}
|