.plot-view{ position: relative; width: auto; box-sizing: border-box; z-index: 12; padding-top: 30px; .title{ font-family: "Verdana Bold"; font-weight: 700; font-size: 32px; color: #000; margin-bottom: 30px; } .close{ position: absolute; right: -10px; top: 10px; width: 30px; height: 30px; color: rgba(0, 0, 0, 0.22); font-size: 30px; } } .swiper-view{ position: relative; width: 100%; height: 98px; // top:926px; overflow-x: auto; overflow-y: hidden; margin-bottom: 30px; z-index: 9; .tab-content{ position: absolute; } .tab-item{ // width:190px; width:max-content; font-family: "Verdana"; font-weight: 400; font-size: 0px; color: rgba(69, 69, 69, 0.6); text-align:center; box-sizing: border-box; margin-right: 10px; border: 2px solid transparent; border-radius: 12px; padding: 12px; &.tabActive{ border-color: #ffbd3e; background: rgba(253, 191, 71, 0.08); box-shadow: 0 0 40px rgba(0, 0, 0, 0.1); } &:first-child{ margin-left: 0px; } &:last-child{ margin-right: 0px; } .tab-img{ width: 84px; height: 84px; object-fit: cover; margin-bottom: 14px; border-radius: 50%; border: transparent 4px solid; box-sizing: border-box; } .tab-title{ font-family: "Verdana"; font-weight: 400; font-size: 28px; color: rgba(29, 29, 29, 0.7); } .tab-text{ font-family: "Verdana"; font-weight: 400; font-size: 22px; color: rgba(132, 132, 132, 1); } &.tabActive .tab-title{ font-family: "Verdana Bold"; font-weight: 700; color: #ffa700; } &.tabActive .tab-img{ border-color: rgba(249, 135, 15, 1); } } } .plot-content{ position: relative; width: 100%; height: 320px; overflow-x: auto; .content{ position: absolute; .item{ width:222px; box-sizing: border-box; margin-right: 10px; .img{ width: 222px; height: 222px; margin-bottom: 30px; } .text{ width: 100%; font-family: "Verdana"; font-weight: 400; font-size: 26px; color: #414141; } .gou{ position: absolute; top: 10px; right: 20px; width: 40px; height: 40px; font-size: 20px; border-radius: 50%; background: #ff870f; border: 2px solid #fff; color:#fff; opacity: 0; } &.active .gou{ opacity: 1; } &.active .text{ font-family: "Verdana Bold"; font-weight: 700; color: #ffa700; } } } } .btn-list{ position: fixed; left: 140px; bottom: 0px; padding-bottom: 60px; width: 470px; z-index: 15; background-color: rgba(255, 255, 255, 1); box-sizing: border-box; } .btn{ height: 100px; border-radius: 50px; backdrop-filter:blur(40px); --webkit-backdrop-filter: blur(40px); font-family: "Verdana Bold"; font-weight: 700; font-size: 32px; color: #272727; box-sizing: border-box; } .up{ width: 690px; box-shadow: 0 6px 20px #f2980233; } .up2{ color: rgba(255, 255, 255, 1); background-image:linear-gradient(124deg, rgba(245, 201, 82, 1) 0%, rgba(239, 149, 57, 1) 100%); }