0713 NOTE

0713 NOTE

轮播图面向对象

/*css样式*/
 .divs{
            width: 900px;
            height: 300px;
            position: relative;
        }
<!--html样式-->
<button>切换</button>
    <button id = "back">返回</button>
    <div class="divs" ></div>
<script>
	 import Carousel from "./js/Carousel.js";

      
        var arr = [
            { date: "12/Jul.2021", title: "No Fear in My Heart. 10天4700公里,自由散漫南疆奇遇记。", img: "./img1/a.jpeg" },
            { date: "11/Jul.2021", title: "128座乐园!284座过山车!我的全球乐园打卡计划持续更新ing", img: "./img1/b.jpg" },
            { date: "10/Jul.2021", title: "带着父母旅行的第四年,疫情下的Flag小旗在广州飘~谢谢你们陪着我,会勇敢坚定的走自己的路", img: "./img1/c.jpg" },
            { date: "09/Jul.2021", title: "念念闽夏|日子娓娓,一如夏季绵长", img: "./img1/d.jpg" },
            { date: "08/Jul.2021", title: "30天自驾16座城市,从南到北,一万公里重新认识你。(海南-内蒙古-海南)", img: "./img1/e.jpg" },];
        var arr1 = [
            { date: "12/Jul.2020", title: "No Fear in My Heart. 10天4700公里,自由散漫南疆奇遇记。", img: "./img1/a1.jpeg" },
            { date: "11/Jul.2020", title: "128座乐园!284座过山车!我的全球乐园打卡计划持续更新ing", img: "./img1/b1.jpeg" },
            { date: "10/Jul.2020", title: "带着父母旅行的第四年,疫情下的Flag小旗在广州飘~谢谢你们陪着我,会勇敢坚定的走自己的路", img: "./img1/c1.jpeg" },
            { date: "09/Jul.2020", title: "念念闽夏|日子娓娓,一如夏季绵长", img: "./img1/d1.jpeg" },
            { date: "08/Jul.2020", title: "30天自驾16座城市,从南到北,一万公里重新认识你。(海南-内蒙古-海南)", img: "./img1/e1.jpeg" },
        ]

        var carousel = new Carousel(null,false);
        carousel.setSource(arr.slice(0));
        carousel.appendTo(".divs");
        document.querySelector("button").addEventListener("click",clickhandler);
        document.querySelector("#back").addEventListener("click",clickhandler1);
        function clickhandler(e){
            carousel.setSource(arr1);
        }
        function clickhandler1(e){
            carousel.setSource(arr);
        }



        animation();
        function animation() {
            requestAnimationFrame(animation);
            Carousel.update();
        }
</script>
import Component from "./Component.js";
import Utils from "./Utils.js";
export default class Carousel extends Component {
    arr = [];
    bnList = [];
    imgList = [];
    autoBool = false;
    moveBool = false;
    prev;
    pos = 0;
    x = 0;
    direc = "left";
    time = 300;
    speedX = 50;
    imgCon;
    ul;
    full;
    rect={width:0,height:0};
    static carouselList = new Set();
    constructor(source,full=true) {
        super();
        this.full=full;
        Carousel.setCss();
        this.bnList = [this.createBnList(true), this.createBnList(false)];
        this.setSource(source);
    }
    setSource(source) {
        if (!source || source.length === 0) return;
        for (var i = 0; i < this.arr.length; i++) {
            this.arr[i] = null;
        }
       this.arr=null;
        this.arr = source.slice(0);
        Utils.loadImage(source.map(item => item.img), list => this.loadHandler(list));
        // console.log(source);
    }
    loadHandler(list) {
        for(var i=0;i<this.imgList.length;i++){
            this.imgList[i].remove();
            this.imgList[i]=null;
        }
        this.imgList=null;
        this.pos=0;
        this.time=300;
        this.autoBool=false;
        this.moveBool=false;
        this.prev=null;
        this.x=0;
        this.direc="left";
        this.imgList = list.map((item, index) => this.createImgList(item, index));
        this.createCarousel();

    }
    appendTo(parent) {
        super.appendTo(parent);
        this.rect=this.parent.getBoundingClientRect();
        Carousel.carouselList.add(this);
    }
    remove() {
        super.remove();
        Carousel.carouselList.delete(this);
    }
    createBnList(leftBool) {
        var canvas = document.createElement("canvas");
        canvas.width = 40;
        canvas.height = 100;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#FFF";
        ctx.beginPath();
        ctx.moveTo(30, 12);
        ctx.lineTo(6, 50);
        ctx.lineTo(30, 86);
        ctx.lineTo(33, 77);
        ctx.lineTo(15, 50);
        ctx.lineTo(30, 23);
        ctx.closePath();
        ctx.fill();
        Object.assign(canvas.style, {
            position: "absolute",
            backgroundColor: "#CCC",
            transform: leftBool ? "scale(0.7,0.7)" : "scale(-0.7,0.7)",
            boxShadow: leftBool ? "3px 3px 3px #999" : "-3px -3px 3px #999"
        })
        return canvas;
    }
    createImgList(item, index) {
        var elem = document.createElement("div");
        elem.className = "imgList";
        var d = this.arr[index].date.split(/(?<=\/)/);
        elem.innerHTML = `
                    <h3><span>${d[0]}/</span>${d[1]}</h3>
                    <p>${this.arr[index].title}</p>
                `;
        item.className = "bgimage"
        if(!this.full){                     //改变父容器大小时,将图片根据父容器大小进行调整,不会因为容器大小调整导致样式出错
            // console.log(item);
            // console.log(elem);
            Object.assign(item.style,{
                width:this.rect.width+"px",
                height:this.rect.height+"px"
            })
            Object.assign(elem.style,{      //改变父容器大小时,防止图片切换时产生空白
                width:this.rect.width+"px",
                height:this.rect.height+"px"
            })
        }
        elem.insertBefore(item, elem.firstElementChild);
        return elem;
    }
    createCarousel() {
        this.elem.className = "carousel";
        if(!this.full){
            Object.assign(this.elem.style,{
                width:this.rect.width+"px",
                height:this.rect.height+"px"
            })
        }
        this.imgCon = document.createElement("div");
        this.imgCon.className = "imgCon";
        this.imgCon.appendChild(this.imgList[0]);
        this.elem.appendChild(this.imgCon);
        if(!this.full){
            Object.assign(this.imgCon.style,{
                width:this.rect.width*2+"px",
                height:this.rect.height+"px"
            })
        }

        this.ul = document.createElement("ul");
        this.ul.innerHTML = this.arr.reduce((value, item) => {
            return value + "<li></li>";
        }, "");
        this.ul.addEventListener("click", e => this.clickHandler(e));
        this.elem.appendChild(this.ul);
        this.bnList.forEach((item, i) => {
            item.className = i === 0 ? "left" : "right";
            this.elem.appendChild(item);
            item.style.top=(this.elem.offsetHeight-item.offsetHeight)/2+"px"
            item.addEventListener("click", e => this.bnClickHandler(e));
        })
        this.elem.addEventListener("mouseenter", e => this.mouseHandler(e))
        this.elem.addEventListener("mouseleave", e => this.mouseHandler(e))
        this.changePrev()
    }
    clickHandler(e) {
        if (this.moveBool) return;
        if (e.target.nodeName !== "LI") return;
        var index = Array.from(this.ul.children).indexOf(e.target);
        if (index === this.pos) return;
        if (index > this.pos) this.direc = "left";
        else this.direc = "right";
        this.pos = index;
        this.createNextImg()
    }
    bnClickHandler(e) {
        console.log(e.target);
        // console.log(e.currentTarget);
        // console.log(this.bnList.indexOf(e.target));
        // console.log(this.bnList);
        if (this.moveBool) return;
        if (this.bnList.indexOf(e.target) === 0) {
            this.direc = "right";
            this.pos--;
            if (this.pos < 0) this.pos = this.arr.length - 1;
        } else {
            this.direc = "left";
            this.pos++;
            if (this.pos > this.arr.length - 1) this.pos = 0;
        }
        this.createNextImg()
    }
    createNextImg() {
        if (this.direc === "left") {
            this.imgCon.appendChild(this.imgList[this.pos]);
            this.x = 0;
        } else {
            this.imgCon.insertBefore(this.imgList[this.pos], this.imgCon.firstElementChild);
            this.x = -this.elem.offsetWidth
        }
        this.imgCon.style.left = this.x + "px";
        this.moveBool = true;
        this.changePrev();
    }
    mouseHandler(e) {
        if (e.type === "mouseenter") {
            this.autoBool = false;
            this.time = 300;
        } else {
            this.autoBool = true;
        }
    }
    changePrev() {
        if (this.prev) {
            this.prev.style.backgroundColor = "rgba(0,0,0,0)";
        }
        this.prev = this.ul.children[this.pos];
        this.prev.style.backgroundColor = "red";
    }
    update() {
        this.imgConMove();
        this.autoPlay();
    }
    imgConMove() {
        if (!this.moveBool) return;
        if (this.direc === "left") {
            this.x -= this.speedX;
            if (this.x <= -this.elem.offsetWidth) {
                this.moveBool = false;
                this.imgCon.firstElementChild.remove();
                this.x = 0;
            }
        } else {
            this.x += this.speedX;
            if (this.x >= 0) {
                this.moveBool = false;
                this.imgCon.lastElementChild.remove();
                this.x = 0;
            }
        }
        this.imgCon.style.left = this.x + "px";
    }
    autoPlay() {
        if (!this.autoBool) return;
        this.time--;
        if (this.time > 0) return;
        this.time = 300;
        var evt = new MouseEvent("click");
        this.bnList[1].dispatchEvent(evt);
    }
    static setCss() {
        if (super.setCss()) return;
        Utils.setCss(`
        .carousel{
            position: relative;
            width: 100%;
            height: 33.3vw;
            overflow: hidden;
        }
        .imgCon{
            width: 200vw;
            height:100%;
            position: absolute;
            left:0px;
        }
        .imgList{
            float: left;
            height: 33.3vw;
            width: 100vw;
            transition: all 1s;
            position: relative;
        }
        .imgList>.bgimage{
            position: absolute;
            height: 100%;
            left: 0;
            top: 0;
        }
        .imgList>h3,.imgList>p{
            position: absolute;
            font-family: Arial,"Lucida Grande","Microsoft Yahei","Hiragino Sans GB","Hiragino Sans GB W3",SimSun,"PingFang SC",STHeiti;
            color: #FFF;
            text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
            font-size: 20px;
            cursor: pointer;
            left: 15vw;
            top: 0px;
        }
        .imgList>p{
            top:35px;
        }
        .imgList>h3>span{
            font-size: 30px;
        }
        .carousel>ul{
            position: absolute;
            list-style: none;
            bottom: 30px;
            left:50%;
            transform: translate(-50%);
        }
        .carousel>ul>li{
            width: 20px;
            height: 20px;
            border: 2px solid #FF0000;
            border-radius: 20px;
            margin-left: 10px;
            float: left;
        }
        .left,.right{
            position: absolute;

        }
        .left{
            left:50px;
        }
        .right{
            right: 50px;
        }
        `)
    }
    static update() {
        Carousel.carouselList.forEach(item => item.update());
    }
}

