1
This commit is contained in:
749
src/pages/client/shop/index.vue
Normal file
749
src/pages/client/shop/index.vue
Normal file
@ -0,0 +1,749 @@
|
||||
<template>
|
||||
<view class="flex-column-start shop-container">
|
||||
<view class="shop-header">
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="header-content">
|
||||
<view class="search-bar" :style="{ width: searchBarWidth + 'rpx' }" @click="jumpToSearch">
|
||||
<text class="search-icon">🔍</text>
|
||||
<text class="search-placeholder">猫猫主粮</text>
|
||||
</view>
|
||||
<view class="category-tabs-wrapper">
|
||||
<!-- 左侧固定：综合 -->
|
||||
<view class="category-tab fixed-left" :class="{ active: activeCategoryIndex === 0 }"
|
||||
@click="switchCategory(0)">
|
||||
综合
|
||||
</view>
|
||||
<!-- 中间可滚动：动态分类数据 -->
|
||||
<scroll-view class="category-tabs-scroll" scroll-x>
|
||||
<view class="category-tab" v-for="(tab, index) in classifyList" :key="index"
|
||||
:class="{ active: activeCategoryIndex === tab.id }" @click="switchCategory(tab.id)">
|
||||
{{ tab.type_name }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 右侧固定：分类 -->
|
||||
<view class="category-tab fixed-right"
|
||||
:class="{ active: activeCategoryIndex === classifyList.length + 1 }" @click="jumpToSearch">
|
||||
<image class="category-icon" :src="`${imgPrefix}mall-category.png`" />
|
||||
分类
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class="shop-content" :style="{ paddingTop: headerHeight + 'rpx' }" scroll-y
|
||||
:refresher-enabled="true" :refresher-triggered="refreshTriggered" @refresherrefresh="onRefresh"
|
||||
@scrolltolower="onLoadMore">
|
||||
<view>
|
||||
<image class="info-avator" src="https://activity.wagoo.live/bannerMall.png" />
|
||||
</view>
|
||||
<!-- <view class="banner-swiper">
|
||||
<swiper class="swiper-wrapper" circular :indicator-dots="false" :autoplay="true" @change="bannerChange">
|
||||
<swiper-item v-for="banner in bannerList" :key="banner.ad_id" @click="jumpTo(banner.ad_url)">
|
||||
<image class="swiper-img" :src="banner.thumb" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="flex-row-center dot-box">
|
||||
<view v-for="(banner, index) in bannerList" :key="banner.ad_id" class="dot-item"
|
||||
:class="{ active: bannerIndex === index }"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- <view class="flex-row-start shop-classify">
|
||||
<view
|
||||
class="flex-center classify-item"
|
||||
v-for="classify in classifyList"
|
||||
:key="classify.id"
|
||||
@click="jumpToCategory(classify)"
|
||||
>
|
||||
<image class="classify-img" :src="classify.select_type_pic" />
|
||||
<text class="app-fc-main fs-26 app-font-bold">{{
|
||||
classify.name
|
||||
}}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- <view
|
||||
v-if="couponList.length"
|
||||
class="flex-row-start coupon-view"
|
||||
@click="showCouponModal = true"
|
||||
>
|
||||
<image
|
||||
class="coupon-icon"
|
||||
src="https://activity.wagoo.live/new_account_coupon.png"
|
||||
/>
|
||||
<text class="flex-1 app-fc-mark fs-24 app-text-ellipse">
|
||||
您有{{
|
||||
couponList.length === 1
|
||||
? `一张${couponList[0].card_money || 0}元`
|
||||
: "多张"
|
||||
}}优惠券待领取
|
||||
</text>
|
||||
<image
|
||||
class="coupon-arrow"
|
||||
src="@/static/images/arrow_mark.png"
|
||||
mode="heightFix"
|
||||
/>
|
||||
</view> -->
|
||||
|
||||
<view class="recommand-goods-wrapper">
|
||||
<!-- <view class="fs-36 app-font-bold app-fc-main recommand-title">
|
||||
推荐商品
|
||||
</view> -->
|
||||
<view class="goods-list">
|
||||
<view class="goods-list-item left">
|
||||
<good-item v-for="(good, i) in leftColumnGoods" :index="2 * i" :key="2 * i" :data="good"
|
||||
@addToCar="addToCar" />
|
||||
</view>
|
||||
<view class="goods-list-item">
|
||||
<good-item v-for="(good, i) in rightColumnGoods" :index="2 * i + 1" :key="2 * i + 1"
|
||||
:data="good" @addToCar="addToCar" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isLoadingGoods" class="loading-wrapper flex-center">
|
||||
<uni-load-more status="loading" :show-text="false" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="add-car-view">
|
||||
<image class="add-car-icon" :src="`${imgPrefix}mall-shopCar.png`" @click="jumpToCart" />
|
||||
</view>
|
||||
<view v-if="cartShowCount" class="fs-20 app-fc-white flex-center cart-count">
|
||||
{{ cartShowCount }}
|
||||
</view>
|
||||
|
||||
<view class="contact-icon-view">
|
||||
<image class="contact-icon" :src="`${imgPrefix}supportStaff.png`" @click="jumpToWeChat" />
|
||||
<view class="contact-btn fs-20">
|
||||
联系客服
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<add-goods-modal v-if="showModal" :data="addGoodInfo" optText="加入购物车" @change="(val) => (showModal = val)"
|
||||
@optAction="optAction" />
|
||||
<coupon-modal v-if="showCouponModal" :couponList="couponList" @close="onCouponModalClose"
|
||||
@getCoupon="getCoupon" />
|
||||
<contact-modal v-if="showContactModal" @close="showContactModal = false" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
imgPrefix
|
||||
} from '@/utils/common';
|
||||
|
||||
import GoodItem from "./components/GoodItem.vue";
|
||||
import AddGoodsModal from "@/components/goods/AddGoodsModal.vue";
|
||||
import CouponModal from "./components/CouponModal.vue";
|
||||
import ContactModal from "@/components/ContactModal.vue";
|
||||
|
||||
import {
|
||||
getGoodsClassify,
|
||||
getGoodsListData
|
||||
} from "@/api/shop";
|
||||
import {
|
||||
getCouponData
|
||||
} from "@/api/coupon";
|
||||
import {
|
||||
addCart,
|
||||
getCartList
|
||||
} from "../../../api/shop";
|
||||
import {
|
||||
getImageList
|
||||
} from "../../../api/common";
|
||||
import {
|
||||
jumpToWeChat
|
||||
} from "@/utils/common";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GoodItem,
|
||||
AddGoodsModal,
|
||||
CouponModal,
|
||||
ContactModal,
|
||||
},
|
||||
data() {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
// 获取胶囊按钮位置信息，计算搜索栏宽度
|
||||
// 默认宽度：750rpx (标准屏幕宽度) - 32rpx (左侧padding) - 右侧到胶囊的距离
|
||||
let searchBarWidth = 686;
|
||||
try {
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
if (menuButtonInfo && menuButtonInfo.left) {
|
||||
// 屏幕宽度转换为 rpx (750rpx 对应 375px)
|
||||
const screenWidthRpx = 750;
|
||||
const leftPadding = 32; // header-content 左侧 padding
|
||||
// 右侧需要留出的空间：屏幕宽度(px) - 胶囊按钮左边距(px) + 额外间距(px)，然后转换为 rpx
|
||||
const rightSpacePx = systemInfo.windowWidth - menuButtonInfo.left + 20;
|
||||
const rightSpaceRpx = (rightSpacePx / systemInfo.windowWidth) * screenWidthRpx;
|
||||
searchBarWidth = screenWidthRpx - leftPadding - rightSpaceRpx;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('获取胶囊按钮信息失败', e);
|
||||
}
|
||||
// 计算 shop-header 的总高度
|
||||
// status-bar 高度(px转rpx) + header-content 高度
|
||||
// header-content: 20rpx(上padding) + 72rpx(搜索栏) + 24rpx(margin-bottom) + 约40rpx(分类标签) + 20rpx(下padding)
|
||||
const statusBarHeightRpx = (systemInfo.statusBarHeight || 0) * 2; // px转rpx
|
||||
const headerContentHeight = 20 + 72 + 10 + 40 + 20; // 约176rpx
|
||||
const headerHeight = statusBarHeightRpx + headerContentHeight;
|
||||
return {
|
||||
statusBarHeight: systemInfo.statusBarHeight || 0,
|
||||
headerHeight: headerHeight,
|
||||
searchBarWidth: searchBarWidth,
|
||||
activeCategoryIndex: 0,
|
||||
// categoryTabs: ['综合', '宠物食品', '宠物洗护', '宠物用品', '宠物健康'],
|
||||
refreshTriggered: false,
|
||||
bannerList: [{
|
||||
id: 1,
|
||||
image: 'https://activity.wagoo.live/mine_pet.png',
|
||||
}
|
||||
],
|
||||
classifyList: [],
|
||||
bannerIndex: 0,
|
||||
goodsList: [],
|
||||
isLoadingGoods: false,
|
||||
goodsTotal: 0,
|
||||
goodPage: 1,
|
||||
goodSize: 10,
|
||||
couponList: [],
|
||||
showModal: false,
|
||||
addGoodInfo: null,
|
||||
showCouponModal: false,
|
||||
unGetCouponList: [], // 待领取的优惠券列表
|
||||
showContactModal: false,
|
||||
cartCount: 0,
|
||||
imgPrefix
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
leftColumnGoods() {
|
||||
return this.goodsList.filter((v, i) => i % 2 === 0);
|
||||
},
|
||||
rightColumnGoods() {
|
||||
return this.goodsList.filter((v, i) => i % 2 === 1);
|
||||
},
|
||||
cartShowCount() {
|
||||
return this.cartCount > 9 ? "9+" : this.cartCount;
|
||||
},
|
||||
},
|
||||
// watch: {
|
||||
// showCouponModal(val) {
|
||||
// if (val) {
|
||||
// this.getCouponList();
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
mounted() {
|
||||
|
||||
// this.getCouponList();
|
||||
},
|
||||
methods: {
|
||||
jumpToWeChat,
|
||||
onShowFun() {
|
||||
this.initData();
|
||||
},
|
||||
initData() {
|
||||
this.getGoodsCategory();
|
||||
// this.getCouponList();
|
||||
this.goodPage = 1;
|
||||
this.getGoodsList();
|
||||
// this.getBannerList();
|
||||
this.getCartListData();
|
||||
},
|
||||
bannerChange(e) {
|
||||
this.bannerIndex = e.detail.current;
|
||||
},
|
||||
onRefresh() {
|
||||
if (this.refreshTriggered) return;
|
||||
this.refreshTriggered = true;
|
||||
// 请求商品列表/轮播图/商品分类/优惠券
|
||||
this.initData();
|
||||
},
|
||||
onLoadMore() {
|
||||
if (!this.isLoadingGoods && this.goodsTotal > this.goodsList.length) {
|
||||
this.goodPage++;
|
||||
this.getGoodsList();
|
||||
}
|
||||
},
|
||||
// 获取商品列表
|
||||
getGoodsList() {
|
||||
if (this.isLoadingGoods) return;
|
||||
this.isLoadingGoods = true;
|
||||
const params = {
|
||||
type: this.activeCategoryIndex
|
||||
}
|
||||
getGoodsListData(params)
|
||||
.then((res) => {
|
||||
const list = res?.data || [];
|
||||
this.goodsList =
|
||||
this.goodPage === 1 ? list : [...this.goodsList, ...list];
|
||||
this.goodsTotal = res?.count || 0;
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoadingGoods = false;
|
||||
this.refreshTriggered = false;
|
||||
});
|
||||
},
|
||||
// 获取商品分类
|
||||
getGoodsCategory() {
|
||||
getGoodsClassify()
|
||||
.then((res) => {
|
||||
this.classifyList = res?.data || [];
|
||||
})
|
||||
.finally(() => {
|
||||
this.refreshTriggered = false;
|
||||
});
|
||||
},
|
||||
// 获取待领取的新人优惠券
|
||||
getCouponList() {
|
||||
getCouponData({
|
||||
p: 1,
|
||||
num: 9999,
|
||||
is_lingqu: 1,
|
||||
is_xinren: 1,
|
||||
type: 1,
|
||||
})
|
||||
.then((res) => {
|
||||
this.couponList = res?.info || [];
|
||||
})
|
||||
.finally(() => {
|
||||
this.refreshTriggered = false;
|
||||
});
|
||||
},
|
||||
// 加入购物车
|
||||
addCartAction({
|
||||
goods_id,
|
||||
price_id,
|
||||
number,
|
||||
shuxing_name
|
||||
}) {
|
||||
addCart({
|
||||
goods_id,
|
||||
price_id,
|
||||
number,
|
||||
shuxing_name,
|
||||
})
|
||||
.then(() => {
|
||||
uni.showToast({
|
||||
title: "已加入购物车！",
|
||||
icon: "none"
|
||||
});
|
||||
this.getCartListData();
|
||||
})
|
||||
.catch((err) => {
|
||||
uni.showToast({
|
||||
title: err || "加入购物车失败！",
|
||||
icon: "none"
|
||||
});
|
||||
});
|
||||
},
|
||||
// 轮播图片列表
|
||||
// getBannerList() {
|
||||
// getImageList(3).then((res) => {
|
||||
// this.bannerList = res?.info || [];
|
||||
// });
|
||||
// },
|
||||
// 购物车列表
|
||||
getCartListData() {
|
||||
getCartList({
|
||||
p: 1,
|
||||
num: 999
|
||||
}).then((res) => {
|
||||
this.cartCount = (res?.data.list || []).reduce(
|
||||
(total, prev) => total + prev.number,
|
||||
0
|
||||
);
|
||||
console.log(this.cartCount,'--=?')
|
||||
});
|
||||
},
|
||||
optAction(data) {
|
||||
const {
|
||||
goods_id,
|
||||
price_id,
|
||||
number,
|
||||
shuxing_name,
|
||||
kucun
|
||||
} = data;
|
||||
if (kucun <= 0) {
|
||||
uni.showToast({
|
||||
title: "该商品已售罄",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.addCartAction({
|
||||
goods_id,
|
||||
price_id,
|
||||
number,
|
||||
shuxing_name
|
||||
});
|
||||
this.showModal = false;
|
||||
},
|
||||
addToCar(good) {
|
||||
const {
|
||||
goods_id,
|
||||
price_list,
|
||||
shuxing_list
|
||||
} = good;
|
||||
if (price_list?.length === 1 && shuxing_list.length === 1) {
|
||||
if (price_list?.[0]?.kucun <= 0) {
|
||||
uni.showToast({
|
||||
title: "该商品已售罄",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.addCartAction({
|
||||
goods_id,
|
||||
price_id: price_list?.[0]?.price_id,
|
||||
number: 1,
|
||||
shuxing_name: shuxing_list?.[0]?.name,
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.showModal = true;
|
||||
this.addGoodInfo = {
|
||||
...good
|
||||
};
|
||||
},
|
||||
jumpToCategory(category) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/client/category/index?id=${category.id}`,
|
||||
});
|
||||
},
|
||||
jumpToCart() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/client/cart/index`,
|
||||
});
|
||||
},
|
||||
jumpTo(url) {
|
||||
console.log(1111, url)
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
onCouponModalClose() {
|
||||
this.showCouponModal = false;
|
||||
this.getCouponList();
|
||||
},
|
||||
getCoupon() {
|
||||
this.showCouponModal = false;
|
||||
uni.navigateTo({
|
||||
url: "/pages/client/coupon/get-list",
|
||||
});
|
||||
},
|
||||
jumpToSearch() {
|
||||
// 跳转到搜索页面
|
||||
uni.navigateTo({
|
||||
url: '/pages/client/category/index'
|
||||
});
|
||||
},
|
||||
switchCategory(_id) {
|
||||
this.activeCategoryIndex = _id;
|
||||
// 可以根据分类切换商品列表
|
||||
this.goodPage = 1;
|
||||
this.getGoodsList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shop-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: stretch;
|
||||
background: #f7f8fa;
|
||||
|
||||
.shop-header {
|
||||
background: #ff19a0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
border-radius: 0px 0px 16px 16px;
|
||||
|
||||
.status-bar {
|
||||
background: #ff19a0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 20rpx 32rpx;
|
||||
background: #ff19a0;
|
||||
padding-top: 0;
|
||||
border-radius: 0px 0px 16px 16px;
|
||||
|
||||
.search-bar {
|
||||
background: #fff;
|
||||
border-radius: 100rpx;
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
|
||||
.search-icon {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.search-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.action-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
border: 1rpx solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-tabs-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.category-tab {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.fixed-left {
|
||||
padding: 0 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.fixed-right {
|
||||
margin-left: 16rpx;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -16rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1rpx;
|
||||
height: 24rpx;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 20rpx;
|
||||
height: 17rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.category-tabs-scroll {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
.category-tab {
|
||||
display: inline-block;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-content {
|
||||
background: #ffecf3;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.info-avator{
|
||||
width: 100%;
|
||||
height: 260rpx;
|
||||
}
|
||||
|
||||
.banner-swiper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 260rpx;
|
||||
|
||||
.swiper-wrapper {
|
||||
width: 100%;
|
||||
height: 260rpx;
|
||||
|
||||
.swiper-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.dot-box {
|
||||
position: absolute;
|
||||
bottom: 12rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
.dot-item {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
margin-right: 8rpx;
|
||||
|
||||
&.active {
|
||||
width: 20rpx;
|
||||
height: 8rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-classify {
|
||||
margin: 52rpx 0 44rpx;
|
||||
|
||||
.classify-item {
|
||||
width: 25%;
|
||||
|
||||
.classify-img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-bottom: 22rpx;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-view {
|
||||
width: 100%;
|
||||
height: 56rpx;
|
||||
background: #fee9f3;
|
||||
border-radius: 16rpx;
|
||||
padding-right: 30rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.coupon-icon {
|
||||
height: 100%;
|
||||
width: 186rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.coupon-arrow {
|
||||
width: 10rpx;
|
||||
height: 14rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.recommand-goods-wrapper {
|
||||
.recommand-title {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.goods-list-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
&.left {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-wrapper {
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-car-view {
|
||||
position: fixed;
|
||||
bottom: 35vh;
|
||||
right: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.add-car-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-icon-view {
|
||||
position: fixed;
|
||||
bottom: calc(35vh - 130rpx - 48rpx);
|
||||
right: 20rpx;
|
||||
text-align: center;
|
||||
|
||||
.contact-icon {
|
||||
width: 66rpx;
|
||||
height: 66rpx;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.contact-btn {
|
||||
color: #FFFFFF;
|
||||
background-color: #FF19A0;
|
||||
border-radius: 257px;
|
||||
padding: 6rpx 8rpx;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.cart-count {
|
||||
position: fixed;
|
||||
bottom: calc(35vh + 88rpx - 20rpx);
|
||||
right: 20rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 30rpx;
|
||||
background: #FF19A0;
|
||||
z-index: 10;
|
||||
border: 1px solid #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user