Question

我正在为客户开发一个具有这种功能的网站，用户可以在其中选择座位，但是我在努力使它像下面的图片一样弯曲

到目前为止，我以下面的表格形式对其进行了尝试：

HTML

<table class="seats">
    <tr>
        <td>H</td>
        <td></td>
        <td></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>G</td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td> 
    </tr>
    <tr>
        <td>F</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>E</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>D</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>C</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>B</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>A</td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
    </tr>
    <tr>
        <td></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
    </tr>
</table>

SCSS

.seats{
    display: inline-block;
    tr td{
        text-align: center;
        color: #89909C;
        font-size: 25px;
        padding: 20px 3px 0 3px;
    }
    a{
        position: relative;
        display: inline-block;
        width: 40px;
        height: 21px;
        background: #89909C;
        border-radius: 100%;
        transition: 0.5s;
        &:after{
            content: '';
            position: absolute;
            top: 7px;
            left: 0;
            width: 40px;
            height: 21px;
            border-radius: 100%;
            border-bottom: 4px solid #89909C;
            transition: 0.5s;
        }
        &.selected{
            background: @color-red3 !important;
            &:after{
                border-color: @color-red3 !important;
            }
        }
        &.available{
            background: #89909C;
            &:after{
                border-color: #89909C;
            }
        }
        &.busy{
            background: #2B374E;
            &:after{
                border-color: #2B374E;
            }
        }
        &.family{
            background: @color-orange4;
            &:after{
                border-color: @color-orange4;
            }
        }
    }
}

我不知道使用列表还是表哪个好，但是无论如何，只要它对我来说是好的。这是我工作的代笔 https://codepen.io/nikkodelacruz/pen/LvQLje 希望有人能帮助我，谢谢

Answer 1

使用纯HTML / CSS来处理如此大量的单元格虽然很容易，但并不容易。

我将每一列视为一个子组件。首先，要使每一列旋转不同的角度，您需要按column =>单元格而不是row =>单元格像常规表那样重新构造DOM。

然后我使用JS为我处理大量的单元格，因此不必手动为每一列分配旋转值。

缺点是每个单元格的宽度和高度必须固定。

let columnCount = document.querySelectorAll(".seats .column").length
    for(let i = 0; i< columnCount; i++){
        let el = document.querySelectorAll(".seats .column")[i]

        if(columnCount % 2 == 0) {
            let columnMiddle = document.querySelectorAll(".seats .column")[columnCount/2]
            var distance = columnMiddle.getBoundingClientRect().x - el.getBoundingClientRect().x
        } else {
            let columnMiddleLeft = document.querySelectorAll(".seats .column")[Math.floor(columnCount/2)]
            let columnMiddleRight = document.querySelectorAll(".seats .column")[Math.ceil(columnCount/2)]
            let averageMiddle = (columnMiddleLeft.getBoundingClientRect().x + columnMiddleRight.getBoundingClientRect().x)/2
            var distance = averageMiddle - el.getBoundingClientRect().x

        }
        el.style.transformOrigin = distance + "px 0"
        el.style.transform = "rotate(" + (columnCount/2-i) + "deg)"
    }

.seats {
  display: inline-block;
}

.seats tr td {
  text-align: center;
  color: #89909C;
  font-size: 25px;
  padding: 20px 3px 0 3px;
}

.seats a {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 21px;
  background: #89909C;
  border-radius: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.seats a:after {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  width: 40px;
  height: 21px;
  border-radius: 100%;
  border-bottom: 4px solid #89909C;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.seats a.selected {
  background: #E8564F !important;
}

.seats a.selected:after {
  border-color: #E8564F !important;
}

.seats a.available {
  background: #89909C;
}

.seats a.available:after {
  border-color: #89909C;
}

.seats a.busy {
  background: #2B374E;
}

.seats a.busy:after {
  border-color: #2B374E;
}

.seats a.family {
  background: #FFB548;
}

.seats a.family:after {
  border-color: #FFB548;
}

.seats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5rem;
}

.seats .seat {
  height: 40px;
  width: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

<div class="seats">
        <div class="column">
                <div class="seat">H</div>
                <div class="seat">G</div>
                <div class="seat">F</div>
                <div class="seat">E</div>
                <div class="seat">D</div>
                <div class="seat">C</div>
                <div class="seat">B</div>
                <div class="seat">A</div>
                <div class="seat column-number"></div>
            </div>
        <div class="column">
            <div class="seat"></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">1</div>
        </div>
        <div class="column">
            <div class="seat"></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">2</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">3</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">4</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">5</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">6</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">7</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">8</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">9</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">10</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">11</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">12</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">13</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">14</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">15</div>
        </div>
        <div class="column">
            <div class="seat"></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">16</div>
        </div>
        <div class="column">
            <div class="seat"></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">17</div>
        </div>
    </div>

https://codepen.io/krugtep/pen/rbJGYE

如何使用CSS或JQuery制作水平曲线

1 个答案: