教程帮助界面更改
This commit is contained in:
“wanyongkang”
@@ -6,144 +6,141 @@
|
||||
@{
|
||||
var type = this.Context.Request.GetInt("Catalog");
|
||||
}
|
||||
<div class="container-fluid softBg">
|
||||
<div class="container">
|
||||
<form asp-action="Search" asp-controller="Article" method="get">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 zxbz">
|
||||
<img src="~/img/img_news.png">
|
||||
</div>
|
||||
<div class="col-lg-6 searchInput">
|
||||
<input type="text" name="KeyWord" />
|
||||
<p class="hot">搜索热词：<span>账号无法登录</span><span>如何充值</span></p>
|
||||
</div>
|
||||
<div class="col-lg-3 searchBtn text-left">
|
||||
<button type="submit" class="btn btn-search">立即搜索</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<link rel="stylesheet" href="~/help_style/css/nav.css">
|
||||
<div id="app" class="container-fluid" style="color: #fff;background:#39516b;">
|
||||
<div class="container" style="padding: 20px;">
|
||||
<div class="navhelp col-md-3" style="overflow:auto;">
|
||||
<ul style="padding-top: 20px;">
|
||||
<li class="navhelp-item">
|
||||
<a href="?Catalog=5"><span>公告中心</span></a>
|
||||
</li>
|
||||
<li class="navhelp-item">
|
||||
<a href="?Catalog=4"><span>直连教程</span></a>
|
||||
</li>
|
||||
<li class="navhelp-item">
|
||||
<a href="?Catalog=3"><span>常见售后</span></a>
|
||||
</li>
|
||||
<li class="navhelp-item">
|
||||
<a href="?Catalog=1"><span>其他帮助</span></a>
|
||||
</li>
|
||||
<li class="navhelp-item">
|
||||
<a href="?Catalog=2"><span>优惠活动</span></a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<section class=" col-md-9" style="color: #0777ff;background:#263238;margin-left:5px;height: 80vh;overflow:auto; text-center;" >
|
||||
<div id="help_info">
|
||||
<div class="tab-content listcon" >
|
||||
<div role="tabpanel" class="tab-pane active" id="home">
|
||||
<div></div>
|
||||
<ul class="listUl">
|
||||
@foreach (var item in Model.List)
|
||||
{
|
||||
<li>
|
||||
<a style="color: aliceblue;" href="#" v-on:click="help_info(@item.Id)">
|
||||
<div class="newsTit">
|
||||
<div class="item" >
|
||||
<p style="padding: 0;margin:0;color:white;">@item.Title</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
@item.CreateTime.ToString("yyyy.MM.dd")
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
@* 详细内容 *@
|
||||
<div role="tabpanel" class="tab-pane active text-center" id="detail" style="display:none;">
|
||||
<ul class="breadcrumb text-left" >
|
||||
<li><a :href="'?Catalog='+title.id" style="color:#ccc">{{title.value1}}</a></li>
|
||||
<li class="active" style="color:white">{{title.value2}}</li>
|
||||
</ul>
|
||||
<div v-if="detail_id == 3" style="text-align: center;">
|
||||
<h1>视频教程</h1>
|
||||
<video controls="controls" height="500" name="media"><source src="http://mp4.juip.com/%E8%8B%B9%E6%9E%9C%E6%89%8B%E6%9C%BA%E6%95%99%E7%A8%8B.mp4" type="video/mp4"></video>
|
||||
</div>
|
||||
<div v-if="detail_id == 4" style="text-align: center;">
|
||||
<h1>视频教程</h1>
|
||||
<video controls="controls" height="500" name="media"><source src="http://mp4.juip.com/%E5%AE%89%E5%8D%93%E6%89%8B%E6%9C%BA%E6%95%99%E7%A8%8B.mp4" type="video/mp4"></video>
|
||||
</div>
|
||||
<div v-if="detail_id == 5" style="text-align: center;">
|
||||
<h1>视频教程</h1>
|
||||
<video controls="controls" height="500" name="media"><source src="http://mp4.juip.com/%E6%A8%A1%E6%8B%9F%E5%99%A8%E6%95%99%E7%A8%8B.mp4" type="video/mp4"></video>
|
||||
</div>
|
||||
<div v-if="detail_id == 56" style="text-align: center;">
|
||||
<h1>视频教程</h1>
|
||||
<video controls="controls" height="500" name="media"><source src="http://mp4.juip.com/wjjc.mp4" type="video/mp4"></video>
|
||||
</div>
|
||||
<div id="content" style="background:white;">
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 text-left">
|
||||
上一条：<a href="#" v-on:click="help_info(prev.Id)">{{prev.Title}}</a>
|
||||
</div>
|
||||
<div class="col-lg-6 text-right">
|
||||
下一条：<a href="#" v-on:click="help_info(next.Id)">{{next.Title}}</a>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid conBg">
|
||||
<div class="container">
|
||||
<div class="fourModel">
|
||||
<div class="item">
|
||||
<p><a asp-action="info" asp-controller="article" asp-route-id="3"><img src="~/img/ios.png"></a></p>
|
||||
<p>苹果手机教程</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p><a asp-action="info" asp-controller="article" asp-route-id="4"><img src="~/img/az.png"></a></p>
|
||||
<p>安卓手机教程</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p><a asp-action="info" asp-controller="article" asp-route-id="5"><img src="~/img/mnq.png"></a></p>
|
||||
<p>安卓模拟器教程</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p><a asp-action="info" asp-controller="article" asp-route-id="6"><img src="~/img/pc.png"></a></p>
|
||||
<p>Windows电脑教程</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p><a asp-action="info" asp-controller="article" asp-route-id="21"><img src="~/img/pc.png"></a></p>
|
||||
<p>MAC电脑教程</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p><a asp-action="info" asp-controller="article" asp-route-id="10"><img src="~/img/pc.png"></a></p>
|
||||
<p>软路由教程</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mylist">
|
||||
<ul class="nav nav-tabs newsList" role="tablist">
|
||||
<li role="presentation" class="@(type==1?"active":"")"><a href="?Catalog=1"><img src="~/img/tab1.png">聚头条</a></li>
|
||||
<li role="presentation" class="@(type==2?"active":"")"><a href="?Catalog=2"> <img src="~/img/tab2.png">优惠活动</a></li>
|
||||
<li role="presentation" class="@(type==3?"active":"")"><a href="?Catalog=3"><img src="~/img/tab3.png">常见问题</a></li>
|
||||
<li role="presentation" class="@(type==4?"active":"")"><a href="?Catalog=4"><img src="~/img/tab4.png">新手教程</a></li>
|
||||
@*<li role="presentation" class="@(type==0?"active":"")"><a href="?Catalog=0"><img src="~/img/tab4.png">全部</a></li>*@
|
||||
|
||||
</ul>
|
||||
<div class="tab-content listcon">
|
||||
<div role="tabpanel" class="tab-pane active" id="home">
|
||||
<ul class="listUl">
|
||||
@foreach (var item in Model.List)
|
||||
{
|
||||
<li>
|
||||
<div class="newsTit">
|
||||
<div class="item">
|
||||
@item.Title
|
||||
</div>
|
||||
<div class="item">
|
||||
@item.CreateTime.ToString("yyyy.MM.dd")
|
||||
</div>
|
||||
</div>
|
||||
<p class="gaiyao">@item.SubTitle</p>
|
||||
<p><a asp-action="info" asp-controller="article" asp-route-id="@item.Id">查看全文→</a></p>
|
||||
</li>
|
||||
}
|
||||
|
||||
@*<li>
|
||||
<div class="newsTit">
|
||||
<div class="item">
|
||||
如何查看IP代理地址是否启动成功？
|
||||
</div>
|
||||
<div class="item">
|
||||
2020.1.1
|
||||
</div>
|
||||
</div>
|
||||
<p class="gaiyao">概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字</p>
|
||||
<p><a href="#">查看全文→</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="newsTit">
|
||||
<div class="item">
|
||||
如何查看IP代理地址是否启动成功？
|
||||
</div>
|
||||
<div class="item">
|
||||
2020.1.1
|
||||
</div>
|
||||
</div>
|
||||
<p class="gaiyao">概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字</p>
|
||||
<p><a href="#">查看全文→</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="newsTit">
|
||||
<div class="item">
|
||||
如何查看IP代理地址是否启动成功？
|
||||
</div>
|
||||
<div class="item">
|
||||
2020.1.1
|
||||
</div>
|
||||
</div>
|
||||
<p class="gaiyao">概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字</p>
|
||||
<p><a href="#">查看全文→</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="newsTit">
|
||||
<div class="item">
|
||||
如何查看IP代理地址是否启动成功？
|
||||
</div>
|
||||
<div class="item">
|
||||
2020.1.1
|
||||
</div>
|
||||
</div>
|
||||
<p class="gaiyao">概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字</p>
|
||||
<p><a href="#">查看全文→</a></p>
|
||||
</li>*@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fenye">
|
||||
@await Component.InvokeAsync("Pager", new PagerModel() { Total = Model.RowCount, PageIndex = this.Context.Request.GetInt("PageIndex") })
|
||||
@*<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">上一页</a></li>
|
||||
<li class="page-item"><a class="page-link fenyeActive" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">下一页</a></li>
|
||||
</ul>*@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /container -->
|
||||
<hr style="color: white;padding:0;margin:0;">
|
||||
<script src="~/help_style/js/nav.js"></script>
|
||||
<script src="~/js/vue.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var title_list = [' ','其他帮助','优惠活动','常见售后','直连教程','公告中心'];
|
||||
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
detail_id:0,
|
||||
title:{
|
||||
id:'123',
|
||||
value1:'',
|
||||
value2:'',
|
||||
},
|
||||
prev:{},
|
||||
next:{},
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
created: function () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
help_info(id) {
|
||||
var that=this;
|
||||
this.detail_id = id;
|
||||
$("#home").hide();
|
||||
$("#detail").show();
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '/article/info?id=' + id,
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
$("#content").html(res.Data.Info.Content)
|
||||
that.title.id = res.Data.Info.CatalogId
|
||||
that.title.value1 = title_list[that.title.id]
|
||||
that.title.value2 = res.Data.Info.Title
|
||||
that.prev = res.Data.Prev?res.Data.Prev:''
|
||||
that.next = res.Data.Next?res.Data.Next:''
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user