11

src/page/connection/connection.vue

@@ -44,21 +44,21 @@
 		</div>
 		
 		<div class="tabBox">
-			<div class="tabLine">
+			<div class="tabLine" @click="tabClick(1)">
 				<div class="tabName" :class="{'tabActive':tabIndex==1}">基本信息</div>
 				<div class="tabAcx" v-if="tabIndex==1"></div>
 			</div>
-			<div class="tabLine">
+			<div class="tabLine" @click="tabClick(2)">
 				<div class="tabName" :class="{'tabActive':tabIndex==2}">认证信息</div>
 				<div class="tabAcx" v-if="tabIndex==2"></div>
 			</div>
-			<div class="tabLine">
+			<div class="tabLine" @click="tabClick(3)">
 				<div class="tabName" :class="{'tabActive':tabIndex==3}">评级信息</div>
 				<div class="tabAcx" v-if="tabIndex==3"></div>
 			</div>
 		</div>
 		<!-- 基本信息 -->
-		<div class="basicBox">
+		<div class="basicBox" v-if="tabIndex==1">
 			<div class="ktitle">个人信息</div>
 			<div class="basicLine">
 				<div class="basicLeft">客户简称</div>
@@ -114,7 +114,7 @@
 			</div>
 		</div>
 		<!-- 联系人 -->
-		<div class="basicBox">
+		<div class="basicBox" v-if="tabIndex==1">
 			<div class="ktitle">联系人</div>
 			<div class="lxrNameBox">
 				<div class="lxrNameLeft">
@@ -129,6 +129,127 @@
 			</div>
 		</div>
 		
+		<!-- 认证信息 -->
+		<div v-if="tabIndex==2">
+			<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">371281199012152234</div>
+				</div>
+				<div class="basicLine">
+					<div class="basicLeft">手机号</div>
+					<div class="basicRight">15527399960</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="basicLine">
+					<div class="basicLeft">是否联盟连锁</div>
+					<div class="basicRight">个人</div>
+				</div>
+				<div class="basicLine">
+					<div class="basicLeft">资质</div>
+					<div class="basicRight">371281199012152234</div>
+				</div>
+				<div class="basicLine">
+					<div class="basicLeft">工位数</div>
+					<div class="basicRight">15527399960</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="basicImgline">
+					<div class="basicImglineName">身份证</div>
+					<div>
+						<img src="../../assets/logo.png" alt="" class="basicImg">
+					</div>
+					<div class="basicImglineName">门头照片</div>
+					<div>
+						<img src="../../assets/logo.png" alt="" class="basicImg">
+					</div>
+					<div class="basicImglineName">名片照片</div>
+					<div>
+						<img src="../../assets/logo.png" alt="" class="basicImg">
+					</div>
+					<div class="basicImglineName">前台照片</div>
+					<div>
+						<img src="../../assets/logo.png" alt="" class="basicImg">
+					</div>
+					<div class="basicImglineName">车间照片</div>
+					<div>
+						<img src="../../assets/logo.png" alt="" class="basicImg">
+					</div>
+					<div class="basicImglineName">仓库照片</div>
+					<div>
+						<img src="../../assets/logo.png" alt="" class="basicImg">
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 评级信息 -->
+		<div v-if="tabIndex==3" class="pjxx">
+			<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>
+			
+		</div>
 	</div>
   </div>
 </template>
@@ -138,11 +259,13 @@ export default {
   name: 'connection',
   data(){
   	  return{
-  		 tabIndex:1,
+  		 tabIndex:3,
   	  }
   },
   methods:{
-  	  
+  	  tabClick(num){
+		  this.tabIndex=num
+	  }
   }
 }
 </script>
