html,
body {
margin: 0px;
padding: 0px;
width: 100vw;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
input {
-webkit-appearance: none !important;
border: none;
outline: none;
border-radius: 0;
}
h3,
p,
ul,
li {
padding: 0;
margin: 0;
}
*,
:before,
:after {
box-sizing: border-box;
}
:root {
--margin: 5px;
}
#app {
font: 16px "Microsoft YaHei", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100vw;
height: 100%;
color: #fff;
/* linear-gradient(180deg, #D8585E 0%, #630005 100%) */
background: url('../images/bg@2x.png') no-repeat;
background-size:100% 100%;
overflow: hidden;
}
.loading-mask {
position: absolute;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
z-index: 99;
display: none;
}
.ai_top{
width: 100%;
height: 76vh;
text-align: center;
display: block;
}
.ai_title{
margin: 6% auto;
width: 100%;
}
.ai_pic{
display: inline-block;
width: calc(100% - calc(var(--margin) * 2) * 2);
}
.ai_pic >li{
display: inline-block;
list-style: none;
width: calc((100% - var(--margin) * 2) / 3);
margin-bottom: calc(var(--margin) * 2);
}
.ai_pic > .active{
border-radius: 7px;
background: linear-gradient(180deg, #FFE5A5 0%, #DFA827 93%, #F3C24A 100%);
box-shadow: 0px 5px 10px rgba(74, 11, 11, 0.48);
}
.ai_pic >li>img{
width: calc(100% - var(--margin) * 2);
border-radius: 5px;
}
.ai_pic >li> span{
display: inline-block;
margin-bottom: calc(var(--margin) * 2);
}
.ai_pic > .active > span{
color: #962C30;
}
.ai_bottom{
width: 100%;
display: inline-block;
text-align: center;
}
.ai_bottom > img{
width: 28%;
margin: 0 auto;
display: inline-block;
}