diff --git "a/\345\274\240\344\272\246\345\270\214/vue\344\275\234\344\270\232/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/index.html" "b/\345\274\240\344\272\246\345\270\214/vue\344\275\234\344\270\232/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/index.html"
index 420ad69b4f7380a1e5cecea4bcc8731d2914b11c..6409508625a38fffb4f1335ccf703e37db9a1bd6 100644
--- "a/\345\274\240\344\272\246\345\270\214/vue\344\275\234\344\270\232/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/index.html"
+++ "b/\345\274\240\344\272\246\345\270\214/vue\344\275\234\344\270\232/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/index.html"
@@ -4,28 +4,39 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
-    <title>Document</title>
+    <title>羊村大卖场</title>
 </head>
 <style>
     u{
-        
-        margin-left: 10px;
         cursor: pointer;
+        border: 1px pink solid;
+        width: 15vw;
+        height: 30vw;
+        line-height: 30vw;
+        text-align: center;
+        margin-bottom: 20px;
     }
     img{
-        width: 200px;
-        height: 200px;
+        width: 15vw;
+        height: 15vw;
+        margin-top: 3vw;
+        margin-left: 2.5vw;
     }
     .list{
-        border: 1px pink solid;
-        width: 40vh;
-        height: 40vh;
-        padding-left: calc( 40vh - 27vh);
-        padding-top: calc( 40vh - 33vh);
+        border: 1px pink dashed;
+        width: 20vw;
+        height: 30vw;
+        margin-left: 5px;
+        background-color: beige;
     }
     .lists{
         display: flex;
         flex-wrap: wrap;
+        margin-top: 2vw;
+    }
+    .price{
+        color: red;
+        font-weight: 800;
     }
 </style>
 <body>
@@ -36,27 +47,36 @@
 </body>
 <script>
     let arrs={
-        '懒羊羊':[{name:'眯眼懒羊羊贱卖，买不了吃亏买不了上当',price:'￥100',img:'./img/001.png'},
+        '懒羊羊':[
+        {name:'眯眼懒羊羊贱卖，买不了吃亏买不了上当',price:'￥100',img:'./img/001.png'},
         {name:'会比手势的懒羊羊贱卖，买不了吃亏买不了上当',price:'￥200',img:'./img/002.png'},
         {name:'会骂人的懒羊羊贱卖，买不了吃亏买不了上当',price:'￥500',img:'./img/003.png'},
-        {name:'偷吃吃东西的懒羊羊贱卖，买不了吃亏买不了上当',price:'￥5',img:'./img/004.png'},],
-        '美羊羊':[{name:'凶狠的美羊羊贱卖，买不了吃亏买不了上当',price:'￥10',img:'./img/005.png'},
+        {name:'偷吃吃东西的懒羊羊贱卖，买不了吃亏买不了上当',price:'￥5',img:'./img/004.png'},
+                ],
+        '美羊羊':[
+        {name:'凶狠的美羊羊贱卖，买不了吃亏买不了上当',price:'￥10',img:'./img/005.png'},
         {name:'皱眉美羊羊贱卖，买不了吃亏买不了上当',price:'￥20',img:'./img/006.png'},
         {name:'星星眼美羊羊贱卖，买不了吃亏买不了上当',price:'￥30',img:'./img/007.png'},
-        {name:'阴阳怪气美羊羊贱卖，买不了吃亏买不了上当',price:'￥50',img:'./img/008.png'},]
+        {name:'阴阳怪气美羊羊贱卖，买不了吃亏买不了上当',price:'￥50',img:'./img/008.png'},
+                ]
     }
     let productinfo={
         props:["info"],
-        template:'<div class="list"><img :src="info.img"><p>{{info.name}}</p><p>{{info.price}}</p></div>'
+        template:'<div class="list"><img :src="info.img"><p>{{info.name}}</p><p class="price">{{info.price}}</p></div>'
     }
     let productname={
         props:["sort","arrs","key"],
         methods:{
             click:function(sort,arrs){
-                this.key=this.sort;
+                if(this.key==this.sort){
+                    this.key='';
+                }else{
+                    this.key=this.sort;
+                }
+                
             }
         },
-        template:`<div class="lists"><u v-if="key!=sort" @click="click(sort,arrs)">{{sort}}</u><productinfo v-for="info in arrs[sort]" :info="info" v-if="key==sort" ></productinfo></div>`,
+        template:`<div class="lists"><u @click="click(sort,arrs)">{{sort}}</u><productinfo v-for="info in arrs[sort]" :info="info" v-if="key==sort" ></productinfo></div>`,
         components:{
             productinfo
         }
