华龙芯

Appearance

可通用栏目、上图片、下列表 ​

/exp/show/column-top-image-list/
html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    >

    <title th:text="|${column.name}_{{conf.title}}|">{{ conf.title }}</title>
    <!-- <link rel="icon" href="/assets/images/favicon.png" /> -->

    <meta name="sid" th:content="${config.appId}">
    <meta name="catalogsId" th:content="${config.businessId}">
    <meta name="businessId" th:content="${config.businessId}">
    <meta name="businessType" th:content="${config.businessType}">
    <meta name="title" th:content="${column.name}">

    <link rel="stylesheet" href="/assets/styles/column-top-image-list.css">
  </head>

  <body>
    <hlx-template
      component-type="column"
      component-query-option="{'columnId':''}"
      component-variable="column"
    ></hlx-template>

    <hlx-template
      component-type="comConfig"
      component-query-option=""
      component-variable="config"
    ></hlx-template>

    <!-- 当前栏目下新闻列表（含图片） -->
    <hlx-template
      component-type="newsPage"
      component-query-option="{'columnIds':[],'start':0,'count':20,'showMedium':'PC'}"
      component-variable="newsList"
    ></hlx-template>

    <div class="column-header">
      <div class="column-imit-width">
        <a class="column-header-back" href="/">重庆统一战线首页</a>
      </div>
    </div>

    <div class="hlx-body">
      <!-- 顶部大图 banner -->
      <div class="column-banner">
        <th:block
          th:if="${column.images != null and column.images.length() > 0}"
          th:with="columnBannerImages=${column.images.split(',')}"
        >
          <img
            th:if="${columnBannerImages != null and columnBannerImages.length > 0}"
            class="column-banner-image"
            th:src="${columnBannerImages[0]}"
          >
        </th:block>
      </div>

      <div class="column-imit-width">
        <!-- 图片在左，标题与时间在右的列表 -->
        <div class="column-top-image-list">
          {% if conf.isHlx %}
            <a
              class="column-top-image-list-item"
              th:each="item: ${newsList}"
              th:href="${item.article.pcUrl}"
              th:title="${item.listTitle}"
              target="_blank"
            >
              <div class="cover">
                <img th:src="${item.listImage}" alt="">
              </div>

              <div class="content">
                <div class="title" th:text="${item.listTitle}">政协大会将举办3场“委员通道”采访活动</div>
                <div class="time" th:text="${item.pubTime.substring(0, 16)}">2小时前</div>
              </div>
            </a>
          {% else %}
            {% for item in (1..10) %}
              <a class="column-top-image-list-item" href="#" title="示例标题">
                <div class="cover">
                  <img
                    src="https://mc.kurogames.com/website-preface/video/bg/bg-poster.webp"
                    alt="示例"
                  >
                </div>
                <div class="content">
                  <div class="title">政协大会将举办3场“委员通道”采访活动</div>
                  <div class="time">2小时前</div>
                </div>
              </a>
            {% endfor %}
          {% endif %}
        </div>
      </div>
    </div>

    <div class="column-footer">
      <a
        class="column-footer-item"
        href="http://www.miitbeian.gov.cn/"
        target="_blank"
        >渝ICP备12000586号-2</a
      >
      <span class="column-footer-item">国际联网备案：渝公网安备 50010502001994号</span>
    </div>
  </body>
</html>
scss
// 基础变量
$color-bg-page: #f5f5f5;
$color-bg-white: #ffffff;
$color-border-light: #eeeeee;
$color-border-item: #f0f0f0;
$color-text-main: #111111;
$color-text-sub: #999999;
$color-primary: #c00000;

// mixins
@mixin flex-row($align: stretch) {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: $align;
  align-items: $align;
}

