feat: image标签替换成class名称

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

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;

View File

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

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>

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;
}

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;

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>

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;
}
}
}
}

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>

View File

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