diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/1.html" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/1.html"
deleted file mode 100644
index fda8a0a6bad4ec404ff8f385b3c686818a4783fb..0000000000000000000000000000000000000000
--- "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/1.html"
+++ /dev/null
@@ -1,145 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8" />
-    <title>1</title>
-    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
-    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
-    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
-    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
-</head>
-
-<style type="text/css">
-    body {
-        margin: 0;
-        padding: 0;
-    }
-
-    li {
-        list-style-type: none;
-        margin: auto;
-        border-bottom: 1px dashed #000;
-        height: auto;
-        width: auto;
-        padding: 10px;
-
-    }
-
-    .lb {
-        margin: auto;
-        border: 3px solid green;
-        padding: 20px;
-        width: 50%;
-    }
-
-    img {
-        height: 100px;
-        width: 100px;
-
-
-    }
-
-    .name {
-        display: block;
-        margin-top: 10px;
-        cursor: pointer;
-    }
-
-    .badge {
-        font-size: 12px;
-        background: #ff6670;
-        color: white !important;
-        padding: 5px 5px;
-        border-radius: 5px;
-        width: 22px;
-        height: 22px;
-        margin-right: 5px;
-    }
-
-    .fd {
-        height: 200px;
-        width: 200px;
-    }
-</style>
-
-<body>
-
-    <div class="lb">
-
-        <language v-for="(item,index) in arr" :arr="item" :index="index"></language>
-
-    </div>
-</body>
-
-<script type="text/javascript">
-    let language = {
-        data: function () {
-            return {
-                show: false,
-            }
-        },
-        props: ['arr', 'index'], //数组，对外暴露一个变量名
-
-        template: '<li> <img :src="arr.img" ><span v-on:click="show=!show" class="name">{{arr.name}}</span><span class="badge" title="热销商品">热</span><span class="badge" style="background-color: #67C23A;" title="保证">保</span><span class="badge" style="background-color: #409EFF;"title="自营">商</span>  <div v-if="show" id="myAlert" class="alert alert-success "><img class="fd" :src="arr.img2" ><br><h4 style="color: #16181B;">{{arr.name}}<br>{{arr.msg}}</h4></div> </li>',
-    }
-
-    let app = new Vue({
-        el: ".lb",
-        data: {
-            arr: [{
-                "name": "Apple iPhone 13 (A2634) 128GB 星光色 支持全网通 5G双卡双待 ios 蓝色 256GB",
-                "img": "https://gd2.alicdn.com/imgextra/i2/2534651412/O1CN01LNnGRD1MIjwtVxzf4_!!2534651412.png",
-                "msg": "每个ID、相似地址、名字仅限购一台，多次购买有权取消订单，敬请理解。",
-                "img2": "https://gd1.alicdn.com/imgextra/i1/2534651412/O1CN01OGqivg1MIjx30eQWU_!!2534651412.png",
-
-            },
-
-            {
-                "name": "Apple iPhone 13 (A2634) 128GB 星光色 支持全网通 5G双卡双待 ios 蓝色 256GB",
-                "img": "https://gd2.alicdn.com/imgextra/i2/2534651412/O1CN01LNnGRD1MIjwtVxzf4_!!2534651412.png",
-                "msg": "每个ID、相似地址、名字仅限购一台，多次购买有权取消订单，敬请理解。",
-                "img2": "https://gd1.alicdn.com/imgextra/i1/2534651412/O1CN01OGqivg1MIjx30eQWU_!!2534651412.png",
-            },
-            {
-                "name": "Apple iPhone 13 (A2634) 128GB 星光色 支持全网通 5G双卡双待 ios 蓝色 256GB",
-                "img": "https://gd2.alicdn.com/imgextra/i2/2534651412/O1CN01LNnGRD1MIjwtVxzf4_!!2534651412.png",
-                "msg": "每个ID、相似地址、名字仅限购一台，多次购买有权取消订单，敬请理解。",
-                "img2": "https://gd1.alicdn.com/imgextra/i1/2534651412/O1CN01OGqivg1MIjx30eQWU_!!2534651412.png",
-            },
-            {
-                "name": "Apple iPhone 13 (A2634) 128GB 星光色 支持全网通 5G双卡双待 ios 蓝色 256GB",
-                "img": "https://gd2.alicdn.com/imgextra/i2/2534651412/O1CN01LNnGRD1MIjwtVxzf4_!!2534651412.png",
-                "msg": "每个ID、相似地址、名字仅限购一台，多次购买有权取消订单，敬请理解。",
-                "img2": "https://gd1.alicdn.com/imgextra/i1/2534651412/O1CN01OGqivg1MIjx30eQWU_!!2534651412.png",
-            },
-            ],
-            showor: false
-        },
-
-
-
-        methods: {
-            add: function (index, event) {
-                let el = event.currentTarget;
-                this.name = el.innerText
-                this.msg = this.arr[index].msg
-
-                //添加json数据~
-                // let json = {
-                // 	"name": "ces",
-                // 	"img": "ces",
-                // 	"msg": "111"
-                // }
-                // this.arr.push(json)
-                // console.log(this.arr)
-
-            }
-        },
-        components: {
-            language
-        }
-    })
-</script>
-
-</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/demo.html" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9e41cdafa8bd45552670dfa607ade0150281ae8f
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/demo.html"
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>Document</title>
+</head>
+<style>
+    li {
+        width: 210px;
+        height: 300px;
+        border: 1px solid #ddd;
+        padding-left: 10px;
+        box-sizing: border-box;
+        float: left;
+        margin: 8px;
+        list-style: none;
+    }
+
+    img {
+        width: 100%;
+        height: 180px;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    h4 {
+        margin: 25px 15px;
+    }
+
+    .catalog {
+        width: 150px;
+        height: 50px;
+        line-height: 40px;
+        text-align: justify;
+        text-align-last: justify;
+        background-color: #ddd;
+        border-bottom: 1px solid #aaa;
+        color: #6b3c3c;
+    }
+
+    .detail {
+        border: 1px solid #ddd;
+        position: absolute;
+        top: 0;
+        left: 200px;
+    }
+</style>
+
+<body>
+    <div id="app">
+        <catalog :data="catalogs[0]"><img src="./img/bg1.webp" style="height: 50px;"/></catalog>
+        <catalog :data="catalogs[1]"><img src="./img/bg2.webp" style="height: 50px;"/></catalog>
+        <catalog :data="catalogs[2]"><img src="./img/bg3.webp" style="height: 50px;"/></catalog>
+    </div>
+</body>
+<script>
+    let product = {
+        props: ['product'],
+        template: "<li><img :src='product.img'><h4><span>{{product.name}}</span></h4><h4><span>{{product.price}}</span></h4></li>",
+    }
+    var laststatus;
+    let last;
+    let catalog = {
+        data: function () {
+            return { show: false }
+        },
+        methods: {
+            catshow: function () {
+                this.show = !this.show
+                if(last){
+                    last.show = !laststatus
+                }
+                last = this;
+                laststatus = this.show
+            },
+        },
+        props: ['data'],
+        template:"<div><div @click='catshow' class='catalog'><slot><span>{{data.name}}</span></slot></div> <div v-if='show' class='detail'><product v-for='(product,index) in data.products' :product='product'></product></div></div>",
+        components: {
+            product
+        }
+    }
+    new Vue({
+        el: '#app',
+        data: {
+            catalogs: [
+                {
+                    id: 1,
+                    name: '小米手机',
+                    products: [
+                        {
+                            name: "Xiaomi 12 Pro",
+                            price: "4699 元起",
+                            img: 'img/1.png'
+                        },
+                        {
+                            name: "Redmi K50 Pro",
+                            price: "2999 元起",
+                            img: 'img/2.png'
+                        },
+                        {
+                            name: "Redmi K40 Pro",
+                            price: "2699 元起",
+                            img: 'img/3.jpg'
+                        }
+                    ]
+                },
+                {
+                    id: 2,
+                    name: '小米笔记本',
+                    products: [
+                        {
+                            name: 'Redmi Book Pro 14 2022',
+                            price: '5399元',
+                            img: 'img/d1.png'
+                        },
+                        {
+                            name: 'RedmiBook Pro 14 锐龙版',
+                            price: '4199元',
+                            img: 'img/d2.jpg'
+                        },
+                    ]
+                },
+                {
+                    id: 3,
+                    name: '小米路由器',
+                    products: [
+                        {
+                            name: 'Redmi路由器 AX6',
+                            price: '349元',
+                            img: 'img/lu1.jpg'
+                        },
+                        {
+                            name: '小米路由器AX9000',
+                            price: '1299元',
+                            img: 'img/lu2.jpg'
+                        },
+                    ]
+                },
+            ]
+        },
+        components: {
+            catalog,
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/1.png" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..afc23b2f9fcf285d739ac4f00c02aa1e2359ea37
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/1.png" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/2.png" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d10eea8b68846afaf6a3f5b3cc28719d2e9fdae5
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/2.png" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/3.jpg" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b3245691c06f41a68ed831bc48317cbf628f06dc
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/3.jpg" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/bg1.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/bg1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..c996a5cdd467a25fa4c5ebd7af75396c227c94c8
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/bg1.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/bg2.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/bg2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..5e869e260150704467e96b99f4731f8e24bdad53
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/bg2.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/bg3.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/bg3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..61e738a0ab3757da079bcc5f351728ed82a27c37
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/bg3.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/d1.png" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/d1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..82adb190d38083a6d48f9a6e50440a376efdbcdd
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/d1.png" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/d2.jpg" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/d2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..9617f5980dbdf2e9a93046500fced65458c42a3a
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/d2.jpg" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/lu1.jpg" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/lu1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e71766b72f5786fd6fc8f37065598773fa31a22f
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/lu1.jpg" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/lu2.jpg" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/lu2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..40637389621ee2abee37876d74e4212d2a2affcb
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0415-solt\346\217\222\346\247\275/img/lu2.jpg" differ
