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">
                   {{item.title}}
                </view> 
              
            </view>
            <view class="queryFunction-head-Fun">
                   <input type="text" placeholder="请输入关键词进行查询" class="queryFunction-head-input" value="" /> 
                   <view class="button">
                       查询
                   </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>