From 6acb8fe916472ee636831b22111f79bf61425397 Mon Sep 17 00:00:00 2001 From: yangzhe Date: Wed, 2 Jul 2025 17:07:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E8=BF=98=E5=8E=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/home/index/index.vue | 1011 +++++++++++++++++++++++---- static/common/avatar/male.png | Bin 0 -> 2092 bytes static/common/avatar/user.png | 1 + static/common/feature/phone.png | 1 + static/common/icon/ai-avatar.png | 1 + static/common/icon/board-icon.png | 1 + static/common/icon/chat-icon.png | 1 + static/common/icon/menu-icon.png | 1 + static/common/icon/phone-icon.png | 1 + static/common/icon/recruit-icon.png | 1 + static/common/icon/send-icon.png | 1 + 11 files changed, 899 insertions(+), 121 deletions(-) create mode 100644 static/common/avatar/male.png create mode 100644 static/common/avatar/user.png create mode 100644 static/common/feature/phone.png create mode 100644 static/common/icon/ai-avatar.png create mode 100644 static/common/icon/board-icon.png create mode 100644 static/common/icon/chat-icon.png create mode 100644 static/common/icon/menu-icon.png create mode 100644 static/common/icon/phone-icon.png create mode 100644 static/common/icon/recruit-icon.png create mode 100644 static/common/icon/send-icon.png diff --git a/pages/home/index/index.vue b/pages/home/index/index.vue index 6112032..a3ad4a6 100644 --- a/pages/home/index/index.vue +++ b/pages/home/index/index.vue @@ -1,128 +1,897 @@ \ No newline at end of file +.home-container { + min-height: 100vh; + background-color: #f5f7fc; + padding-bottom: calc( + 112rpx + env(safe-area-inset-bottom) + ); /* 为自定义tabBar预留空间 */ + padding-top: 88rpx; + + .header { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: #ffffff; + height: 88rpx; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 30rpx; + z-index: 99; + + .header-left { + font-size: 36rpx; + } + + .header-title { + font-size: 36rpx; + font-weight: 500; + color: #333333; + } + } + + .content { + padding: 30rpx; + + .welcome-message { + // display: inline-block; + // flex-wrap: wrap; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 16rpx; + padding: 24rpx; + margin-bottom: 30rpx; + + .avatar { + display: inline-block; + width: 42rpx; + height: 34rpx; + margin-right: 12rpx; + background-color: #4377fe; + } + + .message-text { + font-size: 24rpx; + color: #333333; + font-family: PingFang SC; + vertical-align: super; + } + } + + .qa-section { + background-color: #ffffff; + border-radius: 16rpx; + padding: 30rpx; + margin-bottom: 30rpx; + + .qa-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30rpx; + + .qa-title { + font-size: 32rpx; + font-weight: 500; + color: #333; + } + + .more-link { + .more-text { + font-size: 26rpx; + color: #999; + } + } + } + + .qa-list { + .qa-item { + margin-bottom: 24rpx; + + .qa-question { + font-size: 28rpx; + color: #333; + line-height: 1.5; + } + } + } + + .chat-button { + display: flex; + align-items: center; + justify-content: center; + background-color: #4377fe; + border-radius: 16rpx; + height: 88rpx; + width: 100%; + margin-top: 30rpx; + border: none; + + .chat-icon { + width: 40rpx; + height: 40rpx; + margin-right: 12rpx; + } + + .chat-text { + color: #ffffff; + font-size: 30rpx; + } + } + } + + .feature-grid { + background-color: #ffffff; + border-radius: 16rpx; + padding: 30rpx; + display: flex; + justify-content: space-between; + margin-top: 40rpx; + gap: 30rpx; + + .feature-item { + height: 210rpx; + border-radius: 16rpx; + background-color: #fafafc; + // background-color: #4377fe; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + // gap: 20rpx; + flex: 1; + + .feature-icon { + width: 80rpx; + height: 80rpx; + margin-bottom: 16rpx; + background-color: #e1e5f2; + border-radius: 50%; + } + + .feature-text { + font-size: 26rpx; + color: #333333; + } + } + } + } +} + +.drawer-container { + padding: 32rpx; + display: flex; + flex-direction: column; + height: 100vh; + background-color: #ffffff; + + .chat-history-list { + flex: 1; + // padding: 30rpx 40rpx; + height: calc(100vh - 200rpx); + + .chat-day { + display: flex; + margin: 20rpx 0 20rpx 30rpx; + + .day-text { + font-size: 24rpx; + color: #999999; + font-family: PingFang SC; + margin-bottom: 10rpx; + } + } + + .chat-item { + padding: 24rpx 30rpx; + border-radius: 16rpx; + // margin-bottom: 30rpx; + + .chat-text { + font-size: 28rpx; + color: #303030; + font-family: PingFang SC; + } + + &-active { + background-color: #4f6aff; + + .chat-text { + color: #fff; + } + } + } + } + + .drawer-footer { + height: 130rpx; + border: 1rpx solid #eeeeee; + border-radius: 12rpx; + padding: 0 30rpx; + display: flex; + justify-content: space-between; + align-items: center; + + .user-info { + display: flex; + align-items: center; + + .user-avatar { + width: 56rpx; + height: 56rpx; + border-radius: 50%; + margin-right: 30rpx; + } + + .user-name { + font-size: 28rpx; + font-weight: bold; + font-family: DouyinSans; + color: #333; + } + } + + .settings { + padding: 10rpx; + } + } +} + +/* 响应式布局 - PC端样式 */ +@media screen and (min-width: 768px) { + .home-container { + .content { + max-width: 1200rpx; + margin: 0 auto; + + .qa-section { + .qa-list { + display: flex; + flex-wrap: wrap; + + .qa-item { + width: 48%; + margin-right: 2%; + } + } + } + + .feature-grid { + max-width: 1200rpx; + margin: 40rpx auto 0; + } + } + } +} + +.chat-container { + display: flex; + flex-direction: column; + height: calc(100vh - 300rpx); + background-color: #f5f8ff; + padding: 30rpx; + // padding-bottom: 200rpx; /* 为底部工具栏和输入框留出空间 */ + box-sizing: border-box; + + .chat-scroll { + flex: 1; + flex-shrink: 0; + // overflow-y: auto; /* 使用auto而不是scroll */ // 添加这行会导致滚动条不见 + } + + .chat-card { + background-color: #ffffff; + border-radius: 16rpx; + padding: 30rpx; + margin-bottom: 30rpx; + + .chat-card-title { + font-size: 32rpx; + font-weight: 500; + color: #333333; + margin-bottom: 10rpx; + } + + .chat-card-desc { + font-size: 24rpx; + color: #666666; + margin-bottom: 20rpx; + } + + .chat-card-questions { + display: flex; + flex-direction: column; + gap: 16rpx; + + .question-item { + font-size: 28rpx; + color: #333333; + line-height: 1.5; + } + } + } + + .chat-content { + flex: 1; + padding: 20rpx 0; + margin-bottom: 150rpx; + + .message-time { + text-align: center; + font-size: 24rpx; + color: #999999; + padding: 20rpx; + } + + .message-left, + .message-right { + display: flex; + margin-bottom: 30rpx; + align-items: flex-start; + } + + .message-left { + .ai-avatar { + width: 64rpx; + height: 64rpx; + border-radius: 50%; + margin-right: 16rpx; + background-color: #4370fe; + flex-shrink: 0; + } + + .message-content { + background-color: #ffffff; + color: #333333; + max-width: 70%; + padding: 20rpx 24rpx; + border-radius: 0 16rpx 16rpx 16rpx; + font-size: 28rpx; + line-height: 1.5; + } + } + + .message-right { + justify-content: flex-end; + + .user-avatar { + width: 64rpx; + height: 64rpx; + border-radius: 50%; + margin-left: 16rpx; + background-color: #f0f0f0; + flex-shrink: 0; + } + + .message-content { + background-color: #4370fe; + color: #ffffff; + max-width: 70%; + padding: 20rpx 24rpx; + border-radius: 16rpx 0 16rpx 16rpx; + font-size: 28rpx; + line-height: 1.5; + text-align: right; + } + } + } + + .chat-footer { + position: fixed; + bottom: 0; + left: 0; + right: 0; + + .floating-tabs { + display: flex; + justify-content: flex-start; + margin: 0 0 20rpx 20rpx; + + .tab-item { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background-color: #ffffff; + padding: 8rpx 24rpx; + border-radius: 50rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); + margin-right: 12rpx; + + .tab-icon { + width: 32rpx; + height: 32rpx; + border-radius: 50%; + margin-right: 10rpx; + position: relative; + + &.icon-people { + background-color: #4370fe; + &:before { + content: ""; + position: absolute; + width: 15rpx; + height: 15rpx; + border-radius: 50%; + background-color: white; + top: 8rpx; + left: 12rpx; + } + &:after { + content: ""; + position: absolute; + width: 24rpx; + height: 12rpx; + border: 2rpx solid white; + border-radius: 12rpx 12rpx 0 0; + border-bottom: none; + background-color: transparent; + bottom: 6rpx; + left: 7rpx; + } + } + + &.icon-board { + background-color: #d0d0d0; + &:before { + content: ""; + position: absolute; + width: 22rpx; + height: 15rpx; + background-color: white; + top: 12rpx; + left: 9rpx; + } + &:after { + content: ""; + position: absolute; + width: 10rpx; + height: 5rpx; + border-radius: 0 0 10rpx 10rpx; + background-color: white; + top: 7rpx; + left: 15rpx; + } + } + + &.icon-phone { + background-color: #d0d0d0; + &:before { + content: ""; + position: absolute; + width: 20rpx; + height: 20rpx; + border: 2rpx solid white; + border-radius: 50%; + top: 8rpx; + left: 8rpx; + } + } + } + + text { + font-size: 28rpx; + color: #333333; + } + } + } + + .input-container { + padding: 32rpx; + background-color: #fff; + box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); + + .input-area { + display: flex; + align-items: center; + background-color: #f2f4f9; + border-radius: 20rpx; + padding: 16rpx 24rpx; + box-sizing: border-box; + + .chat-input { + flex: 1; + height: 40rpx; + font-size: 28rpx; + color: #333; + background-color: transparent; + } + + .send-btn { + width: 50rpx; + height: 50rpx; + display: flex; + align-items: center; + justify-content: center; + + .send-icon { + width: 30rpx; + height: 30rpx; + background-color: #4370fe; + clip-path: polygon(0% 0%, 0% 100%, 100% 50%); + } + } + } + } + } +} + diff --git a/static/common/avatar/male.png b/static/common/avatar/male.png new file mode 100644 index 0000000000000000000000000000000000000000..68db8540990ed28b01d450a1491118e97f2dba24 GIT binary patch literal 2092 zcmV+{2-Ek8P)7YrHz8BlZcmoa_!yLd|*@Zeq;au0JUCA z<91$oKQayn2Gnj>SuZ8TW>J?BiiM_DMTkc@@s)s`h<@^gY>IDVgJ)YwLqV;U zjHZx=?$OBK&Bnm9uJ5|7%C@burl7l~oS%n$@sN4ac3(>;AL`@a*u}lHo|G&pC-3a) z(Z03sv!tz@l<=E}glb-yXIDEnHA5pDEg2Nn&dTn~!SJV+*pYsPe0b-3Vz+NwtZZ3@ zVpJU)8l#w#orQVNf^cVGU5aE?%4$=ALp3204kspCSpWb4A9PYqQvg7~AfOQ3fbek8 za3B8QFg*P4V6dE5Q1;Kjkgtd5Ia`2X000JKNkliBmGfFCy9BEH*{juEi_3J6br)obLAxFYx|v;dQo1Uzb^1^ouA*c*`%kv7bbBG zpVQm^z6)fSq@j0SI0rLKa%HkGpGaT?BK3a^?De?;A(3yU16%e4Z-+p?V>l)@s01-@ zj#n1EAVxu`W73?82cS43y;jSpByg>JV*13wR)B~xJ!v@a=x)vx2(0PBCdO6}QjT?3 z@2kBH0^evSOmL@7dDdFzQ}?ccgWxW8W6?VUa!7@OiiOR(~r1E zW88`&4wC&q0cKVcX>XJ}bBBz2Spnk5LE@})ggBG-Mzu4ORTOZLcZUIjUa}9e$WGw^ z5hqG}^Ae;!U@wetXYn^vJNsPbr@I{6f8T*j7Q_RokGRYl!dfTGyhOzNEC;><8H?|X z$ZNzNE%Sn~m}uau1aWypq(Op^l5;`YG>D1D3PEf>cp@_#4~W9ELDC5QloI)jc>GmF zIIM%T_nRVQOAhkL_U|{K@RESs4Q>RffAXT{cneaN;-Q)0M)V6=L^0-?0?4P;0tJ(| z_*j}^p06P0s9wCAlO##rjI2HY6ReF3N+z#X_@qU2JRYxZKtY|iS8Q@O!&7Zqa){{^ zRPpwzI8Bm-e1yc$n0b&pJQ77QQCnwOSXnE`U2TElHPz=~Q%iw5|P>CM$ta2$Tjz5uD;| zY3U}kqx1)CjJ^MVMry|+YGW>!JN>+ZFL%#rp1bE~bq2#1Gk*~Bh5!GBKM2+9tXn&s zS9E+?{jSdOm$^dtgM2=jZNhgqleRMaKWJqC+s^bS;!*X~PKUZ0cBe=6V~Vo1e^9IM za0Gc{r*#@#_FnI9M~<&+wWt4^d*45^*=_Iy`Ci?t*GQD(ZiI*po84>rRAhHMsO}w5 zjQUA+@Q4xL_nSDO;rp%gZtOy>QKQGo{q=|scU#-fi*m5NH5g$$uYZ0S)9TsjG%+%| zA8bbU1`mHQ5zlJ{ow@HN@9b2NN2AqsXP!LQqy`~=Z(?Dn36~m#7Uqna@RZd$Jp6&# zWa&h;N*6UO+-}?Z>I^9fAFt!`iSvZvRTzeRb!#%bUv(QO zP7xsC-gJBv$w>NeM8zRQA>mV6$3wAlK-OZ5R4iRf^8W1hQM6)`2k0{og)@pE~uhjQd#p10C- zSTGN@T78s5H{z#i+bBsH$ehh-AqVb_p_3CJ2hI~i);BIu78T;WH&K!j#LJ-^3M^7W z844OKq@YNYV-=F<2EZyL(enVSkR-~n0!d6W4-6DhQ3{#{Y|1Etr2(^wj+rY$8uAxbL9qn1mSHGM!VrKB3L6q@>sJHS8w WB^@7v(pe|~0000