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:"备品查询",
                    },
                ]
            }
        },
        methods: {
            navIndex(index){
                this.dataIndex=index
            }
        }
    }
</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{
    width: 233rpx;
    color: #505050;
    height: 102rpx;
  
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    font-size: 35rpx;
    justify-content: center;
}
.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{
    height: 116rpx;
    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>