Ana Sayfa Keşfet Yardım
Giriş Yap
dangdang
/
fls-asp-hm-intelligent-tutoring
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

兼容

dangdang 2 hafta önce
ebeveyn
eb73f3cd69
işleme
d3e1331832
15 değiştirilmiş dosya ile 373 ekleme ve 118 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 1 1
      index.html
  2. BIN
      src/assets/audio.mp4
  3. BIN
      src/assets/dingzhi2.png
  4. BIN
      src/assets/role_scene2.png
  5. BIN
      src/assets/sence2.png
  6. BIN
      src/assets/优化文字展示.png
  7. 43 18
      src/components/NavBarPage.vue
  8. 5 0
      src/router/index.js
  9. 85 0
      src/views/AudioView.vue
  10. 18 0
      src/views/ChatTts.vue
  11. 95 44
      src/views/DetailView.vue
  12. 54 25
      src/views/HeimaView.vue
  13. 40 9
      src/views/components/BottomArea.vue
  14. 7 16
      src/views/components/ChatList.vue
  15. 25 5
      src/views/result/selectPage.vue

+ 1 - 1
index.html
Dosyayı Görüntüle 

@@ -6,7 +6,7 @@
 
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
   <meta name="viewport"
 
     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover" />
 
-  <title>Vite + Vue</title>
 
+  <title>平安租赁智能陪练</title>
 
 </head>
 
 
 <body>

BIN
src/assets/audio.mp4
Dosyayı Görüntüle


BIN
src/assets/dingzhi2.png
Dosyayı Görüntüle


BIN
src/assets/role_scene2.png
Dosyayı Görüntüle


BIN
src/assets/sence2.png
Dosyayı Görüntüle


BIN
src/assets/优化文字展示.png
Dosyayı Görüntüle


+ 43 - 18
src/components/NavBarPage.vue
Dosyayı Görüntüle 

@@ -1,51 +1,76 @@
 
 <script setup>
 
-import { ref, reactive, toRefs, onMounted} from 'vue'
 
