修改src\views\shop\Cart.vue,將src\views\shop\Content.vue下的class等于product復制一份過去：
<template>
<div class="cart">
<div class="product">
<div class="product__item" v-for="item in list" :key="item._id">
<img class="product__item__img" :src="item.imgUrl" />
<div class="product__item__detail">
<h4 class="product__item__title">{{ item.name }}</h4>
<p class="product__item__sales">月售{{ item.sales }}件</p>
<p class="product__item__price">
<span class="product__item__yen"> ¥{{ item.price }} </span>
<span class="product__item__origin">
¥{{ item.oldPrice }}
</span>
</p>
</div>
<div class="product__number">
<span
class="product__number__minus"
@click="
() => {
changeItemToCart(shopId, item._id, item, -1)
}
"
>-</span
>
{{ cartList?.[shopId]?.[item._id]?.count || 0 }}
<span
class="product__number__plus"
@click="
() => {
changeItemToCart(shopId, item._id, item, 1)
}
"
>+</span
>
</div>
</div>
</div>
<div class="check">
......
</div>
</div>
</template>
......
然后將樣式也抄過去：
<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.cart {
......
}
.product {
overflow-y: scroll;
flex: 1;
&__item {
position: relative;
display: flex;
padding: 0.12rem 0.16rem;
margin: 0 0.16rem;
border-bottom: 0.01rem solid $content-bg-color;
// 配合解決超出長度以省略號顯示而不會出現(xiàn)換行
&__detail {
overflow: hidden;
}
&__img {
width: 0.68rem;
height: 0.68rem;
margin-right: 0.16rem;
}
&__title {
margin: 0;
line-height: 0.2rem;
font-size: 0.14rem;
color: $content-font-color;
// 超出長度以省略號顯示而不會出現(xiàn)換行
@include ellipsis;
}
&__sales {
margin: 0.06rem 0;
line-height: 0.16rem;
font-size: 0.12rem;
color: $content-font-color;
}
&__price {
margin: 0;
line-height: 0.2rem;
font-size: 0.14rem;
color: $height-light-font-color;
}
&__yen {
font-size: 0.12rem;
}
&__origin {
margin-left: 0.06rem;
line-height: 0.2rem;
font-size: 0.12rem;
color: $light-font-color;
text-decoration: line-through; //中劃線
}
// 購物車選購數(shù)量和加減號
.product__number {
position: absolute;
right: 0rem;
bottom: 0.12rem;
&__minus,
&__plus {
display: inline-block;
width: 0.2rem;
height: 0.2rem;
line-height: 0.16rem;
border-radius: 50%;
font-size: 0.2rem;
text-align: center;
}
// 邊框白色
&__minus {
border: 0.01rem solid $medium-font-color;
color: $medium-font-color;
margin-right: 0.05rem;
}
//無邊框魄眉，背景藍色
&__plus {
color: $bg-color;
background: $btn-bg-color;
margin-left: 0.05rem;
}
}
}
}
......
</style>
這時候完善list數(shù)組：
<template>
<div class="cart">
<div class="product">
<div class="product__item" v-for="item in productList" :key="item._id">
<img class="product__item__img" :src="item.imgUrl" />
<div class="product__item__detail">
<h4 class="product__item__title">{{ item.name }}</h4>
<p class="product__item__sales">月售{{ item.sales }}件</p>
<p class="product__item__price">
<span class="product__item__yen"> ¥{{ item.price }} </span>
<span class="product__item__origin">
¥{{ item.oldPrice }}
</span>
</p>
</div>
<div class="product__number">
<span
class="product__number__minus"
@click="
() => {
changeItemToCart(shopId, item._id, item, -1)
}
"
>-</span
>
{{ cartList?.[shopId]?.[item._id]?.count || 0 }}
<span
class="product__number__plus"
@click="
() => {
changeItemToCart(shopId, item._id, item, 1)
}
"
>+</span
>
</div>
</div>
</div>
<div class="check">
<div class="check__icon">
<img src="/i18n/9_16/img/basket.png" alt="" class="check__icon__img" />
<div class="check__icon__tag">{{ total }}</div>
</div>
<div class="check__info">
總計：<span class="check__info__price">¥ {{ totalPrice }}</span>
</div>
<div class="check__btn">去結(jié)算</div>
</div>
</div>
</template>
<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router' // 路由跳轉(zhuǎn)方法
import { useStore } from 'vuex' // 路由跳轉(zhuǎn)方法
const useCartEffect = () => {
const store = useStore()
const route = useRoute()
// 計算shopId下所有cartList的商品數(shù)量total逞姿、價錢之和totalPrice
const shopId = route.params.id // 店鋪id
const cartList = store.state.cartList // 加入購物車的商品列表
const total = computed(() => {
const productList = cartList[shopId]
let count = 0
if (productList) {
for (const i in productList) {
const product = productList[i]
count += product.count
}
}
return count
})
const totalPrice = computed(() => {
const productList = cartList[shopId]
let count = 0
if (productList) {
for (const i in productList) {
const product = productList[i]
count += product.count * product.price
}
}
return count.toFixed(2)
})
const productList = computed(() => {
const productList = cartList[shopId] || [] // 不存在默認空數(shù)組
return productList
})
return { total, totalPrice, productList }
}
export default {
name: 'Cart',
setup() {
// 計算總價和加入購物車的總數(shù)量
const { total, totalPrice, productList } = useCartEffect()
return { total, totalPrice, productList }
}
}
</script>
<style lang="scss" scoped>
......
</style>
image.png
優(yōu)化代碼，實現(xiàn)數(shù)據(jù)同步：
<template>
<div class="cart">
<div class="product">
<div class="product__item" v-for="item in productList" :key="item._id">
<img class="product__item__img" :src="item.imgUrl" />
<div class="product__item__detail">
<h4 class="product__item__title">{{ item.name }}</h4>
<p class="product__item__price">
<span class="product__item__yen"> ¥{{ item.price }} </span>
<span class="product__item__origin">
¥{{ item.oldPrice }}
</span>
</p>
</div>
<div class="product__number">
<span
class="product__number__minus"
@click="
() => {
changeItemToCart(shopId, item._id, item, -1)
}
"
>-</span
>
{{ item?.count || 0 }}
<span
class="product__number__plus"
@click="
() => {
changeItemToCart(shopId, item._id, item, 1)
}
"
>+</span
>
</div>
</div>
</div>
<div class="check">
<div class="check__icon">
<img src="/i18n/9_16/img/basket.png" alt="" class="check__icon__img" />
<div class="check__icon__tag">{{ total }}</div>
</div>
<div class="check__info">
總計：<span class="check__info__price">¥ {{ totalPrice }}</span>
</div>
<div class="check__btn">去結(jié)算</div>
</div>
</div>
</template>
<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router' // 路由跳轉(zhuǎn)方法
import { useStore } from 'vuex' // 路由跳轉(zhuǎn)方法
const useCartEffect = shopId => {
const store = useStore()
// 計算shopId下所有cartList的商品數(shù)量total猪半、價錢之和totalPrice
const cartList = store.state.cartList // 加入購物車的商品列表
const total = computed(() => {
const productList = cartList[shopId]
let count = 0
if (productList) {
for (const i in productList) {
const product = productList[i]
count += product.count
}
}
return count
})
const totalPrice = computed(() => {
const productList = cartList[shopId]
let count = 0
if (productList) {
for (const i in productList) {
const product = productList[i]
count += product.count * product.price
}
}
return count.toFixed(2)
})
const productList = computed(() => {
const productList = cartList[shopId] || [] // 不存在默認空數(shù)組
return productList
})
return { total, totalPrice, productList }
}
export default {
name: 'Cart',
setup() {
const route = useRoute()
const shopId = route.params.id // 店鋪id
// 計算總價和加入購物車的總數(shù)量
const { total, totalPrice, productList } = useCartEffect(shopId)
return { total, totalPrice, productList, shopId }
}
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.cart {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.product {
overflow-y: scroll;
flex: 1;
&__item {
position: relative;
display: flex;
padding: 0.12rem 0.16rem;
margin: 0 0.16rem;
border-bottom: 0.01rem solid $content-bg-color;
// 配合解決超出長度以省略號顯示而不會出現(xiàn)換行
&__detail {
overflow: hidden;
}
&__img {
width: 0.46rem;
height: 0.46rem;
margin-right: 0.16rem;
}
&__title {
margin: 0;
line-height: 0.2rem;
font-size: 0.14rem;
color: $content-font-color;
// 超出長度以省略號顯示而不會出現(xiàn)換行
@include ellipsis;
}
&__price {
margin: 0.06rem 0 0 0;
line-height: 0.2rem;
font-size: 0.14rem;
color: $height-light-font-color;
}
&__yen {
font-size: 0.12rem;
}
&__origin {
margin-left: 0.06rem;
line-height: 0.2rem;
font-size: 0.12rem;
color: $light-font-color;
text-decoration: line-through; //中劃線
}
// 購物車選購數(shù)量和加減號
.product__number {
position: absolute;
right: 0rem;
bottom: 0.12rem;
&__minus,
&__plus {
display: inline-block;
width: 0.2rem;
height: 0.2rem;
line-height: 0.16rem;
border-radius: 50%;
font-size: 0.2rem;
text-align: center;
}
// 邊框白色
&__minus {
border: 0.01rem solid $medium-font-color;
color: $medium-font-color;
margin-right: 0.05rem;
}
//無邊框降铸，背景藍色
&__plus {
color: $bg-color;
background: $btn-bg-color;
margin-left: 0.05rem;
}
}
}
}
.check {
display: flex;
box-sizing: border-box; //往內(nèi)塞入border
line-height: 0.49rem;
height: 0.49rem;
border-top: 0.01rem solid $content-bg-color;
&__icon {
width: 0.84rem;
position: relative;
&__img {
margin: 0.12rem auto;
display: block;
width: 0.28rem;
height: 0.28rem;
}
&__tag {
// 乘以2然后等比例縮小
position: absolute;
left: 0.46rem;
top: 0.04rem;
padding: 0 0.04rem;
min-width: 0.2rem;
height: 0.2rem;
line-height: 0.2rem;
text-align: center;
background-color: $height-light-font-color;
border-radius: 0.1rem;
font-size: 0.12rem;
color: $bg-color;
transform: scale(0.5);
transform-origin: left center;
}
}
&__info {
flex: 1;
color: $content-font-color;
font-size: 0.12rem;
&__price {
line-height: 0.49rem;
color: $height-light-font-color;
font-size: 0.18rem;
}
}
&__btn {
width: 0.98rem;
background-color: #4fb0f9;
text-align: center;
color: $bg-color;
font-size: 0.14rem;
}
}
</style>
image.png
新建
src\views\shop\commnCartEffect.js在旱，將需要用到的一些公共方法摘出來：
import { toRefs } from 'vue'
import { useStore } from 'vuex'
// 添加、減少到購物車功能
export const useCommonCartEffect = () => {
const store = useStore()
const { cartList } = toRefs(store.state)
const changeItemToCart = (shopId, productId, productInfo, num) => {
console.log(
'changeItemToCart:',
'shopId:' + shopId,
'productId:' + productId,
'productInfo:' + JSON.stringify(productInfo),
'num:' + num
)
store.commit('changeItemToCart', { shopId, productId, productInfo, num })
}
return { cartList, changeItemToCart }
}
修改src\views\shop\Content.vue
<template>
......
</template>
<script>
import { reactive, ref, toRefs, watchEffect } from 'vue'
import { useRoute } from 'vue-router' // 路由跳轉(zhuǎn)方法
import { get } from '@/utils/request.js'
import { useCommonCartEffect } from './commnCartEffect'
......
......
setup() {
......
const { cartList, changeItemToCart } = useCommonCartEffect()
}
......
</script>
<style lang="scss" scoped>
......
</style>
運行推掸，不影響已開發(fā)好的功能桶蝎。
修改src\views\shop\Cart.vue
<template>
<div class="cart">
<div class="product">
<div class="product__item" v-for="item in productList" :key="item._id">
<img class="product__item__img" :src="item.imgUrl" />
<div class="product__item__detail">
<h4 class="product__item__title">{{ item.name }}</h4>
<p class="product__item__price">
<span class="product__item__yen"> ¥{{ item.price }} </span>
<span class="product__item__origin">
¥{{ item.oldPrice }}
</span>
</p>
</div>
<div class="product__number">
<span
class="product__number__minus"
@click="
() => {
changeItemToCart(shopId, item._id, item, -1)
}
"
>-</span
>
{{ item?.count || 0 }}
<span
class="product__number__plus"
@click="
() => {
changeItemToCart(shopId, item._id, item, 1)
}
"
>+</span
>
</div>
</div>
</div>
<div class="check">
<div class="check__icon">
<img src="/i18n/9_16/img/basket.png" alt="" class="check__icon__img" />
<div class="check__icon__tag">{{ total }}</div>
</div>
<div class="check__info">
總計：<span class="check__info__price">¥ {{ totalPrice }}</span>
</div>
<div class="check__btn">去結(jié)算</div>
</div>
</div>
</template>
<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router' // 路由跳轉(zhuǎn)方法
import { useStore } from 'vuex' // 路由跳轉(zhuǎn)方法
import { useCommonCartEffect } from './commnCartEffect'
......
export default {
name: 'Cart',
setup() {
const route = useRoute()
const shopId = route.params.id // 店鋪id
// 計算總價和加入購物車的總數(shù)量
const { total, totalPrice, productList } = useCartEffect(shopId)
const { changeItemToCart } = useCommonCartEffect()
return { total, totalPrice, productList, shopId, changeItemToCart }
}
}
</script>
<style lang="scss" scoped>
......
</style>
這樣，兩個地方購物車數(shù)量的加減都可以同步修改谅畅。
再結(jié)合增加有無該商品的控制：
<template>
<div class="cart">
<div class="product">
<div class="product__item" v-for="item in productList" :key="item._id">
<template v-if="item.count > 0">
<img class="product__item__img" :src="item.imgUrl" />
<div class="product__item__detail">
......
</div>
<div class="product__number">
......
</div>
</template>
</div>
</div>
<div class="check">
......
</div>
</div>
</template>
<script>
......
</script>
<style lang="scss" scoped>
......
</style>
但是這樣做會出現(xiàn)如下問題：
image.png
刪掉的商品會留下一個div空盒子登渣。解決方法如下：
<template>
<div class="cart">
<div class="product">
<template v-for="item in productList" :key="item._id">
<div class="product__item" v-if="item.count > 0">
......
</div>
</template>
</div>
<div class="check">
.......
</div>
</div>
</template>
<script>
......
</script>
<style lang="scss" scoped>
......
</style>
image.png
到這里就實現(xiàn)了商品上下增減商品數(shù)量的綁定，相互可以維護數(shù)量铃彰。
稍稍優(yōu)化一下绍豁，將和Cart相關的操作放到一起：
src\views\shop\commnCartEffect.js:
// import { toRefs } from 'vue'
import { useStore } from 'vuex'
// 添加芯咧、減少到購物車功能
export const useCommonCartEffect = () => {
const store = useStore()
// const { cartList } = toRefs(store.state)
const changeCartItemInfo = (shopId, productId, productInfo, num) => {
console.log(
'changeItemToCart:',
'shopId:' + shopId,
'productId:' + productId,
'productInfo:' + JSON.stringify(productInfo),
'num:' + num
)
store.commit('changeItemToCart', { shopId, productId, productInfo, num })
}
return { changeCartItemInfo }
}
src\views\shop\Cart.vue:
<template>
<div class="cart">
<div class="product">
<template v-for="item in productList" :key="item._id">
<div class="product__item" v-if="item.count > 0">
<img class="product__item__img" :src="item.imgUrl" />
<div class="product__item__detail">
<h4 class="product__item__title">{{ item.name }}</h4>
<p class="product__item__price">
<span class="product__item__yen"> ¥{{ item.price }} </span>
<span class="product__item__origin">
¥{{ item.oldPrice }}
</span>
</p>
</div>
<div class="product__number">
<span
class="product__number__minus"
@click="
() => {
changeCartItemInfo(shopId, item._id, item, -1)
}
"
>-</span
>
{{ item?.count || 0 }}
<span
class="product__number__plus"
@click="
() => {
changeCartItemInfo(shopId, item._id, item, 1)
}
"
>+</span
>
</div>
</div>
</template>
</div>
<div class="check">
<div class="check__icon">
<img src="/i18n/9_16/img/basket.png" alt="" class="check__icon__img" />
<div class="check__icon__tag">{{ total }}</div>
</div>
<div class="check__info">
總計：<span class="check__info__price">¥ {{ totalPrice }}</span>
</div>
<div class="check__btn">去結(jié)算</div>
</div>
</div>
</template>
<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router' // 路由跳轉(zhuǎn)方法
import { useStore } from 'vuex' // 路由跳轉(zhuǎn)方法
import { useCommonCartEffect } from './commnCartEffect'
const useCartEffect = shopId => {
const { changeCartItemInfo } = useCommonCartEffect()
const store = useStore()
// 計算shopId下所有cartList的商品數(shù)量total牙捉、價錢之和totalPrice
const cartList = store.state.cartList // 加入購物車的商品列表
const total = computed(() => {
const productList = cartList[shopId]
let count = 0
if (productList) {
for (const i in productList) {
const product = productList[i]
count += product.count
}
}
return count
})
const totalPrice = computed(() => {
const productList = cartList[shopId]
let count = 0
if (productList) {
for (const i in productList) {
const product = productList[i]
count += product.count * product.price
}
}
return count.toFixed(2)
})
const productList = computed(() => {
const productList = cartList[shopId] || [] // 不存在默認空數(shù)組
return productList
})
return { total, totalPrice, productList, changeCartItemInfo }
}
export default {
name: 'Cart',
setup() {
const route = useRoute()
const shopId = route.params.id // 店鋪id
// 計算總價和加入購物車的總數(shù)量
const {
total,
totalPrice,
productList,
changeCartItemInfo
} = useCartEffect(shopId)
return { total, totalPrice, productList, shopId, changeCartItemInfo }
}
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.cart {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.product {
overflow-y: scroll;
flex: 1;
&__item {
position: relative;
display: flex;
padding: 0.12rem 0.16rem;
margin: 0 0.16rem;
border-bottom: 0.01rem solid $content-bg-color;
// 配合解決超出長度以省略號顯示而不會出現(xiàn)換行
&__detail {
overflow: hidden;
}
&__img {
width: 0.46rem;
height: 0.46rem;
margin-right: 0.16rem;
}
&__title {
margin: 0;
line-height: 0.2rem;
font-size: 0.14rem;
color: $content-font-color;
// 超出長度以省略號顯示而不會出現(xiàn)換行
@include ellipsis;
}
&__price {
margin: 0.06rem 0 0 0;
line-height: 0.2rem;
font-size: 0.14rem;
color: $height-light-font-color;
}
&__yen {
font-size: 0.12rem;
}
&__origin {
margin-left: 0.06rem;
line-height: 0.2rem;
font-size: 0.12rem;
color: $light-font-color;
text-decoration: line-through; //中劃線
}
// 購物車選購數(shù)量和加減號
.product__number {
position: absolute;
right: 0rem;
bottom: 0.12rem;
&__minus,
&__plus {
display: inline-block;
width: 0.2rem;
height: 0.2rem;
line-height: 0.16rem;
border-radius: 50%;
font-size: 0.2rem;
text-align: center;
}
// 邊框白色
&__minus {
border: 0.01rem solid $medium-font-color;
color: $medium-font-color;
margin-right: 0.05rem;
}
//無邊框，背景藍色
&__plus {
color: $bg-color;
background: $btn-bg-color;
margin-left: 0.05rem;
}
}
}
}
.check {
display: flex;
box-sizing: border-box; //往內(nèi)塞入border
line-height: 0.49rem;
height: 0.49rem;
border-top: 0.01rem solid $content-bg-color;
&__icon {
width: 0.84rem;
position: relative;
&__img {
margin: 0.12rem auto;
display: block;
width: 0.28rem;
height: 0.28rem;
}
&__tag {
// 乘以2然后等比例縮小
position: absolute;
left: 0.46rem;
top: 0.04rem;
padding: 0 0.04rem;
min-width: 0.2rem;
height: 0.2rem;
line-height: 0.2rem;
text-align: center;
background-color: $height-light-font-color;
border-radius: 0.1rem;
font-size: 0.12rem;
color: $bg-color;
transform: scale(0.5);
transform-origin: left center;
}
}
&__info {
flex: 1;
color: $content-font-color;
font-size: 0.12rem;
&__price {
line-height: 0.49rem;
color: $height-light-font-color;
font-size: 0.18rem;
}
}
&__btn {
width: 0.98rem;
background-color: #4fb0f9;
text-align: center;
color: $bg-color;
font-size: 0.14rem;
}
}
</style>
src\views\shop\Content.vue:
<template>
<div class="content">
<div class="category">
<div
:class="{
category__item: true,
'category__item--active': currentTab === item.tab
}"
v-for="item in categories"
:key="item.tab"
@click="handleTabClick(item.tab)"
>
{{ item.name }}
</div>
</div>
<div class="product">
<div class="product__item" v-for="item in list" :key="item._id">
<img class="product__item__img" :src="item.imgUrl" />
<div class="product__item__detail">
<h4 class="product__item__title">{{ item.name }}</h4>
<p class="product__item__sales">月售{{ item.sales }}件</p>
<p class="product__item__price">
<span class="product__item__yen"> ¥{{ item.price }} </span>
<span class="product__item__origin">
¥{{ item.oldPrice }}
</span>
</p>
</div>
<div class="product__number">
<span
class="product__number__minus"
@click="
() => {
changeCartItemInfo(shopId, item._id, item, -1)
}
"
>-</span
>
{{ item?.count || 0 }}
<span
class="product__number__plus"
@click="
() => {
changeCartItemInfo(shopId, item._id, item, 1)
}
"
>+</span
>
</div>
</div>
</div>
</div>
</template>
<script>
import { reactive, ref, toRefs, watchEffect } from 'vue'
import { useRoute } from 'vue-router' // 路由跳轉(zhuǎn)方法
import { get } from '@/utils/request.js'
import { useCommonCartEffect } from './commnCartEffect'
const categories = [
{
name: '全部商品',
tab: 'all'
},
{
name: '秒殺',
tab: 'seckill'
},
{
name: '新鮮水果',
tab: 'fruit'
},
{
name: '休閑食品',
tab: 'snack'
}
]
// 和tab切換相關的邏輯
const useTabEffect = () => {
const currentTab = ref(categories[0].tab)
const handleTabClick = tab => {
console.log('click:' + tab)
currentTab.value = tab
}
return { currentTab, handleTabClick }
}
// 當前列表內(nèi)容相關的函數(shù)
const useContentListEffect = (currentTab, shopId) => {
const content = reactive({ list: [] })
const getContentData = async () => {
const result = await get(`/api/shop/${shopId}/products`, {
tab: currentTab.value
})
console.log('result:' + result)
if (result?.code === 200 && result?.data?.length) {
content.list = result.data
}
}
// watchEffect：當首次頁面加載時敬飒，或當其中監(jiān)聽的數(shù)據(jù)發(fā)生變化時執(zhí)行
watchEffect(() => {
getContentData()
})
const { list } = toRefs(content)
return { list }
}
export default {
name: 'Content',
props: {
id: String
},
setup() {
const route = useRoute() // 獲取路由
const shopId = route.params.id
const { currentTab, handleTabClick } = useTabEffect()
const { list } = useContentListEffect(currentTab, shopId)
const { changeCartItemInfo } = useCommonCartEffect()
return {
list,
categories,
handleTabClick,
currentTab,
shopId,
changeCartItemInfo
}
}
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.content {
display: flex;
position: absolute;
left: 0;
right: 0;
top: 1.6rem;
bottom: 0.5rem;
}
.category {
overflow-y: scroll;
width: 0.76rem;
background: $search-bg-color;
height: 100%;
&__item {
line-height: 0.4rem;
text-align: center;
font-size: 14px;
color: $content-font-color;
&--active {
background: $bg-color;
}
}
}
.product {
overflow-y: scroll;
flex: 1;
&__item {
position: relative;
display: flex;
padding: 0.12rem 0.16rem;
margin: 0 0.16rem;
border-bottom: 0.01rem solid $content-bg-color;
// 配合解決超出長度以省略號顯示而不會出現(xiàn)換行
&__detail {
overflow: hidden;
}
&__img {
width: 0.68rem;
height: 0.68rem;
margin-right: 0.16rem;
}
&__title {
margin: 0;
line-height: 0.2rem;
font-size: 0.14rem;
color: $content-font-color;
// 超出長度以省略號顯示而不會出現(xiàn)換行
@include ellipsis;
}
&__sales {
margin: 0.06rem 0;
line-height: 0.16rem;
font-size: 0.12rem;
color: $content-font-color;
}
&__price {
margin: 0;
line-height: 0.2rem;
font-size: 0.14rem;
color: $height-light-font-color;
}
&__yen {
font-size: 0.12rem;
}
&__origin {
margin-left: 0.06rem;
line-height: 0.2rem;
font-size: 0.12rem;
color: $light-font-color;
text-decoration: line-through; //中劃線
}
// 購物車選購數(shù)量和加減號
.product__number {
position: absolute;
right: 0rem;
bottom: 0.12rem;
&__minus,
&__plus {
display: inline-block;
width: 0.2rem;
height: 0.2rem;
line-height: 0.16rem;
border-radius: 50%;
font-size: 0.2rem;
text-align: center;
}
// 邊框白色
&__minus {
border: 0.01rem solid $medium-font-color;
color: $medium-font-color;
margin-right: 0.05rem;
}
//無邊框邪铲，背景藍色
&__plus {
color: $bg-color;
background: $btn-bg-color;
margin-left: 0.05rem;
}
}
}
}
</style>
