订制套餐

css/secure.css

@@ -133,6 +133,23 @@ body {
   margin-top: -17.5rem;
   box-sizing: border-box;
 }
+.tc-popup {
+  background: #FFFFFF;
+  box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
+  border-radius: 4px;
+  padding: 4.375rem 3.75rem;
+  position: fixed;
+  /* top: 26%;
+  left: 36%; */
+  z-index: 90;
+  width: 32.5rem;
+  left: 25%;
+  margin-left: -16.25rem;
+  height: 40rem;
+  top: 50%;
+  margin-top: -17.5rem;
+  box-sizing: border-box;
+}
 .popup-content__item {
   margin-bottom: 1.25rem;
 }

secure.html

@@ -21,7 +21,6 @@
     <div class="secure-box">
         <!-- 头部占位 -->
         <div id="header"></div>
-
         <!-- 页面内容 -->
         <div class="secure-content-wrap">
             <div class="secure-content">
@@ -31,39 +30,132 @@
                     <div class="secure-content--model">
                         <div class="secure-content--model__item">
                             <div class="secure-content--model__round"></div>
-                  <div>您可以只购买我们的独立站</div>
+                            <div>如果您有独立站，可以直接购买安全微服务套餐</div>
                         </div>
                         <div class="secure-content--model__item">
                             <div class="secure-content--model__round"></div>
-                  <div>如果您已有独立站，可以直接购买安全微服务套餐</div>
+                            <div>您购买安全微服务套餐，我们送您独立站</div>
                         </div>
                         <div class="secure-content--model__item">
                             <div class="secure-content--model__round"></div>
-                  <div>若您购买安全微服务套餐，我们还将赠送您独立站</div>
+                            <div>您可以只购买我们的独立站</div>
                         </div>
                     </div>
                 </div>
-
                 <div class="secure-content__right">
                     <img class="secure--content__right--image" src="./images/img2.png">
                 </div>
             </div>
-
             <div class="secure-content--operate">
-            <div class="secure-content--operate__made">定制我的套餐</div>
+                <div class="secure-content--operate__made" onclick="openPopuptc()">定制我的套餐</div>
                 <div class="secure-content--operate__connect" onclick="openPopup()">联系我们</div>
             </div>
         </div>
-
-
-
     </div>
-
-
     <!-- 底部占位 -->
     <div id="footer"></div>