瀑布流

 /*css*/
body{
            margin: 0;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
"use strict"
import Utils from "./js/Utils.js"
        const COL=5,
              GAP=5;

        var ul,img,liWidth;
        var pos=2,heightList=[];
        var currentWidth;
        init();
        function init(){
            ul=document.createElement("ul");
            heightList=Array(COL).fill(0);
            currentWidth=document.body.clientWidth;
            liWidth=(currentWidth-(GAP*(COL-1)))/COL;
            for(var i=0;i<COL;i++){
                var li=document.createElement("li");
                Object.assign(li.style,{
                    float:"left",
                    width:liWidth+"px",
                    backgroundColor:Utils.randomColor(),
                    height:"10px",
                    marginLeft:i===0 ? "0px" : GAP+"px"
                })
                ul.appendChild(li);
            }
            document.body.appendChild(ul);
            loadImage();
            window.addEventListener("resize",updateLiWidth)
        }

        function loadImage(){
            img=new Image();
            img.src="./img1/"+pos+"-.jpg";
            img.addEventListener("load",loadHandler);
        }

        function loadHandler(e){
            var img1=img.cloneNode(false);
            var scale=img1.height/img1.width;
            img1.scale=scale;
            img1.style.width=liWidth+'px';
            img1.style.height=liWidth*scale+"px";
            var min=Math.min.apply(null,heightList);
            var minIndex=heightList.indexOf(min);
            ul.children[minIndex].appendChild(img1);
            heightList[minIndex]+=liWidth*scale;
            if(currentWidth!==document.body.clientWidth){
                updateLiWidth();
            }
            pos++;
            if(pos>79){
                return;
            }
            img.src="./img1/"+pos+"-.jpg";
        }

        function updateLiWidth(){
            currentWidth=document.body.clientWidth;
            liWidth=(currentWidth-(GAP*(COL-1)))/COL;
            for(var i=0;i<ul.children.length;i++){
                ul.children[i].style.width=liWidth+"px"
                for(var j=0;j<ul.children[i].children.length;j++){
                    var img1=ul.children[i].children[j];
                    img1.style.width=liWidth+"px";
                    img1.style.height=liWidth*img1.scale+"px";
                }
            }
        }

懒加载

<style>
        body{
            margin: 0;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
    </style>
<script type="module">
        import Utils from "./js/Utils.js"
        const COL=5,
              GAP=5;

        var ul,img,liWidth;
        var pos=2,heightList=[];
        var currentWidth;
        init();
        function init(){
            ul=document.createElement("ul");
            heightList=Array(COL).fill(0);
            currentWidth=document.body.clientWidth;
            liWidth=(currentWidth-(GAP*(COL-1)))/COL;
            for(var i=0;i<COL;i++){
                var li=document.createElement("li");
                Object.assign(li.style,{
                    float:"left",
                    width:liWidth+"px",
                    backgroundColor:Utils.randomColor(),
                    height:"10px",
                    marginLeft:i===0 ? "0px" : GAP+"px"
                })
                ul.appendChild(li);
            }
            document.body.appendChild(ul);
            loadImage();
            window.addEventListener("resize",updateLiWidth)
            document.addEventListener("scroll",scrollHandler)
        }

        function loadImage(){
            img=new Image();
            img.src="./img1/"+pos+"-.jpg";
            img.addEventListener("load",loadHandler);
        }

        function loadHandler(e){
            var img1=img.cloneNode(false);
            var scale=img1.height/img1.width;
            img1.scale=scale;
            img1.style.width=liWidth+'px';
            img1.style.height=liWidth*scale+"px";
            var min=Math.min.apply(null,heightList);
            var minIndex=heightList.indexOf(min);
            ul.children[minIndex].appendChild(img1);
            heightList[minIndex]+=liWidth*scale;
            if(currentWidth!==document.body.clientWidth){
                updateLiWidth();
            }
            if(document.body.scrollHeight>document.documentElement.clientHeight*3+document.documentElement.scrollTop){
                return;
            }
            
            continueLoad()
        }

        function continueLoad(){
            pos++;
            if(pos>79){
               pos=2;
            }
            img.src="./img1/"+pos+"-.jpg";
        }

        function scrollHandler(e){
            if(document.body.scrollHeight-document.documentElement.scrollTop-document.documentElement.clientHeight<100){
                continueLoad();
            }
        }

        function updateLiWidth(){
            currentWidth=document.body.clientWidth;
            liWidth=(currentWidth-(GAP*(COL-1)))/COL;
            for(var i=0;i<ul.children.length;i++){
                ul.children[i].style.width=liWidth+"px"
                for(var j=0;j<ul.children[i].children.length;j++){
                    var img1=ul.children[i].children[j];
                    img1.style.width=liWidth+"px";
                    img1.style.height=liWidth*img1.scale+"px";
                }
            }
        }
    </script>

商品列表

/*goods.js*/
import Component from "./Component.js";
import Utils from "./Utils.js";
export default class Goods extends Component {
    data;
    prev;
    constructor(data) {
        super();
        this.elem.className = "goods"
        this.setData(data)
        Goods.setCss();
    }
    setData(data) {
        if (!data) return;
        this.data = data;
        this.elem.innerHTML = `
            <a class='iconImg' ids='${data.goods[0].id}'><img src='${data.goods[0].img}'>${(() => {
                if (data.promoteImg.trim().length === 0) return "";
                var arr = data.promoteImg.split("|");
                if (arr.length === 1) return "<img class='iconPromote' title='" + data.goods[0].title + "' src='" + arr[0] + "'>";
                return "<img class='iconPromote' src='" + arr[0] + "'><div class='iconPromoteTxt'>" + arr[1] + "</div>";
            })()}</a>
            <ul class='iconList clear'>${data.goods.reduce((value, item) => {
                return value + "<li><img title='" + item.color + "' src='" + item.img + "'></li>"
            }, "")}</ul>
            <p class='priceCon'><span>¥</span><i>${data.goods[0].price.toFixed(2)}</i></p>
            <p class='titleCon'><span class='${data.titleIcon ? "titleIcon" : ""}'>${data.titleIcon ? "京品手机" : ""}</span><a href='javascript:void(0)'><span class='title'>${data.title}</span></a></p>
            <p class='info clear'>${data.info.reduce((value, item) => {
                value += "<span class='infoitem'>" + item + "</span>"
                return value;
            }, "")}</p>
            <div class='judgeCon'><span class='judge'>${data.judge > 10000 ? Math.floor(data.judge / 10000) + "万+" : data.judge}</span>条评价</div>
            <div class='shoppingCon'><a class='shopping' href='${data.shoppingHref}'>${data.shopping}</a><img src='./img/chat.png'></div>
            <div>${data.icon ? Object.keys(data.icon).reduce((value, prop) => {
                if (data.icon[prop].length === 0) return value;
                return value + data.icon[prop].reduce((v, t) => {
                    return v + "<span class='" + prop + "'>" + t + "</span>"
                }, "")
            }, "") : ""}</div>
        `
        this.iconList = this.elem.querySelector(".iconList");
        this.iconList.addEventListener("mouseover", e => this.mouseHandler(e))
        this.iconImg = this.elem.querySelector(".iconImg>img");
        this.price = this.elem.querySelector(".priceCon>i");
        var evt = new MouseEvent("mouseover", { bubbles: true });
        this.iconList.children[0].firstElementChild.dispatchEvent(evt);
        Goods.setCss();

    }
    mouseHandler(e) {
        if (e.target.nodeName !== "IMG") return;
        if (this.prev) {
            this.prev.style.borderWidth = "1px";
            this.prev.style.borderColor = "#DDD";
            this.prev.style.padding = "1px";
        }
        this.prev = e.target.parentElement;
        this.prev.style.borderWidth = "2px";
        this.prev.style.borderColor = "#e4393c";
        this.prev.style.padding = "0px";
        var index = Array.from(this.iconList.children).indexOf(this.prev);
        this.iconImg.src = this.data.goods[index].img;
        this.price = this.data.goods[index].price.toFixed(2);
        this.iconImg.title = this.data.goods[index].title;
        this.iconImg.parentElement.setAttribute("ids", this.data.goods[index].id)
    }
    static setCss() {
        if (super.setCss()) return;
        Utils.setCss(`.goods{
            width: 240px;
            height: 444px;
            padding: 12px 9px;
            font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
            color: #666;
            position: relative;
            float: left;
        }
        .goods:hover{
            box-shadow: 0px 0px 4px #CCC;
        }
        .goods>.iconImg{
            text-decoration: none;
            width: 100%;
            height: 220px;
            text-align: center;
            display: block;
            position: relative;
        }
        .goods>.iconImg>img{
            width: 220px;
            height: 220px;
        }
        .goods>.iconImg>.iconPromote{
            width: 220px;
            height: 42px;
            position: absolute;
            bottom: 0;
            left:0;
        }
        .goods>.iconImg>.iconPromoteTxt{
            position: absolute;
            bottom: 0;
            left:0;
            width: 220px;
            line-height: 30px;
            text-align: center;
            color: white;
        }
        .goods>.iconList{
            list-style: none;
            margin: 0;
            padding: 0;
            margin-left: 2px;
        }
        .goods>.iconList>li{
            float:left;
            /* #e4393c */
            border: 1px solid #ddd;
            padding: 1px;
            width:25px;
            height: 25px;
            margin: 2px;
        }
        .goods>.iconList>li>img{
            width: 25px;
            height: 25px;
            
        }
        .clear::after
        {
            content: "";
            display: block;
            height: 0;
            overflow: hidden;
            clear: both;
            visibility: hidden;
        }
        .goods>.priceCon{
            font-size: 16px;
            color: #e4393c;
            margin: 0;
            margin-top: 8px;
        }
        .goods>.priceCon>i{
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            font-family: Verdana;
        }
        .goods>.titleCon{
            width: 220px;
            overflow: hidden;
            white-space: nowrap;
            margin: 0;
            margin-top: 8px;
            padding: 0;
        }
        .goods>.titleCon>.titleIcon{
            float: left;
            height: 16px;
            padding: 0 3px;
            margin-top: 2px;
            margin-right: 3px;
            overflow: hidden;
            color: #fff;
            font: 12px/16px "Helvetica Neue","Hiragino Sans GB",SimSun,serif;
            background: #c81623;
            border-radius: 2px;
        
        }
        .goods>.titleCon>a{
            text-decoration: none;
            color: #666;
        }
        .goods>.titleCon>a:hover{
            color: #c81623;
        }
        .goods>.info{
            margin: 0;
            margin-top: 8px;
        }
        .goods>.info>.infoitem{
            float: left;
            height: 19px;
            line-height: 19px;
            padding: 0 4px;
            margin-right: 7px;
            background: #f4f4f4;
        }
        .goods>.judgeCon{
            margin-top: 8px;
        }
        .goods>.judgeCon>.judge
        {
            color: #646fb0;
            font-family: verdana;
            font-weight: 700;
        }
        .goods>.shoppingCon{
            margin-top: 8px;
            margin-bottom: 10px;
        }
        .goods>.shoppingCon>.shopping{
            color: #999;
            text-decoration: none;
            display: inline-block;
            max-width: 122px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .goods>.shoppingCon>.shopping:hover{
            color: #c81623;
        }
    
        .icon1,.icon3{
            float: left;
            height: 16px;
            line-height: 16px;
            padding: 0 3px;
            margin-right: 3px;
            overflow: hidden;
            text-align: center;
            font-style: normal;
            font-size: 12px;
            font-family: "Helvetica Neue","Hiragino Sans GB",SimSun,serif;
            background: #e23a3a;
            color: #FFF;
            cursor: default;
            border-radius: 2px;
        }
        .icon2{
            float: left;
            height: 14px;
            line-height: 14px;
            padding: 0 3px;
            border: 1px solid #e23a3a;
            margin-right: 3px;
            overflow: hidden;
            text-align: center;
            font-style: normal;
            font-size: 12px;
            font-family: "Helvetica Neue","Hiragino Sans GB",SimSun,serif;
            border-radius: 2px;
            color: #e23a3a;
        }
        .icon3{
            background: #31c19e;
        }
        .icon4{

        }`)
    }
}
 var arr = [
            {
                id: "1001",
                goods: [
                    { id: 100101, img: "./img/100101.jpg", color: "冰岛幻境", title: "【京仓速发】送:壳膜+碎屏保+一年质保+晒单红包。4800万高感光夜拍三摄,光学屏幕指纹!旗舰新品荣耀50", price: 1628 },
                    { id: 100102, img: "./img/100102.jpg", color: "幻夜黑", title: "【京仓速发】送:壳膜+碎屏保+一年质保+晒单红包。4800万高感光夜拍三摄,光学屏幕指纹!旗舰新品荣耀50", price: 1648 },
                    { id: 100103, img: "./img/100103.jpg", color: "蓝水翡翠", title: "【京仓速发】送:壳膜+碎屏保+一年质保+晒单红包。4800万高感光夜拍三摄,光学屏幕指纹!旗舰新品荣耀50", price: 1698 },
                ],
                promoteImg: "",
                titleIcon: false,
                title: "荣耀Play4T Pro/荣耀play4tpro 华为麒麟810芯片 全网通手机 冰岛幻境 8+128GB【碎屏险套装】",
                info: ["8GB运存", "128GB"],
                judge: 20000,
                shopping: "佳沪电商旗舰店",
                shoppingHref: "https://mall.jd.com/index-113406.html?from=pc",
                icon: {
                    icon1: [],//红底白字
                    icon2: ["京东物流", "免邮", "赠"],//白底红字
                    icon3: [],
                    icon4: []
                }
            },
            {
                id: "1002",
                goods: [
                    { id: 100201, img: "./img/100201.jpg", color: "星空黑", title: "【自营】双灯强光手电筒.侧键开关/金属边框/4000mAh大电池.持久待机30天/一键解锁/一键报时/【365天以换代修】查看4G全网通版", price: 155 },
                    { id: 100202, img: "./img/100202.jpg", color: "中国红", title: "【自营】双灯强光手电筒.侧键开关/金属边框/4000mAh大电池.持久待机30天/一键解锁/一键报时/【365天以换代修】查看4G全网通版", price: 155 },
                    { id: 100203, img: "./img/100203.jpg", color: "悍马绿", title: "【自营】双灯强光手电筒.侧键开关/金属边框/4000mAh大电池.持久待机30天/一键解锁/一键报时/【365天以换代修】查看4G全网通版", price: 155 },
                ],
                promoteImg: "./img/1002promoteImg.png|关注店铺即享115元|6.23-7.22",
                titleIcon: false,
                title: "纽曼 Newman L8 星空黑 三防老人手机超长待机 移动2G 直板按键大字大声 双卡双待老年机 学生儿童备用功能机",
                info: ["8GB运存", "128GB"],
                judge: 20000,
                shopping: "纽曼京东自营官方旗舰店",
                shoppingHref: "https://mall.jd.com/index-1000097221.html?from=pc",
                icon: {
                    icon1: ["自营"],//红底白字
                    icon2: ["秒杀", "赠"],//白底红字
                    icon3: [],
                    icon4: []
                }
            },
            {
                id: "1003",
                goods: [
                    { id: 100301, img: "./img/100301.jpg", color: "液氧 ", title: "vivo X50", price: 2699 },
                    { id: 100302, img: "./img/100302.jpg", color: "黑镜", title: "vivo X50", price: 2699 },
                    { id: 100303, img: "./img/100303.jpg", color: "浅醺", title: "vivo X50", price: 2699 },
                ],
                promoteImg: "",
                titleIcon: false,
                title: "vivo X50 5G手机 8+128GB 液氧 超感光夜摄 后置4800W像素 90Hz超薄柔性屏  双模5G全网通手机",
                info: ["8GB运存", "128GB"],
                judge: 20000,
                shopping: "vivo京东自营官方旗舰店",
                shoppingHref: "https://mall.jd.com/index-1000085868.html?from=pc",
                icon: {
                    icon1: ["自营", "本地仓"],//红底白字
                    icon2: ["劵1350-95"],//白底红字
                    icon3: [],
                    icon4: []
                }
            },
            {
                id: "1004",
                goods: [
                    { id: 100401, img: "./img/100401.jpg", color: "曜岩黑 ", title: "限时优惠1300元,惊爆到手价7899元,下单还享12期免息!三星全系产品火热抢购中,欲购从速!", price: 7899 },
                    { id: 100402, img: "./img/100402.jpg", color: "迷雾金", title: "限时优惠1300元,惊爆到手价7899元,下单还享12期免息!三星全系产品火热抢购中,欲购从速!", price: 7899 },
                    { id: 100403, img: "./img/100403.jpg", color: "初露白", title: "限时优惠1300元,惊爆到手价7899元,下单还享12期免息!三星全系产品火热抢购中,欲购从速!", price: 7899 },
                ],
                promoteImg: "",
                titleIcon: false,
                title: "三星 SAMSUNG Galaxy Note20 Ultra 5G(SM-N9860)5G手机 S Pen&三星笔记 120Hz  游戏手机 12GB+256GB 曜岩黑",
                info: ["12GB运存", "256GB"],
                judge: 20000,
                shopping: "三星京东自营官方旗舰店",
                shoppingHref: "https://mall.jd.com/index-1000003443.html?from=pc",
                icon: {
                    icon1: ["自营"],//红底白字
                    icon2: [],//白底红字
                    icon3: [],
                    icon4: []
                }
            },
            {
                id: "1005",
                goods: [
                    { id: 100501, img: "./img/100501.jpg", color: "天空之境 ", title: "高速运行,适合学生,商务备用,后置1600万,自带美颜,强悍多核,应用多开,3900毫安电池强劲续航", price: 699 },
                    { id: 100502, img: "./img/100502.jpg", color: "翡翠绿", title: "高速运行,适合学生,商务备用,后置1600万,自带美颜,强悍多核,应用多开,3900毫安电池强劲续航", price: 699 },
                    { id: 100503, img: "./img/100503.jpg", color: "幻夜黑", title: "高速运行,适合学生,商务备用,后置1600万,自带美颜,强悍多核,应用多开,3900毫安电池强劲续航", price: 699 },
                ],
                promoteImg: "",
                titleIcon: false,
                title: "小辣椒M12 Pro指纹一体游戏全网通4G大内存128G安卓学生高性价比千元机超长待机老人智能手机 天空之境 全网通[8G+128G]",
                info: ["8GB运存", "128GB"],
                judge: 20000,
                shopping: "极客小酷旗舰店",
                shoppingHref: "https://mall.jd.com/index-10137621.html?from=pc",
                icon: {
                    icon1: [],//红底白字
                    icon2: [],//白底红字
                    icon3: [],
                    icon4: []
                }
            },
            {
                id: 1016,
                goods: [
                    { id: 101601, img: "./img/101601.jpg", color: "白色", title: "【手机、平板、笔记本旧机卖高价,加价红包快速回血】点击查看》》", price: 2579 },
                    { id: 101602, img: "./img/101602.jpg", color: "黑色", title: "【手机、平板、笔记本旧机卖高价,加价红包快速回血】点击查看》》", price: 1999 },
                ],
                promoteImg: "",
                titleIcon: "flase",
                title: "Apple iPhone X 苹果x二手手机 白色 256G ",
                info: [],
                judge: 20001,
                shopping: "拍拍严选官方旗舰店",
                shoppingHref: "https://mall.jd.com/index-10180819.html?from=pc",
                incon: {
                    ico1: [],
                    ico2: ['2000-120'],
                    ico3: [],
                    ico4: [],
                }

            },
            {
                id: 1017,
                goods: [
                    { id: 101701, img: "./img/101701.png", color: "初雪水晶", title: "【荣耀官方直供】全国联保,大量现货,当天发货,赠中国荣耀定制壳+限量智能无线蓝牙耳机+原装碎屏险+水凝膜+运费险+2年保修荣耀50pro火爆抢购中", price: 2999 },
                    { id: 101702, img: "./img/101702.jpg", color: "初雪水晶", title: "【荣耀官方直供】全国联保,大量现货,当天发货,赠中国荣耀定制壳+限量智能无线蓝牙耳机+原装碎屏险+水凝膜+运费险+2年保修荣耀50pro火爆抢购中", price: 2699 },
                    { id: 101703, img: "./img/101703.jpg", color: "墨玉青", title: "【荣耀官方直供】全国联保,大量现货,当天发货,赠中国荣耀定制壳+限量智能无线蓝牙耳机+原装碎屏险+水凝膜+运费险+2年保修荣耀50pro火爆抢购中", price: 2699 },
                    { id: 101704, img: "./img/101704.png", color: "墨玉青", title: "【荣耀官方直供】全国联保,大量现货,当天发货,赠中国荣耀定制壳+限量智能无线蓝牙耳机+原装碎屏险+水凝膜+运费险+2年保修荣耀50pro火爆抢购中", price: 2999 },
                    { id: 101705, img: "./img/101705.jpg", color: "亮黑色", title: "【荣耀官方直供】全国联保,大量现货,当天发货,赠中国荣耀定制壳+限量智能无线蓝牙耳机+原装碎屏险+水凝膜+运费险+2年保修荣耀50pro火爆抢购中", price: 2699 },
                ],
                promoteImg: "",
                titleIcon: "flase",
                title: "【荣耀官方直供】全国联保,大量现货,当天发货,赠中国荣耀定制壳+限量智能无线蓝牙耳机+原装碎屏险+水凝膜+运费险+2年保修荣耀50pro火爆抢购中",
                info: [],
                judge: 501,
                shopping: "疆界互联旗舰店",
                shoppingHref: "https://mall.jd.com/index-624094.html?from=pc",
                incon: {
                    ico1: [],
                    ico2: ['京东物流', '秒杀', '赠'],
                    ico3: [],
                    ico4: [],
                }

            },
            {
                id: 1006,
                goods: [
                    { id: 100601, img: "./img/100601.jpg", color: "red", title: "【365天无忧换新】自营旗舰店!新品电信机来袭!国际大牌,低辐射,经久耐用,老年手机,超长待机,防滑机身,防尘按键,高亮手电,收音机/MP3娱乐》戳我看特价手机", price: 175 },
                    { id: 100602, img: "./img/100602.jpg", color: "red", title: "【365天无忧换新】自营旗舰店!新品电信机来袭!国际大牌,低辐射,经久耐用,老年手机,超长待机,防滑机身,防尘按键,高亮手电,收音机/MP3娱乐》戳我看特价手机", price: 175 },

                ],
                promoteImg: "",
                titleIcon: false,
                title: "飞利浦(PHILIPS)E109C 陨石黑 防尘 直板按键老人机 电信  老人手机 学生备用老年功能手机 儿童手机",
                info: ["2GB以下运存", "8GB以下"],
                judge: 50000,
                shopping: "飞利浦手机京东自营旗舰店",
                shoppingHref: "//mall.jd.com/index-1000013926.html?from=pc",
                icon: {
                    icon1: ["自营"],//红底白字
                    icon2: ["秒杀", "赠"],//白底红字
                    icon3: [],//绿底白字
                    icon4: [],//白底蓝字
                }
            },
            {
                id: 1007,
                goods: [
                    { id: 100701, img: "./img/100701.jpg", color: "red", title: "", price: 158 },
                ],
                promoteImg: "",
                titleIcon: false,
                title: "飞利浦(PHILIPS)E209 炫舞红  老人手机 移动/联通2G 超长待机 老年机大字大声学生备用功能机",
                info: [""],
                judge: 10000,
                shopping: "飞利浦手机京东自营旗舰店",
                shoppingHref: "//mall.jd.com/index-1000013926.html?from=pc",
                icon: {
                    icon1: ["自营"],//红底白字
                    icon2: [],//白底红字
                    icon3: [],//绿底白字
                    icon4: [],//白底蓝字
                }
            },
            {
                id: 1008,
                goods: [
                    { id: 100801, img: "./img/100801.jpg", color: "red", title: "Apple iPhone苹果12【24期免息可选】5G全网通 黑色 128G(直播专属)", price: 5999 },
                    { id: 100802, img: "./img/100802.jpg", color: "red", title: "Apple iPhone苹果12【24期免息可选】5G全网通 黑色 128G(直播专属)", price: 5999 },
                    { id: 100803, img: "./img/100803.jpg", color: "red", title: "Apple iPhone苹果12【24期免息可选】5G全网通 黑色 128G(直播专属)", price: 6459 },
                    { id: 100804, img: "./img/100804.jpg", color: "red", title: "Apple iPhone苹果12【24期免息可选】5G全网通 黑色 128G(直播专属)", price: 7079 },
                    { id: 100805, img: "./img/100805.jpg", color: "red", title: "Apple iPhone苹果12【24期免息可选】5G全网通 黑色 128G(直播专属)", price: 6089 },

                ],
                promoteImg: "",
                titleIcon: false,
                title: "Apple iPhone苹果12【24期免息可选】5G全网通 黑色 128G(直播专属)",
                info: [""],
                judge: 5000,
                shopping: "京联通达旗舰店",
                shoppingHref: "//mall.jd.com/index-643828.html?from=pc",
                icon: {
                    icon1: [""],//红底白字
                    icon2: ["免邮"],//白底红字
                    icon3: [],//绿底白字
                    icon4: [],//白底蓝字
                }
            },
            {
                id: 1009,
                goods: [
                    { id: 100901, img: "./img/100901.jpg", color: "red", title: "护眼无蓝光,阅读更轻松!细致视觉体验!【TOUCH新配色登场】点击购买", price: 1999 },
                    { id: 100902, img: "./img/100902.jpg", color: "red", title: "护眼无蓝光,阅读更轻松!细致视觉体验!【TOUCH新配色登场】点击购买", price: 1999 },
                ],
                promoteImg: "./img/1009promoteImg.png|下单立减50|7.13-7.13",
                titleIcon: false,
                title: "海信(Hisense)A7 阅读手机A7 6.7英寸水墨屏 电纸书阅读器 6GB+128GB 全网通5G手机 曜石黑",
                info: ["6GB运存", "128GB"],
                judge: 10000,
                shopping: "海信手机京东自营旗舰店",
                shoppingHref: "/mall.jd.com/index-1000001978.html?from=pc",
                icon: {
                    icon1: ["自营"],//红底白字
                    icon2: [],//白底红字
                    icon3: [],//绿底白字
                    icon4: [],//白底蓝字
                }
            },
            {
                id: 1010,
                goods: [
                    { id: 101001, img: "./img/101001.jpg", color: "red", title: "【用坏直接换新】送运费险,整点报时,支持一键拨号,来电报号8个亲情号码,一键手电筒", price: 78 },
                    { id: 101002, img: "./img/101002.jpg", color: "red", title: "【用坏直接换新】送运费险,整点报时,支持一键拨号,来电报号8个亲情号码,一键手电筒", price: 78 },
                    { id: 101003, img: "./img/101003.jpg", color: "red", title: "【用坏直接换新】送运费险,整点报时,支持一键拨号,来电报号8个亲情号码,一键手电筒", price: 155 },
                    { id: 101004, img: "./img/101004.jpg", color: "red", title: "【用坏直接换新】送运费险,整点报时,支持一键拨号,来电报号8个亲情号码,一键手电筒", price: 109 },
                    { id: 101005, img: "./img/101005.jpg", color: "red", title: "【用坏直接换新】送运费险,整点报时,支持一键拨号,来电报号8个亲情号码,一键手电筒", price: 109 },
                    { id: 101006, img: "./img/101006.jpg", color: "red", title: "【用坏直接换新】送运费险,整点报时,支持一键拨号,来电报号8个亲情号码,一键手电筒", price: 155 },
                ],
                promoteImg: "./img/10010promoteImg.jpg|限时抢 一年以换代修|7.19-7.19",
                titleIcon: false,
                title: "纽曼(Newman)T11全网通4G三防老人手机移动联通电信按键电霸老年机大声音大字体抗摔 持久续航 黑金色【移动版】",
                info: ["2GB以下运存", "8GB以下"],
                judge: 20000,
                shopping: "纽曼手机旗舰店",
                shoppingHref: "//mall.jd.com/index-826177.html?from=pc",
                icon: {
                    icon1: [""],//红底白字
                    icon2: ["秒杀", "免邮"],//白底红字
                    icon3: [],//绿底白字
                    icon4: [],//白底蓝字
                }
            },
            {
                id: 1011,
                goods: [
                    { id: 101101, img: "img/101101.jpg", color: "black", title: "【JD自营】【3年只换不修】高端钢琴烤漆/祥云中框/震撼双超大喇叭/超长待机/双侧快捷键/2.5D大屏/全语音王/10个亲情号/大图大字大按键/购买红色", price: 199.00 },

                ],
                promoteImg: "",
                titleIcon: false,
                title: "天语(K-Touch)N1 4G老人手机全网通",
                info: [],
                judge: 10000,
                shopping: "天语手机京东自营官方旗舰店",
                shoppingHref: "//mall.jd.com/index-1000089003.html?from=pc",
                icon: {
                    icon1: ["自营"],//红底白字
                    icon2: ["秒杀", "赠"],//白底红字
                    icon3: [],//绿底白字
                    icon4: [],//白底蓝字



                }
            },

            {
                id: 1012,
                goods: [
                    { id: 101201, img: "img/101201.jpg", color: "red", title: "【自营】/早上买下午到/移动联通电信都能使用/翻盖接听/双电2600毫安/送长辈倍有面/购买黑色", price: 279.00 },
                    { id: 101202, img: "img/101202.jpg", color: "black", title: "【自营】/早上买下午到/移动联通电信都能使用/翻盖接听/双电2600毫安/送长辈倍有面/购买黑色", price: 279.00 }

                ],
                promoteImg: "",
                titleIcon: false,
                title: "天语(K-Touch)L660+ 全网通4G翻盖老人手机移动联通电信三网老人机超长待机备用功能老年手机 魅力红",
                info: ["2GB以下运存", "8GB以下"],
                judge: 10000,
                shopping: "天语手机京东自营官方旗舰店",
                shoppingHref: "//mall.jd.com/index-1000089003.html?from=pc?",
                icon: {
                    icon1: ["自营"],//红底白字
                    icon2: ["赠"],//白底红字
                    icon3: [],//绿底白字
                    icon4: [],//白底蓝字



                }
            }, {
                id: 1013,
                goods: [
                    { id: 101301, img: "img/101301.jpg", color: "white", title: "【JD自营】【3年只换不修】高端钢琴烤漆/祥云中框/震撼双超大喇叭/超长待机/双侧快捷键/2.5D大屏/全语音王/10个亲情号/大图大字大按键/购买红色", price: 799.00 },

                ],
                promoteImg: "",
                titleIcon: false,
                title: "金立 Gionee M15Pro全网通4G超长待机6.5英寸水滴屏双卡双待老人学生智能手机 梦幻蓝 4GB+128GB",
                info: [],
                judge: 5000,
                shopping: "极客小酷旗舰店",
                shoppingHref: "//mall.jd.com/index-10137621.html?from=pc",
                icon1: [],//红底白字
                icon2: [],//白底红字
                icon3: [],//绿底白字
                icon4: [],//白底蓝字
            },
            {
                id: 1014,
                goods: [
                    { id: 101401, img: "img/101401.jpg", color: "black", title: "【华为直供,全国联保1年,咨询客服送店铺延保1年,影视VIP】5G优畅享20", price: 5899.00 },
                    { id: 101402, img: "img/101402.jpg", color: "black", title: "【华为直供,全国联保1年,咨询客服送店铺延保1年,影视VIP】5G优畅享20", price: 5899.00 },
                    { id: 101403, img: "img/101403.jpg", color: "black", title: "【华为直供,全国联保1年,咨询客服送店铺延保1年,影视VIP】5G优畅享20", price: 5899.00 },

                ],
                promoteImg: "",
                titleIcon: false,
                title: "华为mate40 5G手机 现货速发【支持鸿蒙HarmonyOs】 亮黑色 全网通(8GB+128GB) 碎屏险无线充套装",
                info: [],
                judge: 5000,
                shopping: "京联通达旗舰店",
                shoppingHref: "//item.jd.com/10025464286659.html?from=pc",
                icon: {
                    icon1: [],//红底白字
                    icon2: ["免邮", "赠"],//白底红字
                    icon3: [],//绿底白字
                    icon4: [],//白底蓝字


                }
            },
            {
                id: 1015,
                goods: [
                    { id: 101501, img: "img/101501.jpg", color: "black", title: "OPPOK9套装今日秒杀直降130元至1869!+套装赠199元蓝牙音箱!+晒单赢20元京东E卡!65W超级闪充丨高通骁龙768G丨立即抢购", price: 1299.00 },
                    { id: 101502, img: "img/101502.jpg", color: "black", title: "OPPOK9套装今日秒杀直降130元至1869!+套装赠199元蓝牙音箱!+晒单赢20元京东E卡!65W超级闪充丨高通骁龙768G丨立即抢购", price: 1299.00 },
                    { id: 101503, img: "img/101503.jpg", color: "black", title: "OPPOK9套装今日秒杀直降130元至1869!+套装赠199元蓝牙音箱!+晒单赢20元京东E卡!65W超级闪充丨高通骁龙768G丨立即抢购", price: 1299.00 },
                    { id: 101504, img: "img/101504.jpg", color: "black", title: "OPPOK9套装今日秒杀直降130元至1869!+套装赠199元蓝牙音箱!+晒单赢20元京东E卡!65W超级闪充丨高通骁龙768G丨立即抢购", price: 1299.00 },
                    { id: 101505, img: "img/101505.jpg", color: "black", title: "OPPOK9套装今日秒杀直降130元至1869!+套装赠199元蓝牙音箱!+晒单赢20元京东E卡!65W超级闪充丨高通骁龙768G丨立即抢购", price: 1299.00 },
                    { id: 101506, img: "img/101506.jpg", color: "black", title: "OPPOK9套装今日秒杀直降130元至1869!+套装赠199元蓝牙音箱!+晒单赢20元京东E卡!65W超级闪充丨高通骁龙768G丨立即抢购", price: 1299.00 },

                ],
                promoteImg: "./img/1015-promote.png |赠199元蓝牙音箱!7.13-7.13",
                titleIcon: false,
                title: "【套装秒杀至高降130赠好礼!】OPPO K7x 5G新品手机90Hz电竞屏拍照游戏智能手机超级闪充 云之彼端套装 6GB+128GB",
                info: ["6GB运行", "128GB"],
                judge: 20000,
                shopping: "OPPO官方直营旗舰店",
                shoppingHref: "//mall.jd.com/index-793730.html?from=pc",
                icon: {
                    icon1: [],//红底白字
                    icon2: ["京东物流", "秒杀", "赠"],//白底红字
                    icon3: [],//绿底白字
                    icon4: [],//白底蓝字
                }
            },
            {
                id: 1018,
                goods: [
                    { id: 101801, img: "./img/101801.jpg", color: "冲浪蓝孩", title: "爆品火热销售中!至高立省200元,到手价1149起!入会领10元优惠券!晒单赠10元红包!Q3系列新品全速来袭!", price: 1399 },
                    { id: 101802, img: "./img/101802.jpg.jpg", color: "银翼少年", title: "爆品火热销售中!至高立省200元,到手价1149起!入会领10元优惠券!晒单赠10元红包!Q3系列新品全速来袭!", price: 1149 },
                    { id: 101803, img: "./img/101803.jpg.jpg", color: "银翼少年", title: "爆品火热销售中!至高立省200元,到手价1149起!入会领10元优惠券!晒单赠10元红包!Q3系列新品全速来袭!", price: 1399 },
                ],
                promoteImg: "./img/1018promote.png|限时立省200元 7.13-7.13",
                titleIcon: "flase",
                title: "realme 真我Q2 4800万像素 120Hz畅速屏 双5G天玑800U 学生潮玩手机 冲浪蓝孩",
                info: [],
                judge: 20001,
                shopping: "realme真我官方旗舰店",
                shoppingHref: "https://mall.jd.com/index-10099699.html?from=pc",
                incon: {
                    ico1: [],
                    ico2: ['免邮', '劵39-10', '满1000-200'],
                    ico3: [],
                    ico4: [],
                }

            },
            {
                id: 1019,
                goods: [
                    { id: 101901, img: "./img/101901.jpg", color: "黑镜", title: "", price: 2649 },
                ],
                promoteImg: "",
                titleIcon: "flase",
                title: "vivo X50 Pro 5G手机 vivo二手手机 60倍变焦 90Hz 黑镜 8G+256G ",
                info: [],
                judge: 1000001,
                shopping: "拍拍严选官方旗舰店",
                shoppingHref: "https://mall.jd.com/index-10180819.html?from=pc",
                incon: {
                    ico1: [],
                    ico2: [],
                    ico3: [],
                    ico4: [],
                }

            },
            {
                id: 1020,
                goods: [
                    { id: 102001, img: "./img/102001.jpg", color: "晴空蓝", title: "购机补贴,合约立减,移动老用户和电信新用户下单就可享受优惠直降;电信成都,深圳,广州,东莞,杭州,温州,济南,南京,芜湖支持专人上门服务,更多城市即将上线", price: 599 },
                ],
                promoteImg: "",
                titleIcon: "flase",
                title: "Redmi 9A 5000mAh大电量 大屏幕大字体大音量 1300万AI相机 八核处理器 人脸解锁 4GB+64GB 晴空蓝 游戏智能手机 小米 红米",
                info: [],
                judge: 200001,
                shopping: "小米京东自营旗舰店",
                shoppingHref: "https://mall.jd.com/index-1000004123.html?from=pc",
                incon: {
                    icon1: ['自营'],
                    ico2: [],
                    ico3: [],
                    ico4: [],
                }

            },
            {
                goods: [
                    { id: 102101, img: "./img/102101.jpg", color: "摩卡金", title: "【365天无忧换新】更大的2.8英寸屏!时尚设计,超大按键,百年国际品牌!一年只换不修!内外双屏,翻盖接听!大字体,大音量,语音播报,一键拨号!》戳我看典雅黑色", price: 249.00 },
                ],
                id: 1021,
                promoteImg: "",
                titleIcon: false,
                title: "飞利浦(PHILIPS)E219 摩卡金 翻盖老年手机 移动联通2G 双卡双待 老人手机 学生备用功能机 商务机 儿童机",
                info: ["2GB以下运存", "8GB以下"],
                judge: 20000,
                shopping: "飞利浦手机京东自营旗舰店",
                shoppingHref: "mall.jd.com/index-1000013926.html?from=pc",
                icon: {
                    icon1: ["自营"],
                    icon2: ["秒杀", "赠"],
                    icon3: [],
                    icon4: [],
                }
            },
            {
                goods: [
                    { id: 102201, img: "./img/102201.jpg", color: "曙光", title: "【7.13A95限时优惠200元到手价1799元|享6期免息丨店铺会员限时赠耳机|上手无忧】【OPPOK9限时优惠100元】立即点击", price: 1999.00 },
                    { id: 102202, img: "./img/102202.jpg", color: "炫黑", title: "【7.13A95限时优惠200元到手价1799元|享6期免息丨店铺会员限时赠耳机|上手无忧】【OPPOK9限时优惠100元】立即点击", price: 1999.00 },
                    { id: 102203, img: "./img/102203.jpg", color: "雅银", title: "【7.13A95限时优惠200元到手价1799元|享6期免息丨店铺会员限时赠耳机|上手无忧】【OPPOK9限时优惠100元】立即点击", price: 1999.00 },
                ],
                id: 1022,
                promoteImg: "./img/1022promote_img.png | 优惠200元丨6期免息",
                titleIcon: false,
                title: "OPPO A95 8+128GB 雅银 双模5G 4300mAh大电池 30W疾速快充 OLED超清护眼屏 4800万三摄 全面屏轻薄拍照手机",
                info: ["8GB运存", "128GB"],
                judge: 5000,
                shopping: "OPPO京东自营官方旗舰店",
                shoppingHref: "mall.jd.com/index-1000004065.html?from=pc",
                icon: {
                    icon1: ["自营"],
                    icon2: ["秒杀", "券880-200"],
                    icon3: ["新品"],
                    icon4: [],
                }
            },
            {
                goods: [
                    { id: 102301, img: "./img/102301.jpg", color: "黑色", title: "【用坏免费换】电话本报名字,读短信,强光手电,收音机,4000毫安电池超长待机,亲情号", price: 158.00 },
                    { id: 102302, img: "./img/102302.jpg", color: "红色", title: "【用坏免费换】电话本报名字,读短信,强光手电,收音机,4000毫安电池超长待机,亲情号", price: 158.00 },
                ],
                id: 1023,
                promoteImg: "",
                titleIcon: false,
                title: "金立(Gionee)L9+移动联通电信版老人手机大字大声大音量 4G全网通老年手机直板按键备用机 红色 移动版【用坏免费换】",
                info: [],
                judge: 10000,
                shopping: "弗瑞尔手机通讯专营店",
                shoppingHref: "mall.jd.com/index-10022819.html?from=pc",
                icon: {
                    icon1: [],
                    icon2: ["免邮"],
                    icon3: [],
                    icon4: [],
                }
            },
            {
                goods: [
                    { id: 102401, img: "./img/102401.jpg", color: "砂石黑", title: "【下单赠壳膜套装】5000mAh大电量,大屏幕大字体大音量,1300万AI相机,八核处理器抢爆品荣耀Play3e", price: 599.00 },
                    { id: 102402, img: "./img/102402.jpg", color: "晴空蓝", title: "【下单赠壳膜套装】5000mAh大电量,大屏幕大字体大音量,1300万AI相机,八核处理器抢爆品荣耀Play3e", price: 599.00 },
                    { id: 102403, img: "./img/102403.jpg", color: "湖光绿", title: "【下单赠壳膜套装】5000mAh大电量,大屏幕大字体大音量,1300万AI相机,八核处理器抢爆品荣耀Play3e", price: 599.00 },
                ],
                id: 1024,
                promoteImg: "",
                titleIcon: false,
                title: "小米红米Redmi 9A 手机 5000mAh大电量 大屏幕大字体大音量1300万AI相机八核处理器 湖光绿 4GB+64GB",
                info: ["4GB运存", "64GB"],
                judge: 10000,
                shopping: "伟德手机专营店",
                shoppingHref: "//mall.jd.com/index-652270.html?from=pc",
                icon: {
                    icon1: [],
                    icon2: ["京东物流", "免邮", "满599-15", "赠"],
                    icon3: [],
                    icon4: [],
                }
            },
            {
                goods: [
                    { id: 102501, img: "./img/102501.jpg", color: "月魄", title: "", price: 1749.00 },
                ],
                id: 1025,
                promoteImg: "",
                titleIcon: false,
                title: "【白条12期免息】小米 红米note10pro 5G游戏手机 全网通 月魄 6GB+128GB【12期免息】送碎屏险",
                info: ["2GB以下运存", "8GB以下"],
                judge: 100,
                shopping: "千瑞达手机旗舰店",
                shoppingHref: "mall.jd.com/index-750688.html?from=pc",
                icon: {
                    icon1: [],
                    icon2: [],
                    icon3: [],
                    icon4: [],
                }
            }
        ]

        import Goods from "./js/Goods.js";

        arr.forEach(item => {
            var goods = new Goods()
            goods.setData(item)
            goods.appendTo("body");
        })
Time MSD 0.1000 0.0007 0.2000 0.0052 0.3000 0.0161 0.4000 0.0344 0.5000 0.0612 0.6000 0.0981 0.7000 0.1462 0.8000 0.2051 0.9000 0.2740 1.0000 0.3522 1.1000 0.4413 1.2000 0.5402 1.3000 0.6472 1.4000 0.7655 1.5000 0.8895 1.6000 1.0202 1.7000 1.1569 1.8000 1.3019 1.9000 1.4511 2.0000 1.6065 2.1000 1.7665 2.2000 1.9339 2.3000 2.1023 2.4000 2.2745 2.5000 2.4490 2.6000 2.6243 2.7000 2.7992 2.8000 2.9742 2.9000 3.1503 3.0000 3.3235 3.1000 3.4924 3.2000 3.6564 3.3000 3.8215 3.4000 3.9883 3.5000 4.1609 3.6000 4.3422 3.7000 4.5293 3.8000 4.7219 3.9000 4.9180 4.0000 5.1145 4.1000 5.3136 4.2000 5.5161 4.3000 5.7182 4.4000 5.9165 4.5000 6.1065 4.6000 6.2890 4.7000 6.4669 4.8000 6.6494 4.9000 6.8353 5.0000 7.0139 5.1000 7.1955 5.2000 7.3665 5.3000 7.5357 5.4000 7.6976 5.5000 7.8693 5.6000 8.0357 5.7000 8.1936 5.8000 8.3581 5.9000 8.5307 6.0000 8.7164 6.1000 8.8949 6.2000 9.0790 6.3000 9.2709 6.4000 9.4767 6.5000 9.6745 6.6000 9.8873 6.7000 10.0937 6.8000 10.2977 6.9000 10.4947 7.0000 10.6990 7.1000 10.8892 7.2000 11.0713 7.3000 11.2421 7.4000 11.4127 7.5000 11.5861 7.6000 11.7653 7.7000 11.9367 7.8000 12.1064 7.9000 12.2809 8.0000 12.4421 8.1000 12.5969 8.2000 12.7500 8.3000 12.9077 8.4000 13.0805 8.5000 13.2577 8.6000 13.4328 8.7000 13.6095 8.8000 13.7870 8.9000 13.9707 9.0000 14.1656 9.1000 14.3757 9.2000 14.5928 9.3000 14.8054 9.4000 15.0087 9.5000 15.2112 9.6000 15.4158 9.7000 15.6229 9.8000 15.8409 9.9000 16.0613 10.0000 16.2792 10.1000 16.4884 10.2000 16.7069 10.3000 16.9281 10.4000 17.1597 10.5000 17.3799 10.6000 17.5943 10.7000 17.8016 10.8000 18.0167 10.9000 18.2278 11.0000 18.4312 11.1000 18.6422 11.2000 18.8473 11.3000 19.0549 11.4000 19.2711 11.5000 19.4861 11.6000 19.7077 11.7000 19.9348 11.8000 20.1718 11.9000 20.4115 12.0000 20.6456 12.1000 20.8738 12.2000 21.1028 12.3000 21.3382 12.4000 21.5604 12.5000 21.7672 12.6000 21.9742 12.7000 22.1906 12.8000 22.4147 12.9000 22.6573 13.0000 22.9024 13.1000 23.1306 13.2000 23.3686 13.3000 23.5968 13.4000 23.8155 13.5000 24.0288 13.6000 24.2456 13.7000 24.4685 13.8000 24.6920 13.9000 24.9054 14.0000 25.1089 14.1000 25.3161 14.2000 25.5430 14.3000 25.7766 14.4000 26.0119 14.5000 26.2296 14.6000 26.4403 14.7000 26.6675 14.8000 26.8983 14.9000 27.1341 15.0000 27.3408 15.1000 27.5426 15.2000 27.7589 15.3000 27.9816 15.4000 28.1987 15.5000 28.4093 15.6000 28.6084 15.7000 28.8099 15.8000 29.0112 15.9000 29.2055 16.0000 29.4042 16.1000 29.5972 16.2000 29.7749 16.3000 29.9469 16.4000 30.1202 16.5000 30.3038 16.6000 30.4875 16.7000 30.6747 16.8000 30.8628 16.9000 31.0357 17.0000 31.2302 17.1000 31.4237 17.2000 31.5966 17.3000 31.7672 17.4000 31.9304 17.5000 32.0861 17.6000 32.2455 17.7000 32.4099 17.8000 32.5934 17.9000 32.7677 18.0000 32.9508 18.1000 33.1493 18.2000 33.3413 18.3000 33.5173 18.4000 33.6794 18.5000 33.8410 18.6000 33.9973 18.7000 34.1577 18.8000 34.3164 18.9000 34.4693 19.0000 34.6325 19.1000 34.7858 19.2000 34.9612 19.3000 35.1327 19.4000 35.3184 19.5000 35.5056 19.6000 35.7040 19.7000 35.9186 19.8000 36.1294 19.9000 36.3372 20.0000 36.5221 20.1000 36.7003 20.2000 36.8794 20.3000 37.0456 20.4000 37.2216 20.5000 37.4183 20.6000 37.6248 20.7000 37.8155 20.8000 38.0096 20.9000 38.2125 21.0000 38.4092 21.1000 38.5905 21.2000 38.7719 21.3000 38.9397 21.4000 39.0912 21.5000 39.2384 21.6000 39.4052 21.7000 39.5585 21.8000 39.7083 21.9000 39.8707 22.0000 40.0477 22.1000 40.2381 22.2000 40.4349 22.3000 40.6567 22.4000 40.8940 22.5000 41.1359 22.6000 41.3807 22.7000 41.6030 22.8000 41.8254 22.9000 42.0394 23.0000 42.2583 23.1000 42.4660 23.2000 42.6497 23.3000 42.8033 23.4000 42.9344 23.5000 43.0300 23.6000 43.1275 23.7000 43.2423 23.8000 43.3750 23.9000 43.5124 24.0000 43.6484 24.1000 43.8063 24.2000 43.9705 24.3000 44.1288 24.4000 44.2786 24.5000 44.4323 24.6000 44.5779 24.7000 44.7240 24.8000 44.8428 24.9000 44.9628 25.0000 45.0722 25.1000 45.1876 25.2000 45.3072 25.3000 45.4548 25.4000 45.6319 25.5000 45.8253 25.6000 46.0181 25.7000 46.2160 25.8000 46.4060 25.9000 46.6281 26.0000 46.8584 26.1000 47.0767 26.2000 47.3055 26.3000 47.5587 26.4000 47.7988 26.5000 48.0413 26.6000 48.2728 26.7000 48.4843 26.8000 48.6959 26.9000 48.9154 27.0000 49.1330 27.1000 49.3591 27.2000 49.5920 27.3000 49.8000 27.4000 50.0100 27.5000 50.2216 27.6000 50.4390 27.7000 50.6536 27.8000 50.8718 27.9000 51.0839 28.0000 51.2906 28.1000 51.5032 28.2000 51.7141 28.3000 51.9303 28.4000 52.1630 28.5000 52.3907 28.6000 52.6227 28.7000 52.8505 28.8000 53.0726 28.9000 53.2820 29.0000 53.4928 29.1000 53.7317 29.2000 53.9865 29.3000 54.2422 29.4000 54.5035 29.5000 54.7299 29.6000 54.9486 29.7000 55.1778 29.8000 55.4138 29.9000 55.6611 30.0000 55.9083 30.1000 56.1616 30.2000 56.4019 30.3000 56.6467 30.4000 56.8634 30.5000 57.0783 30.6000 57.3083 30.7000 57.5109 30.8000 57.7191 30.9000 57.9186 31.0000 58.1164 31.1000 58.3176 31.2000 58.5178 31.3000 58.6712 31.4000 58.7930 31.5000 58.9350 31.6000 59.0683 31.7000 59.2182 31.8000 59.3735 31.9000 59.5392 32.0000 59.7660 32.1000 60.0161 32.2000 60.2566 32.3000 60.4784 32.4000 60.7062 32.5000 60.9317 32.6000 61.1478 32.7000 61.3634 32.8000 61.5992 32.9000 61.8193 33.0000 62.0339 33.1000 62.2489 33.2000 62.4558 33.3000 62.6404 33.4000 62.8472 33.5000 63.0493 33.6000 63.2468 33.7000 63.4534 33.8000 63.7137 33.9000 63.9815 34.0000 64.2508 34.1000 64.5167 34.2000 64.7659 34.3000 64.9972 34.4000 65.2012 34.5000 65.4264 34.6000 65.6350 34.7000 65.8472 34.8000 66.0726 34.9000 66.2707 35.0000 66.4538 35.1000 66.6282 35.2000 66.8029 35.3000 66.9753 35.4000 67.1839 35.5000 67.3992 35.6000 67.6158 35.7000 67.8224 35.8000 68.0254 35.9000 68.2226 36.0000 68.3980 36.1000 68.5662 36.2000 68.7037 36.3000 68.8288 36.4000 68.9856 36.5000 69.1565 36.6000 69.3249 36.7000 69.5085 36.8000 69.7108 36.9000 69.9236 37.0000 70.1437 37.1000 70.3577 37.2000 70.5753 37.3000 70.7950 37.4000 71.0357 37.5000 71.2749 37.6000 71.4946 37.7000 71.6967 37.8000 71.8818 37.9000 72.0717 38.0000 72.2574 38.1000 72.4630 38.2000 72.6685 38.3000 72.8839 38.4000 73.0776 38.5000 73.2773 38.6000 73.4523 38.7000 73.6047 38.8000 73.7467 38.9000 73.8902 39.0000 74.0408 39.1000 74.2142 39.2000 74.3876 39.3000 74.5754 39.4000 74.7543 39.5000 74.9262 39.6000 75.0885 39.7000 75.2441 39.8000 75.3721 39.9000 75.4950 40.0000 75.6337 40.1000 75.7774 40.2000 75.9485 40.3000 76.1032 40.4000 76.2785 40.5000 76.4648 40.6000 76.6478 40.7000 76.8314 40.8000 76.9985 40.9000 77.1142 41.0000 77.1951 41.1000 77.2956 41.2000 77.4310 41.3000 77.5649 41.4000 77.7060 41.5000 77.8677 41.6000 78.0370 41.7000 78.2319 41.8000 78.4260 41.9000 78.6282 42.0000 78.8563 42.1000 79.0862 42.2000 79.3262 42.3000 79.5950 42.4000 79.8511 42.5000 80.1010 42.6000 80.3622 42.7000 80.6600 42.8000 80.9513 42.9000 81.2325 43.0000 81.4738 43.1000 81.6967 43.2000 81.9023 43.3000 82.1028 43.4000 82.3203 43.5000 82.5555 43.6000 82.7908 43.7000 83.0380 43.8000 83.2510 43.9000 83.4103 44.0000 83.5339 44.1000 83.6894 44.2000 83.8658 44.3000 84.0371 44.4000 84.2065 44.5000 84.3768 44.6000 84.5422 44.7000 84.7294 44.8000 84.9368 44.9000 85.1527 45.0000 85.3430 45.1000 85.5481 45.2000 85.7435 45.3000 85.9552 45.4000 86.1734 45.5000 86.3845 45.6000 86.5998 45.7000 86.8311 45.8000 87.0682 45.9000 87.3396 46.0000 87.6200 46.1000 87.8730 46.2000 88.1389 46.3000 88.4299 46.4000 88.7276 46.5000 89.0107 46.6000 89.2747 46.7000 89.5425 46.8000 89.8276 46.9000 90.0850 47.0000 90.3194 47.1000 90.5501 47.2000 90.7493 47.3000 90.9430 47.4000 91.1252 47.5000 91.3406 47.6000 91.5781 47.7000 91.7732 47.8000 91.9042 47.9000 92.0455 48.0000 92.2412 48.1000 92.4494 48.2000 92.6496 48.3000 92.8476 48.4000 93.0298 48.5000 93.2282 48.6000 93.4224 48.7000 93.6184 48.8000 93.8378 48.9000 94.0401 49.0000 94.2455 49.1000 94.4590 49.2000 94.6879 49.3000 94.9349 49.4000 95.1759 49.5000 95.3997 49.6000 95.6181 49.7000 95.8687 49.8000 96.1301 49.9000 96.3940 50.0000 96.6949 Diffusion coefficient D = 0.940008 Fortran Pause - Enter command or to continue. 写matlab代码,完成以下任务:(1):Observe the diffusion of the particles(by distribution of particles along thre axis),(2):Compute the diffusion coefficient D <x**2>=2Dt (3):How does diffusion coefficient D depend on the number of particle N,不要调用文件了,数据直接按照我给你的复制粘贴上去
最新发布
11-02
刷机是一项需要谨慎操作的任务,不当的操作可能会导致设备变砖或失去保修。以下是针对荣耀X50手机的刷机教程,适用于希望进行官方或第三方ROM升级的用户。 ### 准备工作 在开始刷机之前,确保完成以下准备工作: 1. **备份数据**:刷机会清除手机上的所有数据,请提前备份重要文件、联系人和照片。 2. **电量充足**:确保手机电量在80%以上,避免刷机过程中因电量不足导致失败。 3. **下载工具与ROM**: - 下载适用于荣耀X50的刷机工具,如**华为手机助手**(HiSuite)或第三方工具如**TWRP Recovery**和**Magisk**。 - 下载官方ROM或第三方ROM(如LineageOS),并确保其适用于荣耀X50的型号。 ### 方法一:使用华为手机助手(HiSuite)进行官方刷机 1. **连接电脑**:使用USB数据线将荣耀X50连接到电脑,并确保电脑上已安装好华为手机助手。 2. **进入恢复模式**: - 关闭手机电源。 - 按住**音量上键 + 电源键**,直到出现华为Logo后松开,进入Recovery模式。 3. **使用HiSuite刷机**: - 打开华为手机助手,选择“升级”或“刷机”选项。 - 选择下载好的官方ROM包,点击“开始刷机”。 - 等待刷机过程完成,期间不要断开手机连接。 4. **重启手机**:刷机完成后,手机会自动重启。首次启动可能需要几分钟时间。 ### 方法二:使用TWRP Recovery刷入第三方ROM 1. **解锁Bootloader**: - 在手机开发者选项中启用**OEM解锁**。 - 使用ADB命令解锁Bootloader(需安装ADB工具包)。 2. **安装TWRP Recovery**: - 下载适用于荣耀X50的TWRP Recovery镜像文件。 - 使用Fastboot命令刷入TWRP Recovery: ```bash fastboot flash recovery twrp.img ``` 3. **刷入第三方ROM**: - 将下载好的第三方ROM和GApps包复制到手机存储中。 - 进入TWRP Recovery模式,选择“Wipe”清除数据。 - 选择“Install”,找到ROM文件进行刷入。 - 如果需要,再刷入GApps包以获取Google服务。 4. **重启系统**:刷机完成后,选择“Reboot System”重启手机。 ### 注意事项 - **账号绑定**:如果手机绑定了华为账号,请确保在刷机前解绑,否则可能导致激活失败[^1]。 - **保修问题**:刷机会导致官方保修失效,请谨慎操作。 - **风险提示**:刷入第三方ROM可能存在兼容性问题或安全风险,建议选择信誉良好的ROM开发者提供的固件。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜鸟小胖砸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值