Skip to content

施宇 / icsales

Go to a project
Commit 09bd3778 by 施宇
Options

1111

parent f5da905f
Inline Side-by-side
Showing with 95 additions and 168 deletions
Application/Index/View/Index/index.html
...@@ -179,22 +179,15 @@ ...@@ -179,22 +179,15 @@
<p>让元器件询报价更便捷</p> <p>让元器件询报价更便捷</p>
<h3 class="mobile_h3_common bold">专注芯片交易，让交易更简单</h3> <h3 class="mobile_h3_common bold">专注芯片交易，让交易更简单</h3>
<div class="lb_nav"> <div class="lb_nav">
<span class="active">网页版</span> <span>网页版</span>
<span>小程序</span> <span>小程序</span>
<span>手机版</span> <span>手机版</span>
</div> </div>
<div class="lb_div"> <div class="lb_div">
<div class="lb_div_content clr"> <img src="__PUBLIC__/images/mlb1.png" alt="" class="web_img">
<div class="lb_item fl"> <img src="__PUBLIC__/images/mlb2.png" alt="" class="xcx_img">
<img src="__PUBLIC__/images/mlb1.png" alt=""> <img src="__PUBLIC__/images/mlb3.png" alt="" class="app_img">
</div>
<div class="lb_item fl">
<img src="__PUBLIC__/images/mlb2.png" alt="">
</div>
<div class="lb_item fl">
<img src="__PUBLIC__/images/mlb3.png" alt="">
</div>
</div>
</div> </div>
</div> </div>
<div class="jy_div"> <div class="jy_div">
...@@ -276,14 +269,11 @@ ...@@ -276,14 +269,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bottom_fixed"> <div class="bottom_fixed_item xcx_item">
<div class="bottom_fixed_div clr">
<div class="fixed_item no_item fl"></div>
<div class="fixed_item xcx_item fl">
<img src="__PUBLIC__/images/xcx_icon.png" alt=""> <img src="__PUBLIC__/images/xcx_icon.png" alt="">
<span>进入微信小程序</span> <span>进入微信小程序</span>
</div> </div>
<div class="fixed_item app_item fl"> <div class="bottom_fixed_item app_item">
<div class="ios_item app_item_div fl"> <div class="ios_item app_item_div fl">
<span class="icon iconfont iconjuxing25"></span> <span class="icon iconfont iconjuxing25"></span>
<p class="phone_type bold">iPhone</p> <p class="phone_type bold">iPhone</p>
...@@ -295,8 +285,6 @@ ...@@ -295,8 +285,6 @@
<p class="text">点击下载APP</p> <p class="text">点击下载APP</p>
</div> </div>
</div> </div>
</div>
</div>
<div class="xcx_mask"> <div class="xcx_mask">
<div class="mask_img_div"> <div class="mask_img_div">
<img src="__PUBLIC__/images/xcxm.png" alt=""> <img src="__PUBLIC__/images/xcxm.png" alt="">
...@@ -317,6 +305,25 @@ ...@@ -317,6 +305,25 @@
<!-- 移动端下的页面 --> <!-- 移动端下的页面 -->
<script> <script>
$(function () { $(function () {
if (!$('.mobile_wrapper').is(':hidden')) {
//移动端
var type = Util.getRequest('type');
if(type==1){
//小程序
$('.mobile_wrapper .lb_nav span').eq(1).addClass('active');
$('.mobile_wrapper .xcx_img').show();
$('.mobile_wrapper .xcx_item').show()
}else if(type==2){
//app
$('.mobile_wrapper .lb_nav span').eq(2).addClass('active');
$('.mobile_wrapper .app_img').show();
$('.mobile_wrapper .app_item').show()
}else{
//web
$('.mobile_wrapper .lb_nav span').eq(0).addClass('active');
$('.mobile_wrapper .web_img').show()
}
};
$('.index_wrapper .lb_nav span').click(function () { $('.index_wrapper .lb_nav span').click(function () {
var index = $(this).index(); var index = $(this).index();
$('.index_wrapper .lb_div_content').css('left', -(index * 1190) + 'px'); $('.index_wrapper .lb_div_content').css('left', -(index * 1190) + 'px');
...@@ -341,10 +348,7 @@ ...@@ -341,10 +348,7 @@
}); });
$('.mobile_wrapper .lb_nav span').click(function () { $('.mobile_wrapper .lb_nav span').click(function () {
var index = $(this).index(); var index = $(this).index();
$('.mobile_wrapper .lb_div_content').css('left', -(index * 700 / 7) + 'vw'); window.location.replace(window.location.origin + '?type=' + index)
$('.mobile_wrapper .bottom_fixed_div').css('left', -(index * 700 / 7) + 'vw');
$(this).addClass('active').siblings().removeClass('active')
}); });
$('.xcx_item').on('click', function () { $('.xcx_item').on('click', function () {
$('.xcx_mask').show(); $('.xcx_mask').show();
......
dist/css/index.css
...@@ -348,33 +348,12 @@ ...@@ -348,33 +348,12 @@
.mobile_wrapper .mobile_top .mobile_top_text .lb_div { .mobile_wrapper .mobile_top .mobile_top_text .lb_div {
position: relative; position: relative;
height: 51.71428571vw; height: 51.71428571vw;
overflow: hidden;
margin-top: 5.57142857vw; margin-top: 5.57142857vw;
} }
.mobile_wrapper .mobile_top .mobile_top_text .lb_div .lb_div_content { .mobile_wrapper .mobile_top .mobile_top_text .lb_div img {
position: absolute;
top: 0;
left: 0;
width: 300vw;
bottom: 0;
transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
/* IE 9 */
-moz-transition: all 0.4s ease-out;
/* Firefox */
-webkit-transition: all 0.4s ease-out;
/* Safari 和 Chrome */
-o-transition: all 0.4s ease-out;
/* Opera */
}
.mobile_wrapper .mobile_top .mobile_top_text .lb_div .lb_div_content .lb_item {
width: 100vw;
height: 100%;
position: relative;
}
.mobile_wrapper .mobile_top .mobile_top_text .lb_div .lb_div_content .lb_item img {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: none;
} }
.mobile_wrapper .jy_div { .mobile_wrapper .jy_div {
text-align: center; text-align: center;
...@@ -488,79 +467,60 @@ ...@@ -488,79 +467,60 @@
.mobile_wrapper .bottom_section .bottom_bottom img.wb { .mobile_wrapper .bottom_section .bottom_bottom img.wb {
margin-left: 11.85714286vw; margin-left: 11.85714286vw;
} }
.mobile_wrapper .bottom_fixed { .mobile_wrapper .bottom_fixed_item {
position: fixed; position: fixed;
height: 14.28571429vw; height: 14.28571429vw;
width: 100vw;
font-size: 4vw;
text-align: center;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
overflow: hidden;
z-index: 9999; z-index: 9999;
display: none;
} }
.mobile_wrapper .bottom_fixed .bottom_fixed_div { .mobile_wrapper .bottom_fixed_item.xcx_item {
position: absolute;
top: 0;
width: 300vw;
bottom: 0;
left: 0;
transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
/* IE 9 */
-moz-transition: all 0.4s ease-out;
/* Firefox */
-webkit-transition: all 0.4s ease-out;
/* Safari 和 Chrome */
-o-transition: all 0.4s ease-out;
/* Opera */
}
.mobile_wrapper .bottom_fixed .bottom_fixed_div .fixed_item {
height: 100%;
width: 100vw;
font-size: 4vw;
text-align: center;
}
.mobile_wrapper .bottom_fixed .bottom_fixed_div .fixed_item.xcx_item {
background-color: #5BCC52; background-color: #5BCC52;
line-height: 14.28571429vw; line-height: 14.28571429vw;
color: #fff; color: #fff;
} }
.mobile_wrapper .bottom_fixed .bottom_fixed_div .fixed_item.xcx_item img { .mobile_wrapper .bottom_fixed_item.xcx_item img {
height: 7.14285714vw; height: 7.14285714vw;
width: 7.14285714vw; width: 7.14285714vw;
margin-right: 1.71428571vw; margin-right: 1.71428571vw;
} }
.mobile_wrapper .bottom_fixed .bottom_fixed_div .fixed_item.xcx_item span { .mobile_wrapper .bottom_fixed_item.xcx_item span {
vertical-align: middle; vertical-align: middle;
} }
.mobile_wrapper .bottom_fixed .bottom_fixed_div .fixed_item.app_item { .mobile_wrapper .bottom_fixed_item.app_item {
color: #fff; color: #fff;
text-align: left; text-align: left;
} }
.mobile_wrapper .bottom_fixed .bottom_fixed_div .fixed_item.app_item .app_item_div { .mobile_wrapper .bottom_fixed_item.app_item .app_item_div {
width: 50%; width: 50%;
height: 100%; height: 100%;
position: relative; position: relative;
padding-left: 22.57142857vw; padding-left: 22.57142857vw;
box-sizing: border-box; box-sizing: border-box;
} }
.mobile_wrapper .bottom_fixed .bottom_fixed_div .fixed_item.app_item .app_item_div.ios_item { .mobile_wrapper .bottom_fixed_item.app_item .app_item_div.ios_item {
background-color: #2E3033; background-color: #2E3033;
} }
.mobile_wrapper .bottom_fixed .bottom_fixed_div .fixed_item.app_item .app_item_div.android_item { .mobile_wrapper .bottom_fixed_item.app_item .app_item_div.android_item {
background-color: #5BCC52; background-color: #5BCC52;
} }
.mobile_wrapper .bottom_fixed .bottom_fixed_div .fixed_item.app_item .app_item_div .icon { .mobile_wrapper .bottom_fixed_item.app_item .app_item_div .icon {
position: absolute; position: absolute;
left: 10vw; left: 10vw;
font-size: 6.85714286vw; font-size: 6.85714286vw;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.mobile_wrapper .bottom_fixed .bottom_fixed_div .fixed_item.app_item .app_item_div .phone_type { .mobile_wrapper .bottom_fixed_item.app_item .app_item_div .phone_type {
font-size: 4vw; font-size: 4vw;
padding-top: 2.85714286vw; padding-top: 2.85714286vw;
} }
.mobile_wrapper .bottom_fixed .bottom_fixed_div .fixed_item.app_item .app_item_div .text { .mobile_wrapper .bottom_fixed_item.app_item .app_item_div .text {
font-size: 2.85714286vw; font-size: 2.85714286vw;
opacity: .65; opacity: .65;
} }
......
dist/css/index.less
...@@ -361,6 +361,7 @@ ...@@ -361,6 +361,7 @@
@fixedNum: 7; @fixedNum: 7;
// 移动端
.mobile_wrapper { .mobile_wrapper {
.mobile_h3_common { .mobile_h3_common {
font-size: 42vw/@fixedNum; font-size: 42vw/@fixedNum;
...@@ -432,42 +433,16 @@ ...@@ -432,42 +433,16 @@
.lb_div { .lb_div {
position: relative; position: relative;
height: 362vw/@fixedNum; height: 362vw/@fixedNum;
overflow: hidden;
margin-top: 39vw/@fixedNum; margin-top: 39vw/@fixedNum;
.lb_div_content {
position: absolute;
top: 0;
left: 0;
width: 2100vw/@fixedNum;
;
bottom: 0;
transition: all .4s ease-out;
-ms-transition: all .4s ease-out;
/* IE 9 */
-moz-transition: all .4s ease-out;
/* Firefox */
-webkit-transition: all .4s ease-out;
/* Safari 和 Chrome */
-o-transition: all .4s ease-out;
/* Opera */
.lb_item {
width: 700vw/@fixedNum;
height: 100%;
position: relative;
img { img {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: none;
} }
} }
} }
}
}
} }
.jy_div { .jy_div {
...@@ -613,42 +588,21 @@ ...@@ -613,42 +588,21 @@
} }
} }
} }
.bottom_fixed_item {
.bottom_fixed {
position: fixed; position: fixed;
height: 100vw/@fixedNum; height: 100vw/@fixedNum;
width: 100vw;
font-size: 28vw/@fixedNum;
text-align: center;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
overflow: hidden;
z-index: 9999; z-index: 9999;
display: none;
.bottom_fixed_div {
position: absolute;
top: 0;
width: 300vw;
bottom: 0;
left: 0;
transition: all .4s ease-out;
-ms-transition: all .4s ease-out;
/* IE 9 */
-moz-transition: all .4s ease-out;
/* Firefox */
-webkit-transition: all .4s ease-out;
/* Safari 和 Chrome */
-o-transition: all .4s ease-out;
/* Opera */
.fixed_item {
height: 100%;
width: 100vw;
font-size: 28vw/@fixedNum;
text-align: center;
&.xcx_item { &.xcx_item {
background-color: #5BCC52; background-color: #5BCC52;
line-height: 100vw/@fixedNum; line-height: 100vw/@fixedNum;
color: #fff; color: #fff;
img { img {
height: 50vw/@fixedNum; height: 50vw/@fixedNum;
width: 50vw/@fixedNum; width: 50vw/@fixedNum;
...@@ -663,12 +617,14 @@ ...@@ -663,12 +617,14 @@
&.app_item { &.app_item {
color: #fff; color: #fff;
text-align: left; text-align: left;
.app_item_div { .app_item_div {
width: 50%; width: 50%;
height: 100%; height: 100%;
position: relative; position: relative;
padding-left:158vw/@fixedNum; padding-left: 158vw/@fixedNum;
box-sizing: border-box; box-sizing: border-box;
&.ios_item { &.ios_item {
background-color: #2E3033 background-color: #2E3033
} }
...@@ -676,70 +632,77 @@ ...@@ -676,70 +632,77 @@
&.android_item { &.android_item {
background-color: #5BCC52 background-color: #5BCC52
} }
.icon{
.icon {
position: absolute; position: absolute;
left:70vw/@fixedNum; left: 70vw/@fixedNum;
font-size: 48vw/@fixedNum; font-size: 48vw/@fixedNum;
top:50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.phone_type{
.phone_type {
font-size: 28vw/@fixedNum; font-size: 28vw/@fixedNum;
padding-top:20vw/@fixedNum; padding-top: 20vw/@fixedNum;
} }
.text{
.text {
font-size: 20vw/@fixedNum; font-size: 20vw/@fixedNum;
opacity: .65; opacity: .65;
} }
} }
} }
} }
}
} .xcx_mask {
.xcx_mask{
position: fixed; position: fixed;
top:0; top: 0;
left:0; left: 0;
right:0; right: 0;
bottom:0; bottom: 0;
background-color: rgba(0,0,0,0.5); background-color: rgba(0, 0, 0, 0.5);
z-index:100000; z-index: 100000;
display: none; display: none;
.mask_img_div{
width:80%; .mask_img_div {
width: 80%;
position: absolute; position: absolute;
top:15%; top: 15%;
left:10%; left: 10%;
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 8px;
padding:60vw/@fixedNum 0; padding: 60vw/@fixedNum 0;
text-align: center; text-align: center;
img{
width:60%; img {
width: 60%;
} }
.mask_title{
color:#2E3033; .mask_title {
color: #2E3033;
font-size: 36vw/@fixedNum; font-size: 36vw/@fixedNum;
margin:45vw/@fixedNum 0 margin: 45vw/@fixedNum 0
} }
.mask_li{
.mask_li {
font-size: 26vw/@fixedNum; font-size: 26vw/@fixedNum;
color:#8A9299; color: #8A9299;
&.mask_li1{
margin-bottom:20vw/@fixedNum; &.mask_li1 {
margin-bottom: 20vw/@fixedNum;
} }
span{
span {
display: inline-block; display: inline-block;
height:37vw/@fixedNum; height: 37vw/@fixedNum;
width:37vw/@fixedNum; width: 37vw/@fixedNum;
border-radius: 50% 50%; border-radius: 50% 50%;
color:#FEFEFE; color: #FEFEFE;
background-color: #61A0F2; background-color: #61A0F2;
text-align: center; text-align: center;
line-height: 37vw/@fixedNum; line-height: 37vw/@fixedNum;
margin-right:13vw/@fixedNum margin-right: 13vw/@fixedNum
} }
} }
......
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