框架调整

src/App.vue

@@ -1,16 +1,24 @@
 <template>
   <div id="app">
-    <router-view />
+    <div class="w-full h-full flex">
+      <NavMenu />
+      <div class="pageContent">
+        <router-view />
+      </div>
+      
+    </div>
     <loginPopup />
   </div>
 </template>
 
 <script>
+import NavMenu from '@/views/components/NavMenu'
 import loginPopup from '@/views/homeComponents/loginPopup'
 export default  {
   name: 'App',
   components: {
-    loginPopup
+    loginPopup,
+    NavMenu
   },
   metaInfo() {
       return {
@@ -26,4 +34,9 @@ export default  {
 #app {
   // padding-bottom: 50px;
 }
+.pageContent {
+  width: calc(100% - 72px);
+  height: 100%;
+  overflow-y: auto;
+}
 </style>

src/assets/styles/index.scss

@@ -213,5 +213,5 @@ button, input, optgroup, select, textarea {
 }
 
 :root {
-  --bg-color1: #d44165;
+  --bg-color1: #7262f6;
 }

src/router/index.js

@@ -82,6 +82,12 @@ export const constantRoutes = [
     component: () => import("@/views/loginAndRegister/loginH5"),
     name: "LoginH5",
   },
+  {
+    path: "/vip",
+    component: () => import("@/views/vip/index"),
+    name: "vip",
+  },
+  
 ];
 
 // 动态路由，基于用户权限动态去加载

src/views/chat/index.vue

@@ -29,7 +29,8 @@
             </div>
           </div>
         </div>
-        <div class="chat-box"> 
+        <div class="chat-box">
+          <audio ref="audio" v-show="false" src="@/assets/file/我将在黎明出发.mp3" @ended="audioEnd" controls></audio>
           <div class="messages" ref="messages">
             <template v-for="(item, index) in returnMessage">
               <div v-if="item.role == 'assistant'" class="text-white mb-4 flex" :key="index">
@@ -42,8 +43,9 @@
                 </div>
                 <div class="messageRight">
                   <!-- <div class="yyPlay ml-4"></div> -->
-                  <div class="yyPlayBg mt-1 ml-6 w-16 p-1 cursor-pointer">
-                    <img class="yyPlay" src="@/assets/images/播放/yyPlay.png" alt="">
+                  <div class="yyPlayBg mt-1 ml-6 w-16 p-1 cursor-pointer" @click="playAudio(item, index)">
+                    <img v-if="audioPlayIndex == index" class="yyPlay" src="@/assets/images/播放/yyPlay1.png" alt="" >
+                    <img v-else class="yyPlay" src="@/assets/images/播放/yyPlay.png" alt="" >
                   </div>
                   <div class="message mt-4 ml-4 p-3 rounded-r-md rounded-bl-md text-xs" >
                     <div v-show="!item.content" class="loadingMessage" >
@@ -119,7 +121,8 @@ export default {
       info: {},
       messageLoading: false,
       returnMessage: [],
-      content: ''
+      content: '',
+      audioPlayIndex: null
     }
   },
   mounted() {
@@ -372,6 +375,16 @@ export default {
       this.content = value
       this.getStreamChatWithWeb()
     },
+    // 播放聊天语音
+    playAudio(value, index) {
+      // console.log(value, 'value');
+      this.audioPlayIndex = index
+      this.$refs.audio.play()
+    },
+    audioEnd() {
+      // console.log('播放结束');
+      this.audioPlayIndex = null
+    }
   }
 }
 </script>