-
+    <!-- 弹窗: 定制我的套餐 -->
-        <!-- 弹窗 -->
+    <div id="tcpopup" class="tc-popup" style="display: none;width: 80%">
+        <div class="secure-popup__close" onclick="closePopuptc()">
+            <img src="./images/close.png">
+        </div>
+        <div style="display: flex;justify-content: space-around;align-content: center">
+            <div>
+                <div style="background-color: #262A2F;border-radius: 5px 0px 5px 0px;height: 40px;display: flex;flex-direction: column;justify-content: center">
+                    <span style="color: #FFFFFF;text-align: center">标准套餐</span>
+                </div>
+                <table>
+                    <tr style="height: 50px">
+                        <td rowspan="3" style="font-size: 16px; font-weight: 700">基础防护</td>
+                        <td class="biaozhun-taocan" data="300" fuwu="1"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
+                            操作系统防护
+                        </td>
+                        <td>巡检+加固</td>
+                        <td>300</td>
+                    </tr>
+                    <tr style="height: 50px">
+                        <td class="biaozhun-taocan" data="300" fuwu="2"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
+                            中间件防护
+                        </td>
+                        <td>巡检+加固</td>
+                        <td>300</td>
+                    </tr>
+                    <tr style="height: 50px">
+                        <td class="biaozhun-taocan" data="300" fuwu="3"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
+                            服务应用防护
+                        </td>
+                        <td>巡检+加固</td>
+                        <td>300</td>
+                    </tr>
+                    <tr style="height: 50px">
+                        <td rowspan="3" style="font-size: 16px; font-weight: 700">专业防护</td>
+                        <td class="biaozhun-taocan" data="700" fuwu="4"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
+                            漏洞防护
+                        </td>
+                        <td>巡检+加固</td>
+                        <td>700</td>
+                    </tr>
+                    <tr style="height: 50px">
+                        <td class="biaozhun-taocan" data="500" fuwu="5"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
+                            木马防护
+                        </td>
+                        <td>实时巡检+加固</td>
+                        <td>500</td>
+                    </tr>
+                    <tr style="height: 50px">
+                        <td class="biaozhun-taocan" data="600" fuwu="6"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
+                            业务逻辑防护
+                        </td>
+                        <td>实时巡检+加固+合规</td>
+                        <td>600</td>
+                    </tr>
+                    <tr style="height: 50px">
+                        <td rowspan="2" style="font-size: 16px; font-weight: 700">数据防护</td>
+                        <td class="biaozhun-taocan" data="400" fuwu="7"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
+                            数据库防护
+                        </td>
+                        <td>巡检+加固</td>
+                        <td>400</td>
+                    </tr>
+                    <tr style="height: 50px">
+                        <td class="biaozhun-taocan" data="800" fuwu="8"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
+                            数据安全防护
+                        </td>
+                        <td>数据安全审计/跨境数据合规检查/整改</td>
+                        <td>800</td>
+                    </tr>
+                    <tr style="height: 50px">
+                        <td rowspan="1" style="font-size: 16px; font-weight: 700">应急处理</td>
+                        <td class="biaozhun-taocan2" data="3000" fuwu="9"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png"> 应急处理
+                        </td>
+                        <td>次</td>
+                        <td>3000</td>
+                    </tr>
+                </table>
+            </div>
+            <div style="display: flex;flex-direction: column;justify-content: center;align-content: center">
+                <div class="modal-body">
+                    <span class="control-label" style="text-align: center;width: 100%;float: left">您选择了标准套餐，<span class="gongji">0</span>元/月</span>
+                    <span class="control-label" style="text-align: center;width: 100%;float: left">请留下您的联系方式，我们会尽快与您联系</span>
+                    <form id="myModal2_form" class="form-horizontal" role="form" onsubmit="return submit_myModal2_btn();">
+                        <div style="margin-top: 10px;width: 100%">
+                            <input type="text" class="form-control" name="name" placeholder="姓名" style="height: 45px;width: 100%"/>
+                        </div>
+                        <div style="margin-top: 10px;width: 100%">
+                            <input type="text" class="form-control big" name="telephone" placeholder="电话" style="height: 45px;width: 100%">
+                        </div>
+                        <div style="margin-top: 10px; margin-bottom: 10px;width: 100%">
+                            <input type="text" class="form-control big" name="companyName" placeholder="公司名称" style="height: 45px;width: 100%">
+                        </div>
+                        <button type="submit" style="background-color: rgba(21, 170, 125, 1);margin-left: 15px; width: 95%;display: block;font-size: 18px;border-radius: 6px;padding: 10px 16px">
+                            <span style="color: white">提交您的信息</span>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 弹窗: 联系我们 -->
     <div id="mask" class="mask"></div>
     <div id="popup" class="secure-popup" style="display:none;">
         <div class="secure-popup__close" onclick="closePopup()">
@@ -73,10 +165,12 @@
             <div class="popup-content__item">请留下您的联系方式，我们会尽快与您联系</div>
             <div class="popup-content__item"><input class="input" type="text" placeholder="姓名" id="inputName"/></div>
             <div class="popup-content__item"><input class="input" type="text" placeholder="电话" id="inputPhone"/></div>
-            <div class="popup-content__item"><input class="input" type="text" placeholder="公司名称" id="inputCompany" /></div>
+            <div class="popup-content__item"><input class="input" type="text" placeholder="公司名称" id="inputCompany"/>
+            </div>
             <div class="popup-content__item popup-content__item2">
                 <input class="inputCode" type="text" placeholder="验证码" id="inputCode"/>
-              <div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img" style="height: 56px"></div>
+                <div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img" style="height: 56px">
+                </div>
             </div>
             <div class="popup-content__btn" onclick="submitName()">提交</div>
         </div>
