客户资料

src/App.vue

@@ -10,7 +10,7 @@
 	  <van-tab title="订单管理" ></van-tab>
 	</van-tabs> -->
 	<div class="tt">
-		<div class="tabline">客户资料</div>
+		<div class="tabline" :class="{'active':active==1}" @click="onClickTab(1)">客户资料</div>
 		<div class="tabline" :class="{'active':active==2}" @click="onClickTab(2)">商品查询</div>
 		<div class="tabline " :class="{'active':active==3}" @click="onClickTab(3)">销售开单</div>
 		<div class="tabline" :class="{'active':active==4}" @click="onClickTab(4)">订单管理</div>
@@ -52,6 +52,8 @@ export default {
 			  this.$router.push('/orderList')
 		  }else if(e==2){
 			  this.$router.push('/goodsQuery')
+		  }else if(e==1){
+			  this.$router.push('/connection')
 		  }
 	  }
   }

src/page/connection/connection.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="hello">
+    <div class="box">
+		<div class="topBox">
+			<div class="topNameBox">
+				<div class="topName">燕儿道路店最长在这里就燕儿道路店燕儿燕儿道路店最长在这里就燕儿道路店燕儿</div>
+				<div class="renzheng">未认证</div>
+			</div>
+			<div class="topmsBox">
+				<div class="topmsLine">
+					<div class="topms">采购额</div>
+					<div class="topms">8999.00</div>
+				</div>
+				<div class="topmsLine">
+					<div class="topms">超期金额</div>
+					<div class="topms">8999.00</div>
+				</div>
+				<div class="topmsLine">
+					<div class="topms">信用额度</div>
+					<div class="topms">8999.00</div>
+				</div>
+				<div class="topmsLine">
+					<div class="topms">可用余额</div>
+					<div class="topms">8999.00</div>
+				</div>
+				<div class="topmsLine">
+					<div class="topms">可用总额度</div>
+					<div class="topms">8999.00</div>
+				</div>
+				<div class="topmsLine">
+					<div class="topms">应收款总额</div>
+					<div class="topms">8999.00</div>
+				</div>
+				<div class="topmsLine">
+					<div class="topms">最近到期日</div>
+					<div class="topms">8999.00</div>
+				</div>
+				<div class="topmsLine">
+					<div class="topms">结算周期</div>
+					<div class="topms">8999.00</div>
+				</div>
+				
+			</div>
+		</div>
+		
+		<div class="tabBox">
+			<div class="tabLine">
+				<div class="tabName" :class="{'tabActive':tabIndex==1}">基本信息</div>
+				<div class="tabAcx" v-if="tabIndex==1"></div>
+			</div>
+			<div class="tabLine">
+				<div class="tabName" :class="{'tabActive':tabIndex==2}">认证信息</div>
+				<div class="tabAcx" v-if="tabIndex==2"></div>
+			</div>
+			<div class="tabLine">
+				<div class="tabName" :class="{'tabActive':tabIndex==3}">评级信息</div>
+				<div class="tabAcx" v-if="tabIndex==3"></div>
+			</div>
+		</div>
+		<!-- 基本信息 -->
+		<div class="basicBox">
+			<div class="ktitle">个人信息</div>
+			<div class="basicLine">
+				<div class="basicLeft">客户简称</div>
+				<div class="basicRight">济南傲瑞达</div>
+			</div>
+			<div class="basicLine">
+				<div class="basicLeft">客户名称</div>
+				<div class="basicRight">济南傲瑞达汽修有限公司</div>
+			</div>
+			<div class="basicLine">
+				<div class="basicLeft">助记码</div>
+				<div class="basicRight">济南傲瑞达汽修有限公司</div>
+			</div>
+			<div class="basicLine">
+				<div class="basicLeft">客户等级</div>
+				<div class="basicRight">济南傲瑞达汽修有限公司</div>
+			</div>
+			<div class="basicLine">
+				<div class="basicLeft">客户等级价格</div>
+				<div class="basicRight">济南傲瑞达汽修有限公司</div>
+			</div>
+			<div class="basicLine">
+				<div class="basicLeft">业务区域</div>
+				<div class="basicRight">济南傲瑞达汽修有限公司</div>
+			</div>
+			<div class="basicLine">
+				<div class="basicLeft">业务负责人</div>
+				<div class="basicRight">济南傲瑞达汽修有限公司</div>
+			</div>
+			<div class="basicLine">
+				<div class="basicLeft">客户类别</div>
+				<div class="basicRight">济南傲瑞达汽修有限公司</div>
+			</div>
+			<div class="basicLine">
+				<div class="basicLeft">电话</div>
+				<div class="basicRight">济南傲瑞达汽修有限公司</div>
+			</div>
+			<div class="basicLine">
+				<div class="basicLeft">邮箱</div>
+				<div class="basicRight">济南傲瑞达汽修有限公司</div>
+			</div>
+			<div class="basicLine">
+				<div class="basicLeft">业务组织</div>
+				<div class="basicRight">济南傲瑞达汽修有限公司</div>
+			</div>
+			<div class="basicLine">
+				<div class="basicLeft">客户所属部门</div>
+				<div class="basicRight">济南傲瑞达汽修有限公司</div>
+			</div>
+			<div class="basicLine">
+				<div class="basicLeft">备注</div>
+				<div class="basicRight">济南傲瑞达汽修有限公司</div>
+			</div>
+		</div>
+		<!-- 联系人 -->
+		<div class="basicBox">
+			<div class="ktitle">联系人</div>
+			<div class="lxrNameBox">
+				<div class="lxrNameLeft">
+					<div class="lxrName">车裂锦文</div>
+					<div class="lxrTx">阿狗</div>
+				</div>
+				<div class="lxrPhone">15527399960</div>
+			</div>
+			<div class="lxrBottom">
+				<div class="lxrBottomLine">企业负责人</div>
+				<div class="lxrBottomLine">主联系人</div>
+			</div>
+		</div>
+		
+	</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'connection',
+  data(){
+  	  return{
+  		 tabIndex:1,
+  	  }
+  },
+  methods:{
+  	  
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.hello{
+	min-height: 100vh;background:#F4F5F7 ;
+}
+.box{
+	padding: 0.2rem 0.24rem;
+}
+.topBox{
+	padding: 0.2rem;
+	background: #ffffff;border-radius: 0.1rem;
+}
+.topNameBox{
+	display: flex;justify-content: space-between;
+}
+.topName{
+	font-weight: 500;
+	color: #333333;
+	font-size: 0.28rem;
+	width: calc(100vw - 2.2rem);
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	-o-text-overflow: ellipsis; 
+}
+.renzheng{
+	color: #333333;font-size: 0.22rem;
+	padding: 0 0.1rem;
+	lin-height: 0.30rem;
+	background: #F4F5F7;
+	border-radius: 0.04rem;
+}
+.topmsLine{
+	width: 25%;
+	text-align: center;
+	font-size: 0.22rem;
+	color: #999999;
+	line-height: 0.30rem;
+	padding-top: 0.2rem;
+}
+.topmsBox{
+	display: flex;
+	flex-wrap: wrap;
+}
+.tabBox{
+	display: flex;
+	justify-content: space-around;border-radius: 0.06rem;
+	background: #ffffff;margin-top: 0.2rem;
+}
+.tabName{
+	color: #333333;padding: 0.16rem 0;
+	line-height: 0.40rem;font-size: 0.28rem;
+}
+.tabAcx{
+	margin: 0 auto;
+	width: 0.60rem;
+	height: 0.04rem;
+	background: #3F90F7;
+}
+.basicBox{
+	padding: 0.3rem 0.2rem;background: #ffffff;margin-top: 0.2rem;
+}
+.ktitle{
+	font-weight: 500;
+	color: #333333;font-size: 0.28rem;
+}
+.basicLine{
+	display: flex;font-size: 0.26rem;padding-top: 0.3rem;
+}
+.basicLeft{
+	color: #666666;width:2rem ;
+}
+.basicRight{
+	color: #666666;
+}
+.lxrNameLeft{
+	display: flex;
+}
+.lxrNameBox{
+	display: flex;padding-top: 0.3rem;
+	justify-content: space-between;
+}
+.lxrName{
+	color: #333333;font-size: 0.26rem;line-height: 0.4rem;
+}
+.lxrTx{
+	color: #999999;font-size: 0.24rem;line-height: 0.4rem;padding-left: 0.16rem;padding-top: 0.02rem;
+}
+.lxrPhone{
+	color: #999999;font-size: 0.24rem;line-height: 0.4rem;
+}
+.lxrBottom{
+	display: flex;padding-top: 0.1rem;
+}
+.lxrBottomLine{
+	margin-right: 0.16rem;
+	color: #999999;font-size: 0.24rem;line-height: 0.4rem;padding: 0 0.06rem;border: 1px solid #EEEEEE;
+}
+</style>

src/page/goods/goodsQuery.vue

@@ -19,7 +19,24 @@
   </div>
   
   <div style="font-size: 0.3rem;" @click="goodsAdaptation">切换品类</div>
+  <div style="font-size: 0.3rem;" @click="djg">多结果</div>
     
+	<div class="stockBox" v-if="moreShow" @click="moreShowHide">
+		<div class="stockCont" @click.stop="">
+			<div class="stockTitle">请选择车型
+			  <img src="../../assets/img/pop_icon_close.png" alt="" class="stockclose" @click="moreShowHide">
+			</div>
+			<div class="carjg">共4条查询结果</div>
+			<div class="carLineBox">
+				<div class="carline" v-for="(item,index) in 4">
+					<div class="carlineName">奥迪 Q7 1.8 手自一体变速器(AMT) 1.8 手自一体变速器(AMT)</div>
+					<img src="../../assets/img/jt.png" alt="" class="carIcon">
+				</div>
+			</div>
+		</div>
+		
+	</div>
+	
   </div>
 </template>
 
@@ -33,6 +50,7 @@ export default {
 	  return{
 		  active:1,
 		  value:'',
+		  moreShow:false,
 	  }
   },
   methods:{
@@ -41,6 +59,12 @@ export default {
 	  },
 	  goodsAdaptation(){
 		  this.$router.push('/goodsAdaptation')
+	  },
+	  djg(){
+		  this.moreShow=true;
+	  },
+	  moreShowHide(){
+		  this.moreShow=false;
 	  }
   }
 }
