@prim: #159EFF; @success: #07c160; @danger: #159EFF; @warn: #ff976a; @text0: #181818; @text1: #323233; @text2: #606266; @text3: #939599; @text4: #c6c8cc; @border1: #f5f7fa; @border2: #f2f3f5; @border3: #dfe1e6; @border4: #f2f6fc; @bg: #f5f7fa; @ff: #ffffff; .flex1 { flex-grow: 1; } .flex() { display: flex; align-items: center; } .flex-col() { display: flex; flex-direction: column; } .ellipsis() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn(){ height: 56px; justify-content: space-between; background: #ffffff; width: 100%; position: fixed; bottom: 0; } .message(){ font-size: 13px; font-weight: 400; color: #c8c9cc; line-height: 22px; } .span(){ font-size: 14px; font-weight: bold; color: #000000; line-height: 24px; } .p(){ font-family: 'OSP'; font-size: 34px; font-weight: normal; color: #ff7f1f; line-height: 34px; } .text10(){ color: #ff7f1f; font-size: 22px; font-family: 'OSP'; font-weight: normal; line-height: 22px; margin-top: 8px; } .text14(){ font-size: 14px; font-weight: 400; color: #939599; line-height: 24px; } .text13(){ font-size: 13px; font-weight: 400; color: #939599; line-height: 24px; } .text12(){ font-size: 13px; font-weight: 400; color: #939599; line-height: 22px; } .price(){ font-size: 14px; font-weight: 400; color: #ff7f1f; line-height: 24px; } .add(){ width: 24px; height: 24px; background: @prim; line-height: 24px; text-align: center; font-weight: bold; color: #fff; border-radius: 2px; } .add2(){ width: 24px; height: 24px; margin-top: 4px; line-height: 24px; } .mytest(){ position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 100%; z-index: -1; } .button(){ width: 120px; height: 44px; background: @prim; border-radius: 8px; font-size: 16px; font-weight: 400; color: #ffffff; margin-right: 16px; border: 0; } .ellipsis-line( @line:2 ) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @line; overflow: hidden; } .bottom( @bottom:0.5px ) { padding-bottom: @bottom; padding-bottom: calc(@bottom + constant(safe-area-inset-bottom)); // 兼容 IOS<11.2 padding-bottom: calc(@bottom + env(safe-area-inset-bottom)); // 兼容 IOS>=11.2 } @keyframes iconAnimate { from { -webkit-transform: scale(1); transform: scale(1); } 20% { -webkit-transform: scale(0.8); transform: scale(0.8); } 80% { -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .iconAnimate { animation: iconAnimate ease-in-out 0.3s; }