XXxiangmu/pages/order/index.vue

<template>
	<view class="content">
		<view class="order-title"><text>订单选择</text></view>
		<view class="title">请选择订单类型</view>
		<view class="tip">请您选择您需要查看的订单类型</view>
		<view class="order" @click="nav('/pages/order/order1?state=0')">
			<image src="../../static/img/order1.png" mode=""></image>
		</view>
		<view class="order" @click="nav('/pages/order/order')">
			<image src="../../static/img/order2.png" mode=""></image>
		</view>
		<u-tabbar activeColor="#f42b4e" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
import { tabbar } from '@/utils/tabbar.js';
export default {
	data() {
		return {
			tabbar: tabbar,
			current: 1 //底部tabar选中的icon对象
		};
	},
	methods: {
		nav(url) {
			uni.navigateTo({
				url
			})
		}
	}
};
</script>

<style lang="less">
.order-title {
	width: 750rpx;
	height: 200rpx;
	background: url(../../static/img/order99.png) repeat-x 0;
	display: flex;
	flex-direction: column;
	text-align: center;

	text {
		margin: 30px 0;
		font-size: 17px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}

	.roder-content {
		display: flex;
		justify-content: space-around;

		.left {
			width: 168px;
			height: 40px;
			line-height: 40px;
			border: 1px solid #ffffff;
			border-radius: 5px;
			text-align: center;
			font-size: 15px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			background: #dc262b;
		}

		.current {
			color: #dc262b;
			background: #ffffff;
		}
	}
}
.title {
	margin: 80rpx 34rpx 0;
	font-size: 42rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
}
.tip {
	margin: 26rpx 34rpx 50rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #9F9F9F;
}
.order {
	margin: 30rpx auto 0;
	width: 700rpx;
	height: 184rpx;
	box-shadow: 0px 6rpx 30rpx 0px rgba(166, 166, 166, 0.16);
	border-radius: 20rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>