194 lines
4.5 KiB
Vue
194 lines
4.5 KiB
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>
|