Merge branch 'main' of git.zdool.com:xs/yxdt/h5

src/App.vue

@@ -11,40 +11,26 @@ import sl2 from './assets/s6.png'
 import sl3 from './assets/s7.png'
 import sl4 from './assets/s8.png'
 import { useRoute, useRouter } from 'vue-router'
-// const route = useRoute() 
+const route = useRoute()
-// let routePath = ref(route.path)
+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:'/comment'}])
+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) => {
+let clickNum = (num, path) => {
   selctdeNum.value = num
+  routePath.value = path
   router.push(path)
 }
 </script>
 
 <template>
-  <!--  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-       
-      </nav>
-    </div>
-  </header> -->
-  <!-- <RouterLink to="/chat">Chat</RouterLink> -->
   <RouterView />
   <div class="bottom">
-    <div class="bt_itm" v-for="(v, i) in bt_data" :key="i" @click="clickNum(i,v.path)">
+    <div class="bt_itm" v-for="(v, i) in bt_data" :key="i" @click="clickNum(i, v.path)">
-
+      <img v-if="routePath != v.path" :src="v.imgurl" alt="">
-      <img v-if="selctdeNum != i" :src="v.imgurl" alt="">
       <img v-else :src="v.simgurl" alt="">
-      <span :class="{ slectedfont: selctdeNum == i }">{{ v.btname }}</span>
+      <span :class="{ slectedfont: routePath == v.path }">{{ v.btname }}</span>
     </div>
   </div>
 </template>
@@ -57,6 +43,7 @@ let clickNum = (num,path) => {
 
 
 .bottom {
+  z-index: 999;
   background-color: #fff !important;
   display: flex;
   align-items: center;
@@ -65,8 +52,9 @@ let clickNum = (num,path) => {
   bottom: 0px;
   left: 0px;
   width: 100vw;
-  border: 1px solid red;
+  // border: 1px solid red;
   padding: 9px 0px;
+
   .bt_itm {
     display: flex;
     flex-direction: column;

src/views/HomeView.vue

@@ -29,8 +29,60 @@
       :overlay="false"
       round
       position="bottom"
-      :style="{ height: '30%' }"
+      :style="{ height: '45%' }"
+      style="z-index: 10"
+    >
+      <van-sticky style="background-color: #fff; z-index: 99">
+        <van-search
+          v-model="value"
+          shape="round"
+          background="#4fc08d00"
+          placeholder=""
         />
+        <van-dropdown-menu>
+          <van-dropdown-item
+            v-model="dropdown.value1"
+            :options="dropdown.option1"
+          />
+          <van-dropdown-item
+            v-model="dropdown.value2"
+            :options="dropdown.option2"
+          />
+          <van-dropdown-item
+            v-model="dropdown.value3"
+            :options="dropdown.option3"
+          />
+        </van-dropdown-menu>
+      </van-sticky>
+      <div class="card">
+        <div
+          class="cardlist"
+          v-for="(item, index) in dropdown.rmyy"
+          :key="index"
+        >
+          <img class="imgse" :src="item.img" alt="" />
+          <div class="bodys">
+            <div class="bt">{{ item.name }}</div>
+            <div class="dz">
+              <div class="tp">
+                <img class="ims" src="../assets/home/dz.png" alt="" />
+              </div>
+              <div class="zl">{{ item.jl }}</div>
+              <div class="xxdz">{{ item.dz }}</div>
+            </div>
+            <div class="bq">
+              <van-tag
+                v-for="(item, index) in item.tag"
+                :key="index"
+                plain
+                type="primary"
+                >{{ item }}</van-tag
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-popup>
   </div>
 </template>
   
@@ -53,11 +105,122 @@ import img14 from "@/assets/home/ryzfxz.png";
 import img15 from "@/assets/home/yxfw.png";
 import img16 from "@/assets/home/yxfwxz.png";
 import img17 from "@/assets/home/yy.png";
+import img18 from "@/assets/home/wdwz.png";
+
 var map = null;
 var control = null;
+var T = window.T;
+
+const dropdown = reactive({
+  value1: 0,
+  value2: 0,
+  value3: 0,
+  option1: [{ text: "智能排序", value: 0 }],
+  option2: [{ text: "位置距离", value: 0 }],
+  option3: [{ text: "其他筛选", value: 0 }],
+  rmyy: [
+    {
+      name: "象山第一人民医院",
+      img: "http://store.is.autonavi.com/showpic/756391e986455206891ae6d6c27ac430?type=pic",
+      tag: ["综合医院", "二级甲等"],
+      dz: "宁波市象山县东谷路289-291",
+      jl: "1公里",
+      zb: [121.88637, 29.47231],
+    },
+    {
+      name: "象山县中医医院(新院区)",
+      img: "https://aos-comment.amap.com/B0FFKGTE0P/headerImg/40db9d22bfd0099a2e3418da8f3e9c5b_2048_2048_80.jpg",
+      tag: ["中医医院"],
+      dz: "宁波市象山县南部新城兴洋路7号",
+      jl: "6.7公里",
+      zb: [121.90277, 29.43579],
+    },
+    {
+      name: "象山第三人民医院",
+      img: "http://store.is.autonavi.com/showpic/a0ff397c63274b1438755089ccc972d1?type=pic",
+      tag: ["综合医院", "二级医院"],
+      dz: "宁波市象山县丹西街道樟树下村",
+      jl: "3.8公里",
+      zb: [121.89218, 29.44957],
+    },
+    {
+      name: "丹城中心卫生院",
+      img: "http://store.is.autonavi.com/showpic/fee5ebf4dd4ccae1908faf4993d557bf?type=pic",
+      tag: ["卫生院"],
+      dz: "宁波市象山县上吴村254-2号",
+      jl: "2.5公里",
+      zb: [121.892122, 29.449637],
+    },
+    {
+      name: "象山爱尔眼科医院",
+      img: "http://store.is.autonavi.com/showpic/1d00880c0dce4c237df8499b20eda61d?type=pic",
+      tag: ["眼科医院"],
+      dz: "宁波市象山县丹西街道象山港路118号",
+      jl: "3.4公里",
+      zb: [121.86596, 29.4603],
+    },
+    {
+      name: "西港村卫生室",
+      img: "http://store.is.autonavi.com/showpic/aeec5aeacbb4deebb2530a060b37091a?type=pic",
+      tag: ["卫生院"],
+      dz: "宁波市象山县规划路与滨海大道交叉口东460米",
+      jl: "7.5公里",
+      zb: [121.910589, 29.422593],
+    },
+    {
+      name: "翁敬堂骨伤医院",
+      img: "http://store.is.autonavi.com/showpic/eb553882ac643ce7edba3074d2b27516?type=pic",
+      tag: ["骨科医院"],
+      dz: "宁波市象山县新丰路298号",
+      jl: "2.6公里",
+      zb: [121.87011, 29.46552],
+    },
+    {
+      name: "宁波口腔医院象山分院",
+      img: "http://store.is.autonavi.com/showpic/0ada714ce414813321099165da07151d?type=pic",
+      tag: ["口腔医院"],
+      dz: "宁波市象山县丹河东路1098号",
+      jl: "1.6公里",
+      zb: [121.898524, 29.461311],
+    },
+    {
+      name: "星城医院",
+      img: "http://store.is.autonavi.com/showpic/89bfcbf76b4b197a4fb94b10d49b7bf4?type=pic",
+      tag: ["综合医院"],
+      dz: "宁波市象山县丹河东路1086号",
+      jl: "1.7公里",
+      zb: [121.89456, 29.46375],
+    },
+    {
+      name: "宁波港城口腔医院",
+      img: "http://store.is.autonavi.com/showpic/d77f446fcacc052f9d1aed8554d125c8?type=pic",
+      tag: ["口腔医院"],
+      dz: "宁波市象山县丹东街道新华路269号",
+      jl: "1.6公里",
+      zb: [121.88508, 29.46631],
+    },
+    {
+      name: "益民口腔",
+      img: "http://store.is.autonavi.com/showpic/b742650078a06ec8443c31c94fa4c32c?type=pic",
+      tag: ["口腔诊所"],
+      dz: "台州市天台县和合北路161-17号",
+      jl: "917米",
+      zb: [121.89336, 29.47956],
+    },
+    {
+      name: "象山妇幼保健院",
+      img: "http://store.is.autonavi.com/showpic/b742650078a06ec8443c31c94fa4c32c?type=pic",
+      tag: ["妇幼医院"],
+      dz: "宁波市象山县城东路1号",
+      jl: "3公里",
+      zb: [121.87026, 29.48092],
+    },
+  ],
+});
+
 const list = reactive({
   show: true,
-  index: 0,
+  index: 3,
   yxfw: [
     {
       id: 0,
@@ -104,29 +267,40 @@ const list = reactive({
   ],
 });
 const init = () => {
-  var T = window.T;
   map = new T.Map("mapDiv");
   // map.setMapType(window.TMAP_SATELLITE_MAP);
-  map.centerAndZoom(new T.LngLat(121.91686, 29.42154), 12);
+  map.centerAndZoom(new T.LngLat(121.88356, 29.45144), 13);
   control = new T.Control.Zoom();
   //添加缩放平移控件
   map.addControl(control);
   control.setPosition(T_ANCHOR_TOP_RIGHT);
   var icon = new T.Icon({
-    iconUrl: img17,
+    iconUrl: img18,
     iconSize: new T.Point(28, 28),
     iconAnchor: new T.Point(28, 28),
   });
   //向地图上添加自定义标注
-  var marker = new T.Marker(new T.LngLat(121.94773, 29.47982), { icon: icon });
+  var marker = new T.Marker(new T.LngLat(121.89248, 29.47474), { icon: icon });
-  var markers = new T.Marker(new T.LngLat(121.89074, 29.40876), { icon: icon });
   map.addOverLay(marker);
-  map.addOverLay(markers);
+  yxf();
 };
 
 const yxfwxz = (e) => {
   list.index = e.id;
 };
+const yxf = () => {
+  dropdown.rmyy.forEach((item, index) => {
+    var icons = new T.Icon({
+      iconUrl: img17,
+      iconSize: new T.Point(28, 28),
+      iconAnchor: new T.Point(28, 28),
+    });
+    var LngLats = new T.Marker(new T.LngLat(item.zb[0], item.zb[1]), {
+      icon: icons,
+    });
+    map.addOverLay(LngLats);
+  });
+};
 onMounted(() => {
   init();
 });
@@ -148,15 +322,16 @@ onMounted(() => {
   z-index: 2;
   position: absolute;
   width: 40px;
-  height: 40px;
   background: #ffffff;
   border-radius: 6px 6px 6px 6px;
   opacity: 1;
   text-align: center;
+  padding-bottom: 5px;
+  padding-top: 3px;
   .yxfwtp {
     width: 18px;
     height: 18px;
-    margin: 6px auto 0;
+    margin: 2px auto 0;
   }
   .yxfwwz {
     font-size: 8px;
@@ -176,7 +351,7 @@ onMounted(() => {
 .yxfwnr {
   margin-top: 72px;
   margin-left: 16px;
-  z-index: 2;
+  z-index: 10;
   position: absolute;
   background: #ffffff;
   border-radius: 6px 6px 6px 6px;
@@ -186,7 +361,7 @@ onMounted(() => {
     width: 50%;
     height: 5px;
     border-bottom: 1px solid #f1f1f1;
-    margin: 0 auto 5px;
+    margin: 0 auto 3px;
   }
   .yxfws {
     z-index: 2;
@@ -199,7 +374,7 @@ onMounted(() => {
     .yxfwtp {
       width: 18px;
       height: 18px;
-      margin: 6px auto 0;
+      margin: 4px auto 0;
     }
     .yxfwwz {
       font-size: 8px;
@@ -217,4 +392,83 @@ onMounted(() => {
     }
   }
 }
+.card {
+  width: 100%;
+  height: calc(100% - 102px);
+  overflow: auto;
+  padding-bottom: 80px;
+  .cardlist {
+    background-color: #fff;
+    padding: 14px 16px 0;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    .imgse {
+      width: 100px;
+      border-radius: 3px;
+      height: 68px;
+    }
+    .bodys {
+      border-bottom: 1px solid #f1f1f1;
+      height: 68px;
+      width: 250px;
+      margin-left: 12px;
+
+      .bq {
+        padding-top: 8px;
+        display: flex;
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        .van-tag--primary.van-tag--plain {
+          margin-right: 2px;
+        }
+      }
+      .bt {
+        font-size: 14px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .dz {
+        font-size: 12px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        color: #999999;
+        line-height: 12px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-top: 2px;
+        display: flex;
+        .tp {
+          width: 12px;
+        }
+        .xxdz {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          width: 170px;
+        }
+        .zl {
+          padding-right: 5px;
+        }
+
+        .ims {
+          width: 12px;
+          height: 12px;
+        }
+      }
+    }
+  }
+}
+:deep(.van-dropdown-menu__bar) {
+  box-shadow: 0 0px 0px rgba(100, 101, 102, 0.12);
+  border-bottom: 1px solid #f1f1f1;
+}
 </style>

src/views/IndexChat.vue

@@ -162,17 +162,56 @@
                                 </div>
                             </div>
                         </div>
-                        <div v-else-if="message.type == 'card4'" class="card3">
+                        <div v-else-if="message.type == 'card4'" class="card4">
                             <div class="c_top">
                                 {{ message.text }}
                             </div>
                             <div class="c_bt">
-                                <div class="cbt_it" v-for=" v in 3">
+                                <div class="switch">
-                                    <div class="it_name">神经内科</div>
+                                    <div class="sw_itm sw_itm_slected">
+                                        <div>立即就诊</div>
+                                        <div class="heng"></div>
+                                    </div>
+                                    <div class="sw_itm">
+                                        <div>更多医生</div>
+                                        <div class="heng"></div>
+                                    </div>
+                                </div>
+                                <div class="helper" v-for="dd in 3">
+                                    <div class="help_top">
+                                        推荐指数：98
+                                    </div>
+                                    <div class="help_botom">
+                                        <div class="card_top">
+                                            <img src="../assets/c1.png" alt="">
+                                            <div class="desc">
+                                                <div class="name">
+                                                    <span class="fullname">白亮</span>
+                                                    <span class="workername">主任医师</span>
+                                                </div>
+                                                <div class="work_tag">
+                                                    <span>象山县中医医院</span>
+                                                    <div class="xie"></div>
+                                                    <span>神经外科</span>
+                                                </div>
+                                                <div class="source_tag">
+                                                    <div class="tagitm">剩余号源1</div>
+                                                </div>
+                                                <div class="reson">
+                                                    <div>推荐理由：</div>
+                                                    <div class="fill_tag">离家近</div>
+                                                    <div class="fill_tag">主任医师</div>
+                                                    <div class="fill_tag fill_tag_warn">号源紧张</div>
+
+                                                </div>
+
+                                            </div>
+                                        </div>
                                         <div class="book_btn">预约</div>
                                     </div>
                                 </div>
                             </div>
+                        </div>
                         <div v-else-if="message.type == 'card5'" class="card5">
                             <div class="card_container">
                                 <div class="cd_l">
@@ -218,7 +257,7 @@
 
         <div class="c_bottom">
             <img src="../assets/3.png">
-            <input v-model="inputText" type="text" placeholder="有问题尽管问我~" class="sendinput" />
+            <input v-model="inputText" type="text" placeholder="有问题尽管问我~" @keydown.enter="sendMessage" class="sendinput" />
             <div class="w_icon">
                 <img src="../assets/4.png" alt="">
             </div>
@@ -228,19 +267,23 @@
     </div>
 </template>
 <script setup>
-import { ref, reactive, nextTick, onMounted } from 'vue'
+import { ref, reactive, nextTick, onMounted, watch } from 'vue'
 let inputText = ref('')
 let messages = reactive([
+
+]);
+let messagesCopy = reactive([
     { id: 1, type: 'fstxt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false },
     { id: 2, type: 'txt', text: '骨折去哪家医院', isMe: true },
-    { id: 3, type: 'card1', text: '基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。', isMe: false },
+    { id: 3, type: 'txt', text: '基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。', isMe: false },
-    { id: 4, type: 'txt', text: '基于号源等多种因素考虑，以下是相关医生推荐：', isMe: false },
+    { id: 4, type: 'card1', text: ' ', isMe: false },
-    { id: 5, type: 'card2', text: '基：', isMe: false },
+    { id: 5, type: 'txt', text: '基于号源等多种因素考虑，以下是相关医生推荐：', isMe: false },
-    { id: 6, type: 'txt', text: '最近总是头疼可以挂什么科室', isMe: true },
+    { id: 6, type: 'card2', text: '卡片2', isMe: false },
-    { id: 7, type: 'card3', text: '卡片3', isMe: false },
+    { id: 7, type: 'txt', text: '最近总是头疼可以挂什么科室', isMe: true },
-    { id: 8, type: 'card4', text: '为您推荐相关医生，也可选择查看更多医生。', isMe: false },
+    { id: 8, type: 'card3', text: '卡片3', isMe: false },
-    { id: 9, type: 'txt', text: '人民医院怎么走', isMe: true },
+    { id: 9, type: 'card4', text: '为您推荐相关医生，也可选择查看更多医生。', isMe: false },
-    { id: 10, type: 'card5', text: '卡片5', isMe: false },
+    { id: 10, type: 'txt', text: '人民医院怎么走', isMe: true },
+    { id: 11, type: 'card5', text: '卡片5', isMe: false },
 ]);
 
 const sendMessage = () => {
@@ -252,6 +295,24 @@ const sendMessage = () => {
     if (inputText.value.trim()) {
         console.log("sendMessage", inputText.value.trim())
         messages.push({ id: Date.now(), text: inputText.value, isMe: true, type: 'txt' });
+        if (inputText.value.indexOf('医院') != -1) {
+            messagesCopy[2].id = Date.now();
+            messagesCopy[3].id = Date.now()+1;
+            messages.push(messagesCopy[2],messagesCopy[3]);
+        } else if (inputText.value.indexOf('医生') != -1) {
+            messagesCopy[4].id = Date.now();
+            messagesCopy[5].id = Date.now()+1;
+            messages.push(messagesCopy[4],messagesCopy[5]);
+        }else if (inputText.value.indexOf('科室') != -1) {
+            messagesCopy[7].id = Date.now();
+            messagesCopy[8].id = Date.now()+1;
+            messages.push(messagesCopy[7],messagesCopy[8]);
+        }else if (inputText.value.indexOf('导航') != -1) {
+            messagesCopy[10].id = Date.now();
+            messages.push(messagesCopy[10]);
+        }else{
+            messages.push({ id: Date.now(), text: '抱歉没听听懂 支持 医院 医生 科室 导航 关键词', isMe: false, type: 'txt' });
+        }
         console.log("messages", messages)
         scollToButtom();
         inputText.value = '';
@@ -265,7 +326,19 @@ const scollToButtom = () => {
         }
     });
 }
-// onMounted(scrollToBottom);
+/* watch(inputText, (newValue, oldValue) => {
+    console.log('inputText changed from', oldValue, 'to', newValue)
+    // 在这里，你可以添加处理 inputText 变化的逻辑
+}) */
+onMounted(() => {
+    scollToButtom()
+    // messages
+    setTimeout(() => {
+        messages.push({ id: Date.now(), type: 'fstxt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false });
+    }, 500);
+
+})
+
 </script>
 <style lang="scss" scoped>
 ::-webkit-input-placeholder {
@@ -602,7 +675,7 @@ const scollToButtom = () => {
     background-color: #fff;
     box-sizing: border-box;
     padding: 16px;
-    border: 1px solid red;
+    border: 1px solid transparent;
 
     .c_top {
         margin-bottom: 12px;
@@ -641,7 +714,212 @@ const scollToButtom = () => {
     }
 }
 
-.card4 {}
+.card4 {
+    width: 330px;
+    height: 605px;
+    border-radius: 16px;
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 16px;
+    border: 1px solid transparent;
+
+    .c_top {
+        margin-bottom: 12px;
+    }
+
+    .c_bt {
+        .switch {
+            display: flex;
+            align-items: center;
+            border-top: 1px #F1F1F1 solid;
+            font-size: 14px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+
+            .sw_itm {
+                width: 50%;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+
+                .heng {
+                    width: 21px;
+                    height: 1px;
+                    border: 1px solid transparent;
+                }
+            }
+
+            .sw_itm_slected {
+                font-weight: 600;
+                color: #4379FF;
+
+                .heng {
+                    width: 21px;
+                    height: 1px;
+                    border: 1px solid #4379FF;
+                }
+            }
+
+            /*  .sw_itm_slected::before {
+                content: '';
+                display: block;
+                height: 1px;
+                width: 6px;
+                border: 1px solid #333;
+
+            } */
+        }
+
+        .helper {
+            background-color: #EFF3FC;
+            border-radius: 16px;
+            overflow: hidden;
+            margin-top: 8px;
+
+            .help_top {
+                background: linear-gradient(90deg, #6491FF 0%, #4379FF 100%);
+                padding-left: 16px;
+                color: #fff;
+                font-size: 14px;
+            }
+
+            .help_botom {
+                position: relative;
+
+                .card_top {
+                    display: flex;
+                    padding: 16px;
+                    box-sizing: border-box;
+
+                    img {
+                        width: 50px;
+                        height: 50px;
+                        border-radius: 5px;
+                        margin-right: 12px;
+                    }
+
+                    .desc {
+                        .name {
+
+                            .fullname {
+                                font-size: 14px;
+                                font-family: PingFang SC, PingFang SC;
+                                font-weight: 500;
+                                color: #333333;
+                                line-height: 14px;
+                            }
+
+                            .workername {
+                                font-size: 12px;
+                                font-family: PingFang SC, PingFang SC;
+                                font-weight: 500;
+                                color: #666666;
+                                margin-left: 8px;
+                            }
+                        }
+
+
+                        .work_tag {
+                            font-size: 12px;
+                            font-family: PingFang SC, PingFang SC;
+                            font-weight: 400;
+                            color: #999999;
+                            display: flex;
+                            align-items: center;
+
+                            .xie {
+                                width: 1px;
+                                border: 1px solid #999999;
+                                height: 12px;
+                                margin: 0px 10px;
+                                opacity: 0.5;
+                            }
+                        }
+
+                        .source_tag {
+                            font-size: 12px;
+                            font-family: PingFang SC, PingFang SC;
+                            font-weight: 400;
+                            color: #4379FF;
+                            display: flex;
+                            align-items: center;
+                            justify-content: flex-start;
+
+                            .tagitm {
+                                border: 1px solid #4379FF;
+                                padding: 0px 2px;
+                                text-align: center;
+                                height: 16px;
+                                line-height: 16px;
+
+                            }
+                        }
+
+                        .reson {
+                            font-size: 12px;
+                            font-family: PingFang SC, PingFang SC;
+                            font-weight: 400;
+                            color: #666666;
+                            display: flex;
+                            align-items: center;
+                            flex-wrap: wrap;
+                            margin-top: 8px;
+
+                            .fill_tag {
+                                height: 16px;
+                                background: #C2D2FC;
+                                border-radius: 4px 4px 4px 4px;
+                                font-size: 10px;
+                                font-family: PingFang SC, PingFang SC;
+                                font-weight: 400;
+                                color: #4379FF;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                padding: 4px;
+                                margin-right: 2px;
+                            }
+
+                            .fill_tag_warn {
+                                background-color: #FFD7C0;
+                                color: #FF5D29;
+                                border-radius: 4px 4px 4px 4px;
+                            }
+                        }
+
+                        .detail {
+                            font-size: 10px;
+                            font-family: PingFang SC, PingFang SC;
+                            font-weight: 400;
+                            color: #999999;
+                            line-height: 14px;
+                            margin-top: 12px;
+                        }
+                    }
+                }
+
+                .book_btn {
+                    width: 48px;
+                    height: 24px;
+                    background: linear-gradient(90deg, #6591FF 0%, #4379FF 100%);
+                    border-radius: 22px 22px 22px 22px;
+                    text-align: center;
+                    line-height: 24px;
+                    color: #fff;
+                    position: absolute;
+                    right: 16px;
+                    top: 16px;
+                }
+            }
+
+        }
+    }
+
+
+}
 
 .card5 {
     width: 280px;
@@ -657,6 +935,7 @@ const scollToButtom = () => {
         top: 50%;
         transform: translateY(-44%);
         right: -35px;
+
         img {
             width: 100%;
             height: 100%;
@@ -768,7 +1047,7 @@ const scollToButtom = () => {
     .message-container {
         height: calc(100vh - 124px);
         overflow: auto;
-        border: 1px red solid;
+        border: 1px transparent solid;
         background-color: rgb(245, 245, 251);
         position: relative;
         padding-top: 20px;
@@ -786,7 +1065,7 @@ const scollToButtom = () => {
         // height: 60px;
         min-height: 60px;
         background-color: #fff;
-        border: 1px solid red;
+        border: 1px solid transparent;
         position: absolute;
         // bottom: 180px;
         top: calc(100vh - 122px);
@@ -809,7 +1088,7 @@ const scollToButtom = () => {
             /*   display: flex;
             align-items: center;
             justify-content: flex-start; */
-            border: 1px solid red;
+            border: 1px solid transparent;
             // width: calc(100vw - 154px);
             width: 16px;
             height: 16px;

vite.config.js

@@ -5,6 +5,9 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {				// ← ← ← ← ← ←
+    host: '0.0.0.0'	// ← 新增内容 ←
+  },
   plugins: [
     vue(),
   ],