wardrobe/pages/quchu/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="" :shadow="0" :showback="false"></tm-menubars>
		<view class="C1b1b1b">
			<tm-search v-model="keyword" color="white" confirm-text="" @click="sosoFun"></tm-search>
			<tm-tabs align="left" class="qiehuan1 pb-20" v-model="activeIndex" :list="list" range-key="title"></tm-tabs>
		</view>

		<div class="zhuti">
			<tm-sheet class="kuang" style="padding-bottom: 50px !important;">
				<view style="width: 98%;margin:0 auto;">
					<view class="pb-20" style="display: flex;align-items: center;">
						<image class="out_pic" src="../../static/img/59.png" mode="widthFix" lazy-load></image>
						<text class="out_title">出库列表</text>
					</view>
					<view class="out_content" v-for="item in outList" :key="item.id">
						<image src="../../static/img/45.png" mode="widthFix" style="width:280rpx;height: 120rpx;">
						</image>
						<view>
							<tm-listitem :font-size="32" :title="item.title" :label="item.time"></tm-listitem>
						</view>
					</view>
				</view>
			</tm-sheet>
			<tm-button :round="24" class="sao mb-40 mt-40" block @click="goback">全部取消</tm-button>
		</div>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>
<script>
	import {
		myRequest
	} from '@/api/request.js'
	export default {
		data() {
			return {
				
				outList: [{
					title: '女士合身长裤1111',
					time: '出库时间倒计时 00:59:59',
				},{
					title: '女士合身长裤1111',
					time: '出库时间倒计时 00:59:59',
				},{
					title: '女士合身长裤1111',
					time: '出库时间倒计时 00:59:59',
				},{
					title: '女士合身长裤1111',
					time: '出库时间倒计时 00:59:59',
				}],
				checked1: false,
				checked2: false,
				checked3: false,
				beizu: '',
				list: ['待取出', '已取出', '已失效'],
				activeIndex: 0,
				keyword: ''
			};
		},
		onLoad() {

		},
		created() {
			this.sys = uni.getSystemInfoSync();
		},
		methods: {
			goback(){
				uni.navigateBack();
			}
		},
	}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body {
		background-color: #1b1b1b !important;
	}

	.xiangji image {
		width: 30px;
		height: 22px;
	}

	.suosou image {
		width: 40px;
	}

	/deep/ .icon-search {
		font-size: 23px !important;
		color: #8E8E93 !important;
	}

	/deep/ .tm-search {
		width: 94%;
		margin: 0 auto;
		background-color: #414141 !important;
		border-radius: 10px;
	}

	/deep/ .tm-search .grey-darken-5 {
		background-color: #414141 !important;
	}


	/deep/ .zhuti {
		padding: 10px 10px;
	}

	/deep/ .kuang {
		margin: 0 !important;
		padding: 20rpx 0rpx 0rpx !important;
	}

	/deep/ .qiehuan1 .text-primary {
		color: white !important;
	}

	.touxiang {
		width: 100%;
		margin: 0 auto;
		display: block;
		margin-top: 20px;
	}

	.out_pic {
		width: 50rpx;
		height: 50rpx;
		margin-right: 15rpx;
	}

	.out_title {
		font-weight: bold;
		color: #ffffff;
		font-size: 28rpx;
	}

	.out_content {
		margin: 20rpx 0rpx 0rpx;
		display: flex;
		box-sizing: border-box;
		justify-content: flex-start;
	}

	/deep/.tm-listitem .mx-32 {
		margin: 0 !important;
	}

	/deep/ .tm-listitem .py-20 {
		padding: 0rpx 20rpx !important;
	}

	/deep/ .tm-listitem .pt-4 {
		padding-top: 18px !important;
	}

	/deep/ .tm-listitem .pb-4 {
		padding-bottom: 0px !important;
	}

	/deep/ .tm-listitem .flex-between {
		align-items: flex-end !important;
	}

	/deep/ .tm-listitem .text-grey-lighten-1 {
		color: #8d8d8d !important
	}
</style>