/** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ .uni-countdown[data-v-342c352a] { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .uni-countdown__splitor[data-v-342c352a] { margin: 0 2px; font-size: 14px; color: #333; } .uni-countdown__number[data-v-342c352a] { border-radius: 3px; text-align: center; font-size: 14px; } /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ [data-v-e94a02da]:host { display: block; } /* 分类标题 */ .caption[data-v-e94a02da] { display: flex; justify-content: center; line-height: 1; padding: 1.125rem 0 1.25rem; font-size: 1rem; color: #262626; } .caption .text[data-v-e94a02da] { display: flex; justify-content: center; align-items: center; padding: 0 0.875rem 0 0.9375rem; } .caption .text[data-v-e94a02da]::before, .caption .text[data-v-e94a02da]::after { content: ""; width: 0.625rem; height: 0.625rem; background-image: url(../../static/images/bubble.png); background-size: contain; margin: 0 0.3125rem; } /* 猜你喜欢 */ .guess[data-v-e94a02da] { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 0.625rem; } .guess .guess-item[data-v-e94a02da] { width: 10.78125rem; padding: 0.75rem 0.625rem 0.625rem; margin-bottom: 0.625rem; border-radius: 0.3125rem; overflow: hidden; background-color: #fff; } .guess .image[data-v-e94a02da] { width: 9.5rem; height: 9.5rem; } .guess .name[data-v-e94a02da] { height: 2.34375rem; margin: 0.3125rem 0; font-size: 0.8125rem; color: #262626; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .guess .price[data-v-e94a02da] { line-height: 1; padding-top: 0.125rem; color: #cf4444; font-size: 0.8125rem; } .guess .small[data-v-e94a02da] { font-size: 80%; } .loading-text[data-v-e94a02da] { text-align: center; font-size: 0.875rem; color: #666; padding: 0.625rem 0; } /** * 这里是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; } .sk-transparent[data-v-b1ebad5e] { color: transparent !important; } .sk-text-14-2857-107[data-v-b1ebad5e] { background-image: linear-gradient( transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0% ) !important; background-size: 100% 1.4rem; position: relative !important; } .sk-text[data-v-b1ebad5e] { background-origin: content-box !important; background-clip: content-box !important; background-color: transparent !important; color: transparent !important; background-repeat: repeat-y !important; } .sk-text-0-0000-826[data-v-b1ebad5e] { background-image: linear-gradient( transparent 0%, #eeeeee 0%, #eeeeee 100%, transparent 0% ) !important; background-size: 100% 1.125rem; position: relative !important; } .sk-text-14-2857-512[data-v-b1ebad5e] { background-image: linear-gradient( transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0% ) !important; background-size: 100% 1.1375rem; position: relative !important; } .sk-text-14-2857-990[data-v-b1ebad5e] { background-image: linear-gradient( transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0% ) !important; background-size: 100% 1.05rem; position: relative !important; } .sk-text-14-2857-630[data-v-b1ebad5e] { background-image: linear-gradient( transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0% ) !important; background-size: 100% 1.1375rem; position: relative !important; } .sk-text-14-2857-606[data-v-b1ebad5e] { background-image: linear-gradient( transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0% ) !important; background-size: 100% 1.05rem; position: relative !important; } .sk-text-14-2857-474[data-v-b1ebad5e] { background-image: linear-gradient( transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0% ) !important; background-size: 100% 1.1375rem; position: relative !important; } .sk-text-22-2222-237[data-v-b1ebad5e] { background-image: linear-gradient( transparent 22.2222%, #eeeeee 0%, #eeeeee 77.7778%, transparent 0% ) !important; background-size: 100% 1.35rem; position: relative !important; } .sk-opacity[data-v-b1ebad5e] { opacity: 0 !important; } .sk-text-14-2857-102[data-v-b1ebad5e] { background-image: linear-gradient( transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0% ) !important; background-size: 100% 1.05rem; position: relative !important; } .sk-text-14-2857-969[data-v-b1ebad5e] { background-image: linear-gradient( transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0% ) !important; background-size: 100% 1.1375rem; position: relative !important; } .sk-text-22-2222-510[data-v-b1ebad5e] { background-image: linear-gradient( transparent 22.2222%, #eeeeee 0%, #eeeeee 77.7778%, transparent 0% ) !important; background-size: 100% 1.35rem; position: relative !important; } .sk-text-14-2857-431[data-v-b1ebad5e] { background-image: linear-gradient( transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0% ) !important; background-size: 100% 1.05rem; position: relative !important; } .sk-text-14-2857-130[data-v-b1ebad5e] { background-image: linear-gradient( transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0% ) !important; background-size: 100% 1.1375rem; position: relative !important; } .sk-text-22-2222-110[data-v-b1ebad5e] { background-image: linear-gradient( transparent 22.2222%, #eeeeee 0%, #eeeeee 77.7778%, transparent 0% ) !important; background-size: 100% 1.35rem; position: relative !important; } .sk-text-14-2857-273[data-v-b1ebad5e] { background-image: linear-gradient( transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0% ) !important; background-size: 100% 1.05rem; position: relative !important; } .sk-text-0-0000-302[data-v-b1ebad5e] { background-image: linear-gradient( transparent 0%, #eeeeee 0%, #eeeeee 100%, transparent 0% ) !important; background-size: 100% 0.8125rem; position: relative !important; } .sk-text-0-0000-998[data-v-b1ebad5e] { background-image: linear-gradient( transparent 0%, #eeeeee 0%, #eeeeee 100%, transparent 0% ) !important; background-size: 100% 0.8125rem; position: relative !important; } .sk-text-0-0000-912[data-v-b1ebad5e] { background-image: linear-gradient( transparent 0%, #eeeeee 0%, #eeeeee 100%, transparent 0% ) !important; background-size: 100% 0.8125rem; position: relative !important; } .sk-text-0-0000-208[data-v-b1ebad5e] { background-image: linear-gradient( transparent 0%, #eeeeee 0%, #eeeeee 100%, transparent 0% ) !important; background-size: 100% 0.8125rem; position: relative !important; } .sk-text-0-0000-538[data-v-b1ebad5e] { background-image: linear-gradient( transparent 0%, #eeeeee 0%, #eeeeee 100%, transparent 0% ) !important; background-size: 100% 0.8125rem; position: relative !important; } .sk-text-0-0000-858[data-v-b1ebad5e] { background-image: linear-gradient( transparent 0%, #eeeeee 0%, #eeeeee 100%, transparent 0% ) !important; background-size: 100% 1.125rem; position: relative !important; } .sk-text-0-0000-66[data-v-b1ebad5e] { background-image: linear-gradient( transparent 0%, #eeeeee 0%, #eeeeee 100%, transparent 0% ) !important; background-size: 100% 0.9375rem; position: relative !important; } .sk-text-0-0000-522[data-v-b1ebad5e] { background-image: linear-gradient( transparent 0%, #eeeeee 0%, #eeeeee 100%, transparent 0% ) !important; background-size: 100% 0.625rem; position: relative !important; } .sk-text-0-0000-353[data-v-b1ebad5e] { background-image: linear-gradient( transparent 0%, #eeeeee 0%, #eeeeee 100%, transparent 0% ) !important; background-size: 100% 0.8125rem; position: relative !important; } .sk-text-0-0000-375[data-v-b1ebad5e] { background-image: linear-gradient( transparent 0%, #eeeeee 0%, #eeeeee 100%, transparent 0% ) !important; background-size: 100% 1rem; position: relative !important; } .sk-text-31-9444-411[data-v-b1ebad5e] { background-image: linear-gradient( transparent 31.9444%, #eeeeee 0%, #eeeeee 68.0556%, transparent 0% ) !important; background-size: 100% 2.25rem; position: relative !important; } .sk-image[data-v-b1ebad5e] { background: #efefef !important; } .sk-pseudo[data-v-b1ebad5e]::before, .sk-pseudo[data-v-b1ebad5e]::after { background: #efefef !important; background-image: none !important; color: transparent !important; border-color: transparent !important; } .sk-pseudo-rect[data-v-b1ebad5e]::before, .sk-pseudo-rect[data-v-b1ebad5e]::after { border-radius: 0 !important; } .sk-pseudo-circle[data-v-b1ebad5e]::before, .sk-pseudo-circle[data-v-b1ebad5e]::after { border-radius: 50% !important; } .sk-container[data-v-b1ebad5e] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: transparent; } /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ body { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .navbar { width: 23.4375rem; color: #000; position: fixed; top: 0; left: 0; z-index: 9; /* background-color: #f8f8f8; */ background-color: transparent; } .navbar .wrap { position: relative; } .navbar .wrap .title { height: 44px; display: flex; justify-content: center; align-items: center; font-size: 1rem; /* color: #000; */ color: transparent; } .navbar .wrap .back { position: absolute; left: 0; height: 44px; width: 44px; font-size: 1.375rem; display: flex; align-items: center; justify-content: center; /* color: #000; */ color: #fff; } .viewport { background-color: #f7f7f8; } .overview { display: flex; flex-direction: column; align-items: center; line-height: 1; padding-bottom: 0.9375rem; color: #fff; background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png); background-size: cover; } .overview .status { font-size: 1.125rem; } .overview .status::before { margin-right: 0.1875rem; font-weight: 500; } .overview .tips { margin: 0.9375rem 0; display: flex; font-size: 14px; align-items: center; } .overview .tips .money { margin-right: 0.9375rem; } .overview .button-group { margin-top: 0.9375rem; display: flex; justify-content: center; align-items: center; } .overview .button { width: 8.125rem; height: 2rem; margin: 0 0.3125rem; text-align: center; line-height: 2rem; font-size: 0.875rem; color: #27ba9b; border-radius: 2.125rem; background-color: #fff; } .shipment { line-height: 1.4; padding: 0 0.625rem; margin: 0.625rem 0.625rem 0; border-radius: 0.3125rem; background-color: #fff; } .shipment .locate, .shipment .item { min-height: 3.75rem; padding: 0.9375rem 0.9375rem 0.78125rem 2.34375rem; background-size: 1.5625rem; background-repeat: no-repeat; background-position: 0.1875rem center; } .shipment .locate { background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png); } .shipment .locate .user { font-size: 0.8125rem; color: #444; } .shipment .locate .address { font-size: 0.75rem; color: #666; } .shipment .item { background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png); border-bottom: 0.03125rem solid #eee; position: relative; } .shipment .item .message { font-size: 0.8125rem; color: #444; } .shipment .item .date { font-size: 0.75rem; color: #666; } .goods { margin: 0.625rem 0.625rem 0; padding: 0 0.625rem; border-radius: 0.3125rem; background-color: #fff; } .goods .item { padding: 0.9375rem 0; border-bottom: 0.03125rem solid #eee; } .goods .item .navigator { display: flex; margin: 0.625rem 0; } .goods .item .cover { width: 5.3125rem; height: 5.3125rem; border-radius: 0.3125rem; margin-right: 0.625rem; } .goods .item .meta { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; } .goods .item .name { height: 2.5rem; font-size: 0.8125rem; color: #444; } .goods .item .type { line-height: 1.8; padding: 0 0.46875rem; margin-top: 0.1875rem; font-size: 0.75rem; align-self: flex-start; border-radius: 0.125rem; color: #888; background-color: #f7f7f8; } .goods .item .price { display: flex; margin-top: 0.1875rem; font-size: 0.75rem; } .goods .item .symbol { font-size: 0.625rem; } .goods .item .original { color: #999; text-decoration: line-through; } .goods .item .actual { margin-left: 0.3125rem; color: #444; } .goods .item .text { font-size: 0.6875rem; } .goods .item .quantity { position: absolute; bottom: 0; right: 0; font-size: 0.75rem; color: #444; } .goods .item .action { display: flex; flex-direction: row-reverse; justify-content: flex-start; padding: 0.9375rem 0 0; } .goods .item .action .button { width: 6.25rem; height: 1.875rem; text-align: center; justify-content: center; line-height: 1.875rem; margin-left: 0.625rem; border-radius: 1.875rem; border: 0.03125rem solid #ccc; font-size: 0.8125rem; color: #444; } .goods .item .action .primary { color: #27ba9b; border-color: #27ba9b; } .goods .total { line-height: 1; font-size: 0.8125rem; padding: 0.625rem 0; color: #666; } .goods .total .row { display: flex; align-items: center; justify-content: space-between; padding: 0.3125rem 0; } .goods .total .symbol::before { content: "¥"; font-size: 80%; margin-right: 0.09375rem; } .goods .total .primary { color: #cf4444; font-size: 1.125rem; } .detail { line-height: 1; padding: 0.9375rem 0.625rem 0; margin: 0.625rem 0.625rem 0; font-size: 0.8125rem; color: #666; border-radius: 0.3125rem; background-color: #fff; } .detail .title { font-size: 0.9375rem; color: #444; } .detail .row { padding: 0.625rem 0; } .detail .row .item { padding: 0.3125rem 0; display: flex; align-items: center; } .detail .row .copy { border-radius: 0.625rem; font-size: 0.625rem; border: 1px solid #ccc; padding: 0.15625rem 0.3125rem; margin-left: 0.3125rem; } .toolbar-height { height: 3.125rem; box-sizing: content-box; } .toolbar { position: fixed; left: 0; right: 0; bottom: calc(var(--window-bottom)); z-index: 1; height: 3.125rem; padding: 0 0.625rem; display: flex; align-items: center; flex-direction: row-reverse; border-top: 0.03125rem solid #ededed; border-bottom: 0.03125rem solid #ededed; background-color: #fff; box-sizing: content-box; } .toolbar .button { display: flex; justify-content: center; align-items: center; width: 6.25rem; height: 2.25rem; margin-left: 0.46875rem; font-size: 0.8125rem; border-radius: 2.25rem; border: 0.03125rem solid #ccc; color: #444; } .toolbar .delete { order: 4; color: #cf4444; } .toolbar .button { order: 3; } .toolbar .secondary { order: 2; color: #27ba9b; border-color: #27ba9b; } .toolbar .primary { order: 1; color: #fff; background-color: #27ba9b; } .popup-root { padding: 0.9375rem 0.9375rem 0; border-radius: 0.3125rem 0.3125rem 0 0; overflow: hidden; } .popup-root .title { font-size: 0.9375rem; text-align: center; margin-bottom: 0.9375rem; } .popup-root .description { font-size: 0.875rem; padding: 0 0.625rem; } .popup-root .description .tips { color: #444; margin-bottom: 0.375rem; } .popup-root .description .cell { display: flex; justify-content: space-between; align-items: center; padding: 0.46875rem 0; color: #666; } .popup-root .description .icon::before { content: "\e6cd"; font-family: "erabbit" !important; font-size: 1.1875rem; color: #999; } .popup-root .description .icon.checked::before { content: "\e6cc"; font-size: 1.1875rem; color: #27ba9b; } .popup-root .footer { display: flex; justify-content: space-between; padding: 0.9375rem 0 1.25rem; font-size: 0.875rem; color: #444; } .popup-root .footer .button { flex: 1; height: 2.25rem; text-align: center; line-height: 2.25rem; margin: 0 0.625rem; color: #444; border-radius: 2.25rem; border: 0.03125rem solid #ccc; } .popup-root .footer .primary { color: #fff; background-color: #27ba9b; border: none; }