@@ -110,4 +134,67 @@ export default {
 	  font-size: 0.28rem;
 	  color: #3F90F7;
   }
+  .stockBox{
+  	width: 100%;height: 100%;
+  	position: fixed;
+  	left: 0;
+  	top: 0;
+  	background: rgba(0, 0, 0, 0.6);
+  }
+  .stockCont{
+  	height: 80vh;
+  	margin-top: 20vh;
+  	background: #ffffff;
+  	border-radius: 0.32rem 0.32rem 0px 0px;
+  }
+  .stockTitle{
+  	font-size: 0.30rem;
+  	font-family: PingFangSC-Medium, PingFang SC;
+  	font-weight: 500;
+  	color: #3C3C3C;
+  	padding-top: 0.42rem;
+  	padding-left: 0.32rem;
+  	display: flex;
+  	justify-content: space-between;
+  	padding-right: 0.32rem;
+  }
+  .stockclose{
+  	width: 0.28rem;height: 0.28rem;margin-top: 0.09rem;
+  }
+  .goodsThj{
+  	 width: 1.30rem;
+  	 height: 0.48rem;
+  	 border-radius: 0.24rem;
+  	 border: 1px solid #DDDDDD;
+  	 line-height: 0.48rem;
+  	 text-align: center;
+  	 font-size: 0.24rem;
+  	 color: #3C3C3C;
+  }
+  .transmission{
+  	 width: 1.12rem;
+  	 height: 0.48rem;
+  	 border-radius: 0.24rem;
+  	 border: 1px solid #3F90F7;
+  	 color: #3F90F7;
+  	 font-size: 0.24rem;
+  	 text-align: center;
+  	 line-height: 0.48rem;
+  }
+  .carjg{
+  	color: #999999;font-size: 0.26rem;padding-left: 0.32rem;padding-top: 0.2rem;
+  }
+  .carIcon{
+  	width: 0.32rem;height: 0.32rem;margin-left: 0.35rem;
+  }
+  .carlineName{
+  	color: #3C3C3C;font-size: 0.28rem;
+  }
+  .carline{
+  	display: flex;padding: 0.23rem 0;
+  	border-bottom: 1px solid #EEEEEE;
+  }
+  .carLineBox{
+  	padding: 0 0.32rem;
+  }
 </style>

src/router/index.js

@@ -46,6 +46,11 @@ const router = new Router({
 	  path: '/goodsAdaptation',
 	  name: 'goodsAdaptation',
 	 component: () => import('../page/goods/goodsAdaptation.vue'),
+	},
+	{
+	  path: '/connection',
+	  name: 'connection',
+	 component: () => import('../page/connection/connection.vue'),
 	}
   ]
 })