【小5聊】使用div+css布局绘制32支球队比赛对阵图，拭目以待冠军花落谁家

• 花匠小妙招
• 2024-08-21 23:39

虽然不是狂爱足球爱好者，但多少会有关注下，像梅西和C罗是经常听到的

可能是没有我们队的原因，关注会比较少，只看个结果，所以

趁着这次机会，通过js前端技术div+css布局方式绘制本次世界杯足球比赛对阵图

世界杯圆满结束，祝贺阿根廷梅西夺冠，预测成功

2022年12月04日 14:23:59 预测冠军图，让我们为梅西圆梦吧

2022年卡塔尔世界杯是第二十二届世界杯足球赛，当地时间 2022年11月20日 至 2022年12月18日

一、足球信息

可能有些小伙伴对足球一些信息不太了解，下面将简单说下足球世界杯相关信息

1、32强分组

1）通过六大赛区预选赛产生32支球队，各个赛区名额不同

2）东道主，不用参与预选赛，所以还有31个名额

3）32强分为8个小组，每个小组固定4支球队，命名A~H组

2、 16强分组

1）每个小组的前2名进入16强

2）分组

A组第一  PK  B组第二，产生胜者1B组第一  PK  A组第二，产生胜者2C组第一  PK D组第二 ，产生胜者3D组第一  PK  C组第二，产生胜者4E组第一  PK  F组第二，产生胜者5F组第一  PK  E组第二，产生胜者6G组第一  PK  H组第二，产生胜者7H组第一  PK  G组第二，产生胜者8

3、8强分组

1）胜者1  PK  胜者3，产生胜者A

2）胜者2  PK 胜者4，产生胜者B

3）胜者5  PK 胜者7，产生胜者C

4）胜者6  PK胜者8，产生胜者D

4、4强分组

1）胜者A  PK  胜者C

2）胜者B  PK  胜者D

5、冠亚军

1）4强中，获胜的两队进入决赛

2）4强中，输的两队争夺第三名

二、编码绘制赛程图

根据上面规则，可通过div+css+js方式布局绘制出对阵比赛图

1、左右两边分组设置4个小组

2、主要以相对布局方式，按一定规律进行排序

个人觉得，通过规则去锻炼自己的布局和编码逻辑也是蛮不错的，还能参与到和世界杯相关活动里，也是一件不错的事情

3、代码优化

刚开始做的时候，可能会写的比较啰嗦，做到后面当代码很多的时候，就可以考虑提取公共部分，从而减少代码量，比如：刚开始代码两是976行，第一次优化还剩425行，节省了1倍多。

优化前

优化后

温馨提示：图片到时会上传到CSDN

完成代码如下

<meta charSet="utf-8" />

<script src="jquery.min.js"></script>

<style type="text/css">

