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

A awesome image bed by github pages and github actions.

<template id="detail">
      <transition name="fade">
            <div
                  id="detail_wrap"
                  class="detail_wrap flex justify_center align_center fixed w_100vw h_100vh top_0 left_0 z_index_1000"
                  v-if="current!==-1"
                  @click="onImgItem"
                  @mousewheel.stop.prevent=""
                  @touchmove.stop.prevent=""
            >
                  <div :class="['detail relative',style]">
                        <div
                              class="img_item transition_normal"
                              :style="current_data[current].path | getStyles"
                        >
                              <button class="btn_close border_box flex justify_center align_center absolute">
                                    <svg
                                          xmlns='http://www.w3.org/2000/svg'
                                          viewBox='0 0 512 512'
                                    >
                                          <path
                                                fill='none'
                                                stroke='currentColor'
                                                stroke-linecap='round'
                                                stroke-linejoin='round'
                                                stroke-width='32'
                                                d='M368 368L144 144M368 144L144 368'
                                          />
                                    </svg>
                              </button>
                              <div
                                    class="detail_options style border_box flex justify_center align_center absolute"
                                    @click.stop="onChooseStyle"
                              >
                                    <button
                                          :class="style==='contain'?'active':''"
                                          data-style="contain"
                                    >contain</button>
                                    <button
                                          :class="style==='cover'?'active':''"
                                          data-style="cover"
                                    >cover</button>
                              </div>
                              <a
                                    class="btn_download absolute border_box flex justify_center align_center transition_normal"
                                    :href="'./'+current_data[current].path"
                                    :download="current_data[current].name"
                                    @click.stop=""
                              >
                                    <svg
                                          xmlns='http://www.w3.org/2000/svg'
                                          viewBox='0 0 512 512'
                                          width="15"
                                          height="15"
                                    >
                                          <path
                                                fill='none'
                                                stroke='currentColor'
                                                stroke-linecap='round'
                                                stroke-linejoin='round'
                                                stroke-width='48'
                                                d='M112 268l144 144 144-144M256 392V100'
                                          /></svg>
                              </a>
                              <button
                                    :class="['btn_autoplay absolute',autoplay?'playing':'']"
                                    @click.stop="onToggleAutoPlay"
                              >{{autoplay?'stop play':'autoplay'}}</button>
                              <div
                                    class="detail_options current border_box flex justify_center align_center absolute"
                                    @click.stop="onChangeCurrent"
                              >
                                    <button
                                          :class="Number(current)<=0?'disabled':''"
                                          data-type="prev"
                                    >prev</button>
                                    <button
                                          :class="Number(current)+1>=current_data.length?'disabled':''"
                                          data-type="next"
                                    >next</button>
                              </div>
                        </div>
                  </div>
            </div>
      </transition>
</template>