From eb49886e5d3f025db3d6a461efaf9416352a3a67 Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Fri, 8 Dec 2023 10:07:01 +0800
Subject: [PATCH] gx

---
 src/views/Dianping/comment.vue | 66 +++++++++++++++++++---------------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/src/views/Dianping/comment.vue b/src/views/Dianping/comment.vue
index a8cef95..8b43c9b 100644
--- a/src/views/Dianping/comment.vue
+++ b/src/views/Dianping/comment.vue
@@ -11,7 +11,7 @@
         </div>
       </div>
     </div>
-    <div style="display: flex">
+    <div>
       <!-- <div v-for="(item, i) in data" :key="item">
         <div class="tabsList">
           <span
@@ -46,15 +46,10 @@
               <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"
-              />
+              <img src="@/assets/xia.png" v-if="chooseId == item.id" />
             </div>
           </div>
-          <img src="@/assets/list.png" alt="" />
+          <img src="@/assets/list.png"/>
         </div>
         <div class="titles">
           <span
@@ -83,7 +78,11 @@
                       <img :src="f2" v-for="it in 5" />
                     </div>
                   </span>
-                  <span class="linetoprate">{{ data.rate }}</span>
+                  <div>
+                    <span v-if="data.rate" class="linetoprate">{{
+                      data.rate
+                    }}</span>
+                  </div>
                 </div>
               </div>
               <div class="linebot">
@@ -287,11 +286,11 @@ const data = reactive({
     {
       id: 2,
       imgurl: b2,
-      title: "象山老年大学",
-      address: "宁波市象山县广场路39号",
-      Scoring: 1,
-      rate: "职业学校",
-      comment: "老师非常耐心，课程也很丰富！",
+      title: "丹西街道老年大学",
+      address: "宁波市象山县新华路340号",
+      Scoring: 4,
+      rate: "",
+      comment: "学校环境很好，氛围浓厚。",
     },
     // {
     //   id: 2,
@@ -388,7 +387,7 @@ const clickFun = (index, name) => {
 const chooseId = ref("1");
 const choose = (index, name) => {
   console.log(index, name);
-//   data.mainLists = [];
+  //   data.mainLists = [];
   //   data.list = [];
   switch (name) {
     case "老有康养":
@@ -476,8 +475,8 @@ const choose = (index, name) => {
 .mian {
   min-height: 100vh;
   color: #000;
-  margin: 0 16px;
-  margin: 0 0 0 16px;
+  //   margin: 0 16px;
+  //   margin: 0 0 0 16px;
   .title {
     // width: 72px;
     // height: 16px;
@@ -487,12 +486,14 @@ const choose = (index, name) => {
     font-weight: 600;
     color: #333333;
     line-height: 16px;
+    margin-left: 16px;
   }
 
   .List {
     display: flex;
     overflow-x: auto; /* 允许横向滚动 */
     white-space: nowrap; /* 防止换行 */
+    padding-left: 16px;
     .listbox {
       position: relative;
       .imgList {
@@ -585,14 +586,16 @@ const choose = (index, name) => {
   .main {
     box-sizing: border-box;
     padding-top: 0;
-    height: 68vh;
+    // height: 68vh;
+    margin-right: 16px;
+    margin-left: 16px;
     .main-t {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding-right: 16px;
+      //   padding-right: 16px;
       .main-title {
-        width: 85vw;
+        // width: 85vw;
         height: 50px;
         overflow-y: auto;
         display: flex;
@@ -600,8 +603,8 @@ const choose = (index, name) => {
         align-items: center;
         .main-list {
           flex-shrink: 0;
-          min-width: 56px;
-          height: 14px;
+          //   min-width: 56px;
+          height: 16px;
           font-size: 14px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
@@ -609,6 +612,11 @@ const choose = (index, name) => {
           line-height: 14px;
           margin-right: 22px;
           //   text-align: center;
+          img {
+            width: 48px;
+            height: 5px;
+            margin-bottom: 10px;
+          }
         }
       }
       img {
@@ -620,7 +628,7 @@ const choose = (index, name) => {
       display: flex;
       overflow-x: auto; /* 允许横向滚动 */
       white-space: nowrap; /* 防止换行 */
-      width: 89vw;
+      //   width: 90vw;
       margin-bottom: 22px;
       margin-top: 8px;
       .tabtitle {
@@ -649,14 +657,16 @@ const choose = (index, name) => {
       //   height: 30vh;
       // border: 1px solid red;
       height: calc(100vh - 422px);
-      width: 355px;
+      //   width: 355px;
       box-sizing: border-box;
       overflow-x: auto; /* 允许横向滚动 */
       white-space: nowrap; /* 防止换行 */
       .line {
         margin-bottom: 20px;
-        width: 355px;
-        height: 132px;
+        // width: 355px;
+        // height: 132px;
+        // width: 90vh;
+        // height: 12vh;
         background: #ffffff;
         box-shadow: 0px 2px 12px 0px #ebeef3;
         border-radius: 8px 8px 8px 8px;
@@ -705,7 +715,7 @@ const choose = (index, name) => {
               height: 16px;
               border-radius: 2px 2px 2px 2px;
               border: 1px solid #b8ccff;
-
+              padding: 1px 2px;
               font-size: 10px;
               font-family: PingFang SC, PingFang SC;
               font-weight: 400;
@@ -742,7 +752,7 @@ const choose = (index, name) => {
     }
   }
   .numa {
-    width: 72px !important;
+    // width: 72px !important;
     font-size: 18px !important;
     font-family: PingFang SC, PingFang SC;
     font-weight: 600 !important;