/** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ .upgrade-page.data-v-a0c82533 { min-height: 100vh; background: linear-gradient(180deg, #eaffe6 0%, #fff 30%); padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx); } .nav-bar.data-v-a0c82533 { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; width: 100vw; background: linear-gradient(to right, #b2f08d 0%, #39e9d2 100%); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03); } .nav-bar .nav-bar-inner.data-v-a0c82533 { display: flex; align-items: center; height: 44px; width: 100vw; position: relative; } .nav-bar .back-icon.data-v-a0c82533, .nav-bar .nav-bar-right.data-v-a0c82533 { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; } .nav-bar .back-icon.data-v-a0c82533 { left: 0; } .nav-bar .nav-bar-right.data-v-a0c82533 { right: 0; } .nav-bar .nav-bar-title.data-v-a0c82533 { flex: 1; text-align: center; font-size: 36rpx; font-weight: bold; color: #222; letter-spacing: 2rpx; line-height: 44px; } .feature-tags.data-v-a0c82533 { position: relative; z-index: 1; margin: 0 32rpx; margin-top: 0; margin-bottom: 0; background: linear-gradient(to right, #b2f08d 0%, #39e9d2 100%); border-radius: 32rpx; box-shadow: 0 4rpx 24rpx rgba(60, 167, 250, 0.08); padding: 0 24rpx; height: 80rpx; display: flex; justify-content: space-between; align-items: center; } .feature-tags .tag.data-v-a0c82533 { flex: 1; display: flex; align-items: center; justify-content: center; } .feature-tags .tag .check.data-v-a0c82533 { width: 36rpx; height: 36rpx; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #13ac47; font-weight: bold; margin-right: 10rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); } .feature-tags .tag .text.data-v-a0c82533 { color: #fff; font-size: 28rpx; font-weight: bold; } .main-content.data-v-a0c82533 { margin-top: -48rpx; padding-top: 88rpx; background: linear-gradient(180deg, #eaffe6 0%, #fff 30%); min-height: 100vh; width: 100vw; box-sizing: border-box; position: relative; z-index: 11; border-radius: 40rpx 40rpx 0 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; } .upgrade-card.data-v-a0c82533 { width: 92vw; max-width: 700rpx; margin: 40rpx auto 0 auto; background: #fff; border-radius: 32rpx; box-shadow: 0 8rpx 32rpx rgba(60, 167, 250, 0.08); padding: 40rpx 32rpx 32rpx 32rpx; display: flex; flex-direction: column; align-items: stretch; } .upgrade-card .upgrade-title-row.data-v-a0c82533 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32rpx; } .upgrade-card .upgrade-title-row .upgrade-title.data-v-a0c82533 { font-size: 32rpx; font-weight: bold; color: #222; } .upgrade-card .upgrade-title-row .contact-service.data-v-a0c82533 { display: flex; align-items: center; padding: 4rpx 12rpx; border-radius: 12rpx; border: 2rpx solid #df8155; background: #fff0d2; } .upgrade-card .upgrade-title-row .contact-service .contact-text.data-v-a0c82533 { color: #df8155; font-size: 22rpx; margin-left: 4rpx; } .upgrade-card .upgrade-title-row .contact-service uni-icons.data-v-a0c82533 { font-size: 20rpx !important; } .upgrade-card .form-item.data-v-a0c82533 { margin-bottom: 32rpx; } .upgrade-card .form-item .label.data-v-a0c82533 { font-size: 28rpx; color: #222; margin-bottom: 12rpx; display: block; } .upgrade-card .form-item .input.data-v-a0c82533 { width: 100%; height: 72rpx; background: transparent; padding: 0; font-size: 30rpx; border: none; border-bottom: 1rpx solid #eee; } .upgrade-card .form-item .input.data-v-a0c82533::-webkit-input-placeholder { color: #bbb; font-size: 30rpx; } .upgrade-card .form-item .input.data-v-a0c82533::placeholder { color: #bbb; font-size: 30rpx; } .upgrade-card .form-item .picker-value.data-v-a0c82533 { width: 100%; height: 72rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #eee; } .upgrade-card .form-item .picker-value .placeholder.data-v-a0c82533 { color: #bbb; } .upgrade-card .form-item .picker-value text.data-v-a0c82533 { font-size: 30rpx; color: #222; } .upgrade-card .desc-text.data-v-a0c82533 { font-size: 26rpx; color: #666; line-height: 1.6; margin-top: 32rpx; text-align: center; } .bottom-btns.data-v-a0c82533 { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 24rpx 32rpx calc(env(safe-area-inset-bottom) + 24rpx) 32rpx; background: #fff; z-index: 100; } .bottom-btns .btn.data-v-a0c82533 { flex: 1; height: 88rpx; border-radius: 44rpx; font-size: 32rpx; font-weight: bold; margin: 0 12rpx; border: none; box-shadow: none; } .bottom-btns .btn.gray.data-v-a0c82533 { background: linear-gradient(180deg, #f8f8f8 0%, #f2f4f6 100%); color: #222; border: 2rpx solid #e5e5e5; } .bottom-btns .btn.green.data-v-a0c82533 { background: linear-gradient(90deg, #b2f08d, #39e9d2); color: #222; border: none; } .picker-popup.data-v-a0c82533 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; } .picker-popup .popup-mask.data-v-a0c82533 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); } .picker-popup .popup-content.data-v-a0c82533 { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 24rpx 24rpx 0 0; padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx); } .picker-popup .popup-content .popup-header.data-v-a0c82533 { display: flex; align-items: center; padding: 30rpx; position: relative; justify-content: center; border-bottom: 1rpx solid #f5f5f5; } .picker-popup .popup-content .popup-header .title.data-v-a0c82533 { font-size: 32rpx; color: #333; font-weight: normal; } .picker-popup .popup-content .popup-header .reset.data-v-a0c82533 { position: absolute; left: 30rpx; font-size: 28rpx; color: #666; } .picker-popup .popup-content .picker-view.data-v-a0c82533 { width: 100%; height: 440rpx; background: #fff; } .picker-popup .popup-content .picker-view .picker-item.data-v-a0c82533 { height: 88rpx; line-height: 88rpx; text-align: center; font-size: 28rpx; color: #999; font-weight: normal; } .picker-popup .popup-content .confirm-btn.data-v-a0c82533 { margin: 30rpx; height: 88rpx; line-height: 88rpx; background: linear-gradient(90deg, #91dba5, #7ed4a6); color: #fff; font-size: 32rpx; border-radius: 44rpx; border: none; }