workorder-front/pages/index/category.vue

<template>
	<view class="page">
		<navbar 
		title="列表"
		leftClick 
		@leftClick="$utils.navigateBack"
		/>
		<uv-search placeholder="请输入搜索内容" v-model="keyword" height="80"></uv-search>
		<!-- 标签选项 -->
		<view class="Tabs">
			<uv-tabs :list="listt" @click="click" ></uv-tabs>
		</view>
		
		<view class="Urgent-Work-Order">
			
		<WorkOrderitem 
		v-for="(item,index) in 2"
		 @click="$utils.navigateTo('/pages_order/order/WorkOrders')"/>
		</view>


		<tabber select="1" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import WorkOrderitem from '@/components/work/WorkOrderitem.vue'

	export default {
		components: {
			tabber,
			WorkOrderitem,
		},
		data() {
			return {
				keyword: '水调歌头',
				listt: [{
					name: '所有',
				}, {
					name: '备料中',
				}, {
					name: '本体加工'
				}, {
					name: '气密检测'
				}, {
					name: '挂机中'
				}],
				
				category: [{
						name: '桌布'
					},
					{
						name: '桌布'
					},
					{
						name: '桌布'
					},
				],
				list: [{
						unit: '100*50*60',
						image: 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
					},
					{
						unit: '100*50*60',
						image: 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
					},
					{
						unit: '100*50*60',
						image: 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
					},
					{
						unit: '100*50*60',
						image: 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
					},
					{
						unit: '100*50*60',
						image: 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
					},
					{
						unit: '100*50*60',
						image: 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
					},
					{
						unit: '100*50*60',
						image: 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
					},
					{
						unit: '100*50*60',
						image: 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
					},
					{
						unit: '100*50*60',
						image: 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
					},
				],
				chain: false,
				value: 0
			}
		},
		computed: {
			list2() {
				const _list = this.list[this.value]?.childrens;
				return _list ? _list : [];
			}
		},
		onReady() {

		},
		methods: {
			change(index) {
				console.log('选项改变：', index)
				this.value = index;
			},
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #fff;

		/deep/ .uv-vtabs {
			height: calc(100vh - 360rpx) !important;
		}

		/deep/ .uv-vtabs__bar {
			height: calc(100vh - 360rpx) !important;
		}

		/deep/ .uv-vtabs__content {
			height: calc(100vh - 360rpx) !important;
		}
		.Tabs{
			display: flex;
			justify-content: center;
			
		}
		.Urgent-Work-Order{
			padding: 20rpx;
			
			.Urgent-Work-List{
				margin-top: 20rpx;
				border: 6rpx solid rgb(99 ,187 ,211);
				border-radius: 25rpx;
				padding: 15rpx;
				.Work-List{
					margin: 15rpx 0rpx;
					letter-spacing: 2px
				}
			}
		}
	}
	
	
</style>