diff --git a/pages/index/index.vue b/pages/index/index.vue index 8480742..61a7c1b 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -6,7 +6,7 @@ - + 日常保洁 平台已收款 @@ -37,7 +37,7 @@ - + 日常保洁 上门报价 @@ -69,7 +69,7 @@ - + 日常保洁 上门报价 @@ -134,95 +134,5 @@ const listMarginTop = computed(() => { background-color: var(--pageBgColor); width: 100%; } - .list { - .item { - width: 100%; - background: var(--containerBgColor); - border-radius: 16rpx; - padding: 20rpx; - box-sizing: border-box; - margin-top: 32rpx; - .top { - height: 60rpx; - .type,.price { - width: 323rpx; - height: 100%; - } - .type { - font-weight: 500; - font-size: 34rpx; - color: var(--titleColor); - } - .price { - font-size: 30rpx; - color: var(--summaryColor); - } - .important-color { - color: var(--importantColor) !important; - } - } - .content { - width: 100%; - .left { - width: 466rpx; - .address-name { - width: 100%; - min-height: 60rpx; - font-size: 30rpx; - color: var(--titleColor); - line-height: 44rpx; - } - .address { - width: 100%; - min-height: 60rpx; - font-size: 28rpx; - color: var(--summaryColor); - line-height: 44rpx; - } - .time-ctr { - width: 100%; - min-height: 80rpx; - font-size: 28rpx; - color: var(--themeColor); - line-height: 44rpx; - .time { - margin-left: 8rpx; - } - } - } - .right { - width: 180rpx; - .icon-ctr { - width: 100%; - height: 60rpx; - } - .distance { - width: 100%; - height: 44rpx; - font-size: 28rpx; - color: var(--titleColor); - line-height: 44rpx; - margin-top: 32rpx; - } - } - } - .discount { - width: 100%; - height: 64rpx; - background: rgba(230,82,31,0.1); - border-radius: 16rpx; - font-size: 28rpx; - color: var(--importantColor); - padding: 0 16rpx; - box-sizing: border-box; - } - .btn-ctr { - width: 100%; - height: 126rpx; - box-sizing: border-box; - margin-top: 10rpx; - } - } - } } diff --git a/pages/workbench/workbench.vue b/pages/workbench/workbench.vue index e96eb14..898b11c 100644 --- a/pages/workbench/workbench.vue +++ b/pages/workbench/workbench.vue @@ -11,6 +11,96 @@ + + + + 日常保洁 + 平台已收款 + + + + + 金城花园(天府二街) + + + 广东省茂名市茂南区金城路26号大院附近 + + + + 周日 10月08日 12:30 + + + + + + + 8.34公里 + + + + + + + 安子辰 + + 18950807422 + + + + + + + + + 当前工单状态 + 待联系客户 + + + + + 日常保洁 + 上门报价 + + + + + 金城花园(天府二街) + + + 广东省茂名市茂南区金城路26号大院附近 + + + + 周日 10月08日 12:30 + + + + + + + 8.34公里 + + + + + + + 安子辰 + + 18950807422 + + + + + + + + + 当前工单状态 + 待联系客户 + + + diff --git a/static/css/common.scss b/static/css/common.scss index a3b6797..ee11b92 100644 --- a/static/css/common.scss +++ b/static/css/common.scss @@ -245,3 +245,135 @@ swiper .wx-swiper-dots .wx-swiper-dot{ border-radius: 5rpx; margin-bottom: 20rpx; } + +.order-item { + width: 100%; + background: var(--containerBgColor); + border-radius: 16rpx; + padding: 20rpx; + box-sizing: border-box; + margin-top: 32rpx; + .top { + height: 60rpx; + .type,.price { + width: 323rpx; + height: 100%; + } + .type { + font-weight: 500; + font-size: 34rpx; + color: var(--titleColor); + } + .price { + font-size: 30rpx; + color: var(--summaryColor); + } + .important-color { + color: var(--importantColor) !important; + } + } + .content { + width: 100%; + .left { + width: 466rpx; + .address-name { + width: 100%; + min-height: 60rpx; + font-size: 30rpx; + color: var(--titleColor); + line-height: 44rpx; + } + .address { + width: 100%; + min-height: 60rpx; + font-size: 28rpx; + color: var(--summaryColor); + line-height: 44rpx; + } + .time-ctr { + width: 100%; + min-height: 80rpx; + font-size: 28rpx; + color: var(--themeColor); + line-height: 44rpx; + .time { + margin-left: 8rpx; + } + } + } + .right { + width: 180rpx; + .icon-ctr { + width: 100%; + height: 60rpx; + } + .distance { + width: 100%; + height: 44rpx; + font-size: 28rpx; + color: var(--titleColor); + line-height: 44rpx; + margin-top: 32rpx; + } + } + } + .discount { + width: 100%; + height: 64rpx; + background: rgba(230,82,31,0.1); + border-radius: 16rpx; + font-size: 28rpx; + color: var(--importantColor); + padding: 0 16rpx; + box-sizing: border-box; + } + .btn-ctr { + width: 100%; + height: 126rpx; + box-sizing: border-box; + margin-top: 10rpx; + } + .user { + width: 100%; + height: 140rpx; + background: var(--auxiliaryBgColor); + border-radius: 16rpx; + padding: 20rpx 20rpx 20rpx 32rpx; + box-sizing: border-box; + .left { + .user-name,.phone { + width: 422rpx; + height: 50rpx; + font-size: 28rpx; + color: var(--titleColor); + line-height: 28rpx; + } + .user-name { + .name { + margin-left: 8rpx; + } + } + } + .right { + width: 140rpx; + height: 100rpx; + .icon-ctr { + width: 100rpx; + height: 100rpx; + } + } + } + .status-ctr { + width: 100%; + height: 80rpx; + font-size: 28rpx; + margin-top: 20rpx; + .status { + height: 60rpx; + background: rgba(225,143,0,0.1); + border-radius: 8rpx; + padding: 0 16rpx; + color: #E18F00; + } + } +} diff --git a/theme/theme.scss b/theme/theme.scss index 637283b..4b14f49 100644 --- a/theme/theme.scss +++ b/theme/theme.scss @@ -3,6 +3,7 @@ --summaryColor: rgba(0, 0, 0, 0.5); // 摘要 --descriptionColor: rgba(0, 0, 0, 0.3); // 描述 --contentBgColor: rgba(0, 0, 0, 0.1); // 内容区块 + --auxiliaryBgColor: rgba(0, 0, 0, 0.05); // 辅助背景色 --dottedBorderColor: rgba(0, 0, 0, 0.15); // 虚线 --dividerColor: rgba(0, 0, 0, 0.1); // 分割线 --pageBgColor: #F5F5F5; // 页面背景 @@ -20,6 +21,7 @@ --summaryColor: rgba(255, 255, 255, 0.5); --descriptionColor: rgba(255, 255, 255, 0.3); --contentBgColor: rgba(255, 255, 255, 0.1); + --auxiliaryBgColor: rgba(255, 255, 255, 0.05); --dottedBorderColor: rgba(255, 255, 255, 0.15); --dividerColor: rgba(255, 255, 255, 0.1); --pageBgColor: #111111;