|
|
@@ -0,0 +1,120 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"
|
|
|
+ crossorigin="anonymous">
|
|
|
+ <style>
|
|
|
+ .navbar-brand {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-box {
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-box {
|
|
|
+ width: 600px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <div class="container">
|
|
|
+ <nav class="navbar bg-primary mt-3" data-bs-theme="dark">
|
|
|
+ <div class="container-fluid">
|
|
|
+ <span class="navbar-brand mb-0 h1">商品管理</span>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ <div class="row search-box my-3">
|
|
|
+ <div class="col-8">
|
|
|
+ <input type="text" class="form-control" placeholder="请输入商品名称" aria-label="First name">
|
|
|
+ </div>
|
|
|
+ <div class="col-4">
|
|
|
+ <button type="button" class="form-control btn btn-primary">搜索</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input-group mb-3 add-box">
|
|
|
+ <input type="text" class="form-control" placeholder="请输入商品名称" aria-label="Recipient's username"
|
|
|
+ aria-describedby="button-addon2">
|
|
|
+
|
|
|
+ <input type="text" class="form-control" placeholder="请输入商品价格" aria-label="Recipient's username"
|
|
|
+ aria-describedby="button-addon2">
|
|
|
+
|
|
|
+ <button class="btn btn-outline-secondary" type="button" id="button-addon2">添加</button>
|
|
|
+ </div>
|
|
|
+ <table class="table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th scope="col">#</th>
|
|
|
+ <th scope="col">#</th>
|
|
|
+ <th scope="col">商品名称</th>
|
|
|
+ <th scope="col">商品价格</th>
|
|
|
+ <th scope="col">操作</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="item in tableData">
|
|
|
+ <th scope="row">1</th>
|
|
|
+ <td>
|
|
|
+ <input type="checkbox">
|
|
|
+ </td>
|
|
|
+ <td>{{item.name}}</td>
|
|
|
+ <td>{{item.price}}</td>
|
|
|
+ <th>
|
|
|
+ <button type="button" class="btn btn-primary btn-sm">删除</button>
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ <th scope="row" colspan="3">总价</th>
|
|
|
+ <td>0</td>
|
|
|
+ <td>
|
|
|
+ <button type="button" class="btn btn-primary btn-sm">删除选中</button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script src="./js/vue.js"></script>
|
|
|
+ <script>
|
|
|
+ let _data = [
|
|
|
+ {
|
|
|
+ id: 1001,
|
|
|
+ name: "衣服",
|
|
|
+ price: 100,
|
|
|
+ isCheck: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1002,
|
|
|
+ name: "裤子",
|
|
|
+ price: 200,
|
|
|
+ isCheck: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1003,
|
|
|
+ name: "帽子",
|
|
|
+ price: 50,
|
|
|
+ isCheck: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1004,
|
|
|
+ name: "鞋",
|
|
|
+ price: 300,
|
|
|
+ isCheck: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: {
|
|
|
+ tableData:_data
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
