workorder-front/pages/index/index.vue

<template>
	<view class="page">

		<navbar bgColor="#169bd5"/>
		
		<view class="Carousel-image">
			<view class="imgs">
				<uv-swiper 
				:list="bannerList" 
				indicator indicatorMode="dot" 
				keyName="image"
				circular height="420">
				</uv-swiper>
			</view>


			<view class="search">
				<view class="center-area">
					<image style="margin-right: 20rpx;" src="@/static/image/home/search-icon.png"></image>
					<input v-model="queryParams.title" placeholder="输入单号进行搜索" />
				</view>
			</view>
			
		</view>

		<view class="festival">
			<view class="indus">
				<view class="horn">
					<uv-icon name="volume" size="34rpx"></uv-icon>
				</view>
				<view class="words">
					中秋节放假及工作安排通知
				</view>
			</view>
			<view class="arrow">
				<uv-icon name="arrow-right"></uv-icon>
			</view>
		</view>

		<view class="task">
			<view class="backimg" @click="$utils.navigateTo('/pages_order/order/WorkOrderListitem')" >
				<view class="Work-Order">
					所有工单
				</view>
			</view>
		</view>

		<view class="Urgent-Work-Order">
			<view class="Urgent-Work">
				紧急工单
			</view>
			
			<WorkOrderitem
			v-for="(item,index) in list"
			:obj="item"
			:key="index"
			/>
			
		</view>
		
		<PrivacyAgreementPoup/>
			
		<tabber select="0"/>
	</view>
</template>

<script>
	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
	import tabber from '@/components/base/tabbar.vue'
	import WorkOrderitem from '@/components/work/WorkOrderitem.vue'
	import mixinsList from '@/mixins/list.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		mixins: [mixinsList],
		components: {
			tabber,
			PrivacyAgreementPoup,
			WorkOrderitem,
		},
		data() {
			return {
				bannerList: [],
				mixinsListApi : 'queryTemplateList',
			}
		},
		computed: {
		},
		onLoad() {
			this.queryBannerList()
		},
		methods: {
			queryBannerList(){
				this.$api('queryBannerList', res =>{
					if(res.code == 200){
						this.bannerList = res.result.records
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.Carousel-image {
		position: relative;
		display: inline-block;
		width: 100%;

		.search {
			height: 82rpx;
			width: 710rpx;
			background: #FFFFFF;
			margin: 20rpx auto;
			border-radius: 41rpx;
			box-sizing: border-box;
			padding: 0 15rpx;
			display: flex;
			align-items: center;
			position: absolute;
			top: 10px;
			left: 10px;

			//搜素框
			.center-area {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				width: calc(100% - 290rpx);
				margin-left: 30rpx;

				image {
					width: 26rpx;
					height: 26rpx;
				}
			}
		}
	}
	
	.Urgent-Work-Order{
		padding: 20rpx;
	}

	.festival {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;

		.indus {
			display: flex;

			.words {
				margin: 0rpx 5rpx;
				font-size: 27rpx;
				opacity: 0.8;
			}

			.horn {
				margin: 5rpx 10rpx;
			}
		}

		.arrow {
			padding: 8rpx;
		}

	}

	.task {

		.backimg {
			width: 100%;
			height: 320rpx;
			background-color: greenyellow;

			.Work-Order {
				margin: 20rpx;

			}
		}
	}

	.page {
		& /deep/ .uv-icon__icon {
			font-size: 30rpx !important;
		}
	}
</style>