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

- 在 popups.vue 中调整图标布局，增加弹窗图标的样式支持
- 在 shopPage.vue 中优化商店名称和消息的对齐方式，提升可读性
- 在 address.vue 中调整导入顺序，确保代码整洁性

components/popups/popups.vue

@@ -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':'']">
+      <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>
       <slot></slot>
     </view>
@@ -182,9 +185,9 @@ watch(() => props.placement, (newVal) => {
 </script>
 
 <style lang="scss" scoped>
-.title {
+.title {
-  margin-left: 20rpx;
+  margin-left: 16rpx;
-}
+}
 .shadow {
   position: fixed;
   top: 0;
@@ -206,13 +209,22 @@ watch(() => props.placement, (newVal) => {
   padding: 20rpx;
   border-radius: 5px;
   display: flex;
-  .view {
+  .view {
-    display: flex;
+    display: flex;
-    align-items: center;
+    align-items: center;
-    padding: 15rpx 10rpx;
+    padding: 15rpx 10rpx;
-    font-size: 25rpx;
+    font-size: 25rpx;
-  }
+  }
-  .image {
+  .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;

pages/product/product/popup/address.vue

@@ -5,7 +5,6 @@
       <view class="view-item" v-for="(item, index) in addressDetail" :key="index" @click="clickAddress(item)">
         <view class="view-box-checkbox">
           <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 class="view-box-dress" :class="{ 'box-dress-blod': item.isDefault }">{{clearStrComma(item.consigneeAddressPath) }}</view>
@@ -27,10 +26,10 @@
   </u-popup>
 </template>
 <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<{
   goodsId?: string | number

pages/product/shopPage.vue

@@ -571,31 +571,31 @@ onMounted(() => {
     min-height: 56rpx;
   }
 
-  .store-name {
+  .store-name {
-    width: 100%;
+    width: 100%;
-    font-size: 34rpx;
+    font-size: 34rpx;
-    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 {
-    overflow: hidden;
+    overflow: hidden;
-    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;
     color: #999;
   }