zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: image标签替换成class名称

Browse Source
This commit is contained in:
duanshuwen
2025-09-21 19:01:44 +08:00
parent ae547f7f81
commit 392def8686
12 changed files with 80 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ImageSwiper/index.vue
View File

@@ -14,7 +14,11 @@
v-for="(item, index) in thumbnails"
:key="index"
>
<image :src="item.photoUrl" mode="aspectFill"></image>
<image
class="swiper-item-image"
:src="item.photoUrl"
mode="aspectFill"
></image>
</swiper-item>
</swiper>
@@ -43,7 +47,7 @@
:id="`thumbnail-${index}`"
@click="handleThumbnailClick(index)"
>
<image :src="thumb.photoUrl" mode="aspectFill"></image>
<image class="thumbnail-image" :src="thumb.photoUrl" mode="aspectFill"></image>
<text>{{ thumb.photoName }}</text>
</view>
</view>

102
src/components/ImageSwiper/styles/index.scss
View File

@@ -1,80 +1,80 @@
.image-swiper {
position: relative;
width: 100%;
position: relative;
width: 100%;
}
.swiper-box {
overflow: hidden;
// 高度和圆角通过内联样式动态设置
overflow: hidden;
// 高度和圆角通过内联样式动态设置
}
.swiper-item image {
width: 100%;
height: 100%;
.swiper-item .swiper-item-image {
width: 100%;
height: 100%;
}
.custom-indicator {
position: absolute;
top: 8px;
right: 8px;
z-index: 10;
background: rgba(0, 0, 0, 0.5);
border-radius: 50px;
padding: 3px 8px;
font-size: 8px;
color: #fff;
position: absolute;
top: 8px;
right: 8px;
z-index: 10;
background: rgba(0, 0, 0, 0.5);
border-radius: 50px;
padding: 3px 8px;
font-size: 8px;
color: #fff;
}
.thumbnail-box {
position: absolute;
left: 12px;
right: 12px;
height: 60px;
position: absolute;
left: 12px;
right: 12px;
height: 60px;
}
.thumbnail-scroll {
width: 100%;
height: 100%;
white-space: nowrap;
width: 100%;
height: 100%;
white-space: nowrap;
}
.thumbnail-list {
display: flex;
align-items: center;
gap: 10px;
padding: 0 5px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 5px;
}
.thumbnail-item {
flex-shrink: 0;
text-align: center;
transition: all 0.3s ease;
flex-shrink: 0;
text-align: center;
transition: all 0.3s ease;
&.active {
image {
border: 1px solid #fff;
}
&.active {
.thumbnail-image {
border: 1px solid #fff;
}
}
}
.thumbnail-item image {
width: 48px;
height: 38px;
border-radius: 4px;
box-sizing: border-box;
border: 1px solid transparent;
transition: all 0.3s ease;
display: block;
.thumbnail-item .thumbnail-image {
width: 48px;
height: 38px;
border-radius: 4px;
box-sizing: border-box;
border: 1px solid transparent;
transition: all 0.3s ease;
display: block;
}
.thumbnail-item text {
color: #fff;
font-size: 8px;
display: block;
margin-top: 4px;
transition: all 0.3s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 48px;
color: #fff;
font-size: 8px;
display: block;
margin-top: 4px;
transition: all 0.3s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 48px;
}

1
src/components/ModuleTitle/styles/index.scss
View File

@@ -6,7 +6,6 @@
.module-title {
font-size: 18px;
font-family: PingFang SC, PingFang SC;
color: #000;
position: relative;
z-index: 1;

2
src/pages/index/components/chat/ChatCardMine/styles/index.scss
View File

@@ -14,8 +14,6 @@
overflow-x: hidden; // ✅ 防止横向撑开
text {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 15px;
color: #ffffff;
line-height: 22px;

2
src/pages/index/components/chat/ChatCardOther/styles/index.scss
View File

@@ -8,8 +8,6 @@
overflow-x: hidden; // ✅ 防止横向撑开
text {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #333333;
}

15
src/pages/index/components/chat/ChatInputArea/index.vue
View File

@@ -3,8 +3,16 @@
<view v-if="!visibleWaveBtn" class="area-input">
<!-- 语音/键盘切换 -->
<view class="input-container-voice" @click="toggleVoiceMode">
<image v-if="!isVoiceMode" src="/static/input_voice_icon.png"></image>
<image v-else src="/static/input_keyboard_icon.png"></image>
<image
class="voice-icon"
v-if="!isVoiceMode"
src="/static/input_voice_icon.png"
></image>
<image
class="voice-icon"
v-else
src="/static/input_keyboard_icon.png"
></image>
</view>
<!-- 输入框/语音按钮容器 -->
@@ -47,9 +55,10 @@
<view class="input-container-send-btn" @click="sendMessage">
<image
v-if="props.isSessionActive"
class="send-icon"
src="/static/input_stop_icon.png"
></image>
<image v-else src="/static/input_send_icon.png"></image>
<image v-else class="send-icon" src="/static/input_send_icon.png"></image>
</view>
</view>
</view>

4
src/pages/index/components/chat/ChatInputArea/styles/index.scss
View File

@@ -15,7 +15,7 @@
width: 44px;
height: 44px;
image {
.voice-icon {
width: 22px;
height: 22px;
}
@@ -56,7 +56,7 @@
height: 100%;
}
image {
.send-icon {
width: 28px;
height: 28px;
}

49
src/pages/index/components/chat/ChatMainList/styles/index.scss
View File

@@ -84,55 +84,6 @@
// -webkit-transform: translateZ(0);
}
.area-input {
display: flex;
align-items: center;
border-radius: 22px;
background-color: #ffffff;
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
margin: 0 12px;
.input-container-voice {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
align-self: flex-end;
image {
width: 22px;
height: 22px;
}
}
.input-container-send {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
align-self: flex-end;
image {
width: 28px;
height: 28px;
}
}
.textarea {
flex: 1;
max-height: 92px;
min-height: 22px;
font-size: 16px;
line-height: 22px;
margin-bottom: 2px;
align-items: center;
}
}
// 打字机光标闪烁动画
.typing-cursor {
display: inline-block;

2
src/pages/index/components/chat/ChatQuickAccess/index.vue
View File

@@ -13,7 +13,7 @@
mode="aspectFill"
></image>
<view class="quick-access-item-title">
<image :src="item.icon"></image>
<image class="quick-access-item-icon" :src="item.icon"></image>
<text>{{ item.title }}</text>
</view>
<text class="quick-access-item-content">{{ item.content }}</text>

7
src/pages/index/components/chat/ChatQuickAccess/styles/index.scss
View File

@@ -42,14 +42,13 @@
align-items: center;
z-index: 1;
image {
.quick-access-item-icon {
width: 16px;
height: 16px;
margin-right: 4px;
}
text {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #201f32;
@@ -60,11 +59,9 @@
.quick-access-item-content {
z-index: 1;
margin-top: 4px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 10px;
color: #678cad;
line-height: 18px;
}
}
}
}

6
src/pages/index/components/module/ActivityListComponent/index.vue
View File

@@ -12,7 +12,11 @@
>
<swiper-item v-for="item in activityList" :key="item.id">
<view class="swiper-item" @click="handleClick(item)">
<image :src="item.activityCover" mode="aspectFill"></image>
<image
class="swiper-img"
:src="item.activityCover"
mode="aspectFill"
></image>
<view class="corner-btn">快速预定</view>
</view>
</swiper-item>

2
src/pages/index/components/module/ActivityListComponent/styles/index.scss
View File

@@ -15,7 +15,7 @@
line-height: 120px;
text-align: center;
image {
.swiper-img {
width: 100%;
height: 100%;
border-radius: 8px;