From 31eec8bc86e9400d88bf0115901148dddf129820 Mon Sep 17 00:00:00 2001
From: li-guang <153605324@qq.com>
Date: Mon, 21 Dec 2020 15:55:31 +0800
Subject: [PATCH] 服务单修改样式
---
hive-app/pages/workbench/orderList.vue | 100 +++++++++++++++++++++++++++-----------------------
1 files changed, 54 insertions(+), 46 deletions(-)
diff --git a/hive-app/pages/workbench/orderList.vue b/hive-app/pages/workbench/orderList.vue
index a129833..96857fe 100644
--- a/hive-app/pages/workbench/orderList.vue
+++ b/hive-app/pages/workbench/orderList.vue
@@ -1,10 +1,9 @@
<template>
<!-- 订单列表 -->
<view>
- <!-- #ifndef H5 -->
- <view class="status_bar"></view>
- <!-- #endif -->
- <search-bar :placeholder=placeholder class="header-input"></search-bar>
+ <view class="header">
+ <search-bar class="mb-0"></search-bar>
+ </view>
<view>
<h-tabs
class="tab"
@@ -13,35 +12,36 @@
color: '#abb1cc',
activeColor: '#518EFF',
underLineColor: '#518EFF',
- underLineHeight: 8,
- fontSize: '30',
- itemWidth: 100,
+ underLineHeight: 4,
+ fontSize: '28',
underLineWidth: 60,
}"
/>
- <view class="order">
- <view class="flex justify-between order-number">
- <text class="font-14">订单号: N202012123556</text>
- <text class="font-14 blue">待付款</text>
- </view>
- <view class="flex justify-between order-content">
- <view class="flex flex-v">
- <text class="font-12">李某某</text>
- <text class="font-12 gray mt-10">2020-12-15 18:11:01</text>
+ <view class="list">
+ <view class="list-item" v-for="item in 4">
+ <view class="list-header">
+ <text>订单号: N202012123556</text>
+ <text class="blue">待付款</text>
</view>
- <view class="flex flex-v">
- <text class="font-12">应付金额</text>
- <text class="font-12 mt-10">实付金额</text>
- <text class="font-12 mt-10">欠款总额</text>
+ <view class="list-content">
+ <view class="flex flex-v">
+ <text class="font-bold font-16">李某某</text>
+ <text class="gray">2020-12-15 18:11:01</text>
+ </view>
+ <view class="flex flex-v">
+ <text>应付金额</text>
+ <text>实付金额</text>
+ <text>欠款总额</text>
+ </view>
+ <view class="flex flex-v right">
+ <text>￥ 8000.00</text>
+ <text>￥ 0.00</text>
+ <text>￥ 8000.00</text>
+ </view>
</view>
- <view class="flex flex-v">
- <text class="font-12">￥ 8000.00</text>
- <text class="font-12 mt-10">￥ 0.00</text>
- <text class="font-12 mt-10">￥ 8000.00</text>
+ <view class="list-footer">
+ <text class="blue-btn small-btn">取消订单</text>
</view>
- </view>
- <view class="flex justify-end">
- <button class="blue-btn small-btn">取消订单</button>
</view>
</view>
</view>
@@ -58,7 +58,6 @@
},
data() {
return {
- placeholder:"输入会员姓名、手机号、编号查询",
tabs:[
{
state: 1,
@@ -66,7 +65,7 @@
},
{
state: 2,
- name: '代付款'
+ name: '待付款'
},
{
state: 3,
@@ -83,32 +82,41 @@
</script>
<style>
- .header-input{
- margin: 0 10px;
+ page{
+ background: #F6F6F8;
+ }
+ .header{
+ padding: 10px;
+ background: #FFFFFF;
}
.tab{
+ background: #FFFFFF;
border-bottom: 1px solid #EDEAF4;
- border-radius: 4px;
- box-shadow:0 6px 6px rgba(237,234,244,0.5);
}
- .order{
- border: 1px solid #EDEAF4;
+ .list-item{
+ background: #FFFFFF;
border-radius: 4px;
- box-shadow:0 6px 6px rgba(237,234,244,0.5);
margin: 10px;
- padding: 0 6px;
+ color: #3a3f3f;
}
- .order-number{
- padding: 10px 6px;
+ .list-header{
+ display: flex;
+ justify-content: space-between;
+ padding: 12px 15px;
+ font-size: 15px;
border-bottom: 1px solid #EDEAF4;
}
- .order-content{
- padding: 15px 6px;
- border-bottom: 1px solid #EDEAF4;
+ .list-content{
+ display: flex;
+ justify-content: space-between;
+ padding: 12px 15px;
+ font-size: 14px;
+ line-height: 28px;
}
- .small-btn{
- width: 100px;
- margin: 10px 0;
- line-height: 30px;
+ .list-footer{
+ display: flex;
+ justify-content: flex-end;
+ padding: 10px 15px;
+ border-top: 1px solid #EDEAF4;
}
</style>
--
Gitblit v1.9.1