我正在为包含1001个席位的影院创建一个SeatMap，我正在使用jQuery-Seat-Charts。
我希望每排座位在舞台周围稍微弯曲（不像正常的div /行那样水平直线）。
我试过用
shape-outside: ellipse();和clip-path: ellipse();
但它不起作用。
这可以用纯CSS完成吗？怎么样？
这是我的代码：
$(document).ready(function() {
var $cart = $('#selected-seats'),
$counter = $('#counter'),
$total = $('#total'),
sc = $('#seat-map').seatCharts({
seats: {
A: {
price: 250,
classes: 'a_seat ground-floor',
category:'first class'
},
B: {
price: 1000,
classes: 'b_seat ground-floor',
category:'economy class'
},
C: {
price: 80,
classes: 'c_seat ground-floor',
category:'economy class'
}
},
map: [
'__A[A1]A[A2]A[A3]A[A4]A[A5]A[A6]A[A7]A[A8]__',
'_B[B1]B[B2]B[B3]B[B4]B[B5]B[B6]B[B7]B[B8]B[B9]B[B10]_',
'C[C1]C[C2]C[C3]C[C4]C[C5]C[C6]C[C7]C[C8]C[C9]C[C10]C[C11]C[C12]',
],
naming : {
top : false,
left: true,
rows: ['A', 'B', 'C'],
getLabel : function (character, row, column) {
return '<i class="fa fa-circle"></i>';
},
getId : function(character, row, column) {
return row + '_' + column;
}
},
legend : {
node : $('#legend'),
items : [
[ 'a', 'available', 'First Class' ],
[ 'b', 'available', 'Economy Class'],
[ 'c', 'unavailable', 'Already Booked']
]
},
click: function () {
console.log(this.settings);
if (this.status() == 'available') {
//let's create a new <li> which we'll add to the cart items
$('<li>'+this.data().category+' Seat # '+this.settings.id+': <b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[cancel]</a></li>')
.attr('id', 'cart-item-'+this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
/*
* Lets update the counter and total
*
* .find function will not find the current seat, because it will change its stauts only after return
* 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
*/
$counter.text(sc.find('selected').length+1);
$total.text(recalculateTotal(sc)+this.data().price);
return 'selected';
} else if (this.status() == 'selected') {
//update the counter
$counter.text(sc.find('selected').length-1);
//and total
$total.text(recalculateTotal(sc)-this.data().price);
//remove the item from our cart
$('#cart-item-'+this.settings.id).remove();
//seat has been vacated
return 'available';
} else if (this.status() == 'unavailable') {
//seat has been already booked
return 'unavailable';
} else {
return this.style();
}
}
});
//this will handle "[cancel]" link clicks
$('#selected-seats').on('click', '.cancel-cart-item', function () {
//let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
sc.get($(this).parents('li:first').data('seatId')).click();
});
//let's pretend some seats have already been booked
sc.get(['A1', '4_1', '7_1', '7_2']).status('unavailable');
});
function recalculateTotal(sc) {
var total = 0;
//basically find every selected seat and sum its price
sc.find('selected').each(function () {
total += this.data().price;
});
return total;
}div.seatCharts-container {
/*min-width: 700px;*/
}
div.seatCharts-cell {
height: 16px;
width: 16px;
margin: 1px;
float: left;
text-align: center;
outline: none;
font-size: 14px;
line-height:16px;
color: blue;
}
div.seatCharts-seat {
/*background-color: green;*/
color: #676967;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: default;
}
div.seatCharts-seat:focus {
border: none;
}
/*
.seatCharts-seat:focus {
outline: none;
}
*/
div.seatCharts-space {
background-color: white;
}
div.seatCharts-row {
height: 30px;
}
div.seatCharts-row:after {
clear: both;
}
div.seatCharts-seat.selected {
/*background-color: forestgreen;*/
color:forestgreen;
}
div.seatCharts-seat.focused {
/*background-color: #6db131;*/
color: #6db131;
}
div.seatCharts-seat.available {
/*background-color: green;*/
color: #676967;
}
div.seatCharts-seat.unavailable {
/*background-color: red;*/
color: darkred;
cursor: not-allowed;
}
ul.seatCharts-legendList {
list-style: none;
}
li.seatCharts-legendItem {
margin-top: 10px;
line-height: 2;
}
/*stage*/
.stage {
margin: 10px 85px;
width: 80px;
height: 30px;
background-color: #b3b3b3;
text-align:center;
}<!doctype html>
<html>
<head>
<title>Seat Map</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div id="seat-map">
<div class="stage">Stage</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="booking-details">
<h4>Booking Details</h4>
<h5>
Selected Seats
(<span id="counter">0</span>):
</h5>
<ul id="selected-seats"></ul>
Total: <b>$<span id="total">0</span>
</b>
<button class="checkout-button">
Checkout »
</button>
<div id="legend"></div>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://rawgit.com/MostafaAttia/jQuery-Seat-Charts/master/jquery.seat-charts.js"></script>
</body>
</html>
答案 0 :(得分：0)
您可以使用CSS属性margin-top为每行边缘的2个席位分配边距。这将为该行提供一条漂亮的曲线。
我将margin-top:-4用于外座位，margin-top:-1使用了第二个座位。
（由于新帐号而没有声誉，我无法发布图片，但稍后我会对其进行编辑）
希望这会有所帮助：）
答案 1 :(得分：0)
Html File Code
<div class="plane">
<div class="cockpit">
<h1>Please select a seat</h1>
</div>
<div class="exit exit--front fuselage">
</div>
<ol class="cabin fuselage">
<li class="row row--1">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" id="1A" />
<label for="1A">1A</label>
</li>
<li class="seat">
<input type="checkbox" id="1B" />
<label for="1B">1B</label>
</li>
<li class="seat">
<input type="checkbox" id="1C" />
<label for="1C">1C</label>
</li>
<li class="seat">
<input type="checkbox" disabled id="1D" />
<label for="1D">Occupied</label>
</li>
<li class="seat">
<input type="checkbox" id="1E" />
<label for="1E">1E</label>
</li>
<li class="seat">
<input type="checkbox" id="1F" />
<label for="1F">1F</label>
</li>
</ol>
</li>
<li class="row row--2">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" id="2A" />
<label for="2A">2A</label>
</li>
<li class="seat">
<input type="checkbox" id="2B" />
<label for="2B">2B</label>
</li>
<li class="seat">
<input type="checkbox" id="2C" />
<label for="2C">2C</label>
</li>
<li class="seat">
<input type="checkbox" id="2D" />
<label for="2D">2D</label>
</li>
<li class="seat">
<input type="checkbox" id="2E" />
<label for="2E">2E</label>
</li>
<li class="seat">
<input type="checkbox" id="2F" />
<label for="2F">2F</label>
</li>
</ol>
</li>
<li class="row row--3">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" id="3A" />
<label for="3A">3A</label>
</li>
<li class="seat">
<input type="checkbox" id="3B" />
<label for="3B">3B</label>
</li>
<li class="seat">
<input type="checkbox" id="3C" />
<label for="3C">3C</label>
</li>
<li class="seat">
<input type="checkbox" id="3D" />
<label for="3D">3D</label>
</li>
<li class="seat">
<input type="checkbox" id="3E" />
<label for="3E">3E</label>
</li>
<li class="seat">
<input type="checkbox" id="3F" />
<label for="3F">3F</label>
</li>
</ol>
</li>
<li class="row row--4">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" id="4A" />
<label for="4A">4A</label>
</li>
<li class="seat">
<input type="checkbox" id="4B" />
<label for="4B">4B</label>
</li>
<li class="seat">
<input type="checkbox" id="4C" />
<label for="4C">4C</label>
</li>
<li class="seat">
<input type="checkbox" id="4D" />
<label for="4D">4D</label>
</li>
<li class="seat">
<input type="checkbox" id="4E" />
<label for="4E">4E</label>
</li>
<li class="seat">
<input type="checkbox" id="4F" />
<label for="4F">4F</label>
</li>
</ol>
</li>
<li class="row row--5">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" id="5A" />
<label for="5A">5A</label>
</li>
<li class="seat">
<input type="checkbox" id="5B" />
<label for="5B">5B</label>
</li>
<li class="seat">
<input type="checkbox" id="5C" />
<label for="5C">5C</label>
</li>
<li class="seat">
<input type="checkbox" id="5D" />
<label for="5D">5D</label>
</li>
<li class="seat">
<input type="checkbox" id="5E" />
<label for="5E">5E</label>
</li>
<li class="seat">
<input type="checkbox" id="5F" />
<label for="5F">5F</label>
</li>
</ol>
</li>
<li class="row row--6">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" id="6A" />
<label for="6A">6A</label>
</li>
<li class="seat">
<input type="checkbox" id="6B" />
<label for="6B">6B</label>
</li>
<li class="seat">
<input type="checkbox" id="6C" />
<label for="6C">6C</label>
</li>
<li class="seat">
<input type="checkbox" id="6D" />
<label for="6D">6D</label>
</li>
<li class="seat">
<input type="checkbox" id="6E" />
<label for="6E">6E</label>
</li>
<li class="seat">
<input type="checkbox" id="6F" />
<label for="6F">6F</label>
</li>
</ol>
</li>
<li class="row row--7">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" id="7A" />
<label for="7A">7A</label>
</li>
<li class="seat">
<input type="checkbox" id="7B" />
<label for="7B">7B</label>
</li>
<li class="seat">
<input type="checkbox" id="7C" />
<label for="7C">7C</label>
</li>
<li class="seat">
<input type="checkbox" id="7D" />
<label for="7D">7D</label>
</li>
<li class="seat">
<input type="checkbox" id="7E" />
<label for="7E">7E</label>
</li>
<li class="seat">
<input type="checkbox" id="7F" />
<label for="7F">7F</label>
</li>
</ol>
</li>
<li class="row row--8">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" id="8A" />
<label for="8A">8A</label>
</li>
<li class="seat">
<input type="checkbox" id="8B" />
<label for="8B">8B</label>
</li>
<li class="seat">
<input type="checkbox" id="8C" />
<label for="8C">8C</label>
</li>
<li class="seat">
<input type="checkbox" id="8D" />
<label for="8D">8D</label>
</li>
<li class="seat">
<input type="checkbox" id="8E" />
<label for="8E">8E</label>
</li>
<li class="seat">
<input type="checkbox" id="8F" />
<label for="8F">8F</label>
</li>
</ol>
</li>
<li class="row row--9">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" id="9A" />
<label for="9A">9A</label>
</li>
<li class="seat">
<input type="checkbox" id="9B" />
<label for="9B">9B</label>
</li>
<li class="seat">
<input type="checkbox" id="9C" />
<label for="9C">9C</label>
</li>
<li class="seat">
<input type="checkbox" id="9D" />
<label for="9D">9D</label>
</li>
<li class="seat">
<input type="checkbox" id="9E" />
<label for="9E">9E</label>
</li>
<li class="seat">
<input type="checkbox" id="9F" />
<label for="9F">9F</label>
</li>
</ol>
</li>
<li class="row row--10">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" id="10A" />
<label for="10A">10A</label>
</li>
<li class="seat">
<input type="checkbox" id="10B" />
<label for="10B">10B</label>
</li>
<li class="seat">
<input type="checkbox" id="10C" />
<label for="10C">10C</label>
</li>
<li class="seat">
<input type="checkbox" id="10D" />
<label for="10D">10D</label>
</li>
<li class="seat">
<input type="checkbox" id="10E" />
<label for="10E">10E</label>
</li>
<li class="seat">
<input type="checkbox" id="10F" />
<label for="10F">10F</label>
</li>
</ol>
</li>
</ol>
<div class="exit exit--back fuselage">
</div>
</div>