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

@@ -3,7 +3,10 @@
<view class="popups" :class="[theme]" :style="{top: popupsTop ,left: popupsLeft,flexDirection:direction}"> <view class="popups" :class="[theme]" :style="{top: popupsTop ,left: popupsLeft,flexDirection:direction}">
<text :class="dynPlace" :style="{width:'0px',height:'0px'}" v-if="triangle"></text> <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':'']"> <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 class="popup-icon" v-if="item.icon">
<u-icon size="35rpx" :name="item.icon"></u-icon>
</view>
<span class="title">{{item.title}}</span>
</view> </view>
<slot></slot> <slot></slot>
</view> </view>
@@ -183,7 +186,7 @@ watch(() => props.placement, (newVal) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.title { .title {
margin-left: 20rpx; margin-left: 16rpx;
} }
.shadow { .shadow {
position: fixed; position: fixed;
@@ -212,6 +215,15 @@ watch(() => props.placement, (newVal) => {
padding: 15rpx 10rpx; padding: 15rpx 10rpx;
font-size: 25rpx; font-size: 25rpx;
} }
.popup-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
}
.image { .image {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;

View File

@@ -5,7 +5,6 @@
<view class="view-item" v-for="(item, index) in addressDetail" :key="index" @click="clickAddress(item)"> <view class="view-item" v-for="(item, index) in addressDetail" :key="index" @click="clickAddress(item)">
<view class="view-box-checkbox"> <view class="view-box-checkbox">
<view class="checkbox" :class="{ checked: item.isDefault }"> <view class="checkbox" :class="{ checked: item.isDefault }">
<u-icon v-if="item.isDefault" :class="{ active: item.isDefault }" name="checkmark" size="12"></u-icon>
</view> </view>
</view> </view>
<view class="view-box-dress" :class="{ 'box-dress-blod': item.isDefault }">{{clearStrComma(item.consigneeAddressPath) }}</view> <view class="view-box-dress" :class="{ 'box-dress-blod': item.isDefault }">{{clearStrComma(item.consigneeAddressPath) }}</view>
@@ -27,10 +26,10 @@
</u-popup> </u-popup>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue' import * as API_Address from '@/api/address.js';
import setup from '@/components/m-buy/popup.js' import setup from '@/components/m-buy/popup.js';
import * as API_Address from '@/api/address.js' import { clearStrComma, isLogin } from '@/utils/filters.js';
import { clearStrComma, isLogin } from '@/utils/filters.js' import { onMounted, ref } from 'vue';
const props = defineProps<{ const props = defineProps<{
goodsId?: string | number goodsId?: string | number

View File

@@ -577,7 +577,7 @@ onMounted(() => {
color: #333; color: #333;
letter-spacing: 1rpx; letter-spacing: 1rpx;
font-weight: bold; font-weight: bold;
text-align: center; text-align: left;
} }
.store-name-text { .store-name-text {
@@ -585,14 +585,14 @@ onMounted(() => {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
padding: 0 150rpx; padding: 0 150rpx 0 0;
box-sizing: border-box; box-sizing: border-box;
} }
.store-message { .store-message {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
flex-wrap: nowrap; flex-wrap: nowrap;
margin-top: 12rpx; margin-top: 12rpx;
font-size: 24rpx; font-size: 24rpx;