/**滚动条的宽度*/ ::-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; }