11

src/App.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from './page/HelloWorld.vue'
 
 export default {
   name: 'App',
@@ -36,7 +36,7 @@ export default {
   },
   created(){
 	//console.log("..")
-	this.$router.push('/billing')
+	//this.$router.push('/billing')
   },
   methods:{
 	  goRouter(url){

src/components/billing/billing.vue

@@ -1,305 +0,0 @@
-<template>
-  <div class="hello">
-       <div class="line">
-		   <div class="lineLeft">支付方式</div>
-		   <div class="lineRight">
-			   <div class="payType payActive">货到付款</div>
-			   <div class="payType">线上支付</div>
-		   </div>
-	   </div>
-	   <div class="line">
-		   <div class="lineLeft"><span style="color: #FF3B30;">*</span>厂库</div>
-		   <div class="storehouse">
-			   <div class="storehouseName">优配一仓</div>
-			   <img src="../../assets/img/jt.png" alt="" class="jtImg">
-		   </div>
-	   </div>
-	   <div class="line">
-		   <div class="lineLeft">销售备注</div>
-		  
-			    <van-field v-model="value" label="" placeholder="请输入" style="padding-top: 0.25rem;"/>
-		   
-	   </div>
-	   <div class="titleLine">
-		   <div class="titleName">商品列表</div>
-		   <div class="addGoogBtn">添加商品</div>
-	   </div>
-	   <div class="goodsBox">
-		   <div class="goodsLine" v-for="(item,index) in 2">
-			   <div class="goodsLineImgBox">
-				   <img src="../../assets/logo.png" alt="" class="goodsLineImg">
-			   </div>
-			   <div class="goodsright">
-				   <div class="goodsCont">
-				   		<div class="goodsName">欧洲维修(EUROREPAR)机油/润滑欧洲维修(EUROREPAR)机油/润滑 SN级汽车用品 EURO-5 5W30 桶 </div>
-				        <div class="goodsX">
-							<div class="goodsXcont">包装规格：1*1</div>
-							<div class="goodsXcont">可用库存：92132
-							   <span class="goodsXSpan">更多</span>
-							</div>
-						</div>
-						<div class="goodsX">
-							<div class="goodsXcont">本店可用：92132</div>
-							<div class="goodsXcont">库位：LA-0009-001</div>
-						</div>
-						<div class="goodsX">
-							<div class="goodsXcont">
-								价格：<span style="color: #3C3C3C;">¥</span> 
-								<input type="number" class="goodsprice">
-							</div>
-							<div class="goodsXcont goodsNumCont">
-							  <div class="jiajianBOx jianbox">
-								   <img src="../../assets/img/jian.png" alt="" class="jiajianBtn">
-							  </div>
-
-							  <input type="number" class="goodsNum">
-							  <div class="jiajianBOx jiabox">
-							  	<img src="../../assets/img/jia.png" alt="" class="jiajianBtn">
-							  </div>
-							   <span class="goodsXSpan" style="line-height: 0.44rem;padding-top: 1px;">更多</span>
-							</div>
-						</div>
-				   </div>
-				   
-				  <img src="../../assets/img/del.png" alt="" class="delGoods">
-				   
-			   </div>
-			   
-		   </div>
-		   
-		   <div class="assemble">
-			   <div class="assembleLeft">共选2种商品 总数量 47</div>
-			   <div class="assembleRight">￥4,456.09</div>
-		   </div>
-		   
-		   
-	   </div>
-	   <div class="bottomBox">
-		   <div class="Transmission">发给客户确认</div>
-		   <div class="Billing">确认开单</div>
-	   </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  },
-  data(){
-	  return{
-		  active:1,
-		  value:'',
-	  }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-	.bottomBox{
-		position: fixed;
-		background: #ffffff;
-		height:0.91rem;
-		width: 100%;
-		display: flex;
-		justify-content: space-around;
-		left: 0;
-		bottom: 0;
-		padding-top: 0.19rem;
-	}
-	.Transmission{
-		width: 3.36rem;
-		height: 0.72rem;
-		border-radius: 0.08rem;
-		border: 0.02rem solid #3F90F7;
-		text-align: center;
-		line-height: 0.72rem;
-		color: #3F90F7;
-		font-size: 0.28rem;
-	}
-	.Billing{
-		width: 3.36rem;
-		height: 0.72rem;
-		border-radius: 0.08rem;
-		text-align: center;
-		line-height: 0.72rem;
-		color: #ffffff;
-		font-size: 0.28rem;
-		background: #3F90F7;
-	}
-	.hello{
-		min-height: 100vh;
-		background:#F4F5F7 ;
-	}
-	.goodsBox{
-		background: #ffffff;
-	}
-.assemble{
-	display: flex;
-	justify-content: space-between;
-	font-size: 0.24rem;
-	line-height: 0.88rem;
-	padding-left: 1.37rem;
-	padding-right: 0.24rem;
-}
-.assembleLeft{
-	color: #999999;
-}
-.assembleRight{
-	color: #FF4F00;
-}
-.jiajianBtn{
-	width: 0.24rem;
-	height: 0.24rem;
-}
-.goodsNumCont{
-	display: flex;
-}
-.jiajianBOx{
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 0.44rem;
-	height: 0.44rem;
-}
-.jianbox{
-	border-radius: 0.06rem 0px 0px 0.06rem ;
-	border: 1px solid #DDDDDD;
-	border-right: none;
-}
-.jiabox{
-	border-radius: 0px 0.06rem 0.06rem 0px;
-	border: 1px solid #DDDDDD;
-	border-left: none;
-}
-.goodsNum{
-	width: 0.72rem;
-	height: 0.44rem;
-	border: 1px solid #DDDDDD;
-	    padding: 0;
-}
-.line{
-	display: flex;font-size: 0.26rem;
-	border-bottom: 1px solid #F5F5F5;
-	background: #ffffff;
-}
-.lineRight{
-	display: flex;
-}
-.lineLeft{
-	padding-left: 0.25rem;
-	line-height: 0.88rem;
-	color: #666666;
-	width: 1.44rem;
-}
-.payType{
-	width: 1.54rem;
-	height: 0.56rem;
-	background: #F4F5F7;
-	border-radius: 0.28rem;
-	text-align: center;
-	line-height: 0.56rem;
-	color: #333333;
-	font-size: 0.24rem;
-	margin-top: 0.16rem;
-	margin-right: 0.24rem;
-}
-.payActive{
-	width: 1.54rem;
-	height: 0.52rem;
-	background: #F4F5F7;
-	border-radius: 0.28rem;
-	text-align: center;
-	line-height: 0.56rem;
-	color: #3F90F7;
-	font-size: 0.24rem;
-	border: 0.02rem solid #3F90F7;
-	background: #F4F9FF;
-}
-.jtImg{
-	width: 0.32rem;
-	height: 0.32rem;
-}
-.storehouse{
-	display: flex;
-	justify-content: space-between;
-	padding-top: 0.26rem;
-	color: #3C3C3C;
-	width: calc(100% - 1.68rem);
-}
-.titleLine{
-	display: flex;
-	justify-content: space-between;
-	padding: 0.24rem 0.25rem;
-	font-size: 0.28rem;background: #ffffff;
-}
-.titleName{
-	font-weight: 500;
-	color: #3C3C3C;
-}
-.addGoogBtn{
-	font-weight: 400;
-	color: #3F90F7;
-	font-size: 0.26rem;
-	padding-top: 0.08rem;
-}
-.goodsLineImg{
-	width: 0.9rem;height: 0.9rem;
-}
-.delGoods{
-	width: 0.5rem;
-	height: 0.5rem;
-}
-.goodsName{
-	color: #3C3C3C;
-	font-size: 0.26rem;
-	line-height: 0.37rem;
-}
-.goodsLine{
-	display: flex;
-	
-	padding: 0.24rem;
-}
-.goodsright{
-	display: flex;
-	padding-bottom: 0.29rem;
-	border-bottom: 1px solid #EEEEEE;
-}
-.goodsName{
-	width: calc(100vw - 2.3rem);
-	padding-right: 0.3rem;
-	overflow:hidden;
-	text-overflow:ellipsis;
-	display:-webkit-box;
-	-webkit-box-orient:vertical;
-	-webkit-line-clamp:2;
-}
-.goodsright{
-	width: calc(100vw - 1.48rem);
-	padding-left: 0.2rem;
-	
-	
-}
-.goodsX{
-	display: flex;
-	padding-top: 0.08rem;
-}
-.goodsXcont{
-	width: 50%;
-	font-weight: 400;
-	color: #999999;
-	font-size: 0.24rem;
-}
-.goodsXSpan{
-	color: #3F90F7;padding-left: 0.1rem;
-}
-.goodsprice{
-	width: 1.31rem;
-	height: 0.44rem;
-	border-radius: 0.06rem;
-	border: 1px solid #DDDDDD;
-	margin-left: 0.08rem;
-}
-</style>

src/components/goods/goodsList.vue

@@ -1,268 +0,0 @@
-<template>
-  <div class="hello">
-   <div class="again"><重新查询</div>
-  <div class="searchBox">
-		 <img src="../../assets/img/icon_search@2x.png" alt="" class="icon_search">
-		 <input type="text" name="" id="" class="searchInput" placeholder="车型、商品名称、商品规格说明、品牌、规格型号">
-  </div>
-  <div class="typeBox">
-	  <div class="typeLine" @click="plSHow">
-		  品类 <img src="../../assets/img/icon_arrow_down@2x.png" alt="" class="typeIcon">
-	  </div>
-	  <div class="typeLine" style="padding-left: 1.5rem;">
-	  		  品牌 <img src="../../assets/img/icon_arrow_down@2x.png" alt="" class="typeIcon">
-	  </div>
-  </div>
-  <div class="goodsBox">
-  		   <div class="goodsLine" v-for="(item,index) in 2">
-  			   <div class="goodsLineImgBox">
-  				   <img src="../../assets/logo.png" alt="" class="goodsLineImg">
-  			   </div>
-  			   <div class="goodsright">
-  				   <div class="goodsCont">
-  				   		<div class="goodsName">欧洲维修(EUROREPAR)机油/润滑欧洲维修(EUROREPAR)机油/润滑 SN级汽车用品 EURO-5 5W30 桶 </div>
-  				        <div class="goodsX">
-  							<div class="goodsXcont">包装规格：1*1</div>
-  							<div class="goodsXcont">可用库存：92132
-  							   <span class="goodsXSpan">更多</span>
-  							</div>
-  						</div>
-  						<div class="goodsX">
-  							<div class="goodsXcont">本店可用：92132</div>
-  							<div class="goodsXcont">库位：LA-0009-001</div>
-  						</div>
-						<div class="goodsPrice">
-							价格：<span class="goodsPriceNum">￥98</span>上次价格 98.00<span class="goodsXSpan">更多</span>
-						</div>
-						<div class="goodsBottom">
-							<div class="goodsBottomLeft">
-								<div class="goodsThj">替换件(99)</div>
-								<div class="goodsThj" style="margin-left: 0.2rem;">适用车型</div>
-							</div>
-							<div class="transmission">发送</div>
-						</div>
-  						
-  				   </div>
-  				   
-  				  <img src="../../assets/img/icon_cart@2x.png" alt="" class="delGoods">
-  				   
-  			   </div>
-  			   
-  		   </div>
-  		   
-  		  <!-- 品类筛选-->
-  		 <!-- <div class="category">
-			  
-		  </div> -->
-		  <van-popup
-		    v-model:show="showRight"
-		    position="right"
-		    :style="{ width: '90%', height: '100%' }"
-		  >
-		   <div class="categoryBox">
-			   <div class="categoryTop">
-				   <div class="categoryTitle">品类</div>
-				   <div class="fenleiBox">
-					   <div class="fenleiLine" style="padding-left: 0.2rem;">全部</div>
-					   <img src="../../assets/img/icon_pop_arrow@2x.png" alt="" class="fenleiJt">
-					   <div class="fenleiLine">发动机系</div>
-					   <img src="../../assets/img/icon_pop_arrow@2x.png" alt="" class="fenleiJt">
-				   </div>
-			   </div>
-			   <div class="flLineBox">
-				   <div class="flline">全部</div>
-				   <div class="flline">转向助力开关</div>
-				   <div class="flline">真空控制开关</div>
-				   <div class="flline">热敏开关</div>
-				   <div class="flline">其他</div>
-			   </div>
-			  
-			   
-		   </div>
-		  </van-popup>
-  		   
-  </div>
-
-  
-    
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'goodsList',
-  props: {
-    msg: String
-  },
-  data(){
-	  return{
-		  active:1,
-		  value:'',
-		  showRight:false,
-	  }
-  },
-  methods:{
-	  plSHow(){
-		  this.showRight=true;
-	  }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-.categoryTop{
-	position: fixed;
-	left: 0;
-	top: 0;
-	width: 100%;
-}
-.flline{
-	color: #666666;
-	font-size: 0.26rem;
-	padding: 0.25rem 0.2rem;
-}
-.flLineBox{
-	padding-top: 2rem;
-}
-.categoryTitle{
-	color: #333333;font-size: 0.24rem;padding-left: 0.2rem;
-	padding-top: 0.6rem;
-	padding-bottom: 0.18rem;
-}
-.fenleiLine{
-	color: #3F90F7;font-size: 0.26rem;line-height: 0.88rem;
-}
-.fenleiJt{
-	width: 0.13rem;height: 0.19rem;margin-top: 0.35rem;margin-left: 0.05rem;
-}
-.fenleiBox{
-	width: 100%;
-	background:#F4F5F7 ;
-	display: flex;
-}
-.again{
-	color: #666666;font-size: 0.26rem;
-	padding: 0.18rem 0.3rem;
-}
- .icon_search{
-	 width: 0.3rem;height: 0.3rem;
-	 margin-top: 0.17rem;
-	 margin-left: 0.24rem;
- }
- .searchBox{
-	 display: flex;
-	 width: 7.02rem;
-	 height: 0.64rem;
-	 background: #F4F5F7;
-	 border-radius: 0.1rem;
-	 margin: 0 auto;
- }
- .searchInput{
-	 height: 0.64rem;
-	 line-height: 0.64rem;
-	 width: 6rem;
-	 font-size: 0.24rem;
-	 padding: 0;
-	 border: none;
-	 background: #F4F5F7;
-	 padding-left: 0.16rem;
-	 color: #999999;
- }
- .typeLine{
-	 display: flex;
- }
- .typeIcon{
-	 width: 0.24rem;height: 0.24rem;margin-top: 0.07rem;margin-left: 0.06rem;
- }
- .typeBox{
-	 display: flex;color: #333333;font-size: 0.26rem;
-	 padding: 0.18rem 0.24rem;
- }
- .goodsLineImg{
- 	width: 0.9rem;height: 0.9rem;
- }
- .delGoods{
- 	width: 0.5rem;
- 	height: 0.5rem;
- }
- .goodsName{
- 	color: #3C3C3C;
- 	font-size: 0.26rem;
- 	line-height: 0.37rem;
- }
- .goodsLine{
- 	display: flex;
- 	
- 	padding: 0.24rem;
- }
- .goodsright{
- 	display: flex;
- 	padding-bottom: 0.29rem;
- 	border-bottom: 1px solid #EEEEEE;
- }
- .goodsName{
- 	width: calc(100vw - 2.3rem);
- 	padding-right: 0.3rem;
- 	overflow:hidden;
- 	text-overflow:ellipsis;
- 	display:-webkit-box;
- 	-webkit-box-orient:vertical;
- 	-webkit-line-clamp:2;
- }
- .goodsright{
- 	width: calc(100vw - 1.48rem);
- 	padding-left: 0.2rem;
- 	
- 	
- }
- .goodsX{
- 	display: flex;
- 	padding-top: 0.08rem;
- }
- .goodsXcont{
- 	width: 50%;
- 	font-weight: 400;
- 	color: #999999;
- 	font-size: 0.24rem;
- }
- .goodsXSpan{
- 	color: #3F90F7;padding-left: 0.1rem;
- }
- .goodsPrice{
- 	color: #999999;
-	font-size: 0.22rem;
-	padding-top: 0.08rem;
- }
- .goodsPriceNum{
-	 color: #FF4F00;padding-right: 0.16rem;
- }
- .goodsBottom{
-	 display: flex; padding-top: 0.11rem;
-	 justify-content: space-between;
- }
- .goodsBottomLeft{
-	 display: flex;
-	
- }
- .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;
- }
-</style>

src/components/price.vue

@@ -0,0 +1,416 @@
+<template>
+  <div class="hello">
+     <!-- 库存-->
+     <div class="priceBox stockBox" @click="priceHide" >
+     		   <div class="stockCont" @click.stop="">
+     			   <div class="stockTitle">价格
+     			     <img src="../assets/img/pop_icon_close.png" alt="" class="stockclose" @click="priceHide">
+     			   </div>
+     			   <div class="priceBtitleBox">
+     				   <div class="priceBk"></div>
+     				   <div class="priceBtitle">等级价格</div>
+     			   </div>
+     			   <div class="priceFlbox">
+     				   <div class="priceFl">
+     					   <div class="priceFlTitle">最高价</div>
+     					   <div class="priceFlNum">989933</div>
+     				   </div>
+     				   <div class="priceFl">
+     					   <div class="priceFlTitle">标准价</div>
+     					   <div class="priceFlNum" style="color: #FF4F00;">989933</div>
+     				   </div>
+     				   <div class="priceFl">
+     					   <div class="priceFlTitle">最低价</div>
+     					   <div class="priceFlNum">989933</div>
+     				   </div>
+     			   </div>
+     			   <div class="priceBtitleBox">
+     				   <div class="priceBk"></div>
+     				   <div class="priceBtitle">近3次价格</div>
+     			   </div>
+     			   <div class="stTable" >
+     				   <table class="table" border="1" bordercolor="#EEEEEE" style="border-collapse:collapse;">
+     					 <tr>
+     					   <td class="ptd1">销售日期</td>
+     					   <td class="ptd1">销售价格</td>
+     					   <td class="ptd1">销售数量</td>
+     					 </tr>
+     					 <tr>
+     					   <td class="ptd2">2022-01-21</td>
+     					   <td class="ptd2">122</td>
+     					   <td class="ptd2">122</td>
+     					 </tr>
+     				   </table>
+     			   </div>
+     			   <div class="priceBtitleBox">
+     				   <div class="priceBk"></div>
+     				   <div class="priceBtitle">网点价</div>
+     			   </div>
+     			   <div class="priceFlbox">
+     			   				  
+     				   <div class="priceFl">
+     					   <div class="priceFlTitle">网点价</div>
+     					   <div class="priceFlNum" style="color: #FF4F00;">989933</div>
+     				   </div>
+     			   				   
+     			   </div>
+     		   </div>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'price',
+  props: {
+    msg: String
+  },
+  data(){
+  	  return{
+  		  active:1,
+  		  value:'',
+  		  showRight:false,
+  		  stockShow:false,
+  		  tableIndex:1,
+  		  priceShow:false,
+  		  thjShow:false,
+  	  }
+  },
+  methods:{
+	  priceHide(){
+		  this.$emit('priceMethod');
+	  },
+	  stTable(index){
+	  		  this.tableIndex=index;
+	  },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.tihuanj{
+		display: flex;
+	}
+	.tihuanjname{
+		width: calc(100vw - 3rem);
+		overflow:hidden;
+		  white-space: nowrap;
+		  text-overflow: ellipsis;
+		  -o-text-overflow:ellipsis;
+		  padding-left: 0.08rem;
+		  color: #3C3C3C;
+		  font-size: 0.26rem;
+		  line-height: 0.3rem;
+		  padding-right: 0.5rem;
+	}
+	.chu{
+		font-weight: 500;
+		color: #FFFFFF;
+		font-size: 0.22rem;
+		width: 0.30rem;
+		height:0.30rem;
+		background: #FF0000;
+		border-radius: 0.04rem;
+	}
+.priceBtitleBox{
+	padding:0.3rem 0.32rem;
+	display: flex;
+}
+.priceBk{
+	width: 0.06rem;
+	height: 0.24rem;
+	background: #3F90F7;
+	border-radius: 0.04rem;
+}
+.priceBtitle{
+	font-weight: 500;
+	color: #3C3C3C;
+	font-size: 0.26rem;
+	line-height: 0.3rem;
+	padding-left: 0.1rem;
+}
+.priceFlbox{
+	display: flex;
+	padding:0.15rem 0.4rem;
+	justify-content: space-between;
+	text-align: center;
+}
+.priceFlTitle{
+	font-weight: 400;
+	color: #999999;
+	font-size: 0.24rem;
+}
+.priceFlNum{
+	font-size: 0.28rem;
+	font-family: PingFangSC-Medium, PingFang SC;
+	font-weight: 500;
+	color: #333333;
+	padding-top: 0.05rem;
+}
+.ptd1{
+		width: 33%;background: #F4F5F7;
+}
+.ptd2{
+	width: 33%;
+}
+	.table{
+		/* border-collapse:collapse; */
+		font-size: 0.26rem;
+		width: 100%;
+		
+	}
+	.stTable{
+		padding: 0.25rem;
+	}
+	.table tr td{
+		text-align: center;
+		padding: 0.15rem 0;
+	/* border: 1px solid #EEEEEE; */
+	}
+	.th1{
+		width: 70%;background: #F4F5F7;
+	}
+	.th2{
+		width: 30%;background: #F4F5F7;
+	}
+	.td{
+		font-size: 0.26rem;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #666666;
+	}
+	.td2{
+		font-size: 0.26rem;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #3F90F7;
+	}
+	.stLinebox{
+		display: flex;
+		padding: 0.2rem 0.3rem;
+		font-weight: 400;
+		font-size: 0.28rem;
+		color: #3C3C3C;
+		line-height: 0.4rem;
+	}
+	.stLineActive{
+		font-weight: 500;
+	}
+	.stLineKk{
+		width: 0.40rem;
+		height: 0.04rem;
+		background: #3F90F7;
+		margin: 0 auto;
+		margin-top: 0.13rem;
+	}
+	.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;
+	}
+	.sGoodsName{
+		font-weight: 400;
+		color: #333333;
+		font-size: 0.28rem;
+		padding-top: 0.29rem;
+		padding-left: 0.32rem;
+		padding-right: 0.32rem;
+		padding-bottom: 0.22rem;
+	}
+	.stockLineBox{
+		display: flex;
+		justify-content: space-around;
+		font-size: 0.24rem;
+		padding-bottom: 0.2rem;
+	}
+	.stockLine{
+		text-align: center;
+	}
+	.stockLineTitle{
+		color: #999999;
+	}
+	.stockLineNum{
+		font-size: 0.28rem;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		padding-top: 0.1rem;
+	}
+.categoryTop{
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+}
+.flline{
+	color: #666666;
+	font-size: 0.26rem;
+	padding: 0.25rem 0.2rem;
+}
+.flLineBox{
+	padding-top: 2rem;
+}
+.categoryTitle{
+	color: #333333;font-size: 0.24rem;padding-left: 0.2rem;
+	padding-top: 0.6rem;
+	padding-bottom: 0.18rem;
+}
+.fenleiLine{
+	color: #3F90F7;font-size: 0.26rem;line-height: 0.88rem;
+}
+.fenleiJt{
+	width: 0.13rem;height: 0.19rem;margin-top: 0.35rem;margin-left: 0.05rem;
+}
+.fenleiBox{
+	width: 100%;
+	background:#F4F5F7 ;
+	display: flex;
+}
+.again{
+	color: #666666;font-size: 0.26rem;
+	padding: 0.18rem 0.3rem;
+}
+ .icon_search{
+	 width: 0.3rem;height: 0.3rem;
+	 margin-top: 0.17rem;
+	 margin-left: 0.24rem;
+ }
+ .searchBox{
+	 display: flex;
+	 width: 7.02rem;
+	 height: 0.64rem;
+	 background: #F4F5F7;
+	 border-radius: 0.1rem;
+	 margin: 0 auto;
+ }
+ .searchInput{
+	 height: 0.64rem;
+	 line-height: 0.64rem;
+	 width: 6rem;
+	 font-size: 0.24rem;
+	 padding: 0;
+	 border: none;
+	 background: #F4F5F7;
+	 padding-left: 0.16rem;
+	 color: #999999;
+ }
+ .typeLine{
+	 display: flex;
+ }
+ .typeIcon{
+	 width: 0.24rem;height: 0.24rem;margin-top: 0.07rem;margin-left: 0.06rem;
+ }
+ .typeBox{
+	 display: flex;color: #333333;font-size: 0.26rem;
+	 padding: 0.18rem 0.24rem;
+ }
+ .goodsLineImg{
+ 	width: 0.9rem;height: 0.9rem;
+ }
+ .delGoods{
+ 	width: 0.5rem;
+ 	height: 0.5rem;
+ }
+ .goodsName{
+ 	color: #3C3C3C;
+ 	font-size: 0.26rem;
+ 	line-height: 0.37rem;
+ }
+ .goodsLine{
+ 	display: flex;
+ 	
+ 	padding: 0.24rem;
+ }
+ .goodsright{
+ 	display: flex;
+ 	padding-bottom: 0.29rem;
+ 	border-bottom: 1px solid #EEEEEE;
+ }
+ .goodsName{
+ 	width: calc(100vw - 2.3rem);
+ 	padding-right: 0.3rem;
+ 	overflow:hidden;
+ 	text-overflow:ellipsis;
+ 	display:-webkit-box;
+ 	-webkit-box-orient:vertical;
+ 	-webkit-line-clamp:2;
+ }
+ .goodsright{
+ 	width: calc(100vw - 1.48rem);
+ 	padding-left: 0.2rem;
+ 	
+ 	
+ }
+ .goodsX{
+ 	display: flex;
+ 	padding-top: 0.08rem;
+ }
+ .goodsXcont{
+ 	width: 50%;
+ 	font-weight: 400;
+ 	color: #999999;
+ 	font-size: 0.24rem;
+ }
+ .goodsXSpan{
+ 	color: #3F90F7;padding-left: 0.1rem;
+ }
+ .goodsPrice{
+ 	color: #999999;
+	font-size: 0.22rem;
+	padding-top: 0.08rem;
+ }
+ .goodsPriceNum{
+	 color: #FF4F00;padding-right: 0.16rem;
+ }
+ .goodsBottom{
+	 display: flex; padding-top: 0.11rem;
+	 justify-content: space-between;
+ }
+ .goodsBottomLeft{
+	 display: flex;
+	
+ }
+ .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;
+ }
+</style>

src/components/replace.vue

@@ -0,0 +1,396 @@
+<template>
+  <div class="hello">
+    <!-- 替换件 -->
+    
+    <div class="stockBox" @click="thjHide">
+    	<div class="stockCont" @click.stop="">
+    		<div class="stockTitle">替换件
+    		  <img src="../assets/img/pop_icon_close.png" alt="" class="stockclose" @click="thjHide">
+    		</div>
+    		<div class="thjbox">
+    			<div class="goodsLine" v-for="(item,index) in 2">
+    			  			   <div class="goodsLineImgBox">
+    			  				   <img src="../assets/logo.png" alt="" class="goodsLineImg">
+    			  			   </div>
+    			  			   <div class="goodsright">
+    			  				   <div class="goodsCont">
+    			  				   		<div class="tihuanj">
+    										 <div class="chu">促</div> <div class="tihuanjname">欧洲维修(EUROREPAR)机油/润滑欧洲维修(EUROREPAR)机油/润滑 SN级汽车用品 EURO-5 5W30 桶 </div>  
+    									</div>
+    			  				        <div class="goodsX">
+    			  							<div class="goodsXcont">包装规格：1*1</div>
+    			  							<div class="goodsXcont">可用库存：92132</div>
+    			  						</div>
+    			  						
+    									<div class="goodsPrice">
+    										价格：<span class="goodsPriceNum">￥98</span>上次价格 98.00
+    									</div>
+    									
+    			  						
+    			  				   </div>
+    			  				   
+    			  				  <img src="../assets/img/icon_sele.png" alt="" class="delGoods">
+    			  				   
+    			  			   </div>
+    			  			   
+    			</div>
+    		</div>
+    		
+    	</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'replace',
+  props: {
+    msg: String
+  },
+  data(){
+  	  return{
+  		  active:1,
+  		  value:'',
+  		  showRight:false,
+  		  stockShow:false,
+  		  tableIndex:1,
+  		  priceShow:false,
+  		  thjShow:false,
+  	  }
+  },
+  methods:{
+	  thjHide(){
+		  this.$emit('replaceShowMethod');
+	  },
+	  
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.tihuanj{
+		display: flex;
+	}
+	.tihuanjname{
+		width: calc(100vw - 3rem);
+		overflow:hidden;
+		  white-space: nowrap;
+		  text-overflow: ellipsis;
+		  -o-text-overflow:ellipsis;
+		  padding-left: 0.08rem;
+		  color: #3C3C3C;
+		  font-size: 0.26rem;
+		  line-height: 0.3rem;
+		  padding-right: 0.5rem;
+	}
+	.chu{
+		font-weight: 500;
+		color: #FFFFFF;
+		font-size: 0.22rem;
+		width: 0.30rem;
+		height:0.30rem;
+		background: #FF0000;
+		border-radius: 0.04rem;
+	}
+.priceBtitleBox{
+	padding:0.3rem 0.32rem;
+	display: flex;
+}
+.priceBk{
+	width: 0.06rem;
+	height: 0.24rem;
+	background: #3F90F7;
+	border-radius: 0.04rem;
+}
+.priceBtitle{
+	font-weight: 500;
+	color: #3C3C3C;
+	font-size: 0.26rem;
+	line-height: 0.3rem;
+	padding-left: 0.1rem;
+}
+.priceFlbox{
+	display: flex;
+	padding:0.15rem 0.4rem;
+	justify-content: space-between;
+	text-align: center;
+}
+.priceFlTitle{
+	font-weight: 400;
+	color: #999999;
+	font-size: 0.24rem;
+}
+.priceFlNum{
+	font-size: 0.28rem;
+	font-family: PingFangSC-Medium, PingFang SC;
+	font-weight: 500;
+	color: #333333;
+	padding-top: 0.05rem;
+}
+.ptd1{
+		width: 33%;background: #F4F5F7;
+}
+.ptd2{
+	width: 33%;
+}
+	.table{
+		/* border-collapse:collapse; */
+		font-size: 0.26rem;
+		width: 100%;
+		
+	}
+	.stTable{
+		padding: 0.25rem;
+	}
+	.table tr td{
+		text-align: center;
+		padding: 0.15rem 0;
+	/* border: 1px solid #EEEEEE; */
+	}
+	.th1{
+		width: 70%;background: #F4F5F7;
+	}
+	.th2{
+		width: 30%;background: #F4F5F7;
+	}
+	.td{
+		font-size: 0.26rem;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #666666;
+	}
+	.td2{
+		font-size: 0.26rem;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #3F90F7;
+	}
+	.stLinebox{
+		display: flex;
+		padding: 0.2rem 0.3rem;
+		font-weight: 400;
+		font-size: 0.28rem;
+		color: #3C3C3C;
+		line-height: 0.4rem;
+	}
+	.stLineActive{
+		font-weight: 500;
+	}
+	.stLineKk{
+		width: 0.40rem;
+		height: 0.04rem;
+		background: #3F90F7;
+		margin: 0 auto;
+		margin-top: 0.13rem;
+	}
+	.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;
+	}
+	.sGoodsName{
+		font-weight: 400;
+		color: #333333;
+		font-size: 0.28rem;
+		padding-top: 0.29rem;
+		padding-left: 0.32rem;
+		padding-right: 0.32rem;
+		padding-bottom: 0.22rem;
+	}
+	.stockLineBox{
+		display: flex;
+		justify-content: space-around;
+		font-size: 0.24rem;
+		padding-bottom: 0.2rem;
+	}
+	.stockLine{
+		text-align: center;
+	}
+	.stockLineTitle{
+		color: #999999;
+	}
+	.stockLineNum{
+		font-size: 0.28rem;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		padding-top: 0.1rem;
+	}
+.categoryTop{
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+}
+.flline{
+	color: #666666;
+	font-size: 0.26rem;
+	padding: 0.25rem 0.2rem;
+}
+.flLineBox{
+	padding-top: 2rem;
+}
+.categoryTitle{
+	color: #333333;font-size: 0.24rem;padding-left: 0.2rem;
+	padding-top: 0.6rem;
+	padding-bottom: 0.18rem;
+}
+.fenleiLine{
+	color: #3F90F7;font-size: 0.26rem;line-height: 0.88rem;
+}
+.fenleiJt{
+	width: 0.13rem;height: 0.19rem;margin-top: 0.35rem;margin-left: 0.05rem;
+}
+.fenleiBox{
+	width: 100%;
+	background:#F4F5F7 ;
+	display: flex;
+}
+.again{
+	color: #666666;font-size: 0.26rem;
+	padding: 0.18rem 0.3rem;
+}
+ .icon_search{
+	 width: 0.3rem;height: 0.3rem;
+	 margin-top: 0.17rem;
+	 margin-left: 0.24rem;
+ }
+ .searchBox{
+	 display: flex;
+	 width: 7.02rem;
+	 height: 0.64rem;
+	 background: #F4F5F7;
+	 border-radius: 0.1rem;
+	 margin: 0 auto;
+ }
+ .searchInput{
+	 height: 0.64rem;
+	 line-height: 0.64rem;
+	 width: 6rem;
+	 font-size: 0.24rem;
+	 padding: 0;
+	 border: none;
+	 background: #F4F5F7;
+	 padding-left: 0.16rem;
+	 color: #999999;
+ }
+ .typeLine{
+	 display: flex;
+ }
+ .typeIcon{
+	 width: 0.24rem;height: 0.24rem;margin-top: 0.07rem;margin-left: 0.06rem;
+ }
+ .typeBox{
+	 display: flex;color: #333333;font-size: 0.26rem;
+	 padding: 0.18rem 0.24rem;
+ }
+ .goodsLineImg{
+ 	width: 0.9rem;height: 0.9rem;
+ }
+ .delGoods{
+ 	width: 0.5rem;
+ 	height: 0.5rem;
+ }
+ .goodsName{
+ 	color: #3C3C3C;
+ 	font-size: 0.26rem;
+ 	line-height: 0.37rem;
+ }
+ .goodsLine{
+ 	display: flex;
+ 	
+ 	padding: 0.24rem;
+ }
+ .goodsright{
+ 	display: flex;
+ 	padding-bottom: 0.29rem;
+ 	border-bottom: 1px solid #EEEEEE;
+ }
+ .goodsName{
+ 	width: calc(100vw - 2.3rem);
+ 	padding-right: 0.3rem;
+ 	overflow:hidden;
+ 	text-overflow:ellipsis;
+ 	display:-webkit-box;
+ 	-webkit-box-orient:vertical;
+ 	-webkit-line-clamp:2;
+ }
+ .goodsright{
+ 	width: calc(100vw - 1.48rem);
+ 	padding-left: 0.2rem;
+ 	
+ 	
+ }
+ .goodsX{
+ 	display: flex;
+ 	padding-top: 0.08rem;
+ }
+ .goodsXcont{
+ 	width: 50%;
+ 	font-weight: 400;
+ 	color: #999999;
+ 	font-size: 0.24rem;
+ }
+ .goodsXSpan{
+ 	color: #3F90F7;padding-left: 0.1rem;
+ }
+ .goodsPrice{
+ 	color: #999999;
+	font-size: 0.22rem;
+	padding-top: 0.08rem;
+ }
+ .goodsPriceNum{
+	 color: #FF4F00;padding-right: 0.16rem;
+ }
+ .goodsBottom{
+	 display: flex; padding-top: 0.11rem;
+	 justify-content: space-between;
+ }
+ .goodsBottomLeft{
+	 display: flex;
+	
+ }
+ .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;
+ }
+</style>

src/components/stock.vue

@@ -0,0 +1,445 @@
+<template>
+  <div class="hello">
+     <!-- 库存-->
+     <div class="stockBox" @click="stockHide">
+     		   <div class="stockCont" @click.stop="">
+     			   <div class="stockTitle">库存分布详情
+     			     <img src="../assets/img/pop_icon_close.png" alt="" class="stockclose" @click="stockHide">
+     			   </div>
+     			   <div class="sGoodsName">欧洲维修(EUROREPAR)机油/润滑 SN级汽车用品 EURO-5 5W30 欧洲维修(EUROREPAR) </div>
+     			   <div class="stockLineBox">
+     				   <div class="stockLine">
+     					   <div class="stockLineTitle">可用总数</div>
+     					   <div class="stockLineNum" style="color: #3F90F7;">4500</div>
+     				   </div>
+     				   <div class="stockLine">
+     					   <div class="stockLineTitle">本店</div>
+     					   <div class="stockLineNum">4500</div>
+     				   </div>
+     				   <div class="stockLine">
+     					   <div class="stockLineTitle">共享</div>
+     					   <div class="stockLineNum">4500</div>
+     				   </div>
+     				   <div class="stockLine">
+     					   <div class="stockLineTitle">分公司</div>
+     					   <div class="stockLineNum">4500</div>
+     				   </div>
+     				   <div class="stockLine">
+     					   <div class="stockLineTitle">总部</div>
+     					   <div class="stockLineNum">4500</div>
+     				   </div>
+     			   </div>
+     			   <div style="height: 0.20rem;background: #F4F5F7;"></div>
+     			   <div class="stockTableBox">
+     				   <div class="stLinebox">
+     					   <div class="stLine" style="padding-right: 1rem;" @click="stTable(1)">
+     						   <div class="stLineTitle " :class="{'stLineActive':tableIndex==1}">本店</div>
+     						   <div class="stLineKk" v-if="tableIndex==1"></div>
+     					   </div>
+     					   <div class="stLine" :class="{'stLineActive':tableIndex==2}" style="padding-right: 1rem;" @click="stTable(2)">
+     						   <div class="stLineTitle">共享</div>
+     						   <div class="stLineKk" v-if="tableIndex==2"></div>
+     					   </div>
+     					   <div class="stLine" :class="{'stLineActive':tableIndex==3}" @click="stTable(3)">
+     						   <div class="stLineTitle">分公司</div>
+     						   <div class="stLineKk" v-if="tableIndex==3"></div>
+     					   </div>
+     				   </div>
+     				   <div class="stTable" v-if="tableIndex==1">
+     					   <table class="table" border="1" bordercolor="#EEEEEE" style="border-collapse:collapse;">
+     					     <tr>
+     					       <td class="th1">仓库</td>
+     					       <td class="th2">可用库存</td>
+     					     </tr>
+     					     <tr>
+     					       <td class="td">January</td>
+     					       <td class="td">$100</td>
+     					     </tr>
+     					   </table>
+     				   </div>
+     				   <div class="stTable" v-if="tableIndex==2">
+     						   <table class="table" border="1" bordercolor="#EEEEEE" style="border-collapse:collapse;">
+     							 <tr>
+     							   <td class="th1">门店</td>
+     							   <td class="th2">可用库存</td>
+     							 </tr>
+     							 <tr>
+     							   <td class="td">January</td>
+     							   <td class="td2">122</td>
+     							 </tr>
+     						   </table>
+     				   </div>
+     				   <div class="stTable" v-if="tableIndex==3">
+     					   <table class="table" border="1" bordercolor="#EEEEEE" style="border-collapse:collapse;">
+     						 <tr>
+     						   <td class="th1">分公司</td>
+     						   <td class="th2">可用库存</td>
+     						 </tr>
+     						 <tr>
+     						   <td class="td">January</td>
+     						   <td class="td">122</td>
+     						 </tr>
+     					   </table>
+     				   </div>
+     			   </div>
+     		   </div>
+     </div>
+     
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'stock',
+  props: {
+    msg: String
+  },
+  data(){
+  	  return{
+  		  active:1,
+  		  value:'',
+  		  showRight:false,
+  		  stockShow:false,
+  		  tableIndex:1,
+  		  priceShow:false,
+  		  thjShow:false,
+  	  }
+  },
+  methods:{
+	  stockHide(){
+		  this.$emit('fatherMethod');
+	  },
+	  stTable(index){
+	  		  this.tableIndex=index;
+	  },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.tihuanj{
+		display: flex;
+	}
+	.tihuanjname{
+		width: calc(100vw - 3rem);
+		overflow:hidden;
+		  white-space: nowrap;
+		  text-overflow: ellipsis;
+		  -o-text-overflow:ellipsis;
+		  padding-left: 0.08rem;
+		  color: #3C3C3C;
+		  font-size: 0.26rem;
+		  line-height: 0.3rem;
+		  padding-right: 0.5rem;
+	}
+	.chu{
+		font-weight: 500;
+		color: #FFFFFF;
+		font-size: 0.22rem;
+		width: 0.30rem;
+		height:0.30rem;
+		background: #FF0000;
+		border-radius: 0.04rem;
+	}
+.priceBtitleBox{
+	padding:0.3rem 0.32rem;
+	display: flex;
+}
+.priceBk{
+	width: 0.06rem;
+	height: 0.24rem;
+	background: #3F90F7;
+	border-radius: 0.04rem;
+}
+.priceBtitle{
+	font-weight: 500;
+	color: #3C3C3C;
+	font-size: 0.26rem;
+	line-height: 0.3rem;
+	padding-left: 0.1rem;
+}
+.priceFlbox{
+	display: flex;
+	padding:0.15rem 0.4rem;
+	justify-content: space-between;
+	text-align: center;
+}
+.priceFlTitle{
+	font-weight: 400;
+	color: #999999;
+	font-size: 0.24rem;
+}
+.priceFlNum{
+	font-size: 0.28rem;
+	font-family: PingFangSC-Medium, PingFang SC;
+	font-weight: 500;
+	color: #333333;
+	padding-top: 0.05rem;
+}
+.ptd1{
+		width: 33%;background: #F4F5F7;
+}
+.ptd2{
+	width: 33%;
+}
+	.table{
+		/* border-collapse:collapse; */
+		font-size: 0.26rem;
+		width: 100%;
+		
+	}
+	.stTable{
+		padding: 0.25rem;
+	}
+	.table tr td{
+		text-align: center;
+		padding: 0.15rem 0;
+	/* border: 1px solid #EEEEEE; */
+	}
+	.th1{
+		width: 70%;background: #F4F5F7;
+	}
+	.th2{
+		width: 30%;background: #F4F5F7;
+	}
+	.td{
+		font-size: 0.26rem;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #666666;
+	}
+	.td2{
+		font-size: 0.26rem;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #3F90F7;
+	}
+	.stLinebox{
+		display: flex;
+		padding: 0.2rem 0.3rem;
+		font-weight: 400;
+		font-size: 0.28rem;
+		color: #3C3C3C;
+		line-height: 0.4rem;
+	}
+	.stLineActive{
+		font-weight: 500;
+	}
+	.stLineKk{
+		width: 0.40rem;
+		height: 0.04rem;
+		background: #3F90F7;
+		margin: 0 auto;
+		margin-top: 0.13rem;
+	}
+	.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;
+	}
+	.sGoodsName{
+		font-weight: 400;
+		color: #333333;
+		font-size: 0.28rem;
+		padding-top: 0.29rem;
+		padding-left: 0.32rem;
+		padding-right: 0.32rem;
+		padding-bottom: 0.22rem;
+	}
+	.stockLineBox{
+		display: flex;
+		justify-content: space-around;
+		font-size: 0.24rem;
+		padding-bottom: 0.2rem;
+	}
+	.stockLine{
+		text-align: center;
+	}
+	.stockLineTitle{
+		color: #999999;
+	}
+	.stockLineNum{
+		font-size: 0.28rem;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		padding-top: 0.1rem;
+	}
+.categoryTop{
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+}
+.flline{
+	color: #666666;
+	font-size: 0.26rem;
+	padding: 0.25rem 0.2rem;
+}
+.flLineBox{
+	padding-top: 2rem;
+}
+.categoryTitle{
+	color: #333333;font-size: 0.24rem;padding-left: 0.2rem;
+	padding-top: 0.6rem;
+	padding-bottom: 0.18rem;
+}
+.fenleiLine{
+	color: #3F90F7;font-size: 0.26rem;line-height: 0.88rem;
+}
+.fenleiJt{
+	width: 0.13rem;height: 0.19rem;margin-top: 0.35rem;margin-left: 0.05rem;
+}
+.fenleiBox{
+	width: 100%;
+	background:#F4F5F7 ;
+	display: flex;
+}
+.again{
+	color: #666666;font-size: 0.26rem;
+	padding: 0.18rem 0.3rem;
+}
+ .icon_search{
+	 width: 0.3rem;height: 0.3rem;
+	 margin-top: 0.17rem;
+	 margin-left: 0.24rem;
+ }
+ .searchBox{
+	 display: flex;
+	 width: 7.02rem;
+	 height: 0.64rem;
+	 background: #F4F5F7;
+	 border-radius: 0.1rem;
+	 margin: 0 auto;
+ }
+ .searchInput{
+	 height: 0.64rem;
+	 line-height: 0.64rem;
+	 width: 6rem;
+	 font-size: 0.24rem;
+	 padding: 0;
+	 border: none;
+	 background: #F4F5F7;
+	 padding-left: 0.16rem;
+	 color: #999999;
+ }
+ .typeLine{
+	 display: flex;
+ }
+ .typeIcon{
+	 width: 0.24rem;height: 0.24rem;margin-top: 0.07rem;margin-left: 0.06rem;
+ }
+ .typeBox{
+	 display: flex;color: #333333;font-size: 0.26rem;
+	 padding: 0.18rem 0.24rem;
+ }
+ .goodsLineImg{
+ 	width: 0.9rem;height: 0.9rem;
+ }
+ .delGoods{
+ 	width: 0.5rem;
+ 	height: 0.5rem;
+ }
+ .goodsName{
+ 	color: #3C3C3C;
+ 	font-size: 0.26rem;
+ 	line-height: 0.37rem;
+ }
+ .goodsLine{
+ 	display: flex;
+ 	
+ 	padding: 0.24rem;
+ }
+ .goodsright{
+ 	display: flex;
+ 	padding-bottom: 0.29rem;
+ 	border-bottom: 1px solid #EEEEEE;
+ }
+ .goodsName{
+ 	width: calc(100vw - 2.3rem);
+ 	padding-right: 0.3rem;
+ 	overflow:hidden;
+ 	text-overflow:ellipsis;
+ 	display:-webkit-box;
+ 	-webkit-box-orient:vertical;
+ 	-webkit-line-clamp:2;
+ }
+ .goodsright{
+ 	width: calc(100vw - 1.48rem);
+ 	padding-left: 0.2rem;
+ 	
+ 	
+ }
+ .goodsX{
+ 	display: flex;
+ 	padding-top: 0.08rem;
+ }
+ .goodsXcont{
+ 	width: 50%;
+ 	font-weight: 400;
+ 	color: #999999;
+ 	font-size: 0.24rem;
+ }
+ .goodsXSpan{
+ 	color: #3F90F7;padding-left: 0.1rem;
+ }
+ .goodsPrice{
+ 	color: #999999;
+	font-size: 0.22rem;
+	padding-top: 0.08rem;
+ }
+ .goodsPriceNum{
+	 color: #FF4F00;padding-right: 0.16rem;
+ }
+ .goodsBottom{
+	 display: flex; padding-top: 0.11rem;
+	 justify-content: space-between;
+ }
+ .goodsBottomLeft{
+	 display: flex;
+	
+ }
+ .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;
+ }
+</style>

