feat(goodsDetail): 商品详情样式调整
This commit is contained in:
woody
parent
1ea4b9b9aa
commit
f0e29d3909
|
|
@ -8,204 +8,240 @@
|
||||||
@showShare="showShare"
|
@showShare="showShare"
|
||||||
ref="sideBar"
|
ref="sideBar"
|
||||||
></Sidebar>
|
></Sidebar>
|
||||||
<!-- 面包屑 -->
|
<div class="product-body">
|
||||||
<div class="mianbao">
|
<div class="product-container">
|
||||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<!-- 面包屑 -->
|
||||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
<div class="mianbao">
|
||||||
<el-breadcrumb-item
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||||
v-if="specialArea != 18 && specialArea != 19"
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||||
:to="{ path: '/shoppingMall?id=' + specialArea }"
|
<el-breadcrumb-item
|
||||||
>{{ labelName }}</el-breadcrumb-item
|
v-if="specialArea != 18 && specialArea != 19"
|
||||||
>
|
:to="{ path: '/shoppingMall?id=' + specialArea }"
|
||||||
<el-breadcrumb-item v-else :to="{ path: '/spaceMallList' }">{{
|
>{{ labelName }}</el-breadcrumb-item
|
||||||
labelName
|
>
|
||||||
}}</el-breadcrumb-item>
|
<el-breadcrumb-item v-else :to="{ path: '/spaceMallList' }">{{
|
||||||
<el-breadcrumb-item>商品详情</el-breadcrumb-item>
|
labelName
|
||||||
</el-breadcrumb>
|
}}</el-breadcrumb-item>
|
||||||
</div>
|
<el-breadcrumb-item>商品详情</el-breadcrumb-item>
|
||||||
<div class="details_t">
|
</el-breadcrumb>
|
||||||
<!-- 轮播图 -->
|
|
||||||
<Swiper :mainImgUrls="mainImgUrl" :imgUrlLists="imgUrlList"></Swiper>
|
|
||||||
<!-- 商品信息 -->
|
|
||||||
<div class="details_c">
|
|
||||||
<div class="dis_flex">
|
|
||||||
<div class="qzbq" v-if="goodDetail.prefixLabelTarget">
|
|
||||||
[{{ goodDetail.prefixLabelTarget.label }}]
|
|
||||||
</div>
|
|
||||||
<div class="c_tit1">
|
|
||||||
{{ goodDetail.waresName }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="details_t">
|
||||||
<div class="c_hui">{{ goodDetail.sellingPoints }}</div>
|
<!-- 轮播图 -->
|
||||||
|
<Swiper :mainImgUrls="mainImgUrl" :imgUrlLists="imgUrlList"></Swiper>
|
||||||
<div class="c_bai">
|
<!-- 商品信息 -->
|
||||||
<div class="dis_flex jusc" v-if="goodDetail.preSaleStatus == 1">
|
<div class="details_c">
|
||||||
<div class="dis_flex">
|
<div class="dis_flex">
|
||||||
<img src="@/assets/images/clock.png" alt="" />
|
<div class="qzbq" v-if="goodDetail.prefixLabelTarget">
|
||||||
<div>预计发货</div>
|
[{{ goodDetail.prefixLabelTarget.label }}]
|
||||||
|
</div>
|
||||||
|
<div class="c_tit1">
|
||||||
|
{{ goodDetail.waresName }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dis_flex jusc_r">
|
|
||||||
<div>剩余时间:</div>
|
<div class="c_hui">{{ goodDetail.sellingPoints }}</div>
|
||||||
<div class="jusc_ri">{{ countDown }}</div>
|
|
||||||
</div>
|
<div class="c_bai">
|
||||||
</div>
|
<div class="dis_flex jusc" v-if="goodDetail.preSaleStatus == 1">
|
||||||
<div class="c_bai_b">
|
<div class="dis_flex">
|
||||||
<div class="dis_flex just">
|
<img src="@/assets/images/clock.png" alt="" />
|
||||||
<div class="dis_flex">
|
<div>预计发货</div>
|
||||||
<div class="goods-price">
|
|
||||||
{{ userInfo.currencyIcon
|
|
||||||
}}{{ goodDetail.goodsPrice | toThousandthAndKeepDecimal }}
|
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="tit6" v-show="
|
<div class="dis_flex jusc_r">
|
||||||
|
<div>剩余时间:</div>
|
||||||
|
<div class="jusc_ri">{{ countDown }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="c_bai_b">
|
||||||
|
<div class="dis_flex just">
|
||||||
|
<div class="dis_flex">
|
||||||
|
<div class="goods-price">
|
||||||
|
{{ userInfo.currencyIcon
|
||||||
|
}}{{ goodDetail.goodsPrice | toThousandthAndKeepDecimal }}
|
||||||
|
</div>
|
||||||
|
<!-- <div class="tit6" v-show="
|
||||||
goodDetail.specialArea == 31">
|
goodDetail.specialArea == 31">
|
||||||
统一零售价:{{ userInfo.currencyIcon
|
统一零售价:{{ userInfo.currencyIcon
|
||||||
}}{{ goodDetail.retailPrice | toThousandthAndKeepDecimal }}
|
}}{{ goodDetail.retailPrice | toThousandthAndKeepDecimal }}
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="tit7">累计销售</div>
|
<div class="tit7">累计销售</div>
|
||||||
</div>
|
|
||||||
<div class="dis_flex just m10">
|
|
||||||
<div class="tit4 dis_flex">
|
|
||||||
<div
|
|
||||||
v-show="
|
|
||||||
goodDetail.specialArea != 13 &&
|
|
||||||
goodDetail.specialArea != 31 &&
|
|
||||||
goodDetail.specialArea != 10
|
|
||||||
"
|
|
||||||
style="margin-right: 20px"
|
|
||||||
>
|
|
||||||
业绩:{{ goodDetail.goodsAchive | toThousandthAndKeepDecimal }}
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="dis_flex just m10">
|
||||||
v-show="
|
<div class="tit4 dis_flex">
|
||||||
goodDetail.specialArea == 31 && userInfo.isMakerSpace == 0
|
|
||||||
"
|
|
||||||
style="margin-right: 20px"
|
|
||||||
>
|
|
||||||
{{ "业绩" }}:{{
|
|
||||||
goodDetail.goodsAchive | toThousandthAndKeepDecimal
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-show="
|
|
||||||
goodDetail.specialArea == 10 || goodDetail.specialArea == 11
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ "积分可抵扣" }}:{{
|
|
||||||
goodDetail.deductMoney | numberToCurrency
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
<div v-show="goodDetail.specialArea == 13">
|
|
||||||
BV:{{
|
|
||||||
goodDetail.goodsAssAchive | toThousandthAndKeepDecimal
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="goods-price">{{ goodDetail.sales | seles }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="dis_flex just m10">
|
|
||||||
<div class="dis_flex" v-if="goodDetail.giftNames">
|
|
||||||
<div class="tit8">赠品：</div>
|
|
||||||
<div class="tit9">{{ goodDetail.giftNames }}</div>
|
|
||||||
</div>
|
|
||||||
<div v-else></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 规格 -->
|
|
||||||
<div class="gui">
|
|
||||||
<div v-for="item in filteredProductParams" :key="item.productId">
|
|
||||||
<div class="gui_t">
|
|
||||||
<div class="gui_th">规格:</div>
|
|
||||||
<div class="gui_y">
|
|
||||||
<div class="gui_tt">{{ item.productName }}</div>
|
|
||||||
<div class="gui_yi">应选:</div>
|
|
||||||
<span class="coloNum">{{ item.quantity }}</span>
|
|
||||||
<div class="gui_yi">已选:</div>
|
|
||||||
<span class="coloNum">{{ item.quantitySel }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="gui_b">
|
|
||||||
<div class="gui_bt">型号:</div>
|
|
||||||
<div class="gui_bb">
|
|
||||||
<div
|
|
||||||
v-for="(ctem, cndex) in item.waresItemsParamsList"
|
|
||||||
:key="ctem.pkSkuId"
|
|
||||||
class="gui_i"
|
|
||||||
>
|
|
||||||
<div class="gui_ia">
|
|
||||||
<el-popover placement="top-start" trigger="hover">
|
|
||||||
<div>{{ ctem.specsName }}</div>
|
|
||||||
<div
|
|
||||||
slot="reference"
|
|
||||||
v-show="ctem.specsNameDian.length > 17"
|
|
||||||
@click.stop="tapSku(index, cndex, ctem.quantity)"
|
|
||||||
:class="['gui_ii', ctem.checked ? 'gui_a' : '']"
|
|
||||||
>
|
|
||||||
<img :src="ctem.specCover" alt="" />
|
|
||||||
<div class="gui_iit">{{ ctem.specsNameDian }}</div>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
<div
|
<div
|
||||||
v-show="ctem.specsNameDian.length <= 17"
|
v-show="
|
||||||
@click.stop="tapSku(index, cndex, ctem.quantity)"
|
goodDetail.specialArea != 13 &&
|
||||||
:class="['gui_ii', ctem.checked ? 'gui_a' : '']"
|
goodDetail.specialArea != 31 &&
|
||||||
|
goodDetail.specialArea != 10
|
||||||
|
"
|
||||||
|
style="margin-right: 20px"
|
||||||
>
|
>
|
||||||
<img :src="ctem.specCover" alt="" />
|
业绩:{{
|
||||||
<div class="gui_iit">{{ ctem.specsNameDian }}</div>
|
goodDetail.goodsAchive | toThousandthAndKeepDecimal
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-show="
|
||||||
|
goodDetail.specialArea == 31 &&
|
||||||
|
userInfo.isMakerSpace == 0
|
||||||
|
"
|
||||||
|
style="margin-right: 20px"
|
||||||
|
>
|
||||||
|
{{ "业绩" }}:{{
|
||||||
|
goodDetail.goodsAchive | toThousandthAndKeepDecimal
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-show="
|
||||||
|
goodDetail.specialArea == 10 ||
|
||||||
|
goodDetail.specialArea == 11
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ "积分可抵扣" }}:{{
|
||||||
|
goodDetail.deductMoney | numberToCurrency
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div v-show="goodDetail.specialArea == 13">
|
||||||
|
BV:{{
|
||||||
|
goodDetail.goodsAssAchive | toThousandthAndKeepDecimal
|
||||||
|
}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="jbq" v-show="ctem.checked">
|
<div class="goods-price">{{ goodDetail.sales | seles }}</div>
|
||||||
<el-input-number
|
|
||||||
@change="getNum(index, cndex, $event)"
|
|
||||||
v-model="ctem.quantity"
|
|
||||||
:max="ctem.maxNum"
|
|
||||||
:min="0"
|
|
||||||
>
|
|
||||||
</el-input-number>
|
|
||||||
</div>
|
|
||||||
<div class="jbq" v-show="!ctem.checked"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="dis_flex just m10">
|
||||||
|
<div class="dis_flex" v-if="goodDetail.giftNames">
|
||||||
|
<div class="tit8">赠品：</div>
|
||||||
|
<div class="tit9">{{ goodDetail.giftNames }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 规格 -->
|
||||||
|
<div class="gui">
|
||||||
|
<div v-for="item in filteredProductParams" :key="item.productId">
|
||||||
|
<div class="gui_t">
|
||||||
|
<div class="gui_th">规格:</div>
|
||||||
|
<div class="gui_y">
|
||||||
|
<div class="gui_tt">{{ item.productName }}</div>
|
||||||
|
<div class="gui_yi">应选:</div>
|
||||||
|
<span class="coloNum">{{ item.quantity }}</span>
|
||||||
|
<div class="gui_yi">已选:</div>
|
||||||
|
<span class="coloNum">{{ item.quantitySel }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gui_b">
|
||||||
|
<div class="gui_bt">型号:</div>
|
||||||
|
<div class="gui_bb">
|
||||||
|
<div
|
||||||
|
v-for="(ctem, cndex) in item.waresItemsParamsList"
|
||||||
|
:key="ctem.pkSkuId"
|
||||||
|
class="gui_i"
|
||||||
|
>
|
||||||
|
<div class="gui_ia">
|
||||||
|
<el-popover placement="top-start" trigger="hover">
|
||||||
|
<div>{{ ctem.specsName }}</div>
|
||||||
|
<div
|
||||||
|
slot="reference"
|
||||||
|
v-show="ctem.specsNameDian.length > 17"
|
||||||
|
@click.stop="tapSku(index, cndex, ctem.quantity)"
|
||||||
|
:class="['gui_ii', ctem.checked ? 'gui_a' : '']"
|
||||||
|
>
|
||||||
|
<img :src="ctem.specCover" alt="" />
|
||||||
|
<div class="gui_iit">{{ ctem.specsNameDian }}</div>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
<div
|
||||||
|
v-show="ctem.specsNameDian.length <= 17"
|
||||||
|
@click.stop="tapSku(index, cndex, ctem.quantity)"
|
||||||
|
:class="['gui_ii', ctem.checked ? 'gui_a' : '']"
|
||||||
|
>
|
||||||
|
<img :src="ctem.specCover" alt="" />
|
||||||
|
<div class="gui_iit">{{ ctem.specsNameDian }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="jbq" v-show="ctem.checked">
|
||||||
|
<el-input-number
|
||||||
|
@change="getNum(index, cndex, $event)"
|
||||||
|
v-model="ctem.quantity"
|
||||||
|
:max="ctem.maxNum"
|
||||||
|
:min="0"
|
||||||
|
>
|
||||||
|
</el-input-number>
|
||||||
|
</div>
|
||||||
|
<div class="jbq" v-show="!ctem.checked"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 数量 -->
|
||||||
|
<div
|
||||||
|
class="dis_flex"
|
||||||
|
v-if="userInfo.registerShare == 0 || userInfo.registerFans == 0"
|
||||||
|
>
|
||||||
|
<div>数量：</div>
|
||||||
|
<el-input-number v-model="num" :min="1"></el-input-number>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="addCar"
|
||||||
|
v-if="
|
||||||
|
(specialArea == 31 && userInfo.isMakerSpace == 0) ||
|
||||||
|
specialArea != 31
|
||||||
|
"
|
||||||
|
@click="toAddCar"
|
||||||
|
>
|
||||||
|
加入购物车
|
||||||
|
</div>
|
||||||
|
<!-- <div class="addCar" v-else @click="goBuy">{{ '购买' }}</div> -->
|
||||||
|
<!-- {{ '服务承诺' }} -->
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
goodDetail.ensureLabelList &&
|
||||||
|
goodDetail.ensureLabelList.length > 0
|
||||||
|
"
|
||||||
|
class="dis_flex fw"
|
||||||
|
>
|
||||||
|
<div>服务承诺:</div>
|
||||||
|
<div
|
||||||
|
class="fw_i"
|
||||||
|
v-for="item in goodDetail.ensureLabelList"
|
||||||
|
:key="item.pkId"
|
||||||
|
>
|
||||||
|
<img src="@/assets/images/duihao.png" alt="" />
|
||||||
|
<div>{{ item.label }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 数量 -->
|
<div class="menuList">
|
||||||
<div
|
|
||||||
class="dis_flex"
|
|
||||||
v-if="userInfo.registerShare == 0 || userInfo.registerFans == 0"
|
|
||||||
>
|
|
||||||
<div>数量：</div>
|
|
||||||
<el-input-number v-model="num" :min="1"></el-input-number>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="addCar"
|
|
||||||
v-if="
|
|
||||||
(specialArea == 31 && userInfo.isMakerSpace == 0) ||
|
|
||||||
specialArea != 31
|
|
||||||
"
|
|
||||||
@click="toAddCar"
|
|
||||||
>
|
|
||||||
加入购物车
|
|
||||||
</div>
|
|
||||||
<!-- <div class="addCar" v-else @click="goBuy">{{ '购买' }}</div> -->
|
|
||||||
<!-- {{ '服务承诺' }} -->
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
goodDetail.ensureLabelList && goodDetail.ensureLabelList.length > 0
|
|
||||||
"
|
|
||||||
class="dis_flex fw"
|
|
||||||
>
|
|
||||||
<div>服务承诺:</div>
|
|
||||||
<div
|
<div
|
||||||
class="fw_i"
|
:class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
|
||||||
v-for="item in goodDetail.ensureLabelList"
|
@click="isMenu = 0"
|
||||||
:key="item.pkId"
|
|
||||||
>
|
>
|
||||||
<img src="@/assets/images/duihao.png" alt="" />
|
商品介绍
|
||||||
<div>{{ item.label }}</div>
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<!-- 推荐 -->
|
<!-- 推荐 -->
|
||||||
|
|
@ -242,35 +278,6 @@
|
||||||
</div>
|
</div>
|
||||||
</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>
|
|
||||||
|
|
||||||
<selSpaceGoods ref="selSpaceGoods" @getCar="getCatLength"></selSpaceGoods>
|
<selSpaceGoods ref="selSpaceGoods" @getCar="getCatLength"></selSpaceGoods>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -968,39 +975,6 @@ export default {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.details_t {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 60px;
|
|
||||||
margin-top: 40px;
|
|
||||||
.details_c {
|
|
||||||
flex: 1;
|
|
||||||
margin: 0 60px 0 40px;
|
|
||||||
.c_tit1 {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.c_hui {
|
|
||||||
padding: 22px 20px;
|
|
||||||
background: #eeeeee;
|
|
||||||
border-radius: 10px 10px 10px 10px;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #333333;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.c_bai {
|
|
||||||
// padding: 20px;
|
|
||||||
background: #ffffff;
|
|
||||||
box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.5);
|
|
||||||
border-radius: 10px 10px 10px 10px; // margin-top: 20px;
|
|
||||||
.c_bai_b {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dis_flex {
|
.dis_flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -1019,46 +993,82 @@ export default {
|
||||||
.m10 {
|
.m10 {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
.product-body {
|
||||||
.goodList {
|
display: flex;
|
||||||
width: 320px; /* Define a fixed width for the sticky column */
|
.product-container {
|
||||||
position: sticky;
|
flex: 1;
|
||||||
top: 20px; /* Adjust as needed based on header/breadcrumb height */
|
.details_t {
|
||||||
align-self: flex-start; /* Prevent stretching vertically with flex items */
|
display: flex;
|
||||||
padding-bottom: 20px; /* Add some padding at the bottom */
|
justify-content: space-between;
|
||||||
|
padding: 0 0 0px 60px;
|
||||||
.tited {
|
margin-top: 40px;
|
||||||
font-size: 18px;
|
.details_c {
|
||||||
font-weight: 600;
|
flex: 1;
|
||||||
color: #333333;
|
margin: 0 60px 0 40px;
|
||||||
margin-bottom: 10px;
|
.c_tit1 {
|
||||||
}
|
font-size: 22px;
|
||||||
.good_i {
|
font-weight: 600;
|
||||||
margin-bottom: 20px;
|
color: #333333;
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
}
|
||||||
cursor: pointer;
|
.c_hui {
|
||||||
border-radius: 10px;
|
padding: 22px 20px;
|
||||||
overflow: hidden;
|
background: #eeeeee;
|
||||||
.goodBtm {
|
border-radius: 10px 10px 10px 10px;
|
||||||
padding: 10px 20px 10px 20px;
|
font-size: 18px;
|
||||||
background: #ffffff;
|
color: #333333;
|
||||||
border-radius: 0px 0px 10px 10px;
|
margin-top: 20px;
|
||||||
margin-top: -5px;
|
}
|
||||||
position: relative;
|
.c_bai {
|
||||||
z-index: 1;
|
// padding: 20px;
|
||||||
}
|
background: #ffffff;
|
||||||
&:hover {
|
box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.5);
|
||||||
transform: translateY(-5px);
|
border-radius: 10px 10px 10px 10px; // margin-top: 20px;
|
||||||
box-shadow: 0px 8px 20px rgba(100, 100, 100, 0.2);
|
.c_bai_b {
|
||||||
position: relative;
|
padding: 20px;
|
||||||
z-index: 2;
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.goodImg {
|
.goodList {
|
||||||
width: 318px;
|
width: 320px; /* Define a fixed width for the sticky column */
|
||||||
height: 318px;
|
align-self: flex-start; /* Prevent stretching vertically with flex items */
|
||||||
border-radius: 10px 10px 0px 0px;
|
padding-bottom: 20px; /* Add some padding at the bottom */
|
||||||
display: block;
|
padding-top: 80px;
|
||||||
|
margin-right: 60px;
|
||||||
|
.tited {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.good_i {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
.goodBtm {
|
||||||
|
padding: 10px 20px 10px 20px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 0px 0px 10px 10px;
|
||||||
|
margin-top: -5px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0px 8px 20px rgba(100, 100, 100, 0.2);
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goodImg {
|
||||||
|
width: 318px;
|
||||||
|
height: 318px;
|
||||||
|
border-radius: 10px 10px 0px 0px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1273,6 +1283,7 @@ export default {
|
||||||
height: 5px;
|
height: 5px;
|
||||||
background: rgba(0, 0, 0, 0.05);
|
background: rgba(0, 0, 0, 0.05);
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
|
width: calc(100% - 60px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.allDetail {
|
.allDetail {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue