flying-monkey/pages/dataQuery/client.vue

166 lines
4.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="content">
<statusNav returnColor="#c2c2c2" navBarTitle="客户(查询结果列表)"></statusNav>
<container-subgroup-two>
<view class="client-content" slot="content" style="margin: 0 -30rpx;">
<view @tap="goDetail(index)" class="li" v-for="(item,index) in dataList" :key="index">
<view class="li-content">
<view class="">
<view class="title">{{item.name}}</view>
<view class="code">编号{{item.code}}</view>
<view class="label-content" >
<view class="label" v-for="(key,index) in item.icon">{{key}}</view>
</view>
</view>
<view class="icon">{{item.num}}</view>
</view>
<view class="address">
<image class="img" src="../../static/iocn/dizi.png" mode=""></image>
<view class="text">{{item.address}}</view>
</view>
</view>
</view>
</container-subgroup-two>
</view>
</template>
<script>
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
import statusNav from '../../components/status-nav.vue';
export default {
components: {
statusNav,
containerSubgroupTwo
},
data() {
return {
dataList:[
{
name:'湖南争鸣光电科技有限公司',
code:"KH20220304-002",
icon:["弱电安防","弱电安防","弱电安防"],
num:"12",
address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
},
{
name:'湖南争鸣光电科技有限公司',
code:"KH20220304-002",
icon:["弱电安防","弱电安防","弱电安防"],
num:"11",
address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
},
{
name:'湖南争鸣光电科技有限公司',
code:"KH20220304-002",
icon:["弱电安防","弱电安防","弱电安防"],
num:"12",
address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
},
{
name:'湖南争鸣光电科技有限公司',
code:"KH20220304-002",
icon:["弱电安防","弱电安防","弱电安防"],
num:"14",
address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
},
{
name:'湖南争鸣光电科技有限公司',
code:"KH20220304-002",
icon:["弱电安防","弱电安防","弱电安防"],
num:"15",
address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
},
{
name:'湖南争鸣光电科技有限公司',
code:"KH20220304-002",
icon:["弱电安防","弱电安防","弱电安防"],
num:"16",
address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
},
],
}
},
onLoad(option) {
console.log(option)
console.log( option.key_word,"--------")
},
methods: {
// 前往客户详情
goDetail(index){
uni.navigateTo({
url:'/pages/dataQuery/details'
})
}
}
}
</script>
<style>
.client-content .li {
background-color: #FFFFFF;
margin-top: 20rpx;
padding: 30rpx 34rpx 30rpx 53rpx;
}
.client-content .li .title {
font-size: 28rpx;
color: #333333;
margin-bottom: 25rpx;
}
.client-content .li .code {
font-size: 24rpx;
margin-bottom: 25rpx;
color: #666666;
}
.client-content .li .label-content {
display: flex;
padding-bottom: 22rpx;
}
.client-content .li .label-content .label {
padding: 10rpx 21rpx;
background-color: #EDEDED;
margin-right: 12rpx;
color: #999999;
font-size: 24rpx;
border-radius: 5rpx;
}
.client-content .li .li-content {
display: flex;
align-items: center;
border-bottom: 2rpx solid #EDEDED;
justify-content: space-between;
}
.client-content .li .li-content .icon {
width: 71rpx;
height: 66rpx;
background-color: #00A2E9;
box-shadow: -5rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
font-size: 36rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.client-content .li .address {
display: flex;
align-items: center;
padding-top: 20rpx;
color: #666666;
font-size: 24rpx
}
.client-content .li .address .img {
width: 17rpx;
height: 24rpx;
margin-right: 10rpx;
}
</style>