mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 19:07:25 +08:00
feat: 新增全局布局样式并提升组件响应式表现
- 在 global-layout.scss 中引入全局布局样式，统一页面宽度与对齐方式 - 更新多个组件与页面以优化响应式，包括宽度、间距及 flex 布局等调整 - 在 API 请求中增加 loading 状态管理，改善用户体验 - 优化领券中心与商品详情页，提升功能与 UI 一致性
This commit is contained in:
田香琪
@@ -136,5 +136,10 @@ export default {
|
||||
|
||||
:deep(._Card .el-card__body) {
|
||||
padding: 0 !important;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
:deep(._Card .el-card__body:empty) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -57,7 +57,7 @@ export default {
|
||||
if (!this.userInfo) {
|
||||
this.$Modal.confirm({
|
||||
title: '请登录',
|
||||
content: '<p>请登录后执行此操作</p>',
|
||||
content: '请登录后执行此操作',
|
||||
okText: '立即登录',
|
||||
cancelText: '继续浏览',
|
||||
onOk: () => {
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
:src="currentImg"
|
||||
:preview-src-list="previewList"
|
||||
fit="contain"
|
||||
style="width: 100%; height: 400px"
|
||||
style="width: 100%; height: 350px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -220,16 +220,18 @@
|
||||
<div class="item-select-title">
|
||||
<p>数量</p>
|
||||
</div>
|
||||
<div class="item-select-row">
|
||||
<el-input-number
|
||||
:min="1"
|
||||
:max="skuDetail.quantity"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
v-model="count"
|
||||
:precision="0.1"
|
||||
@blur="changeCount"
|
||||
></el-input-number>
|
||||
<span class="inventory"> 库存{{ skuDetail.quantity }}</span>
|
||||
<div class="item-select-column">
|
||||
<div class="item-select-row">
|
||||
<el-input-number
|
||||
:min="1"
|
||||
:max="skuDetail.quantity"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
v-model="count"
|
||||
:precision="0.1"
|
||||
@blur="changeCount"
|
||||
></el-input-number>
|
||||
<span class="inventory"> 库存{{ skuDetail.quantity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -241,45 +243,52 @@
|
||||
<div class="item-select-title">
|
||||
<p>重量</p>
|
||||
</div>
|
||||
<div class="item-select-row">
|
||||
<span class="inventory"> {{ skuDetail.weight }}kg</span>
|
||||
<div class="item-select-column">
|
||||
<span class="inventory">{{ skuDetail.weight }}kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="add-buy-car"
|
||||
class="item-select add-buy-car-row"
|
||||
v-if="$route.query.way === 'POINT' && skuDetail.authFlag === 'PASS'"
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
:loading="loading"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="pointPay"
|
||||
>积分购买</el-button
|
||||
>
|
||||
<div class="item-select-column">
|
||||
<div class="add-buy-car">
|
||||
<el-button
|
||||
type="danger"
|
||||
:loading="loading"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="pointPay"
|
||||
>积分购买</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="add-buy-car"
|
||||
class="item-select add-buy-car-row"
|
||||
v-if="$route.query.way !== 'POINT' && skuDetail.authFlag === 'PASS'"
|
||||
>
|
||||
|
||||
<el-button
|
||||
type="danger"
|
||||
v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'"
|
||||
:loading="loading"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="addShoppingCartBtn"
|
||||
>加入购物车</el-button
|
||||
>
|
||||
<el-button
|
||||
type="warning"
|
||||
:loading="loading1"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="buyNow"
|
||||
>立即购买</el-button
|
||||
>
|
||||
<el-tooltip content="观看视频" v-if="skuDetail.goodsVideo">
|
||||
<img class="view-video" @click="showGoodsVideo = true" :src="require('@/assets/iconfont/play.svg')" alt="">
|
||||
</el-tooltip>
|
||||
<div class="item-select-column">
|
||||
<div class="add-buy-car">
|
||||
<el-button
|
||||
type="danger"
|
||||
v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'"
|
||||
:loading="loading"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="addShoppingCartBtn"
|
||||
>加入购物车</el-button
|
||||
>
|
||||
<el-button
|
||||
type="warning"
|
||||
:loading="loading1"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="buyNow"
|
||||
>立即购买</el-button
|
||||
>
|
||||
<el-tooltip content="观看视频" v-if="skuDetail.goodsVideo">
|
||||
<img class="view-video" @click="showGoodsVideo = true" :src="require('@/assets/iconfont/play.svg')" alt="">
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -644,9 +653,7 @@ export default {
|
||||
height: 350px;
|
||||
box-shadow: 0px 0px 8px $border_color;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
#dplayer{
|
||||
width: 100%;
|
||||
@@ -657,7 +664,7 @@ export default {
|
||||
}
|
||||
|
||||
.item-detail-img-row {
|
||||
margin-top: 15px;
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -835,6 +842,7 @@ export default {
|
||||
.item-select {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@@ -843,15 +851,25 @@ export default {
|
||||
font-size: 14px;
|
||||
margin-right: 15px;
|
||||
width: 60px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-select-column {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-select-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -890,12 +908,33 @@ export default {
|
||||
border-top: 1px dotted $border_color;
|
||||
}
|
||||
|
||||
.add-buy-car-row {
|
||||
margin-top: 25px;
|
||||
|
||||
&.item-select {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.item-select-column {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.add-buy-car {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> * {
|
||||
margin: 0 4px;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -164,9 +164,13 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
changeHeight (name) { // 设置商品详情高度
|
||||
let heightCss = window.getComputedStyle(this.$refs[name]).height;
|
||||
heightCss = parseInt(heightCss.substr(0, heightCss.length - 2)) + 89;
|
||||
this.$refs.itemIntroDetail.style.height = heightCss + 'px';
|
||||
const el = this.$refs[name];
|
||||
const container = this.$refs.itemIntroDetail;
|
||||
if (!el || !container) return;
|
||||
let heightCss = window.getComputedStyle(el).height;
|
||||
heightCss = parseInt(heightCss, 10) + 89;
|
||||
if (Number.isNaN(heightCss)) return;
|
||||
container.style.height = heightCss + 'px';
|
||||
},
|
||||
changePageNum (val) { // 修改评论页码
|
||||
this.commentParams.pageNumber = val;
|
||||
@@ -245,13 +249,18 @@ export default {
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => { // 手动设置详情高度，解决无法撑开问题
|
||||
setTimeout(this.changeHeight('itemIntroGoods'), 2000);
|
||||
setTimeout(() => {
|
||||
this.changeHeight('itemIntroGoods');
|
||||
}, 2000);
|
||||
});
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
this.getList();
|
||||
if (this.skuDetail.grade === null || this.skuDetail.grade === undefined) {
|
||||
this.skuDetail.grade = 100
|
||||
}
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -41,9 +41,9 @@
|
||||
<li @click="goUserCenter('/home/MyTracks')"><span class="nav-item">我的足迹</span></li>
|
||||
<li @click="goUserCenter('/home/MsgList')"><span class="nav-item">我的消息</span></li>
|
||||
<li v-if="$route.name !== 'Cart'" style="position:relative;">
|
||||
<el-dropdown placement="bottom-start" trigger="hover">
|
||||
<el-dropdown placement="bottom-start" trigger="hover" @visible-change="handleCartDropdownVisible">
|
||||
<router-link to="/cart" target="_blank">
|
||||
<span class="nav-item" @mouseenter="getCartList">
|
||||
<span class="nav-item">
|
||||
<el-icon :size="18"><ShoppingCart /></el-icon>
|
||||
购物车（{{ cartNum < 100 ? cartNum : '99' }}）
|
||||
</span>
|
||||
@@ -107,7 +107,10 @@ export default {
|
||||
return {
|
||||
config: require('@/config'),
|
||||
userInfo: {}, // 用户信息
|
||||
shoppingCart: [] // 购物车
|
||||
shoppingCart: [], // 购物车
|
||||
cartLoading: false,
|
||||
cartLoadedAt: 0,
|
||||
cartCacheTime: 5000
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -146,7 +149,7 @@ export default {
|
||||
} else {
|
||||
this.$Modal.confirm({
|
||||
title: '请登录',
|
||||
content: '<p>请登录后执行此操作</p>',
|
||||
content: '请登录后执行此操作',
|
||||
okText: '立即登录',
|
||||
cancelText: '继续浏览',
|
||||
onOk: () => {
|
||||
@@ -173,15 +176,31 @@ export default {
|
||||
this.$router.push('login');
|
||||
}
|
||||
},
|
||||
handleCartDropdownVisible(visible) {
|
||||
if (visible) {
|
||||
this.getCartList();
|
||||
}
|
||||
},
|
||||
getCartList() {
|
||||
// 获取购物车列表
|
||||
if (this.userInfo.username) {
|
||||
cartGoodsAll().then((res) => {
|
||||
this.shoppingCart = res.result.skuList;
|
||||
if (!this.userInfo.username || this.cartLoading) {
|
||||
return;
|
||||
}
|
||||
const now = Date.now();
|
||||
if (this.cartLoadedAt && now - this.cartLoadedAt < this.cartCacheTime) {
|
||||
return;
|
||||
}
|
||||
this.cartLoadedAt = now;
|
||||
this.cartLoading = true;
|
||||
cartGoodsAll().then((res) => {
|
||||
if (res.success) {
|
||||
this.shoppingCart = (res.result && res.result.skuList) || [];
|
||||
this.$store.commit('SET_CARTNUM', this.shoppingCart.length);
|
||||
this.Cookies.setItem('cartNum', this.shoppingCart.length);
|
||||
});
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.cartLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -192,28 +211,36 @@ export default {
|
||||
.box {
|
||||
width: 100%;
|
||||
font-size: 12px !important;
|
||||
height: 36px;
|
||||
height: 36px;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
line-height: 36px;
|
||||
float: none;
|
||||
line-height: 1;
|
||||
margin-right: 15px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav a,
|
||||
@@ -221,9 +248,11 @@ export default {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@@ -305,6 +334,8 @@ export default {
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> span {
|
||||
margin-left: 5px;
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<div class="model-form">
|
||||
<div class="model-content">
|
||||
<template v-for="(element, index) in data.list" :key="element.key || index">
|
||||
<model-form-item
|
||||
v-if="element && element.key"
|
||||
:element="element"
|
||||
:index="index"
|
||||
:data="data"
|
||||
></model-form-item>
|
||||
</template>
|
||||
<model-form-item
|
||||
v-for="(element, index) in renderList"
|
||||
:key="element.key"
|
||||
:element="element"
|
||||
:index="index"
|
||||
:data="data"
|
||||
></model-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -19,12 +18,32 @@ export default {
|
||||
components: {
|
||||
ModelFormItem
|
||||
},
|
||||
props: ['data']
|
||||
props: ['data'],
|
||||
computed: {
|
||||
renderList() {
|
||||
const list = this.data?.list || [];
|
||||
return list.filter(
|
||||
(el) => el && el.key && !this.isBuiltinModule(el.type)
|
||||
);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isBuiltinModule(type) {
|
||||
// 顶部广告、快捷导航由 Index 页单独渲染
|
||||
return type === 'topAdvert' || type === 'navBar';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.model-form {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.model-content {
|
||||
width: 100%;
|
||||
min-height: 1200px;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,10 +2,9 @@
|
||||
<div class="model-item" v-if="element && element.key">
|
||||
<!-- 轮播图模块，包括个人信息，快捷导航模块 -->
|
||||
<template v-if="element.type == 'carousel'">
|
||||
<model-carousel
|
||||
:data="element"
|
||||
class="mb_20 width_1200_auto"
|
||||
></model-carousel>
|
||||
<div class="carousel-wrap mb_20">
|
||||
<model-carousel :key="element.key" :data="element"></model-carousel>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="element.type == 'carousel1'">
|
||||
<model-carousel1 :data="element" class="mb_20"></model-carousel1>
|
||||
@@ -20,7 +19,7 @@
|
||||
<template v-if="element.type == 'hotAdvert'">
|
||||
<div class="mb_20 width_1200_auto">
|
||||
<img
|
||||
style="display: block"
|
||||
style="display: block; width: 100%; max-width: 1200px; height: auto"
|
||||
class="hover-pointer"
|
||||
:src="element.options.list[0].img"
|
||||
@click="linkTo(element.options.list[0].url)"
|
||||
@@ -46,33 +45,39 @@
|
||||
</template>
|
||||
<!-- 折扣广告 -->
|
||||
<template v-if="element.type == 'discountAdvert'">
|
||||
<div
|
||||
class="discountAdvert"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' + require('@/assets/images/decorate.png') + ')',
|
||||
}"
|
||||
>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
v-for="(item, index) in element.options.classification"
|
||||
:key="index"
|
||||
:src="item.img"
|
||||
width="190"
|
||||
height="210"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
v-for="(item, index) in element.options.brandList"
|
||||
:key="'discount' + index"
|
||||
:src="item.img"
|
||||
width="240"
|
||||
height="105"
|
||||
alt=""
|
||||
/>
|
||||
<div class="discountAdvert-wrap width_1200_auto mb_20">
|
||||
<div
|
||||
class="discountAdvert"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' + require('@/assets/images/decorate.png') + ')',
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
v-for="(item, index) in element.options.classification"
|
||||
:key="index"
|
||||
:src="item.img"
|
||||
width="190"
|
||||
height="210"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
v-for="(item, index) in element.options.brandList"
|
||||
:key="'discount' + index"
|
||||
:src="item.img"
|
||||
width="240"
|
||||
height="105"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -183,11 +188,19 @@ export default {
|
||||
.model-item {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.carousel-wrap {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
}
|
||||
.bannerAd{
|
||||
width: 1183px;
|
||||
width: 100%;
|
||||
height: 166.6px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/** 热门广告 */
|
||||
.advert-list {
|
||||
@@ -196,6 +209,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 3px 10px;
|
||||
box-sizing: border-box;
|
||||
> li {
|
||||
img {
|
||||
cursor: pointer;
|
||||
@@ -210,25 +224,40 @@ export default {
|
||||
}
|
||||
|
||||
/** 折扣广告 */
|
||||
.discountAdvert {
|
||||
width: 1300px;
|
||||
height: 566px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
background-repeat: no-repeat;
|
||||
.discountAdvert-wrap {
|
||||
position: relative;
|
||||
left: -47px;
|
||||
padding-left: 295px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
img {
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
transition: all 150ms ease-in-out;
|
||||
&:hover {
|
||||
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.4);
|
||||
transform: translateY(-2px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.discountAdvert {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
height: 520px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1200px 520px;
|
||||
background-position: center top;
|
||||
position: relative;
|
||||
padding: 10px 0 0 330px;
|
||||
overflow: hidden;
|
||||
> div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
img {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 150ms ease-in-out;
|
||||
&:hover {
|
||||
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
<template>
|
||||
<div class="model-carousel">
|
||||
<div class="nav-body clearfix">
|
||||
<!-- 侧边导航占位 -->
|
||||
<div class="nav-side"></div>
|
||||
<div class="nav-body">
|
||||
<!-- 侧边导航占位（与 CateNav 分类栏同宽，勿与 CateNav .nav-side 混用类名） -->
|
||||
<div class="carousel-side-spacer"></div>
|
||||
<div class="nav-content">
|
||||
<!-- 轮播图 -->
|
||||
<!-- autoplay autoplay-speed="10000"-->
|
||||
<el-carousel height="334px" :interval="5000">
|
||||
<el-carousel-item v-for="(item, index) in data.options.list" :key="index">
|
||||
<!-- 轮播图：无数据时不挂载 el-carousel，避免 Element Plus 卸载子项时报错 -->
|
||||
<el-carousel
|
||||
v-if="carouselList.length"
|
||||
:key="carouselRenderKey"
|
||||
height="334px"
|
||||
:interval="5000"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="(item, index) in carouselList"
|
||||
:key="carouselItemKey(item, index)"
|
||||
>
|
||||
<div class="swiper-img">
|
||||
<img
|
||||
:src="item.img"
|
||||
@@ -17,6 +24,7 @@
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div v-else class="swiper-img carousel-placeholder"></div>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="person-msg">
|
||||
@@ -84,6 +92,16 @@ import storage from "@/plugins/storage";
|
||||
export default {
|
||||
name: "modelCarousel",
|
||||
props: ["data"],
|
||||
computed: {
|
||||
carouselList() {
|
||||
return this.data?.options?.list || [];
|
||||
},
|
||||
carouselRenderKey() {
|
||||
const moduleKey = this.data?.key || "carousel";
|
||||
const imgs = this.carouselList.map((item) => item?.img || "").join("|");
|
||||
return `${moduleKey}-${this.carouselList.length}-${imgs}`;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: require("@/config"),
|
||||
@@ -154,6 +172,9 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
carouselItemKey(item, index) {
|
||||
return item?.img || item?.url || `slide-${index}`;
|
||||
},
|
||||
// 快捷跳转中心
|
||||
entryControl(val) {
|
||||
console.log("val",val)
|
||||
@@ -182,10 +203,15 @@ export default {
|
||||
|
||||
.swiper-img {
|
||||
overflow: hidden;
|
||||
width: 637px;
|
||||
width: 100%;
|
||||
height: 329.9px;
|
||||
}
|
||||
|
||||
.carousel-placeholder {
|
||||
border-radius: 10px;
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.icon-list {
|
||||
width: 216px
|
||||
}
|
||||
@@ -266,20 +292,18 @@ export default {
|
||||
|
||||
.model-carousel {
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
height: 340px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hover-pointer {
|
||||
//display: block;
|
||||
//width: 100%;
|
||||
//height: 100%;
|
||||
width: 637px;
|
||||
width: 100%;
|
||||
height: 329.9px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.welcome {
|
||||
@@ -334,44 +358,63 @@ export default {
|
||||
|
||||
}
|
||||
|
||||
/* 导航主体 */
|
||||
/* 导航主体：固定列宽与 CateNav 完全一致（263.2 + 10 + 637 + 10 + 263.2 = 1183.4px） */
|
||||
.nav-body {
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
height: 340px;
|
||||
margin: 0px auto;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 263.2px 637px 263.2px;
|
||||
column-gap: 10px;
|
||||
align-items: start;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-side {
|
||||
height: 334px;
|
||||
.carousel-side-spacer {
|
||||
grid-column: 1;
|
||||
width: 263.2px;
|
||||
height: 334px;
|
||||
flex-shrink: 0;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
float: left;
|
||||
padding: 0px;
|
||||
color: #fff;
|
||||
// background-color: #6e6568;
|
||||
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/*导航内容*/
|
||||
.nav-content {
|
||||
grid-column: 2;
|
||||
width: 637px;
|
||||
margin-left: 10.8px;
|
||||
|
||||
min-width: 637px;
|
||||
max-width: 637px;
|
||||
margin-top: 10px;
|
||||
height: 333.9px;
|
||||
|
||||
float: left;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.el-carousel) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.el-carousel__container) {
|
||||
height: 334px;
|
||||
}
|
||||
|
||||
:deep(.el-carousel__item) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
grid-column: 3;
|
||||
width: 263.2px;
|
||||
margin-left: 10px;
|
||||
min-width: 263.2px;
|
||||
max-width: 263.2px;
|
||||
margin-top: 10px;
|
||||
|
||||
border-radius: 10px;
|
||||
background: #FFFFFF;
|
||||
|
||||
@@ -88,82 +88,171 @@ export default {
|
||||
.new-goods {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
> div {
|
||||
width: 393px;
|
||||
height: 440px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left > .content {
|
||||
> div:nth-child(1) {
|
||||
height: 240px;
|
||||
flex-direction: column;
|
||||
border: 1px solid #eee;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
justify-content: space-between;
|
||||
img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
.describe {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
> div:nth-child(3),
|
||||
> div:nth-child(4) {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.middle > .content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
flex-direction: unset;
|
||||
overflow: hidden;
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
padding: 6px 4px 4px 6px;
|
||||
border-style: solid;
|
||||
border-color: #eee;
|
||||
border-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
border-right-width: 1px;
|
||||
img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
> div {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.describe {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(1) {
|
||||
grid-row: span 2;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 8px 6px;
|
||||
img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
> div {
|
||||
flex: unset;
|
||||
width: 100%;
|
||||
p {
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.describe {
|
||||
margin-top: 6px;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(1),
|
||||
> div:nth-child(2),
|
||||
> div:nth-child(3) {
|
||||
> div:nth-child(3),
|
||||
> div:nth-child(5) {
|
||||
border-right-width: 0;
|
||||
}
|
||||
> div:nth-child(4),
|
||||
> div:nth-child(5) {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.middle > .content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
flex-direction: unset;
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-style: solid;
|
||||
border-color: #eee;
|
||||
border-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
> div:nth-child(6),
|
||||
> div:nth-child(3) {
|
||||
> div:nth-child(2n) {
|
||||
border-right-width: 0;
|
||||
}
|
||||
> div:nth-child(n + 5) {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right > .content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
flex-direction: unset;
|
||||
flex-wrap: unset;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
> div {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
padding: 5px 10px 0 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 4px 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
border-bottom: 1px solid #eee;
|
||||
border-right: 1px solid #eee;
|
||||
:nth-child(2) {
|
||||
height: 38px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 32px;
|
||||
line-height: 16px;
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-align: center;
|
||||
}
|
||||
:nth-child(3) {
|
||||
color: $theme_color;
|
||||
margin-top: 5px;
|
||||
margin-top: 2px;
|
||||
line-height: 1.2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.jiaobiao {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
top: 10px;
|
||||
right: 16px;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
background: url(../../../assets/images/festival_icon.png);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
@@ -181,10 +270,11 @@ export default {
|
||||
background-position: -60px -30px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(4),
|
||||
> div:nth-child(5),
|
||||
> div:nth-child(6) {
|
||||
border: none;
|
||||
> div:nth-child(3n) {
|
||||
border-right: none;
|
||||
}
|
||||
> div:nth-child(n + 4) {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -209,6 +299,8 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
height: 370px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.con-item {
|
||||
width: 185px;
|
||||
@@ -222,6 +314,42 @@ export default {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.middle > .content .con-item {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 6px 4px 4px 6px;
|
||||
img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
> div {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.describe {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left > .content .con-item {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.describe {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
:key="index"
|
||||
@click="linkTo(item.url)" class="hover-pointer"
|
||||
>
|
||||
<div class="right-item" :style="{'border': index===2 || index===3 ?'none': ''}">
|
||||
<div class="right-item">
|
||||
<div>
|
||||
<span :style="{ background: msgRight.bgColor }">{{item.name}}</span>
|
||||
<span>{{ item.describe }}</span>
|
||||
@@ -135,65 +135,85 @@ export default {
|
||||
|
||||
.recommend-right {
|
||||
width: 595px;
|
||||
height: 360px;
|
||||
|
||||
.head-recommend {
|
||||
background: #a25684;
|
||||
}
|
||||
.content-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
height: 360px;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
> div {
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
height: 180px;
|
||||
padding-top: 10px;
|
||||
padding: 0;
|
||||
border-right: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(2n) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:nth-child(n + 3) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.right-item {
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
height: 150px;
|
||||
padding: 0 10px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
>div:nth-child(1) {
|
||||
box-sizing: border-box;
|
||||
|
||||
margin-top: 30px;
|
||||
span:nth-child(1){
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0 5px;
|
||||
background-color: #a25684;
|
||||
display: block;
|
||||
> div:nth-child(1) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-top: 0;
|
||||
text-align: left;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 10px 10px 0;
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0 5px;
|
||||
background-color: #a25684;
|
||||
display: block;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.right-img {
|
||||
width: 100;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
img{
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(n + 1) {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="cate-nav width_1200_auto" :class="{'fixed-show':useClass == 'fixed-show'}">
|
||||
<div class="cate-nav" :class="{'fixed-show':useClass == 'fixed-show'}">
|
||||
<div class="nav-con" :class="{'background-white':useClass == 'background-white'}">
|
||||
<div
|
||||
class="all-categories hover-pointer"
|
||||
@@ -149,9 +149,8 @@ export default {
|
||||
// 导航列表
|
||||
if (storage.getItem("navList")) {
|
||||
return JSON.parse(storage.getItem("navList"));
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
return { list: [] };
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
@@ -261,21 +260,27 @@ export default {
|
||||
}
|
||||
.cate-nav {
|
||||
position: relative;
|
||||
margin: 14px auto 0 auto;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
margin: 14px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/** 商品分类 */
|
||||
.nav-con {
|
||||
height: 46px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
.all-categories {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 46px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
padding-left: 37.4px;
|
||||
background: #FFFFFF;
|
||||
width: 263.2px;
|
||||
padding-top: 15.4px;
|
||||
line-height: 20px;
|
||||
border-bottom: none;
|
||||
font-size: 16.8px;
|
||||
font-weight: normal;
|
||||
@@ -283,15 +288,16 @@ export default {
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
.nav-item {
|
||||
width: 914px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
background: #FFFFFF;
|
||||
margin-left: 10px;
|
||||
margin: 0 0 0 10px;
|
||||
padding: 0;
|
||||
line-height: 46px;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
// background-color: #eee;
|
||||
display: flex;
|
||||
li {
|
||||
float: left;
|
||||
@@ -306,12 +312,12 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
// 分类列表
|
||||
// 分类列表（浮层叠在轮播左列之上）
|
||||
.cate-list {
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 46px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-side {
|
||||
|
||||
@@ -96,6 +96,9 @@ export default {
|
||||
this.init()
|
||||
});
|
||||
},
|
||||
close () {
|
||||
this.show = false;
|
||||
},
|
||||
init () { // 初始化数据
|
||||
this.flag = false;
|
||||
this.downX = 0;
|
||||
|
||||
Reference in New Issue
Block a user