手机端页面修改

This commit is contained in:
“wanyongkang”
2023-08-26 17:31:44 +08:00
parent ebe53896fe
commit a4b0f2e5c5
22 changed files with 1312 additions and 848 deletions

View File

@@ -48,6 +48,9 @@
height: 90px;
padding: 15px;
}
.active {
background:#0777ff;
}
.clear {
clear: both;
}
@@ -251,34 +254,8 @@
}
else if(item.Product.Id == 14) {
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" style="width: 99%;height:100%;background:white;padding:0;" id="dropdownMenu1" data-toggle="dropdown"><div style="font-size: 18px;" class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id">@item.Product.Name</div>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" onclick="ttzhizun()" style="color: #FF9900;">尊享版-不限速</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" onclick="ttgaoji()" style="color: #FFCC00;">高级版-限速4M</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" onclick="ttputong()" style="color: #CCCC66;">普通版-限速2M</a>
</li>
</ul>
</div>
}
else if(item.Product.Id == 20) {
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" style="width: 99%;height:100%;background:white;padding:0;" id="dropdownMenu2" data-toggle="dropdown"><div style="font-size: 18px;" class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id">@item.Product.Name<span style="color: #0777ff;font-weight:bold;float:right;padding-right: 5px;"></span></div>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation">
<a role="menuitem" tabindex="-1" onclick="wjdxpc()" style="color: #FFCC00;">电脑</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" onclick="wjdxphone()" style="color: #FF9900;">安卓/苹果</a>
</li>
</ul>
<div style="font-size: 18px;" class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id">@item.Product.Name</div>
</div>
}
else if(item.Product.Id == 22) {
@@ -299,19 +276,13 @@
else if(item.Product.Id == 21) {
<div style="background-color: #ccc;color:#0098fb" disabled="disabled"><span class="glyphicon glyphicon-arrow-down"></span>单窗口单IP<span class="glyphicon glyphicon-arrow-down"></span></div>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" style="width: 99%;height:100%;background:white;padding:0;border-bottom: 1px dashed #0777ff;" id="dropdownMenu2" data-toggle="dropdown"><div style="font-size: 18px;" class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id">@item.Product.Name<span style="color: #0777ff;font-weight:bold;float:right;padding-right: 5px;"></span></div>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation">
<a role="menuitem" tabindex="-1" onclick="wjgxpc()" style="color: #FFCC00;">电脑</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" onclick="wjgxphone()" style="color: #FF9900;">安卓/苹果</a>
</li>
</ul>
<div style="background-color: #ccc;color:#0098fb" disabled="disabled">
<span class="glyphicon glyphicon-arrow-down"></span>单窗口单IP<span class="glyphicon glyphicon-arrow-down"></span>
</div>
<div style="font-size: 18px;" class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id">
@item.Product.Name<span style="color: #0777ff;font-weight:bold;float:right;padding-right: 5px;"></span>
</div>
}
else {
<div class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id">@item.Product.Name </div>
@@ -320,7 +291,7 @@
</div>
</div>
<div class="right">
<div class="right" style="height:auto;">
<div class="contentNew">
@foreach (var item in Model)
{
@@ -372,16 +343,40 @@
</div>
</div>
@if(item.Product.Id == 14) { //不限速
<div style="padding-top:10px;">
<ul class="nav nav-tabs nav-justified" style="margin:0 0 0 50px;cursor: pointer;">
<li id="tabttzx" style="border:1px solid #ccc" class="active">
<a onclick="ttzhizun()" style="color: #009966;width:350px;background:rgba(0,0,0,0)">尊享版-不限速</a>
</li>
<li style="border:1px solid #ccc" id="tabttgj">
<a onclick="ttgaoji()" style="color: #009966;width:350px;background:rgba(0,0,0,0)">高级版-限速4M</a>
</li>
<li style="border:1px solid #ccc" id="tabttpt">
<a onclick="ttputong()" style="color: #009966;width:350px;background:rgba(0,0,0,0)">普通版-限速2M</a>
</li>
</ul>
</div>
}
@if(item.Product.Id == 20){
<p class="youhuiNew" style="color: #0066CC;margin:0;padding:0;">购买后请联系客服授权登录<br>仅电脑支持单窗口单ip手机端为全局代理需求几个窗口就买几个连接数</p>
<p style="text-align:center;color:#0066CC;margin:0;" data-toggle="modal" data-target="#myModal"><a>点击查看各版本区别</a></p>
<div style="padding-top:10px;">
<div style="padding:5px 270px;">
<ul class="nav nav-tabs nav-justified" style="margin-top:0;">
<li id="wjdxpt" class="active"><a style="width: 570px;" onclick="wjdxpt()">普通版-5兆</a></li>
<li id="wjdxgd"><a style="width: 570px;" onclick="wjdxgj()">高端版-10兆</a></li>
<li id="tabwjdxpc" style="border:1px solid #ccc" class="active">
<a onclick="wjdxpc()" style="color: #FF9900;width:300px;background:rgba(0,0,0,0)">电脑</a>
</li>
<li id="tabwjdxsj" style="border:1px solid #ccc">
<a onclick="wjdxphone()" style="color: #FF9900;width:300px;background:rgba(0,0,0,0)">安卓/苹果</a>
</li>
</ul>
</div>
<div style="padding-top:10px;padding:0 270px;">
<ul class="nav nav-tabs nav-justified" style="margin-top:0;">
<li id="wjdxpt" style="border:1px solid #ccc" class="active"><a style="width: 300px;color: #009966;background:rgba(0,0,0,0)" onclick="wjdxpt()">普通版-5兆</a></li>
<li id="wjdxgd" style="border:1px solid #ccc"><a style="width: 300px;color: #009966;background:rgba(0,0,0,0)" onclick="wjdxgj()">高端版-10兆</a></li>
</ul>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
@@ -403,12 +398,25 @@
@if(item.Product.Id == 21){
<p class="youhuiNew" style="color: #0066CC;margin:0;padding:0;">购买后请联系客服授权登录<br>仅电脑支持单窗口单ip手机端为全局代理需求几个窗口就买几个连接数</p>
<p style="text-align:center;color:#0066CC;margin:0;" data-toggle="modal" data-target="#myModals"><a>点击查看各版本区别</a></p>
<div style="padding-top:10px;">
<div style="padding-top:10px;padding:5px 270px;">
<ul class="nav nav-tabs nav-justified" style="margin-top:0;">
<li id="wjgxpt" class="active"><a style="width: 570px;" onclick="wjgxpt()">普通版</a></li>
<li id="wjgxgd"><a style="width: 570px;" onclick="wjgxgj()">极速版</a></li>
<li id="tabwjgxpc" style="border:1px solid #ccc" class="active">
<a onclick="wjgxpc()" style="color: #FF9900;width:300px;background:rgba(0,0,0,0)">电脑</a>
</li>
<li id="tabwjgxsj" style="border:1px solid #ccc">
<a onclick="wjgxphone()" style="color: #FF9900;width:300px;background:rgba(0,0,0,0)">安卓/苹果</a>
</li>
</ul>
</div>
<div style="padding-top:10px;padding:0 270px;">
<ul class="nav nav-tabs nav-justified" style="margin-top:0;">
<li id="wjgxpt" class="active" style="border:1px solid #ccc"><a style="width: 300px;color: #009966;background:rgba(0,0,0,0)" onclick="wjgxpt()">普通版</a></li>
<li id="wjgxgd" style="border:1px solid #ccc"><a style="width: 300px;color: #009966;background:rgba(0,0,0,0)" onclick="wjgxgj()">极速版</a></li>
</ul>
</div>
<div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width: 1250px;">
<div class="modal-content">
@@ -428,138 +436,138 @@
@*<p class="text-center nameSmall">—<span>@item.Product.Name</span>—</p>*@
<div class="card" style="margin-top:30px;">
<div style="display: flex;margin: 0 auto;">
<div style="display: flex;margin: 0 auto;">
@if(item.Product.TenantId == 1157 && item.Product.Content=="0" && item.Product.Id != 14){
<div class="item packageitem" a-test="true" id="@("pkgtest"+item.Product.Id)" a-pkg-id="@item.Product.Id">
<p><span class="price">免费</span></p>
<p class="yuanjia" style="color: #FF9900;text-decoration:none;"><span>@restStatus</span></p>
<p>@restTimes</p>
<div class="pkgNameCard">
<p class="tianka" style="font-size:17px;color:white;">测试卡</p>
<p class="qixian">使用期限:1小时</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
}
@foreach (var package in item.Packages.Where(m => (m.IsTest == 0 && m.Status == 1) || (m.ProductId==14 && m.Status == 1) ).OrderBy(m => m.TenantId))
{
@if(package.Title != "0"){
<style>
.packageitem-@package.Id{
position: relative;
}
.packageitem-@package.Id::before {
position: absolute;
top: 0.3rem;
left: -0.5rem;
z-index: 1;
padding-right: 0.625rem;
font-weight: bold;
line-height: 0px;
color: white;
height: 0px;
border: 1.2rem solid #0777ff;
border-right-color: transparent;
content: "@package.Title 折";
box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
}
.packageitem-@package.Id::after {
content: "";
position: absolute;
top: 2.1875rem;
left: -0.5rem;
border: 0.25rem solid #0777ff;
border-left-color: transparent;
border-bottom-color: transparent;
}
</style>
}
@if(package.Price == 0.1M){
<div class="item packageitem packageitem1" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
<p><span class="price">@package.Price</span>元</p>
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard" style="background-color:#FF9933">
<p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
<p class="qixian">@package.Profile</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
}
else if(package.ProductId == 18 && package.Title=="0"){
<div class="item packageitem packageitem2" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
<p><span class="price">@package.Price</span>元</p>
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard" style="background-color:#0777ff">
<p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
<p class="qixian">@package.Profile</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
}
else if(package.Title!="0"){
<div class="item packageitem packageitem-@package.Id" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
@if((package.Id == 64||package.Id == 1004)&&package.Price<60){
<p><span class="price">60.00</span>元</p>
} else {
<p><span class="price">@package.Price</span>元</p>
}
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard" style="background-color:#0777ff">
<p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
<p class="qixian">@package.Profile</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
}else if((package.Id == 89||package.Id == 1034||package.Id == 1040)&&package.IsTest==1){
<div class="item packageitem" a-test="true" id="@("pkg"+package.Id)" a-pkg-id="@item.Product.Id">
<p><span class="price">@package.Price</span>元</p>
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
@if(item.Product.TenantId == 1157 && item.Product.Content=="0" && item.Product.Id != 14){
<div class="item packageitem" a-test="true" id="@("pkgtest"+item.Product.Id)" a-pkg-id="@item.Product.Id">
<p><span class="price">免费</span></p>
<p class="yuanjia" style="color: #FF9900;text-decoration:none;"><span>@restStatus</span></p>
<p>@restTimes</p>
<div class="pkgNameCard">
<p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
<p class="tianka" style="font-size:17px;color:white;">测试卡</p>
<p class="qixian">使用期限:1小时</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
}
else {
<div class="item " id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
@if((package.Id == 64||package.Id == 1004)&&package.Price<60){
<p><span class="price">60.00</span>元</p>
} else {
@foreach (var package in item.Packages.Where(m => (m.IsTest == 0 && m.Status == 1) || (m.ProductId==14 && m.Status == 1) ).OrderBy(m => m.TenantId))
{
@if(package.Title != "0"){
<style>
.packageitem-@package.Id{
position: relative;
}
.packageitem-@package.Id::before {
position: absolute;
top: 0.3rem;
left: -0.5rem;
z-index: 1;
padding-right: 0.625rem;
font-weight: bold;
line-height: 0px;
color: white;
height: 0px;
border: 1.2rem solid #0777ff;
border-right-color: transparent;
content: "@package.Title 折";
box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
}
.packageitem-@package.Id::after {
content: "";
position: absolute;
top: 2.1875rem;
left: -0.5rem;
border: 0.25rem solid #0777ff;
border-left-color: transparent;
border-bottom-color: transparent;
}
</style>
}
@if(package.Price == 0.1M){
<div class="item packageitem packageitem1" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
<p><span class="price">@package.Price</span>元</p>
}
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard" style="background-color:#0777ff">
<p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
<p class="qixian">@package.Profile</p>
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard" style="background-color:#FF9933">
<p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
<p class="qixian">@package.Profile</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
}
else if(package.ProductId == 18 && package.Title=="0"){
<div class="item packageitem packageitem2" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
<p><span class="price">@package.Price</span>元</p>
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard" style="background-color:#0777ff">
<p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
<p class="qixian">@package.Profile</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
} else if((package.Id == 89||package.Id == 1034||package.Id == 1040)&&package.IsTest==1){
<div class="item packageitem" a-test="true" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
<p><span class="price">@package.Price</span>元</p>
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard">
<p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
<p class="qixian">使用期限:1小时</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
}
else if(package.Title!="0"){
<div class="item packageitem packageitem-@package.Id" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
@if((package.Id == 64||package.Id == 1004)&&package.Price<60){
<p><span class="price">60.00</span>元</p>
} else {
<p><span class="price">@package.Price</span>元</p>
}
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard" style="background-color:#0777ff">
<p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
<p class="qixian">@package.Profile</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
}
else {
<div class="item " id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
@if((package.Id == 64||package.Id == 1004)&&package.Price<60){
<p><span class="price">60.00</span>元</p>
} else {
<p><span class="price">@package.Price</span>元</p>
}
<p class="yuanjia" style="color: #FF9900;">原价:<span>@package.LinePrice</span>元</p>
<p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
<div class="pkgNameCard" style="background-color:#0777ff">
<p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
<p class="qixian">@package.Profile</p>
</div>
<img src="~/img/check.png" class="cardCheck">
</div>
}
}
}
</div>
</div>
</div>
<div style="margin-left:26%">
<div style="border: 1px dashed #ccc;margin-top:30px;width:50%;margin-left: 63px;background-color:#0777ff">
@@ -672,6 +680,9 @@
$("#pkg71").show();
$("#pkg1022").show();
$("#pkg1023").show();
$("#tabttzx").addClass("active");
$("#tabttgj").removeClass("active");
$("#tabttpt").removeClass("active");
for (var i=1034;i<1046;i++){
$("#pkg"+i).hide();
}
@@ -683,6 +694,9 @@
$("#pkg71").hide();
$("#pkg1022").hide();
$("#pkg1023").hide();
$("#tabttzx").removeClass("active");
$("#tabttgj").addClass("active");
$("#tabttpt").removeClass("active");
for (var i=1040;i<1046;i++){
$("#pkg"+i).hide();
}
@@ -697,6 +711,9 @@
$("#pkg71").hide();
$("#pkg1022").hide();
$("#pkg1023").hide();
$("#tabttzx").removeClass("active");
$("#tabttgj").removeClass("active");
$("#tabttpt").addClass("active");
for (var i=1040;i<1046;i++){
$("#pkg"+i).show();
}
@@ -710,6 +727,8 @@
function wjdxphone() {
$("#wjdxgd").removeClass("active");
$("#wjdxpt").addClass("active");
$("#tabwjdxsj").addClass("active");
$("#tabwjdxpc").removeClass("active");
wjdxtype = 1;
for (var i=1048;i<1051;i++){
$("#pkg"+i).show();
@@ -722,6 +741,8 @@
function wjdxpc() {
$("#wjdxgd").removeClass("active");
$("#wjdxpt").addClass("active");
$("#tabwjdxsj").removeClass("active");
$("#tabwjdxpc").addClass("active");
wjdxtype = 2;
for (var i=1048;i<1054;i++){
$("#pkg"+i).hide();
@@ -782,6 +803,8 @@
//1 安卓、苹果 2 pc
var wjgxtype = 1;
function wjgxphone() {
$("#tabwjgxsj").addClass("active");
$("#tabwjgxpc").removeClass("active");
$("#wjgxgd").removeClass("active");
$("#wjgxpt").addClass("active");
wjgxtype = 1;
@@ -794,6 +817,8 @@
}
function wjgxpc() {
$("#tabwjgxsj").removeClass("active");
$("#tabwjgxpc").addClass("active");
$("#wjgxgd").removeClass("active");
$("#wjgxpt").addClass("active");
wjgxtype = 2;
@@ -865,12 +890,12 @@
alert('请注意无尽IP仅供电脑端使用');
}
if (pid == 14) {
$("#pkg89").hide();
$("#pkg69").hide();
$("#pkg70").hide();
$("#pkg71").hide();
$("#pkg1022").hide();
$("#pkg1023").hide();
$("#pkg89").show();
$("#pkg69").show();
$("#pkg70").show();
$("#pkg71").show();
$("#pkg1022").show();
$("#pkg1023").show();
for (var i=1034;i<1046;i++){
$("#pkg"+i).hide();
}
@@ -878,11 +903,37 @@
$("#p"+i).removeClass("on");
}
} else if (pid == 20||pid == 21){
for (var i=1048;i<1072;i++){
$("#pkg"+i).hide();
if (pid ==20) {
$("#wjdxgd").removeClass("active");
$("#wjdxpt").addClass("active");
$("#tabwjdxsj").removeClass("active");
$("#tabwjdxpc").addClass("active");
wjdxtype = 2;
for (var i=1048;i<1054;i++){
$("#pkg"+i).hide();
}
for (var i=1057;i<1060;i++){
$("#pkg"+i).hide();
}
for (var i=1054;i<1057;i++){
$("#pkg"+i).show();
}
}
for (var i=1;i<30;i++){
$("#p"+i).removeClass("on");
if (pid ==21) {
$("#tabwjgxsj").removeClass("active");
$("#tabwjgxpc").addClass("active");
$("#wjgxgd").removeClass("active");
$("#wjgxpt").addClass("active");
wjgxtype = 2;
for (var i=1060;i<1066;i++){
$("#pkg"+i).hide();
}
for (var i=1069;i<1072;i++){
$("#pkg"+i).hide();
}
for (var i=1066;i<1069;i++){
$("#pkg"+i).show();
}
}
} else {
$("#p14").removeClass("on");
@@ -894,7 +945,6 @@
$(".card .item").click(function () {
currentPkgId = $(this).attr('a-pkg-id');
console.log(isTest);
if ($(this).attr('a-test')){
isTest = true;
} else {
@@ -919,7 +969,6 @@
} else {
window.location.href = "Buy?id=" + currentPkgId;
}
console.log(isTest);
})
$(".testLogin").click(function () {
loginCallback = testLoginSuccess;