wyk/juipnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

手机端页面修改

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

219
Host/Views.Mobile/LineList/Index.cshtml
View File

@@ -10,23 +10,152 @@
var lineTotalCount = Model.Count;
var lineCount = Model.Where(m => m.Status == "正常").Count();
}
<div id="loading">
<div class="loader">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>
</div>
<style>
.loader {
background: #000;
background: radial-gradient(#222, #000);
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
}
.loader-inner {
bottom: 0;
height: 60px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap {
animation:
spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
;
box-sizing: border-box;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
width: 100px;
}
.loader-line {
border: 4px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }
.loader-line-wrap:nth-child(1) .loader-line {
border-color: hsl(0, 80%, 60%);
height: 90px;
width: 90px;
top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
border-color: hsl(60, 80%, 60%);
height: 76px;
width: 76px;
top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
border-color: hsl(120, 80%, 60%);
height: 62px;
width: 62px;
top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
border-color: hsl(180, 80%, 60%);
height: 48px;
width: 48px;
top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
border-color: hsl(240, 80%, 60%);
height: 34px;
width: 34px;
top: 35px;
}
@@keyframes spin {
0%, 15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
<style>
table,table tr th,td {
border:1px solid #ccc;
}
</style>
<div id="app">
<div class="quanjushousuo">
<p><input type="text" v-model="search_all_data" name="KeyWord" placeholder="输入地区/名称/服务器" id="KeyWord" /><button type="submit" v-on:click="search_all()" class="btnOrange">搜索全部</button></p>
<p><img src="~/m/img/shuju.png"> 实时总线路：{{ count }}条 <img src="~/m/img/shuju.png"> 实时可用线路：{{ use_count }}条</p>
<div style="padding:5.5em 0 0.5em 0;background:rgb(57, 81, 107);color:white;text-align:center;">
<p style="padding: 3px;margin:0;">*线路表和账号必须为同一产品才能使用。</p>
<p style="padding: 3px;margin:0;">*请优先选择客户端连接 <a style="color:#0777ff;" href="/product/soft"><<<下载客户端>>></a> </p>
<p style="padding: 3px;margin:0;">*无对应客户端时，可通过线路表直连支持所有设备<a style="color:#0777ff;" href="/article/index"><<<教程&帮助>>></a></p>
</div>
<div class="zhilian">
<div class="item">
<span class="btnZhilian">
<a asp-index="" asp-controller="article" asp-route-Catalog="4"><img src="~/m/img/zhilian.png">直连教程</a>
</span>
</div>
<div class="item">
<p class="grayText" style="font-size: 25px;">线路表与账号必须为同一产品才能使用</p>
</div>
<div class="lineBar"></div>
<div class="cpList">
<ul>
@foreach (var item in product.Where(m => m.Id != 3 && m.Id != 7 && m.Id != 9&& m.Id != 20&& m.Id != 21))
{
<li v-on:click="select_product(@item.Id)" id="product-@item.Id" class="item @(item.Id==pid?"cpActive":"")" a-pid="@item.Id" a-name="@item.Name">@item.Name</li>
}
</ul>
</div>
<div style="color: red;" v-if="product_id ==1|| product_id==2">
<p style="text-align:center;">
<span style="font-size: 20px;color:#FF0033;">{{search_field}}</span> 用服务器地址直连用户请注意：
@@ -41,23 +170,15 @@
<p>只要线路名称里面带“宽带”两个字的是完全模拟家庭宽带网络的线路，和家庭宽度网络一样一般1-2天不等自动换一次ip</p>
</div>
<div class="lineBar"></div>
<div class="cpList">
<ul>
@foreach (var item in product.Where(m => m.Id != 3 && m.Id != 7 && m.Id != 9&& m.Id != 20&& m.Id != 21))
{
<li v-on:click="select_product(@item.Id)" id="product-@item.Id" class="item @(item.Id==pid?"cpActive":"")" a-pid="@item.Id" a-name="@item.Name">@item.Name</li>
}
</ul>
</div>
<div class="dangqianshousuo">
<p>
<input type="hidden" name="ProductId" id="ProductId" value="@pid" />
<span style="background:rgb(74, 113, 155);color:white;padding: 0.6em 0 0.6em 0.6em;background:#1b379d;">{{search_field}}
<input type="text" v-model="search_product_data" name="KeyWord" placeholder="输入地区/名称/服务器" id="KeyWord" />
<button v-on:click="search_product()" type="submit" class="btnBlue">搜索当前</button>
</span>
<button style="width:auto;padding: 0 1em;" v-on:click="search_product()" type="submit" class="btnBlue">搜索</button>
</p>
<p><img src="~/m/img/shuju.png"> 实时总线路：{{ count }}条 <img src="~/m/img/shuju.png"> 实时可用线路：{{ use_count }}条</p>
</div>
<div class="daochu">
@@ -70,32 +191,26 @@
</div>
</div>
<div class="tableTit">
<div class="item">
地区
</div>
<div class="item">
<span v-if="product_id ==19">剩余拨数：</span>
<span v-else="product_id ==19">运营商：</span>
</div>
<div class="item">
服务器域名
</div>
<div class="item">
详情
</div>
</div>
<div class="cityData" v-for="site in table_data" :style="(site.online=='故障')?'color:#ec5656;':''">
<div class="item" v-if="site.online==null" style="color:#993399">{{site.city}}</div>
<div class="item" v-if="site.online!=null">{{site.city}}</div>
<div class="item">{{site.supply}}</div>
<div class="item">{{site.nasname}}</div>
<div class="item">
<button type="button" v-on:click="detail(site)" class="btnDetail">详情</button>
</div>
</div>
<table class="table table-striped xianluTable" style="margin-bottom: 10px;">
<tr>
<th>地区</th>
<th v-if="product_id ==19">剩余拨数</th>
<th v-else="product_id ==19">运营商</th>
<th>服务器域名</th>
<th style="width:3em;">详情</th>
<th>操作</th>
</tr>
<tr v-for="site in table_data" :style="(site.online=='故障')?'color:#ec5656;':''">
<td colspan="5" v-if="!site.nasname" style="color:#339933;font-weight:bold;text-align:center;">{{site.city}}</td>
<td v-if="site.nasname">{{site.city}}</td>
<td v-if="site.nasname">{{site.supply}}</td>
<td v-if="site.nasname">{{site.nasname}}</td>
<td v-if="site.nasname">{{site.online}}</td>
<td v-if="site.nasname"><button type="button" v-on:click="detail(site)" class="btnDetail">详情</button></td>
</tr>
</table>
<!-- 弹窗详情 -->
@@ -144,6 +259,12 @@
</div>
<script type="text/javascript">
$(function(){
setTimeout(function(){
$("#loading").hide();
},500);
});
var app = new Vue({
el: '#app',
@@ -153,7 +274,7 @@
search_product_data:'',
product_id:0,
l2tp:'',
search_field:'',
search_field:'全部',
sstp:'',
info: {},
count:'0',