bn-q-icon/pages/index/index.vue

<template>
	<view class="box-data">
    <header class="header">
      <image class="hd-logo" src="/static/img/icon/logow.png" mode="aspectFill" />
    </header>
    <view class="mui-content">
      <swiper class="swiper-box"
              :indicator-dots="true"
              :autoplay="true"
              indicator-color="#FFFFFF"
              indicator-active-color="#007aff"
      >
        <swiper-item class="swiper-item" v-for="banner in bannerList">
          <image :src="banner.image" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
      <view class="ln-notice">
        <image class="ln-notice-pic" src="/static/img/icon/notice.png" mode="aspectFill" />
        <view class="apple">
          <ul class="cy-wz-sco">
            <li v-for="noticeInfo in noticeList" >
              <text>{{noticeInfo.title}}</text>
            </li>
          </ul>
        </view>
      </view>
      <view class="ln-nav">
        <view  class="ln-nav-item">
          <image class="lg-nav-pic" src="/static/img/icon/tj.png" />
          <view class="lg-nav-intro">
            邀请好友
          </view>
        </view>
        <view class="ln-nav-item">
          <image class="lg-nav-pic" src="/static/img/icon/tp.png" />
          <view class="lg-nav-intro">
            报单通道
          </view>
        </view>
        <view class="ln-nav-item">
          <image class="lg-nav-pic" src="/static/img/icon/lm.png" />
          <view class="lg-nav-intro">
            查看团队
          </view>
        </view>
      </view>
      <view class="ln-banner">
        <view class="ln-bn-hd">
          连续24小时未新进单，最后10名触发托底池
        </view>
        <view class="ln-bn-nav">
          <view class="ln-bn-nav-item">
            <view class="ln-bn-intro">均富池</view>
            <view class="ln-bn-num">3300.10</view>
            <view class="ln-bn-hline"></view>
          </view>
          <view class="ln-bn-nav-item">
            <view class="ln-bn-intro">托底池</view>
            <view class="ln-bn-num">300.01</view>
          </view>
        </view>

      </view>
      <view class="ln-con">
        <view class="ln-con-tit">
          <view class="ln-list-iteam ln-list-iteam-36">
            地址
          </view>
          <view class="ln-list-iteam ln-list-iteam-28">
            数量
          </view>
          <view class="ln-list-iteam ln-list-iteam-36">
            时间
          </view>
        </view>
        <view class="ln-list">
          <view class="list-item" v-for="coin in 10" >
            <view class="ln-list-iteam ln-list-iteam-36">
              <view><span>Lucky </span></view>
            </view>
            <view class="ln-list-iteam  ln-list-iteam-28">
              <view><span>1000</span></view>
            </view>
            <view class="ln-list-iteam ln-list-iteam-36">
              <view class="ln-list-num">2022-10-18 11:41</view>
            </view>
          </view>

        </view>
      </view>
    </view>

	</view>

</template>
<script>
import {banner, notices} from "@/api/news";
import $ from 'jquery/src/jquery'
  export default {
		components: {

		},
		data() {
			return {
        bannerList:[],
        noticeList:[]
      }

		},
		watch: {

		},
    onLoad(query) {
      this.banner()
      this.notices()
    },
    mounted() {

		},
		methods: {
      banner(){
        banner().then((res)=>{
          if(res.code===1){
            this.bannerList=res.data
          }
        })
      },
      notices(){
        notices().then((res)=>{
          if(res.code===1){
            this.noticeList=res.data
            setTimeout(function() {
              let scroll = function(s, top, sp) {
                let wview = $(".apple ul li:first-child view").width();
                let wLi = $(".apple ul li").width();
                let wOffset = wview - wLi;
                let time = wOffset * 120;
                //		alert(wOffset);
                if (wview > wLi) {
                  $(".apple ul li:first-child view").animate({
                    left: -wOffset
                  }, time);
                  setTimeout(function() {
                    s.animate({
                      marginTop: top + "px"
                    }, sp, function() {
                      s.css("marginTop", "0px");
                      s.children("li:first").appendTo(s);
                      s.clearQueue().delay(sp).queue(function() {
                        $(".apple ul li view").css("left", 0);
                        scroll(s, top, sp);
                      });
                    });
                  }, time);
                } else {
                  s.animate({
                    marginTop: top + "px"
                  }, sp, function() {
                    s.css("marginTop", "0px");
                    s.children("li:first").appendTo(s);
                    s.clearQueue().delay(sp).queue(function() {
                      scroll(s, top, sp);
                    });
                  });
                }
              };
              scroll($("ul.cy-wz-sco"), -30, 3000);
            }, 50);
          }
        })
      }


		},
	}
