156 lines
8.0 KiB
Plaintext
156 lines
8.0 KiB
Plaintext
@using Hncore.Pass.Vpn.Domain
|
|
@using Hncore.Infrastructure.Data
|
|
@using Hncore.Infrastructure.Extension
|
|
@using ViewComponents
|
|
@model PageData<ArticleEntity>
|
|
@{
|
|
var type = this.Context.Request.GetInt("Catalog");
|
|
}
|
|
<div id="app" class="container-fluid" style="color: #fff;background:#39516b;font-size:1.5em;">
|
|
<div class="container" style="padding: 20px;">
|
|
<div class="navhelp col-md-3 text-center" style="height:auto;width:100%;margin:3em 0 0.5em 0;padding:10px;">
|
|
|
|
|
|
<div>
|
|
<div class="input-group">
|
|
<input type="text" placeholder="请输入搜索内容" style="height:4em;" v-model="help_search" class="form-control">
|
|
<span class="input-group-btn" style="height:4em;">
|
|
<a class="btn btn-default" :href="'?KeyWord='+help_search" style="background:rgb(57, 81, 107);height:4em;color:white;line-height:3em;" type="button">搜索全部</a>
|
|
</span>
|
|
</div><!-- /input-group -->
|
|
</div>
|
|
|
|
<hr style="color: white;padding:0 ;margin:1em 0 0 0;">
|
|
<ul class="nav nav-tabs nav-justified" style="background:#39516b;">
|
|
<li id="notice5"><a href="?Catalog=5" style="font-size:0.7em;padding-left:0;padding-right:0;color:white">公告中心</a></li>
|
|
<li id="notice4"><a href="?Catalog=4" style="font-size:0.7em;padding-left:0;padding-right:0;color:white">直连教程</a></li>
|
|
<li id="notice3"><a href="?Catalog=3" style="font-size:0.7em;padding-left:0;padding-right:0;color:white">常见售后</a></li>
|
|
<li id="notice1"><a href="?Catalog=1" style="font-size:0.7em;padding-left:0;padding-right:0;color:white">其他帮助</a></li>
|
|
<li id="notice2"><a href="?Catalog=2" style="font-size:0.7em;padding-left:0;padding-right:0;color:white">优惠活动</a></li>
|
|
<li id="notice6"><a href="?Catalog=6" style="font-size:0.7em;padding-left:0;padding-right:0;color:white">代理合作</a></li>
|
|
</ul>
|
|
|
|
|
|
</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">
|
|
@if (type == 4) {
|
|
<div style="font-size:0.7em">
|
|
<p style="padding:0;margin:0;">*请优先选择客户端连接 <a style="color:#0777ff;" href="/product/soft"><<<下载客户端>>></a></p>
|
|
<p style="padding:0;margin:0;">*无对应客户端时，可通过线路表直连支持所有设备</p>
|
|
</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" >
|
|
<div style="padding: 10px;margin:0;width:100%;;color:white;border-bottom:1px solid white;height:1.7em;">
|
|
<div class=" col-sm-8" style="overflow:hidden;height:1.5em;"> @item.Title</div>
|
|
<div class=" col--4">@item.CreateTime.ToString("yyyy.MM.dd")</div>
|
|
</div>
|
|
</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" style="background:rgb(38, 50, 56);">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<hr style="color: white;padding:0;margin:0;">
|
|
<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:{},
|
|
help_search:''
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
created: function () {
|
|
$("#notice"+@type).addClass("active");
|
|
},
|
|
methods: {
|
|
help_info(id) {
|
|
var that=this;
|
|
this.detail_id = id;
|
|
$("#home").hide();
|
|
$("#detail").show();
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: '/article/infoapi?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> |