@matrixage/picpic/src/components/ImgItems/index.html

A awesome image bed by github pages and github actions.

<template id="img_items">
      <div
            :class="['img_items border_box flex flex_wrap align_start',mode==='list'?'list':'']"
            ref="img_items"
            v-if="current_data.length"
      >
            <div
                  :class="['img_item_wrap flex flex_column relative',is_mobile?'mobile':'']"
                  v-for="(item,index) in current_data"
                  :key="index"
                  @click="onImgItem"
            >
                  <button
                        class="img_item"
                        :style="item.path | getStyles"
                        data-type="img"
                        :data-index="index"
                  >
                  </button>
                  <span
                        class="options w_100 border_box flex justify_center align_center absolute bottom_0"
                        data-type="url"
                        :data-index="index"
                  >{{item.name}}</span>
                  <div
                        class="detail_info border_box flex_column justify_between absolute"
                        data-type="url"
                        :data-index="index"
                  >
                        <span
                              class="name line_clamp_3"
                              data-type="url"
                              :data-index="index"
                        >{{item.name.split('.')[0]}}</span>
                        <div class="detail flex flex_column">
                              <div class="detail_item flex align_center">
                                    <span class="title">size:</span>
                                    <span class="value size">{{item.dimension}}</span>
                              </div>
                              <div class="detail_item flex align_center">
                                    <span class="title">weight:</span>
                                    <span class="value weight">{{item.size}}</span>
                              </div>
                              <div class="detail_item flex align_center">
                                    <span class="title">format:</span>
                                    <span class="value format">{{item.extension}}</span>
                              </div>
                        </div>
                  </div>
            </div>
            <a
                  class="DandM w_100 text_center"
                  href="https://github.com/MatrixAge"
                  target="_blank"
                  rel="noopener noreferrer"
                  v-if="page_size>10&&!search_text&&page!==chunk_data.length"
            >Design and made by Matrixage</a>
      </div>
</template>