聊天页面基本变更
This commit is contained in:
+121
-82
@@ -110,7 +110,18 @@
|
||||
<text class="qx" @click="quoting = null">×</text>
|
||||
</view>
|
||||
<view class="bar">
|
||||
<text class="tool" @click="toggleVoice">{{ voiceMode ? '⌨' : '🎤' }}</text>
|
||||
<view class="tool" @click="toggleVoice">
|
||||
<view v-if="voiceMode" class="kbd">
|
||||
<view class="krow" />
|
||||
<view class="krow" />
|
||||
<view class="kspace" />
|
||||
</view>
|
||||
<view v-else class="mic">
|
||||
<view class="mic-head" />
|
||||
<view class="mic-arc" />
|
||||
<view class="mic-stem" />
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="voiceMode"
|
||||
class="hold"
|
||||
@@ -715,89 +726,117 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: #ededed; }
|
||||
.msgs { flex: 1; height: 0; padding: 12rpx 20rpx 8rpx; box-sizing: border-box; }
|
||||
.chip-time { text-align: center; margin: 16rpx auto; background: rgba(0,0,0,.08); color: #fff; font-size: 20rpx; padding: 4rpx 16rpx; border-radius: 8rpx; width: fit-content; }
|
||||
.sys { text-align: center; color: #888; font-size: 22rpx; padding: 12rpx 0 20rpx; }
|
||||
.empty { text-align: center; color: #888; padding: 80rpx 0; font-size: 26rpx; }
|
||||
.row { margin-bottom: 22rpx; display: flex; align-items: flex-start; gap: 12rpx; }
|
||||
.row.mine { justify-content: flex-end; }
|
||||
.row.pick { padding-left: 0; }
|
||||
.ck { width: 36rpx; height: 36rpx; border: 2rpx solid #bbb; border-radius: 50%; margin-top: 20rpx; flex-shrink: 0; }
|
||||
.ck.on { background: #07c160; border-color: #07c160; }
|
||||
.col { max-width: 70%; display: flex; flex-direction: column; }
|
||||
.col.mine { align-items: flex-end; }
|
||||
.av { width: 80rpx; height: 80rpx; border-radius: 10rpx; background: #dae2fd; color: #1677FF; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 700; }
|
||||
.av.self { background: #1677FF; color: #fff; }
|
||||
.av image { width: 80rpx; height: 80rpx; }
|
||||
.who { font-size: 20rpx; color: #888; margin-bottom: 4rpx; }
|
||||
.ball { background: #fff; padding: 16rpx 20rpx; border-radius: 8rpx; font-size: 30rpx; word-break: break-all; line-height: 1.45; }
|
||||
.ball.self { background: #95ec69; color: #111; }
|
||||
.ball.work { background: #fff; }
|
||||
.ball.voice { min-width: 140rpx; }
|
||||
.quote { background: rgba(0,0,0,.06); color: #666; font-size: 22rpx; padding: 8rpx 12rpx; border-radius: 6rpx; margin-bottom: 10rpx; }
|
||||
.pic { max-width: 420rpx; border-radius: 8rpx; display: block; }
|
||||
.file, .cardtxt { display: flex; flex-direction: column; }
|
||||
.fn, .ct { font-weight: 600; }
|
||||
.fs, .cs { font-size: 22rpx; margin-top: 6rpx; color: #1677FF; }
|
||||
.tm { font-size: 20rpx; color: #b2b2b2; margin-top: 6rpx; }
|
||||
.tm.read { color: #07c160; }
|
||||
.recmask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.01);
|
||||
touch-action: none;
|
||||
}
|
||||
.recbox { width: 360rpx; height: 280rpx; background: rgba(0,0,0,.72); color: #fff; border-radius: 20rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26rpx; }
|
||||
.recbox.cancel { background: rgba(186,26,26,.85); }
|
||||
.recsec { font-size: 48rpx; font-weight: 700; margin-bottom: 12rpx; }
|
||||
.composer { background: #f7f7f7; border-top: 1rpx solid #e5e5e5; }
|
||||
.qbar { display: flex; align-items: center; padding: 10rpx 20rpx 0; }
|
||||
.qt { flex: 1; font-size: 22rpx; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.qx { padding: 0 12rpx; color: #888; }
|
||||
.bar { display: flex; align-items: flex-end; padding: 12rpx 12rpx 0; gap: 10rpx; }
|
||||
.tool { width: 64rpx; height: 64rpx; text-align: center; line-height: 64rpx; font-size: 36rpx; color: #111; }
|
||||
.plus { font-size: 44rpx; font-weight: 300; }
|
||||
.box { flex: 1; min-height: 72rpx; background: #fff; border-radius: 8rpx; display: flex; align-items: center; padding: 0 16rpx; }
|
||||
.box input { flex: 1; height: 72rpx; }
|
||||
.hold {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
.chat { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #F5F7FA; }
|
||||
.msgs { flex: 1; height: 0; padding: 8rpx 24rpx 12rpx; box-sizing: border-box; }
|
||||
.chip-time {
|
||||
text-align: center;
|
||||
line-height: 72rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
margin: 20rpx auto 8rpx;
|
||||
color: #9CA3AF;
|
||||
font-size: 22rpx;
|
||||
width: fit-content;
|
||||
}
|
||||
.go { height: 64rpx; padding: 0 24rpx; background: #07c160; color: #fff; border-radius: 8rpx; font-size: 26rpx; font-weight: 600; display: flex; align-items: center; margin-bottom: 4rpx; }
|
||||
.panel { display: flex; flex-wrap: wrap; background: #f7f7f7; padding: 20rpx 24rpx 24rpx; gap: 24rpx; }
|
||||
.panel.emo { gap: 8rpx; }
|
||||
.tile { width: 140rpx; height: 140rpx; background: #fff; border-radius: 16rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22rpx; color: #333; }
|
||||
.te { font-size: 48rpx; margin-bottom: 8rpx; }
|
||||
.sys { text-align: center; color: #9CA3AF; font-size: 24rpx; padding: 12rpx 40rpx 20rpx; }
|
||||
.empty { text-align: center; color: #9CA3AF; padding: 120rpx 40rpx; font-size: 26rpx; }
|
||||
.row { margin-bottom: 24rpx; display: flex; align-items: flex-start; gap: 16rpx; }
|
||||
.row.mine { justify-content: flex-end; }
|
||||
.ck { width: 36rpx; height: 36rpx; border: 2rpx solid #D1D5DB; border-radius: 50%; margin-top: 22rpx; flex-shrink: 0; box-sizing: border-box; }
|
||||
.ck.on { background: #1677FF; border-color: #1677FF; }
|
||||
.col { max-width: 72%; display: flex; flex-direction: column; }
|
||||
.col.mine { align-items: flex-end; }
|
||||
.av { width: 76rpx; height: 76rpx; border-radius: 16rpx; background: #E8F1FF; color: #1677FF; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 650; }
|
||||
.av.self { background: #1677FF; color: #fff; }
|
||||
.av image { width: 76rpx; height: 76rpx; }
|
||||
.who { font-size: 22rpx; color: #9CA3AF; margin: 0 4rpx 8rpx; }
|
||||
.ball {
|
||||
background: #fff;
|
||||
padding: 18rpx 22rpx;
|
||||
border-radius: 8rpx 20rpx 20rpx 20rpx;
|
||||
font-size: 30rpx;
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
color: #111827;
|
||||
box-shadow: 0 2rpx 8rpx rgba(17, 24, 39, 0.04);
|
||||
}
|
||||
.ball.self {
|
||||
background: #1677FF;
|
||||
color: #fff;
|
||||
border-radius: 20rpx 8rpx 20rpx 20rpx;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ball.work { background: #fff; color: #111827; border-radius: 20rpx; }
|
||||
.ball.voice { min-width: 160rpx; }
|
||||
.quote { background: rgba(17, 24, 39, 0.05); color: #6B7280; font-size: 22rpx; padding: 8rpx 12rpx; border-radius: 10rpx; margin-bottom: 10rpx; }
|
||||
.ball.self .quote { background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.9); }
|
||||
.pic { max-width: 420rpx; border-radius: 16rpx; display: block; }
|
||||
.file, .cardtxt { display: flex; flex-direction: column; min-width: 280rpx; }
|
||||
.fn, .ct { font-weight: 600; }
|
||||
.fs, .cs { font-size: 22rpx; margin-top: 8rpx; color: #1677FF; }
|
||||
.ball.self .fs, .ball.self .cs { color: rgba(255, 255, 255, 0.85); }
|
||||
.tm { font-size: 22rpx; color: #C4C9D4; margin-top: 6rpx; }
|
||||
.tm.read { color: #16A34A; }
|
||||
.recmask {
|
||||
position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 30;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.01); touch-action: none;
|
||||
}
|
||||
.recbox {
|
||||
width: 320rpx; padding: 48rpx 24rpx; background: rgba(17, 24, 39, 0.82); color: #fff;
|
||||
border-radius: 24rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26rpx;
|
||||
}
|
||||
.recbox.cancel { background: rgba(220, 38, 38, 0.9); }
|
||||
.recsec { font-size: 48rpx; font-weight: 650; margin-bottom: 12rpx; }
|
||||
.composer { background: #F5F7FA; border-top: 1rpx solid #E8ECF2; }
|
||||
.qbar { display: flex; align-items: center; padding: 12rpx 24rpx 0; }
|
||||
.qt { flex: 1; font-size: 24rpx; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.qx { padding: 0 8rpx 0 16rpx; color: #9CA3AF; font-size: 32rpx; }
|
||||
.bar { display: flex; align-items: flex-end; padding: 12rpx 16rpx 8rpx; gap: 8rpx; }
|
||||
.tool { width: 64rpx; height: 72rpx; display: flex; align-items: center; justify-content: center; font-size: 36rpx; color: #374151; }
|
||||
.mic { width: 28rpx; height: 40rpx; display: flex; flex-direction: column; align-items: center; }
|
||||
.mic-head { width: 14rpx; height: 20rpx; border: 3rpx solid #111827; border-radius: 10rpx; box-sizing: border-box; }
|
||||
.mic-arc { width: 24rpx; height: 12rpx; margin-top: -4rpx; border: 3rpx solid #111827; border-top: none; border-radius: 0 0 14rpx 14rpx; box-sizing: border-box; }
|
||||
.mic-stem { width: 3rpx; height: 8rpx; background: #111827; }
|
||||
.kbd { width: 36rpx; display: flex; flex-direction: column; gap: 4rpx; }
|
||||
.krow { height: 5rpx; background: #111827; border-radius: 2rpx; }
|
||||
.kspace { width: 18rpx; height: 5rpx; margin: 0 auto; background: #111827; border-radius: 2rpx; }
|
||||
.plus { font-size: 48rpx; font-weight: 300; color: #111827; }
|
||||
.box { flex: 1; min-height: 72rpx; background: #fff; border-radius: 12rpx; display: flex; align-items: center; padding: 0 20rpx; }
|
||||
.box input { flex: 1; height: 72rpx; font-size: 30rpx; }
|
||||
.hold {
|
||||
flex: 1; height: 72rpx; background: #fff; border-radius: 12rpx;
|
||||
text-align: center; line-height: 72rpx; font-size: 28rpx; font-weight: 600; color: #111827;
|
||||
touch-action: none; user-select: none;
|
||||
}
|
||||
.go {
|
||||
height: 64rpx; padding: 0 24rpx; margin-bottom: 4rpx;
|
||||
background: #1677FF; color: #fff; border-radius: 12rpx;
|
||||
font-size: 26rpx; font-weight: 600; display: flex; align-items: center;
|
||||
}
|
||||
.panel { display: flex; flex-wrap: wrap; background: #F5F7FA; padding: 8rpx 24rpx 28rpx; gap: 24rpx; }
|
||||
.panel.emo { gap: 0; padding-top: 8rpx; }
|
||||
.tile {
|
||||
width: 148rpx; height: 148rpx; background: #fff; border-radius: 20rpx;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
font-size: 22rpx; color: #4B5563;
|
||||
}
|
||||
.te { font-size: 44rpx; margin-bottom: 10rpx; }
|
||||
.em { width: 12.5%; text-align: center; font-size: 44rpx; line-height: 88rpx; }
|
||||
.hint { text-align: center; font-size: 22rpx; color: #888; padding: 20rpx; }
|
||||
.ico { padding: 8rpx 16rpx; font-size: 36rpx; }
|
||||
.mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.45); z-index: 40; display: flex; align-items: flex-end; }
|
||||
.sheet { width: 100%; background: #fff; border-radius: 24rpx 24rpx 0 0; padding: 28rpx 28rpx 12rpx; }
|
||||
.sheet-t { display: block; text-align: center; font-size: 30rpx; font-weight: 700; }
|
||||
.sheet-s { display: block; text-align: center; font-size: 22rpx; color: #888; margin: 8rpx 0 24rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.hint { text-align: center; font-size: 24rpx; color: #9CA3AF; padding: 24rpx; background: #fff; }
|
||||
.ico { padding: 8rpx 8rpx; font-size: 40rpx; color: #111827; letter-spacing: 2rpx; }
|
||||
.mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(17, 24, 39, 0.45); z-index: 40; display: flex; align-items: flex-end; }
|
||||
.sheet { width: 100%; background: #fff; border-radius: 28rpx 28rpx 0 0; padding: 28rpx 28rpx 12rpx; }
|
||||
.sheet-t { display: block; text-align: center; font-size: 30rpx; font-weight: 650; }
|
||||
.sheet-s { display: block; text-align: center; font-size: 24rpx; color: #9CA3AF; margin: 8rpx 0 24rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.sheet-grid { display: flex; flex-wrap: wrap; gap: 16rpx; }
|
||||
.cell { width: calc(25% - 12rpx); height: 140rpx; background: #f7f7f7; border-radius: 16rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22rpx; color: #333; }
|
||||
.ce { font-size: 36rpx; margin-bottom: 8rpx; color: #111; font-weight: 700; }
|
||||
.sheet-cancel { margin: 20rpx 0 8rpx; height: 88rpx; border-radius: 16rpx; background: #f7f7f7; display: flex; align-items: center; justify-content: center; font-size: 28rpx; }
|
||||
.selbar { display: flex; background: #fff; border-top: 1rpx solid #eee; }
|
||||
.selbtn { flex: 1; height: 96rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; }
|
||||
.selbtn.danger { color: #fa5151; }
|
||||
.cell {
|
||||
width: calc(25% - 12rpx); height: 140rpx; background: #F5F7FA; border-radius: 16rpx;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22rpx; color: #374151;
|
||||
}
|
||||
.ce { font-size: 32rpx; margin-bottom: 8rpx; color: #111827; font-weight: 650; }
|
||||
.sheet-cancel {
|
||||
margin: 20rpx 0 8rpx; height: 88rpx; border-radius: 16rpx; background: #F5F7FA;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #111827;
|
||||
}
|
||||
.selbar { display: flex; background: #fff; border-top: 1rpx solid #E8ECF2; }
|
||||
.selbtn { flex: 1; height: 96rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #1677FF; }
|
||||
.selbtn.danger { color: #DC2626; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user