src/views/components/NavMenu.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="nav-menu h-full bg-white" style="width: 72px">
+    <div>
+      <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-1.5">
+        <g clip-path="url(#clip0_11765_56929)">
+          <path d="M47.8504 31.9362L47.8139 31.8724L47.8112 31.8684L46.4692 29.5327L46.1376 28.9551L43.1691 23.7904L42.5349 22.6857L41.2428 20.5195L40.1181 18.6344C39.3285 17.3117 37.8522 16.4941 36.2523 16.4941H26.0108C23.9317 16.4941 22.1304 17.8641 21.6751 19.7923L21.4411 20.7814L21.1081 22.1872L21.0543 22.4145L20.6369 24.2723L20.3524 25.6103L16.0346 45.9259L16.0226 45.9797C16.0219 45.9824 16.0219 45.9844 16.0213 45.987C16.0073 46.0628 16 46.1413 16 46.2217C16 46.9309 16.575 47.5059 17.2842 47.5059H24.4335C25.0544 47.5059 25.5721 47.0658 25.6918 46.4809L30.2967 24.8174L30.5899 23.4368L30.9574 21.708C31.0179 21.4235 31.2692 21.2201 31.5603 21.2201C31.7817 21.2201 31.985 21.3377 32.0954 21.5292L33.0718 23.2288L33.8229 24.5362L36.3613 28.9551L38.035 31.8691C38.0457 31.887 38.0563 31.905 38.0663 31.9229C38.1653 32.105 38.2211 32.3137 38.2211 32.5351C38.2211 33.2443 37.6462 33.8193 36.937 33.8193H30.9408C30.2316 33.8193 29.6566 34.3942 29.6566 35.1034C29.6566 35.3254 29.7125 35.5335 29.8115 35.7156L29.8428 35.7695L36.1998 46.8339L36.2311 46.8877C36.4564 47.2579 36.8638 47.5059 37.3291 47.5059H44.1435C44.8527 47.5059 45.4277 46.9309 45.4277 46.2217C45.4277 46.003 45.3732 45.7976 45.2768 45.6175L45.2402 45.553L41.4296 38.9214L39.6196 35.7695C39.6083 35.7522 39.5984 35.7342 39.5884 35.7156C39.4894 35.5342 39.4335 35.3254 39.4335 35.1034C39.4335 34.4088 39.9845 33.8432 40.6738 33.8206H46.7816C47.4603 33.7867 48 33.2257 48 32.5384C48 32.3204 47.9462 32.1157 47.8504 31.9362Z" fill="#7262F6"></path>
+        </g>
+        <defs>
+          <clipPath id="clip0_11765_56929">
+            <rect width="32" height="31.0117" fill="white" transform="translate(16 16.4941)"></rect>
+          </clipPath>
+        </defs>
+      </svg>
+      <div class="menus">
+        <div class="menu " :class="$route.path == '/home' && 'menuActive'">
+          <i class="icon el-icon-discover"></i>
+          <div class="text">发现</div>
+        </div>
+        <div class="menu" :class="$route.path == '/chat' && 'menuActive'">
+          <i class="icon el-icon-chat-line-round"></i>
+          <div class="text">对话</div>
+        </div>
+        <div class="menu" :class="$route.path == '/create' && 'menuActive'">
+          <i class="icon el-icon-plus"></i>
+          <div class="text">创建</div>
+        </div>
+        <div class="menu">
+          <i class="icon el-icon-files"></i>
+          <div class="text">个人中心</div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col justify-center items-center cursor-pointer">
+      <v-icon name="crown" class="my-2" scale="1.5"/>
+      <div class="photo my-2 cursor-pointer">
+        <img class="img" src="@/assets/images/default_avatar_user.png" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 引入需要的图标
+import 'vue-awesome/icons/crown'
+
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.nav-menu {
+  padding-top: 20px;
+  padding-bottom: 48px;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-right-width: 1px;
+  border-color: #d3d3d365;
+  align-items: center;
+
+  .menus {
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    .menu {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 10px 0;
+      .icon {
+        font-size: 26px;
+      }
+    }
+    .menuActive {
+      color: var(--bg-color1);
+    }
+  }
+  .photo {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: var(--bg-color1);
+    border: solid 1px #e5e7eb;
+    .img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+}
+
+</style>

src/views/homeComponents/loginPopup.vue

@@ -4,7 +4,7 @@
     :visible.sync="$store.state.app.showPopup"
     append-to-body
     top="50vh"
-    width="30%"
+    width="450px"
     :before-close="handleClose">
     <div slot="title" class="popupTitle">
       手机号快捷登录

src/views/vip/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="vip">
+    <div class="vipTitle">
+      开通会员
+      <div class="tip">开通会员30天叭叭叭叭叭叭</div>
+    </div>
+    <div class="vips"></div>
+    <div class="vipTitle">
+      我们的优势
+    </div>
+    <div class="infos">
+      <div class="info"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>