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