angelo
/
web-base-pc
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(goodsDetail): 商品详情样式调整

This commit is contained in:
woody 2025-04-29 11:18:14 +08:00
parent 1ea4b9b9aa
commit f0e29d3909
1 changed files with 288 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/views/goodsDetails/index.vue
View File

@ -8,6 +8,8 @@
@showShare="showShare"
ref="sideBar"
></Sidebar>
<div class="product-body">
<div class="product-container">
<!-- 面包屑 -->
<div class="mianbao">
<el-breadcrumb separator-class="el-icon-arrow-right">
@ -75,11 +77,14 @@
"
style="margin-right: 20px"
>
业绩:{{ goodDetail.goodsAchive | toThousandthAndKeepDecimal }}
业绩:{{
goodDetail.goodsAchive | toThousandthAndKeepDecimal
}}
</div>
<div
v-show="
goodDetail.specialArea == 31 && userInfo.isMakerSpace == 0
goodDetail.specialArea == 31 &&
userInfo.isMakerSpace == 0
"
style="margin-right: 20px"
>
@ -89,7 +94,8 @@
</div>
<div
v-show="
goodDetail.specialArea == 10 || goodDetail.specialArea == 11
goodDetail.specialArea == 10 ||
goodDetail.specialArea == 11
"
>
{{ "积分可抵扣" }}:{{
@ -193,7 +199,8 @@
<!-- {{ '服务承诺' }} -->
<div
v-if="
goodDetail.ensureLabelList && goodDetail.ensureLabelList.length > 0
goodDetail.ensureLabelList &&
goodDetail.ensureLabelList.length > 0
"
class="dis_flex fw"
>
@ -208,6 +215,35 @@
</div>
</div>
</div>
</div>
<div class="menuList">
<div
:class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
@click="isMenu = 0"
>
商品介绍
</div>
<div
:class="['menu_i', isMenu == 1 ? 'actMenu' : '']"
@click="isMenu = 1"
>
售后保障
</div>
</div>
<div class="xian"></div>
<div class="allDetail">
<div
v-show="isMenu == 0"
class="allDetail_i"
v-html="goodDetail.details"
></div>
<div
v-show="isMenu == 1"
class="allDetail_i"
v-html="goodDetail.afterGuarantee"
></div>
</div>
</div>
<!-- 推荐 -->
<!-- 商品列表 -->
<div class="goodList">
@ -242,35 +278,6 @@
</div>
</div>
</div>
<div class="menuList">
<div
:class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
@click="isMenu = 0"
>
商品介绍
</div>
<div
:class="['menu_i', isMenu == 1 ? 'actMenu' : '']"
@click="isMenu = 1"
>
售后保障
</div>
</div>
<div class="xian"></div>
<div class="allDetail">
<div
v-show="isMenu == 0"
class="allDetail_i"
v-html="goodDetail.details"
></div>
<div
v-show="isMenu == 1"
class="allDetail_i"
v-html="goodDetail.afterGuarantee"
></div>
</div>
<selSpaceGoods ref="selSpaceGoods" @getCar="getCatLength"></selSpaceGoods>
</div>
</template>
@ -968,10 +975,32 @@ export default {
margin-top: 30px;
}
.details_t {
.dis_flex {
display: flex;
align-items: center;
}
.dis_flex1 {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.just {
justify-content: space-between;
}
.m10 {
margin-top: 10px;
}
.product-body {
display: flex;
.product-container {
flex: 1;
.details_t {
display: flex;
justify-content: space-between;
padding: 0 60px;
padding: 0 0 0px 60px;
margin-top: 40px;
.details_c {
flex: 1;
@ -999,34 +1028,14 @@ export default {
}
}
}
}
.dis_flex {
display: flex;
align-items: center;
}
.dis_flex1 {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.just {
justify-content: space-between;
}
.m10 {
margin-top: 10px;
}
.goodList {
}
}
.goodList {
width: 320px; /* Define a fixed width for the sticky column */
position: sticky;
top: 20px; /* Adjust as needed based on header/breadcrumb height */
align-self: flex-start; /* Prevent stretching vertically with flex items */
padding-bottom: 20px; /* Add some padding at the bottom */
padding-top: 80px;
margin-right: 60px;
.tited {
font-size: 18px;
font-weight: 600;
@ -1060,6 +1069,7 @@ export default {
border-radius: 10px 10px 0px 0px;
display: block;
}
}
}
.disFlex {
@ -1273,6 +1283,7 @@ export default {
height: 5px;
background: rgba(0, 0, 0, 0.05);
margin-top: -5px;
width: calc(100% - 60px);
}
.allDetail {