.ai-view{ position: relative; width: 100%; height: calc(100% - 750px); background: #fff; padding-top: 36px; .ai-title{ position: relative; width: 100%; padding-left: 40px; margin-bottom: 20px; .title-btn{ // width: 210px; height: 56px; border-radius: 16px; font-family: "Verdana"; font-weight: 400; font-size: 30px; background: #fff; color: #4e4e4e; padding: 7px 17px; box-sizing: border-box; .redbox_icon{ width: 30px; height: 35px; margin-right: 15px; } } .title-btn.active{ background: #343434; color: #cef5bc; } } .ai-tips{ position: absolute; bottom: 160px; width: 100%; // padding-left: 40px; font-family: "Verdana"; font-weight: 400; font-size: 26px; color: #4e4e4e; opacity: 0.5; // margin-bottom: 30px; // margin-top: 20px; text-align:center; } .grid-view1 { display: grid; grid-template-columns: repeat(4, 1fr); /* grid-row-gap: 20rem; */ grid-gap: 20px 20px; } .ai-people{ position: relative; width: 100%; padding-left: 40px; padding-right: 40px; .main{ max-height: 400px; overflow-y: auto; .item{ // margin-right: 20px; font-size: 0px; .item-name{ position:relative; font-family: "Verdana"; font-weight: 400; font-size: 28px; color: #4e4e4e; height: 30px; .icon-ic-huanyihuan{ font-size: 24px; color: #000; margin-right: 4px; } .close-view{ width: 24px; height: 24px; line-height: 24px; margin-right: 4px; background: #231815; opacity: 0.28; color: #fff; border-radius: 50%; .icon-close{ font-size: 14px; } } } .empty-item{ position: relative; width: 150px; height: 140px; border-radius: 20px; background: transparent; border: 2px dashed rgba(40, 44, 51, 0.2); box-sizing: border-box; margin-bottom: 10px; .add-icon{ position: absolute; width: 100%; height: 100%; z-index: -1; font-size: 70px; // color:rgba(40, 44, 51, 0.25); .bg{ width: 100%; height: 100%; object-fit: cover; } } ::v-deep .el-progress-circle{ width: 110px!important; height: 110px!important; } ::v-deep .el-progress__text{ font-family: "Verdana"; font-weight: 400; white-space: pre; font-size: 22px!important; color: #8aff7c; } } .empty-text{ font-size: 24px; } .itemImg{ width: 150px; height: 140px; border-radius: 20px; border: solid 4px transparent; font-size: 0px; margin-bottom: 10px; box-sizing: border-box; object-fit: contain; } } .item:last-child{ margin-right: 0px; } .item.active{ color: #85b474; } .active .itemImg{ border: solid 4px #94DB75; } } } .ai-bottom{ position: absolute; left: 116px; bottom: 60px; width: 518px; height: 80px; border-radius: 40px; background: linear-gradient(130.79deg, #a0ed84 0%, #e8f4b7 100%); border: 2px solid rgba(255, 255, 255, 0.22); font-family: "DIN Alternate Bold"; font-weight: 700; font-size: 34px; color: #365d39; } } .redbox{ position: relative; box-sizing: border-box; padding: 0px 40px; margin-top: 50px; .main-box{ .title{ font-family: "Verdana"; font-weight: 400; font-size: 24px; text-align: center; color: #4e4e4e; opacity: 0.5; } .left-box{ .title{ text-align: center; width: 217px; } .left-main{ .main-red{ .red-img{ width: 217px; height: 217px; margin-bottom:20px; } .icon-icon_delete{ width: 54px; height: 54px; border-radius: 27px; background: rgba(118, 118, 118, 0.1); font-size: 20px; margin-right: 10px; } .red-btn{ width: 166px; height: 54px; border-radius: 27px; background: #f27966; font-family: "DIN Alternate Bold"; font-weight: 700; font-size: 24px; color: #fff; } .red-adjust{ background: rgba(242, 121, 102, 0.1); color: #f27966; } } .plus{ font-size: 20px; margin-top: -50px; } .special-img{ width: 242px; height: 242px; margin-left:50px; } } } .right-box{ .select-view{ margin-top: 50px; } .select-btn{ font-family: "Verdana"; font-weight: 400; font-size: 28px; margin-bottom: 27px; color: rgba(54, 93, 57, 0.3); } .select-btn.active{ color: #365d39; } } } } .tips-view{ position: absolute; left:50%; transform:translateX(-50%); top:-50px; font-family: "Verdana"; font-weight: 400; font-size: 26px; line-height: 30px; text-align: center; color: #2b2b2b; opacity: 0.5; pointer-events: none; } .mask-view{ position: fixed; left: 0px; top: 0px; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.64); z-index: 999; .content{ position: absolute; bottom: 0px; width: 100%; height: 1320px; border-radius: 40px 40px 0 0; background: #fff; box-sizing: border-box; font-size:0px; padding: 40px; .close{ position: absolute; right: 10px; top: 10px; width: 80px; height: 80px; color: rgba(68, 68, 68, 0.44); z-index: 999; } .title{ font-family: "Verdana Bold"; font-weight: 700; font-size: 34px; color: #000; margin-bottom: 30px; } .desc{ font-family: "Verdana"; font-weight: 400; font-size: 34px; color: rgba(33, 33, 33, 0.76); text-align: center; margin-bottom: 30px; } .img{ width: 441.42px; height: 628.98px; background: transparent; // margin-bottom: 45px; margin-left: 50%; transform: translateX(-50%); } .section-text{ font-family: "Verdana"; font-weight: 400; font-size: 28px; // line-height: 48px; margin-left: 70px; color: rgba(33, 33, 33, 0.76); } .btn{ position: absolute; left: 60px; bottom: 60px; width: 630px; height: 80px; border-radius: 40px; background: #92ce8b; font-size: 0px; .bg{ position: absolute; width: 100%; height: 100%; font-family: "DIN Alternate Bold"; font-weight: 700; font-size: 32px; color: #fff; } } } } .uploadVideoFrom{ position: absolute; width: 100%; height: 100%; font-size: 0px; .el-upload__input { position: absolute; cursor: pointer; width: 100%; height: 100%; right: 0px; top: 0px; opacity: 0; -ms-filter: 'alpha(opacity=0)'; display: inline-block; } } .pop-view{ position: fixed; left: 0px; top: 0px; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.64); z-index: 999; .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 650px; height: 400px; border-radius: 40px; background: #fff; padding: 20px 78px; .close{ position: absolute; right: 40px; top: 40px; width: 30px; height: 30px; color: rgba(68, 68, 68, 0.44); } .title{ font-family: "Verdana Bold"; font-weight: 700; font-size: 34px; text-align: center; color: rgba(33, 33, 33, 0.76); margin-top: 92px; margin-bottom: 60px; } .btns{ .btn{ width: 238px; height: 80px; border-radius: 40px; font-family: "DIN Alternate Bold"; font-weight: 700; font-size: 28px; } .sty1{ background: #d5d5d5; color: #191919; margin-right:20px ; } .sty2{ background: #92ce8b; color: #fff; } } } }