yf_elsa.cui
/
ninglu-frontt


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0"
    />
    <title>识别成果</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css" />
    <style>
      body {
        background-color: #f6f6f6;
        padding: 0;
        margin: 0;
      }

      .achibox {
        width: 100%;
        height: 100vh;
      }

      .carousel {
        width: 100% !important;
        height: 100% !important;
        position: relative;
        left: 0;
        top: 0;
        background-color: #f8f8f8;
        overflow: hidden;
      }

      .carousel__list {
        position: absolute;
        height: 100%;
        left: -100%;
        top: 0;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
      }

      .carousel__item {
        width: 100vw;
        height: 100%;
        transition: all 0.3s ease-in;
      }

      .carousel__item.active {
        display: block;
        left: 0;
      }

      .carousel__item.transition {
        left: 100%;
      }

      .img {
        width: 100% !important;
        height: 100% !important;
      }

      .topage {
        width: 126px;
        height: 54px;
        background-image: url(./static/images/button.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 25px;
        left: 95px;
        z-index: 99999;
        color: #fff;
        line-height: 52px;
        /* padding-left: 15px; */
        box-sizing: border-box;
        /* padding: 8px 15px; */
        text-align: center;
      }
      .achibox .caozuo {
        position: absolute;
        top: 20px;
        right: 20px;
        height: 100px;
      }
      .fangda img,
      .suoxiao img {
        width: 24px;
        height: 24px;
      }

      .carousel-arrow {
        width: 60px;
        height: 60px;
        font-size: 35px;
        position: absolute;
        top: 50%;
        margin-top: -18px;
        line-height: 36px;
        text-align: center;
        border: 0;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
        transition-duration: 0.3s;
        cursor: pointer;
      }

      .carousel-arrow.right {
        right: 10px;
      }

      .carousel-arrow.left {
        left: 10px;
      }

      .carousel-ind {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 36px;
        line-height: 0 !important;
        text-align: center;
        font-size: 0;
      }

      .carousel-ind ul {
        display: inline-block;
        padding: 5px;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
      }

      .carousel-ind li {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 3px;
        font-size: 14px;
        background-color: #e2e2e2;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        cursor: pointer;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
      }

      .carousel-ind li.active {
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="achibox" id="recognbox">
      <div class="carousel" id="carousel">
        <div class="carousel__list" id="carousel__container">
          <div class="carousel__item">
            <img src="./static/images/1.jpg" class="img" />
          </div>
          <div class="carousel__item">
            <img src="./static/images/2.jpg" class="img" />
          </div>
          <div class="carousel__item">
            <img src="./static/images/3.jpg" class="img" />
          </div>
          <div class="carousel__item">
            <img src="./static/images/4.jpg" class="img" />
          </div>
          <div class="carousel__item">
            <img src="./static/images/5.jpg" class="img" />
          </div>
        </div>
        <div class="carousel-ind" id="carousel-ind">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div>
          <i class="layui-icon layui-icon-left"></i>
        </div>
        <div>
          <i class="layui-icon layui-icon-right"></i>
        </div>
        <button
          class="layui-icon carousel-arrow layui-icon-left left"
          onclick="prePage()"
        ></button>
        <button
          class="layui-icon carousel-arrow layui-icon-right right"
          onclick="next()"
        ></button>
      </div>
      <div class="topage" onclick="topage()">
        <i class="el-icon-back"></i>
        返 回
      </div>
      <div class="caozuo">
        <div class="fangda" id="fangda" onclick="btnClick()">
          <img src="./static/images/index/fangda.png" alt="" />
        </div>
        <div class="suoxiao" id="suoxiao" onclick="exitFullScreen()">
          <img src="./static/images/index/suoxiao.png" alt="" />
        </div>
      </div>
    </div>
  </body>
  <script src="./static/js/touch.js"></script>
  <script type="text/javascript">
    var container = document.querySelector('#carousel');
    var bannerList = container.querySelectorAll('.carousel__item');
    var carouselLen = bannerList.length;
    var offsetWidth = container.querySelector('.carousel__item').offsetWidth;
    var carouselList = document.querySelector('#carousel__container');
    var firstBannerEl = bannerList[0];
    var lastBannerEl = bannerList[carouselLen - 1];
    var dotListContainer = document.querySelector('#carousel-ind');

    var dotList = dotListContainer.querySelectorAll('li');
    carouselList.appendChild(firstBannerEl.cloneNode(true));
    carouselList.insertBefore(lastBannerEl.cloneNode(true), firstBannerEl);

    dotList[0].setAttribute('class', 'active');

    var isCanClick = true;

    var scrollCardContainer = {
      el: carouselList,
      timer: null,
    };
    var obj = {
      index: 0,
    };

    var interval = 500;

    function next() {
      startAnimation(obj.index, 'next');
    }

    function prePage() {
      startAnimation(obj.index, 'pre');
    }

    function startAnimation(currentIndex, direction) {
      if (!isCanClick) {
        return;
      }

      isCanClick = false;
      var nextOffsetWidth = 0;
      var nextIndex = currentIndex;

      if (direction == 'next') {
        nextIndex++;
      } else {
        nextIndex--;
      }

      nextOffsetWidth = -offsetWidth * (nextIndex + 1);

      move(
        scrollCardContainer,
        'left',
        nextOffsetWidth,
        Math.max((offsetWidth / interval) * 20, 1),
        nextIndex,
        (nextIndexCallback) => {
          var transIndex = nextIndexCallback;

          if (transIndex >= carouselLen) {
            carouselList.style.left = '-100%';
            transIndex = 0;
          } else if (transIndex < 0) {
            carouselList.style.left = -100 * carouselLen + '%';
            transIndex = carouselLen - 1;
          }

          obj.index = transIndex;

          dotList.forEach((el) => {
            el.classList.remove('active');
          });

          dotList[obj.index].setAttribute('class', 'active');

          isCanClick = true;
        }
      );
    }

    initTouchEventHandler(document, {
      touchstart: function () {},
      moveleft: function () {
        next();
      },
      moveright: function () {
        prePage();
      },
      touchlongpress: function () {},
      touchclick: function () {},
    });

    function topage() {
      window.location.href = './index.html';
    }
  </script>
</html>