.img-div { width: 36px; height: 24px; border: 1px solid #ccc; position: absolute; }

.img-div .img { width: 100%; height: 100%; }

.img-div .img2 { width: 18px; height: 18px; margin-top: 3px; margin-left: 9px; }

.shadwo { box-shadow: 0 0 13px #ccc; }

.left-group-div { position: absolute; left: -105px; width: 100px; height: 24px; line-height: 24px; font-size: 12px; text-align: right; }

.right-group-div { position: absolute; right: -108px; width: 100px; height: 24px; line-height: 24px; font-size: 12px; }

.left-div { position: absolute; left: 43px; width: 100px; height: 24px; line-height: 24px; font-size: 13px; }

.right-div { position: absolute; right: 43px; width: 100px; height: 24px; line-height: 24px; font-size: 13px; text-align: right; }

.circular-div { position: absolute; top: 300px; left: 800px; width: 0px; height: 200px; border-radius: 200px; border: 2px solid #099dff; }

</style>

<div style="padding: 20px 60px; width: 1600px; height: 630px; margin: 0 auto; margin-top: 30px; box-shadow: 0 0 13px #ccc; ">

<div id="div" style="position: relative;">

</div>

</div>

<div id="inputDiv" style="display:none;">

<input type="hidden" data-group="A组" data-name="塞内加尔" data-src="images/5409f8cd1d7c3d4fc52c3c73d8f4d748.png" />

<input type="hidden" data-group="A组" data-name="荷兰" data-src="images/e449bde913469bca9c7478ec17d2fe6c.png" />

<input type="hidden" data-group="A组" data-name="厄瓜多尔" data-src="images/f7fbe426deae24a394e516e5991c63af.png" />

<input type="hidden" data-group="A组" data-name="卡塔尔" data-src="images/20d6af801cec5aadd82c4da763648daa.png" />

<input type="hidden" data-group="B组" data-name="威尔士" data-src="images/3ad99a9c186a78be12852a2c1e1b0e53.png" />

<input type="hidden" data-group="B组" data-name="英格兰" data-src="images/e80b5eececdfb64fbb50aa0c8c366861.png" />

<input type="hidden" data-group="B组" data-name="伊朗" data-src="images/79bc4fe4b02ad0544af9f2a8fbbe02e1.png" />

<input type="hidden" data-group="B组" data-name="美国" data-src="images/19f0d6e267727f9846559d420a2068a6.png"/>

<input type="hidden" data-group="C组" data-name="波兰" data-src="images/636392ea158aa3afb9c47949364b888e.png" />

<input type="hidden" data-group="C组" data-name="阿根廷" data-src="images/ca4718053280290ad49d44d67ca97743.png" />

<input type="hidden" data-group="C组" data-name="墨西哥" data-src="images/82e8ef2732cf8ea2554fad9a99a712fd.png" />

<input type="hidden" data-group="C组" data-name="沙特" data-src="images/b3b1f269a39ef3b5b1700a854902eb8b.png" />

<input type="hidden" data-group="D组" data-name="突尼斯" data-src="images/5f801ce25d4e64977ff65e297e82c81a.png" />

<input type="hidden" data-group="D组" data-name="法国" data-src="images/cf81fe2ec21bfebf376ca1bfcee07b23.png" />

<input type="hidden" data-group="D组" data-name="澳大利亚" data-src="images/9c6ae919870434634765897f52ca26b1.png" />

<input type="hidden" data-group="D组" data-name="丹麦" data-src="images/e3c72eaf6d6ec0e992035072e762d519.png" />

<input type="hidden" data-group="E组" data-name="日本" data-src="images/aaa5b59dabdb134ef29be5d2606ce759.png" />

<input type="hidden" data-group="E组" data-name="西班牙" data-src="images/423b6f44c2672d58086b04ac39ae15e5.png" />

<input type="hidden" data-group="E组" data-name="哥斯达黎加" data-src="images/e8c90529adf8a4bc6fef5a52fec9149a.png" />

<input type="hidden" data-group="E组" data-name="德国" data-src="images/635f433e3db5cff4f103ef6f79044195.png" />

<input type="hidden" data-group="F组" data-name="克罗地亚" data-src="images/160422fb015875d37b44c1250c25a968.png" />

<input type="hidden" data-group="F组" data-name="加拿大" data-src="images/b57067797fdbe0ebed243460195b2298.png" />

<input type="hidden" data-group="F组" data-name="比利时" data-src="images/794d8863eb276713c481c3398736b06e.png" />

<input type="hidden" data-group="F组" data-name="摩洛哥" data-src="images/06c2200f0d780e6c45fe1b85a35ceca5.png" />

<input type="hidden" data-group="G组" data-name="巴西" data-src="images/b06748a153a355351a271eebbaad33d0.png" />

<input type="hidden" data-group="G组" data-name="喀麦隆" data-src="images/3bebc6f2dad9f027ac176272442ba530.png" />

<input type="hidden" data-group="G组" data-name="瑞士" data-src="images/be6980d6afd68c698d92dd85b00ac35e.png" />

<input type="hidden" data-group="G组" data-name="塞尔维亚" data-src="images/173de8171422a2e07c0a8b7138728133.png" />

<input type="hidden" data-group="H组" data-name="韩国" data-src="images/a6f50eeb6923fc95feb1878d7e9c83c5.png" />

<input type="hidden" data-group="H组" data-name="葡萄牙" data-src="images/823e147f8bde4fef13f26aeeb9d7e691.png" />

<input type="hidden" data-group="H组" data-name="加纳" data-src="images/42a039c1519755b611ba84130284e516.png" />

<input type="hidden" data-group="H组" data-name="乌拉圭" data-src="images/012c08a106961a36b8f740e558bb9c6a.png" />

</div>

<script type="text/javascript">

$(function () {

var line = $('<div class="circular-div"></div>');

line.animate({ width: "200px" }, 5000);

var teamData = {}

$('#inputDiv input').each(function () {

var group = $(this).attr('data-group');

var name = $(this).attr('data-name');

var src = $(this).attr('data-src');

teamData[name] = { group: group, name: name, src: src };

});

var height = 36;

var paddingBottom = 5;

function createDiv(currentName, arrow) {

var div = $('<div></div>');

div.addClass('img-div shadwo');

var data = teamData[currentName];

var group = data != undefined ? data.group : '';

var name = data != undefined ? data.name : currentName;

var src = data != undefined ? data.src : '';

div.append('<div class="' + arrow +'-div">' + name + '</div>');

if (name == "待定") {

div.append('<img class="img2" src="wenhao.png" />');

}

else {

div.append('<div class="' + arrow + '-group-div">' + group + '</div>');

div.append('<img class="img" src="' + src + '" />');

}

return div;

}

function getTop(i, type) {

var top = 0;

if (i == 0) {

top = height + paddingBottom;

}

else if (i == 1) {

top = (i + 1) * height + paddingBottom;

}

else if (i == 2) {

top = (i + 3) * height + (i + 3) * paddingBottom;

}

else if (i == 3) {

top = (i + 3) * height + (i + 2) * paddingBottom;

}

else if (i == 4) {

top = (i + 5) * height + (i + 5) * paddingBottom;

}

else if (i == 5) {

top = (i + 5) * height + (i + 4) * paddingBottom;

}

else if (i == 6) {

top = (i + 7) * height + (i + 7) * paddingBottom;

}

else if (i == 7) {

top = (i + 7) * height + (i + 6) * paddingBottom;

}

if (type == 4) {

if (i == 0) {

top = height + (height + paddingBottom) / 2 + 10;

}

else if (i == 1) {

top = (i + 4) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;

}

else if (i == 2) {

top = (i + 7) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;

}

else if (i == 3) {

top = (i + 10) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;

}

}

return top;

}

var flagArrLeft = ['塞内加尔', '荷兰', '厄瓜多尔', '卡塔尔', '威尔士', '英格兰', '伊朗', '美国', '波兰', '阿根廷', '墨西哥', '沙特', '突尼斯', '法国', '澳大利亚', '丹麦'];

for (var i = 0, j = 0; i < 16; i++) {

var div = createDiv(flagArrLeft[i], "left");

if (i % 4 == 0) {

div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:10px;left:108px;width:10px;height:118px;" />');

if (i > 0) {

j++;

}

}

var top = j * 20;

div.css({ "top": (i * height + paddingBottom + top) + "px", "left": "0px" });

$('#div').append(div);

}

var leftTwoArr = ['荷兰', '塞内加尔', '英格兰', '美国', '阿根廷', '波兰', '法国', '澳大利亚'];

for (var i = 0, j = 0; i < 8; i++) {

var div = createDiv(leftTwoArr[i], "left");

if (i % 2 == 0) {

div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:5px;left:108px;width:5px;height:59px;" />');

j++;

}

var top = getTop(i);

div.css({ "top": top + 3 + "px", "left": "150px" });

$('#div').append(div);

}

var leftThreeArr = ['荷兰', '美国', '阿根廷', '澳大利亚', '日本', '克罗地亚', '巴西', '韩国'];

for (var i = 0, j = 0; i < 8; i++) {

var div = createDiv(leftThreeArr[i], "left", 'time');

if (i % 2 == 0) {

div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:5px;left:108px;width:5px;height:59px;" />');

j++;

}

var top = getTop(i);

div.css({ "top": top + 3 + "px", "left": "300px" });

$('#div').append(div);

}

var leftFourArr = ['荷兰', '阿根廷', '待定', '待定'];

for (var i = 0, j = 0; i < 4; i++) {

var div = createDiv(leftFourArr[i], "left");

if (i % 2 == 0) {

div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:5px;left:108px;width:10px;height:180px;" />');

j++;

}

var top = getTop(i, 4);

div.css({ "top": top + "px", "left": "450px" });

$('#div').append(div);

}

var leftFiveArr = ['待定', '待定']

for (var i = 0; i < 2; i++) {

var div = createDiv(leftFiveArr[i], "left");

var top = 0;

if (i == 0) {

top = (i + 3) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;

}

else if (i == 1) {

top = (i + 10) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;

}

div.css({ "top": top + "px", "left": "600px" });

$('#div').append(div);

}

var leftSixArr = ['待定'];

for (var i = 0; i < 1; i++) {

var div = createDiv(leftSixArr[i], "left");

var top = 0;

if (i == 0) {

top = (i + 6) * (height + paddingBottom) + (height + paddingBottom) / 2;

}

div.css({ "top": top + "px", "left": "700px" });

$('#div').append(div);

}

var leftSevenArr = ['待定'];

for (var i = 0; i < 1; i++) {

var div = createDiv(leftSevenArr[i], "left");

var top = 0;

if (i == 0) {

top = (i + 9) * (height + paddingBottom) + (height + paddingBottom) / 2;

}

div.css({ "top": top + "px", "left": "700px" });

$('#div').append(div);

}

var flagArrRight = ['日本', '西班牙', '哥斯达黎加', '德国', '克罗地亚', '加拿大', '比利时', '摩洛哥', '巴西', '喀麦隆', '瑞士', '塞尔维亚', '韩国', '葡萄牙', '加纳', '乌拉圭'];

for (var i = 0, j = 0; i < 16; i++) {

var div = createDiv(flagArrRight[i], "right");

if (i % 4 == 0) {

div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:10px;right:108px;width:10px;height:118px;transform: rotateZ(180deg);" />');

}

if (i > 0 && i % 4 == 0) {

j++;

}

var top = j * 20;

div.css({ "top": (i * height + paddingBottom + top) + "px", "right": "0px" });

$('#div').append(div);

}

var rightTwoArr = ['日本', '西班牙', '摩洛哥', '克罗地亚', '巴西', '瑞士', '葡萄牙', '韩国'];

for (var i = 0, j = 0; i < 8; i++) {

var div = createDiv(rightTwoArr[i], "right");

if (i % 2 == 0) {

div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:5px;right:108px;width:5px;height:59px;transform: rotateZ(180deg);" />');

j++;

}

var top = getTop(i);

div.css({ "top": top + "px", "right": "150px" });

$('#div').append(div);

}

var rightThreeArr = ['英格兰', '塞内加尔', '法国', '波兰', '摩洛哥', '西班牙', '葡萄牙', '瑞士'];

for (var i = 0; i < 8; i++) {

var div = createDiv(rightThreeArr[i], "right");

if (i % 2 == 0) {

div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:5px;right:108px;width:5px;height:59px;transform: rotateZ(180deg);" />');

j++;

}

var top = getTop(i);

div.css({ "top": top + "px", "right": "300px" });

$('#div').append(div);

}

var rightFourArr = ['待定', '待定', '待定', '待定'];

for (var i = 0; i < 4; i++) {

var div = createDiv(rightFourArr[i], "right");

if (i % 2 == 0) {

div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:5px;right:108px;width:10px;height:180px;transform: rotateZ(180deg);" />');

j++;

}

var top = getTop(i, 4);

div.css({ "top": top + "px", "right": "450px" });

$('#div').append(div);

}

var rightFiveArr = ['待定', '待定'];

for (var i = 0; i < 2; i++) {

var div = createDiv(rightFiveArr[i], "right");

var top = 0;

if (i == 0) {

top = (i + 3) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;

}

else if (i == 1) {

top = (i + 10) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;

}

div.css({ "top": top + "px", "right": "600px" });

$('#div').append(div);

}

var rightSixArr = ['待定'];

for (var i = 0; i < 1; i++) {

var div = createDiv(rightSixArr[i], "right");

var top = 0;

if (i == 0) {

top = (i + 6) * (height + paddingBottom) + (height + paddingBottom) / 2;

}

div.css({ "top": top + "px", "right": "700px" });

$('#div').append(div);

}

var rightSevenArr = ['待定'];

for (var i = 0; i < 1; i++) {

var div = createDiv(rightSevenArr[i], "right");

var top = 0;

if (i == 0) {

top = (i + 9) * (height + paddingBottom) + (height + paddingBottom) / 2;

}

div.css({ "top": top + "px", "right": "700px" });

$('#div').append(div);

}

$('#div').append('<img src="first.png" style="position:absolute;top:200px;left:775px;width:50px;height:50px;" />');

$('#div').append('<div style="position:absolute;top:-30px;left:0px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">32强球队</div>');

$('#div').append('<div style="position:absolute;top:-30px;right:0px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">32强球队</div>');

$('#div').append('<div style="position:absolute;top:10px;left:150px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">16强小组排名</div>');

$('#div').append('<div style="position:absolute;top:10px;right:150px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">16强小组排名</div>');

$('#div').append('<div style="position:absolute;top:10px;left:300px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">16强对阵球队</div>');

$('#div').append('<div style="position:absolute;top:10px;right:300px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">16强对阵球队</div>');

$('#div').append('<div style="position:absolute;top:100px;left:300px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-03 23:00</div>');

$('#div').append('<div style="position:absolute;top:265px;left:300px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-04 03:00</div>');

$('#div').append('<div style="position:absolute;top:430px;left:300px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-05 23:00</div>');

$('#div').append('<div style="position:absolute;top:595px;left:300px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-06 03:00</div>');

$('#div').append('<div style="position:absolute;top:100px;right:300px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-05 03:00</div>');

$('#div').append('<div style="position:absolute;top:265px;right:300px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-04 23:00</div>');

$('#div').append('<div style="position:absolute;top:430px;right:300px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-06 23:00</div>');

$('#div').append('<div style="position:absolute;top:595px;right:300px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-07 03:00</div>');

$('#div').append('<div style="position:absolute;top:145px;left:450px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-10 03:00</div>');

$('#div').append('<div style="position:absolute;top:470px;left:450px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-09 23:00</div>');

$('#div').append('<div style="position:absolute;top:145px;right:450px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-11 03:00</div>');

$('#div').append('<div style="position:absolute;top:470px;right:450px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-10 23:00</div>');

$('#div').append('<div style="position:absolute;top:325px;left:600px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-14 03:00</div>');

$('#div').append('<div style="position:absolute;top:325px;right:600px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-15 03:00</div>');

$('#div').append('<div style="position:absolute;top:290px;left:760px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-18 23:00</div>');

$('#div').append('<div style="position:absolute;top:350px;left:760px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-17 23:00</div>');

$('#div').append('<div style="position:absolute;top:33px;left:450px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">8强对阵球队</div>');

$('#div').append('<div style="position:absolute;top:33px;right:450px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">8强对阵球队</div>');

$('#div').append('<div style="position:absolute;top:118px;left:600px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">半决赛对阵</div>');

$('#div').append('<div style="position:absolute;top:118px;right:600px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">半决赛对阵</div>');

if (false) {

if (true) {

var div = createDiv("阿根廷", "right");

div.css({ "top": "170px", "left": "783px" });

$('#div').append(div);

$('#div').append('<div style="position:absolute;top: 109px;left: 714px;width:100px;height:30px;line-height:40px;text-align:right;font-size:15px;font-weight:bold;">冠军</div>');

$('#div').append('<img style="position:absolute;top: 130px;left: 774px;width:50px;height:50px;line-height:40px;text-align:right;font-size:15px;font-weight:bold;transform: rotateZ(30deg);" src="冠军.png" />');

}

$('#div').append('<div style="position:absolute;top: 209px;left: 795px;width:100px;height:30px;line-height:40px;text-align:right;font-size:15px;font-weight:bold;">亚军</div>');

$('#div').append('<img style="position:absolute;top: 230px;left: 853px;width:50px;height:50px;line-height:40px;text-align:right;font-size:15px;font-weight:bold;transform: rotateZ(30deg);" src="亚军.png" />');

$('#div').append('<div style="position:absolute;top: 331px;left: 633px;width:100px;height:30px;line-height:40px;text-align:right;font-size:15px;font-weight:bold;">季军</div>');

$('#div').append('<img style="position:absolute;top: 352px;left: 692px;width:50px;height:50px;line-height:40px;text-align:right;font-size:15px;font-weight:bold;transform: rotateZ(30deg);" src="季军.png" />');

}

});

</script>

相关知识

比赛日前瞻：2个中超名额花落谁家；西超杯巴萨、皇马再交锋
第五人格IVL秋季赛总决赛售票开启！强强对决，究竟花落谁家？
官宣！篮网签下21＋9前锋，杜哈欧历史第一，3全明星内线花落谁家
2021KPL秋季赛最佳阵容候选人公布，最佳阵容花落谁家?
青运会举重比赛第3天　2金牌花落长沙福州代表队
来长城新媒体直播间看河北冰雪联赛西部赛区陆地冰壶比赛首战冠军花落谁家？
“花落谁家”爱心拍卖会举行
今夜观赛指南：日韩赛事纷至沓来 欧冠第一轮继续进行 强强对话三分花落谁家？
【早报】换人名额+2、比赛时间缩短？为复赛花招百出
曙光大股东破产清算拍卖，新能源牌照抢，将花落谁家

网址: 【小5聊】使用div+css布局绘制32支球队比赛对阵图，拭目以待冠军花落谁家 https://m.huajiangbk.com/newsview51059.html

上一篇: 三亚首次举行玫瑰花创意菜品（单项

下一篇: 创业引领者专项活动暨第三届马兰花