首页

pages/index/index.vue

@@ -1,16 +1,61 @@
 <template>
 	<view>
-		<u-navbar   title="营收统计" :is-back="false" >
-				<view class="slot-wrap"></view>	
-		</u-navbar>
+		<view class="von-index-bar">
+			<view class="text-center mb-1">
+				<h3 >营收统计</h3>
+				<h6>今日收益(元)</h6>
+				<h1>1141.00</h1>
+			</view>
+			<view class="flex-spal">
+				<text>昨日收益</text>
+				<h3>1024.00</h3>
+				<text>昨日收益</text>
+				<h3>1024.00</h3>
+			</view>
+		</view>
+		<view class="von-index-row">
+			<u-cell-group>
+				<u-cell-item title="收益明细" value="+1141.00" :arrow="arrow"></u-cell-item>
+			</u-cell-group>
+			<u-row>
+			    <u-col :span="6">
+			        <view class="von-index-col">今日售票笔数<h3>188</h3></view>
+			    </u-col>
+				<u-col :span="6">
+				    <view class="von-index-col">线上购票收款<h3>957.00</h3></view>
+				</u-col>
+			</u-row>
+			<u-row>
+			    <u-col :span="6">
+			        <view class="von-index-col">微信支付收款<h3>888.00</h3></view>
+			    </u-col>
+				<u-col :span="6">
+				    <view class="von-index-col">支付宝收款<h3>888.00</h3></view>
+				</u-col>
+			</u-row>
+			<u-row>
+			    <u-col :span="6">
+			        <view class="von-index-col">现金收款<h3>888.00</h3></view>
+			    </u-col>
+				<u-col :span="6">
+				    <view class="von-index-col">纸质车票收款<h3>888.00</h3></view>
+				</u-col>
+			</u-row>
+		</view>
 	</view>
 </template>
 
 <script>
 	import api from './index.js'
-	export default api;
+	export default {
+	        mounted() {
+	            document.body.style.backgroundColor = '#eee';
+	        },
+	        destroyed() {
+	           document.body.style.backgroundColor = '';
+	         }
+	    }
 </script>
 
 <style>
-
 </style>

static/css/style.css

@@ -4,9 +4,15 @@
 .mt-1{
 	margin-top:1rem
 }
+.mb-1{
+	margin-bottom:1rem
+}
 .flex{
 	display: flex;
 }
+.flex-1{
+	flex:1
+}
 .flex-sp{
 	display: flex;
 	justify-content: space-between;
@@ -51,4 +57,67 @@
 }
 .von-sy-area .u-cell[data-v-2c031e35]{
 	padding:6px 15px
+}
+.von-index-bar{
+	background:#1677FF;
+	color:white;
+	padding:0 15px
+}
+.von-index-bar h3{
+	line-height: 44px;
+}
+.von-index-bar h3,
+.von-index-bar h6,
+.von-index-bar h1{
+	font-weight: initial;
+}
+.von-index-bar h6{
+	line-height: 2;
+}
+.von-index-bar text,
+.von-index-bar h6{
+	color:rgba(255,255,255,.8)
+}
+.von-index-col{
+	padding:10px;
+	color:#888
+}
+.von-index-col h3{
+	font-weight: initial;
+	color:#303133;
+	line-height: 2;
+}
+.von-index-row{
+	background:white
+}
+.von-index-row .u-row{
+	position:relative
+}
+.von-index-row .u-row::after{
+	position:absolute;
+	top:50%;
+	right:50%;
+	content: "";
+	width:1px;
+	height:28px;
+	margin-top:-14px;
+	background:#EDEDED
+}
+.von-index-row .u-row::before{
+	position:absolute;
+	bottom:0;
+	left:4%;
+	content: "";
+	width:91%;
+	height:1px;
+	margin-top:-14px;
+	background:#EDEDED
+}
+.von-index-row .u-row:last-child::before{
+	height:0
+}
+.von-index-row .u-border-bottom:after{
+	width:182%;
+	left:4%;
+	 border-bottom: 1px solid #EDEDED
 }