mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 10:57:26 +08:00
feat: 新增全局布局样式并提升组件响应式表现
- 在 global-layout.scss 中引入全局布局样式,统一页面宽度与对齐方式 - 更新多个组件与页面以优化响应式,包括宽度、间距及 flex 布局等调整 - 在 API 请求中增加 loading 状态管理,改善用户体验 - 优化领券中心与商品详情页,提升功能与 UI 一致性
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user