新增移动端官网

This commit is contained in:
qf
2023-03-20 17:33:34 +08:00
parent 764b7db656
commit e4d4cc18b6
11 changed files with 421 additions and 212 deletions

View File

@@ -62,14 +62,14 @@ body {
width: 1.8rem; } width: 1.8rem; }
.more .dress_wrap .dress .title { .more .dress_wrap .dress .title {
position: absolute; position: absolute;
top: 3.4rem; top: 3.5rem;
left: 0.5rem; left: 0.5rem;
font-size: 0.2666666667rem; font-size: 0.2666666667rem;
color: #fff; } color: #fff; }
.more .dress_wrap .dress .give { .more .dress_wrap .dress .give {
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0.365rem; top: 0.4rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
text-align: center; text-align: center;
@@ -83,9 +83,10 @@ body {
height: 0.2266666667rem; } height: 0.2266666667rem; }
.more .dress_wrap .dress .diamondNum { .more .dress_wrap .dress .diamondNum {
position: absolute; position: absolute;
top: 3.95rem; top: 3.99rem;
left: 0.8rem; left: 0.85rem;
font-size: 0.2666666667rem; font-size: 0.2666666667rem;
font-weight: 600;
color: #FFF577; } color: #FFF577; }
.more .dress_wrap .dress .buy { .more .dress_wrap .dress .buy {
width: 1.5066666667rem; width: 1.5066666667rem;

View File

@@ -111,7 +111,7 @@ body {
.title { .title {
position: absolute; position: absolute;
top: 3.4rem; top: 3.5rem;
left: 0.5rem; left: 0.5rem;
font-size: px2rem(20, ); font-size: px2rem(20, );
color: #fff; color: #fff;
@@ -120,7 +120,7 @@ body {
.give { .give {
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0.365rem; top: 0.4rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
text-align: center; text-align: center;
@@ -138,9 +138,10 @@ body {
.diamondNum { .diamondNum {
position: absolute; position: absolute;
top: 3.95rem; top: 3.99rem;
left: 0.8rem; left: 0.85rem;
font-size: px2rem(20, ); font-size: px2rem(20, );
font-weight: 600;
color: #FFF577; color: #FFF577;
} }

View File

@@ -8,11 +8,11 @@ html {
.container { .container {
position: relative; } position: relative; }
.m-bg { @media screen and (min-width: 769px) {
display: none; } .m-bg {
.m-bg img { display: none; }
display: block; } .m-bg img {
display: block; } }
.homePc { .homePc {
width: 100%; width: 100%;
height: 10rem; height: 10rem;
@@ -216,6 +216,153 @@ html {
height: 1.68rem; height: 1.68rem;
margin-top: 0.38rem; } margin-top: 0.38rem; }
@media screen and (max-width: 768px) {
.pc-bg {
display: none; }
.m-bg {
display: block; }
.homeM {
width: 100%;
height: 16.24rem;
background: url(../images/homeM.png) no-repeat;
background-size: 100% 100%;
position: relative; }
.homeM .logo {
height: 0.5rem;
padding: 0.1rem 0 0 0.34rem;
display: flex;
align-items: center; }
.homeM .logo img {
width: 0.5rem;
height: 0.5rem;
margin-right: 0.08rem; }
.homeM .logo p {
font-size: 0.26rem;
font-weight: 600; }
.homeM .charge {
width: 0.6rem;
height: 0.4rem;
line-height: 0.4rem;
text-align: center;
border-radius: 0.1rem;
font-size: 0.26rem;
font-weight: 600;
position: absolute;
right: 0.34rem;
top: 0.2rem;
background-color: rgba(0, 0, 0, 0.2); }
.homeM .download {
width: 100%;
height: 0.84rem;
display: flex;
justify-content: space-evenly;
position: absolute;
left: 0;
bottom: 0.5rem; }
.homeM .download .iphone,
.homeM .download .android {
width: 2.78rem;
height: 0.84rem; }
.homeM .swiper2 {
width: 100%;
height: 8.6rem;
position: absolute;
top: 5.8rem;
overflow-x: hidden; }
.homeM .swiper2 .swiper-wrapper {
width: 100%;
height: 8rem; }
.homeM .swiper2 .swiper-wrapper .swiper-slide img {
width: 100%;
height: 100%; }
.homeM .swiper2 .swiper-pagination {
position: absolute;
top: 7.5rem;
left: 0; }
.homeM .swiper2 .swiper-pagination .swiper-pagination-bullet {
width: 0.25rem !important;
height: 0.25rem !important;
background: none !important;
background-image: url(../images/li.png) !important;
background-size: 100% 100% !important;
opacity: 1 !important;
margin-right: 0.3rem; }
.homeM .swiper2 .swiper-pagination .swiper-pagination-bullet-active {
background: none !important;
background-image: url(../images/li_active.png) !important;
background-size: 100% 100% !important;
opacity: 1 !important; }
.button-wrapper {
display: block;
position: absolute;
left: 1.28rem;
top: 17.52rem;
width: 7.4666666667rem;
height: 1.2266666667rem; }
.button-wrapper a {
display: inline-block;
width: 100%;
height: 100%; }
.button2-wrapper {
display: block;
position: absolute;
left: 3.0933333333rem;
bottom: 1.7066666667rem;
width: 4rem;
height: 0.8rem;
background: rgba(255, 255, 255, 0); }
.button2-wrapper a {
display: inline-block;
width: 100%;
height: 100%; }
.m-button {
display: block; }
.text-wrapper {
padding-left: 0;
width: 90%;
margin-left: -45%;
padding-top: 108px; }
.text-wrapper .text .txt1 {
margin-bottom: 10px; }
.text-wrapper .text1,
.text-wrapper p {
text-align: center; }
.eori {
width: 100%;
background: #30312C;
color: white;
padding: 0.2rem 0; }
.eori .recordfoot {
color: #fff;
display: flex;
justify-content: center;
align-items: center; }
.eori .recordfoot .record {
display: inline-block;
padding-right: 0.0533333333rem;
height: 0.3733333333rem;
width: 0.4266666667rem;
background: url(../images/icon_police.png) no-repeat; }
.eori .gongsi {
display: block;
text-align: center; }
.eori .gongsi p {
line-height: 1.3;
font-size: 0.2rem; }
.eori .gongsi p:nth-child(2) {
margin: 0; }
.eori .tit {
height: 1.6rem;
line-height: 1.6rem;
text-align: center;
font-size: 20px; } }
.toast { .toast {
background: rgba(0, 0, 0, 0.9); background: rgba(0, 0, 0, 0.9);
border-radius: 10px; border-radius: 10px;

View File

@@ -15,12 +15,13 @@ html {
} }
// pc端 // pc端
// @media screen and (min-width:769px) {} @media screen and (min-width:769px) {
.m-bg { .m-bg {
display: none; display: none;
img { img {
display: block; display: block;
}
} }
} }
@@ -329,201 +330,230 @@ html {
} }
// 移动端 // 移动端
// @media screen and (max-width:768px) { @media screen and (max-width:768px) {
// body {
// background-color: #0C0122;
// }
// .pc-bg { .pc-bg {
// display: none; display: none;
// } }
// .m-bg { .m-bg {
// display: block; display: block;
// } }
// .homeM { .homeM {
// width: 100%; width: 100%;
// // width: px2rem(750, ); height: 16.24rem;
// // height: px2rem(1489, ); background: url(../images/homeM.png) no-repeat;
// // height: 19.88rem; background-size: 100% 100%;
// height: 14.89rem; position: relative;
// background: url(../images/homeM.png) no-repeat;
// background-size: 100% 100%;
// position: relative;
// .charge { .logo {
// width: 1.11rem; height: 0.5rem;
// height: 0.5rem; padding: 0.1rem 0 0 0.34rem;
// background: rgb(255, 255, 255, 0.2); display: flex;
// border-radius: .13rem; align-items: center;
// font-size: 0.24rem;
// color: #fff;
// text-align: center;
// line-height: 0.5rem;
// position: absolute;
// top: 0.2rem;
// right: 0.4rem;
// // left: 50%;
// // transform: translateX(-50%);
// }
// .swiper { img {
// width: 100%; width: 0.5rem;
// height: 8.6rem; height: 0.5rem;
// position: absolute; margin-right: 0.08rem;
// top: 4.8rem; }
// overflow: hidden;
// .swiper-wrapper { p {
// width: 60%; font-size: 0.26rem;
// height: 100%; font-weight: 600;
}
}
// .swiper-slide { .charge {
// img { width: 0.6rem;
// width: 100%; height: 0.4rem;
// height: 100%; line-height: 0.4rem;
// } text-align: center;
// } border-radius: 0.1rem;
font-size: 0.26rem;
font-weight: 600;
position: absolute;
right: 0.34rem;
top: 0.2rem;
background-color: rgba(0, 0, 0, 0.2);
}
// .swiper-slide-prev { .download {
// width: 100%; width: 100%;
// height: 90%; height: 0.84rem;
// margin-top: 0.6rem; display: flex;
// } justify-content: space-evenly;
position: absolute;
left: 0;
bottom: 0.5rem;
// .swiper-slide-next { .iphone,
// width: 100%; .android {
// height: 90%; width: 2.78rem;
// margin-top: 0.6rem; height: 0.84rem;
// } }
// } }
// }
// .logo { .swiper2 {
// position: absolute; width: 100%;
// bottom: 0.6rem; height: 8.6rem;
// left: 0; position: absolute;
// width: 100%; top: 5.8rem;
// display: flex; overflow-x: hidden;
// justify-content: space-evenly;
// img { .swiper-wrapper {
// width: 2.2rem; width: 100%;
// height: 0.7rem; height: 8rem;
// }
// }
// }
// .button-wrapper { .swiper-slide {
// display: block; img {
// position: absolute; width: 100%;
// left: px2rem(96); height: 100%;
// top: px2rem(1314); }
// width: px2rem(560); }
// height: px2rem(92); }
// a { .swiper-pagination {
// display: inline-block; // width: 20%;
// width: 100%; // height: 50%;
// height: 100%; // transform: rotate(90deg);
// } position: absolute;
// } top: 7.5rem;
left: 0;
// .button2-wrapper { .swiper-pagination-bullet {
// display: block; width: 0.25rem !important;
// position: absolute; height: 0.25rem !important;
// left: px2rem(232); background: none !important;
// // top: px2rem(1208); background-image: url(../images/li.png) !important;
// bottom: px2rem(128); background-size: 100% 100% !important;
// width: px2rem(300); opacity: 1 !important;
// height: px2rem(60); margin-right: 0.3rem;
// background: rgba(255, 255, 255, 0); }
// a { .swiper-pagination-bullet-active {
// display: inline-block; // width: 30px !important;
// width: 100%; // height: 30px !important;
// height: 100%; background: none !important;
// } background-image: url(../images/li_active.png) !important;
// } background-size: 100% 100% !important;
opacity: 1 !important;
}
}
}
// .m-button { }
// display: block;
// }
// .text-wrapper { .button-wrapper {
// padding-left: 0; display: block;
// width: 90%; position: absolute;
// margin-left: -45%; left: px2rem(96);
// padding-top: 108px; top: px2rem(1314);
width: px2rem(560);
height: px2rem(92);
// .text { a {
// .txt1 { display: inline-block;
// margin-bottom: 10px; width: 100%;
// } height: 100%;
}
}
// } .button2-wrapper {
display: block;
position: absolute;
left: px2rem(232);
// top: px2rem(1208);
bottom: px2rem(128);
width: px2rem(300);
height: px2rem(60);
background: rgba(255, 255, 255, 0);
// .text1, a {
// p { display: inline-block;
// text-align: center; width: 100%;
// } height: 100%;
// } }
}
// .eori { .m-button {
// // height: 1.2rem; display: block;
// width: 100%; }
// background: #30312C;
// color: rgb(255, 255, 255);
// padding: 0.2rem 0;
// .recordfoot { .text-wrapper {
// color: #fff; padding-left: 0;
// display: flex; width: 90%;
// justify-content: center; margin-left: -45%;
// align-items: center; padding-top: 108px;
// .record { .text {
// display: inline-block; .txt1 {
// padding-right: px2rem(4); margin-bottom: 10px;
// height: px2rem(28, ); }
// width: px2rem(32, );
// background: url(../images/icon_police.png) no-repeat;
// }
// }
// .gongsi { }
// display: block;
// text-align: center;
// p { .text1,
// line-height: 1.3; p {
// font-size: 0.2rem; text-align: center;
}
}
// &:nth-child(2) { .eori {
// margin: 0; // height: 1.2rem;
// } width: 100%;
// } background: #30312C;
// } color: rgb(255, 255, 255);
padding: 0.2rem 0;
// // div { .recordfoot {
// // // height: 30px; color: #fff;
// // width: 100%; display: flex;
// // text-align: center; justify-content: center;
// // // line-height: 30px; align-items: center;
// // font-size: 14px;
// // }
// .tit { .record {
// height: px2rem(120); display: inline-block;
// line-height: px2rem(120); padding-right: px2rem(4);
// text-align: center; height: px2rem(28, );
// font-size: 20px; width: px2rem(32, );
// } background: url(../images/icon_police.png) no-repeat;
}
}
// } .gongsi {
display: block;
text-align: center;
// } p {
line-height: 1.3;
font-size: 0.2rem;
&:nth-child(2) {
margin: 0;
}
}
}
// div {
// // height: 30px;
// width: 100%;
// text-align: center;
// // line-height: 30px;
// font-size: 14px;
// }
.tit {
height: px2rem(120);
line-height: px2rem(120);
text-align: center;
font-size: 20px;
}
}
}
.toast { .toast {

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

View File

@@ -78,39 +78,38 @@
<img src="./images/btn_right.png" alt=""> <img src="./images/btn_right.png" alt="">
</div> --> </div> -->
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="m-bg"> <div class="m-bg">
<div class="homeM"> <div class="homeM">
<div class="charge">儲值</div> <div class="logo">
轮播 <img src="./images/logo.png" alt="">
<div class="swiper-container swiper"> <p>音萌</p>
</div>
<!-- <div class="charge">充值</div> -->
<!-- 轮播 -->
<div class="swiper-container swiper2">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<img src="./images/pic1.png" alt=""> <img src="./images/mpic1.png" alt="">
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<img src="./images/pic2.png" alt=""> <img src="./images/mpic2.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/pic3.png" alt="">
</div> </div>
</div> </div>
<div class="swiper-pagination swp"></div> <div class="swiper-pagination swp"></div>
</div> </div>
<div class="logo">
<img class="googlePlay" src="./images/googlePlay.png" alt=""> <!-- 下载 -->
<img class="appleStore" src="./images/appleStore.png" alt=""> <div class="download">
<img class="apk" src="./images/apk.png" alt=""> <img src="./images/ios.png" class="iphone" alt="">
<img src="./images/android.png" class="android" alt="">
</div> </div>
</div> </div>
</div> -->
<!-- <div class="button-wrapper download">
</div> </div>
<div class="button2-wrapper download">
</div> -->
<div class="eori"> <div class="eori">
<div class="recordfoot"> <div class="recordfoot">
@@ -132,11 +131,15 @@
<div class="subhead">为能提供更好的服务,您可以通过一下方式联系我们</div> <div class="subhead">为能提供更好的服务,您可以通过一下方式联系我们</div>
<div class="con"> <div class="con">
<div class="left"> <div class="left">
<p><e>1</e>个人中心-联系客服</p> <p>
<e>1</e>个人中心-联系客服
</p>
<img src="./images/kefu1.png" alt=""> <img src="./images/kefu1.png" alt="">
</div> </div>
<div class="right"> <div class="right">
<p><e>2</e>扫码添加官方微信咨询</p> <p>
<e>2</e>扫码添加官方微信咨询
</p>
<img src="./images/kefu2.png" alt=""> <img src="./images/kefu2.png" alt="">
</div> </div>
</div> </div>

View File

@@ -33,31 +33,55 @@ function swiperFun() {
}); });
} }
function swiperFun2() {
var swiper2 = new Swiper('.swiper2', {
direction: 'horizontal',
pagination: '.swiper-pagination',
paginationClickable :true,
loop: true,
autoplay: 5000,
// nextButton: ".swiper-button-next",
// prevButton: ".swiper-button-prev",
});
}
$(function () { $(function () {
let version = checkVersion() let version = checkVersion()
//判断url参数是否是与渠道包名一致 //判断url参数是否是与渠道包名一致
let androidUrl = null; let androidUrl = null;
channelDict.hasOwnProperty(channelData) ? androidUrl = channelDict[channelData] : androidUrl = 'https://image.lecheng163.com/yinmeng_official.apk'; channelDict.hasOwnProperty(channelData) ? androidUrl = channelDict[channelData] : androidUrl = 'https://image.nnbc123.cn/yinmeng_official.apk';
// let iosUrl = 'http://doudouyue.com/8axv' //ios企业包 // let iosUrl = 'http://doudouyue.com/8axv' //ios企业包
let iosUrl = 'https://image.lecheng163.com/yinmengjiaoyou_official.apk' //ios商店包 let iosUrl = 'http://fir.gzmangguo.cn/sbz6' //ios商店包
$(document).ready(function () { $(document).ready(function () {
var deviceWidth = document.documentElement.clientWidth; var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px'; if (deviceWidth > 768) {
swiperFun(); document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
swiperFun();
} else {
document.documentElement.style.fontSize = deviceWidth / 7.50 + 'px';
swiperFun2()
}
}); });
window.onresize = function () { window.onresize = function () {
var deviceWidth = document.documentElement.clientWidth; var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px'; if (deviceWidth > 768) {
swiperFun(); document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
swiperFun();
} else {
document.documentElement.style.fontSize = deviceWidth / 7.50 + 'px';
swiperFun2()
}
} }
// 下载
$('.homePc .android').on('click', function () { $('.android').on('click', function () {
window.location.href = androidUrl; window.location.href = androidUrl;
}) })
$('.homePc .iphone').on('click', function () { $('.iphone').on('click', function () {
window.location.href = iosUrl; window.location.href = iosUrl;
}) })
//联系客服按钮 //联系客服按钮
@@ -71,5 +95,8 @@ $(function () {
$('.homePc .charge').click(function () { $('.homePc .charge').click(function () {
window.location.href = tranUrl +'/yinmeng/modules/payment_pc/index.html'; window.location.href = tranUrl +'/yinmeng/modules/payment_pc/index.html';
}) })
$('.homeM .charge').click(function () {
window.location.href = tranUrl +'/yinmeng/modules/payment/index.html';
})
}) })