|
|
@@ -0,0 +1,122 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <script src="./js/vue.js"></script>
|
|
|
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
|
|
|
+ <style>
|
|
|
+ .container {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-goods {
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <div class="container">
|
|
|
+ <!-- 顶部导航 -->
|
|
|
+ <nav class="navbar bg-primary" data-bs-theme="dark">
|
|
|
+ <div class="container-fluid">
|
|
|
+ <span class="navbar-brand mb-0 h1">商品列表管理</span>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-2">
|
|
|
+ <input type="text" class="form-control" placeholder="请输入搜索名称">
|
|
|
+ </div>
|
|
|
+ <div class="col-10">
|
|
|
+ <button type="button" class="btn btn-primary">搜索</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 添加商品 -->
|
|
|
+ <div class="add-goods input-group mt-3">
|
|
|
+ <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>
|
|
|
+ <!-- 表格区域 -->
|
|
|
+ <div class="table-content">
|
|
|
+ <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 class="table-group-divider">
|
|
|
+ <tr class="table-active" v-for="(item,index) in dataList" :key="item.id">
|
|
|
+ <th scope="row">{{index+1}}</th>
|
|
|
+ <td>
|
|
|
+ <input type="checkbox">
|
|
|
+ </td>
|
|
|
+ <td>{{item.name}}</td>
|
|
|
+ <td>{{item.price}}</td>
|
|
|
+ <td>
|
|
|
+ <button type="button" class="btn btn-primary btn-sm">删除</button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th colspan="3">总价</th>
|
|
|
+ <td>100</td>
|
|
|
+ <td>
|
|
|
+ <button type="button" class="btn btn-primary btn-sm">删除选中</button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ let app = new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ dataList: [
|
|
|
+ {
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
