diff --git a/src/App.vue b/src/App.vue
index 7496d67..f6104b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,7 @@ import { useRoute, useRouter } from 'vue-router'
 // const route = useRoute() 
 // let routePath = ref(route.path)
 const router = useRouter()
-let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 ,path:'/'}, { btname: '生活助手', imgurl: s2, simgurl: sl2 ,path:'/chat'}, { btname: '智能优推', imgurl: s3, simgurl: sl3,path:'/znyt' }, { btname: '大众点评', imgurl: s4, simgurl: sl4 ,path:'/'}])
+let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 ,path:'/'}, { btname: '生活助手', imgurl: s2, simgurl: sl2 ,path:'/chat'}, { btname: '智能优推', imgurl: s3, simgurl: sl3,path:'/znyt' }, { btname: '大众点评', imgurl: s4, simgurl: sl4 ,path:'/comment'}])
 
 let selctdeNum = ref(0)
 let clickNum = (num,path) => {
diff --git a/src/assets/dzdp1.png b/src/assets/dzdp1.png
new file mode 100644
index 0000000..d7353e2
Binary files /dev/null and b/src/assets/dzdp1.png differ
diff --git a/src/assets/dzdp2.png b/src/assets/dzdp2.png
new file mode 100644
index 0000000..7079562
Binary files /dev/null and b/src/assets/dzdp2.png differ
diff --git a/src/assets/pf.png b/src/assets/pf.png
new file mode 100644
index 0000000..3eb6c66
Binary files /dev/null and b/src/assets/pf.png differ
diff --git a/src/assets/pf1.png b/src/assets/pf1.png
new file mode 100644
index 0000000..0724ccd
Binary files /dev/null and b/src/assets/pf1.png differ
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 5fb372c..169941a 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,10 +1,5 @@
 <script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
+
 </script>
 
 <template>
diff --git a/src/router/index.js b/src/router/index.js
index 3af819a..67afa1d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -41,6 +41,14 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/test1.vue')
     },
