mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 10:57:25 +08:00
fix: 更新弹窗和商店页面样式以提升用户体验
- 在 popups.vue 中调整图标布局,增加弹窗图标的样式支持 - 在 shopPage.vue 中优化商店名称和消息的对齐方式,提升可读性 - 在 address.vue 中调整导入顺序,确保代码整洁性
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user