.el-loading-spinner{width:30%;background:rgba(0,0,0,.8);left:50%;transform:translateX(-50%);border-radius:5px;padding:15px 0;color:#fff}.el-loading-spinner i{color:#fff;font-size:22px}.el-loading-spinner .el-loading-text{color:#fff}.el-message-box{width:70%}.demoApp{max-width:640px;background:#222630;margin:0 auto}.demoApp .content{width:100%}.demoApp .content .top{width:100%;height:372px;position:relative}.demoApp .content .top .use{width:92%;margin:0 auto;height:80px}.demoApp .content .top .use img{width:74px;height:74px;border-radius:100%;float:left;background:rgba(184,152,122,.8);padding:3px}.demoApp .content .top .use .right{height:80px;float:left;margin-left:10px;width:calc(100% - 90px)}.demoApp .content .top .use .right h2{color:#fff;font-size:28px;font-weight:400;margin:8px 0 8px 0}.demoApp .content .top .use .right p{height:24px}.demoApp .content .top .use .right p span{float:left;border-radius:2px;background:linear-gradient(-45deg,#ddc9b2,#b8987a);color:#fff;width:80px;height:24px;font-size:14px;text-align:center;line-height:24px}.demoApp .content .top .use .right p font{float:right;color:#fff;font-size:14px;line-height:24px}.demoApp .content .top .nav{width:92%;margin:0 auto;border-radius:4px;background:rgba(34,38,48,.8)}.demoApp .content .top .nav:after,.demoApp .content ul li:after{clear:both;content:".";display:block;width:0;height:0;visibility:hidden}.demoApp .content .top .nav a{float:left;width:25%;padding:15px 0}.demoApp .content .top .nav a img{width:55px;display:block;margin:0 auto;border-radius:100%}.demoApp .content .top .nav a p{width:100%;text-align:center;font-size:16px;color:#9fa0a5;padding-top:8px;font-weight:700}.demoApp .content .top .banner{position:absolute;bottom:-65px;width:92%;left:4%}.demoApp .content .top .banner img{width:100%;border-radius:4px;height:150px;-o-object-fit:cover;object-fit:cover}.demoApp .content .hot{height:80px;text-align:center;line-height:80px;color:#b8987a;font-size:26px;font-weight:400}.demoApp .content ul li{width:calc(92% - 24px);border-radius:4px;background:rgba(0,0,0,.2);box-shadow:0 2px 20px 0 rgba(0,0,0,.1);margin:0 auto 12px auto;padding:12px}.demoApp .content ul li .title{position:relative;width:100%}.demoApp .content ul li .title img{float:left;width:35%;height:100px;-o-object-fit:cover;object-fit:cover}.demoApp .content ul li .title .conTitle{float:left;width:62%;margin-left:3%;height:100px}.demoApp .content ul li .title .conTitle span{display:block;color:#ffe5c8;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:1px;font-size:18px}.demoApp .content li .title .conTitle font{display:block;color:hsla(0,0%,100%,.5);font-size:14px;padding:18px 0}.demoApp .content li .title .conTitle .price i{color:#ffc27f;font-style:normal;font-size:16px;font-weight:700;padding:0 4px}.demoApp .content li .title .conTitle .price b{font-size:12px}.demoApp .content li .title .conTitle .price{font-size:14px;font-family:PingFang SC;color:hsla(0,0%,100%,.5)}.demoApp .footCurt{box-shadow:0 -4px 30px 0 rgba(0,0,0,.5);background:linear-gradient(180deg,#353a45,#222630 100%)}.demoApp .footCurt .footer-item{font-size:14px;color:#96969f}.demoApp .footCurt .on{color:#dcc7af}