Skip to content

梁建民 / xinhot

Go to a project
Commit 36510f2b by 林翔
Options

Merge branch 'lx_xinhot_h5_20190314'

parents af9e6cb7 ea7f362c
Inline Side-by-side
Showing with 79 additions and 55 deletions
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>
......
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>
......
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-menu{ width: 0.74rem; height: 0.6rem; }
.index-nav ul{ width: 6.91rem; margin: 0 auto; border-top: 1px solid #4bceff; background-color: #000000; opacity: 0.85; }
.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; float: right; margin: 0.37rem 0; margin-right: 0.69rem; }
.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-fixed-banner{ width: 7.5rem; }
.index-banner{ width: 7.5rem; height: 7.36rem; margin: 0 auto; }
.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 .fs-40{ font-size: 0.4rem; font-weight: bold; }
.about-box2 .about-box2-text .fs-30{ font-size: 0.3rem; }
.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; line-height: 0.4rem; font-weight: bold; }
.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-content .contact-mask-text{ width: 6.1rem; margin: 0 0.4rem; margin-bottom: 0.5rem; text-align: left; }
.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{ 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-content .product-mask-brand{ text-align: center; margin: 0.2rem 0; }
.product-mask-content .product-mask-brand img{ width: 2.15rem; height: 0.66rem; }
.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-img{ margin: 0.5rem 0.5rem; }
.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 auto; }
.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.3rem; }
.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 p{ text-indent: 2em; font-size: 0.26rem; color: #666; line-height: 0.4rem; }
.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 !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; }
......
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>
......
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',
methods:'get',
async:false,
datatype:'json',
type: "POST",
url: "http://api.liexin.com/xht/companyinfo",
data: {"com_id": brandId},
dataType: "json",
xhrFields: {withCredentials: true},
success:function(data){
var brandData = data.data;
// console.log(brandData);
$(".product-mask-brand").find("img").attr("src",brandData[brandId].brandImg);
$(".product-mask-company").text(brandData[brandId].company);
$(".product-mask-address").text(brandData[brandId].address);
$(".product-mask-time").text(brandData[brandId].time);
// $(".product-mask-name").text(brandData[brandId].name);
$(".product-mask-img .product-img_1").find("img").attr("src",brandData[brandId].img[0]);
$(".product-mask-img .product-img_2").find("img").attr("src",brandData[brandId].img[1]);
$(".product-mask-img .product-img_3").find("img").attr("src",brandData[brandId].img[2]);
$(".product-mask-introduce").html(brandData[brandId].introduce);
if(data.err_code==0){
var brand_info_array = data.data;
$(".product-mask-brand").find("img").attr("src",brand_info_array.logo_h5);
$(".product-mask-company").text(brand_info_array.company_info.com_name);
$(".product-mask-address").text(brand_info_array.company_info.com_addr);
$(".product-mask-time").text(brand_info_array.company_info.build_time);
var comImg_array = data.data.company_img;
comImg_array.forEach((i) => {
$(".product-mask-img .product-img-"+i.sort).find("img").attr("src",i.images);
})
$(".product-mask-introduce").html(brand_info_array.company_info.com_desc);
}
}
})
......
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>
<p class="product-mask-address product-mask-text"></p>
<p class="product-mask-time product-mask-text"></p>
<!-- <p class="product-mask-name product-mask-text"></p> -->
<div class="product-mask-text">公司名称：<p class="product-mask-company"></p></div>
<div class="product-mask-text">总部地址：<p class="product-mask-address"></p></div>
<div class="product-mask-text">成立时间：<p class="product-mask-time"></p></div>
<ul class="product-mask-img">
<li class="product-img_1"><img src="" alt=""></li>
<li class="product-img_2"><img src="" alt=""></li>
<li class="product-img_3"><img src="" alt=""></li>
<li class="product-img-0"><img src="" alt=""></li>
<li class="product-img-1"><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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment