/** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ /*自定义主题色 */ .content { font-family: PingFang SC; } .share-box { position: fixed; right: 24rpx; top: 70%; z-index: 99; width: 112rpx; height: 112rpx; border-radius: 16rpx 16rpx 16rpx 16rpx; border: 1rpx solid #EFF3F7; background-color: #FFFFFF; } .shop-banner { height: 756rpx; background-color: #FFFFFF; position: relative; } .shop-banner .swiper-item { box-sizing: border-box; position: relative; } .shop-banner .swiper, .shop-banner .swiper-item, .shop-banner .swiper-item image { width: 100%; height: 100%; } .shop-banner .banner-mask { width: 100%; height: 44rpx; position: absolute; left: 0; bottom: 0; z-index: 9; background-size: 20rpx 44rpx; background-repeat: repeat-x; } .shop-banner .num-box { width: 80rpx; height: 40rpx; line-height: 40rpx; text-align: center; font-size: 24rpx; color: #FFFFFF; background: rgba(0, 0, 0, 0.7); border-radius: 20rpx; position: absolute; right: 40rpx; bottom: 34rpx; z-index: 10; } .shop-banner .cf-box { position: absolute; z-index: 10; left: 0; right: 0; top: calc(50% - 200rpx); bottom: calc(50% - 200rpx); background-color: rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(2rpx); backdrop-filter: blur(2rpx); /* 背景模糊度 */ display: flex; flex-direction: column; flex: 1; justify-content: center; align-items: center; color: #EDEEEF; } .shop-banner .cf-box .title { font-size: 40rpx; font-weight: bold; } .shop-banner .cf-box .subTitle { font-size: 28rpx; font-weight: bold; margin-top: 10rpx; } .guige { padding: 24rpx; border-radius: 16rpx; background: #fff; width: auto; font-size: 24rpx; color: #222426; margin: 24rpx; } .guige .guige-gg .gg-text { color: #898E91; margin-right: 40rpx; } .guige .safe-box { display: flex; align-items: center; padding-top: 24rpx; font-size: 24rpx; color: #222426; } .guige .safe-box .text { color: #999999; margin-right: 40rpx; } .guige .safe-box .box { display: flex; align-items: center; } .guige .safe-box .box image { width: 28rpx; height: 28rpx; margin-right: 10rpx; } .guige .safe-box .box view { display: flex; align-items: center; margin-right: 40rpx; } .guige .safe-box .box view:last-child { margin-right: 0; } .guige .safe-box .box view:last-child image { margin-right: 0; } .guige .popup-box { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 999; display: flex; justify-content: center; align-items: flex-end; } .guige .popup-box .info-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } .guige .popup-box .info-form { z-index: 1000; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 30rpx 60rpx; background: #FFFFFF; border-radius: 40rpx; } .guige .popup-box .info-form .top { display: flex; } .guige .popup-box .info-form .line { border-top: 1px solid #F1F1F1; width: 100%; } .guige .popup-box .info-form .title { padding: 30rpx; display: flex; justify-content: center; align-items: center; font-size: 36rpx; font-weight: bold; line-height: 44rpx; color: #222222; } .guige .popup-box .info-form .close { padding-top: 30rpx; position: absolute; right: 30rpx; } .guige .popup-box .info-form .form-box { width: 100%; padding-top: 30rpx; } .guige .popup-box .info-form .form-box .form-item2 { padding-bottom: 30rpx; } .guige .popup-box .info-form .form-box .form-item2 .form-item-box { display: flex; align-items: center; } .guige .popup-box .info-form .form-box .form-item2 .form-item-box text { font-size: 28rpx; color: #222426; margin-left: 10rpx; font-weight: bold; } .guige .popup-box .info-form .form-box .form-item2 .form-content { font-size: 24rpx; text-align: left; color: #626468; margin-top: 20rpx; line-height: 40rpx; } .guige .popup-box .info-form .btns { width: 100%; height: 120rpx; padding: 20rpx 30rpx; display: flex; align-items: center; justify-content: center; } .guige .popup-box .info-form .btns .sub-btn { width: 100%; height: 88rpx; line-height: 88rpx; text-align: center; font-size: 36rpx; font-weight: bold; color: #FFFFFF; background: #008FD3; border-radius: 44rpx; } .det-info { background: #FFFFFF; padding: 24rpx; margin: 24rpx; border-radius: 16rpx; } .det-info .price-box { display: flex; align-items: flex-end; justify-content: space-between; } .det-info .price-box .price { display: flex; align-items: flex-end; } .det-info .price-box .price .label { font-weight: 500; font-size: 24rpx; color: #FF5030; line-height: 1.3; margin-right: 10rpx; } .det-info .price-box .price .unit { font-size: 26rpx; font-weight: bold; color: #FF6633; line-height: 1.3; } .det-info .price-box .price .num { font-size: 48rpx; font-weight: bold; color: #FF5030; margin-right: 20rpx; line-height: 1; } .det-info .price-box .price .old { font-size: 24rpx; font-family: PingFang SC; font-weight: 400; color: #898E91; margin-left: 10rpx; } .det-info .price-box .spec { font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #999999; line-height: 36rpx; } .det-info .intro { font-size: 26rpx; font-weight: 500; color: #999999; line-height: 36rpx; padding: 18rpx 0 23rpx; } .det-info .intro-box { display: flex; justify-content: space-between; align-items: center; padding: 20rpx; border-radius: 16rpx; background: #F5F7FA; width: auto; } .det-info .intro-box .title-1 { font-size: 24rpx; color: #222426; font-weight: bold; width: 40%; text-align: center; } .det-info .intro-box .title-2 { font-size: 24rpx; color: #222426; font-weight: bold; display: block; } .det-info .intro-box .intro-text2 { width: 50%; } .det-info .intro-box .intro-content { color: #898E91; font-size: 24rpx; } .det-info .intro-box .line { width: 1px; height: 40rpx; background: #EDEEEF; margin: 0 20rpx; } .det-info .safe-box { display: flex; align-items: center; padding-top: 24rpx; } .det-info .safe-box image { width: 20rpx; height: 24rpx; margin-right: 20rpx; } .det-info .safe-box .text { font-size: 22rpx; font-weight: 500; color: #999999; line-height: 1; } .det-info .safe-box .line { width: 1px; height: 23rpx; background: #EDEEEF; margin: 0 20rpx; } .inventor { height: 88rpx; padding: 0 39rpx 0 30rpx; margin-top: 10rpx; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; } .inventor .left { display: flex; align-items: center; } .inventor .left .head-box { margin-right: 27rpx; display: flex; align-items: center; } .inventor .left .head-box .head { width: 48rpx; height: 48rpx; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px #fff; margin-right: -10rpx; } .inventor .left .head-box .head image { width: 100%; height: 100%; } .inventor .left .num-box { font-size: 24rpx; font-weight: 500; color: #999999; } .inventor .left .num-box .text { font-size: 24rpx; font-weight: 500; color: #999999; } .inventor .right { font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #999999; } .inventor .right .text { font-size: 24rpx; font-weight: 500; color: #666666; } .effect { box-sizing: border-box; padding: 20rpx 30rpx; background: #FFFFFF; font-size: 28rpx; font-weight: 500; color: #666666; line-height: 1.8; margin-top: 10rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .effect .label { font-size: 28rpx; font-weight: 500; color: #111111; line-height: 1.8; } .shop-box { display: flex; justify-content: space-between; align-items: center; background: #FFFFFF; font-size: 28rpx; font-weight: 500; color: #666666; line-height: 1.8; padding: 24rpx; margin: 24rpx; border-radius: 16rpx; } .shop-box .logo { flex-shrink: 0; width: 100rpx; height: 100rpx; border-radius: 16rpx; overflow: hidden; } .shop-box .logo image { width: 100%; height: 100%; } .shop-box .txtBox { flex: 1; overflow: hidden; margin: 0 30rpx; display: flex; flex-direction: column; justify-content: space-between; } .shop-box .name { font-size: 32rpx; font-weight: 600; color: #333; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .shop-box .desc { font-size: 24rpx; font-weight: normal; color: #222426; text-align: left; } .shop-box .goShop { flex-shrink: 0; width: 96rpx; height: 56rpx; background: #fff; border-radius: 30rpx; color: #008FD3; font-size: 24rpx; margin: 0; border: 1px solid #008FD3; padding: 0; line-height: 56rpx; display: flex; align-items: center; justify-content: center; } .tech-pBox { box-sizing: border-box; padding: 0rpx 0rpx; background: #FFFFFF; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: #666666; } .tech-pBox .label { font-weight: bold; font-size: 26rpx; color: #222426; text-align: left; padding: 24rpx 0; } .tech-pBox .item { border: 1px solid #fff; border-radius: 12rpx; padding: 30rpx; border: 1px solid #EFF3F7; display: flex; align-items: center; margin-bottom: 20rpx; } .tech-pBox .item .price { font-size: 42rpx; font-weight: bold; color: #FF6633; display: flex; flex: 1; } .tech-pBox .item .price b { font-size: 30rpx; line-height: 46rpx; margin-top: 14rpx; } .tech-pBox .item .num { font-size: 28rpx; font-weight: normal; color: #999; width: 200rpx; text-align: right; } .tech-pBox .item .name { max-width: 60%; margin-right: 10rpx; font-size: 28rpx; font-weight: normal; color: #333; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tech-pBox .item image { width: 100rpx; height: 100rpx; border-radius: 50%; margin-right: 30rpx; } .tech-pBox .item .tech-right { flex: 1; } .tech-pBox .item .tech-right-bottom { color: #898E91; font-size: 24rpx; } .tech-pBox .item .tech-right-top { display: flex; align-items: flex-end; margin-bottom: 10rpx; } .tech-pBox .item .tech-right-top .title-1 { font-size: 32rpx; color: #222426; margin-right: 14rpx; } .tech-pBox .item .tech-right-top .title-2 { font-weight: 400; font-size: 24rpx; color: #222426; } .tech-pBox .hover { border: 1rpx solid #008FD3; background: #F0FAFF; } .tech-pBox .shop-morebtn { margin-top: 14rpx; box-sizing: border-box; padding: 12rpx 30rpx; font-size: 28rpx; font-weight: 500; color: #111111; background: #F7F7F7; border-radius: 32rpx; text-align: center; } .tech-pBox .shop-morebtn text { color: #999; } .shop-pBox { box-sizing: border-box; padding: 0rpx 0rpx; background: #FFFFFF; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: #666666; } .shop-pBox .item { border: 1px solid #fff; border-radius: 12rpx; padding: 18rpx 20rpx 24rpx; } .shop-pBox .item .price { font-size: 42rpx; font-weight: bold; color: #FF6633; display: flex; flex: 1; } .shop-pBox .item .price .strong { font-size: 30rpx; line-height: 46rpx; margin-top: 14rpx; } .shop-pBox .item .num { font-size: 28rpx; font-weight: normal; color: #999; width: 200rpx; text-align: right; } .shop-pBox .item .name { max-width: 60%; margin-right: 10rpx; font-size: 28rpx; font-weight: normal; color: #333; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .shop-pBox .hover { border: 1rpx solid #FF6633; } .shop-pBox .shop-morebtn { margin-top: 14rpx; box-sizing: border-box; padding: 12rpx 30rpx; font-size: 28rpx; font-weight: 500; color: #111111; background: #F7F7F7; border-radius: 32rpx; text-align: center; } .shop-pBox .shop-morebtn text { color: #999; } .shop-pBox-name { display: flex; align-items: center; justify-content: flex-start; } .storepopup { padding: 40rpx 20rpx 20rpx 20rpx; } .storepopup .storepopup-title { text-align: center; margin-bottom: 30rpx; position: relative; } .storepopup .storepopup-title .close-icon { width: 40rpx; height: 40rpx; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); } .storepopup .storepopup-box { height: 60vh; } .det-box { margin-top: 10rpx; background-color: #FFFFFF; padding: 24rpx; margin: 24rpx 24rpx 175rpx 24rpx; border-radius: 16rpx; } .det-box .title { font-size: 32rpx; font-weight: bold; color: #333333; line-height: 60rpx; margin-bottom: 30rpx; padding-bottom: 24rpx; border-bottom: 1px solid #ECECEC; } .det-box .det-title { display: flex; align-items: center; justify-content: space-between; } .det-box .det-title .tt { font-size: 28rpx; font-weight: bold; color: #222426; } .det-box .det-right { display: flex; font-size: 24rpx; color: #898E91; align-items: center; } .det-box .det-table { width: 100%; margin: 24rpx 0; background: #FFFFFF; border-radius: 16rpx 16rpx 16rpx 16rpx; border: 1rpx solid #ECECEC; overflow: hidden; font-size: 24rpx; } .det-box .det-table .row { display: table-row; } .det-box .det-table .row:last-child .cell-1, .det-box .det-table .row:last-child .cell-2 { border-bottom: 0; } .det-box .det-table .cell { display: table-cell; padding: 24rpx; } .det-box .det-table .cell.cell-1 { width: 30%; text-align: center; color: #626468; background: #F5F7FA; border-right: 1rpx solid #ECECEC; border-bottom: 1rpx solid #ECECEC; } .det-box .det-table .cell.cell-2 { color: #222426; text-align: center; border-bottom: 1rpx solid #ECECEC; } .btn-foot { box-sizing: border-box; width: 100%; height: 151rpx; background: #FFFFFF; padding: 0 24rpx; display: flex; align-items: center; justify-content: space-between; position: fixed; left: 0; bottom: 0; z-index: 99; } .btn-foot .menu-box { display: flex; align-items: center; } .btn-foot .menu-box .item { display: flex; align-items: center; flex-direction: column; margin-right: 48rpx; } .btn-foot .menu-box .item:last-child { margin-right: 0; } .btn-foot .menu-box .item image { width: 40rpx; height: 40rpx; margin-bottom: 10rpx; } .btn-foot .menu-box .item .label { font-size: 20rpx; font-weight: 500; color: #626468; text-align: center; } .btn-foot .btn-box { display: flex; align-items: center; } .btn-foot .btn-box .btn { width: 200rpx; height: 88rpx; line-height: 88rpx; text-align: center; border-radius: 44rpx; margin-left: 20rpx; font-size: 28rpx; font-weight: bold; color: #FFFFFF; } .btn-foot .btn-box .btn:first-child { margin-left: 0; } .btn-foot .btn-box .btn.cart { background: #FF5030; } .btn-foot .btn-box .btn.buy { background: #008FD3; } .product-spec { padding-bottom: 30rpx; } .product-spec .pro-info { display: flex; align-items: center; } .product-spec .pro-info .img-box { width: 200rpx; height: 200rpx; background: #FFFFFF; border-radius: 16rpx; overflow: hidden; margin-right: 30rpx; } .product-spec .pro-info .img-box image { width: 100%; height: 100%; } .product-spec .pro-info .info-text { height: 200rpx; display: flex; flex-direction: column; justify-content: space-between; } .product-spec .pro-info .info-text .info-title { font-family: PingFang SC; font-weight: 600; font-size: 28rpx; color: #222426; text-align: left; } .product-spec .pro-info .info-text .price { display: flex; align-items: flex-end; } .product-spec .pro-info .info-text .price .label { font-weight: 500; font-size: 24rpx; color: #FF5030; line-height: 1.3; margin-right: 10rpx; } .product-spec .pro-info .info-text .price .unit { font-size: 32rpx; font-weight: bold; color: #FF6633; line-height: 1.2; margin-right: 10rpx; } .product-spec .pro-info .info-text .price .num { font-size: 50rpx; font-weight: bold; color: #FF6633; line-height: 1; } .product-spec .pro-info .info-text .desc-box { display: flex; flex-direction: column; padding-bottom: 9rpx; } .product-spec .pro-info .info-text .desc-box .text { font-size: 26rpx; font-weight: 500; color: #999999; margin-top: 27rpx; line-height: 1; } .product-spec .pro-info .info-text .desc-box .text:first-child { margin-top: 0; } .product-spec .spec-box { padding-top: 50rpx; } .product-spec .spec-box .title { font-size: 26rpx; font-weight: bold; color: #111111; line-height: 1; } .product-spec .spec-box .spec-list { display: flex; flex-wrap: wrap; margin-top: 30rpx; } .product-spec .spec-box .spec-list .item { box-sizing: border-box; height: 64rpx; padding: 0 30rpx; line-height: 64rpx; font-size: 24rpx; font-weight: 500; color: #111111; background: #F7F7F7; border: 1px solid #F7F7F7; border-radius: 32rpx; margin-right: 20rpx; margin-bottom: 30rpx; } .product-spec .spec-box .spec-list .item.active { background: #F1FFFE; border: 1px solid #008FD3; color: #008FD3; } .product-spec .price-num { display: flex; align-items: center; justify-content: space-between; margin-top: 14rpx; } .product-spec .price-num .label { font-size: 26rpx; font-weight: bold; color: #111111; } .product-spec .sub-btn { width: 100%; height: 88rpx; line-height: 88rpx; text-align: center; font-size: 32rpx; font-weight: bold; color: #FFFFFF; background: #008FD3; border-radius: 44rpx; margin-top: 30rpx; } .contact-btn { display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 9999; } .loadding { background-color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } .loadding image { border-radius: 50%; animation: load linear 1s infinite; width: 120rpx; height: 120rpx; } .loadding .text { font-size: 28rpx; margin-top: 20rpx; } .form-item { padding: 30rpx 0; display: flex; align-items: flex-start; border-bottom: 1px solid #F1F1F1; } .form-item:last-child { border-bottom: none; } .form-item .label { width: 180rpx; text-align: left; font-size: 30rpx; line-height: 44rpx; font-weight: 500; color: #222222; flex-shrink: 0; } .form-item input { text-align: left; } .form-item .form-input { font-size: 30rpx; font-weight: 500; color: #999999; text-align: left; } .form-item .form-textarea { font-size: 30rpx; color: #999999; height: 100rpx; padding: 4rpx 0; } .form-item .birth-picker { flex: 1; display: flex; align-items: center; } .form-item .birth-picker .right-box { width: 100%; display: flex; align-items: center; } .form-item .birth-picker .right-box .input-box { width: 470rpx; } .form-item .birth-picker .right-box .arrow { width: 13rpx; height: 23rpx; margin-left: 20rpx; }