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. {% form_theme form 'Form/form_div_layout.twig' %}
  17. {% block stylesheet %}
  18.     <style>
  19.         .slick-dotted.slick-slider {
  20.             margin-bottom: 110px;
  21.         }
  23.         .slick-dots {
  24.             position: absolute;
  25.             bottom: -40px;
  26.             display: block;
  27.             width: 100%;
  28.             padding: 0;
  29.             list-style: none;
  30.             text-align: center;
  31.         }
  33.         .slick-dots li {
  34.             position: relative;
  35.             display: inline-block;
  36.             width: 10px;
  37.             height: 10px;
  38.             margin: 0 5px;
  39.             padding: 0;
  41.             cursor: pointer;
  42.         }
  44.         .slick-dots li button {
  45.             font-size: 0;
  46.             line-height: 0;
  47.             display: block;
  48.             width: 20px;
  49.             height: 20px;
  50.             padding: 5px;
  51.             cursor: pointer;
  52.             color: transparent;
  53.             border: 0;
  54.             outline: none;
  55.             background: transparent;
  56.         }
  58.         .slick-dots li button:hover,
  59.         .slick-dots li button:focus {
  60.             outline: none;
  61.         }
  63.         .slick-dots li button:hover:before,
  64.         .slick-dots li button:focus:before {
  65.             opacity: 1;
  66.         }
  68.         .slick-dots li button:before {
  69.             content: " ";
  70.             line-height: 20px;
  71.             position: absolute;
  72.             top: 0;
  73.             left: 0;
  74.             width: 10px;
  75.             height: 10px;
  76.             text-align: center;
  77.             opacity: 1;
  78.             background-color: #DEDEDE;
  79.             border-radius: 50%;
  81.         }
  83.         .slick-dots li.slick-active button:before {
  84.             opacity: 1;
  85.             background-color: #003399;
  86.         }
  88.         .slick-dots li button.thumbnail img {
  89.             width: 0;
  90.             height: 0;
  91.         }
  92.         .ec-sliderRoleWrap{
  93.             overflow:hidden;
  94.         }
  95.         @media screen and (max-width:1200px){
  96.             .ec-sliderRoleWrap{
  97.                 padding:0 5vw;
  98.             }
  99.         }
  100.     </style>
  101. {% endblock %}
  103. {% block javascript %}
  104.     <script>
  105.         $(function() {
  106.             $('.main_visual').slick({
  107.                 autoplay: true,
  108.                 infinite: true,
  109.                 arrows: true,
  110.                 prevArrow: '<button type=\'button\' class=\'prevArrow fas fa-angle-left\'></button>',
  111.                 nextArrow: '<button type=\'button\' class=\'nextArrow fas fa-angle-right\'></button>',
  112.                 dots: true,
  113.                 autoplaySpeed: 5000,
  114.                 pauseOnFocus: false,
  115.                 pauseOnHover: false,
  116.                 speed: 1000
  117.             });
  118.         });
  119.     </script>
  120. {% endblock javascript %}
  122. {% block main %}
  123. <div class="show-resultSP">
  124.     <div class="ec-blockempty" style="height: 45px;"></div>
  125.     <div class="ec-blockspliter"></div>
  126.     <div class="ec-role ec-smartphoneSearch top-search">
  127.         <form method="get" class="searchform" action="{{ path('product_list') }}">
  128.             <div class="ec-smartphoneSearch__keyword">
  129.                 <div class="ec-input ec-input__keyword">
  130.                     {{ form_widget(form.name, {'id': null, 'attr': {'class': 'search-name', 'placeholder' : '商品を探す' }} ) }}
  131.                     <button type="submit">
  132.                         <img src="{{ asset('assets/img/sp/top/search.svg') }}">
  133.                     </button>
  134.                 </div>
  135.             </div>
  136.         </form>
  137.     </div>
  138.     <div class="ec-blockspliter"></div>
  139.     <div class="ec-blockempty" style="height: 45px"></div>
  140. </div>
  141. <div class="ec-sliderRoleWrap">
  142.     <div class="ec-sliderRole">
  143.         <div class="main_visual">
  144.             <div class="item slick-slide">
  145.                 <a href="{{ url('product_detail', {'id': '3'}) }}">
  146.                     <img class="show-resultPC" src="{{ asset('assets/img/top/pc01.png') }}">
  147.                     <img class="show-resultSP" src="{{ asset('assets/img/sp/top/sp01.png') }}">
  148.                 </a>
  149.             </div>
  150.             <div class="item slick-slide">
  151.                 <a href="{{ url('product_detail', {'id': '4'}) }}">
  152.                     <img class="show-resultPC" src="{{ asset('assets/img/top/pc02.png') }}">
  153.                     <img class="show-resultSP" src="{{ asset('assets/img/sp/top/sp02.png') }}">
  154.                 </a>
  155.             </div>
  156.             <div class="item slick-slide">
  157. {#                <a href="{{ url('product_detail', {'id': '2'}) }}">#}
  158.                 <a href="https://three-m.online/lp/mimisapocket" target="_blank">
  159.                     <img class="show-resultPC" src="{{ asset('assets/img/top/pc03.png') }}">
  160.                     <img class="show-resultSP" src="{{ asset('assets/img/sp/top/sp03.png') }}">
  161.                 </a>
  162.             </div>
  163.             <div class="item slick-slide">
  164. {#                <a href="{{ url('product_detail', {'id': '5'}) }}">#}
  165.                 <a href="https://three-m.online/lp/mimisa_pocket_active" target="_blank">
  166.                     <img class="show-resultPC" src="{{ asset('assets/img/top/pc04.png') }}">
  167.                     <img class="show-resultSP" src="{{ asset('assets/img/sp/top/sp04.png') }}">
  168.                 </a>
  169.             </div>
  170.         </div>
  171.     </div>
  172.     <div class="ec-blockempty ec-sliderRoleWrap__block show-resultSP"></div>
  173. </div>
  174. {% endblock %}