src/page/billing/billing.vue

@@ -0,0 +1,614 @@
+<template>
+  <div class="hello">
+       <div class="line">
+		   <div class="lineLeft">支付方式</div>
+		   <div class="lineRight">
+			   <div class="payType payActive">货到付款</div>
+			   <div class="payType">线上支付</div>
+		   </div>
+	   </div>
+	   <div class="line">
+		   <div class="lineLeft"><span style="color: #FF3B30;">*</span>厂库</div>
+		   <div class="storehouse">
+			   <div class="storehouseName">优配一仓</div>
+			   <img src="../../assets/img/jt.png" alt="" class="jtImg">
+		   </div>
+	   </div>
+	   <div class="line">
+		   <div class="lineLeft">销售备注</div>
+		  
+			    <van-field v-model="value" label="" placeholder="请输入" style="padding-top: 0.25rem;"/>
+		   
+	   </div>
+	   <div class="titleLine">
+		   <div class="titleName">商品列表</div>
+		   <div class="addGoogBtn">添加商品</div>
+	   </div>
+	   <div class="goodsBox">
+		   <div class="goodsLine" v-for="(item,index) in 2">
+			   <div class="goodsLineImgBox">
+				   <img src="../../assets/logo.png" alt="" class="goodsLineImg">
+			   </div>
+			   <div class="goodsright">
+				   <div class="goodsCont">
+				   		<div class="goodsName">欧洲维修(EUROREPAR)机油/润滑欧洲维修(EUROREPAR)机油/润滑 SN级汽车用品 EURO-5 5W30 桶 </div>
+				        <div class="goodsX">
+							<div class="goodsXcont">包装规格：1*1</div>
+							<div class="goodsXcont">可用库存：92132
+							   <span class="goodsXSpan" @click="stockShowBtn">更多</span>
+							</div>
+						</div>
+						<div class="goodsX">
+							<div class="goodsXcont">本店可用：92132</div>
+							<div class="goodsXcont">库位：LA-0009-001</div>
+						</div>
+						<div class="goodsX">
+							<div class="goodsXcont">
+								价格：<span style="color: #3C3C3C;">¥</span> 
+								<input type="number" class="goodsprice">
+							</div>
+							<div class="goodsXcont goodsNumCont">
+							  <div class="jiajianBOx jianbox">
+								   <img src="../../assets/img/jian.png" alt="" class="jiajianBtn">
+							  </div>
+
+							  <input type="number" class="goodsNum">
+							  <div class="jiajianBOx jiabox">
+							  	<img src="../../assets/img/jia.png" alt="" class="jiajianBtn">
+							  </div>
+							   <span class="goodsXSpan" style="line-height: 0.44rem;padding-top: 1px;" @click="priceShowBtn">更多</span>
+							</div>
+						</div>
+				   </div>
+				   
+				  <img src="../../assets/img/del.png" alt="" class="delGoods">
+				   
+			   </div>
+			   
+		   </div>
+		   
+		   <div class="assemble">
+			   <div class="assembleLeft">共选2种商品 总数量 47</div>
+			   <div class="assembleRight">￥4,456.09</div>
+		   </div>
+		   
+		   
+	   </div>
+	   <div class="bottomBox">
+		   <div class="Transmission">发给客户确认</div>
+		   <div class="Billing">确认开单</div>
+	   </div>
+	   
+	   <!-- 库存-->
+	   <div class="stockBox" v-if="stockShow" @click="stockHide">
+		   <div class="stockCont" @click.stop="">
+			   <div class="stockTitle">库存分布详情
+			     <img src="../../assets/img/pop_icon_close.png" alt="" class="stockclose">
+			   </div>
+			   <div class="sGoodsName">欧洲维修(EUROREPAR)机油/润滑 SN级汽车用品 EURO-5 5W30 欧洲维修(EUROREPAR) </div>
+			   <div class="stockLineBox">
+				   <div class="stockLine">
+					   <div class="stockLineTitle">可用总数</div>
+					   <div class="stockLineNum" style="color: #3F90F7;">4500</div>
+				   </div>
+				   <div class="stockLine">
+					   <div class="stockLineTitle">本店</div>
+					   <div class="stockLineNum">4500</div>
+				   </div>
+				   <div class="stockLine">
+					   <div class="stockLineTitle">共享</div>
+					   <div class="stockLineNum">4500</div>
+				   </div>
+				   <div class="stockLine">
+					   <div class="stockLineTitle">分公司</div>
+					   <div class="stockLineNum">4500</div>
+				   </div>
+				   <div class="stockLine">
+					   <div class="stockLineTitle">总部</div>
+					   <div class="stockLineNum">4500</div>
+				   </div>
+			   </div>
+			   <div style="height: 0.20rem;background: #F4F5F7;"></div>
+			   <div class="stockTableBox">
+				   <div class="stLinebox">
+					   <div class="stLine" style="padding-right: 1rem;" @click="stTable(1)">
+						   <div class="stLineTitle " :class="{'stLineActive':tableIndex==1}">本店</div>
+						   <div class="stLineKk" v-if="tableIndex==1"></div>
+					   </div>
+					   <div class="stLine" :class="{'stLineActive':tableIndex==2}" style="padding-right: 1rem;" @click="stTable(2)">
+						   <div class="stLineTitle">共享</div>
+						   <div class="stLineKk" v-if="tableIndex==2"></div>
+					   </div>
+					   <div class="stLine" :class="{'stLineActive':tableIndex==3}" @click="stTable(3)">
+						   <div class="stLineTitle">分公司</div>
+						   <div class="stLineKk" v-if="tableIndex==3"></div>
+					   </div>
+				   </div>
+				   <div class="stTable" v-if="tableIndex==1">
+					   <table class="table" border="1" bordercolor="#EEEEEE" style="border-collapse:collapse;">
+					     <tr>
+					       <td class="th1">仓库</td>
+					       <td class="th2">可用库存</td>
+					     </tr>
+					     <tr>
+					       <td class="td">January</td>
+					       <td class="td">$100</td>
+					     </tr>
+					   </table>
+				   </div>
+				   <div class="stTable" v-if="tableIndex==2">
+						   <table class="table" border="1" bordercolor="#EEEEEE" style="border-collapse:collapse;">
+							 <tr>
+							   <td class="th1">门店</td>
+							   <td class="th2">可用库存</td>
+							 </tr>
+							 <tr>
+							   <td class="td">January</td>
+							   <td class="td2">122</td>
+							 </tr>
+						   </table>
+				   </div>
+				   <div class="stTable" v-if="tableIndex==3">
+					   <table class="table" border="1" bordercolor="#EEEEEE" style="border-collapse:collapse;">
+						 <tr>
+						   <td class="th1">分公司</td>
+						   <td class="th2">可用库存</td>
+						 </tr>
+						 <tr>
+						   <td class="td">January</td>
+						   <td class="td">122</td>
+						 </tr>
+					   </table>
+				   </div>
+			   </div>
+		   </div>
+	   </div>
+	   
+	   
+	   <div class="priceBox stockBox" @click="priceHide" v-if="priceShow">
+	   		   <div class="stockCont" @click.stop="">
+	   			   <div class="stockTitle">价格
+	   			     <img src="../../assets/img/pop_icon_close.png" alt="" class="stockclose" @click="priceHide">
+	   			   </div>
+	   			   <div class="priceBtitleBox">
+	   				   <div class="priceBk"></div>
+	   				   <div class="priceBtitle">等级价格</div>
+	   			   </div>
+	   			   <div class="priceFlbox">
+	   				   <div class="priceFl">
+	   					   <div class="priceFlTitle">最高价</div>
+	   					   <div class="priceFlNum">989933</div>
+	   				   </div>
+	   				   <div class="priceFl">
+	   					   <div class="priceFlTitle">标准价</div>
+	   					   <div class="priceFlNum" style="color: #FF4F00;">989933</div>
+	   				   </div>
+	   				   <div class="priceFl">
+	   					   <div class="priceFlTitle">最低价</div>
+	   					   <div class="priceFlNum">989933</div>
+	   				   </div>
+	   			   </div>
+	   			   <div class="priceBtitleBox">
+	   				   <div class="priceBk"></div>
+	   				   <div class="priceBtitle">近3次价格</div>
+	   			   </div>
+	   			   <div class="stTable" >
+	   				   <table class="table" border="1" bordercolor="#EEEEEE" style="border-collapse:collapse;">
+	   					 <tr>
+	   					   <td class="ptd1">销售日期</td>
+	   					   <td class="ptd1">销售价格</td>
+	   					   <td class="ptd1">销售数量</td>
+	   					 </tr>
+	   					 <tr>
+	   					   <td class="ptd2">2022-01-21</td>
+	   					   <td class="ptd2">122</td>
+	   					   <td class="ptd2">122</td>
+	   					 </tr>
+	   				   </table>
+	   			   </div>
+	   			   <div class="priceBtitleBox">
+	   				   <div class="priceBk"></div>
+	   				   <div class="priceBtitle">网点价</div>
+	   			   </div>
+	   			   <div class="priceFlbox">
+	   			   				  
+	   				   <div class="priceFl">
+	   					   <div class="priceFlTitle">网点价</div>
+	   					   <div class="priceFlNum" style="color: #FF4F00;">989933</div>
+	   				   </div>
+	   			   				   
+	   			   </div>
+	   		   </div>
+	   </div>
+	   
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data(){
+	  return{
+		  active:1,
+		  value:'',
+		  stockShow:false,
+		  tableIndex:1,
+		   priceShow:false,
+	  }
+  },
+  methods:{
+	  stockShowBtn(){
+		  this.stockShow=true;
+	  },
+	  stockHide(){
+		  this.stockShow=false;
+	  },
+	  stTable(index){
+		  this.tableIndex=index;
+	  },
+	  priceHide(){
+	  		  this.priceShow=false;
+	  },
+	  priceShowBtn(){
+	  		  this.priceShow=true;
+	  }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.priceBtitleBox{
+		padding:0.3rem 0.32rem;
+		display: flex;
+	}
+	.priceBk{
+		width: 0.06rem;
+		height: 0.24rem;
+		background: #3F90F7;
+		border-radius: 0.04rem;
+	}
+	.priceBtitle{
+		font-weight: 500;
+		color: #3C3C3C;
+		font-size: 0.26rem;
+		line-height: 0.3rem;
+		padding-left: 0.1rem;
+	}
+	.priceFlbox{
+		display: flex;
+		padding:0.15rem 0.4rem;
+		justify-content: space-between;
+		text-align: center;
+	}
+	.priceFlTitle{
+		font-weight: 400;
+		color: #999999;
+		font-size: 0.24rem;
+	}
+	.priceFlNum{
+		font-size: 0.28rem;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		padding-top: 0.05rem;
+	}
+	.ptd1{
+			width: 33%;background: #F4F5F7;
+	}
+	.ptd2{
+		width: 33%;
+	}
+.table{
+	/* border-collapse:collapse; */
+	font-size: 0.26rem;
+	width: 100%;
+	
+}
+.stTable{
+	padding: 0.25rem;
+}
+.table tr td{
+	text-align: center;
+	padding: 0.15rem 0;
+/* border: 1px solid #EEEEEE; */
+}
+.th1{
+	width: 70%;background: #F4F5F7;
+}
+.th2{
+	width: 30%;background: #F4F5F7;
+}
+.td{
+	font-size: 0.26rem;
+	font-family: PingFangSC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #666666;
+}
+.td2{
+	font-size: 0.26rem;
+	font-family: PingFangSC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #3F90F7;
+}
+.stLinebox{
+	display: flex;
+	padding: 0.2rem 0.3rem;
+	font-weight: 400;
+	font-size: 0.28rem;
+	color: #3C3C3C;
+	line-height: 0.4rem;
+}
+.stLineActive{
+	font-weight: 500;
+}
+.stLineKk{
+	width: 0.40rem;
+	height: 0.04rem;
+	background: #3F90F7;
+	margin: 0 auto;
+	margin-top: 0.13rem;
+}
+.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;
+}
+.sGoodsName{
+	font-weight: 400;
+	color: #333333;
+	font-size: 0.28rem;
+	padding-top: 0.29rem;
+	padding-left: 0.32rem;
+	padding-right: 0.32rem;
+	padding-bottom: 0.22rem;
+}
+.stockLineBox{
+	display: flex;
+	justify-content: space-around;
+	font-size: 0.24rem;
+	padding-bottom: 0.2rem;
+}
+.stockLine{
+	text-align: center;
+}
+.stockLineTitle{
+	color: #999999;
+}
+.stockLineNum{
+	font-size: 0.28rem;
+	font-family: PingFangSC-Medium, PingFang SC;
+	font-weight: 500;
+	color: #333333;
+	padding-top: 0.1rem;
+}
+	.bottomBox{
+		position: fixed;
+		background: #ffffff;
+		height:0.91rem;
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+		left: 0;
+		bottom: 0;
+		padding-top: 0.19rem;
+	}
+	.Transmission{
+		width: 3.36rem;
+		height: 0.72rem;
+		border-radius: 0.08rem;
+		border: 0.02rem solid #3F90F7;
+		text-align: center;
+		line-height: 0.72rem;
+		color: #3F90F7;
+		font-size: 0.28rem;
+	}
+	.Billing{
+		width: 3.36rem;
+		height: 0.72rem;
+		border-radius: 0.08rem;
+		text-align: center;
+		line-height: 0.72rem;
+		color: #ffffff;
+		font-size: 0.28rem;
+		background: #3F90F7;
+	}
+	.hello{
+		min-height: 100vh;
+		background:#F4F5F7 ;
+	}
+	.goodsBox{
+		background: #ffffff;
+	}
+.assemble{
+	display: flex;
+	justify-content: space-between;
+	font-size: 0.24rem;
+	line-height: 0.88rem;
+	padding-left: 1.37rem;
+	padding-right: 0.24rem;
+}
+.assembleLeft{
+	color: #999999;
+}
+.assembleRight{
+	color: #FF4F00;
+}
+.jiajianBtn{
+	width: 0.24rem;
+	height: 0.24rem;
+}
+.goodsNumCont{
+	display: flex;
+}
+.jiajianBOx{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 0.44rem;
+	height: 0.44rem;
+}
+.jianbox{
+	border-radius: 0.06rem 0px 0px 0.06rem ;
+	border: 1px solid #DDDDDD;
+	border-right: none;
+}
+.jiabox{
+	border-radius: 0px 0.06rem 0.06rem 0px;
+	border: 1px solid #DDDDDD;
+	border-left: none;
+}
+.goodsNum{
+	width: 0.72rem;
+	height: 0.44rem;
+	border: 1px solid #DDDDDD;
+	    padding: 0;
+}
+.line{
+	display: flex;font-size: 0.26rem;
+	border-bottom: 1px solid #F5F5F5;
+	background: #ffffff;
+}
+.lineRight{
+	display: flex;
+}
+.lineLeft{
+	padding-left: 0.25rem;
+	line-height: 0.88rem;
+	color: #666666;
+	width: 1.44rem;
+}
+.payType{
+	width: 1.54rem;
+	height: 0.56rem;
+	background: #F4F5F7;
+	border-radius: 0.28rem;
+	text-align: center;
+	line-height: 0.56rem;
+	color: #333333;
+	font-size: 0.24rem;
+	margin-top: 0.16rem;
+	margin-right: 0.24rem;
+}
+.payActive{
+	width: 1.54rem;
+	height: 0.52rem;
+	background: #F4F5F7;
+	border-radius: 0.28rem;
+	text-align: center;
+	line-height: 0.56rem;
+	color: #3F90F7;
+	font-size: 0.24rem;
+	border: 0.02rem solid #3F90F7;
+	background: #F4F9FF;
+}
+.jtImg{
+	width: 0.32rem;
+	height: 0.32rem;
+}
+.storehouse{
+	display: flex;
+	justify-content: space-between;
+	padding-top: 0.26rem;
+	color: #3C3C3C;
+	width: calc(100% - 1.68rem);
+}
+.titleLine{
+	display: flex;
+	justify-content: space-between;
+	padding: 0.24rem 0.25rem;
+	font-size: 0.28rem;background: #ffffff;
+}
+.titleName{
+	font-weight: 500;
+	color: #3C3C3C;
+}
+.addGoogBtn{
+	font-weight: 400;
+	color: #3F90F7;
+	font-size: 0.26rem;
+	padding-top: 0.08rem;
+}
+.goodsLineImg{
+	width: 0.9rem;height: 0.9rem;
+}
+.delGoods{
+	width: 0.5rem;
+	height: 0.5rem;
+}
+.goodsName{
+	color: #3C3C3C;
+	font-size: 0.26rem;
+	line-height: 0.37rem;
+}
+.goodsLine{
+	display: flex;
+	
+	padding: 0.24rem;
+}
+.goodsright{
+	display: flex;
+	padding-bottom: 0.29rem;
+	border-bottom: 1px solid #EEEEEE;
+}
+.goodsName{
+	width: calc(100vw - 2.3rem);
+	padding-right: 0.3rem;
+	overflow:hidden;
+	text-overflow:ellipsis;
+	display:-webkit-box;
+	-webkit-box-orient:vertical;
+	-webkit-line-clamp:2;
+}
+.goodsright{
+	width: calc(100vw - 1.48rem);
+	padding-left: 0.2rem;
+	
+	
+}
+.goodsX{
+	display: flex;
+	padding-top: 0.08rem;
+}
+.goodsXcont{
+	width: 50%;
+	font-weight: 400;
+	color: #999999;
+	font-size: 0.24rem;
+}
+.goodsXSpan{
+	color: #3F90F7;padding-left: 0.1rem;
+}
+.goodsprice{
+	width: 1.31rem;
+	height: 0.44rem;
+	border-radius: 0.06rem;
+	border: 1px solid #DDDDDD;
+	margin-left: 0.08rem;
+}
+</style>

