422 lines
31 KiB
HTML
422 lines
31 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<title>监控详情 | 智能截流闸管理平台</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta content="智能截流闸管理平台" name="description" />
|
|
<meta content="Themesdesign" name="author" />
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
<!-- jquery.vectormap css -->
|
|
<link href="assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- DataTables -->
|
|
<link href="assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- Responsive datatable examples -->
|
|
<link href="assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- Bootstrap Css -->
|
|
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
|
|
<!-- Icons Css -->
|
|
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- App Css-->
|
|
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
|
|
|
|
</head>
|
|
|
|
<body data-sidebar="dark">
|
|
|
|
<!-- Begin page -->
|
|
<div id="layout-wrapper">
|
|
|
|
<!-- 头部开始 -->
|
|
<?php include_once('header.tpl.html'); ?>
|
|
<!-- 头部结束 -->
|
|
<!-- ========== Left Sidebar Start ========== -->
|
|
<?php include_once('leftsidebar.tpl.html'); ?>
|
|
<!-- Left Sidebar End -->
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start right Content here -->
|
|
<!-- ============================================================== -->
|
|
<div class="main-content">
|
|
|
|
<div class="page-content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-title-box d-flex align-items-center justify-content-between">
|
|
<h4 class="mb-0">监控详情</h4>
|
|
|
|
<div class="page-title-right">
|
|
<ol class="breadcrumb m-0">
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">视频管理</a></li>
|
|
<li class="breadcrumb-item active">监控详情</li>
|
|
</ol>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-xl-5">
|
|
<div class="product-detail">
|
|
<div class="row">
|
|
<div class="col-3">
|
|
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
|
<a class="nav-link active" id="product-1-tab" data-toggle="pill" href="#product-1" role="tab">
|
|
<img src="assets/images/product/img-1.png" alt="" class="img-fluid mx-auto d-block tab-img rounded">
|
|
</a>
|
|
<a class="nav-link" id="product-2-tab" data-toggle="pill" href="#product-2" role="tab">
|
|
<img src="assets/images/product/img-5.png" alt="" class="img-fluid mx-auto d-block tab-img rounded">
|
|
</a>
|
|
<a class="nav-link" id="product-3-tab" data-toggle="pill" href="#product-3" role="tab">
|
|
<img src="assets/images/product/img-3.png" alt="" class="img-fluid mx-auto d-block tab-img rounded">
|
|
</a>
|
|
<a class="nav-link" id="product-4-tab" data-toggle="pill" href="#product-4" role="tab">
|
|
<img src="assets/images/product/img-4.png" alt="" class="img-fluid mx-auto d-block tab-img rounded">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8 col-9">
|
|
<div class="tab-content" id="v-pills-tabContent">
|
|
<div class="tab-pane fade show active" id="product-1" role="tabpanel">
|
|
<div class="product-img">
|
|
<img src="assets/images/product/img-1.png" alt="" class="img-fluid mx-auto d-block" data-zoom="assets/images/product/img-1.png">
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="product-2" role="tabpanel">
|
|
<div class="product-img">
|
|
<img src="assets/images/product/img-5.png" alt="" class="img-fluid mx-auto d-block">
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="product-3" role="tabpanel">
|
|
<div class="product-img">
|
|
<img src="assets/images/product/img-3.png" alt="" class="img-fluid mx-auto d-block">
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="product-4" role="tabpanel">
|
|
<div class="product-img">
|
|
<img src="assets/images/product/img-4.png" alt="" class="img-fluid mx-auto d-block">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row text-center mt-2">
|
|
<div class="col-sm-6">
|
|
<button type="button" class="btn btn-primary btn-block waves-effect waves-light mt-2 mr-1">
|
|
<i class="mdi mdi-cart mr-2"></i> Add to cart
|
|
</button>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<button type="button" class="btn btn-light btn-block waves-effect mt-2 waves-light">
|
|
<i class="mdi mdi-shopping mr-2"></i>Buy now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end product img -->
|
|
</div>
|
|
<div class="col-xl-7">
|
|
<div class="mt-4 mt-xl-3">
|
|
<a href="#" class="text-primary">T-shirt</a>
|
|
<h5 class="mt-1 mb-3">Full sleeve Blue color t-shirt</h5>
|
|
|
|
<div class="d-inline-flex">
|
|
<div class="text-muted mr-3">
|
|
<span class="mdi mdi-star text-warning"></span>
|
|
<span class="mdi mdi-star text-warning"></span>
|
|
<span class="mdi mdi-star text-warning"></span>
|
|
<span class="mdi mdi-star text-warning"></span>
|
|
<span class="mdi mdi-star"></span>
|
|
</div>
|
|
<div class="text-muted">( 132 )</div>
|
|
</div>
|
|
|
|
<h5 class="mt-2"><del class="text-muted mr-2">$252</del>$240 <span class="text-danger font-size-12 ml-2">25 % Off</span></h5>
|
|
<p class="mt-3">To achieve this, it would be necessary to have uniform pronunciation</p>
|
|
<hr class="my-4">
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div>
|
|
<h5 class="font-size-14"><i class="mdi mdi-location"></i> Delivery location</h5>
|
|
<div class="form-inline">
|
|
|
|
<div class="input-group mb-3">
|
|
<input type="text" class="form-control" placeholder="Enter Delivery pincode ">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-light" type="button">Check</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h5 class="font-size-14">Specification :</h5>
|
|
<ul class="list-unstyled product-desc-list">
|
|
<li><i class="mdi mdi-circle-medium mr-1 align-middle"></i> Full Sleeve</li>
|
|
<li><i class="mdi mdi-circle-medium mr-1 align-middle"></i> Cotton</li>
|
|
<li><i class="mdi mdi-circle-medium mr-1 align-middle"></i> All Sizes available</li>
|
|
<li><i class="mdi mdi-circle-medium mr-1 align-middle"></i> 4 Different Color</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h5 class="font-size-14">Services :</h5>
|
|
<ul class="list-unstyled product-desc-list">
|
|
<li><i class="mdi mdi-sync text-primary mr-1 align-middle font-size-16"></i> 10 Days Replacement</li>
|
|
<li><i class="mdi mdi-currency-usd-circle text-primary mr-1 align-middle font-size-16"></i> Cash on Delivery available</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="product-color mt-3">
|
|
<h5 class="font-size-14">Color :</h5>
|
|
<a href="#" class="active">
|
|
<div class="product-color-item">
|
|
<img src="assets/images/product/img-1.png" alt="" class="avatar-md">
|
|
</div>
|
|
<p>Blue</p>
|
|
</a>
|
|
<a href="#">
|
|
<div class="product-color-item">
|
|
<img src="assets/images/product/img-5.png" alt="" class="avatar-md">
|
|
</div>
|
|
<p>Cyan</p>
|
|
</a>
|
|
<a href="#">
|
|
<div class="product-color-item">
|
|
<img src="assets/images/product/img-3.png" alt="" class="avatar-md">
|
|
</div>
|
|
<p>Green</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="product-color mt-3">
|
|
<h5 class="font-size-14">Size :</h5>
|
|
<a href="#" class="active">
|
|
<div class="product-color-item">
|
|
<div class="avatar-xs">
|
|
<span class="avatar-title bg-transparent text-body">S</span>
|
|
</div>
|
|
</div>
|
|
|
|
</a>
|
|
<a href="#">
|
|
<div class="product-color-item">
|
|
<div class="avatar-xs">
|
|
<span class="avatar-title bg-transparent text-body">M</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="product-color-item">
|
|
<div class="avatar-xs">
|
|
<span class="avatar-title bg-transparent text-body">L</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="product-color-item">
|
|
<div class="avatar-xs">
|
|
<span class="avatar-title bg-transparent text-body">XL</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="mt-4">
|
|
<h5 class="font-size-14 mb-3">Product description: </h5>
|
|
<div class="product-desc">
|
|
<ul class="nav nav-tabs nav-tabs-custom" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="desc-tab" data-toggle="tab" href="#desc" role="tab">Description</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="specifi-tab" data-toggle="tab" href="#specifi" role="tab">Specifications</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content border border-top-0 p-4">
|
|
<div class="tab-pane fade" id="desc" role="tabpanel">
|
|
<div>
|
|
<p>If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual </p>
|
|
<p>To achieve this, it would be necessary to have uniform grammar, pronunciation and more common several languages coalesce, the grammar of the resulting.</p>
|
|
<p>It will be as simple as occidental in fact.</p>
|
|
|
|
<div>
|
|
<p class="mb-2"><i class="mdi mdi-circle-medium mr-1 align-middle"></i> If several languages coalesce</p>
|
|
<p class="mb-2"><i class="mdi mdi-circle-medium mr-1 align-middle"></i> To an English person, it will seem like simplified</p>
|
|
<p class="mb-0"><i class="mdi mdi-circle-medium mr-1 align-middle"></i> These cases are perfectly simple.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade show active" id="specifi" role="tabpanel">
|
|
<div class="table-responsive">
|
|
<table class="table table-nowrap mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row" style="width: 400px;">Category</th>
|
|
<td>T-Shirt</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Brand</th>
|
|
<td>Jack & Jones</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Color</th>
|
|
<td>Blue</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Material</th>
|
|
<td>Cotton</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Weight</th>
|
|
<td>140 G</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<h5 class="font-size-14">Reviews : </h5>
|
|
<div class="d-inline-flex mb-3">
|
|
<div class="text-muted mr-3">
|
|
<span class="mdi mdi-star text-warning"></span>
|
|
<span class="mdi mdi-star text-warning"></span>
|
|
<span class="mdi mdi-star text-warning"></span>
|
|
<span class="mdi mdi-star text-warning"></span>
|
|
<span class="mdi mdi-star"></span>
|
|
</div>
|
|
<div class="text-muted">( 132 customer Review)</div>
|
|
</div>
|
|
<div class="border p-4 rounded">
|
|
<div class="media border-bottom pb-3">
|
|
<div class="media-body">
|
|
<p class="text-muted mb-2">To an English person, it will seem like simplified English, as a skeptical Cambridge</p>
|
|
<h5 class="font-size-15 mb-3">James</h5>
|
|
|
|
<ul class="list-inline product-review-link mb-0">
|
|
<li class="list-inline-item">
|
|
<a href="#"><i class="mdi mdi-thumb-up align-middle mr-1"></i> Like</a>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<a href="#"><i class="mdi mdi-message-text align-middle mr-1"></i> Comment</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<p class="float-sm-right font-size-12">11 Feb, 2020</p>
|
|
</div>
|
|
<div class="media border-bottom py-3">
|
|
<div class="media-body">
|
|
<p class="text-muted mb-2">Everyone realizes why a new common language would be desirable</p>
|
|
<h5 class="font-size-15 mb-3">David</h5>
|
|
|
|
<ul class="list-inline product-review-link mb-0">
|
|
<li class="list-inline-item">
|
|
<a href="#"><i class="mdi mdi-thumb-up align-middle mr-1"></i> Like</a>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<a href="#"><i class="mdi mdi-message-text align-middle mr-1"></i> Comment</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<p class="float-sm-right font-size-12">22 Jan, 2020</p>
|
|
</div>
|
|
<div class="media py-3">
|
|
<div class="media-body">
|
|
<p class="text-muted mb-2">If several languages coalesce, the grammar of the resulting </p>
|
|
<h5 class="font-size-15 mb-3">Scott</h5>
|
|
|
|
<ul class="list-inline product-review-link mb-0">
|
|
<li class="list-inline-item">
|
|
<a href="#"><i class="mdi mdi-thumb-up align-middle mr-1"></i> Like</a>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<a href="#"><i class="mdi mdi-message-text align-middle mr-1"></i> Comment</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<p class="float-sm-right font-size-12">04 Jan, 2020</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end card -->
|
|
</div>
|
|
</div>
|
|
</div> <!-- container-fluid -->
|
|
</div>
|
|
<!-- End Page-content -->
|
|
|
|
<!-- 尾部开始 -->
|
|
<?php include_once('footer.tpl.html'); ?>
|
|
<!-- 尾部结束 -->
|
|
|
|
</div>
|
|
<!-- end main content-->
|
|
|
|
</div>
|
|
<!-- END layout-wrapper -->
|
|
|
|
|
|
<!-- Right bar overlay-->
|
|
<div class="rightbar-overlay"></div>
|
|
|
|
<!-- JAVASCRIPT -->
|
|
<script src="assets/libs/jquery/jquery.min.js"></script>
|
|
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/libs/metismenu/metisMenu.min.js"></script>
|
|
<script src="assets/libs/simplebar/simplebar.min.js"></script>
|
|
<script src="assets/libs/node-waves/waves.min.js"></script>
|
|
|
|
<!-- apexcharts -->
|
|
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
|
|
|
|
<!-- jquery.vectormap map -->
|
|
<script src="assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
|
|
<script src="assets/libs/admin-resources/jquery.vectormap/maps/jquery-jvectormap-us-merc-en.js"></script>
|
|
|
|
<!-- Required datatable js -->
|
|
<script src="assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
|
|
<script src="assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
|
|
|
|
<!-- Responsive examples -->
|
|
<script src="assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
|
|
<script src="assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
|
|
|
|
<script src="assets/js/pages/dashboard.init.js"></script>
|
|
|
|
<script src="assets/js/app.js"></script>
|
|
|
|
</body>
|
|
</html>
|