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");
})