/* 间距 */ .mt-5{ margin-top: 5px; } .mt-10{ margin-top: 10px; } .mt-15{ margin-top: 15px; } .mt-20{ margin-top: 20px; } .mt-30{ margin-top: 30px; } .ml-5{ margin-left: 5px; } .ml-10{ margin-left: 10px; } .ml-15{ margin-left: 15px; } .ml-20{ margin-left: 20px; } .mr-0{ margin-right: 0; } .mr-5{ margin-right: 5px; } .mr-10{ margin-right: 10px; } .mr-15{ margin-right: 15px; } .mr-20{ margin-right: 20px; } .mb-5{ margin-bottom: 5px; } .mb-10{ margin-bottom: 10px; } .mb-20{ margin-bottom: 20px; } .mb-30{ margin-bottom: 30px; } /* 字体 */ .font-10{ font-size: 10px; } .font-12{ font-size: 12px; } .font-14{ font-size: 14px; } .font-15{ font-size: 15px; } .font-16{ font-size: 16px; } .font-17{ font-size: 17px; } .font-18{ font-size: 18px; } .font-20{ font-size: 20px; } /* 颜色 */ .blue{ color: #518EFF; } .white{ color: #FFFFFF; } .gray{ color: #8c9fad; } .light-gray{ color: #a7a7a7; } .dark-gray{ color: #3a3f3f; } .red{ color:#DE5A5A; } .green{ color:#1FB713; } .purple{ color: #5A73DE; } .blueness{ color: #58C4C0; } .orange{ color: #E89D44; } .yellow{ color: #E6E15F; } .font-dark{ color: #111111; } .font-bold{ font-weight: 700; } /* 布局 */ .flex{ display: flex; } .flex-1{ flex: 1; } .flex-v{ flex-direction: column; } .align-left{ align-items: flex-start; } .align-center{ align-items: center; } .justify-between{ justify-content: space-between; } .justify-center{ justify-content: center; } .justify-start{ justify-content: flex-start; } .justify-end{ justify-content: flex-end; } .justify-around{ justify-content: space-around; } .block{ display: block; } .placeholder{ color: #999999; } .center{ text-align: center; } .right{ text-align: end; } /* 默认蓝色按钮 */ .blue-btn{ background: #518EFF; border: 0; color: #FFFFFF; font-size: 14px; } /* 蓝色边框白底按钮 */ .white-btn{ background: #FFFFFF; border: 1px solid #518EFF; color: #518EFF; font-size: 14px; } /* 蓝色圆形加减按钮 */ .blue-btn-circle{ width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #518EFF; color: #FFFFFF; }