master

分支 (1)

管理

管理

master

mynews
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>锋行天下</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <meta name="Keywords" content="李业锋,李业锋的网站,锋行天下,锋行天下全栈" />
  <meta name="Description" content="李业锋个人学习的项目" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./style/swiper-bundle.min.css" />
  <link rel="shortcut icon" href="./images/sx.ico">
  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
      margin: 0;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 30vh;
    }

    .swiper-slide {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
    }

    @media only screen and (min-width: 769px) {
      .swiper-slide:first-child {
        transition: transform 100ms;
      }

      .swiper-slide:first-child img {
        transition: box-shadow 500ms;
      }

      .swiper-slide.swiper-slide-active:first-child {
        transform: translateX(50%);
        z-index: 2;
      }

      .swiper-slide.swiper-slide-active:first-child img {
        box-shadow: 0px 32px 80px rgba(0, 0, 0, 0.35);
      }

      .swiper-slide:nth-child(2) {
        transition: transform 100ms;
      }

      .swiper-slide.swiper-slide-next:nth-child(2) {
        transform: translateX(55%);
        z-index: 1;
      }

      .swiper[dir="rtl"] .swiper-slide.swiper-slide-active:first-child {
        transform: translateX(-50%);
      }

      .swiper[dir="rtl"] .swiper-slide.swiper-slide-next:nth-child(2) {
        transform: translateX(-55%);
      }
    }

    .autoplay-progress {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 10;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: var(--swiper-theme-color);
    }

    .autoplay-progress svg {
      --progress: 0;
      position: absolute;
      left: 0;
      top: 0px;
      z-index: 10;
      width: 100%;
      height: 100%;
      stroke-width: 4px;
      stroke: var(--swiper-theme-color);
      fill: none;
      stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
      stroke-dasharray: 125.6;
      transform: rotate(-90deg);
    }

    .tip {
      box-sizing: border-box;
      padding: 0 10px;
      width: 100%;
      height: 6vh;
      background: rgb(232, 229, 230);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .tip span {
      font-size: 5vw;
    }

    .tip .more {
      height: 100%;
      color: rgb(69, 67, 65);
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .singer-list {
      box-sizing: border-box;
      width: 100%;
      padding: 10px;
    }

    .singer-list .item {
      width: 100%;
      height: 5vh;
      background: rgb(234, 232, 232);
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .item .img-wrap {
      width: 2vh;
      height: 5vh;
      overflow: hidden;
      line-height: 5vh;
    }


    .item .detail {
      width: 76vw;
      height: 100%;
    }

    .detail .name {
      width: 100%;
      font-size: 5vw;
      line-height: 5vh;
      color: #16077c;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .detail .txt {
      font-size: 4vw;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }

    .item .more {
      width: 6vw;
      font-size: 30px;
      color: #454141;
    }
  </style>
  <script src="./js/axios.js"></script>

</head>

<body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper" id="swiper-wrapper">
      <!-- <div class="swiper-slide">
        <img src="./images/nature-1.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-9.jpg" />
      </div> -->
    </div>
    <!-- <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div> -->
    <!-- <div class="swiper-scrollbar"></div> -->
    <div class="swiper-pagination"></div>
    <div class="autoplay-progress">
      <svg viewBox="0 0 48 48">
        <circle cx="24" cy="24" r="20"></circle>
      </svg>
      <span></span>
    </div>
  </div>
  <div class="tip">
    <span>我的动态</span>
    <div class="more" id="toMore"></div>
  </div>
  <div class="singer-list" id="listMain">
    <!-- <div class="item">
      <div class="img-wrap">
        <img src="./images/nature-9.jpg" />
      </div>
      <div class="detail">
        <div class="name">刘德华</div>
        <div class="txt">上的剧可能是多久上的恐惧不是觉得v不是冬季女数据的v上的沉思的v </div>
      </div>
      <div class="more">></div>
    </div> -->
  </div>
  <!-- Swiper JS -->
  <script src="./js/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    window.onload = () => {
      function initSwiper() {
        const progressCircle = document.querySelector(".autoplay-progress svg");
        const progressContent = document.querySelector(".autoplay-progress span");
        var swiper = new Swiper(".mySwiper", {
          slidesPerView: 1,
          centeredSlides: false,
          slidesPerGroupSkip: 1,
          grabCursor: true,
          loop: true,
          keyboard: {
            enabled: true,
          },
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          },
          breakpoints: {
            769: {
              slidesPerView: 2,
              slidesPerGroup: 2,
            },
          },
          scrollbar: {
            el: ".swiper-scrollbar",
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          on: {
            autoplayTimeLeft(s, time, progress) {
              progressCircle.style.setProperty("--progress", 1 - progress);
              progressContent.textContent = `${Math.ceil(time / 1000)}s`;
            }
          }
        });
      }
      let swiperWrapper = document.getElementById('swiper-wrapper')
      axios.get("/shopApi/userGetBannerList").then(res => {
        if (res.status == 200) {
          let listStr = ""
          res.data.list.forEach(item => {
            listStr += `
            <div class="swiper-slide">
              <img src="${item.url}" data-target="${item.target}"/>
            </div>
            `
          })
          swiperWrapper.innerHTML = listStr
          setTimeout(() => {
            initSwiper()
          }, 100);
        }
      })
      let listMain = document.getElementById('listMain')
      let listData = []
      axios.get("/shopApi/haibao/show").then(res => {
        if (res.status == 200) {
          console.log('haibao',res)
          listData = res.data.list
          let str = ""
          res.data.list.forEach((item, index) => {
            str += `
            <div class="item" data-index="${index}">
              <div class="img-wrap">
                ${index+1}
              </div>
              <div class="detail" data-index="${index}">
                <div class="name" data-index="${index}">${item.title}</div>
              </div>
              <div class="more" data-index="${index}">></div>
            </div>
            `
          })
          listMain.innerHTML = str
        }
      })

      listMain.addEventListener('click', (e) => {
        let index = e.target.dataset.index
        let data = listData[index]
        window.location.href = `/detail.html?id=${data.id}`
      })
      swiperWrapper.addEventListener('click', (e) => {
        let id = e.target.dataset.target
        window.location.href = `/detail.html?id=${id}`
      })
      //提交游客记录
      let str=navigator.userAgent.toLocaleLowerCase()
      let strArr=str.split(" ")
      let last1=strArr[strArr.length-1]
      let last2=strArr[strArr.length-2]
      let ua=`${last2}-${last1}`
      axios.get(`/shopApi/addTourist?scene=xinwen|index&message=${ua}`).then(res => {
        if(res.status==200){
          console.log("ok")
        }
      })
    }
  </script>
</body>

</html>