+import { ref, reactive, toRefs, onMounted } from 'vue'
 
 const onClickLeft = () => {
 
-  if(props.type=='other'){
 
+  if (props.type == 'other') {
 
     history.back();
 
-  }else{
 
+  } else {
 
     window.location.href = '/';
 
   }
 
-  
+
 
 }
 
 const props = defineProps({
 
   title: {
 
     type: String,
 
     default: '标题'
 
   },
 
-  type:{
 
+  type: {
 
     type: String,
 
-    default:'other'
 
+    default: 'other'
 
   }
 
 })
 
 </script>
 
 <template>
 
-  <div>
 
+  <div class="page">
 
     <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" class="custom-navbar" />
 
   </div>
 
 </template>
 
 
 <style scoped>
 
-
 
 /* 自定义导航栏样式 */
 
 .custom-navbar {
 
-    background-color: #fff;
 
-    color: black;
 
-    position: fixed;
 
-    top: 0;
 
-    left: 0;
 
-    width: 100%;
 
-    z-index: 999;
 
+  background-color: #fff;
 
+  color: black;
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  z-index: 999;
 
+}
 
+
 
+/* 更改标题颜色 */
 
+.custom-navbar :deep(.van-nav-bar__title) {
 
+  color: black;
 
 }
 
 
 /* 更改左侧箭头颜色 */
 
 .custom-navbar :deep(.van-nav-bar__arrow) {
 
-    color: black;
 
+  color: black;
 
 }
 
 
 .custom-navbar::before,
 
 .custom-navbar::after {
 
-    display: none !important;
 
-    /* 直接隐藏伪元素 */
 
+  display: none !important;
 
+  /* 直接隐藏伪元素 */
 
+}
 
+
 
+@media (min-width: 1001px) {
 
+  .page {
 
+    --van-nav-bar-height: 60px;
 
+    /* 修改 NavBar 高度 */
 
+  }
 
+
 
+  .custom-navbar {
 
+    border-bottom: 2px solid #eee;
 
+  }
 
+
 
+  .custom-navbar :deep(.van-nav-bar__title) {
 
+    font-size: 18px;
 
+    font-weight: bold;
 
+  }
 
+
 
+  /* 调整返回箭头大小 */
 
+  .custom-navbar :deep(.van-nav-bar__arrow) {
 
+    font-size: 20px;
 
+  }
 
 }
 
 </style>

+ 5 - 0
src/router/index.js
Dosyayı Görüntüle 

@@ -26,6 +26,11 @@ const routes = [
 
     name:'result',
 
     component:()=>import('../views/ResultView.vue')
 
   },
 
+  {
 
+    path:'/audio',
 
+    name:'audio',
 
+    component:()=>import('../views/AudioView.vue')
 
+  },
 
   {
 
     path: '/demo/pic',
 
     name: 'DemoPic',

+ 85 - 0
src/views/AudioView.vue
Dosyayı Görüntüle 

@@ -0,0 +1,85 @@
 
+<script setup lang="ts">
 
+import {
 
+  ref,
 
+  reactive,
 
+  toRefs,
 
+  onMounted,
 
+  watch,
 
+  computed,
 
+  onBeforeUnmount,
 
+} from "vue";
 
+import NavBarPage from "../components/NavBarPage.vue";
 
+import randarPage from "./result/randarPage.vue";
 
+import { useRoute } from "vue-router";
 
+import { fetchTaskScore } from "./utils/api";
 
+import { Toast } from "vant";
 
+
 
+const route = useRoute();
 
+
 
+const score = ref(0);
 
+const data = ref(null);
 
+const scoresList = ref(null);
 
+const defectsList = ref(null);
 
+const taskId = computed(() => route.query.conversationId); // 会话ID "2c64eb8b69be432ca0bb9ae55bc78def"
 
+const randarlist = ref([0, 0, 0, 0]);
 
+const loading = ref(false);
 
+
 
+
 
+onMounted(() => {
 
+  handleResult();
 
+  window.addEventListener("popstate", function (event) {
 
+    // 执行一些操作，例如关闭当前页面或跳转到其他页面
 
+    window.location.href = "/#/home";
 
+  });
 
+});
 
+
 
+onBeforeUnmount(() => {
 
+  window.removeEventListener("popstate", function (event) {
 
+    // 执行一些操作，例如关闭当前页面或跳转到其他页面
 
+    window.location.href = "/#/home";
 
+  });
 
+});
 
+</script>
 
+<template>
 
+  <div class="result" style="overflow: hidden">
 
+    <NavBarPage title="视频演示" type="home" />
 
+    <div style="height: 46px"></div>
 
+    <div class="audio">
 
+      <video autoplay muted loop playsinline id="bg-video">
 
+        <source src="../assets/audio.mp4" type="video/mp4">
 
+      </video>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<style scoped lang="less">
 
+html,
 
+body {
 
+  margin: 0;
 
+  padding: 0;
 
+  height: 100vh;
 
+  overflow: hidden;
 
+  /* 禁止页面整体滚动 */
 
+}
 
+
 
+#bg-video {
 
+  position: fixed;   /* 固定在屏幕上 */
 
+  top: 0;
 
+  left: 0;
 
+  width: 100vw;      /* 占满视口宽度 */
 
+  height: 100vh;     /* 占满视口高度 */
 
+  // object-fit: cover; /* 保持比例并填充整个屏幕，可能会裁剪 */
 
+  z-index: -1;       /* 放在最底层，避免遮挡内容 */
 
+}
 
+
 
+@media (min-width: 1001px) {
 
+  .score {
 
+    height: 13rem;
 
+  }
 
+
 
+  .hidden {
 
+    height: 13rem;
 
+    overflow: hidden;
 
+  }
 
+}
 
+</style>

+ 18 - 0
src/views/ChatTts.vue
Dosyayı Görüntüle 

@@ -620,6 +620,11 @@ onMounted(() => {
 
         :text="text"
 
       />
 
     </div>
 
+     <!-- <div class="tooltip">
 
+        <p>车辆信息：24年10月起租金额14万，租期36月，已还9期</p>
 
+        <p>提前结清：121,021.62元，预期利益损失：6,535.05元</p>
 
+        <p>全额打款：137,362.73元，两者差额：16,341.11元  </p>
 
+    </div> -->
 
     <BG />
 
     <div class="loading" v-show="loading">
 
       <van-loading color="#0094ff" size="26px" vertical>加载中...</van-loading>
 
@@ -668,6 +673,19 @@ onMounted(() => {
 
   box-sizing: border-box;
 
   padding: 0 20px;
 
 }
 
+.tooltip {
 
+  width: 85%;
 
+  position: fixed;
 
+  top: 150px;
 
+  left: 50%;       /* 左边到视口宽度的一半 */
 
+  transform: translateX(-50%); /* 再左移自身宽度的一半，实现居中 */
 
+  z-index: 9999;
 
+  font-size: 14px;
 
+  padding: 8px 12px;
 
+  background-color: rgba(0, 0, 0, 0.5);
 
+  color: #fff;
 
+  border-radius: 8px;
 
+}
 
 .loading {
 
   position: fixed;
 
   top: 0;

+ 95 - 44
src/views/DetailView.vue
Dosyayı Görüntüle 

@@ -18,7 +18,7 @@ const roleOptions = [
 
 
 const roundsOptions = [
 
   { text: 3, value: 3 },
 
-  { text: 5, value: 5},
 
+  { text: 5, value: 5 },
 
   { text: 8, value: 8 },
 
 ];
 
 
@@ -51,7 +51,7 @@ const handleExam = async () => {
 
     tutoringRole: selectedRole.value,
 
     personality: selectedNature.value,
 
     round: selectedRounds.value,
 
-    sceneType:"HEI_MA",
 
+    sceneType: "HEI_MA",
 
   };
 
   try {
 
     const { body } = await fetchTaskCreate(data);
 
@@ -71,7 +71,7 @@ onMounted(() => {
 
 <template>
 
   <div class="detail">
 
     <nav-bar-page title="课程详情" />
 
-    <div style="height: 46px"></div>
 
+    <div class="h"></div>
 
     <div class="content">
 
       <div class="banner">
 
         <img src="../assets/role3.jpg" alt="" />
 
@@ -81,50 +81,33 @@ onMounted(() => {
 
         <div class="p_content">
 
           <span class="bg">背景：</span>
 
           <span>
 
-            客户通过<b>抖音直播</b>了解到我们是一家售卖新车和汽车金融服务的融资租赁公司，对我司直播间内的车价十分感兴趣，因此选择在直播间内留资。接下来需要在前期的电话中与客户沟通，解答客户疑问，建立基本信任并发掘客户真实的购车需求。
 
+            客户通过<b>抖音直播</b>了解到我们是一家售卖新车和汽车金融服务的融资租赁公司，对我司直播间内的车型车价介绍十分感兴趣，因此选择在直播间内留资。我们的销售仅仅获取到了客户的联系方式，对于客户的用车周期，目标车型，以及购车方式等都不了解。接下来需要在前期的电话中与客户沟通，在互动中解答客户疑问，建立基本信任并发掘客户真实的购车需求。
 
           </span>
 
         </div>
 
       </div>
 
       <div class="rules">
 
         <div class="title">
 
-          <van-icon
 
-            name="records-o"
 
-            size="1.5rem"
 
-            color="rgba(64,149,229,1)"
 
-            style="font-weight: bold"
 
-          />
 
+          <van-icon name="records-o" color="rgba(64,149,229,1)" style="font-weight: bold" />
 
           <span>规则</span>
 
         </div>
 
         <div class="r_content">
 
           <div class="r_item">
 
             <label for="roles">陪练角色</label>
 
-            <selectPage
 
-              :optionValue="roleOptions"
 
-              placeholder="请选择角色"
 
-              @update:selectedOption="handleSelectRoles"
 
-            />
 
+            <selectPage :optionValue="roleOptions" placeholder="请选择角色" @update:selectedOption="handleSelectRoles" />
 
           </div>
 
           <div class="r_item">
 
             <label for="nature">陪练性格</label>
 
-            <selectPage
 
-              :optionValue="naturesOptions"
 
-              placeholder="请选择性格"
 
-              @update:selectedOption="handleSelectNature"
 
-            />
 
+            <selectPage :optionValue="naturesOptions" placeholder="请选择性格" @update:selectedOption="handleSelectNature" />
 
           </div>
 
           <div class="r_item">
 
             <label for="rounds">交互轮次</label>
 
-            <selectPage
 
-              :optionValue="roundsOptions"
 
-              placeholder="请选择轮次"
 
-              @update:selectedOption="handleSelectRounds"
 
-            />
 
+            <selectPage :optionValue="roundsOptions" placeholder="请选择轮次" @update:selectedOption="handleSelectRounds" />
 
           </div>
 
         </div>
 
       </div>
 
       <div class="bottom">
 
         <button class="exam" @click="handleExam">考试</button>
 
-        <button>练习</button>
 
+        <!-- <button>练习</button> -->
 
       </div>
 
     </div>
 
   </div>
 
@@ -134,7 +117,11 @@ onMounted(() => {
 
 .detail {
 
   width: 100%;
 
   height: 100%;
 
+
 
   // overflow: hidden;
 
+  .h {
 
+    height: 46px;
 
+  }
 
 
   /* background-color: #f5f5f5; */
 
   .content {
 
@@ -152,7 +139,8 @@ onMounted(() => {
 
 
     .p_content {
 
       width: 100%;
 
-      height: 7rem;
 
+      height: 5rem;
 
+      overflow-y: auto;
 
       // overflow: scroll;
 
     }
 
 
@@ -183,6 +171,10 @@ onMounted(() => {
 
     box-shadow: 0rem 0.06rem 0.88rem 0rem rgba(0, 1, 130, 0.08);
 
     font-family: -regular;
 
 
+    // :deep(.van-icon) {
 
+    //   font-size: 1.5rem;
 
+    // }
 
+
 
     .title {
 
       display: flex;
 
       align-items: center;
 
@@ -221,8 +213,7 @@ onMounted(() => {
 
       -webkit-appearance: none;
 
       -moz-appearance: none;
 
       appearance: none;
 
-      background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-opacity%3D%22.9%22%20fill-rule%3D%22evenodd%22%20d%3D%22M17.35%209.65a.5.5%200%200%200-.7%200L12%2014.29%207.35%209.65a.5.5%200%201%200-.7.7l5%205c.2.2.5.2.7%200l5-5a.5.5%200%200%200%200-.7%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E")
 
-        no-repeat right 10px center;
 
+      background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-opacity%3D%22.9%22%20fill-rule%3D%22evenodd%22%20d%3D%22M17.35%209.65a.5.5%200%200%200-.7%200L12%2014.29%207.35%209.65a.5.5%200%201%200-.7.7l5%205c.2.2.5.2.7%200l5-5a.5.5%200%200%200%200-.7%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat right 10px center;
 
       background-size: 1.5rem 1.5rem;
 
       /* 调整箭头的大小 */
 
     }
 
@@ -242,8 +233,9 @@ onMounted(() => {
 
   .bottom {
 
     width: 100%;
 
     display: flex;
 
-    justify-content: space-between;
 
-    margin-bottom: 1.38rem;
 
+    align-items: center;
 
+    justify-content: center;
 
+    // margin-bottom: 1.38rem;
 
 
     button {
 
       width: 10rem;
 
@@ -261,7 +253,7 @@ onMounted(() => {
 
     .exam {
 
       color: #fff;
 
       background-color: rgba(64, 149, 229, 1);
 
-      margin-right: 0.63rem;
 
+      // margin-right: 0.63rem;
 
     }
 
   }
 
 }
 
@@ -278,24 +270,83 @@ onMounted(() => {
 
   height: 11rem;
 
   object-fit: cover;
 
 }
 
+
 
 @media (min-width: 1001px) {
 
-  .banner{
 
-    height: 26rem;
 
-    img{
 
+  .banner {
 
+    height: 30rem;
 
+
 
+    img {
 
       height: 100%;
 
     }
 
   }
 
-  .produce{
 
-    p{
 
-      margin-bottom: 1rem;
 
+
 
+  .detail {
 
+    width: 95%;
 
+    margin: 0 auto;
 
+
 
+    .produce {
 
+      p {
 
+        font-size: 1.3rem;
 
+        margin-bottom: 1.1rem;
 
+      }
 
+
 
+      .p_content {
 
+        height: 8rem;
 
+        overflow-y: hidden;
 
+
 
+        // width: 90%;
 
+        span {
 
+          font-size: 1.2rem;
 
+          line-height: 1.8rem;
 
+        }
 
+      }
 
+
 
+      .bg {
 
+        font-size: 1.2rem;
 
+      }
 
+    }
 
+
 
+    .rules {
 
+      height: 20rem;
 
+
 
+      .title {
 
+        padding: 2.2rem 1.5rem 1.1rem 1.5rem;
 
+
 
+        span {
 
+          font-size: 1.6rem;
 
+        }
 
+
 
+        :deep(.van-icon) {
 
+          font-size: 2rem;
 
+        }
 
+      }
 
+
 
+      .r_item {
 
+        font-size: 1.2rem;
 
+      }
 
+
 
+      .r_item label {
 
+        margin-right: 1.5rem;
 
+      }
 
+
 
+      .r_content {
 
+        margin-top: 2rem;
 
+        margin-left: 14rem;
 
+      }
 
     }
 
-    .p_content{
 
-      width: 90%;
 
+
 
+    .h {
 
+      height: 61px;
 
     }
 
-  }
 
-  .detail{
 
-    .rules{
 
-      height: 15rem;
 
+
 
+    .bottom {
 
+      margin-top: 3rem;
 
+
 
+      .exam {
 
+        width: 12rem;
 
+        height: 3rem;
 
+        font-size: 1.5rem;
 
+      }
 
     }
 
   }
 
 }

+ 54 - 25
src/views/HeimaView.vue
Dosyayı Görüntüle 

@@ -8,6 +8,9 @@ const router = useRouter();
 
 const handleDetail = () => {
 
   router.push("/detail");
 
 };
 
+const handleAudio = () => {
 
+  router.push("/audio");
 
+}
 
 </script>
 
 <template>
 
   <div class="home">
 
@@ -32,7 +35,7 @@ const handleDetail = () => {
 
         <div class="card_item bg w">
 
           <p>1.定制专属训练场景</p>
 
           <!-- <div class="dingzhi"></div> -->
 
-          <img src="../assets/dingzhi.webp" alt="">
 
+          <img src="../assets/dingzhi2.png" alt="">
 
         </div>
 
         <div class="card_item tg w1">
 
           <p>2.自由设定客户角色</p>
 
@@ -46,20 +49,16 @@ const handleDetail = () => {
 
         </div>
 
       </div>
 
       <div class="produce">
 
-        <div class="left_img"></div>
 
-        <div class="right">
 
-          <p>智能陪练应用场景</p>
 
-          <ul>
 
-            <li>汽融直客-客户经理电话邀约</li>
 
-            <li>汽融客服-在线坐席结清挽留</li>
 
-            <li>小微新回-客户经理授信拜访</li>
 
-          </ul>
 
+        <div class="left_img">
 
+          <p>5.智能陪练应用场景</p>
 
+          <span>汽融直客-客户经理电话邀约</span>
 
+          <span>汽融客服-在线坐席结清挽留</span>
 
+          <span>小微新回-客户经理授信拜访</span>
 
         </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>
 
-
 
+        <van-button size="small" @click="handleAudio" class="w">视频演示</van-button>
 
       </div>
 
     </div>
 
 
@@ -125,6 +124,7 @@ html {
 
   margin: 1.3rem 0 0.65rem 1.3rem;
 
 
   .product {
 
+    display: flex;
 
     font-weight: 700;
 
     color: #fff;
 
     font-size: 2.5rem;
 
@@ -135,7 +135,7 @@ html {
 
     }
 
 
     .separator {
 
-      margin-left: 3vw;
 
+      margin: 0 0.5rem;
 
       display: inline-block;
 
       width: 0.8rem;
 
       height: 0.8rem;
 
@@ -196,7 +196,7 @@ html {
 
     .scence {
 
       height: 100%;
 
       width: 100%;
 
-      background-image: url(../assets/role_scene.webp);
 
+      background-image: url(../assets/role_scene2.png);
 
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
       background-repeat: no-repeat;
 
       background-size: 90% auto;
 
@@ -230,7 +230,7 @@ html {
 
   .voice {
 
     max-height: 11.5rem;
 
     height: 9.5rem;
 
-    background-image: url(../assets/sence.webp);
 
+    background-image: url(../assets/sence2.png);
 
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
     background-repeat: no-repeat;
 
     background-size: cover;
 
@@ -275,7 +275,21 @@ html {
 
     background-position: center;
 
     border-radius: 8px;
 
     box-sizing: border-box;
 
-    // padding: 1.3rem;
 
+    display: flex;
 
+    flex-direction: column;
 
+    color: #fff;
 
+    box-sizing: border-box;
 
+    padding: 1.13rem;
 
+
 
+    p {
 
+      font-size: 0.88rem;
 
+      text-align: right;
 
+    }
 
+
 
+    span {
 
+      font-size: 0.6rem;
 
+      text-align: right;
 
+    }
 
   }
 
 
   .right {
 
@@ -326,12 +340,11 @@ html {
 
   display: flex;
 
   align-items: center;
 
   justify-content: center;
 
-  margin-top: 1.1rem;
 
-  // padding: 0 3rem 3rem 3rem;
 
+  margin-top: 1.5rem;
 
 
   .w {
 
     width: 7rem;
 
-    height: 3rem;
 
+    height: 2.5rem;
 
     font-size: 1rem;
 
     background-color: rgb(255, 102, 51);
 
     color: #fff;
 
@@ -387,7 +400,7 @@ html {
 
 
     .card_item {
 
       padding: 1.2rem 0 0;
 
-      margin-bottom: 1.1rem;
 
+      margin-bottom: 1.3rem;
 
 
       p {
 
         font-size: 1.3rem;
 
@@ -414,17 +427,24 @@ html {
 
     padding: 0 2rem;
 
     height: 16rem;
 
 
-    .right {
 
-      padding: 1.2rem 0 0;
 
-      p{
 
+    .left_img {
 
+      p {
 
         font-size: 1.3rem;
 
+        text-align: right;
 
+        margin-right: 11rem;
 
+        margin-bottom: 1.13rem;
 
+        margin-top: 2rem;
 
       }
 
-      ul li {
 
-        font-size: 1rem;
 
-        margin-left: 1rem;
 
+
 
+      span {
 
+        font-size: 1.1rem;
 
+        text-align: right;
 
+        margin-right: 10rem;
 
         line-height: 2rem;
 
       }
 
     }
 
+
 
+
 
   }
 
 
   .test {
 
@@ -447,5 +467,14 @@ html {
 
     background-size: 100% auto;
 
   }
 
 
+  .bottom {
 
+    margin-top: 2.5rem;
 
+
 
+    .w {
 
+      width: 10rem;
 
+      height: 3.2rem;
 
+      font-size: 1.3rem;
 
+    }
 
+  }
 
 }
 
 </style>

+ 40 - 9
src/views/components/BottomArea.vue
Dosyayı Görüntüle 

@@ -134,8 +134,8 @@ const TransferUpload = (number, blobOrNull, duration, blobRec, isClose) => {
 
   if (isClose) {
 
     console.log(
 
       "No." +
 
-        (number < 100 ? ("000" + number).substr(-3) : number) +
 
-        ":已停止传输"
 
+      (number < 100 ? ("000" + number).substr(-3) : number) +
 
+      ":已停止传输"
 
     );
 
   }
 
 };
 
@@ -254,20 +254,20 @@ const stopRecording = async () => {
 
 </script>
 
 
 <template>
 
-  <div
 
-    :class="`bottom-btn ${isTalking ? 'touch-start' : ''}`"
 
-    @touchstart="startRecording"
 
-    @touchend="stopRecording"
 
-  >
 
+  <div :class="`bottom-btn ${isTalking ? 'touch-start' : ''}`" @touchstart="startRecording" @touchend="stopRecording">
 
     <div class="btn">
 
       <div class="text">按住说话</div>
 
-      <Icon class="icon" color="white"><KeyboardAltOutlined /></Icon>
 
+      <Icon class="icon" color="white">
 
+        <KeyboardAltOutlined />
 
+      </Icon>
 
     </div>
 
     <div class="talk-item">
 
       <div class="wave">
 
         <div class="recwave" style="height: 100%; width: 100%"></div>
 
       </div>
 
-      <Icon class="icon" color="#1989fa"><KeyboardVoiceOutlined /></Icon>
 
+      <Icon class="icon" color="#1989fa">
 
+        <KeyboardVoiceOutlined />
 
+      </Icon>
 
       <div>松手发送</div>
 
     </div>
 
   </div>
 
@@ -287,17 +287,21 @@ const stopRecording = async () => {
 
   transition: height 0.1s, background 0.1s, border-radius 0.1s;
 
   padding-bottom: env(safe-area-inset-bottom);
 
 }
 
+
 
 .bottom-btn.touch-start {
 
   background: rgba(255, 255, 255, 0.8);
 
   border-radius: 50% 50% 0 0;
 
   height: 120px;
 
 }
 
+
 
 .bottom-btn.touch-start .btn {
 
   display: none;
 
 }
 
+
 
 .bottom-btn.touch-start .talk-item {
 
   visibility: visible;
 
 }
 
+
 
 .btn {
 
   width: 90vw;
 
   height: 40px;
 
@@ -310,10 +314,12 @@ const stopRecording = async () => {
 
   position: absolute;
 
   bottom: calc(20px + env(safe-area-inset-bottom));
 
 }
 
+
 
 .btn .text {
 
   flex-grow: 1;
 
   text-align: center;
 
 }
 
+
 
 .btn .icon {
 
   margin-right: 10px;
 
 }
 
@@ -325,6 +331,7 @@ const stopRecording = async () => {
 
   text-align: center;
 
   color: #1989fa;
 
 }
 
+
 
 .talk-item .wave {
 
   position: absolute;
 
   top: -100px;
 
@@ -335,6 +342,7 @@ const stopRecording = async () => {
 
   background: #1989fa;
 
   border-radius: 8px;
 
 }
 
+
 
 .talk-item .wave::after {
 
   content: "";
 
   position: absolute;
 
@@ -347,7 +355,30 @@ const stopRecording = async () => {
 
   border-right: 8px solid transparent;
 
   border-top: 8px solid rgb(25, 137, 250);
 
 }
 
+
 
 .talk-item .icon {
 
   font-size: 24px;
 
 }
 
+
 
+@media (min-width: 1001px) {
 
+  .btn {
 
+    height: 60px;
 
+  }
 
+
 
+  .btn .text {
 
+    font-size: 1.3rem;
 
+  }
 
+
 
+  .btn .icon {
 
+    margin-right: 15px;
 
+    font-size: 1.5rem;
 
+  }
 
+
 
+  .bottom-btn.touch-start {
 
+    background: rgba(255, 255, 255, 0.8);
 
+    border-radius: 50% 50% 0 0;
 
+    height: 200px;
 
+  }
 
+
 
+}
 
 </style>

+ 7 - 16
src/views/components/ChatList.vue
Dosyayı Görüntüle 

@@ -24,21 +24,6 @@ defineExpose({
 
   scrollToBottom,
 
 });
 
 </script>
 
-
 
-<!-- <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">
 
-        {{ item.text }}
 
-      </div>
 
-      <div v-if="!item.text" class="loader">
 
-        <div></div>
 
-        <div></div>
 
-        <div></div>
 
-      </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}`">
 
@@ -47,7 +32,7 @@ defineExpose({
 
          客户
 
         </div>
 
          <div v-if="item.type === 'user'" class="avatar">
 
-          客户经理
 
+          销售
 
         </div>
 
         <div class="chat-item">
 
           {{ item.text }}
 
@@ -163,4 +148,10 @@ defineExpose({
 
     transform: scale(1);
 
   }
 
 }
 
+@media (min-width: 1001px) {
 
+  .chat-area{
 
+    bottom: calc(70px + env(safe-area-inset-bottom));
 
+    padding: 10px 15px;
 
+  }
 
+}
 
 </style>

+ 25 - 5
src/views/result/selectPage.vue
Dosyayı Görüntüle 

@@ -94,6 +94,10 @@ onBeforeUnmount(() => {
 
     height: 2rem;
 
 }
 
 
+.custom-select-trigger :deep(.van-icon:before) {
 
+    font-size: 0.88rem;
 
+}
 
+
 
 .custom-dropdown {
 
     position: absolute;
 
     z-index: 1000;
 
@@ -134,15 +138,31 @@ onBeforeUnmount(() => {
 
 
 @media (min-width: 1001px) {
 
     .custom-select {
 
-        width: 15rem;
 
+        width: 18rem;
 
     }
 
-    .custom-select-trigger{
 
+
 
+    .custom-select-trigger {
 
         height: 2.5rem;
 
+
 
+    }
 
+
 
+    .custom-select-trigger :deep(.van-icon:before) {
 
+        font-size: 1.1rem;
 
+    }
 
+
 
+    .custom-dropdown {
 
+        max-height: 15rem;
 
     }
 
+
 
     .dropdown-item {
 
-    padding: 7px 10px;
 
-    font-size: 0.88rem;
 
+        padding: 7px 10px;
 
+        font-size: 1rem;
 
+    }
 
 
-}
 
+    .selected-text {
 
+
 
+        font-size: 1.1rem;
 
+
 
+    }
 
 }
 
 </style>