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

Open in your IDE?
  1. {% block stylesheet %}
  2.     <style>
  3.         @media (min-width: 768px) {
  4.             .top-notice__box {
  5.                 background-color: #FFF;
  6.                 text-align: left;
  7.                 width: 100%;
  8.                 padding: 5% 180px;
  9.             }
  11.             .notice-left {
  12.                 display: inline-block;
  13.                 float: left;
  14.                 width: 10%;
  15.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  16.                 font-style: normal;
  17.                 font-weight: 400;
  18.                 font-size: 13px;
  19.                 line-height: 15px;
  20.                 color: #333333;
  21.                 padding: 4.5px 0;
  22.             }
  24.             .notice-right {
  25.                 display: inline-block;
  26.                 float: right;
  27.                 width: 85%;
  28.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  29.                 font-style: normal;
  30.                 font-weight: 300;
  31.                 font-size: 15px;
  32.                 line-height: 24px;
  33.                 color: #333333;
  34.             }
  36.             .row-notice {
  37.                 margin: 1%;
  38.                 display: inline-block;
  39.                 width: 100%;
  40.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  41.                 font-weight: 300;
  42.                 font-size: 15px;
  43.                 line-height: 24px;
  44.             }
  46.             .notice-div {
  47.                 margin-top: 40px;
  48.             }
  49.         }
  51.         @media (max-width: 1000px) {
  52.             .notice-right {
  53.                 width: 75%;
  54.             }
  55.         }
  57.         @media (max-width: 768px) {
  58.             .top-notice__box {
  59.                 text-align: left;
  60.                 padding: 10% 20px;
  61.             }
  63.             .notice-left {
  64.                 display: inline-block;
  65.                 float: left;
  66.                 width: 100%;
  67.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  68.             }
  70.             .notice-right {
  71.                 display: inline-block;
  72.                 float: right;
  73.                 width: 100%;
  74.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  75.             }
  77.             .row-notice {
  78.                 margin: 1%;
  79.                 display: inline-block;
  80.                 width: 100%;
  81.                 font-weight: 300;
  82.                 font-size: 15px;
  83.                 line-height: 24px;
  84.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  85.             }
  87.             .pc-line {
  88.                 border-top: 3px solid #2379E7;
  89.                 position: relative;
  90.                 top: 0;
  91.                 width: 40px;
  92.                 left: 0;
  93.                 right: 0;
  94.                 margin: 15px auto 20px;
  95.                 border-radius: 8px;
  96.             }
  97.         }
  98.     </style>
  99. {% endblock %}
  101. {#
  102. This file is part of EC-CUBE
  104. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  106. http://www.ec-cube.co.jp/
  108. For the full copyright and license information, please view the LICENSE
  109. file that was distributed with this source code.
  110. #}
  111. {% set NewsList = repository('Eccube\\Entity\\News').getList() %}
  113. {% block main %}
  114.     {% if NewsList is not empty %}
  115.         <div class="top-notice__box">
  116.             <h2 class="top-service-title mt-0">お知らせ</h2>
  117.             <div class="pc-line"></div>
  118.             <div class="notice-div">
  119.                 {% for News in NewsList %}
  120.                     <div class="row-notice">
  121.                         <div class="notice-left">{{ News.publish_date|date_day }}</div>
  122.                         <div class="notice-right">{{ News.description|raw|nl2br }}</div>
  123.                     </div>
  124.                 {% endfor %}
  125.             </div>
  126.         </div>
  127.     {% endif %}
  128. {% endblock %}