first commit

package-lock.json

@@ -1144,7 +1144,6 @@
       "version": "7.21.0",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.21.0.tgz",
       "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -1673,11 +1672,20 @@
         "@types/node": "*"
       }
     },
+    "@vant/icons": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-1.8.0.tgz",
+      "integrity": "sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg=="
+    },
+    "@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
-      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==",
-      "dev": true
+      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA=="
     },
     "@vue/babel-helper-vue-transform-on": {
       "version": "1.0.2",
@@ -6738,8 +6746,7 @@
     "regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regenerator-transform": {
       "version": "0.15.1",
@@ -7693,6 +7700,18 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "2.12.54",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-2.12.54.tgz",
+      "integrity": "sha512-t7DCiLxNosDrg0Jm5EY9p0A5cAMo5OadmizbYtPEc0ru+OJKEa3kcfxtKIK5on7ZPqoOkyYJt8e6BQ1VDMPsrg==",
+      "requires": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "^1.7.1",
+        "@vant/popperjs": "^1.1.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
@@ -7788,6 +7807,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+    },
     "vue-loader": {
       "version": "17.0.1",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.0.1.tgz",
@@ -7850,6 +7874,11 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^2.6.14"
+    "vant": "^2.12.54",
+    "vue": "^2.6.14",
+    "vue-router": "^3.6.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

public/index.html

@@ -5,7 +5,21 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>销售助手</title>
+	<script>
+	!function(n){
+	    var  e=n.document,
+	         t=e.documentElement,
+	         i=750,
+	         d=i/100,
+	         o="orientationchange"in n?"orientationchange":"resize",
+	         a=function(){
+	             var n=t.clientWidth||320;n>720&&(n=720);
+	             t.style.fontSize=n/d+"px"
+	         };
+	         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
+	}(window);
+	</script>
   </head>
   <body>
     <noscript>

src/App.vue

@@ -1,7 +1,23 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
+	<!-- <router-link to='/billing'>11</router-link>
+	<router-link to="/orderList">Go to Foo</router-link> -->
+	<!-- <van-tabs v-model:active="active" @click="onClickTab">
+	  <van-tab title="客户资料"></van-tab>
+	  <van-tab title="商品查询"></van-tab>
+	  <van-tab title="销售开单" ></van-tab>
+	  <van-tab title="订单管理" ></van-tab>
+	</van-tabs> -->
+	<div class="tt">
+		<div class="tabline">客户资料</div>
+		<div class="tabline" :class="{'active':active==2}" @click="onClickTab(2)">商品查询</div>
+		<div class="tabline " :class="{'active':active==3}" @click="onClickTab(3)">销售开单</div>
+		<div class="tabline" :class="{'active':active==4}" @click="onClickTab(4)">订单管理</div>
+	</div>
+	<div class="hx"></div>
+	<!-- 展示组件内容 -->
+	<router-view></router-view> 
   </div>
 </template>
 
@@ -12,17 +28,67 @@ export default {
   name: 'App',
   components: {
     HelloWorld
+  },
+  data(){
+  	  return{
+  		  active:3,
+  	  }
+  },
+  created(){
+	//console.log("..")
+	this.$router.push('/billing')
+  },
+  methods:{
+	  goRouter(url){
+		  console.log(url)
+		  this.$router.push(url)
+	  },
+	  onClickTab(e){
+		  console.log(e);
+		  this.active=e
+		  if(e==3){
+			  this.$router.push('/billing')
+		  }else if(e==4){
+			  this.$router.push('/orderList')
+		  }else if(e==2){
+			  this.$router.push('/goodsQuery')
+		  }
+	  }
   }
 }
 </script>
 
-<style>
+<style >
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+
+ 
+}
+.tt{
+	width: 100%;
+	display: flex;
+	border-top: 1px solid #EEEEEE;
+	border-bottom: 1px solid #EEEEEE;
+	font-size: 0.3rem;
+	line-height: 0.88rem;
+	position: fixed;
+	left: 0;
+	top: 0;
+	background: #ffffff;
+}
+.hx{
+	height: 0.88rem;
 }
+.tabline{
+	width: 25%;
+	text-align: center;
+	
+	
+}
+.active{
+	color: #3F90F7;
+}
+
 </style>

src/components/HelloWorld.vue

@@ -1,32 +1,6 @@
 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
+   
   </div>
 </template>
 

src/components/billing/billing.vue

@@ -0,0 +1,305 @@
+<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

@@ -0,0 +1,268 @@
+<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/goods/goodsQuery.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="hello">
+  <div style="padding-top: 0.3rem;">
+	  <div class="vinSbBox">
+	  	<div class="vinSbtitle">拖拽或上传VIN码图片到此区域识别</div>
+	  	<div class="vinSbBtn">选择文件</div>
+	  </div>
+  </div>
+  <div class="searchBox">
+	  <div class="searchLeft">
+		  <img src="../../assets/img/icon_search@2x.png" alt="" class="icon_search">
+		  <van-field v-model="value" label="" placeholder="请输入VIN码" style="padding-top: 0.15rem;"/>
+	  </div>
+	  <div class="searchBtn">查询</div>
+  </div>
+  <div class="BtnBOx">
+	  <div class="btn" @click="goList">按商品查询</div>
+	  <div class="btn">按车型查询</div>
+  </div>
+  
+    
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'goodsQuery',
+  props: {
+    msg: String
+  },
+  data(){
+	  return{
+		  active:1,
+		  value:'',
+	  }
+  },
+  methods:{
+	  goList(){
+		  this.$router.push('/goodsList')
+	  }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+  .vinSbBox{
+	  width: 7.02rem;
+	  height: 1.75rem;
+	  border-radius: 5px;
+	  border: 1px dashed #CCCCCC;
+	  margin: 0 auto;
+  }
+  .vinSbtitle{
+	font-size: 0.26rem;  
+    color: #999999;
+	text-align: center;
+	padding-top: 0.46rem;
+  }
+  .vinSbBtn{
+	  color: #3F90F7;
+	  font-size: 0.26rem;
+	  padding-top: 0.08rem;
+	  text-align: center;
+  }
+  .icon_search{
+	  width: 0.4rem;
+	  height: 0.4rem;
+	  margin-top: 0.16rem;
+	  margin-left: 0.2rem;
+	  margin-right: 0.1rem;
+  }
+  .searchBox{
+	  display: flex;
+	  margin-left: 0.24rem;
+	  margin-top: 0.25rem;
+  }
+  .searchLeft{
+	  width: 5.82rem;
+	  height: 0.72rem;
+	  line-height: 0.72rem;
+	  display: flex;
+	  border: 1px solid #DDDDDD;
+	  border-right: none;
+  }
+  .searchBtn{
+	  width: 1.19rem;
+	  height: 0.74rem;
+	  background: #3F90F7;
+	  line-height: 0.74rem;
+	  border-radius: 0px 0.06rem 0.06rem 0px;
+	  text-align: center;
+	  font-size: 0.26rem;
+	  color: #fff;
+  }
+  .BtnBOx{
+	padding: 0.3rem 0.24rem;  display: flex;justify-content: space-between;
+  }
+  .btn{
+	  width: 3.36rem;
+	  height: 0.72rem;
+	  border-radius: 0.08rem;
+	  border: 1px solid #3F90F7;
+	  text-align: center;
+	  line-height: 0.72rem;
+	  font-size: 0.28rem;
+	  color: #3F90F7;
+  }
+</style>

src/components/order/orderList.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="hello">
+    list
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'orderList',
+  props: {
+    msg: String
+  },
+  data(){
+	  return{
+		  active:1,
+	  }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

src/main.js

@@ -1,8 +1,14 @@
 import Vue from 'vue'
-import App from './App.vue'
 
+import router from './router'
+import App from './App.vue'
 Vue.config.productionTip = false
-
+import Vant from 'vant';
+ 
+import 'vant/lib/index.css';
+ //http://112.124.69.194:94/  测试地址
+Vue.use(Vant);
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

src/router/index.js

@@ -0,0 +1,46 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+
+
+Vue.use(Router)
+const router = new Router({
+  mode: 'hash', //默认采用hash模式
+  routes: [
+	  {
+	    path: '/',
+	    name: 'index',
+	    redirect: '/home'
+	  }, {
+	    path: '/home',
+	    name: 'home',
+	    component: () => import('../components/HelloWorld.vue')
+	  },
+	
+    {
+      path: '/billing',
+      name: 'billing',
+      component: () => import('../components/billing/billing.vue'),
+      meta: {
+        title: '销售开单',
+      }
+    },
+	{
+	  path: '/orderList',
+	  name: 'orderList',
+	 component: () => import('../components/order/orderList.vue'),
+	},
+	{
+	  path: '/goodsQuery',
+	  name: 'goodsQuery',
+	 component: () => import('../components/goods/goodsQuery.vue'),
+	},
+	{
+	  path: '/goodsList',
+	  name: 'goodsList',
+	 component: () => import('../components/goods/goodsList.vue'),
+	}
+  ]
+})
+ 
+export default router

vue.config.js

@@ -1,4 +1,9 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  lintOnSave: false,
+  devServer:{
+        port:8031, // 启动端口号
+       // open:true  // 启动后是否自动打开网页
+    }
 })