小程序图标

src/App.vue

@@ -40,8 +40,8 @@
 				</ul>
 				<div class="user-btn">
 					<button class="btn-1" @click="show = true">免费试用</button>
-					<!-- <button class="btn-2">注册</button>
-					<button class="btn-3">登录</button> -->
+					<!-- <button class="btn-2">注册</button> -->
+					<button class="btn-3" @click="toLogin">登录</button>
 				</div>
 				<div class="open-menu-btn dn">
 					<i
@@ -269,6 +269,9 @@ export default {
 		}
 	},
 	methods: {
+		toLogin(){
+			window.location.href = 'https://winfaster.cn/'
+		},
 		toAnli() {
 			const currentY =
 				document.documentElement.scrollTop || document.body.scrollTop

src/pages/product.vue

@@ -17,6 +17,10 @@
 				</div>
 			</div>
 		</div>
+        <div class="phone-dn">
+            <img class="phone-dn" src="@/assets/pro/frid.png" alt="" />
+        </div>
+        
 		<van-overlay :show="show">
 			<div class="commons-overlay-warp" @click.stop>
 				<div class="title">
@@ -112,7 +116,7 @@
         <div class="advantage">
             <div class="advantage-content">
                 <div class="commons-title"  :class="coreAnimate2">
-                    云仓供应链系统<span>解决方案</span>
+                    云仓进销存系统<span>解决方案</span>
                 </div>
                 <div class="commons-title-label"  :class="coreAnimate2">
                     云仓系统也在不断的研发新功能，确保客户享有一站式仓储管理便利性
@@ -194,6 +198,118 @@
                 </div>
             </div>
         </div>
+        <div class="black-warp">
+            <div class="black-content">
+                <div class="text"  :class="coreAnimate8">
+                    <div>
+                        <img src="../assets/pro/icon_ztkc.png" alt="">
+                        <h3>整体库存、各物料明细一目了然</h3>
+                    </div>
+                    <p>结合移动互联网的功能、可以实时共享查询和汇总报表，无需要仓库管理者运算，数据实时共享给相关领导，比如时间段查询、多仓库和各个仓库的情况，包括人员领用的记录。</p>
+                    
+                </div>
+                <div class="img"  :class="coreAnimate8">
+                    <img class="phone-dn" src="../assets/pro/img_ztkc.png" alt="">
+                    <img class="phone-db" style="width:100%"  src="../assets/pro/img_ztkc.png" alt="">
+                </div>
+            </div>
+        </div>
+        <div class="customer">
+            <div class="customer-content">
+                <div class="img phone-dn" :class="coreAnimate9">
+                    <img src="../assets/pro/img_sjkb.png" alt="">
+                </div>
+                <div class="text" :class="coreAnimate9">
+                    <div>
+                        <img src="../assets/pro/icon_sjkb.png" alt="">
+                        <h3>供应商画像详情分析</h3>
+                    </div>
+                    <p>通过企业级标签化管理理念，实现了对企业供应商精细化、可视化、智能化等管理，最大程度降低供应商管理风险、物资质量风险、供货周期风险及物资价格风险等，提升企业供应商管理整体效率，有效防范管理与运营风险。</p>
+                    
+                    <img class="phone-db" style="width:100%" src="../assets/pro/img_sjkb.png" alt="">
+                </div>
+            </div>
+        </div>
+
+        <div class="black-warp">
+            <div class="black-content">
+                <div class="text"  :class="coreAnimate10">
+                    <div>
+                        <img src="../assets/pro/icon_sggn.png" alt="">
+                        <h3>带有数据关联建议的物料<br/>申购功能</h3>
+                    </div>
+                    <p>通过智能仓储系统可以提供物料需求计划的基础数据。基于消耗的物料需求计划可以根据再订货原则生成采购建议，也可以根据消耗数据进行预测。这些数据为后期采购计划提供有利数据支撑。</p>
+                    
+                </div>
+                <div class="img"  :class="coreAnimate10">
+                    <img class="phone-dn" src="../assets/pro/img_sggn.png" alt="">
+                    <img class="phone-db" style="width:100%"  src="../assets/pro/img_sggn.png" alt="">
+                </div>
+            </div>
+        </div>
+        <div class="customer">
+            <div class="customer-content">
+                <div class="img phone-dn" :class="coreAnimate11">
+                    <img src="../assets/pro/img_sjkb.png" alt="">
+                </div>
+                <div class="text" :class="coreAnimate11">
+                    <div>
+                        <img src="../assets/pro/icon_cgjd.png" alt="">
+                        <h3>采购进度一目了然</h3>
+                    </div>
+                    <p>采购员把每个订单状况更新在系统上，管理者无需与采购员沟通具体订单状况。通过系统，每个订单情况通过图表展示出来，所到环节一目了然。</p>
+                    
+                    <img class="phone-db" style="width:100%" src="../assets/pro/img_cgjd.png" alt="">
+                </div>
+            </div>
+        </div>
+        <div class="rfid">
+            <div class="advantage">
+                <div class="advantage-content">
+                    <div class="commons-title"  :class="coreAnimate12">
+                        智能云仓-<span>RFID</span> 技术特点解决方案
+                    </div>
+                    <div class="commons-title-label"  :class="coreAnimate12">
+                        射频识别系统（RFID）非接触式自动识别技术以及自动化感应出入库门，是智能化库存盘点必不可少的技术
+                    </div>
+                </div>
+            </div>
+            <div class="black-warp" style="background:none">
+                <div class="black-content">
+                    <div class="text"  :class="coreAnimate13">
+                        <div>
+                            <img src="../assets/pro/icon_frid.png" alt="">
+                            <h3>RFID射频识别方案</h3>
+                        </div>
+                        <p>移终端通过 RFID具有适用性、高效性、独一性； 实现库存管理的：绑定、质检、出库、入库、盘点等全流程操作；</p>
+                        
+                    </div>
+                    <div class="img"  :class="coreAnimate13">
+                        <img class="phone-dn" src="../assets/pro/img_frid.png" alt="">
+                        <img class="phone-db" style="width:100%"  src="../assets/pro/img_frid.png" alt="">
+                    </div>
+                </div>
+            </div>
+            <div class="customer" style="background:none">
+                <div class="customer-content">
+                    <div class="img phone-dn" :class="coreAnimate14">
+                        <img src="../assets/pro/img_zdhgy.png" alt="">
+                    </div>
+                    <div class="text" :class="coreAnimate14">
+                        <div>
+                            <img src="../assets/pro/icon_zdhgy.png" alt="">
+                            <h3>自动化感应出入库门闸</h3>
+                        </div>
+                        <p>进出仓扫描区域，组合生产订单管理要求，实现无人执守式仓库管理</p>
+                        
+                        <img class="phone-db" style="width:100%" src="../assets/pro/img_zdhgy.png" alt="">
+                    </div>
+                </div>
+            </div>
+
+            
+        </div>
+        
 	</div>
 </template>
 
@@ -223,6 +339,13 @@ export default {
             coreAnimate5: 'dn',
             coreAnimate6: 'dn',
             coreAnimate7: 'dn',
+            coreAnimate8: 'dn',
+            coreAnimate9: 'dn',
+            coreAnimate10: 'dn',
+            coreAnimate11: 'dn',
+            coreAnimate12: 'dn',
+            coreAnimate13: 'dn',
+            coreAnimate14: 'dn',
 		}
 	},
 	methods: {
@@ -255,6 +378,28 @@ export default {
                 if (document.documentElement.scrollTop > 5800) {
                     this.coreAnimate7 = this.animateClass
                 }
+                
+                if (document.documentElement.scrollTop > 6600) {
+                    this.coreAnimate8 = this.animateClass
+                }
+                if (document.documentElement.scrollTop > 7200) {
+                    this.coreAnimate9 = this.animateClass
+                }
+                if (document.documentElement.scrollTop > 7800) {
+                    this.coreAnimate10 = this.animateClass
+                }
+                if (document.documentElement.scrollTop > 8400) {
+                    this.coreAnimate11 = this.animateClass
+                }
+                if (document.documentElement.scrollTop > 8500) {
+                    this.coreAnimate12 = this.animateClass
+                }
+                if (document.documentElement.scrollTop > 9000) {
+                    this.coreAnimate13 = this.animateClass
+                }
+                if (document.documentElement.scrollTop > 9600) {
+                    this.coreAnimate14 = this.animateClass
+                }
             }else{
                 if (document.documentElement.scrollTop > 200) {
                     this.advantageAnimate = this.animateClass
@@ -283,6 +428,28 @@ export default {
                 if (document.documentElement.scrollTop > 5000) {
                     this.coreAnimate7 = this.animateClass
                 }
+
+                if (document.documentElement.scrollTop > 5600) {
+                    this.coreAnimate8 = this.animateClass
+                }
+                if (document.documentElement.scrollTop > 6100) {
+                    this.coreAnimate9 = this.animateClass
+                }
+                if (document.documentElement.scrollTop > 6600) {
+                    this.coreAnimate10 = this.animateClass
+                }
+                if (document.documentElement.scrollTop > 7100) {
+                    this.coreAnimate11 = this.animateClass
+                }
+                if (document.documentElement.scrollTop > 7500) {
+                    this.coreAnimate12 = this.animateClass
+                }
+                if (document.documentElement.scrollTop > 8000) {
+                    this.coreAnimate13 = this.animateClass
+                }
+                if (document.documentElement.scrollTop > 8600) {
+                    this.coreAnimate14 = this.animateClass
+                }
             }
 			
 		},
@@ -308,6 +475,11 @@ export default {
 </style>
 <style lang='less' scoped>
 .erp {
+    .rfid{
+        background: url(../assets/pro/img_bjht.png) no-repeat;
+        background-size: cover;
+        padding-top: 120px;
+    }
     .vs{
         background: url(../assets/erp/img_vs.png) no-repeat;
         background-size: cover;