#2675. Арт Проект. Размещение кейса по DEKraft

frontend/assets/AppAsset.php

@@ -41,7 +41,7 @@ class AppAsset extends AssetBundle
         '/js/add_06.06.16.js',
         '/js/modernizr.js',
         '/js/common.js',
-        'js/case-api.js'
+        'js/cases.js'
     ];
     public $depends = [
         'yii\web\YiiAsset',

frontend/web/css/style_30.11.2018.css

@@ -1565,3 +1565,268 @@
 		height: 50px;
 	}
 }
+
+.keys_dek_top{
+	/* background-image: url(./img/dek_bg.png); */
+	width: 100%;
+	min-height: 444px;
+	background: #60AD26 url(/img/dek_bg.png) no-repeat bottom center;
+	background-size: cover;
+	-moz-background-size: cover;
+	-webkit-background-size: cover;
+	-o-background-size: cover;
+	padding-top: 53px;
+	position: relative;
+}
+.dek_title_wrap{
+	color: #2d323a;
+}
+.keys_dek_top h1{
+	font-size: 36px;
+	line-height: 40px;
+	font-weight: bold;
+	color: #2d323a;
+	margin-bottom: 20px;
+}
+.keys_dek_top h1 span{
+	color: #006547;
+}
+.dek_title_wrap p{
+	font-size: 20px;
+	line-height: 24px;
+	margin-bottom: 35px;
+}
+.dek_title_list{
+	margin-bottom: 50px;
+}
+.dek_title_list li{
+	font-size: 16px;
+	line-height: 18px;
+	display: flex;
+	align-items: center;
+}
+.dek_title_list li:not(:last-child){
+	margin-bottom: 15px;
+}
+.dek_title_list span{
+	margin-right: 15px;
+}
+.dek_title_logo{
+	margin-bottom: 40px;
+}
+.dek_title_logo p{
+	font-size: 16px;
+	line-height: 18px;
+	color: #2d323a;
+	margin-bottom: 10px;
+}
+.dek_title_wrap .toggle_bottom{
+	position: static;
+	margin-top: 0;
+	color: #2d323a;
+	border-color: #2d323a;
+}
+.dek_title_wrap .icon-arrowDown2::after{
+	background: url(/images/icon/arrow_down_black.png) no-repeat;
+}
+.dek_title_wrap .toggle_bottom:hover{
+	background-color: #2d323a;
+	color: #fff;
+}
+.dek_title_wrap .toggle_bottom:hover .icon-arrowDown2::after{
+	background: url(/images/green/arrow_down2.png) no-repeat;
+}
+
+.dek_par{
+	margin-left: -295px;
+	/* margin-top: 90px; */
+	background: url(/img/dek_mokup.png) no-repeat center center !important;
+	max-width: 620px;
+	height: 415px;
+	top: 0 !important;
+	left: 10px;
+	position: relative;
+	z-index: 3;
+}
+.dek_mock_wrap{
+	margin-left: -295px;
+	max-width: 510px;
+	height: 415px;
+	top: 0 !important;
+	left: 10px;
+	position: relative;
+	z-index: 3;
+}
+.dek_mock1{
+	width: 419px;
+	height: 272px;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	background: url(/img/dek_m1.png) no-repeat center center;
+	z-index: 3;
+}
+.dek_mock2{
+	width: 420px;
+	height: 266px;
+	position: absolute;
+	bottom: 90px;
+	left: 70px;
+	background: url(/img/dek_m2.png) no-repeat center center;
+	z-index: 2;
+}
+.dek_mock3{
+	width: 380px;
+	height: 243px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	background: url(/img/dek_m3.png) no-repeat center center;
+	z-index: 1;
+}
+
+.dek_p1{
+	background: url(/img/dek_p1.png) no-repeat center center;
+	width: 120px;
+	height: 130px;
+	position: absolute;
+	top: 50px;
+	left: 225px;
+}
+.dek_p2{
+	background: url(/img/dek_p2.png) no-repeat center center;
+	width: 165px;
+	height: 145px;
+	position: absolute;
+	top: 350px;
+	left: 250px;
+	z-index: 4;
+}
+.dek_p3{
+	background: url(/img/dek_p3.png) no-repeat center center;
+	width: 145px;
+	height: 155px;
+	position: absolute;
+	top: 70px;
+	right: 225px;
+	z-index: 4;
+}
+.dek_p4{
+	background: url(/img/dek_p4.png) no-repeat center center;
+	width: 170px;
+	height: 195px;
+	position: absolute;
+	top: 280px;
+	right: 125px;
+	z-index: 4;
+}
+
+.dek_list{
+	margin-top: 23px;
+}
+.dek_list li{
+	padding-left: 27px;
+	font-size: 21px;
+	line-height: 24px;
+	position: relative;
+}
+.dek_list li::before{
+	content: '';
+	position: absolute;
+	top: 8px;
+	left: 0;
+	width: 15px;
+	height: 10px;
+	background: url(/images/appl_list.png) no-repeat center;
+}
+.dek_list li:not(:last-child){
+	margin-bottom: 14px;
+}
+
+.keys_dek_bt{
+	background: url(/images/keys_appl_bt.png) no-repeat bottom center;
+	width: 100%;
+	min-height: 62px;
+	background-size: cover;
+	-moz-background-size: cover;
+	-webkit-background-size: cover;
+	-o-background-size: cover;
+	position: relative;
+	z-index: 2;
+	top: -120px;
+}
+.dek_how_works{
+	width: 100%;
+	background: #60AD26;
+	min-height: 100px;
+	position: relative;
+	top: -120px;
+	padding-top: 45px;
+	padding-bottom: 41px;
+}
+.dek_how_works h2 {
+	font-size: 30px;
+	color: #fff;
+	background: #262E38;
+	display: inline-block;
+	padding: 10px 15px 17px 23px;
+	font-family: "RobotoBold";
+}
+
+@media only screen and (max-width: 1600px) and (min-width: 1301px){
+	.dek_p1{
+		top: 50px;
+		left: 30px;
+	}
+	.dek_p2{
+		top: 350px;
+		left: 30px;
+	}
+	.dek_p3{
+		top: 70px;
+		right: 30px;
+	}
+	.dek_p4{
+		top: 280px;
+		right: 30px;
+	}
+}
+@media only screen and (max-width: 1301px){
+	.dek_p{
+		display: none;
+	}
+}
+@media only screen and (max-width: 991px){
+	.dek_mock_wrap{
+		margin-left: 0;
+	}
+	.keys_dek_bt{
+		top: -80px;
+	}
+	.dek_how_works{
+		top: -80px;
+	}
+}
+@media only screen and (max-width: 767px){
+	.dek_mock1{
+		display: none;
+	}
+	.dek_mock2{
+		display: none;
+	}
+	.dek_mock3{
+		display: none;
+	}
+	.dek_mock_wrap{
+		background: url(/img/dek_mokup.png) no-repeat;
+		background-size: 100%;
+		background-position: center;
+	}
+	.dek_title_logo{
+		margin-bottom: 0;
+	}
+
+	.dek_how_works h2{
+		font-size: 24px;
+	}
+}

