diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..40ca4a936d0cf3d59ccf62c7b718109536fd7241 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,11 @@
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+// import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+    <!-- <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> -->
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 1b8faac1521345513353e96050dd24d94610d432..9ac9fe78b1b812ed475a2588ef9881d71e7d47e1 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,43 +1,58 @@
-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
+<template>
+    <div class="box2">
+        <ul>
+            <li v-for="(item,index) in items":key="index" @click="selectItem(index)" :class="{selected:selectedIndex===index}">
+                {{item.id}}
+                {{item.text}}
+                {{item.path}}
+                {{item.password}}
+                </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    export default{
+        name:"  Hollowrld",
+        data(){
+            return{
+                items:[
+                    {id:"1",text:'item2',path:"/route" ,password:"123456"},
+                    {id:"2",text:'item2',path:"/route",password:"456789"},
+                    { id:"3",text:'item2',path:"/route", password:"457812"}
+                ],
+                selectedIndex:null
+            };
+        },
+        methods:{
+            selectItem(index){
+                this.selectedIndex=index;
+                console.log(`selected item: ${this.items[index]}` );
+            }
+        }
+    }
+</script>
+
+<style scoped>
+.box2 {
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+
+.box2 ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.box2 li {
+  cursor: pointer;
+  padding: 5px;
+  margin-bottom: 5px;
+  background-color: #f9f9f9;
+}
+
+.box2 li.selected {
+  background-color: #ddd;
+  font-weight: bold;
+}
+</style>