.border-wrapper.data-v-ff6daa3b { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 5px 10px 5px 20px; background-color: #ff9775; border-radius: 15px; } .border-wrapper.data-v-ff6daa3b::before { left: -20px; border-right: none; } .border-wrapper.data-v-ff6daa3b::after { right: -20px; border-left: none; } .line.data-v-ff6daa3b { position: absolute; top: 50%; left: 0; width: 5px; height: 30px; margin: 0 10px; background-color: #fff; border-radius: 10px; transform: translateY(-50%); } .info-text.data-v-ff6daa3b { display: flex; flex-direction: column; flex-grow: 1; padding: 10px 0; padding-left: 15px; background-color: #fff; border-radius: 18px; } .main-text.data-v-ff6daa3b { font-size: 16px; color: #000; } .sub-text.data-v-ff6daa3b { font-size: 14px; color: #888; } .highlight.data-v-ff6daa3b { color: #ff7043; } .delivery-image.data-v-ff6daa3b { width: 50px; height: 50px; margin-left: 10px; } .courier.data-v-ff6daa3b { position: absolute; top: -15%; right: 12%; z-index: 999; } .loading-dots.data-v-ff6daa3b { position: absolute; right: -30px; bottom: 0; display: flex; align-items: center; justify-content: center; } .dot.data-v-ff6daa3b { width: 8px; /* 小点的大小 */ height: 8px; margin: 0 2px; background-color: #ff7043; /* 小点的颜色 */ border-radius: 50%; animation: bounce-ff6daa3b 1.4s infinite ease-in-out both; } .dot.data-v-ff6daa3b:nth-child(1) { animation-delay: -0.32s; } .dot.data-v-ff6daa3b:nth-child(2) { animation-delay: -0.16s; } .dot.data-v-ff6daa3b:nth-child(3) { animation-delay: 0s; } @keyframes bounce-ff6daa3b { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }