/** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ .vk-data-input-number-box[data-v-3517706a] { display: inline-flex; align-items: center; } .u-number-input[data-v-3517706a] { position: relative; text-align: center; padding: 0; margin: 0 0.1875rem; display: flex; align-items: center; justify-content: center; } .u-icon-plus[data-v-3517706a], .u-icon-minus[data-v-3517706a] { width: 1.875rem; display: flex; justify-content: center; align-items: center; } .u-icon-plus[data-v-3517706a] { border-radius: 0 0.25rem 0.25rem 0; } .u-icon-minus[data-v-3517706a] { border-radius: 0.25rem 0 0 0.25rem; } .u-icon-disabled[data-v-3517706a] { color: #c8c9cc !important; background: #f7f8fa !important; } .u-input-disabled[data-v-3517706a] { color: #c8c9cc !important; background-color: #f2f3f5 !important; } .num-btn[data-v-3517706a] { font-weight: 550; position: relative; top: -0.125rem; } /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ /* sku弹出层 */ .vk-data-goods-sku-popup[data-v-d1e15e37] { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 990; overflow: hidden; } .vk-data-goods-sku-popup.show[data-v-d1e15e37] { display: block; } .vk-data-goods-sku-popup.show .mask[data-v-d1e15e37] { animation: showPopup-d1e15e37 0.2s linear both; } .vk-data-goods-sku-popup.show .layer[data-v-d1e15e37] { animation: showLayer-d1e15e37 0.2s linear both; bottom: var(--window-bottom); } .vk-data-goods-sku-popup.hide .mask[data-v-d1e15e37] { animation: hidePopup-d1e15e37 0.2s linear both; } .vk-data-goods-sku-popup.hide .layer[data-v-d1e15e37] { animation: hideLayer-d1e15e37 0.2s linear both; } .vk-data-goods-sku-popup.none[data-v-d1e15e37] { display: none; } .vk-data-goods-sku-popup .mask[data-v-d1e15e37] { position: fixed; top: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0, 0, 0, 0.3); } .vk-data-goods-sku-popup .layer[data-v-d1e15e37] { display: flex; width: 100%; flex-direction: column; position: fixed; z-index: 99; bottom: 0; border-radius: 0.3125rem 0.3125rem 0 0; background-color: #fff; } .vk-data-goods-sku-popup .layer .specification-wrapper[data-v-d1e15e37] { width: 100%; padding: 0.9375rem 0.78125rem; box-sizing: border-box; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content[data-v-d1e15e37] { width: 100%; max-height: 28.125rem; min-height: 9.375rem; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content[data-v-d1e15e37]::-webkit-scrollbar { /*隐藏滚轮*/ display: none; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-header[data-v-d1e15e37] { width: 100%; display: flex; flex-direction: row; position: relative; margin-bottom: 1.25rem; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-header .specification-left[data-v-d1e15e37] { width: 5.625rem; height: 5.625rem; flex: 0 0 5.625rem; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-header .specification-left .product-img[data-v-d1e15e37] { width: 5.625rem; height: 5.625rem; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-header .specification-right[data-v-d1e15e37] { flex: 1; padding: 0 1.09375rem 0 0.875rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; font-weight: 500; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-header .specification-right .price-content[data-v-d1e15e37] { color: #fe560a; margin-bottom: 0.625rem; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-header .specification-right .price-content .sign[data-v-d1e15e37] { font-size: 0.875rem; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-header .specification-right .price-content .price[data-v-d1e15e37] { margin-left: 0.125rem; font-size: 1.5rem; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-header .specification-right .price-content .price2[data-v-d1e15e37] { margin-left: 0.125rem; font-size: 1.125rem; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-header .specification-right .inventory[data-v-d1e15e37] { font-size: 0.75rem; color: #999999; margin-bottom: 0.4375rem; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-header .specification-right .choose[data-v-d1e15e37] { font-size: 0.875rem; color: #333333; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-content[data-v-d1e15e37] { font-weight: 500; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-content .specification-item[data-v-d1e15e37] { margin-bottom: 1.25rem; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-content .specification-item[data-v-d1e15e37]:last-child { margin-bottom: 0; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-content .specification-item .item-title[data-v-d1e15e37] { margin-bottom: 0.625rem; font-size: 0.875rem; color: #999999; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-content .specification-item .item-wrapper[data-v-d1e15e37] { display: flex; flex-direction: row; flex-flow: wrap; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-content .specification-item .item-wrapper .item-content[data-v-d1e15e37] { display: inline-block; padding: 0.3125rem 1.09375rem; font-size: 0.75rem; border-radius: 0.3125rem; background-color: #ffffff; color: #333333; margin-right: 0.625rem; margin-bottom: 0.5rem; border: 1px solid #f4f4f4; box-sizing: border-box; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-content .specification-item .item-wrapper .item-content.actived[data-v-d1e15e37] { border-color: #fe560a; color: #fe560a; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-content .specification-item .item-wrapper .item-content.noactived[data-v-d1e15e37] { background-color: #f6f6f6; border-color: #f6f6f6; color: #c3c3c3; } .vk-data-goods-sku-popup .layer .specification-wrapper .specification-wrapper-content .specification-content .number-box-view[data-v-d1e15e37] { display: flex; padding-top: 0.9375rem; } .vk-data-goods-sku-popup .layer .specification-wrapper .close[data-v-d1e15e37] { position: absolute; top: 0.9375rem; right: 0.78125rem; width: 1.5625rem; height: 1.5625rem; text-align: center; line-height: 1.5625rem; } .vk-data-goods-sku-popup .layer .specification-wrapper .close .close-item[data-v-d1e15e37] { width: 1.5625rem; height: 1.5625rem; } .vk-data-goods-sku-popup .layer .btn-wrapper[data-v-d1e15e37] { display: flex; width: 100%; height: 3.75rem; flex: 0 0 3.75rem; align-items: center; justify-content: space-between; padding: 0 0.8125rem; box-sizing: border-box; } .vk-data-goods-sku-popup .layer .btn-wrapper .layer-btn[data-v-d1e15e37] { width: 10.46875rem; height: 2.375rem; border-radius: 1.1875rem; color: #fff; line-height: 2.375rem; text-align: center; font-weight: 500; font-size: 0.875rem; } .vk-data-goods-sku-popup .layer .btn-wrapper .layer-btn.add-cart[data-v-d1e15e37] { background: #ffbe46; } .vk-data-goods-sku-popup .layer .btn-wrapper .layer-btn.buy[data-v-d1e15e37] { background: #fe560a; } .vk-data-goods-sku-popup .layer .btn-wrapper .sure[data-v-d1e15e37] { width: 21.8125rem; height: 2.125rem; border-radius: 1.1875rem; color: #fff; line-height: 2.125rem; text-align: center; font-weight: 500; font-size: 0.875rem; background: #fe560a; } .vk-data-goods-sku-popup .layer .btn-wrapper .sure.add-cart[data-v-d1e15e37] { background: #ff9402; } .vk-data-goods-sku-popup .layer .btn-wrapper.safe-area-inset-bottom[data-v-d1e15e37] { padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } @keyframes showPopup-d1e15e37 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes hidePopup-d1e15e37 { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes showLayer-d1e15e37 { 0% { transform: translateY(120%); } 100% { transform: translateY(0%); } } @keyframes hideLayer-d1e15e37 { 0% { transform: translateY(0); } 100% { transform: translateY(120%); } } /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ .uni-popup[data-v-7db519c7] { position: fixed; z-index: 99; } .uni-popup.top[data-v-7db519c7], .uni-popup.left[data-v-7db519c7], .uni-popup.right[data-v-7db519c7] { top: 0; } .uni-popup .uni-popup__wrapper[data-v-7db519c7] { display: block; position: relative; /* iphonex 等安全区设置,底部安全区适配 */ } .uni-popup .uni-popup__wrapper.left[data-v-7db519c7], .uni-popup .uni-popup__wrapper.right[data-v-7db519c7] { padding-top: 0; flex: 1; } .fixforpc-z-index[data-v-7db519c7] { z-index: 999; } .fixforpc-top[data-v-7db519c7] { top: 0; } /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ .address-panel[data-v-4157c245] { padding: 0 0.9375rem; border-radius: 0.3125rem 0.3125rem 0 0; position: relative; background-color: #fff; } .title[data-v-4157c245] { line-height: 1; padding: 1.25rem 0; text-align: center; font-size: 1rem; font-weight: normal; border-bottom: 0.03125rem solid #ddd; color: #444; } .close[data-v-4157c245] { position: absolute; right: 0.75rem; top: 0.75rem; } .content[data-v-4157c245] { min-height: 9.375rem; max-height: 16.875rem; overflow: auto; padding: 0.625rem; } .content .item[data-v-4157c245] { padding: 0.9375rem 1.5625rem 0.9375rem 1.875rem; background-size: 1.25rem; background-repeat: no-repeat; background-position: 0 center; background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png); position: relative; } .content .icon[data-v-4157c245] { color: #999; font-size: 1.25rem; transform: translateY(-50%); position: absolute; top: 50%; right: 0; } .content .icon-checked[data-v-4157c245] { color: #27ba9b; } .content .icon-ring[data-v-4157c245] { color: #444; } .content .user[data-v-4157c245] { font-size: 0.875rem; color: #444; font-weight: 500; } .content .address[data-v-4157c245] { font-size: 0.8125rem; color: #666; } .footer[data-v-4157c245] { display: flex; justify-content: space-between; padding: 0.625rem 0 1.25rem; font-size: 0.875rem; color: #444; } .footer .button[data-v-4157c245] { flex: 1; height: 2.25rem; text-align: center; line-height: 2.25rem; margin: 0 0.625rem; color: #fff; border-radius: 2.25rem; } .footer .primary[data-v-4157c245] { color: #fff; background-color: #27ba9b; } .footer .secondary[data-v-4157c245] { background-color: #ffa868; } /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ .service-panel[data-v-7a45ec41] { padding: 0 0.9375rem; border-radius: 0.3125rem 0.3125rem 0 0; position: relative; background-color: #fff; } .title[data-v-7a45ec41] { line-height: 1; padding: 1.25rem 0; text-align: center; font-size: 1rem; font-weight: normal; border-bottom: 0.03125rem solid #ddd; color: #444; } .close[data-v-7a45ec41] { position: absolute; right: 0.75rem; top: 0.75rem; } .content[data-v-7a45ec41] { padding: 0.625rem 0.625rem 3.125rem 0.625rem; } .content .item[data-v-7a45ec41] { margin-top: 0.625rem; } .content .dt[data-v-7a45ec41] { margin-bottom: 0.3125rem; font-size: 0.875rem; color: #333; font-weight: 500; position: relative; } .content .dt[data-v-7a45ec41]::before { content: ""; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background-color: #eaeaea; transform: translateY(-50%); position: absolute; top: 50%; left: -0.625rem; } .content .dd[data-v-7a45ec41] { line-height: 1.6; font-size: 0.8125rem; color: #999; } /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ body { height: 100%; overflow: hidden; display: flex; flex-direction: column; } .viewport { background-color: #f4f4f4; } .panel { margin-top: 0.625rem; background-color: #fff; } .panel .title { display: flex; justify-content: space-between; align-items: center; height: 2.8125rem; line-height: 1; padding: 0.9375rem 1.875rem 0.9375rem 0.1875rem; position: relative; } .panel .title uni-text { padding-left: 0.3125rem; font-size: 0.875rem; color: #333; font-weight: 600; border-left: 0.125rem solid #27ba9b; } .panel .title uni-navigator { font-size: 0.75rem; color: #666; } .arrow::after { position: absolute; top: 50%; right: 0.9375rem; content: "\e6c2"; color: #ccc; font-family: "erabbit" !important; font-size: 1rem; transform: translateY(-50%); } /* 商品信息 */ .goods { background-color: #fff; } .goods .preview { height: 23.4375rem; position: relative; } .goods .preview .image { width: 23.4375rem; height: 23.4375rem; } .goods .preview .indicator { height: 1.25rem; padding: 0 0.75rem; line-height: 1.25rem; border-radius: 0.9375rem; color: #fff; font-family: Arial, Helvetica, sans-serif; background-color: rgba(0, 0, 0, 0.3); position: absolute; bottom: 0.9375rem; right: 0.9375rem; } .goods .preview .indicator .current { font-size: 0.8125rem; } .goods .preview .indicator .split { font-size: 0.75rem; margin: 0 0.03125rem 0 0.0625rem; } .goods .preview .indicator .total { font-size: 0.75rem; } .goods .meta { position: relative; border-bottom: 0.03125rem solid #eaeaea; } .goods .meta .price { height: 4.0625rem; padding: 0.78125rem 0.9375rem 0; color: #fff; font-size: 1.0625rem; box-sizing: border-box; background-color: #35c8a9; } .goods .meta .number { font-size: 1.75rem; } .goods .meta .brand { width: 5rem; height: 2.5rem; overflow: hidden; position: absolute; top: 0.8125rem; right: 0.9375rem; } .goods .meta .name { max-height: 2.75rem; line-height: 1.4; margin: 0.625rem; font-size: 1rem; color: #333; } .goods .meta .desc { line-height: 1; padding: 0 0.625rem 0.9375rem; font-size: 0.75rem; color: #cf4444; } .goods .action { padding-left: 0.625rem; } .goods .action .item { height: 2.8125rem; padding-right: 1.875rem; border-bottom: 0.03125rem solid #eaeaea; font-size: 0.8125rem; color: #333; position: relative; display: flex; align-items: center; } .goods .action .item:last-child { border-bottom: 0 none; } .goods .action .label { width: 1.875rem; color: #898b94; margin: 0 0.5rem 0 0.3125rem; } .goods .action .text { flex: 1; -webkit-line-clamp: 1; } /* 商品详情 */ .detail { padding-left: 0.625rem; } .detail .content { margin-left: -0.625rem; } .detail .content .image { width: 100%; } .detail .properties { padding: 0 0.625rem; margin-bottom: 0.9375rem; } .detail .properties .item { display: flex; line-height: 2; padding: 0.3125rem; font-size: 0.8125rem; color: #333; border-bottom: 0.03125rem dashed #ccc; } .detail .properties .label { width: 6.25rem; } .detail .properties .value { flex: 1; } /* 同类推荐 */ .similar .content { padding: 0 0.625rem 0.625rem; background-color: #f4f4f4; display: flex; flex-wrap: wrap; } .similar .content .goods { width: 10.625rem; padding: 0.75rem 0.625rem 0.625rem; margin: 0.625rem 0.21875rem; border-radius: 0.3125rem; background-color: #fff; } .similar .content .image { width: 9.375rem; height: 8.125rem; } .similar .content .name { height: 2.5rem; margin: 0.3125rem 0; font-size: 0.8125rem; color: #262626; } .similar .content .price { line-height: 1; font-size: 0.625rem; color: #cf4444; } .similar .content .number { font-size: 0.8125rem; margin-left: 0.0625rem; } .similar uni-navigator:nth-child(even) { margin-right: 0; } /* 底部工具栏 */ .toolbar { position: fixed; left: 0; right: 0; bottom: calc((var(--window-bottom))); z-index: 1; background-color: #fff; height: 3.125rem; padding: 0 0.625rem; border-top: 0.03125rem solid #eaeaea; display: flex; justify-content: space-between; align-items: center; box-sizing: content-box; } .toolbar .buttons { display: flex; } .toolbar .buttons > uni-view { width: 6.875rem; text-align: center; line-height: 2.25rem; font-size: 0.8125rem; color: #fff; border-radius: 2.25rem; } .toolbar .buttons .addcart { background-color: #ffa868; } .toolbar .buttons .payment { background-color: #27ba9b; margin-left: 0.625rem; } .toolbar .icons { padding-right: 0.625rem; display: flex; align-items: center; flex: 1; } .toolbar .icons .navigator-wrap, .toolbar .icons .icons-button { flex: 1; text-align: center; line-height: 1.4; padding: 0; margin: 0; border-radius: 0; font-size: 0.625rem; color: #333; background-color: #fff; } .toolbar .icons .navigator-wrap::after, .toolbar .icons .icons-button::after { border: none; } .toolbar .icons uni-text { display: block; font-size: 1.0625rem; }