兼容

src/main.js

@@ -10,7 +10,7 @@ import 'vant/lib/index.css';
 const app = createApp(App);
 
 // 初始化 VConsole
-const vConsole = new VConsole()
+// const vConsole = new VConsole()
 
 // 将封装后的 Vue Router 注入应用
 app.use(router);

src/views/DetailView.vue

@@ -81,7 +81,7 @@ onMounted(() => {
         <div class="p_content">
           <span class="bg">背景：</span>
           <span>
-            客户通过<b>抖音直播</b>了解到我们是一家售卖新车的汽贸城车商，对我司直播间内的车价十分感兴趣，因此选择在直播间内留资。接下来需要在前期的电话中与客户沟通，解答客户疑问，建立基本信任并发掘客户真实的购车需求。
+            客户通过<b>抖音直播</b>了解到我们是一家售卖新车和汽车金融服务的融资租赁公司，对我司直播间内的车价十分感兴趣，因此选择在直播间内留资。接下来需要在前期的电话中与客户沟通，解答客户疑问，建立基本信任并发掘客户真实的购车需求。
           </span>
         </div>
       </div>
@@ -153,7 +153,7 @@ onMounted(() => {
     .p_content {
       width: 100%;
       height: 7rem;
-      overflow: scroll;
+      // overflow: scroll;
     }
 
     span {
@@ -278,4 +278,25 @@ onMounted(() => {
   height: 11rem;
   object-fit: cover;
 }
+@media (min-width: 1001px) {
+  .banner{
+    height: 26rem;
+    img{
+      height: 100%;
+    }
+  }
+  .produce{
+    p{
+      margin-bottom: 1rem;
+    }
+    .p_content{
+      width: 90%;
+    }
+  }
+  .detail{
+    .rules{
+      height: 15rem;
+    }
+  }
+}
 </style>

src/views/HeimaView.vue

@@ -31,6 +31,7 @@ const handleDetail = () => {
       <div class="card_list">
         <div class="card_item bg w">
           <p>1.定制专属训练场景</p>
+          <!-- <div class="dingzhi"></div> -->
           <img src="../assets/dingzhi.webp" alt="">
         </div>
         <div class="card_item tg w1">
@@ -44,19 +45,31 @@ const handleDetail = () => {
           <HeimaPage></HeimaPage>
         </div>
       </div>
+      <div class="produce">
+        <div class="left_img"></div>
+        <div class="right">
+          <p>智能陪练应用场景</p>
+          <ul>
+            <li>汽融直客-客户经理电话邀约</li>
+            <li>汽融客服-在线坐席结清挽留</li>
+            <li>小微新回-客户经理授信拜访</li>
+          </ul>
+        </div>
+      </div>
+      <div class="bottom">
+        <van-button size="small" @click="handleDetail" class="w">立即体验</van-button>
+        <van-button size="small" @click="handleDetail" class="w">视频演示</van-button>
+
+      </div>
     </div>
-    <div class="bottom">
-      <van-button size="small" @click="handleDetail" class="w">立即体验</van-button>
-    </div>
+
 
   </div>
 </template>
 
 <style scoped lang="less">
-
 html {
   touch-action: manipulation;
-
 }
 
 .home {
@@ -115,12 +128,13 @@ html {
     font-weight: 700;
     color: #fff;
     font-size: 2.5rem;
-    p{
+
+    p {
       display: flex;
       align-items: center;
     }
 
-    .separator{
+    .separator {
       margin-left: 3vw;
       display: inline-block;
       width: 0.8rem;
@@ -150,7 +164,7 @@ html {
 }
 
 .card_list {
-  flex: 1;
+  // flex: 1;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -185,9 +199,20 @@ html {
       background-image: url(../assets/role_scene.webp);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       background-repeat: no-repeat;
-      background-size: cover;
+      background-size: 90% auto;
       background-position: center;
     }
+
+    //  .dingzhi {
+    //   min-height: 10.5rem;
+    //   height: 100%;
+    //   width: 100%;
+    //   background-image: url(../assets/dingzhi.webp);
+    //   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    //   background-repeat: no-repeat;
+    //   background-size: cover;
+    //   background-position: center;
+    // }
   }
 
   .bg {
@@ -221,30 +246,96 @@ html {
   }
 
   .w {
-    width: 45%;
+    width: 46%;
   }
 
   .w1 {
     width: 52%
   }
-  .h{
+
+  .h {
     max-height: 11.5rem;
     height: 9.5rem;
   }
 }
 
+.produce {
+  padding: 0 1.3rem;
+  display: flex;
+  justify-content: space-between;
+  // background-color: #fff;
+
+  .left_img {
+    // width: 60%;
+    flex: 1;
+    background-image: url(../assets/优化文字展示.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    // background-position: left center;
+    background-position: center;
+    border-radius: 8px;
+    box-sizing: border-box;
+    // padding: 1.3rem;
+  }
+
+  .right {
+    // width: 52%;
+    flex: 1;
+    background-color: #fff;
+    // border-radius: 8px;
+    box-sizing: border-box;
+    padding: 0.5rem;
+
+    p {
+      font-size: .88rem;
+      text-align: center;
+      margin-bottom: 0.5rem;
+    }
+
+    ul li {
+      font-size: 0.8rem;
+      color: #666;
+    }
+  }
+}
+
+.test {
+  height: 10rem;
+  width: 100%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 1.3rem;
+  color: #fff;
+  text-align: right;
+
+  ul {
+    list-style-type: disc;
+    padding-left: 8.2rem;
+    margin: 1em 0;
+    font-size: 0.8rem;
+  }
+
+  span {
+    text-align: right;
+  }
+}
+
 .bottom {
   // flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 3rem 3rem 3rem;
+  margin-top: 1.1rem;
+  // padding: 0 3rem 3rem 3rem;
 
   .w {
-    width: 30vw;
-    font-size: 3vw;
-    background-color: rgb(255,102,51);
+    width: 7rem;
+    height: 3rem;
+    font-size: 1rem;
+    background-color: rgb(255, 102, 51);
     color: #fff;
+    margin-right: 1.2rem;
   }
 }
 
@@ -254,4 +345,107 @@ html {
     /* 允许垂直滚动，禁止水平滚动和缩放 */
   }
 }
+
+@media (min-width: 1001px) {
+
+  /* 在这里编写你的样式规则 */
+  .logo {
+    padding: 2rem;
+
+    img {
+      width: 3rem;
+      height: 3rem;
+      margin-right: 5px;
+    }
+
+    span {
+      font-size: 1.5rem;
+    }
+  }
+
+  .banner {
+    margin: 1rem 0 1.13rem 2rem;
+
+    .product {
+      font-size: 3.3rem;
+    }
+
+    .separator {
+      margin-left: 3vw;
+      display: inline-block;
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    .btn {
+      margin-top: 1.8rem;
+    }
+  }
+
+  .card_list {
+    padding: 1.3rem 2rem 0 2rem;
+
+    .card_item {
+      padding: 1.2rem 0 0;
+      margin-bottom: 1.1rem;
+
+      p {
+        font-size: 1.3rem;
+      }
+
+      img {
+        max-width: 100%;
+        height: 26rem;
+      }
+    }
+
+    .voice {
+      height: 18rem;
+      max-height: 18rem;
+    }
+
+    .h {
+      height: 18rem;
+      max-height: 18rem;
+    }
+  }
+
+  .produce {
+    padding: 0 2rem;
+    height: 16rem;
+
+    .right {
+      padding: 1.2rem 0 0;
+      p{
+        font-size: 1.3rem;
+      }
+      ul li {
+        font-size: 1rem;
+        margin-left: 1rem;
+        line-height: 2rem;
+      }
+    }
+  }
+
+  .test {
+    height: 20rem;
+    width: 100%;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    box-sizing: border-box;
+    padding: 1.3rem;
+    color: #fff;
+    text-align: right;
+
+    ul {
+      list-style-type: disc;
+    }
+  }
+
+  .test {
+    height: 15rem;
+    background-size: 100% auto;
+  }
+
+}
 </style>

src/views/components/ChatList.vue

@@ -25,7 +25,7 @@ defineExpose({
 });
 </script>
 
-<template>
+<!-- <template>
   <div id="scrollRef" ref="scrollRef" class="chat-area">
     <div v-for="item in chatList" :key="item.id" :class="`chat-${item.type}`">
       <div v-if="item.text" class="chat-item">
@@ -38,21 +38,52 @@ defineExpose({
       </div>
     </div>
   </div>
+</template> -->
+<template>
+  <div id="scrollRef" ref="scrollRef" class="chat-area">
+    <div v-for="item in chatList" :key="item.id" :class="`chat-${item.type}`">
+      <div v-if="item.text" class="chat-wrapper">
+         <div v-if="item.type === 'gpt'">
+         客户
+        </div>
+         <div v-if="item.type === 'user'" class="avatar">
+          客户经理
+        </div>
+        <div class="chat-item">
+          {{ item.text }}
+        </div>
+      </div>
+      <div v-if="!item.text" class="loader">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .chat-area {
   position: relative;
   position: fixed;
-  width: 100vw;
+  /* overflow-x: hidden; */
+  /* width: calc(100vw - 20px);  */
+  width: 100%;
+  /* width: 99vw; */
   max-height: 50vh;
   /* bottom: calc(80px + env(safe-area-inset-bottom)); */
   bottom: calc(65px + env(safe-area-inset-bottom));
   padding: 10px;
-  overflow-y: auto;
+  /* overflow-y: auto; */
   box-sizing: border-box;
   mask-image: linear-gradient(to top, black 70%, transparent);
   -mask-image: linear-gradient(to top, black 70%, transparent);
+  overflow-y: auto;      /* 可以滚动 */
+  overflow-x: hidden;    /* 禁止横向滚动 */
+
+  /* 隐藏滚动条（跨浏览器） */
+  scrollbar-width: none;     /* Firefox */
+  -ms-overflow-style: none; 
 }
 .chat-area .chat-gpt {
   display: flex;
@@ -62,6 +93,14 @@ defineExpose({
   display: flex;
   justify-content: end;
 }
+.chat-wrapper {
+  max-width: 45%;
+  color: #fff;
+  font-size: 14px;
+}
+.avatar{
+  text-align: right;
+}
 .chat-item {
   color: white;
   padding: 10px;
@@ -72,7 +111,7 @@ defineExpose({
   word-break: break-all;
   position: relative;
   background: rgba(25, 137, 250, 0.8);
-  max-width: 45%;
+  /* max-width: 45%; */
 }
 .chat-area .chat-gpt .chat-item {
   border-radius: 0 4px 4px 4px;
@@ -87,6 +126,7 @@ defineExpose({
   display: inline-block;
   position: relative;
   height: 40px;
+  width: 80px;
 }
 
 .loader div {

src/views/components/HeimaPage.vue

@@ -5,59 +5,168 @@ import { nextTick, onMounted } from 'vue';
 const echartsRander = () => {
     var chartDom = document.getElementById('chartsId');
     var myChart = echarts.init(chartDom);
-    var option;
+    // var option;
 
-    option = {
-        title: {
-            text: '4.大模型复盘及话术建议',
-            left: 'center',
-            // top: '53%',
-            padding: [3, 0],
-            textStyle: {
-                color: '#000',
-                fontSize: 14,
-                fontWeight: '400',
-                align: 'center',
-            }
-        },
-        tooltip: {
-            trigger: 'item'
-        },
-        series: [
-            {
-                name: '评分标准',
-                type: 'pie',
-                radius: ['30%', '45%'],
-                center: ['50%', '60%'],
-                avoidLabelOverlap: false,
+    // option = {
+    //     title: {
+    //         text: '4.大模型复盘及话术建议',
+    //         left: 'center',
+    //         // top: '53%',
+    //         padding: [3, 0],
+    //         textStyle: {
+    //             color: '#000',
+    //             fontSize: 14,
+    //             fontWeight: '400',
+    //             align: 'center',
+    //         }
+    //     },
+    //     tooltip: {
+    //         trigger: 'item'
+    //     },
+    //     series: [
+    //         {
+    //             name: '评分标准',
+    //             type: 'pie',
+    //             radius: ['30%', '45%'],
+    //             center: ['50%', '60%'],
+    //             avoidLabelOverlap: false,
 
-                label: {
-                    fontSize: 6,
-                },
-                labelLine: {
-                    show: true, // 显示引导线
-                    length: 10,
-                    length2: 6,
-                },
-                emphasis: {
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)'
-                    }
-                },
+    //             label: {
+    //                 fontSize: 6,
+    //             },
+    //             labelLine: {
+    //                 show: true, // 显示引导线
+    //                 length: 10,
+    //                 length2: 6,
+    //             },
+    //             emphasis: {
+    //                 itemStyle: {
+    //                     shadowBlur: 10,
+    //                     shadowOffsetX: 0,
+    //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
+    //                 }
+    //             },
 
-                data: [
-                    { value: 20, name: '自我介绍' },
-                    { value: 18, name: '画像采集' },
-                    { value: 15, name: '需求挖掘' },
-                    { value: 20, name: '沟通转化' },
-                ]
-            }
-        ],
+    //             data: [
+    //                 { value: 20, name: '自我介绍' },
+    //                 { value: 18, name: '画像采集' },
+    //                 { value: 15, name: '需求挖掘' },
+    //                 { value: 20, name: '沟通转化' },
+    //             ]
+    //         }
+    //     ],
+    //     media:[
+    //         {
+    //             query:{
+    //                 minWidth: 1025,
+    //             },
+    //             option:{
+    //                 title: {
+    //                     textStyle:{
+    //                         fontSize:20.8
+    //                     }
+    //                 }
+    //             }
+    //         }
+    //     ]
+    // };
+
+    let option = {
+        baseOption: {
+            title: {
+                text: '4.大模型复盘及话术建议',
+                left: 'center',
+                padding: [3, 0],
+                textStyle: {
+                    color: '#000',
+                    fontSize: 14,
+                    fontWeight: '400',
+                    align: 'center',
+                }
+            },
+            tooltip: {
+                trigger: 'item'
+            },
+            series: [
+                {
+                    name: '评分标准',
+                    type: 'pie',
+                    radius: ['30%', '45%'],
+                    center: ['50%', '60%'],
+                    label: {
+                        fontSize: 6,
+                    },
+                    labelLine: {
+                        show: true,
+                        length: 10,
+                        length2: 6,
+                    },
+                    data: [
+                        { value: 20, name: '自我介绍' },
+                        { value: 18, name: '画像采集' },
+                        { value: 15, name: '需求挖掘' },
+                        { value: 20, name: '沟通转化' },
+                    ]
+                }
+            ],
+        },
 
+        // 响应式规则
+        media: [
+            {
+                query: { maxWidth: 500 }, // 屏幕 <=500px
+                option: {
+                    title: {
+                        textStyle: {
+                            fontSize: 14
+                        }
+                    },
+                    series: [{
+                        radius: ['30%', '45%'],
+                        label: {
+                            fontSize: 8
+                        }
+                    }]
+                }
+            },
+            {
+                query: { minWidth: 501, maxWidth: 1024 }, // 平板
+                option: {
+                    title: {
+                        textStyle: {
+                            fontSize: 20
+                        }
+                    },
+                    series: [{
+                        radius: ['30%', '45%'],
+                        center: ['50%', '55%'],
+                        label: {
+                            fontSize: 14
+                        }
+                    }]
+                }
+            },
+            {
+                query: { minWidth: 1025 }, // 大屏
+                option: {
+                    title: {
+                        textStyle: {
+                            fontSize: 18
+                        }
+                    },
+                    series: [{
+                        radius: ['35%', '50%'],
+                        label: {
+                            fontSize: 20
+                        }
+                    }]
+                }
+            }
+        ]
     };
 
+    // myChart.setOption(option);
+
     option && myChart.setOption(option);
     window.addEventListener('resize', function () {
         myChart.resize();

src/views/result/selectPage.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { ref, nextTick,defineProps,defineEmits,onMounted,onBeforeUnmount} from 'vue';
+import { ref, nextTick, defineProps, defineEmits, onMounted, onBeforeUnmount } from 'vue';
 
 defineProps({
     optionValue: {
@@ -107,9 +107,9 @@ onBeforeUnmount(() => {
     /* 保持与触发器等宽 */
 }
 
-.selected-text{
-    background-color: rgba(255,255,255,1);
-    color: rgba(16,16,16,1);
+.selected-text {
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
     font-size: 0.88rem;
     text-align: left;
     font-family: PingFangSC-regular;
@@ -126,8 +126,23 @@ onBeforeUnmount(() => {
 .dropdown-item:hover {
     background-color: #f5f7fa;
 }
+
 .dropdown-item-selected {
     color: #fff;
     background-color: #4095e5;
 }
+
+@media (min-width: 1001px) {
+    .custom-select {
+        width: 15rem;
+    }
+    .custom-select-trigger{
+        height: 2.5rem;
+    }
+    .dropdown-item {
+    padding: 7px 10px;
+    font-size: 0.88rem;
+
+}
+}
 </style>