@@ -219,6 +342,9 @@ export default {
 .basicLeft{
 	color: #666666;width:2rem ;
 }
+.pjxx .basicLeft{
+	color: #666666;width:2.3rem ;
+}
 .basicRight{
 	color: #666666;
 }
@@ -245,4 +371,10 @@ export default {
 	margin-right: 0.16rem;
 	color: #999999;font-size: 0.24rem;line-height: 0.4rem;padding: 0 0.06rem;border: 1px solid #EEEEEE;
 }
+.basicImg{
+height: 1.5rem;	
+}
+.basicImglineName{
+	color: #333333;font-size: 0.26rem;padding: 0.3rem 0;
+}
 </style>

src/page/order/orderList.vue

@@ -1,6 +1,78 @@
 <template>
   <div class="hello">
-    list
+   <div class="top">
+	   <div class="group_28 flex-row justify-between">
+	   	<div class="group_3 flex-row">
+	   	  <img class="label_1" referrerpolicy="no-referrer" src="../../assets/img/icon_search@2x.png" />
+	   	  <input class="text-group_1" placeholder="订单号"  />
+	   	</div>
+	   	<img class="icon_1" referrerpolicy="no-referrer" src="../../assets/img/icon_shai.png" />
+	   </div>
+	   <div class="topTab">
+		   <div class="tabLine" @click="tabClick(1)">
+		   	<div class="tabName" :class="{'tabActive':tabIndex==1}">全部</div>
+		   	<div class="tabAcx" v-if="tabIndex==1"></div>
+		   </div>
+		   <div class="tabLine" @click="tabClick(2)">
+		   	<div class="tabName" :class="{'tabActive':tabIndex==2}">待提交</div>
+		   	<div class="tabAcx" v-if="tabIndex==2"></div>
+		   </div>
+		   <div class="tabLine" @click="tabClick(3)">
+		   	<div class="tabName" :class="{'tabActive':tabIndex==3}">待收款</div>
+		   	<div class="tabAcx" v-if="tabIndex==3"></div>
+		   </div>
+		   <div class="tabLine" @click="tabClick(4)">
+		   	<div class="tabName" :class="{'tabActive':tabIndex==4}">待审核</div>
+		   	<div class="tabAcx" v-if="tabIndex==4"></div>
+		   </div>
+		   <div class="tabLine" @click="tabClick(5)">
+		   	<div class="tabName" :class="{'tabActive':tabIndex==5}">待出库</div>
+		   	<div class="tabAcx" v-if="tabIndex==5"></div>
+		   </div>
+		   <div class="tabLine" @click="tabClick(6)">
+		   	<div class="tabName" :class="{'tabActive':tabIndex==6}">已完成</div>
+		   	<div class="tabAcx" v-if="tabIndex==6"></div>
+		   </div>
+	   </div>
+	 
+   </div>
+   <div class="listBox">
+	   <div class="listLine">
+		   <div class="listLineTop">
+			   <div class="listLineTopLeft">
+				   <div class="codeBox">
+					   SO202303019800002   <img src="../../assets/img/icon_fuzhi.png" alt="" class="copyImg">
+				   </div>
+				   <div class="listTime">2022-02-12 12:21:12</div>
+			   </div>
+			   <div class="listLineTopRight">
+				   <div class="liststatus">待提交</div>
+				   <div class="hdfk">货到付款</div>
+			   </div>
+		   </div>
+		   <div style="padding-top: 0.1rem;padding-bottom: 0.1rem;">
+			   <div class="goodsLine" v-for="(item,index) in 4">
+			   			   <div class="goodsName">耐诺思 铂金火花塞文字很长很长就用省略号耐诺思 铂金火花塞文字很长很长就用省略号</div>
+			   			   <div class="goodsNum">x2</div>
+			   </div>
+		   </div>
+		   <div class="goodsMore">查看更多</div>
+		   <div class="goodstotalBox">
+			   <div class="goodstotal">
+			   			   <div class="goodstotalLeft">共选2种商品  总数量 47</div>
+			   			   <div class="goodstotalRight">￥4,456.09</div>
+			   </div>
+		   </div>
+		   <div class="btnBox">
+			   <div class="goosbtn goosbtn1">关闭</div>
+			   <div class="goosbtn goosbtn1">编辑</div>
+			   <div class="goosbtn goosbtn2">提交</div>
+			   <div class="goosbtn goosbtn2">发送订单</div>
+		   </div>
+		   
+	   </div>
+   </div>
+   
   </div>
 </template>
 
@@ -12,7 +84,7 @@ export default {
   },
   data(){
 	  return{
-		  active:1,
+		  tabIndex:1,
 	  }
   }
 }
