<div v-show="imgPanelVisible"
style="
flex: 1 0 auto;height
: 238px;color
: #fff;padding
: 10px 10px 0px 10px;background-color
:#206e3c;isolation
: isolate;
display: flex;
flex-direction
: column;text-align
: center;font-size
: 12px;">
<div style="
flex: 1 0 auto;
display: flex;
flex-direction
: row;justify-content
: flex-start;">
<div class="num0"
style="
flex: 0 0 auto;
display: flex;
flex-direction
: column;justify-content
: center;width
: 28px;border
: 1px solid #fff;border-right
: 0px;position
: relative;clip-path
: polygon(60% 0, 100% 0, 100% 100%, 60% 100%, 0% 50%);background-color
: #fff;">
<div style="margin-right
: -8px;">0</div>
</div>
<div style="
flex: 1;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
3</div>
<div
style="
flex: 1;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
2</div>
<div
style="
flex: 1;border
: 1px solid #fff;border-right
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
1</div>
</div>
<div style="
flex: 1;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
6</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
5</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
4</div>
</div>
<div style="
flex: 1;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
9</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
8</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
7</div>
</div>
<div style="
flex: 1;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
12</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
11</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
10</div>
</div>
<div style="
flex: 1;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
15</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
14</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
13</div>
</div>
<div style="
flex: 1;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
18</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
17</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
16</div>
</div>
<div style="
flex: 1;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
21</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
20</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
19</div>
</div>
<div style="
flex: 1;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
24</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
23</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
22</div>
</div>
<div style="
flex: 1;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
27</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
26</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
25</div>
</div>
<div style="
flex: 1;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
30</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
29</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
28</div>
</div>
<div style="
flex: 1;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
33</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
32</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
31</div>
</div>
<div style="
flex: 1;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
36</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
: #2b2b2b;">
35</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-right
: 0px;
display: flex;align-items
: center;justify-content
: center;background-color
:#d81616;">
34</div>
</div>
<div style="
flex: 0 0 23px;
display: flex;
flex-direction
: column;">
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;">
<span
style=" transform
: rotate(270deg);transform-origin
: center;
display: inline-block;">3R</span>
</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;border-bottom
: 0px;
display: flex;align-items
: center;justify-content
: center;">
<span
style=" transform
: rotate(270deg);transform-origin
: center;
display: inline-block;">2R</span>
</div>
<div
style="
flex: 1 0 auto;border
: 1px solid #fff;
display: flex;align-items
: center;justify-content
: center;">
<span
style=" transform
: rotate(270deg);transform-origin
: center;
display: inline-block;">1R</span>
</div>
</div>
</div>
<div style="
flex: 0 0 70px;
display: flex;
flex-direction
: row;">
<div style="
flex:0 0 29px;"></div>
<div
style="
flex: 1;border
: 1px solid #fff;border-top
: 0px;border-right
: 0px;
display: flex;
flex-direction
: column;justify-content
: center;">
<div
style="
flex: 1 0 auto;
display: flex;
flex-direction
: row;align-items
: center;border-bottom
: 1px solid #fff;justify-content
: center;">
<div style="border
: 1px solid #fff;padding
: 5px 25px;">一区</div>
</div>
<div style="
flex: 0 0 30px;
display: flex;
flex-direction
: row;">
<div
style="
flex: 1;border-right
: 1px solid #fff;
display: flex;
flex-direction
: row;align-items
: center;justify-content
: center;">
1-18</div>
<div
style="
flex: 1;
display: flex;
flex-direction
: row;align-items
: center;justify-content
: center;">
单</div>
</div>
</div>
<div
style="
flex: 1;border
: 1px solid #fff;border-top
: 0px;border-right
: 0px;
display: flex;
flex-direction
: column;justify-content
: center;">
<div
style="
flex: 1 0 auto;
display: flex;
flex-direction
: row;align-items
: center;border-bottom
: 1px solid #fff;justify-content
: center;">
<div style="border
: 1px solid #fff;padding
: 5px 25px;">二区</div>
</div>
<div style="
flex: 0 0 30px;
display: flex;
flex-direction
: row;">
<div
style="
flex: 1;border-right
: 1px solid #fff;
display: flex;
flex-direction
: row;align-items
: center;justify-content
: center;">
<div
style="background-color
:#d81616;color
: #d81616;border
: 1px solid #fff;padding
: 3px 13px;">
红</div>
</div>
<div
style="
flex: 1;
display: flex;
flex-direction
: row;align-items
: center;justify-content
: center;">
<div
style="background-color
: #2b2b2b;color
: #2b2b2b;border
: 1px solid #fff;padding
: 3px 13px;">
黑</div>
</div>
</div>
</div>
<div
style="
flex: 1;border
: 1px solid #fff;border-top
: 0px;
display: flex;
flex-direction
: column;justify-content
: center;">
<div
style="
flex: 1 0 auto;
display: flex;
flex-direction
: row;align-items
: center;border-bottom
: 1px solid #fff;justify-content
: center;">
<div style="border
: 1px solid #fff;padding
: 5px 25px;">三区</div>
</div>
<div style="
flex: 0 0 30px;
display: flex;
flex-direction
: row;">
<div
style="
flex: 1;border-right
: 1px solid #fff;
display: flex;
flex-direction
: row;align-items
: center;justify-content
: center;">
双</div>
<div
style="
flex: 1;
display: flex;
flex-direction
: row;align-items
: center;justify-content
: center;">
19-36</div>
</div>
</div>
<div style="
flex:0 0 22px;"></div>
</div>
<div style="
flex: 0 0 60px;
display: flex;
flex-direction
: row;align-items
: center;">
<div
style="
flex: 0 0 auto;background-image
: url(./src/assets/img/group_lp/btn_back.png);width
: 35px;height
: 35px;margin-right
: 3px;">
</div>
<div
style="
flex: 0 0 auto;background-image
: url(./src/assets/img/group_lp/btn_clear.png);width
: 35px;height
: 35px;margin-right
: 3px;">
</div>
<div
style="
flex: 0 0 auto;background-image
: url(./src/assets/img/group_lp/btn_x2.png);width
: 35px;height
: 35px;margin-right
: 3px;">
</div>
<div style="
flex: 1 1 auto;"></div>
<div
style="
flex: 0 0 auto;background-image
: url(./src/assets/img/group_lp/btn_chip.png);width
: 35px;height
: 35px;margin-right
: 8px;
display: flex;
flex-direction
: row;align-items
: center;justify-content
: center;">
10</div>
<div
style="
flex: 0 0 auto;background-image
: url(./src/assets/img/group_lp/btn_chip.png);width
: 35px;height
: 35px;margin-right
: 8px;
display: flex;
flex-direction
: row;align-items
: center;justify-content
: center;">
50</div>
<div
style="
flex: 0 0 auto;background-image
: url(./src/assets/img/group_lp/btn_chip.png);width
: 35px;height
: 35px;margin-right
: 8px;
display: flex;
flex-direction
: row;align-items
: center;justify-content
: center;">
100</div>
<div
style="
flex: 0 0 auto;background-image
: url(./src/assets/img/group_lp/btn_chip.png);width
: 35px;height
: 35px;
display: flex;
flex-direction
: row;align-items
: center;justify-content
: center;">
?</div>
<div style="
flex: 1 1 auto;"></div>
<div class="iconfont"
style="
flex: 0 0 auto;width
: 45px;height
: 35px;
display: flex;
flex-direction
: row;align-items
: center;justify-content
: center;border
: 1px solid white;border-radius
:5px;font-size
: 23px;">
</div>
</div>
</div>
请整理这里的css,
display: flex;
flex-direction
: row;align-items
: center;justify-content
: center;不用整理
其他的整理到<style>
本文介绍了如何使用Flex布局解决页面行排列布局的问题，包括左右居中、响应式布局等，并对比了传统浮动布局的不足之处。
扫一扫
1228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