</script>
<style lang="scss" scoped>
.box-data{
  background: #131E30;
  min-height: calc(100vh - 49px);
  .header{
    position: fixed; left: 0; top: 0; width: 100%; height: 54px;  background: #131E30; z-index: 10; overflow: hidden;
    .hd-logo{ display: block; max-width: 50%; height: 34px; margin: 10px auto;}
  }
  .mui-content{
    color: #7388a7;
    padding: 0 20rpx;
    .swiper-box{
      height: 330rpx;
      .swiper-item{
        border-radius: 16rpx;
        image{
          width: calc(100vw - 40rpx);
          height: 330rpx;
        }
      }
    }
    .ln-notice{ position: relative; width: calc(100% - 20px); height: 30px; line-height: 30px; padding-left: 30px; margin: 10px auto; font-size: 14px;
      .ln-notice-pic{ display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; height: 20px; margin: auto 0;}
      marquee{ width: 100%; height: 30px;}
      .apple{ width: 100%; height: 30px; overflow: hidden;}
      text{
        color: #7388a7;
        font-size: 14px;
      }
    }
    .ln-nav{
      width: 100%;
      padding-top: 10px;
      border-top: 1px solid #213141;
      overflow: auto;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .ln-nav-item{
        width: calc((100vw - 80px)/3);
        height: 75px;
        padding: 6px;
        border-radius: 6px;
        overflow: hidden;
        background: #1A2B3D;
        .lg-nav-pic{ display: block; width: 40px; height: 40px; margin: 0 auto;}
        .lg-nav-intro{ width: 100%; height: 24px; text-align: center; line-height: 24px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7388a7;font-size: 14px;}
      }
    }
    .ln-banner{
      position: relative; width: calc(100% - 40rpx); padding: 10px; padding-top: 15px; margin: 10px auto; border-radius: 6px; overflow: hidden; background: url(/static/img/bg/bnbg.png) no-repeat; background-size: 100% 100%;

      .ln-bn-hd{ width: 100%; line-height: 24px; color: rgb(217,228,246); font-size: 17px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
      .ln-bn-nav{ width: 100%; text-align: center; margin: 5px 0; margin-top: 15px; overflow: auto;
        .ln-bn-nav-item{ position: relative; width: 50%; float: left;
          .ln-bn-hline{ position: absolute; right: 0; top: 0; bottom: 0; width: 1px; height: 50%; margin: auto 0; background: #3469BD;}
         .ln-bn-num{ width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
          .ln-bn-intro{
            height: 21px;
            font-size: 12px;
            color: rgb(217,228,246);
          }
           .ln-bn-num{
             height: 28px;line-height: 28px;
             font-size: 18px;
             font-weight: 600;
             color: rgb(217,228,246);
           }
        }
      }

    }
    .ln-con{
      width: 100%; background: #1A2B3D;
      .ln-con-tit{
        width:  calc(100% - 20px); height: 41px; line-height: 20px; border-bottom: 1px solid #213141; padding: 10px;
        .ln-list-iteam{ float: left; font-size: 13px; color: #7388a7;}
      }
      .ln-list{
        width: 100%;
        padding-bottom: 20rpx;
        .list-item{
          width: calc(100% - 20px); padding: 10px; border-bottom: 1px solid #213141; overflow: auto;
          display: flex;
          justify-content: space-between;
          .ln-list-iteam{ font-size: 12px; color: #d9e4f6;}
          .ln-list-iteam view{ width: 100%; height: 12px; line-height: 24px; color: #d9e4f6;}
          .ln-list-num{
            font-size: 14px;
          }
          .ln-list-iteam view span{ font-size: 16px; font-weight: 600; color: #d9e4f6;}
        }

      }
      .ln-list-iteam-36{ width: 36%;}
      .ln-list-iteam-28{ width: 28%;}






    }

  }

}



</style>