0
我正在为包含1001个座位的剧院创建SeatMap，我使用的是jQuery-Seat-Charts。CSS：弯曲的Div /行的座位图
我希望每排座位在舞台周围有点弯曲（不像普通的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 {
\t /*min-width: 700px;*/
}
div.seatCharts-cell {
\t height: 16px;
\t width: 16px;
\t margin: 1px;
\t float: left;
\t text-align: center;
\t outline: none;
\t font-size: 14px;
\t line-height:16px;
\t color: blue;
}
div.seatCharts-seat {
\t /*background-color: green;*/
\t color: #676967;
\t -webkit-border-radius: 5px;
\t -moz-border-radius: 5px;
\t border-radius: 5px;
\t cursor: default;
}
div.seatCharts-seat:focus {
\t border: none;
}
/*
.seatCharts-seat:focus {
\t outline: none;
}
*/
div.seatCharts-space {
\t background-color: white;
}
div.seatCharts-row {
\t height: 30px;
}
div.seatCharts-row:after {
\t clear: both;
}
div.seatCharts-seat.selected {
\t /*background-color: forestgreen;*/
color:forestgreen;
}
div.seatCharts-seat.focused {
\t /*background-color: #6db131;*/
color: #6db131;
}
div.seatCharts-seat.available {
\t /*background-color: green;*/
color: #676967;
}
div.seatCharts-seat.unavailable {
\t /*background-color: red;*/
color: darkred;
\t cursor: not-allowed;
}
ul.seatCharts-legendList {
\t list-style: none;
}
li.seatCharts-legendItem {
\t margin-top: 10px;
\t 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>
良好解决方案，但我需要找到一种方式连续选择前两个和最后两个席位，以补充类和他们的风格 –
CSS对第n个孩子选择（） – Libi