flying-monkey/pages/dataQuery/queryFunction.vue

<template>
	<view>
		<view class="head">
			<view class="text">查询功能</view>
		</view>
		<view class="queryFunction-head-content">
			<view class="queryFunction-head-nav">
				<view class="li" @click="navIndex(index)"
					:class="[dataIndex==0?'li1':'',dataIndex==1?'li2':'',dataIndex==2?'li3':'' ]"
					v-for="(item,index) in dataList" :key="index">
						{{item.title}}
						<view v-show="dataIndex==index" class="typeActive"></view>
				</view>
			</view>
			<view class="queryFunction-head-Fun">
				<input type="text" v-model="key_word" placeholder="请输入关键词进行查询" class="queryFunction-head-input" placeholder-style="font-size:28rpx;color:#959595;" />
				<view class="button" @tap="checkEv">查询</view>
			</view>
		</view>
		<view class="recently-query-title">最近查询</view>
		<view class="recently-query-content">
			<view class="li">
				<image class="icon" src="../../static/iocn/jfd.png" mode=""></image>
				<view class="text-content">
					<view class="title">湖南争鸣光电科技有限公司</view>
					<view class="text">编号：FRID23123141123321124</view>
					<view class="text">2121-1-8 12:23</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataIndex: 0,
				dataList: [{
						title: "客户查询",
					},
					{
						title: "项目查询",
					},
					{
						title: "备品查询",
					},
				],
				key_word:'', // 关键词
			}
		},
		onLoad(op) {
			if(op.index!=undefined) this.dataIndex = op.index;
		},
		methods: {
			// 查询类型切换
			navIndex(index) {
				this.dataIndex = index
			},
			// 查询事件
			checkEv(){
				console.log(this.key_word);
			}
		}
	}
</script>

<style>
	.head {
		width: 100%;
		height: 344rpx;
		padding: 0 35rpx;
		padding-top: 107rpx;
		background-color: #00A2E9;
		box-sizing: border-box;

	}

	.head .text {
		font-size: 41rpx;
		color: #FFFFFF;
	}

	.queryFunction-head-content {
		width: 676rpx;
		height: 400rpx;
		background-color: #FFFFFF;
		margin: auto;
		border-radius: 15rpx;
		margin-top: -130rpx;
	}

	.queryFunction-head-nav {
		display: flex;
		border-radius: 15rpx 15rpx 0 0;
		overflow: hidden;
	}

	.queryFunction-head-nav .li {
		position: relative;
		width: 233rpx;
		color: #505050;
		height: 102rpx;
		background-color: #F5F5F5;
		display: flex;
		align-items: center;
		font-size: 35rpx;
		justify-content: center;
	}
	.typeActive {
		position: absolute;
		width: 30%;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		height: 6rpx;
		border-radius: 21%;
		background-color: #00A2E9;
	}
	.queryFunction-head-nav .li1:nth-child(2) {
		border-radius: 15rpx 0rpx 0rpx 15rpx;
	}

	.queryFunction-head-nav .li1:nth-child(1) {
		background-color: #FFFFFF;
	}

	.queryFunction-head-nav .li2:nth-child(2) {
		background-color: #FFFFFF;
	}

	.queryFunction-head-nav .li2:nth-child(1) {
		border-radius: 0rpx 15rpx 15rpx 0rpx;
	}

	.queryFunction-head-nav .li2:nth-child(3) {
		border-radius: 15rpx 0rpx 0rpx 15rpx;
	}

	.queryFunction-head-nav .li3:nth-child(2) {
		border-radius: 0rpx 15rpx 15rpx 0rpx;
	}

	.queryFunction-head-nav .li3:nth-child(3) {
		background-color: #FFFFFF;
	}

	.queryFunction-head-input {
		margin-top: 20rpx;
		height: 100rpx;
		width: 100%;
		border-bottom: 2rpx solid #eeeeee;

	}

	.queryFunction-head-Fun {
		padding: 0 32rpx;

	}

	.queryFunction-head-Fun .button {
		background-color: #00A2E9;
		border-radius: 15rpx;
		height: 80rpx;
		color: #FFFFFF;
		text-align: center;
		margin-top: 34rpx;
		line-height: 80rpx;
	}

	.recently-query-title {
		color: #040b26;
		font-weight: bold;
		padding: 50rpx 34rpx 44rpx;
	}

	.recently-query-content {
		padding: 0 34rpx;
		box-sizing: border-box;
	}

	.recently-query-content .li {
		width: 100%;
		height: 232rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		padding-top: 30rpx;
		padding-left: 40rpx;
		margin-bottom: 37rpx;
		display: flex;
	}

	.recently-query-content .li .icon {
		width: 37rpx;
		height: 37rpx;
		margin-right: 40rpx;
	}

	.recently-query-content .li .text-content .title {
		color: #30364c;
		font-size: 33rpx;
		margin-bottom: 25rpx;
	}

	.recently-query-content .li .text-content .text {
		color: #b5b5b5;
		font-size: 27rpx;
		margin-bottom: 25rpx;
	}
</style>