hant/wanyu_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

工作台页面开发

Browse Source
This commit is contained in:
gcd 2025-03-26 22:22:45 +08:00
parent a01dac128e
commit 1ba5a31ffe
4 changed files with 227 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
pages/index/index.vue
View File

@ -6,7 +6,7 @@
<me-empty-space :height="listMarginTop"></me-empty-space>
<view class="list">
<view class="item">
<view class="order-item">
<view class="top flex-sb">
<view class="type flex-l">日常保洁</view>
<view class="price flex-r">平台已收款</view>
@ -37,7 +37,7 @@
</view>
</view>
<view class="item">
<view class="order-item">
<view class="top flex-sb">
<view class="type flex-l">日常保洁</view>
<view class="price flex-r important-color">上门报价</view>
@ -69,7 +69,7 @@
</view>
</view>
<view class="item">
<view class="order-item">
<view class="top flex-sb">
<view class="type flex-l">日常保洁</view>
<view class="price flex-r important-color">上门报价</view>
@ -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;
}
}
}
}
</style>

90
pages/workbench/workbench.vue
View File

@ -11,6 +11,96 @@
</view>
<me-empty-space :height="listMarginTop"></me-empty-space>
<view class="list">
<view class="order-item">
<view class="top flex-sb">
<view class="type flex-l">日常保洁</view>
<view class="price flex-r">平台已收款</view>
</view>
<view class="content flex-sb">
<view class="left">
<view class="address-name flex-l">
金城花园(天府二街)
</view>
<view class="address">
广东省茂名市茂南区金城路26号大院附近
</view>
<view class="time-ctr flex-l">
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
<text class="time">周日 10月08日 12:30</text>
</view>
</view>
<view class="right">
<view class="icon-ctr flex-c">
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
</view>
<view class="distance flex-c">8.34公里</view>
</view>
</view>
<view class="user flex-sb">
<view class="left">
<view class="user-name flex-l">
<me-icon type="icon-user" color="var(--descriptionColor)" size="36rpx"></me-icon>
<view class="name">安子辰</view>
</view>
<view class="phone flex-l">18950807422</view>
</view>
<view class="right flex-c">
<view class="icon-ctr flex-c" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
<me-icon type="icon-call" color="var(--themeColor)" size="80rpx"></me-icon>
</view>
</view>
</view>
<view class="status-ctr flex-sb">
<view class="title flex-l">当前工单状态</view>
<view class="status flex-c">待联系客户</view>
</view>
</view>
<view class="order-item">
<view class="top flex-sb">
<view class="type flex-l">日常保洁</view>
<view class="price flex-r important-color">上门报价</view>
</view>
<view class="content flex-sb">
<view class="left">
<view class="address-name flex-l">
金城花园(天府二街)
</view>
<view class="address">
广东省茂名市茂南区金城路26号大院附近
</view>
<view class="time-ctr flex-l">
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
<text class="time">周日 10月08日 12:30</text>
</view>
</view>
<view class="right">
<view class="icon-ctr flex-c">
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
</view>
<view class="distance flex-c">8.34公里</view>
</view>
</view>
<view class="user flex-sb">
<view class="left">
<view class="user-name flex-l">
<me-icon type="icon-user" color="var(--descriptionColor)" size="36rpx"></me-icon>
<view class="name">安子辰</view>
</view>
<view class="phone flex-l">18950807422</view>
</view>
<view class="right flex-c">
<view class="icon-ctr flex-c" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
<me-icon type="icon-call" color="var(--themeColor)" size="80rpx"></me-icon>
</view>
</view>
</view>
<view class="status-ctr flex-sb">
<view class="title flex-l">当前工单状态</view>
<view class="status flex-c">待联系客户</view>
</view>
</view>
</view>
<me-empty-space height="100"></me-empty-space>
</view>
</template>

132
static/css/common.scss
View File

@ -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;
}
}
}

2
theme/theme.scss
View File

@ -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;