src/page/goods/goodsAdaptation.vue

@@ -0,0 +1,427 @@
+<template>
+  <div class="hello">
+    <div class="againBox">
+		<img src="../../assets/img/icon_arrow.png" alt="" class="againIcon">
+		<span class="againTitle">重新查询</span> 
+	</div>
+	<div class="box">
+		<div class="carmodel">
+			<div class="carmodelName">
+				上汽奥迪 奥迪Q5 e-tron 2022款  e-tron 星耀型 锦衣套装 2022款 40 e-tron 星
+				<img @click="carShowBtn" src="../../assets/img/icon_qie.png" alt="" class="carmodelNameIcon">
+			</div>
+			<div class="vin">
+				LFV825G0L5007577 <img src="../../assets/img/icon_fuzhi.png" alt="" class="vinIcon">
+			</div>
+		</div>
+		<div class="changing-over">
+			<div class="chTitle">滤清器</div>
+			<div class="chBtn" @click="typeChange">切换品类</div>
+		</div>
+		
+	</div>
+	<div class="categoryBox" v-if="type==1">
+		<div class="categoryLine clActive">NGK</div>
+		<div class="categoryLine">欧洲维修</div>
+		<div class="categoryLine">车裂文溜溜赵</div>
+		<div class="categoryLine">NGK</div>
+		<div class="categoryLine">欧洲维修</div>
+		<div class="categoryLine">车裂文溜溜赵</div>
+	</div>
+	<div class="goodsBox" v-if="type==1">
+		<div class="goodsLine" v-for="(item,index) in 2">
+		  			   <div class="goodsLineImgBox">
+		  				   <img src="../../assets/logo.png" alt="" class="goodsLineImg">
+		  			   </div>
+		  			   <div class="goodsright">
+		  				   <div class="goodsCont">
+		  				   		<div class="goodsName">欧洲维修(EUROREPAR)机油/润滑欧洲维修(EUROREPAR)机油/润滑 SN级汽车用品 EURO-5 5W30 桶 </div>
+		  				        <div class="goodsX">
+		  							<div class="goodsXcont">包装规格：1*1</div>
+		  							<div class="goodsXcont">可用库存：92132
+		  							   <span class="goodsXSpan" @click="stockShowBtn">更多</span>
+		  							</div>
+		  						</div>
+		  						<div class="goodsX">
+		  							<div class="goodsXcont">本店可用：92132</div>
+		  							<div class="goodsXcont">库位：LA-0009-001</div>
+		  						</div>
+								<div class="goodsPrice">
+									价格：<span class="goodsPriceNum">￥98</span>上次价格 98.00<span class="goodsXSpan" @click="priceShowBtn">更多</span>
+								</div>
+								<div class="goodsBottom">
+									<div class="goodsBottomLeft">
+										<div class="goodsThj" @click="thjShowBtn">替换件(99)</div>
+										<div class="goodsThj" style="margin-left: 0.2rem;">适用车型</div>
+									</div>
+									<div class="transmission">发送</div>
+								</div>
+		  						
+		  				   </div>
+		  				   
+		  				  <img src="../../assets/img/icon_cart@2x.png" alt="" class="delGoods">
+		  				   
+		  			   </div>
+		  			   
+		</div>
+	</div>
+	<!-- 分类 -->
+    <div class="sgBox" v-if="type==2">
+		<div class="sgLeft">
+			<div class="sgLeftLine" :class="{'leftActive':leftIndex==index}" v-for="(item,index) in 8">轮胎</div>
+		</div>
+		<div class="sgRight">
+			<div class="sgRightk">
+				<div class="sgRightkTitleBox">
+					<div class="sgRightkl"></div>
+					<div class="sgRightTitle">制动系统</div>
+				</div>
+				<div class="sgrGoodsBox">
+					<div class="sgrLine" v-for="(item,index) in 5">
+						<div>
+							<img src="../../assets/logo.png" alt="" class="sgrImg">
+						</div>
+						<div class="sgrName">空气滤清器</div>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	</div>
+	<stock @fatherMethod="fatherMethod" v-if="stockShow"></stock>
+	<price @priceMethod="priceMethod" v-if="priceShow"></price>
+	<replace @replaceShowMethod="replaceShowMethod" v-if="replaceShow"></replace>
+	<div class="stockBox" v-if="carShow" @click="carHide">
+		<div class="stockCont" @click.stop="">
+			<div class="stockTitle">请选择车型
+			  <img src="../../assets/img/pop_icon_close.png" alt="" class="stockclose" @click="carHide">
+			</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>
+
+<script>
+import stock from '../../components/stock.vue'
+import price from '../../components/price.vue'
+import replace from '../../components/replace.vue'
+export default {
+  name: 'goodsAdaptation',
+  props: {
+    msg: String
+  },
+  components: {
+    stock,price,replace
+  },
+  data(){
+	  return{
+		  type:1,
+		  value:'',
+		  leftIndex:1,
+		  stockShow:false,
+		  priceShow:false,
+		  replaceShow:false,
+		  carShow:false,
+	  }
+  },
+  methods:{
+	  carShowBtn(){
+		  this.carShow=true;
+	  },
+	  carHide(){
+		   this.carShow=false;
+	  },
+	  goList(){
+		  this.$router.push('/goodsList')
+	  },
+	  typeChange(){
+		  if(this.type==1){
+			  this.type=2
+		  }else{
+			 this.type=1 
+		  }
+	  },
+	  stockShowBtn(){
+		  this.stockShow=true;
+	  },
+	  fatherMethod(){
+		  this.stockShow=false;
+	  },
+	  priceMethod(){
+		  this.priceShow=false;
+	  },
+	  replaceShowMethod(){
+		  this.replaceShow=false;
+	  },
+	  priceShowBtn(){
+		   this.priceShow=true;
+	  },
+	  thjShowBtn(){
+		   this.replaceShow=true;
+	  },
+	  
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.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;
+}
+	/* 第二个 */
+.sgLeftLine{
+	width: 1.80rem;text-align: center;padding: 0.22rem 0.1rem;
+	color: #3C3C3C;font-size: 0.26rem;
+	background: #F4F5F7;
+}
+.leftActive{
+	color: #3F90F7;background: #ffffff;
+}
+.sgRight{
+	padding: 0 0.24rem;
+}
+.sgRightkTitleBox{
+	display: flex;
+}
+.sgRightkl{
+	width: 0.06rem;
+	height: 0.24rem;margin-top: 0.03rem;
+	background: #3F90F7;
+	border-radius: 0.04rem;
+}
+.sgRightTitle{
+	font-weight: 500;padding-left: 0.1rem;
+	color: #3C3C3C;font-size: 0.28rem;line-height: 0.3rem;
+}
+.sgBox{
+	display: flex;
+}
+.sgrImg{
+	width: 1rem;height: 1rem;
+}
+.sgrName{
+	color: #3C3C3C;
+	font-size: 0.24rem;
+}
+.sgrLine{
+	text-align: center;
+	padding-bottom: 0.1rem;
+	padding-top: 0.2rem;
+	padding-right: 0.3rem;
+}
+.sgrGoodsBox{
+	display: flex;
+	flex-wrap: wrap;
+}
+	/* 第二个 */
+.againBox{
+	padding: 0.21rem 0.23rem;
+	display: flex;
+}
+  .againIcon{
+	  width: 0.3rem;height: 0.3rem;
+  }
+  .againTitle{
+	  color: #666666;
+	  font-size: 0.26rem;
+	  padding-left: 0.06rem;
+  }
+  .box{
+	  padding: 0 0.24rem;
+  }
+  .carmodel{
+	  background: #EAF3FF;
+	  padding: 0.24rem;
+  }
+  .carmodelNameIcon{
+	  width: 0.3rem;height: 0.3rem;padding-top: 0.05rem;margin-left: 0.1rem;
+  }
+  .carmodelName{
+	  color: #3C3C3C;display: flex;
+	  line-height: 0.4rem;font-size: 0.28rem;
+  }
+  .vinIcon{
+	  width: 0.3rem;height: 0.3rem;margin-left: 0.1rem;
+  }
+  .vin{
+	 font-weight: 400;
+	 color: #666666;
+	  font-size: 0.24rem;
+	  line-height: 0.3rem;
+	  display: flex;
+	  padding-top: 0.08rem;
+  }
+  .changing-over{
+	  display: flex;justify-content: space-between;padding-top: 0.24rem;
+  }
+  .chTitle{
+	  font-weight: 500;font-size: 0.28rem;
+	  color: #3C3C3C;
+	  line-height: 0.4rem;
+  }
+  .chBtn{
+	  color: #3F90F7;font-size: 0.26rem; line-height: 0.4rem;
+  }
+  .categoryLine{
+	  color: #3C3C3C;
+	  font-size: 0.24rem;
+	  width: 1.3rem;
+	  height: 0.56rem;
+	  border-radius: 0.10rem;
+	  border: 0.02rem solid #EEEEEE;
+	  text-align: center;
+	  line-height: 0.56rem;
+	  padding: 0 0.15rem;
+	  overflow: hidden;
+	  white-space: nowrap;
+	  text-overflow: ellipsis;
+	  -o-text-overflow: ellipsis; 
+	  margin-left: 0.2rem;
+	  margin-top: 0.2rem;
+	 
+  }
+  .clActive{
+	  color: #FF4F00;  border: 0.02rem solid #FF4F00;
+  }
+  .categoryBox{
+	  display: flex;
+	  flex-wrap: wrap;
+	  border-bottom: 1px solid #EEEEEE;
+	  padding-bottom: 0.2rem;
+  }
+  .goodsLineImg{
+  	width: 0.9rem;height: 0.9rem;
+  }
+  .delGoods{
+  	width: 0.5rem;
+  	height: 0.5rem;
+  }
+  .goodsName{
+  	color: #3C3C3C;
+  	font-size: 0.26rem;
+  	line-height: 0.37rem;
+  }
+  .goodsLine{
+  	display: flex;
+  	
+  	padding: 0.24rem;
+  }
+  .goodsright{
+  	display: flex;
+  	padding-bottom: 0.29rem;
+  	border-bottom: 1px solid #EEEEEE;
+  }
+  .goodsName{
+  	width: calc(100vw - 2.3rem);
+  	padding-right: 0.3rem;
+  	overflow:hidden;
+  	text-overflow:ellipsis;
+  	display:-webkit-box;
+  	-webkit-box-orient:vertical;
+  	-webkit-line-clamp:2;
+  }
+  .goodsright{
+  	width: calc(100vw - 1.48rem);
+  	padding-left: 0.2rem;
+  	
+  	
+  }
+  .goodsX{
+  	display: flex;
+  	padding-top: 0.08rem;
+  }
+  .goodsXcont{
+  	width: 50%;
+  	font-weight: 400;
+  	color: #999999;
+  	font-size: 0.24rem;
+  }
+  .goodsXSpan{
+  	color: #3F90F7;padding-left: 0.1rem;
+  }
+  .goodsPrice{
+  	color: #999999;
+  	font-size: 0.22rem;
+  	padding-top: 0.08rem;
+  }
+  .goodsPriceNum{
+  	 color: #FF4F00;padding-right: 0.16rem;
+  }
+  .goodsBottom{
+  	 display: flex; padding-top: 0.11rem;
+  	 justify-content: space-between;
+  }
+  .goodsBottomLeft{
+  	 display: flex;
+  	
+  }
+  .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;
+  }
+  .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;
+  }
+</style>

