app/template/default/Block/supported_services.twig line 1

Open in your IDE?
  1. {% block stylesheet %}
  2.     <style>
  3.         .top-service__box {
  4.             background-color: #ECF6FF;
  5.             text-align: center;
  6.             width: 100%;
  7.             padding: 5% 180px 0;
  8.         }
  10.         .top-service__services {
  11.             list-style: none;
  12.             padding: 0;
  13.             display: inline-block;
  14.         }
  16.         .top-service__service {
  17.             float: left;
  18.             margin: 0.73%;
  19.             background: #FFFFFF;
  20.             text-align: center;
  21.             border-radius: 8px;
  22.             position: relative;
  23.         }
  25.         .top-service__service:nth-child(1),
  26.         .top-service__service:nth-child(5),
  27.         .top-service__service:nth-child(9),
  28.         .top-service__service:nth-child(13) {
  29.             margin-left: unset;
  30.         }
  32.         .top-service__service:nth-child(4),
  33.         .top-service__service:nth-child(8),
  34.         .top-service__service:nth-child(12),
  35.         .top-service__service:nth-child(16) {
  36.             margin-right: unset;
  37.         }
  39.         .top-service__service-a {
  40.             padding: 18px 0;
  41.             vertical-align: middle;
  42.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  43.             font-weight: 600;
  44.             font-size: 17px;
  45.             line-height: 23.8px;
  46.             text-align: center;
  47.             color: #333333;
  48.         }
  50.         .link-nav__block {
  51.             display: block;
  52.             width: 100%;
  53.         }
  55.         .top-service-title {
  56.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  57.             font-weight: 600;
  58.             font-size: 24px;
  59.             line-height: 36px;
  60.             text-align: center;
  61.             color: #333333;
  62.         }
  64.         .fa-custom {
  65.             position: absolute;
  66.             right: 15%;
  67.             display: inline-block;
  68.             vertical-align: middle;
  69.             top: 36%;
  70.             color: #333333;
  71.         }
  73.         .pc-line {
  74.             border-top: 3px solid #2379E7;
  75.             position: relative;
  76.             top: 15px;
  77.             width: 40px;
  78.             left: 0;
  79.             right: 0;
  80.             margin: auto;
  81.             border-radius: 8px;
  82.         }
  84.         @media (min-width: 768px) {
  85.             .top-service__services {
  86.                 margin-top: 60px;
  87.                 margin-right: auto;
  88.                 margin-bottom: 40px;
  89.                 margin-left: auto;
  90.             }
  92.             .top-service__service {
  93.                 width: 23.9%;
  94.                 height: 60px;
  95.             }
  96.         }
  98.         @media (max-width: 768px) {
  99.             .top-service__box {
  100.                 font-weight: 600;
  101.                 text-align: center;
  102.                 line-height: 1.4em;
  103.                 padding: 10% 20px;
  104.             }
  106.             .top-service__services {
  107.                 list-style: none;
  108.                 padding: 0;
  109.             }
  111.             .top-service__service {
  112.                 width: 48%;
  113.                 float: left;
  114.                 margin: 1%;
  115.             }
  117.             .top-service__service:nth-child(1),
  118.             .top-service__service:nth-child(5),
  119.             .top-service__service:nth-child(9),
  120.             .top-service__service:nth-child(13) {
  121.                 margin-left: 1%;
  122.             }
  124.             .top-service__service:nth-child(4),
  125.             .top-service__service:nth-child(8),
  126.             .top-service__service:nth-child(12),
  127.             .top-service__service:nth-child(16) {
  128.                 margin-right: 1%;
  129.             }
  131.             .fa-custom {
  132.                 right: 10%;
  133.             }
  135.             .pc-line {
  136.                 border-top: 3px solid #2379E7;
  137.                 position: relative;
  138.                 top: 0;
  139.                 width: 40px;
  140.                 left: 0;
  141.                 right: 0;
  142.                 margin: 15px auto 20px;
  143.                 border-radius: 8px;
  144.             }
  146.             .top-service-title {
  147.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  148.                 font-weight: 600;
  149.                 font-size: 22px;
  150.                 line-height: 28px;
  151.                 text-align: center;
  152.                 color: #333333;
  153.             }
  154.         }
  155.     </style>
  156. {% endblock %}
  158. {% set TagList = repository('Eccube\\Entity\\Tag').getList() %}
  160. {% block main %}
  161.     {% if TagList is not empty %}
  162.         <div class="top-service__box">
  163.             <h2 class="top-service-title mt-0">対応サービス</h2>
  164.             <div class="pc-line"></div>
  165.             <ul class="top-service__services">
  166.                 {% for Tag in TagList %}
  167.                     <li class="top-service__service">
  168.                         <a class="link-nav link-nav__block top-service__service-a"
  169.                            href="{{ url('product_list') }}?tag_id={{ Tag.id }}">{{ Tag.name }}</a>
  170.                         <i class="fa fa-chevron-right fa-lg fa-custom" aria-hidden="true"></i>
  171.                     </li>
  172.                 {% endfor %}
  173.             </ul>
  174.         </div>
  175.     {% endif %}
  176. {% endblock %}