companyWx/src/components/price.vue

<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>