src/page/goods/goodsList.vue

@@ -0,0 +1,640 @@
+<template>
+  <div class="hello">
+   <div class="again"><重新查询</div>
+  <div class="searchBox">
+		 <img src="../../assets/img/icon_search@2x.png" alt="" class="icon_search">
+		 <input type="text" name="" id="" class="searchInput" placeholder="车型、商品名称、商品规格说明、品牌、规格型号">
+  </div>
+  <div class="typeBox">
+	  <div class="typeLine" @click="plSHow">
+		  品类 <img src="../../assets/img/icon_arrow_down@2x.png" alt="" class="typeIcon">
+	  </div>
+	  <div class="typeLine" style="padding-left: 1.5rem;">
+	  		  品牌 <img src="../../assets/img/icon_arrow_down@2x.png" alt="" class="typeIcon">
+	  </div>
+  </div>
+  <div class="goodsBox">
+  		   <div class="goodsLine" v-for="(item,index) in 2">
+  			   <div class="goodsLineImgBox">
+  				   <img src="../../assets/logo.png" alt="" class="goodsLineImg">
+  			   </div>
+  			   <div class="goodsright">
+  				   <div class="goodsCont">
+  				   		<div class="goodsName">欧洲维修(EUROREPAR)机油/润滑欧洲维修(EUROREPAR)机油/润滑 SN级汽车用品 EURO-5 5W30 桶 </div>
+  				        <div class="goodsX">
+  							<div class="goodsXcont">包装规格：1*1</div>
+  							<div class="goodsXcont">可用库存：92132
+  							   <span class="goodsXSpan" @click="stockShowBtn">更多</span>
+  							</div>
+  						</div>
+  						<div class="goodsX">
+  							<div class="goodsXcont">本店可用：92132</div>
+  							<div class="goodsXcont">库位：LA-0009-001</div>
+  						</div>
+						<div class="goodsPrice">
+							价格：<span class="goodsPriceNum">￥98</span>上次价格 98.00<span class="goodsXSpan" @click="priceShowBtn">更多</span>
+						</div>
+						<div class="goodsBottom">
+							<div class="goodsBottomLeft">
+								<div class="goodsThj" @click="thjShowBtn">替换件(99)</div>
+								<div class="goodsThj" style="margin-left: 0.2rem;">适用车型</div>
+							</div>
+							<div class="transmission">发送</div>
+						</div>
+  						
+  				   </div>
+  				   
+  				  <img src="../../assets/img/icon_cart@2x.png" alt="" class="delGoods">
+  				   
+  			   </div>
+  			   
+  		   </div>
+  		   
+  		  <!-- 品类筛选-->
+  		 <!-- <div class="category">
+			  
+		  </div> -->
+		  <van-popup
+		    v-model:show="showRight"
+		    position="right"
+		    :style="{ width: '90%', height: '100%' }"
+		  >
+		   <div class="categoryBox">
+			   <div class="categoryTop">
+				   <div class="categoryTitle">品类</div>
+				   <div class="fenleiBox">
+					   <div class="fenleiLine" style="padding-left: 0.2rem;">全部</div>
+					   <img src="../../assets/img/icon_pop_arrow@2x.png" alt="" class="fenleiJt">
+					   <div class="fenleiLine">发动机系</div>
+					   <img src="../../assets/img/icon_pop_arrow@2x.png" alt="" class="fenleiJt">
+				   </div>
+			   </div>
+			   <div class="flLineBox">
+				   <div class="flline">全部</div>
+				   <div class="flline">转向助力开关</div>
+				   <div class="flline">真空控制开关</div>
+				   <div class="flline">热敏开关</div>
+				   <div class="flline">其他</div>
+			   </div>
+			  
+			   
+		   </div>
+		  </van-popup>
+  		   
+  </div>
+
+	   <!-- 库存-->
+	   <div class="stockBox" v-if="stockShow" @click="stockHide">
+		   <div class="stockCont" @click.stop="">
+			   <div class="stockTitle">库存分布详情
+			     <img src="../../assets/img/pop_icon_close.png" alt="" class="stockclose">
+			   </div>
+			   <div class="sGoodsName">欧洲维修(EUROREPAR)机油/润滑 SN级汽车用品 EURO-5 5W30 欧洲维修(EUROREPAR) </div>
+			   <div class="stockLineBox">
+				   <div class="stockLine">
+					   <div class="stockLineTitle">可用总数</div>
+					   <div class="stockLineNum" style="color: #3F90F7;">4500</div>
+				   </div>
+				   <div class="stockLine">
+					   <div class="stockLineTitle">本店</div>
+					   <div class="stockLineNum">4500</div>
+				   </div>
+				   <div class="stockLine">
+					   <div class="stockLineTitle">共享</div>
+					   <div class="stockLineNum">4500</div>
+				   </div>
+				   <div class="stockLine">
+					   <div class="stockLineTitle">分公司</div>
+					   <div class="stockLineNum">4500</div>
+				   </div>
+				   <div class="stockLine">
+					   <div class="stockLineTitle">总部</div>
+					   <div class="stockLineNum">4500</div>
+				   </div>
+			   </div>
+			   <div style="height: 0.20rem;background: #F4F5F7;"></div>
+			   <div class="stockTableBox">
+				   <div class="stLinebox">
+					   <div class="stLine" style="padding-right: 1rem;" @click="stTable(1)">
+						   <div class="stLineTitle " :class="{'stLineActive':tableIndex==1}">本店</div>
+						   <div class="stLineKk" v-if="tableIndex==1"></div>
+					   </div>
+					   <div class="stLine" :class="{'stLineActive':tableIndex==2}" style="padding-right: 1rem;" @click="stTable(2)">
+						   <div class="stLineTitle">共享</div>
+						   <div class="stLineKk" v-if="tableIndex==2"></div>
+					   </div>
+					   <div class="stLine" :class="{'stLineActive':tableIndex==3}" @click="stTable(3)">
+						   <div class="stLineTitle">分公司</div>
+						   <div class="stLineKk" v-if="tableIndex==3"></div>
+					   </div>
+				   </div>
+				   <div class="stTable" v-if="tableIndex==1">
+					   <table class="table" border="1" bordercolor="#EEEEEE" style="border-collapse:collapse;">
+					     <tr>
+					       <td class="th1">仓库</td>
+					       <td class="th2">可用库存</td>
+					     </tr>
+					     <tr>
+					       <td class="td">January</td>
+					       <td class="td">$100</td>
+					     </tr>
+					   </table>
+				   </div>
+				   <div class="stTable" v-if="tableIndex==2">
+						   <table class="table" border="1" bordercolor="#EEEEEE" style="border-collapse:collapse;">
+							 <tr>
+							   <td class="th1">门店</td>
+							   <td class="th2">可用库存</td>
+							 </tr>
+							 <tr>
+							   <td class="td">January</td>
+							   <td class="td2">122</td>
+							 </tr>
+						   </table>
+				   </div>
+				   <div class="stTable" v-if="tableIndex==3">
+					   <table class="table" border="1" bordercolor="#EEEEEE" style="border-collapse:collapse;">
+						 <tr>
+						   <td class="th1">分公司</td>
+						   <td class="th2">可用库存</td>
+						 </tr>
+						 <tr>
+						   <td class="td">January</td>
+						   <td class="td">122</td>
+						 </tr>
+					   </table>
+				   </div>
+			   </div>
+		   </div>
+	   </div>
+       <div class="priceBox stockBox" @click="priceHide" v-if="priceShow">
+		   <div class="stockCont" @click.stop="">
+			   <div class="stockTitle">价格
+			     <img src="../../assets/img/pop_icon_close.png" alt="" class="stockclose" @click="priceHide">
+			   </div>
+			   <div class="priceBtitleBox">
+				   <div class="priceBk"></div>
+				   <div class="priceBtitle">等级价格</div>
+			   </div>
+			   <div class="priceFlbox">
+				   <div class="priceFl">
+					   <div class="priceFlTitle">最高价</div>
+					   <div class="priceFlNum">989933</div>
+				   </div>
+				   <div class="priceFl">
+					   <div class="priceFlTitle">标准价</div>
+					   <div class="priceFlNum" style="color: #FF4F00;">989933</div>
+				   </div>
+				   <div class="priceFl">
+					   <div class="priceFlTitle">最低价</div>
+					   <div class="priceFlNum">989933</div>
+				   </div>
+			   </div>
+			   <div class="priceBtitleBox">
+				   <div class="priceBk"></div>
+				   <div class="priceBtitle">近3次价格</div>
+			   </div>
+			   <div class="stTable" >
+				   <table class="table" border="1" bordercolor="#EEEEEE" style="border-collapse:collapse;">
+					 <tr>
+					   <td class="ptd1">销售日期</td>
+					   <td class="ptd1">销售价格</td>
+					   <td class="ptd1">销售数量</td>
+					 </tr>
+					 <tr>
+					   <td class="ptd2">2022-01-21</td>
+					   <td class="ptd2">122</td>
+					   <td class="ptd2">122</td>
+					 </tr>
+				   </table>
+			   </div>
+			   <div class="priceBtitleBox">
+				   <div class="priceBk"></div>
+				   <div class="priceBtitle">网点价</div>
+			   </div>
+			   <div class="priceFlbox">
+			   				  
+				   <div class="priceFl">
+					   <div class="priceFlTitle">网点价</div>
+					   <div class="priceFlNum" style="color: #FF4F00;">989933</div>
+				   </div>
+			   				   
+			   </div>
+		   </div>
+	   </div>
+    
+	<!-- 替换件 -->
+	
+	<div class="stockBox" v-if="thjShow" @click="thjHide">
+		<div class="stockCont" @click.stop="">
+			<div class="stockTitle">替换件
+			  <img src="../../assets/img/pop_icon_close.png" alt="" class="stockclose" @click="thjHide">
+			</div>
+			<div class="thjbox">
+				<div class="goodsLine" v-for="(item,index) in 2">
+				  			   <div class="goodsLineImgBox">
+				  				   <img src="../../assets/logo.png" alt="" class="goodsLineImg">
+				  			   </div>
+				  			   <div class="goodsright">
+				  				   <div class="goodsCont">
+				  				   		<div class="tihuanj">
+											 <div class="chu">促</div> <div class="tihuanjname">欧洲维修(EUROREPAR)机油/润滑欧洲维修(EUROREPAR)机油/润滑 SN级汽车用品 EURO-5 5W30 桶 </div>  
+										</div>
+				  				        <div class="goodsX">
+				  							<div class="goodsXcont">包装规格：1*1</div>
+				  							<div class="goodsXcont">可用库存：92132</div>
+				  						</div>
+				  						
+										<div class="goodsPrice">
+											价格：<span class="goodsPriceNum">￥98</span>上次价格 98.00
+										</div>
+										
+				  						
+				  				   </div>
+				  				   
+				  				  <img src="../../assets/img/icon_sele.png" alt="" class="delGoods">
+				  				   
+				  			   </div>
+				  			   
+				</div>
+			</div>
+			
+		</div>
+	</div>
+	
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'goodsList',
+  props: {
+    msg: String
+  },
+  data(){
+	  return{
+		  active:1,
+		  value:'',
+		  showRight:false,
+		  stockShow:false,
+		  tableIndex:1,
+		  priceShow:false,
+		  thjShow:false,
+	  }
+  },
+  methods:{
+	  plSHow(){
+		  this.showRight=true;
+	  },
+	  stockShowBtn(){
+	  		  this.stockShow=true;
+	  },
+	  stockHide(){
+	  		  this.stockShow=false;
+	  },
+	  stTable(index){
+	  		  this.tableIndex=index;
+	  },
+	  priceHide(){
+		  this.priceShow=false;
+	  },
+	  priceShowBtn(){
+		  this.priceShow=true;
+	  },
+	  thjHide(){
+		  this.thjShow=false;
+	  },
+	  thjShowBtn(){
+		  this.thjShow=true;
+	  }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.tihuanj{
+		display: flex;
+	}
+	.tihuanjname{
+		width: calc(100vw - 3rem);
+		overflow:hidden;
+		  white-space: nowrap;
+		  text-overflow: ellipsis;
+		  -o-text-overflow:ellipsis;
+		  padding-left: 0.08rem;
+		  color: #3C3C3C;
+		  font-size: 0.26rem;
+		  line-height: 0.3rem;
+		  padding-right: 0.5rem;
+	}
+	.chu{
+		font-weight: 500;
+		color: #FFFFFF;
+		font-size: 0.22rem;
+		width: 0.30rem;
+		height:0.30rem;
+		background: #FF0000;
+		border-radius: 0.04rem;
+	}
+.priceBtitleBox{
+	padding:0.3rem 0.32rem;
+	display: flex;
+}
+.priceBk{
+	width: 0.06rem;
+	height: 0.24rem;
+	background: #3F90F7;
+	border-radius: 0.04rem;
+}
+.priceBtitle{
+	font-weight: 500;
+	color: #3C3C3C;
+	font-size: 0.26rem;
+	line-height: 0.3rem;
+	padding-left: 0.1rem;
+}
+.priceFlbox{
+	display: flex;
+	padding:0.15rem 0.4rem;
+	justify-content: space-between;
+	text-align: center;
+}
+.priceFlTitle{
+	font-weight: 400;
+	color: #999999;
+	font-size: 0.24rem;
+}
+.priceFlNum{
+	font-size: 0.28rem;
+	font-family: PingFangSC-Medium, PingFang SC;
+	font-weight: 500;
+	color: #333333;
+	padding-top: 0.05rem;
+}
+.ptd1{
+		width: 33%;background: #F4F5F7;
+}
+.ptd2{
+	width: 33%;
+}
+	.table{
+		/* border-collapse:collapse; */
+		font-size: 0.26rem;
+		width: 100%;
+		
+	}
+	.stTable{
+		padding: 0.25rem;
+	}
+	.table tr td{
+		text-align: center;
+		padding: 0.15rem 0;
+	/* border: 1px solid #EEEEEE; */
+	}
+	.th1{
+		width: 70%;background: #F4F5F7;
+	}
+	.th2{
+		width: 30%;background: #F4F5F7;
+	}
+	.td{
+		font-size: 0.26rem;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #666666;
+	}
+	.td2{
+		font-size: 0.26rem;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #3F90F7;
+	}
+	.stLinebox{
+		display: flex;
+		padding: 0.2rem 0.3rem;
+		font-weight: 400;
+		font-size: 0.28rem;
+		color: #3C3C3C;
+		line-height: 0.4rem;
+	}
+	.stLineActive{
+		font-weight: 500;
+	}
+	.stLineKk{
+		width: 0.40rem;
+		height: 0.04rem;
+		background: #3F90F7;
+		margin: 0 auto;
+		margin-top: 0.13rem;
+	}
+	.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;
+	}
+	.sGoodsName{
+		font-weight: 400;
+		color: #333333;
+		font-size: 0.28rem;
+		padding-top: 0.29rem;
+		padding-left: 0.32rem;
+		padding-right: 0.32rem;
+		padding-bottom: 0.22rem;
+	}
+	.stockLineBox{
+		display: flex;
+		justify-content: space-around;
+		font-size: 0.24rem;
+		padding-bottom: 0.2rem;
+	}
+	.stockLine{
+		text-align: center;
+	}
+	.stockLineTitle{
+		color: #999999;
+	}
+	.stockLineNum{
+		font-size: 0.28rem;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		padding-top: 0.1rem;
+	}
+.categoryTop{
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+}
+.flline{
+	color: #666666;
+	font-size: 0.26rem;
+	padding: 0.25rem 0.2rem;
+}
+.flLineBox{
+	padding-top: 2rem;
+}
+.categoryTitle{
+	color: #333333;font-size: 0.24rem;padding-left: 0.2rem;
+	padding-top: 0.6rem;
+	padding-bottom: 0.18rem;
+}
+.fenleiLine{
+	color: #3F90F7;font-size: 0.26rem;line-height: 0.88rem;
+}
+.fenleiJt{
+	width: 0.13rem;height: 0.19rem;margin-top: 0.35rem;margin-left: 0.05rem;
+}
+.fenleiBox{
+	width: 100%;
+	background:#F4F5F7 ;
+	display: flex;
+}
+.again{
+	color: #666666;font-size: 0.26rem;
+	padding: 0.18rem 0.3rem;
+}
+ .icon_search{
+	 width: 0.3rem;height: 0.3rem;
+	 margin-top: 0.17rem;
+	 margin-left: 0.24rem;
+ }
+ .searchBox{
+	 display: flex;
+	 width: 7.02rem;
+	 height: 0.64rem;
+	 background: #F4F5F7;
+	 border-radius: 0.1rem;
+	 margin: 0 auto;
+ }
+ .searchInput{
+	 height: 0.64rem;
+	 line-height: 0.64rem;
+	 width: 6rem;
+	 font-size: 0.24rem;
+	 padding: 0;
+	 border: none;
+	 background: #F4F5F7;
+	 padding-left: 0.16rem;
+	 color: #999999;
+ }
+ .typeLine{
+	 display: flex;
+ }
+ .typeIcon{
+	 width: 0.24rem;height: 0.24rem;margin-top: 0.07rem;margin-left: 0.06rem;
+ }
+ .typeBox{
+	 display: flex;color: #333333;font-size: 0.26rem;
+	 padding: 0.18rem 0.24rem;
+ }
+ .goodsLineImg{
+ 	width: 0.9rem;height: 0.9rem;
+ }
+ .delGoods{
+ 	width: 0.5rem;
+ 	height: 0.5rem;
+ }
+ .goodsName{
+ 	color: #3C3C3C;
+ 	font-size: 0.26rem;
+ 	line-height: 0.37rem;
+ }
+ .goodsLine{
+ 	display: flex;
+ 	
+ 	padding: 0.24rem;
+ }
+ .goodsright{
+ 	display: flex;
+ 	padding-bottom: 0.29rem;
+ 	border-bottom: 1px solid #EEEEEE;
+ }
+ .goodsName{
+ 	width: calc(100vw - 2.3rem);
+ 	padding-right: 0.3rem;
+ 	overflow:hidden;
+ 	text-overflow:ellipsis;
+ 	display:-webkit-box;
+ 	-webkit-box-orient:vertical;
+ 	-webkit-line-clamp:2;
+ }
+ .goodsright{
+ 	width: calc(100vw - 1.48rem);
+ 	padding-left: 0.2rem;
+ 	
+ 	
+ }
+ .goodsX{
+ 	display: flex;
+ 	padding-top: 0.08rem;
+ }
+ .goodsXcont{
+ 	width: 50%;
+ 	font-weight: 400;
+ 	color: #999999;
+ 	font-size: 0.24rem;
+ }
+ .goodsXSpan{
+ 	color: #3F90F7;padding-left: 0.1rem;
+ }
+ .goodsPrice{
+ 	color: #999999;
+	font-size: 0.22rem;
+	padding-top: 0.08rem;
+ }
+ .goodsPriceNum{
+	 color: #FF4F00;padding-right: 0.16rem;
+ }
+ .goodsBottom{
+	 display: flex; padding-top: 0.11rem;
+	 justify-content: space-between;
+ }
+ .goodsBottomLeft{
+	 display: flex;
+	
+ }
+ .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;
+ }
+</style>