+    {
+      path: '/comment',
+      name: 'comment',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/Dianping/comment.vue')
+    },
     {
       path: '/znyt',
       name: 'znyt',
diff --git a/src/views/Dianping/comment.vue b/src/views/Dianping/comment.vue
new file mode 100644
index 0000000..2eb96b7
--- /dev/null
+++ b/src/views/Dianping/comment.vue
@@ -0,0 +1,552 @@
+<template>
+  <div class="mian">
+    <div class="title">精选榜单</div>
+    <div class="List">
+      <div class="listbox" v-for="(item, i) in bd_data" :key="item">
+        <img :src="item.imgurl" class="imgList" />
+        <div class="listMin">
+          <span class="flList">{{ item.name }}</span>
+          <span class="phList">{{ item.List }}</span>
+          <div class="listBnt" @click="bdDetails(item.name)">查看详情</div>
+        </div>
+      </div>
+    </div>
+    <div style="display: flex">
+      <!-- <div v-for="(item, i) in data" :key="item">
+        <div class="tabsList">
+          <span
+            class="tabnames"
+            :class="{ tabName: cNum == i }"
+            @click="clickFun(item.name, i)"
+            >{{ item.name }}</span
+          >
+          <p></p>
+          <div></div>
+        </div>
+        <div v-if="item.name == bdName" style="display: flex">
+          <span
+            v-for="(item1, index) in item.lists"
+            :key="item1"
+            class="tabtitle"
+            >{{ item1.name }}</span
+          >
+        </div>
+        <div></div>
+      </div> -->
+      <div class="main">
+        <div class="main-t">
+          <div class="main-title">
+            <div
+              class="main-list"
+              :class="[chooseId == item.id ? 'numa' : '']"
+              v-for="(item, index) in mainList"
+              :key="index"
+              @click="choose(item.id)"
+            >
+              <div :class="[chooseId == item.id ? 'numa' : '']">
+                {{ item.title }}
+              </div>
+              <img
+                src="@/assets/xia.png"
+                alt=""
+                style="width: 48px; height: 5px; margin-bottom: 10px"
+                v-if="chooseId == item.id"
+              />
+            </div>
+          </div>
+          <img src="@/assets/list.png" alt="" />
+        </div>
+        <div class="titles">
+          <span
+            v-for="(item, index) in mainLists"
+            :key="item"
+            class="tabtitle"
+            :class="[cNum == item.id ? 'tabtitles' : '']"
+            @click="clickFun(item.id)"
+            >{{ item.title }}</span
+          >
+        </div>
+        <div class="list">
+          <div v-for="(data, index) in records.list" :key="data.id">
+            <div class="line">
+              <div class="linetop">
+                <img :src="data.imgurl" alt="" />
+                <div class="linetopmin">
+                  <div class="linetopTitle">{{ data.title }}</div>
+                  <span class="linetopAddress">{{ data.address }}</span>
+                  <span class="linetopScoring">
+                    <div v-if="data.Scoring">
+                      <img :src="f1" v-for="it in data.Scoring" />
+                      <img :src="f2" v-for="it in 5 - data.Scoring" />
+                    </div>
+                    <div v-else>
+                      <img :src="f2" v-for="it in 5" />
+                    </div>
+                  </span>
+                  <span class="linetoprate">{{ data.rate }}</span>
+                </div>
+              </div>
+              <div class="linebot">
+                <p>热门评价：</p>
+                <p>{{ data.comment }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import b1 from "../../assets/dzdp1.png";
+import b2 from "../../assets/dzdp2.png";
+import f1 from "../../assets/pf.png";
+import f2 from "../../assets/pf1.png";
+
+let bd_data = reactive([
+  { name: "校园榜单", List: "高新区幼儿园好评榜", imgurl: b1, path: "/" },
+  { name: "健身榜单", List: "必逛的十大体育公园", imgurl: b1, path: "/" },
+  { name: "生活榜单", List: "高新区好评社区食堂", imgurl: b1, path: "/" },
+  { name: "移动榜单", List: "高新区好评社区食堂", imgurl: b1, path: "/" },
+]);
+const mainList = reactive([
+  {
+    id: 1,
+    title: "老有康养",
+  },
+  {
+    id: 2,
+    title: "老有康养",
+  },
+  {
+    id: 3,
+    title: "老有康养",
+  },
+  {
+    id: 4,
+    title: "老有康养",
+  },
+  {
+    id: 5,
+    title: "老有康养",
+  },
+  {
+    id: 6,
+    title: "老有康养",
+  },
+  {
+    id: 7,
+    title: "老有康养",
+  },
+]);
+const mainLists = reactive([
+  {
+    id: 1,
+    title: "老年学校",
+  },
+  {
+    id: 2,
+    title: "养老服务中心",
+  },
+  {
+    id: 3,
+    title: "养老机构食堂",
+  },
+  {
+    id: 4,
+    title: "老有康养",
+  },
+  {
+    id: 5,
+    title: "老有康养",
+  },
+  {
+    id: 6,
+    title: "老有康养",
+  },
+  {
+    id: 7,
+    title: "老有康养",
+  },
+]);
+const records = reactive({
+  list: [
+    {
+      id: 1,
+      imgurl: b2,
+      title: "象山老年大学",
+      address: "宁波市象山县广场路39号",
+      Scoring: 4,
+      rate: "职业学校",
+      comment: "老师非常耐心，课程也很丰富！",
+    },
+    {
+      id: 2,
+      imgurl: b2,
+      title: "象山老年大学",
+      address: "宁波市象山县广场路39号",
+      Scoring: 1,
+      rate: "职业学校",
+      comment: "老师非常耐心，课程也很丰富！",
+    },
+  ],
+});
+const data = reactive([
+  {
+    name: "老有康养",
+    lists: [
+      {
+        name: "老年学校",
+        lists: [
+          {
+            imgurl: b2,
+            name: "象山老年大学",
+            address: "宁波市象山县广场路39号",
+            Scoring: 4,
+            rate: "职业学校",
+            comment: "老师非常耐心，课程也很丰富！",
+          },
+        ],
+      },
+      {
+        name: "养老服务中心",
+        lists: [
+          {
+            imgurl: b2,
+            name: "象山老年大学",
+            address: "宁波市象山县广场路39号",
+            Scoring: 3,
+            rate: "职业学校",
+            comment: "老师非常耐心，课程也很丰富！",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: "幼有善育",
+    lists: [
+      {
+        name: "老年学校",
+        lists: [
+          {
+            imgurl: b2,
+            name: "象山老年大学",
+            address: "宁波市象山县广场路39号",
+            Scoring: 4,
+            rate: "职业学校",
+            comment: "老师非常耐心，课程也很丰富！",
+          },
+        ],
+      },
+      {
+        name: "养老服务中心",
+        lists: [
+          {
+            imgurl: b2,
+            name: "象山老年大学",
+            address: "宁波市象山县广场路39号",
+            Scoring: 3,
+            rate: "职业学校",
+            comment: "老师非常耐心，课程也很丰富！",
+          },
+        ],
+      },
+    ],
+  },
+]);
+const bdDetails = (name) => {
+  alert(name);
+  //   router.push(path)
+};
+const bdName = ref("老有康养");
+const cNum = ref(1);
+const clickFun = (index) => {
+  cNum.value = index;
+};
+const chooseId = ref("1");
+const choose = (id) => {
+  chooseId.value = id;
+};
+</script>
+
+<style lang="scss" scoped>
+.mian {
+  min-height: 100vh;
+  color: #000;
+  margin: 0 16px;
+  margin: 0 0 0 16px;
+  .title {
+    // width: 72px;
+    // height: 16px;
+    padding: 20px 0;
+    font-size: 18px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 600;
+    color: #333333;
+    line-height: 16px;
+  }
+
+  .List {
+    display: flex;
+    overflow-x: auto; /* 允许横向滚动 */
+    white-space: nowrap; /* 防止换行 */
+    .listbox {
+      position: relative;
+      .imgList {
+        width: 42vw;
+        height: 50vw;
+        flex: 0 0 auto; /* 不要让图像拉伸 */
+        margin-right: 10px;
+      }
+
+      .listMin {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        display: flex;
+        flex-direction: column;
+        padding: 16px 12px;
+        .flList {
+          width: 64px;
+          height: 16px;
+          font-size: 16px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+          line-height: 16px;
+        }
+        .phList {
+          width: 126px;
+          height: 12px;
+          font-size: 12px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 12px;
+          margin: 8px 0 12px;
+        }
+        .listBnt {
+          width: 56px;
+          height: 20px;
+          color: #ffffff;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 40px 40px 40px 40px;
+          font-size: 10px;
+          font-weight: 500;
+          line-height: 18px;
+          font-family: PingFang SC, PingFang SC;
+          text-align: center;
+        }
+      }
+    }
+  }
+  //   .tabsList {
+  //     display: flex;
+  //     .tabName {
+  //       width: 72px;
+  //       height: 16px;
+  //       font-size: 18px;
+  //       font-family: PingFang SC, PingFang SC;
+  //       font-weight: 600;
+  //       color: #333333;
+  //       line-height: 16px;
+  //     }
+  //     .tabnames {
+  //       width: 56px;
+  //       height: 14px;
+  //       font-size: 14px;
+  //       font-family: PingFang SC, PingFang SC;
+  //       font-weight: 400;
+  //       color: #666666;
+  //       line-height: 14px;
+  //     }
+  //     span {
+  //       margin-right: 15px;
+  //       // background: url();
+  //     }
+
+  //     // p {
+  //     //   width: 30px;
+  //     //   height: 8px;
+  //     //   border-radius: 5px;
+  //     //   background: rgb(181, 202, 255);
+  //     //   background: linear-gradient(
+  //     //     90deg,
+  //     //     rgba(181, 202, 255, 1) 0%,
+  //     //     rgba(255, 255, 255, 1) 100%
+  //     //   );
+  //     // }
+  //   }
+
+  .main {
+    box-sizing: border-box;
+    padding-top: 0;
+    height: 68vh;
+    .main-t {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-right: 16px;
+      .main-title {
+        width: 85vw;
+        height: 50px;
+        overflow-y: auto;
+        display: flex;
+        // border: 1px solid red;
+        align-items: center;
+        .main-list {
+          flex-shrink: 0;
+          min-width: 56px;
+          height: 14px;
+          font-size: 14px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 14px;
+          margin-right: 22px;
+          //   text-align: center;
+        }
+      }
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .titles {
+      display: flex;
+      overflow-x: auto; /* 允许横向滚动 */
+      white-space: nowrap; /* 防止换行 */
+      width: 89vw;
+      margin-bottom: 22px;
+      margin-top: 8px;
+      .tabtitle {
+        height: 24px;
+        padding: 3px 6px;
+        font-size: 12px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        line-height: 16px;
+        margin-right: 10px;
+      }
+      .tabtitles {
+        height: 24px;
+        background: #e0e7fb;
+        padding: 3px 6px;
+        border-radius: 24px 24px 24px 24px;
+        font-size: 12px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        color: #457bff;
+        line-height: 16px;
+        margin-right: 10px;
+      }
+    }
+    .list {
+      height: 150px;
+      width: 355px;
+      box-sizing: border-box;
+      .line {
+        margin-bottom: 20px;
+        width: 345px;
+        height: 132px;
+        background: #ffffff;
+        box-shadow: 0px 2px 12px 0px #ebeef3;
+        border-radius: 8px 8px 8px 8px;
+        padding: 16px 16px 12px 16px;
+
+        .linetop {
+          display: flex;
+          margin-bottom: 12px;
+          img {
+            width: 80px;
+            height: 80px;
+            margin-right: 12px;
+          }
+          .linetopmin {
+            display: flex;
+            flex-direction: column;
+            .linetopTitle {
+              width: 96px;
+              height: 16px;
+              font-size: 16px;
+              font-family: PingFang SC, PingFang SC;
+              font-weight: 500;
+              color: #333333;
+              line-height: 16px;
+            }
+            .linetopAddress {
+              width: 135px;
+              height: 12px;
+              font-size: 12px;
+              font-family: PingFang SC, PingFang SC;
+              font-weight: 400;
+              color: #999999;
+              line-height: 12px;
+              margin: 8px 0 0 0;
+            }
+            .linetopScoring {
+              img {
+                width: 12px;
+                height: 12px;
+                margin-right: 2px;
+              }
+              //   background-color: skyblue;
+            }
+            .linetoprate {
+              width: 48px;
+              height: 16px;
+              border-radius: 2px 2px 2px 2px;
+              border: 1px solid #b8ccff;
+
+              font-size: 10px;
+              font-family: PingFang SC, PingFang SC;
+              font-weight: 400;
+              color: #4379ff;
+              line-height: 13px;
+              text-align: center;
+              //   margin-top: 8px;
+            }
+          }
+        }
+        .linebot {
+          display: flex;
+          p:nth-child(1) {
+            width: 60px;
+            height: 12px;
+            font-size: 12px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+            line-height: 12px;
+          }
+          p:nth-child(2) {
+            width: 168px;
+            height: 12px;
+            font-size: 12px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            color: #666666;
+            line-height: 12px;
+          }
+        }
+      }
+      //   border: 1px solid yellow;
+    }
+  }
+  .numa {
+    width: 72px !important;
+    font-size: 18px !important;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 600 !important;
+    color: #333333 !important;
+    line-height: 16px !important;
+  }
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>