fix: 更新弹窗和商店页面样式以提升用户体验

- 在 popups.vue 中调整图标布局,增加弹窗图标的样式支持
- 在 shopPage.vue 中优化商店名称和消息的对齐方式,提升可读性
- 在 address.vue 中调整导入顺序,确保代码整洁性
This commit is contained in:
Yer11214
2026-07-09 17:15:37 +08:00
parent 41e8cff749
commit 7566076fa4
3 changed files with 53 additions and 42 deletions

View File

@@ -2,8 +2,11 @@
<view class="shadow" :class="!show?'':'shadow-show'" :style="{backgroundColor:show?maskBg:'rgba(0,0,0,0)'}" @tap="tapMask">
<view class="popups" :class="[theme]" :style="{top: popupsTop ,left: popupsLeft,flexDirection:direction}">
<text :class="dynPlace" :style="{width:'0px',height:'0px'}" v-if="triangle"></text>
<view v-for="(item,index) in popData" :key="index" @tap.stop="tapItem(item)" class="itemChild view" :class="[direction=='row'?'solid-right':'solid-bottom',item.disabled?'disabledColor':'']">
<u-icon size="35" :name="item.icon" v-if="item.icon"></u-icon><span class="title">{{item.title}}</span>
<view v-for="(item,index) in popData" :key="index" @tap.stop="tapItem(item)" class="itemChild view" :class="[direction=='row'?'solid-right':'solid-bottom',item.disabled?'disabledColor':'']">
<view class="popup-icon" v-if="item.icon">
<u-icon size="35rpx" :name="item.icon"></u-icon>
</view>
<span class="title">{{item.title}}</span>
</view>
<slot></slot>
</view>
@@ -182,9 +185,9 @@ watch(() => props.placement, (newVal) => {
</script>
<style lang="scss" scoped>
.title {
margin-left: 20rpx;
}
.title {
margin-left: 16rpx;
}
.shadow {
position: fixed;
top: 0;
@@ -206,13 +209,22 @@ watch(() => props.placement, (newVal) => {
padding: 20rpx;
border-radius: 5px;
display: flex;
.view {
display: flex;
align-items: center;
padding: 15rpx 10rpx;
font-size: 25rpx;
}
.image {
.view {
display: flex;
align-items: center;
padding: 15rpx 10rpx;
font-size: 25rpx;
}
.popup-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
}
.image {
display: inline-block;
vertical-align: middle;
width: 40rpx;