You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
14 KiB
299 lines
14 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<script type="text/javascript" src="${base}/static/ip/js/jquery-3.4.1.min.js" ></script>
|
|
<script type="text/javascript" src="${base}/static/ip/js/rem.js" ></script>
|
|
<script type="text/javascript" src="${base}/static/ip/js/tool.js" ></script>
|
|
<script type="text/javascript" src="${base}/static/ip/js/vue.min.js" ></script>
|
|
<script type="text/javascript" src="${base}/static/ip/js/http-vue-loader.js" ></script>
|
|
<link rel="stylesheet" href="${base}/static/ip/css/index.css" media="all"/>
|
|
<title>安全微服务</title>
|
|
</head>
|
|
<body>
|
|
<div id="app" class="app">
|
|
<div class="page">
|
|
<img src="${base}/static/ip/images/topbg.png" class="topbg" alt="">
|
|
<p class="corporateName">宇信网安</p>
|
|
<div class="page__box">
|
|
<div class="page__top">
|
|
<img src="${base}/static/ip/images/title.png" class="page__img" alt="">
|
|
<p>保证小企业马奇诺防线内的最后一公里安全</p>
|
|
</div>
|
|
<div class="page__title">
|
|
每月2000元即可享受专业、定制化安全防护
|
|
</div>
|
|
<div class="question">
|
|
<div class="question__title">
|
|
{{question.title}}
|
|
</div>
|
|
<div class="question__con" v-for="(item,index) in question.questionList" :key="index">
|
|
<img class="question__picture" :src="item.picture" alt="">
|
|
|
|
<div class="question__icon">
|
|
<img :src="item.icon" alt="">
|
|
|
|
</div>
|
|
<div class="question__text">
|
|
<p class="question__text__title">{{item.title}}</p>
|
|
<p class="question__text__content">
|
|
{{item.content}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="question__title">
|
|
{{sort.title}}
|
|
</div>
|
|
<table class="sort__table" cellspacing="0">
|
|
<thead>
|
|
<tr>
|
|
<th>类别</th>
|
|
<th>项目</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody v-for="(item,i) in sort.sortlist" :key="i">
|
|
<tr class="sort">
|
|
<td :rowspan="item.rowspan">{{item.sort}}</td>
|
|
</tr>
|
|
<tr class="project" v-for="(project,as) in item.project" :key="as">
|
|
<td>{{project}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="combo">
|
|
<div class="combo__title">
|
|
{{combo.title}}
|
|
</div>
|
|
<div class="combo__con">
|
|
{{combo.con}}
|
|
</div>
|
|
<div class="combo__box">
|
|
<div class="combo__right" v-for="(item,combo) in combo.data" :key="combo">
|
|
<p class="combo__right__title">{{item.title}}</p>
|
|
<ul>
|
|
<li :class="items.isShow?'isborder':''" v-for="(items,a) in item.con"><img
|
|
:src="items.icon" alt="">
|
|
<span>{{items.text}}</span>
|
|
</li>
|
|
</ul>
|
|
<p class="combo__price">{{item.price}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="from">
|
|
<div class="from__title">
|
|
留下您的联系方式
|
|
</div>
|
|
<div class="question">
|
|
<div class="from__box">
|
|
<p class="from__name">*您的称呼</p>
|
|
<input type="text" name="" v-model="name" placeholder="" value="" />
|
|
</div>
|
|
<div class="from__box">
|
|
<p class="from__name">*联系电话</p>
|
|
<input type="text" name="" v-model='phone' placeholder="" value="" />
|
|
</div>
|
|
<div class="from__box">
|
|
<p class="from__name">*公司名称</p>
|
|
<input type="text" name="" v-model='companyName' placeholder="" value="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="bot" @click="submit">
|
|
提交
|
|
</div>
|
|
</div>
|
|
<script>
|
|
Vue.use(httpVueLoader)
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
|
|
components: {
|
|
},
|
|
|
|
data: function () {
|
|
return {
|
|
question: {
|
|
title: "您是不是遇到这样的问题",
|
|
questionList: [
|
|
{
|
|
icon: "${base}/static/ip/images/rectangle.png",
|
|
title: "法规风险",
|
|
content: '用户数据泄露、服务器成为跳板对其他机器进行攻击, 受到网监公安部处罚。',
|
|
picture: "${base}/static/ip/images/question_icon1.png",
|
|
},
|
|
{
|
|
icon: "${base}/static/ip/images/rectangle.png",
|
|
title: "信息系统风险",
|
|
content: '由脆弱性配置或软件漏洞导致服务宕机、网页篡改、数据丢失、木马/病毒植入等。',
|
|
picture: "${base}/static/ip/images/question_icon2.png",
|
|
},
|
|
{
|
|
icon: "${base}/static/ip/images/rectangle.png",
|
|
title: "防护下的风险",
|
|
content: '购买防火墙、云防护之后，依然出现服务宕机、网页篡改、数据泄露等安全问题。',
|
|
picture: "${base}/static/ip/images/question_icon3.png",
|
|
},
|
|
]
|
|
},
|
|
sort: {
|
|
title: "我们做什么",
|
|
sortlist: [{
|
|
rowspan: 5,
|
|
sort: '基础防护',
|
|
project: ['操作系统防护', '中间件防护', '数据库防护', '服务应用防护']
|
|
}, {
|
|
rowspan: 4,
|
|
sort: '专业防护',
|
|
project: ['漏洞防护', '木马防护', 'ddos/cc攻击防护']
|
|
|
|
}, {
|
|
rowspan: 3,
|
|
sort: '业务防护',
|
|
project: ['业务逻辑防护', '攻击路径防护']
|
|
|
|
}, {
|
|
rowspan: 2,
|
|
sort: '应急处理',
|
|
project: ['应急处理',]
|
|
|
|
}],
|
|
},
|
|
combo: {
|
|
title: "安全微服务套餐",
|
|
con: '宇信提供标准套餐，您也可以自由选择项目，我们推荐您选择部分基础防护项目+部分专业防护项目+全部业务防护：',
|
|
data: [{
|
|
title: '标准套餐',
|
|
price: '计:2300元/月',
|
|
con: [{
|
|
icon: '${base}/static/ip/images/onChecked.png',
|
|
text: '操作系统防护',
|
|
}, {
|
|
icon: '${base}/static/ip/images/onChecked.png',
|
|
text: '中间件防护',
|
|
}, {
|
|
icon: '${base}/static/ip/images/onChecked.png',
|
|
text: '数据库防护',
|
|
}, {
|
|
icon: '${base}/static/ip/images/noChecked.png',
|
|
text: '服务应用防护',
|
|
isShow: true
|
|
}, {
|
|
icon: '${base}/static/ip/images/onChecked.png',
|
|
text: '漏洞防护',
|
|
}, {
|
|
icon: '${base}/static/ip/images/onChecked.png',
|
|
text: '木马防护',
|
|
}, {
|
|
icon: '${base}/static/ip/images/noChecked.png',
|
|
text: 'ddos/cc攻击防护',
|
|
isShow: true
|
|
}, {
|
|
icon: '${base}/static/ip/images/onChecked.png',
|
|
text: '业务逻辑防护',
|
|
}, {
|
|
icon: '${base}/static/ip/images/onChecked.png',
|
|
text: '攻击路径防护',
|
|
isShow: true
|
|
}, {
|
|
icon: '${base}/static/ip/images/noChecked.png',
|
|
text: '应急处理',
|
|
},]
|
|
}, {
|
|
title: '自选套餐',
|
|
price: '计:900元/月',
|
|
con: [{
|
|
icon: '${base}/static/ip/images/noChecked.png',
|
|
text: '操作系统防护',
|
|
}, {
|
|
icon: '${base}/static/ip/images/noChecked.png',
|
|
text: '中间件防护',
|
|
}, {
|
|
icon: '${base}/static/ip/images/onChecked.png',
|
|
text: '数据库防护',
|
|
}, {
|
|
icon: '${base}/static/ip/images/noChecked.png',
|
|
text: '服务应用防护',
|
|
isShow: true
|
|
}, {
|
|
icon: '${base}/static/ip/images/onChecked.png',
|
|
text: '漏洞防护',
|
|
}, {
|
|
icon: '${base}/static/ip/images/onChecked.png',
|
|
text: '木马防护',
|
|
}, {
|
|
icon: '${base}/static/ip/images/noChecked.png',
|
|
text: 'ddos/cc攻击防护',
|
|
isShow: true
|
|
|
|
}, {
|
|
icon: '${base}/static/ip/images/onChecked.png',
|
|
text: '业务逻辑防护',
|
|
}, {
|
|
icon: '${base}/static/ip/images/noChecked.png',
|
|
text: '攻击路径防护',
|
|
isShow: true
|
|
}, {
|
|
icon: '${base}/static/ip/images/noChecked.png',
|
|
text: '应急处理',
|
|
},]
|
|
},]
|
|
},
|
|
name: '',
|
|
phone: '',
|
|
companyName: ""
|
|
}
|
|
},
|
|
|
|
created() {
|
|
|
|
},
|
|
|
|
methods: {
|
|
// 获取列表
|
|
submit() {
|
|
const self = this
|
|
let phoneReg = /^[1][0-9]{10}$/
|
|
|
|
if (!self.name) {
|
|
tool.toast('请输入您的称呼')
|
|
} else if (!self.phone) {
|
|
tool.toast('请输入您的手机号码')
|
|
} else if (!phoneReg.test(self.phone)) {
|
|
tool.toast('您的手机号码格式不对')
|
|
} else if (!self.companyName) {
|
|
tool.toast('请输入公司名称')
|
|
} else {
|
|
$.ajax({
|
|
type: 'post',
|
|
dataType:"json",
|
|
url: '${base}/api/customer/submit',
|
|
data: {
|
|
'contact':self.name,
|
|
'telephone':self.phone,//-联系电话
|
|
'name':self.companyName,//-公司名称
|
|
},
|
|
success: res => {
|
|
tool.toast(res.message)
|
|
}
|
|
})
|
|
}
|
|
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|