src/components/goods/goodsQuery.vue

@@ -18,6 +18,7 @@
 	  <div class="btn">按车型查询</div>
   </div>
   
+  <div style="font-size: 0.3rem;" @click="goodsAdaptation">切换品类</div>
     
   </div>
 </template>
@@ -37,6 +38,9 @@ export default {
   methods:{
 	  goList(){
 		  this.$router.push('/goodsList')
+	  },
+	  goodsAdaptation(){
+		  this.$router.push('/goodsAdaptation')
 	  }
   }
 }

src/router/index.js

@@ -8,37 +8,44 @@ const router = new Router({
   mode: 'hash', //默认采用hash模式
   routes: [
 	  {
+	    path: '/billing',
+	    name: 'billing',
+	    component: () => import('../page/billing/billing.vue'),
+	    meta: {
+	      title: '销售开单',
+	    }
+	  },
+	/* {
 	    path: '/',
 	    name: 'index',
 	    redirect: '/home'
-	  }, {
+	  }, */
+	  {
 	    path: '/home',
 	    name: 'home',
-	    component: () => import('../components/HelloWorld.vue')
+	    component: () => import('../page/HelloWorld.vue')
 	  },
 	
-    {
-      path: '/billing',
-      name: 'billing',
-      component: () => import('../components/billing/billing.vue'),
-      meta: {
-        title: '销售开单',
-      }
-    },
+    
 	{
 	  path: '/orderList',
 	  name: 'orderList',
-	 component: () => import('../components/order/orderList.vue'),
+	 component: () => import('../page/order/orderList.vue'),
 	},
 	{
 	  path: '/goodsQuery',
 	  name: 'goodsQuery',
-	 component: () => import('../components/goods/goodsQuery.vue'),
+	 component: () => import('../page/goods/goodsQuery.vue'),
 	},
 	{
 	  path: '/goodsList',
 	  name: 'goodsList',
-	 component: () => import('../components/goods/goodsList.vue'),
+	 component: () => import('../page/goods/goodsList.vue'),
+	},
+	{
+	  path: '/goodsAdaptation',
+	  name: 'goodsAdaptation',
+	 component: () => import('../page/goods/goodsAdaptation.vue'),
 	}
   ]
 })