frontend/web/js/case-api.js

-$( document ).ready(function() {
-
-    $(".appl_api_section .img_list_wrap").each(function(index,el){
-        var id = $(el).attr("id");
-        $("#" + id).find(".img_list").after("<ul class='img_list_resp_box'></ul>");
-        $("#" + id).find(".img_list_resp_box").append($("#" + id).find(".img_list").html());
-    });
-
-});
\ No newline at end of file

frontend/web/js/cases.js

+$(document).ready(function () {
+
+    $(".appl_api_section .img_list_wrap").each(function (index, el) {
+        var id = $(el).attr("id");
+        $("#" + id).find(".img_list").after("<ul class='img_list_resp_box'></ul>");
+        $("#" + id).find(".img_list_resp_box").append($("#" + id).find(".img_list").html());
+    });
+    if ($('.point_img_box').length) {
+        $(".point_img_box").each(function (index, el) {
+            var ind = index + 1;
+            $(this).attr('id', 'point_img_box' + ind);
+            var id = $(el).attr("id");
+            $("#" + id).find(".point_img_box_wr").after("<ul class='point_img_list_resp'></ul>");
+            $("#" + id).find(".point_img_list_resp").append($("#" + id).find(".point_img_list").html());
+        });
+    }
+});
\ No newline at end of file