@mixin flex-column {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

@mixin flex-basis($width) {
  -ms-flex: 0 0 $width;
  flex: 0 0 $width;
}

body {
  margin: 0;
  background-color: $color-bg-page;
}

.column-header {
  background-color: $color-bg-white;
  border-bottom: 1px solid $color-border-light;
}

.column-imit-width {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.column-header-back {
  display: inline-block;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  color: $color-primary;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.hlx-body {
  background-color: $color-bg-white;
}

.column-banner {
  width: 100%;
  background-color: $color-bg-page;

  .column-banner-image {
    width: 100%;
    object-fit: cover;
    display: block;
  }
}

.column-top-image-list {
  padding: 24px 0 40px;

  .column-top-image-list-item {
    @include flex-row(stretch);
    text-decoration: none;
    color: $color-text-main;
    padding: 16px 0;
    border-bottom: 1px solid $color-border-item;

    &:last-child {
      border-bottom: none;
    }

    .cover {
      @include flex-basis(220px);
      height: 124px;
      overflow: hidden;
      border-radius: 4px;
      background-color: $color-border-item;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
    }

    .content {
      -ms-flex: 1 1 auto;
      flex: 1;
      margin-left: 20px;
      @include flex-column;
      -ms-flex-pack: distribute;
      justify-content: space-around;

      .title {
        font-size: 18px;
        line-height: 1.5;
        font-weight: 500;
        color: $color-text-main;
      }

      .time {
        margin-top: 12px;
        font-size: 12px;
        color: $color-text-sub;
      }
    }

    &:hover {
      .title {
        color: $color-primary;
      }
    }
  }
}

.column-footer {
  padding: 16px 0 24px;
  text-align: center;
  font-size: 12px;
  color: $color-text-sub;

  .column-footer-item {
    margin: 0 8px;
    color: $color-text-sub;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

@media (max-width: 768px) {
  .column-imit-width {
    padding: 0 12px;
  }

  .column-top-image-list {
    .column-top-image-list-item {
      padding: 12px 0;

      .cover {
        @include flex-basis(140px);
        height: 80px;
      }

      .title {
        font-size: 16px;
      }
    }
  }
}
less
// 颜色变量
@color-bg-page: #f5f5f5;
@color-bg-white: #ffffff;
@color-border-light: #eeeeee;
@color-border-item: #f0f0f0;
@color-text-main: #111111;
@color-text-sub: #999999;
@color-primary: #c00000;

// mixins
.flex-row(@align: stretch) {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: @align;
  align-items: @align;
}

.flex-column() {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-basis(@width) {
  -ms-flex: 0 0 @width;
  flex: 0 0 @width;
}

body {
  margin: 0;
  background-color: @color-bg-page;
}

.column-header {
  background-color: @color-bg-white;
  border-bottom: 1px solid @color-border-light;
}

.column-imit-width {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.column-header-back {
  display: inline-block;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  color: @color-primary;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.hlx-body {
  background-color: @color-bg-white;
}

.column-banner {
  width: 100%;
  background-color: @color-bg-page;

  .column-banner-image {
    width: 100%;
    object-fit: cover;
    display: block;
  }
}

.column-top-image-list {
  padding: 24px 0 40px;

  .column-top-image-list-item {
    .flex-row(stretch);
    text-decoration: none;
    color: @color-text-main;
    padding: 16px 0;
    border-bottom: 1px solid @color-border-item;

    &:last-child {
      border-bottom: none;
    }

    .cover {
      .flex-basis(220px);
      height: 124px;
      overflow: hidden;
      border-radius: 4px;
      background-color: @color-border-item;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
    }

    .content {
      -ms-flex: 1 1 auto;
      flex: 1;
      margin-left: 20px;
      .flex-column();
      -ms-flex-pack: distribute;
      justify-content: space-around;

      .title {
        font-size: 18px;
        line-height: 1.5;
        font-weight: 500;
        color: @color-text-main;
      }

      .time {
        margin-top: 12px;
        font-size: 12px;
        color: @color-text-sub;
      }
    }

    &:hover {
      .title {
        color: @color-primary;
      }
    }
  }
}

.column-footer {
  padding: 16px 0 24px;
  text-align: center;
  font-size: 12px;
  color: @color-text-sub;

  .column-footer-item {
    margin: 0 8px;
    color: @color-text-sub;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

@media (max-width: 768px) {
  .column-imit-width {
    padding: 0 12px;
  }

  .column-top-image-list {
    .column-top-image-list-item {
      padding: 12px 0;

      .cover {
        .flex-basis(140px);
        height: 80px;
      }

      .title {
        font-size: 16px;
      }
    }
  }
}