feat: 新增全局布局样式并提升组件响应式表现

- 在 global-layout.scss 中引入全局布局样式,统一页面宽度与对齐方式
- 更新多个组件与页面以优化响应式,包括宽度、间距及 flex 布局等调整
- 在 API 请求中增加 loading 状态管理,改善用户体验
- 优化领券中心与商品详情页,提升功能与 UI 一致性
This commit is contained in:
田香琪
2026-06-23 10:17:35 +08:00
parent c1447b4376
commit 8a60e23214
129 changed files with 5236 additions and 2232 deletions

View File

@@ -62,41 +62,43 @@
</template>
<!-- 折扣广告 -->
<template v-if="element.type == 'discountAdvert'">
<div
class="discountAdvert"
:style="{
'background-image':
'url(' + require('@/assets/nav/decorate.png') + ')',
}"
>
<div>
<div
v-for="(item, index) in element.options.classification"
:key="index"
class="setup-content"
>
<img :src="item.img" width="190" height="210" alt="" />
<div class="setup-box">
<div>
<el-button size="small" @click.stop="handleSelectModel(item)"
>编辑</el-button
>
<div class="discountAdvert-wrap">
<div
class="discountAdvert"
:style="{
'background-image':
'url(' + require('@/assets/nav/decorate.png') + ')',
}"
>
<div>
<div
v-for="(item, index) in element.options.classification"
:key="index"
class="setup-content"
>
<img :src="item.img" width="190" height="210" alt="" />
<div class="setup-box">
<div>
<el-button size="small" @click.stop="handleSelectModel(item)"
>编辑</el-button
>
</div>
</div>
</div>
</div>
</div>
<div>
<div
v-for="(item, index) in element.options.brandList"
:key="index"
class="setup-content"
>
<img :src="item.img" width="240" height="105" alt="" />
<div class="setup-box">
<div>
<el-button size="small" @click.stop="handleSelectModel(item)"
>编辑</el-button
>
<div>
<div
v-for="(item, index) in element.options.brandList"
:key="index"
class="setup-content"
>
<img :src="item.img" width="240" height="105" alt="" />
<div class="setup-box">
<div>
<el-button size="small" @click.stop="handleSelectModel(item)"
>编辑</el-button
>
</div>
</div>
</div>
</div>
@@ -329,8 +331,12 @@ export default {
handleSelectImg() {
// 选择图片
this.$refs.ossManage.selectImage = true;
this.picModelFlag = true;
this.$nextTick(() => {
if (this.$refs.ossManage) {
this.$refs.ossManage.selectImage = true;
}
});
},
// 回显图片
callbackSelected(val) {
@@ -402,15 +408,23 @@ export default {
}
}
/** 折扣广告 */
.discountAdvert-wrap {
width: 1200px;
position: relative;
}
.discountAdvert {
width: 1300px;
height: 566px;
margin-left: -100px;
box-sizing: border-box;
background-repeat: no-repeat;
margin-left: -97px;
background-size: 1300px 566px;
position: relative;
> div {
padding-left: 295px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
&:nth-child(1) img {
margin: 10px 10px 0 0;
}