@import '@/assets/css/function'; @import '@/assets/css/theme'; .record{ color: #fff; padding-top: halfH(10); .list{ display: flex; align-items: center; justify-content: space-around; .list-item{ margin-right: halfW(20); text-align: center; flex: 1; position: relative; &:last-child{ margin-right: 0; } .logoWrp{ position: relative; } .list-item-logo{ animation: bubble 20s linear infinite; margin: auto; } .list-item-icon{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; } .list-item-desc{ background: $record-bg no-repeat; background-size: 100% 100%; width: halfW(196); height: halfH(45); line-height: halfH(45); margin: halfH(22) auto 0; font-size: halfH(20); color: $record-desc; font-weight: bold; .desc-tips{ font-size: halfH(12); padding-left: halfH(8); } } .list-item-txt{ font-size: halfH(16); color: $record-txt; padding-top: halfH(14); font-weight: bold; } &.shebei{ .list-item-logo{ animation-delay: 0; } } &.anfang{ .list-item-logo{ animation-delay: 1s; } } &.baojie{ .list-item-logo{ animation-delay: 3s; } } &.renwu{ .list-item-logo{ animation-delay: 5s; } } } } @keyframes bubble { 0% { transform: rotate(0); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } }