Merge branch 'lx_xinhot_h5_20190314'

36510f2b · 林翔 · af9e6cb7 · ea7f362c · 36510f2b · 36510f2b
Commit 36510f2b authored Mar 15, 2019 by 林翔
Showing with 79 additions and 55 deletions
h5/about.html
h5/contact.html
h5/css/style.css
h5/index.html
h5/js/index.js
h5/product.html
--- a/h5/about.html
+++ b/h5/about.html
@@ -51,7 +51,7 @@
                <span class="about-box1-img2"><img src="./images/about/3.png" alt="xinhot"></span>
                <span class="about-box1-img3"><img src="./images/about/4.png" alt="xinhot"></span>
                <p>深圳市信宏泰电子有限公司是一家诚信经营被动元器件的专业公司。</p>
-                <p>目前主要经营销售风华高科、国巨、华科以及三星等的电容元件；厚声、风华高科、国巨等电阻元件；长电、LRC的二三极管等。</p>
+                <p>目前主要代理销售风华高科、国巨、华科以及三星等的电容元件；厚声、风华高科、国巨等电阻元件；长电、LRC的二三极管等。</p>
                <p>产品主要应用于医疗设备、电源管理、电脑电器、便携式通讯设备、安防监控、工业控制等领域。</p>
                <p>公司秉承"<i>品质一流、诚信服务</i>"的经营理念，本着客户至上、服务至上的经营原则，以专业的团队，高质量的产品，长期服务客户，不断为客户创造价值。</p>
            </div>
@@ -102,7 +102,7 @@
        <div class="index-sidebar">
            <a class="qq" href="http://wpa.qq.com/msgrd?v=3&amp;uin=734739138&amp;site=qq&amp;menu=yes"><img src="./images/qq.png" alt="qq"></a>
-            <a class="phone" href="tel:0755-21001152"><img src="./images/phone.png" alt="phone"></a>
+            <a class="phone" href="tel:18603034781"><img src="./images/phone.png" alt="phone"></a>
        </div>
    </div>

--- a/h5/contact.html
+++ b/h5/contact.html
@@ -52,7 +52,7 @@
            </dl>
            <dl class="contact-box1-text text2">
                <dt><img src="./images/contact/2.png" alt=""></dt>
-                <dd><i>目前</i>主要经营销售风华高科、国巨、华科以及三星等的电容元件；厚声、风华高科、国巨等电阻元件；长电、LRC的二三极管等。</dd>
+                <dd><i>目前</i>主要代理销售风华高科、国巨、华科以及三星等的电容元件；厚声、风华高科、国巨等电阻元件；长电、LRC的二三极管等。</dd>
            </dl>
            <dl class="contact-box1-text text3">
                <dt><img src="./images/contact/2.png" alt=""></dt>
@@ -95,7 +95,7 @@
            <div class="contact-box3-map"><img src="./images/contact/6.png" alt="地图地址"></div>
            <p><i class="url"></i>www.szxinhot.com</p>
            <p><i class="address"></i>深圳市龙华区民乐科技园圆梦科技大厦501</p>
-            <p><i class="telephone"></i>0755-21001152</p>
+            <p><i class="telephone"></i>0755-23773684</p>
            <p><i class="QQ"></i>734739138（QQ）</p>
            <p><i class="email"></i>734739138@qq.com</p>
            <p><i class="fax"></i>0755-23773724</p>
@@ -126,7 +126,7 @@
        <div class="index-sidebar">
            <a class="qq" href="http://wpa.qq.com/msgrd?v=3&amp;uin=734739138&amp;site=qq&amp;menu=yes"><img src="./images/qq.png" alt="qq"></a>
-            <a class="phone" href="tel:0755-21001152"><img src="./images/phone.png" alt="phone"></a>
+            <a class="phone" href="tel:18603034781"><img src="./images/phone.png" alt="phone"></a>
        </div>
    </div>

--- a/h5/css/style.css
+++ b/h5/css/style.css
@@ -16,14 +16,14 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus{ -webkit-box-
 /*公共组件：导航、轮播图、侧边栏样式*/
 .index-nav{ position: fixed; top: 0; width: 100%; z-index: 10; }
 .index-nav .index-nav-content{ width: 100%; height: 1.34rem; background-color: #000000; opacity: 0.48; }
-.index-nav .index-nav-content .nav-logo{ width: 3.05rem; height: 0.83rem; margin-right: 2.56rem; margin-left: 0.69rem; }
+.index-nav .index-nav-content .nav-logo{ width: 3.05rem; height: 0.83rem; /*margin-right: 2.56rem;*/ margin-left: 0.69rem; }
-.index-nav .index-nav-content .nav-menu{ width: 0.74rem; height: 0.6rem; }
+.index-nav .index-nav-content .nav-menu{ width: 0.74rem; height: 0.6rem; float: right; margin: 0.37rem 0; margin-right: 0.69rem; }
-.index-nav ul{ width: 6.91rem; margin: 0 auto; border-top: 1px solid #4bceff; background-color: #000000; opacity: 0.85; }
+.index-nav ul{ min-width: 6.91rem; width: 98%; margin: 0 auto; border-top: 1px solid #4bceff; background-color: #000000; opacity: 0.85; }
 .index-nav ul li{ height: 1.2rem; line-height: 1.2rem; text-align: center; }
 .index-nav ul li a{ font-size: 0.3rem; color: #4bceff; font-weight: bold; }
-.index-banner{ width: 7.5rem; height: 7.36rem; }
+.index-banner{ width: 7.5rem; height: 7.36rem; margin: 0 auto; }
-.index-fixed-banner{ width: 7.5rem; }
+.index-fixed-banner{ width: 7.5rem; margin: 0 auto; }
 .index-fixed-banner img{ width: 7.5rem; height: 5.14rem; }
 .index-sidebar{ position: fixed; right: 0.2rem; top: 7rem; width: 0.92rem; z-index: 11; }
@@ -32,7 +32,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus{ -webkit-box-
 .index-sidebar .phone{ display: block; }
 /*首页*/
-.index-box1{ width: 100%; }
+.index-box1{ width: 100%; max-width: 7.5rem; margin: 0 auto; }
 .index-box1 .index-box1-title{ margin: 0.6rem 0; text-align: center; }
 .index-box1 .index-box1-title img{ width: 2.65rem; height: 0.75rem; }
 .index-box1 dl{ width: 100%; margin-bottom: 0.5rem; }
@@ -51,7 +51,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus{ -webkit-box-
 .index-box3-common .index-box3-text .en{ font-size: 0.18rem; text-align: center; line-height: 0.18rem; color: #c81e1d; letter-spacing: 0.06rem; }
 /*关于我们*/
-.about-box1{ width: 100%; }
+.about-box1{ width: 100%; max-width: 7.5rem; margin: 0 auto; }
 .about-box1 .about-box1-title{ margin: 0.5rem 0; text-align: center; }
 .about-box1 .about-box1-title img{ width: 2.19rem; height: 0.79rem; }
 .about-box1 .about-box1-content{ margin: 0 0.29rem; margin-bottom: 0.5rem; }
@@ -67,12 +67,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus{ -webkit-box-
 .about-box2 .about-box2-title{ text-align: center; }
 .about-box2 .about-box2-title img{ width: 2.65rem; height: 0.74rem; }
 .about-box2 .about-box2-text{ margin: 0.6rem auto; }
-.about-box2 .about-box2-text p{ text-align: center; margin: 0.1rem; }
+.about-box2 .about-box2-text p{ text-align: center; margin-bottom: 0.1rem; display: inline-block; width: 100%; }
-.about-box2 .about-box2-text .fs-40{ font-size: 0.4rem; font-weight: bold; }
+.about-box2 .about-box2-text .fs-40{ font-size: 0.4rem; line-height: 0.4rem; font-weight: bold; }
-.about-box2 .about-box2-text .fs-30{ font-size: 0.3rem; }
+.about-box2 .about-box2-text .fs-30{ font-size: 0.3rem; line-height: 0.3rem; }
 .about-box2 .about-box2-text .fc-18{ color: #18ffcb; }
 .about-box2 .about-box2-text .fc-ff{ color: #fff; }
-.about-box2 .about-box2-content{ width: 90%; margin: 0 auto; }
+.about-box2 .about-box2-content{ /*width: 90%;*/ margin: 0 auto; max-width: 6.65rem; }
 .about-box2 .about-box2-content li{ display: inline-block; margin: 0 0.3rem; vertical-align: bottom; }
 .about-box2 .about-box2-content li img{ width: 1.3rem; height: 1.29rem; opacity: 0.5; }
 .about-box2 .about-box2-content .big img{ width: 2.05rem; height: 2.04rem; opacity: 1; } 
@@ -94,7 +94,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus{ -webkit-box-
 .contact-box1 .text4{ top: 3.7rem; }
 .contact-box1 .contact-box1-text dt{ display: inline-block; margin-right: 0.3rem; vertical-align:top; }
 .contact-box1 .contact-box1-text dt img{ width: 0.16rem; height: 0.17rem; }
-.contact-box1 .contact-box1-text dd{ display: inline-block; width: 6.3rem; vertical-align:top; text-align: left; font-size: 0.26rem; color: #666666; }
+.contact-box1 .contact-box1-text dd{ display: inline-block; width: 6.3rem; vertical-align:top; text-align: left; font-size: 0.26rem; line-height: 0.4rem; color: #666666; }
 .contact-box1 .contact-box1-text dd i{ font-style: normal; font-weight: bold; }
 .contact-box2{ width: 6.9rem; padding-bottom: 0.5rem; margin: 0 auto; }
@@ -129,8 +129,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus{ -webkit-box-
 .container{ position: relative; }
 .contact-mask{ width: 100%; height: 100%; background: rgba(0,0,0,0.8); position: absolute; top: 0; left: 0; z-index: 12;  }
-.contact-mask .contact-mask-content{ width: 6.9rem; background: #fff; padding-bottom: 0.5rem; position: fixed; top: 1rem; right: 0.3rem; }
+.contact-mask .contact-mask-content{ /*width: 6.9rem;*/ width: 92%; background: #fff; padding-bottom: 0.5rem; position: fixed; /*top: 0.5rem;*/ top: 6%; right: 0rem; left: 0rem; margin-left: auto; margin-right: auto; }
-.contact-mask-content .contact-mask-text{ width: 6.1rem; margin: 0 0.4rem; margin-bottom: 0.5rem; text-align: left; }
+.contact-mask-content .contact-mask-text{ min-width: 6.1rem; margin: 0 0.4rem; margin-bottom: 0.1rem; text-align: left; }
 .contact-mask-content .contact-mask-text p{ font-size: 0.26rem; color: #666; line-height: 0.4rem; }
 .contact-mask-content .contact-mask-text .fw-b{ font-weight: bold; font-size: 0.3rem; }
@@ -147,7 +147,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus{ -webkit-box-
 .product-box1 .product-box1-title img{ width: 2.21rem; height: 0.79rem; }
 .product-box1 .product-box1-content{ text-align: center; }
 .product-box1 .product-box1-content li{ display: inline-block; margin-bottom: 0.1rem; box-shadow: 0px 0px 0.16rem 0px rgba(161, 163, 166, 0.38); border-radius: 2px; }
-.product-box1 .product-box1-content li img{ width: 2.2rem; height: 1.3rem; }
+.product-box1 .product-box1-content li img{ width: 2.2rem; height: 1.3rem; vertical-align: middle; }
 .product-box2{ width: 6.9rem; padding: 0.5rem 0; margin: 0 auto; }
 .product-box2 .product-box2-title{ text-align: center; margin-bottom: 0.5rem; }
@@ -176,15 +176,16 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus{ -webkit-box-
 .container{ position: relative; }
 .product-mask{ width: 100%; height: 100%; background: rgba(0,0,0,0.8); position: absolute; top: 0; left: 0; z-index: 12;  }
-.product-mask .product-mask-content{ width: 6.9rem; background: #fff; padding-bottom: 1rem; position: fixed; top: 1rem; right: 0.3rem; }
+.product-mask .product-mask-content{ /*min-width: 6.9rem;*/ width: 92%; background: #fff; padding-bottom: 0.5rem; position: fixed; /*top: 0.5rem;*/ top: 6%; right: 0rem; left: 0rem; margin-left: auto; margin-right: auto; }
-.product-mask-content .product-mask-brand{ text-align: center; margin: 0.2rem 0; }
+.product-mask-content .product-mask-brand{ text-align: center; margin: 0 auto; }
-.product-mask-content .product-mask-brand img{ width: 2.15rem; height: 0.66rem; }
+.product-mask-content .product-mask-brand img{ width: 2.2rem; height: 1.3rem; }
-.product-mask-content .product-mask-text{ font-size: 0.26rem; color: #666; line-height: 0.4rem; margin: 0 0.5rem; }
+.product-mask-content .product-mask-text{ font-size: 0.26rem; color: #666; line-height: 0.4rem; margin: 0 0.3rem; }
-.product-mask-content .product-mask-img{ margin: 0.5rem 0.5rem;  }
+.product-mask-content .product-mask-text p{ font-size: 0.26rem; color: #666; line-height: 0.4rem; display: inline-block; }
+.product-mask-content .product-mask-img{ margin: 0 auto; text-align: center; }
 .product-mask-content .product-mask-img li{ margin: 0 0.1rem; display: inline-block; }
 .product-mask-content .product-mask-img li img{ width: 1.7rem; height: 1.3rem; }
-.product-mask-content .product-mask-introduce{  margin: 0 0.5rem; max-height: 4rem; overflow-y: scroll; }
+.product-mask-content .product-mask-introduce{ margin: 0 0.5rem; max-height: 3rem; overflow-y: auto; }
-.product-mask-content .product-mask-introduce p{ text-indent: 2em; font-size: 0.26rem; color: #666; line-height: 0.4rem; }
+.product-mask-content .product-mask-introduce p{ text-indent: 2em; font-size: 0.26rem !important; color: #666 !important; line-height: 0.4rem !important; }
 /*.container{ position: relative; }
 .product-mask{ width: 100%; height: 100%; background: rgba(0,0,0,0.8); position: absolute; top: 0; left: 0; z-index: 12;  }

--- a/h5/index.html
+++ b/h5/index.html
@@ -117,7 +117,7 @@
        <div class="index-sidebar">
            <a class="qq" href="http://wpa.qq.com/msgrd?v=3&amp;uin=734739138&amp;site=qq&amp;menu=yes"><img src="./images/qq.png" alt="qq"></a>
-            <a class="phone" href="tel:0755-21001152"><img src="./images/phone.png" alt="phone"></a>
+            <a class="phone" href="tel:18603034781"><img src="./images/phone.png" alt="phone"></a>
        </div>
    </div>

--- a/h5/js/index.js
+++ b/h5/js/index.js
@@ -4,6 +4,28 @@ $(function(){
 var xinhot = {
    init: function(){
+        //判断是否为产品展示页面
+        var url = window.location.href;
+        if( url.indexOf("/product") != -1 ){
+            $.ajax({
+                type: "POST",
+                url: "http://api.liexin.com/xht/company",
+                dataType: "json",
+                xhrFields: {withCredentials: true},
+                success:function(data){
+                    if(data.err_code==0){
+                        var brand_html = '';
+                        // console.log(Array.isArray(data.data));
+                        var brand_array = data.data;
+                        brand_array.forEach((i) =>{
+                            brand_html += `<li data-brand=\"${i.com_id}\"><img src=\"${i.logo_h5}\" alt="主营品牌"></li> `;
+                        })
+                        $(".product-box1-content").html(brand_html);
+                    }
+                }
+            });
+        }
        xinhot.handle();
        //轮播
        var gallery = mui('.mui-slider'); //获得slider插件对象
@@ -37,7 +59,7 @@ var xinhot = {
        });
        //产品展示
-        $(".product-box1-content li").click(function(){
+        $(".product-box1-content").on('click','li',function(){
            var brandId = $(this).attr("data-brand");
            $(".product-mask").show();
            //屏幕滚动到指定位置
@@ -48,22 +70,24 @@ var xinhot = {
            $("body,html").css({"position":"fixed"},{"top":(-top/100)+"rem"});
            $.ajax({
-                url:'./json/brandData.json',
+                type: "POST",
-                methods:'get',
+                url: "http://api.liexin.com/xht/companyinfo",
-                async:false,
+                data: {"com_id": brandId},
-                datatype:'json',
+                dataType: "json",
+                xhrFields: {withCredentials: true},
                success:function(data){
-                    var brandData = data.data;
+                    if(data.err_code==0){
-                    // console.log(brandData);
+                        var brand_info_array = data.data;
-                    $(".product-mask-brand").find("img").attr("src",brandData[brandId].brandImg);
+                        $(".product-mask-brand").find("img").attr("src",brand_info_array.logo_h5);
-                    $(".product-mask-company").text(brandData[brandId].company);
+                        $(".product-mask-company").text(brand_info_array.company_info.com_name);
-                    $(".product-mask-address").text(brandData[brandId].address);
+                        $(".product-mask-address").text(brand_info_array.company_info.com_addr);
-                    $(".product-mask-time").text(brandData[brandId].time);
+                        $(".product-mask-time").text(brand_info_array.company_info.build_time);
-                    // $(".product-mask-name").text(brandData[brandId].name);
+                        var comImg_array = data.data.company_img;
-                    $(".product-mask-img .product-img_1").find("img").attr("src",brandData[brandId].img[0]);
+                        comImg_array.forEach((i) => {
-                    $(".product-mask-img .product-img_2").find("img").attr("src",brandData[brandId].img[1]);
+                            $(".product-mask-img .product-img-"+i.sort).find("img").attr("src",i.images);
-                    $(".product-mask-img .product-img_3").find("img").attr("src",brandData[brandId].img[2]);
+                        })
-                    $(".product-mask-introduce").html(brandData[brandId].introduce);
+                        $(".product-mask-introduce").html(brand_info_array.company_info.com_desc);
+                    }
                }
            })

--- a/h5/product.html
+++ b/h5/product.html
@@ -47,13 +47,13 @@
        <div class="product-box1">
            <div class="product-box1-title"><img src="./images/product/1.png" alt="主营品牌"></div>
            <ul class="product-box1-content">
-                <li data-brand="0"><img src="./images/product/2.png" alt="主营品牌"></li>
+                <!-- <li data-brand="0"><img src="./images/product/2.png" alt="主营品牌"></li>
                <li data-brand="1"><img src="./images/product/3.png" alt="主营品牌"></li>
                <li data-brand="2"><img src="./images/product/4.png" alt="主营品牌"></li>
                <li data-brand="3"><img src="./images/product/5.png" alt="主营品牌"></li>
                <li data-brand="4"><img src="./images/product/6.png" alt="主营品牌"></li>
                <li data-brand="5"><img src="./images/product/7.png" alt="主营品牌"></li>
-                <li data-brand="6"><img src="./images/product/8.png" alt="主营品牌"></li>
+                <li data-brand="6"><img src="./images/product/8.png" alt="主营品牌"></li> -->
            </ul>
        </div>
@@ -109,22 +109,21 @@
            <div class="product-mask-content mask-content">
                <div class="mask-close"><img src="./images/close.png" alt=""></div>
                <div class="product-mask-brand"><img src="" alt=""></div>
-                <p class="product-mask-company product-mask-text"></p>
+                <div class="product-mask-text">公司名称：<p class="product-mask-company"></p></div>
-                <p class="product-mask-address product-mask-text"></p>
+                <div class="product-mask-text">总部地址：<p class="product-mask-address"></p></div>
-                <p class="product-mask-time product-mask-text"></p>
+                <div class="product-mask-text">成立时间：<p class="product-mask-time"></p></div>
-                <!-- <p class="product-mask-name product-mask-text"></p> -->
                <ul class="product-mask-img">
-                    <li class="product-img_1"><img src="" alt=""></li>
+                    <li class="product-img-0"><img src="" alt=""></li>
-                    <li class="product-img_2"><img src="" alt=""></li>
+                    <li class="product-img-1"><img src="" alt=""></li>
-                    <li class="product-img_3"><img src="" alt=""></li>
+                    <li class="product-img-2"><img src="" alt=""></li>
                </ul>
-                <p class="product-mask-introduce"></p>
+                <div class="product-mask-introduce"></div>
            </div>
        </div>
        <div class="index-sidebar">
            <a class="qq" href="http://wpa.qq.com/msgrd?v=3&amp;uin=734739138&amp;site=qq&amp;menu=yes"><img src="./images/qq.png" alt="qq"></a>
-            <a class="phone" href="tel:0755-21001152"><img src="./images/phone.png" alt="phone"></a>
+            <a class="phone" href="tel:18603034781"><img src="./images/phone.png" alt="phone"></a>
        </div>
    </div>