@@ -94,11 +188,104 @@
 </div>
 </div>
 </body>
+<style>
+    table,
+    td,
+    th {
+        text-align: center;
+        border: 1px solid #ddd;
+        border-collapse: collapse;
+    }
+    table td {
+        text-align: left;
+        padding-left: 5px;
+    }
+</style>
+<script>
+    var taocan = 0;
+    $('td.biaozhun-taocan').on('click', function(){
+        if (taocan == 0 || taocan == 2) {
+            $('td.biaozhun-taocan').find('img').attr('src', './images/unchoice.png');
+            taocan = 1;
+        }
+        $('td.biaozhun-taocan2').removeClass('on').addClass('off').find('img').attr('src', './images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
+        if ($(this).hasClass('on')){
+            $(this).removeClass('on').addClass('off');
+            $(this).find('img').attr('src', './images/unchoice.png');
+        }else {
+            $(this).removeClass('off').addClass('on');
+            $(this).find('img').attr('src', './images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
+        }
+        var gongji = 0;
+        $('td.on').each(function(k,v){
+            gongji += parseInt($(v).attr('data'));
+        });
+        $('span.gongji').text(gongji);
+    });
+
+    $('td.biaozhun-taocan2').on('click', function(){
+        if (taocan == 0 || taocan == 1) {
+            $('td.biaozhun-taocan2').find('img').attr('src', './images/unchoice.png');
+            taocan = 2;
+        }
+        $('td.biaozhun-taocan').removeClass('on').addClass('off').find('img').attr('src', './images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
+        if ($(this).hasClass('on')){
+            $(this).removeClass('on').addClass('off');
+            $(this).find('img').attr('src', './images/unchoice.png');
+        }else {
+            $(this).removeClass('off').addClass('on');
+            $(this).find('img').attr('src', './images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
+        }
+        var gongji = 0;
+        $('td.on').each(function(k,v){
+            gongji += parseInt($(v).attr('data'));
+        });
+        $('span.gongji').text(gongji);
+    });
+</script>
 <script>
+    function submit_myModal2_btn() {
+        var data = $('#myModal2_form').serialize();
+        var fuwu = '';
+        $('td.on').each(function(k,v){
+            if (fuwu) {
+                fuwu += ',';
+            }
+            fuwu += $(v).attr('fuwu');
+        });
+        data += '&fuwu=' + fuwu;
+        $.ajax({
+            url: 'http://aos.yyundong.com/ycsafe/business/buy/1',
+            type: "POST",
+            data: data,
+            success: function (result) {
+                if (result.result){
+                    alert("您的意向信息已提交，我们将尽快与您取得联系！");
+                    $('#myModal2').modal('hide');
+                    $('#myModal2_form').trigger('reset');
+
+                } else {
+                    alert(result.message);
+                }
+            }
+        });
+        return false;
+    }
+</script>
+<script>
+    function openPopuptc() {
+        document.getElementById("tcpopup").style.display = "block";
+    }
+
+    function closePopuptc() {
+        document.getElementById("tcpopup").style.display = "none";
+    }
+
+
     function openPopup() {
         document.getElementById("popup").style.display = "block";
         document.getElementById("mask").style.display = "block";
-      $('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
+        $('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date.now());
     }
 
     function closePopup() {
@@ -152,7 +339,12 @@
             return;
         }
 
-      $.post('/loulan/business/buy/9', {'name':name,'telephone':telephone,'companyName':companyName,'captcha':captcha}, function (resp){
+        $.post('http://aos.yyundong.com/ycsafe//business/buy/9', {
+            'name': name,
+            'telephone': telephone,
+            'companyName': companyName,
+            'captcha': captcha
+        }, function (resp) {
 
             if (!!resp && !!resp.result) {
                 alert('您的意向信息已提交，我们将尽快与您取得联系！');
@@ -163,7 +355,7 @@
     }
 
     function changeCodeImg() {
-      $('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
+        $('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date.now());
     }
 </script>
 </html>