app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'front_page' %}
  15. {% block stylesheet %}
  16.     <style>
  17.         .slick-dots {
  18.             position: absolute;
  19.             bottom: -45px;
  20.             display: block;
  21.             width: 100%;
  22.             padding: 0;
  23.             list-style: none;
  24.             text-align: center;
  25.         }
  27.         .slick-dots li {
  28.             position: relative;
  29.             display: inline-block;
  30.             width: 20px;
  31.             height: 20px;
  32.             margin: 0 5px;
  33.             padding: 0;
  35.             cursor: pointer;
  36.         }
  38.         .slick-dots li button {
  39.             font-size: 0;
  40.             line-height: 0;
  41.             display: block;
  42.             width: 20px;
  43.             height: 20px;
  44.             padding: 5px;
  45.             cursor: pointer;
  46.             color: transparent;
  47.             border: 0;
  48.             outline: none;
  49.             background: transparent;
  50.         }
  52.         .slick-dots li button:hover,
  53.         .slick-dots li button:focus {
  54.             outline: none;
  55.         }
  57.         .slick-dots li button:hover:before,
  58.         .slick-dots li button:focus:before {
  59.             opacity: 1;
  60.         }
  62.         .slick-dots li button:before {
  63.             content: " ";
  64.             line-height: 20px;
  65.             position: absolute;
  66.             top: 0;
  67.             left: 0;
  68.             width: 12px;
  69.             height: 12px;
  70.             text-align: center;
  71.             opacity: .25;
  72.             background-color: #333333;
  73.             border-radius: 50%;
  75.         }
  77.         .slick-dots li.slick-active button:before {
  78.             opacity: .75;
  79.             background-color: #333333;
  80.         }
  82.         .slick-dots li button.thumbnail img {
  83.             width: 0;
  84.             height: 0;
  85.         }
  88.         @media screen and (max-width: 768px) {
  89.             .ec-sliderRole {
  90.                 padding: unset;
  91.             }
  93.             .not-sp {
  94.                 display: none !important;
  95.             }
  97.             .slick-slide-sp {
  98.                 display: block;
  99.                 margin-bottom: 40px;
  100.             }
  101.         }
  103.         @media screen and (min-width: 768px) {
  104.             .ec-sliderRole {
  105.                 max-width: unset;
  106.                 padding: unset;
  107.             }
  109.             .slick-slide-sp {
  110.                 display: none;
  111.             }
  112.         }
  113.     </style>
  114. {% endblock %}
  116. {% block javascript %}
  117. <script src="{{ asset('assets/js/jquery.star-rating-svg.js', 'user_data') }}"></script>
  118.     <script>
  119.         $(".my-rating").starRating({
  120.             starGradient: {
  121.                 start: '#FFB800',
  122.                 end: '#FFB800'
  123.             },
  124.             starSize: 20,
  125.             readOnly: true
  126.         });
  127.     </script>
  128.     <script>
  129.         $(function() {
  130.         $('.main_visual').slick({
  131.             dots: true,
  132.             arrows: false,
  133.             autoplay: true,
  134.             speed: 300
  135.         });
  136.     });
  137.     </script>
  138. {% endblock javascript %}
  140. {% block main %}
  141.     <div class="ec-sliderRole">
  142.         <div class="main_visual">
  143.             <div class="item slick-slide"><img class="not-sp" src="{{ asset('assets/img/common/banner.svg') }}"></div>
  144.         </div>
  145.         <div class="item"><img class="slick-slide-sp" src="{{ asset('assets/img/common/banner_sp.svg') }}"></div>
  146.     </div>
  147. {% endblock %}