@@ -20,5 +92,120 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
+.hello{
+	background: #F4F5F7;
+	min-height: 100vh;
+}
+.label_1{
+	width: 0.3rem;height: 0.3rem;margin-left: 0.24rem;margin-top: 0.17rem;
+}
+.flex-row{
+	display: flex;
+}
+.icon_1{
+	width: 0.44rem;height: 0.44rem;margin-top: 0.1rem;margin-left: 0.3rem;
+}
+.text-group_1{
+	color: #999999;font-size: 0.24rem; border: none;background: #F4F5F7;
+	padding-left: 0.16rem;
+}
+.group_28{
+	background: #ffffff;
+	padding: 0.2rem 0.24rem;
+}
+.group_3{
+	width: 6.24rem;background: #F4F5F7;border-radius: 0.1rem;
+	height: 0.64rem;
+}
+.topTab{
+	background: #ffffff;display: flex;justify-content: space-between;
+	padding: 0 0.24rem;
+}
+.tabName{
+	color: #333333;padding: 0.16rem 0;
+	line-height: 0.40rem;font-size: 0.28rem;text-align: center;
+}
+.tabAcx{
+	margin: 0 auto;
+	width: 0.60rem;
+	height: 0.04rem;
+	background: #3F90F7;
+}
+.tabActive{
+	font-weight: 500;
+	color: #3F90F7;
+}
+.top{
+	position: fixed;
+	width: 100%;
+	top: 0.9rem;
+	left: 0;
+}
+.listBox{
+	padding-top: 2.7rem;
+	padding-left: 0.24rem;
+	padding-right: 0.24rem;
+}
+.listLine{
+	background: #ffffff;margin-top: 0.2rem;border-radius: 0.1rem;
+}
+.copyImg{
+	width: 0.24rem;height: 0.24rem;margin-left: 0.1rem;margin-top: 0.07rem;
+}
+.codeBox{
+	display: flex;color: #3C3C3C;font-size: 0.28rem;line-height: 0.4rem;
+}
+.listLineTop{
+	padding: 0.2rem;border-bottom: 1px solid #EEEEEE;
+	display: flex;
+	justify-content: space-between;
+}
+.listTime{
+	color: #999999;font-size: 0.26rem;padding-top: 0.1rem;
+}
+.liststatus{
+	color: #3F90F7;font-size: 0.28rem;color: #3F90F7;text-align: right;
+}
+.hdfk{
+	color: #3C3C3C;font-size: 0.22rem;padding: 0.08rem 0.1rem;background: #F4F5F7;border-radius: 0.04rem;
+	margin-top: 0.08rem;
+}
+.goodsLine{
+	font-size: 0.26rem;display: flex;
+	justify-content: space-between;
+	padding: 0.12rem 0.2rem;
+}
+.goodsName{
+	color: #3C3C3C;width: calc(100vw - 2rem);
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	-o-text-overflow: ellipsis; 
+}
+.goodsNum{
+	color: #999999;
+}
+.goodsMore{
+	color: #F19D01;padding: 0.2rem;font-size: 0.26rem;
+}
+.goodstotal{
+	display: flex;justify-content: space-between;padding: 0.1rem 0;
+	padding-bottom: 0.27rem;border-bottom: 1px solid #EEEEEE;
+}
+.goodstotalLeft{
+	color: #999999;line-height: 0.38rem;font-size: 0.26rem;
+}
+.goodstotalRight{
+	font-weight: 500;
+	color: #FF4F00;font-size: 0.32rem;line-height: 0.38rem;
+}
+.goodstotalBox{
+	padding: 0 0.2rem;
+}
+.goosbtn{
+	width: 1.5rem;color: #3C3C3C;font-size: 0.28rem;
+	height: 0.56rem;border: 0.02rem solid #DDDDDD;
+	line-height: 0.56rem;
+	border-radius: 0.36rem;text-align: center;
+}
 </style>