Skip to content

施宇 / icsales

Go to a project
Commit 09bd3778 by 施宇
Options

1111

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