.list { width: 100%; } .list-item { position: relative; min-height: 400px; width: calc((100% - 120px) / 5); min-width: calc((100% - 120px) / 5); max-width: calc((100% - 120px) / 5); padding: 30px 20px; border-radius: 14px; margin-right: 30px; color: #774e20; background-color: #fafafa; } .list-item:nth-child(5n) { margin-right: 0; } .list-item .item-btn { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); } ul li { list-style: none; font-size: 15px; margin: 10px 0; font-weight: 500; } .active { background-color: #fffbf8; border: 1px solid #f1b17a; box-shadow: 0px 6px 12px 0px rgba(216, 160, 82, 0.36); } :deep(.v-btn) { border: 1px solid #bc8b55; color: #c30f0f !important; font-weight: 700; } .tips { background-color: #fffbf8; border: 1px solid #f1b17a; border-radius: 4px; text-align: center; font-size: 15px; } .recommend { position: absolute; top: 0; left: 0; width: 55px; height: 26px; line-height: 26px; background-color: #ff8a04; border-radius: 12px 0 18px 0; font-weight: 600; font-size: 14px; color: #fff; text-align: center; } .scanCode { border: 1px dashed #ccc; border-radius: 10px; padding: 30px; } .scanCode .code-left { border: 1px solid #f1b17a; border-radius: 6px; padding: 5px; } .scanCode .price { font-size: 30px; font-weight: 700; color: #ff9012; } :deep(.v-slide-group__content) { background: none !important; } .package-title { height: 60px; line-height: 60px; color: #fff; background: linear-gradient(45deg, #ff8a04, transparent); font-weight: 700; font-size: 20px; text-align: center; border-radius: 4px; }