xsl/meida_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fittingRoom): 新增试衣间功能

Browse Source 
- 添加 fittingRoom 存储模块，用于管理试衣间状态和数据
- 实现试衣间页面布局和基础功能，包括轮播图、标签页、衣服网格等组件
- 开发选择模特和上传衣服功能
- 优化页面样式和交互
This commit is contained in:
liguigong
2025-09-19 19:27:22 +08:00
parent cb434a532c
commit 4ea873c1bd
74 changed files with 7963 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/fittingRoom/components/STabs.vue
+95
View File
@@ -0,0 +1,95 @@
<!--
* @Author: liguigong liguigong@shopline.com
* @Date: 2025-09-19 16:26:36
* @LastEditors: liguigong liguigong@shopline.com
* @LastEditTime: 2025-09-19 17:56:16
* @FilePath: pages/fittingRoom/components/STabs.vue
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
-->
<template>
<view class="tabContainer">
<view class="tab-top">
<view class="parent-tab" @click="() => fittingRoom.changeType()"
>{{ !fittingRoom.type ? '我的衣橱' : '衣服库' }}
</view>
<view class="title">赴宴试衣间</view>
</view>
<view class="tab-bottom">
<view class="mainTitle"
>{{ fittingRoom.type ? '我的衣橱' : '衣服库' }}
<view class="slash">/</view>
</view>
<v-tabs
v-model="fittingRoom.tab"
:lineScale="0.2"
:tabs="fittingRoom.tabs"
activeColor="#fff"
bgColor="#000000"
color="#fff"
fontSize="24rpx"
height="50rpx"
lineColor="#fff"
lineHeight="2rpx"
paddingItem="0 18rpx"
@change="changeTab"
></v-tabs>
</view>
</view>
</template>
<script setup>
import sheep from '@/sheep';
const fittingRoom = sheep.$store('fittingRoom');
function changeTab(index) {
console.log('当前选中的项：' + index);
}
</script>
<style lang="scss" scoped>
.tabContainer {
height: 130rpx;
background: #000;
width: 100%;
.tab-top {
margin: 18rpx 0 14rpx;
color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
position: relative;
.parent-tab {
position: absolute;
font-size: 20rpx;
left: 0;
top: 0;
width: 180rpx;
text-align: center;
}
.title {
font-size: 24rpx;
}
}
.tab-bottom {
display: flex;
align-items: center;
.mainTitle {
flex: 0 0 180rpx;
color: #ffffff;
font-size: 26rpx;
text-align: center;
position: relative;
.slash {
position: absolute;
top: 0;
right: 0;
}
}
}
}
</style>
pages/fittingRoom/components/s-grid-clothes.vue
+104
View File
@@ -0,0 +1,104 @@
<!--
* @Author: liguigong liguigong@shopline.com
* @Date: 2025-09-19 16:26:36
* @LastEditors: liguigong liguigong@shopline.com
* @LastEditTime: 2025-09-19 19:17:22
* @FilePath: pages/fittingRoom/components/s-grid-clothes.vue
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
-->
<template>
<view class="tabContainer">
<uni-grid :column="4" :highlight="true" :square="false" borderColor="#000" @change="change">
<uni-grid-item v-for="(item, index) in 7" :key="index" :index="index + 100">
<view class="grid-item-box" style="background-color: #fff">
<view v-if="index == 3" class="inUse">
<view class="edit" @click="goEdit">编辑</view>
</view>
<template v-if="fittingRoom.canUpload && index === 0">
<image
class="clothes"
mode="aspectFill"
src="/static/uploads/1.png"
@click="uploadFile"
></image>
<uni-file-picker
:auto-upload="false"
:del-icon="false"
:disable-preview="true"
:image-styles="imageStyle"
:sizeType="sizeType"
class="upload"
limit="1"
mode="grid"
@select="selectPic"
>选择</uni-file-picker
></template
>
<image v-else class="clothes" mode="aspectFill" src="/static/yifu1.png"></image>
</view>
</uni-grid-item>
</uni-grid>
</view>
</template>
<script setup>
import sheep from '@/sheep';
const fittingRoom = sheep.$store('fittingRoom');
function selectPic(...data) {
console.log(fittingRoom.tab);
console.log('🚀 ~ selectPic 🐶47 ~ data: ', data);
}
function uploadFile() {}
const sizeType = ['original'];
const imageStyle = {
width: 200,
height: 200,
};
function goEdit() {
sheep.$router.go('/pages/report/index', {});
}
function change(e) {
fittingRoom.changeClothes();
console.log('🚀 ~ change 🐶25 ~ index: ', e.detail.index);
}
</script>
<style lang="scss" scoped>
.grid-item-box {
height: 272rpx;
overflow: hidden;
position: relative;
}
.clothes {
width: 100%;
height: 100%;
}
.upload {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
opacity: 0;
}
.inUse {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
z-index: 3;
.edit {
color: #000;
right: 14rpx;
top: 12rpx;
font-size: 24rpx;
position: absolute;
}
}
</style>
pages/fittingRoom/components/s-select-mote.vue
+79
View File
@@ -0,0 +1,79 @@
<!-- 商品信息：满减送等营销活动的弹窗 -->
<template>
<view :class="['mote', { unfold: fittingRoom.visable }]">
<view class="item" @click="expansion">
<view class="item-text">模特</view>
<image class="item-image" mode="widthFix" src="/static/mote.png"></image>
</view>
<view class="item">
<image class="shangchuan" mode="heightFix" src="/static/shangchuan.png"></image>
</view>
<view class="item">
<view class="item-text"></view>
<image class="item-image" mode="widthFix" src="/static/mote.png"></image>
</view>
</view>
</template>
<script setup>
import sheep from '../../../sheep';
const fittingRoom = sheep.$store('fittingRoom');
console.log('🚀 ~ 🐶9 ~ fittingRoom: ', fittingRoom);
function expansion(e) {
fittingRoom.setVisable();
}
</script>
<style lang="scss" scoped>
.mote {
position: absolute;
top: 50rpx;
left: 20rpx;
overflow: hidden;
height: 76rpx;
transition: height 0.3s ease-in-out;
}
.unfold {
height: 700rpx;
}
.item {
width: 86rpx;
height: 76rpx;
margin-bottom: 16rpx;
overflow: hidden;
position: relative;
}
.item-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
//font-family: Molengo;
font-size: 20rpx;
font-style: normal;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
line-height: 76rpx;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.5);
z-index: 3;
}
.shangchuan {
width: 86rpx;
height: 76rpx;
}
.item-image {
width: 100%;
height: 100%;
}
</style>
pages/fittingRoom/index.vue
+37 -32
View File
@@ -1,30 +1,42 @@
<!-- 首页，支持店铺装修 -->
<template>
<view v-if="template">
<uni-swiper-dot :info="state.info" :current="state.current" field="content" :mode="'default'">
<uni-swiper-dot :current="state.current" :info="state.info" :mode="'default'" field="content">
<view class="uni-margin-wrap">
<swiper
class="swiper"
circular
:autoplay="true"
:interval="2000"
:duration="500"
:interval="5000"
circular
class="swiper"
@change="swiperChange"
>
<swiper-item v-for="(item, index) in state.info" :key="index">
<view class="swiper-item uni-bg-red">{{ item.content }}</view>
<view class="swiper-item uni-bg-red">
<image class="swiper-image" mode="heightFix" src="/static/mote.png"></image>
</view>
</swiper-item>
</swiper>
<s-select-mote />
</view>
</uni-swiper-dot>
<uv-sticky :customNavHeight="0" :offset-top="0">
<s-tabs />
</uv-sticky>
<s-grid-clothes />
<view class="height1"></view>
</view>
</template>
<script setup>
import { computed, reactive } from 'vue';
import { computed, reactive, ref } from 'vue';
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
import SSelectMote from './components/s-select-mote.vue';
import STabs from './components/STabs.vue';
import SGridClothes from './components/s-grid-clothes.vue'; // 隐藏原生tabBar
const fittingRoom = sheep.$store('fittingRoom');
sheep.$helper.toast('请选择是否同意协议');
// 隐藏原生tabBar
uni.hideTabBar({
fail: () => {},
@@ -45,32 +57,10 @@
current: 0,
});
const swiperChange = (e) => {
console.log('🚀 ~ swiperChange 🐶40 ~ e: ', e);
state.current = e.detail.current;
};
const template = computed(() => sheep.$store('app').template?.home);
// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
// (async function() {
// console.log('原代码首页定制化数据',template)
// let {
// data
// } = await index2Api.decorate();
// console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
// 改变首页底部数据 但是没有通过数组id获取商品数据接口
// let {
// data: datas
// } = await index2Api.spids();
// template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
// template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
// return {
// src: item.picUrl,
// url: item.url,
// title: item.name,
// type: "image"
// }
// })
// }())
onLoad((options) => {
// #ifdef MP
@@ -109,32 +99,47 @@
onPageScroll(() => {});
</script>
<style>
<style lang="scss" scoped>
.uni-margin-wrap {
width: 100%;
}
.swiper {
height: 680rpx;
}
.swiper-item {
display: block;
height: 680rpx;
line-height: 300rpx;
text-align: center;
background: green;
background: #ffffff;
}
.swiper-image {
width: 100%;
height: 100%;
}
.height1 {
height: 2000px;
}
.swiper-list {
margin-top: 40rpx;
margin-bottom: 0;
}
.uni-common-mt {
margin-top: 60rpx;
position: relative;
}
.info {
position: absolute;
right: 20rpx;
}
.uni-padding-wrap {
width: 550rpx;
padding: 0 100rpx;
pages/report/component/CustomSwiper/CustomSwiper.vue
+284 -286
View File
@@ -21,10 +21,7 @@
<div class="right">
<view class="good-img">
<div class="good-img-box good-img-top"></div>
<div
class="good-img-box good-img-bottom"
@click="toGoodsInfo(item[4])"
>
<div class="good-img-box good-img-bottom" @click="toGoodsInfo(item[4])">
<img :src="item[4].file_name" class="good-img-detail" />
</div>
</view>
@@ -48,316 +45,317 @@
</template>
<script setup>
import { defineProps, ref, watchEffect } from "vue";
import { defineProps, ref, watchEffect } from 'vue';
const autoplay = ref(true);
const autoplay = ref(true);
const props = defineProps({
items: {
type: Array,
default: [],
},
});
const current = ref(0);
const animationfinish = (e) => {
// console.log('e: ', e.detail.current);
current.value = e.detail.current;
};
// weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&query=id=
const toMini = (item) => {
console.log(wx, "微信miniProgram");
wx.miniProgram.navigateTo({
url: `/pages/fitRoom/index?id=${item.id}`,
success: function () {
// alert('成功')
},
fail(error) {
// alert('错误', error)
console.log("navigateTo error: ", error);
const props = defineProps({
items: {
type: Array,
default: [],
},
});
/**小程序内跳转 */
// uni.webView.navigateTo({ url: `/pages/fitRoom/index&id=${item.id}` });
// location.href = `weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&id=${item.id}`
};
const toGoodsInfo = (item) => {
wx.miniProgram.navigateTo({
url: "/pages/goods/goodsDetail/index?goods_id=" + item.goods_id,
});
//先去请求后端接口获取数据
// uni.request({
// url: "https://llshop.zglvling.com/soapi/text/ceshi1",
// method: "POST",
// data: {
// id: 123
// },
// header: {
// "Content-Type": "application/json"
// },
// success: (res) => {
// const config = res.data;
// // #ifdef H5
// // 1. 检查是否在微信浏览器中
// const isWechatBrowser = /MicroMessenger/i.test(navigator.userAgent);
// console.log("是否在微信浏览器", isWechatBrowser);
const current = ref(0);
// if (!isWechatBrowser) {
// uni.showToast({
// title: "请在微信中打开",
// icon: "none"
// });
// }
// wx.config({
// debug: true, // 调试模式
// appId: config.appId,
// timestamp: config.timestamp,
// nonceStr: config.nonceStr,
// signature: config.signature,
// jsApiList: ["miniProgram"], // 需要用到的 API
// });
// wx.ready(() => {
// wx.miniProgram.navigateTo({
// path: "/pages/goods/goodsDetail/index",
// success: () => console.log("跳转成功"),
// fail: (err) => {
// console.error("跳转失败:", err);
// uni.showToast({
// title: "跳转失败",
// icon: "none"
// });
// },
// });
// });
const animationfinish = (e) => {
// console.log('e: ', e.detail.current);
current.value = e.detail.current;
};
// // #endif
// },
// fail: (err) => {
// console.error("请求失败:", err);
// uni.showToast({
// title: "网络错误",
// icon: "none"
// });
// },
// });
// weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&query=id=
const toMini = (item) => {
console.log(wx, '微信miniProgram');
wx.miniProgram.navigateTo({
url: `/pages/fitRoom/index?id=${item.id}`,
success: function () {
// alert('成功')
},
fail(error) {
// alert('错误', error)
console.log('navigateTo error: ', error);
},
});
/**小程序内跳转 */
// uni.webView.navigateTo({ url: `/pages/fitRoom/index&id=${item.id}` });
// location.href = `weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&id=${item.id}`
};
const toGoodsInfo = (item) => {
wx.miniProgram.navigateTo({
url: '/pages/goods/goodsDetail/index?goods_id=' + item.goods_id,
});
//先去请求后端接口获取数据
// uni.request({
// url: "https://llshop.zglvling.com/soapi/text/ceshi1",
// method: "POST",
// data: {
// id: 123
// },
// header: {
// "Content-Type": "application/json"
// },
// success: (res) => {
// const config = res.data;
// 初始化微信 JS-SDK
// function initWechatSDK(config) {
// console.log("阿拉啦啦", wx);
// wx.config({
// debug: true, // 调试模式
// appId: config.appId,
// timestamp: config.timestamp,
// nonceStr: config.nonceStr,
// signature: config.signature,
// jsApiList: ["miniProgram"], // 需要用到的 API
// });
// // #ifdef H5
// // 1. 检查是否在微信浏览器中
// const isWechatBrowser = /MicroMessenger/i.test(navigator.userAgent);
// console.log("是否在微信浏览器", isWechatBrowser);
// wx.ready(() => {
// wx.miniProgram.navigateTo({
// path: "/pages/goods/goodsDetail/index",
// success: () => console.log("跳转成功"),
// fail: (err) => {
// console.error("跳转失败:", err);
// uni.showToast({
// title: "跳转失败",
// icon: "none"
// });
// },
// });
// });
// if (!isWechatBrowser) {
// uni.showToast({
// title: "请在微信中打开",
// icon: "none"
// });
// }
// wx.config({
// debug: true, // 调试模式
// appId: config.appId,
// timestamp: config.timestamp,
// nonceStr: config.nonceStr,
// signature: config.signature,
// jsApiList: ["miniProgram"], // 需要用到的 API
// });
// wx.ready(() => {
// wx.miniProgram.navigateTo({
// path: "/pages/goods/goodsDetail/index",
// success: () => console.log("跳转成功"),
// fail: (err) => {
// console.error("跳转失败:", err);
// uni.showToast({
// title: "跳转失败",
// icon: "none"
// });
// },
// });
// });
// // #endif
// },
// fail: (err) => {
// console.error("请求失败:", err);
// uni.showToast({
// title: "网络错误",
// icon: "none"
// });
// },
// });
// 初始化微信 JS-SDK
// function initWechatSDK(config) {
// console.log("阿拉啦啦", wx);
// wx.config({
// debug: true, // 调试模式
// appId: config.appId,
// timestamp: config.timestamp,
// nonceStr: config.nonceStr,
// signature: config.signature,
// jsApiList: ["miniProgram"], // 需要用到的 API
// });
// wx.ready(() => {
// wx.miniProgram.navigateTo({
// path: "/pages/goods/goodsDetail/index",
// success: () => console.log("跳转成功"),
// fail: (err) => {
// console.error("跳转失败:", err);
// uni.showToast({
// title: "跳转失败",
// icon: "none"
// });
// },
// });
// });
// wx.error((err) => {
// console.error("微信 SDK 配置失败:", err);
// });
// }
// uni.request({
// url: 'https://llshop.zglvling.com/soapi/text/ceshi1', // 接口地址
// method: 'POST', // 请求方式（GET/POST/PUT/DELETE）
// data: { id: 123 }, // 请求参数（GET 用 params，POST 用 data）
// header: {
// 'Content-Type': 'application/json', // 请求头
// },
// success: (res) => {
// console.log('请求成功:', res.data);
// var config = res.data;
// const wx = window.wx;
// // 动态加载微信 JS-SDK
// if (typeof wx === 'undefined') {
// const script = document.createElement('script');
// script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
// script.onload = () => {
// initWechatSDK(config); // 加载完成后初始化
// };
// document.body.appendChild(script);
// } else {
// initWechatSDK(config); // 如果已存在，直接初始化
// }
// wx.config({
// debug: true, // 调试模式
// appId: config.appId,
// timestamp: config.timestamp,
// nonceStr: config.nonceStr,
// signature: config.signature,
// jsApiList: ['miniProgram'], // 需要用到的 API
// });
// // 4. 配置完成后跳转小程序
// wx.ready(() => {
// wx.miniProgram.navigateTo({
// path: '/pages/home/index?id=123', // 小程序路径 + 参数
// success: () => console.log('跳转成功'),
// fail: (err) => {
// console.error('跳转失败:', err);
// uni.showToast({ title: '跳转失败，请在微信中打开', icon: 'none' });
// },
// });
// });
// },
// fail: (err) => {
// console.error('请求失败:', err);
// uni.showToast({ title: '网络错误', icon: 'none' });
// },
// complete: () => {
// console.log('请求完成');
// },
// });
// const appid = 'wx32d8423809b8d7d4';
// const path = `/pages/goods/goodsDetail/index`;
// const scheme = `weixin://dl/business/?appid=${appid}&path=${encodeURIComponent(path)}`;
// console.log('地址: ', scheme);
// // 方法1：动态创建 <a> 标签（兼容 iOS）
// const a = document.createElement('a');
// a.href = scheme;
// a.style.display = 'none';
// document.body.appendChild(a);
// a.click();
// document.body.removeChild(a);
// location.href = scheme;
// // 可添加失败回调（通过监听页面跳转失败）
// setTimeout(() => {
// alert('跳转失败，请手动打开小程序');
// }, 1000);
// location.href = `weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&id=${item.id}`
};
// wx.error((err) => {
// console.error("微信 SDK 配置失败:", err);
// });
// }
// uni.request({
// url: 'https://llshop.zglvling.com/soapi/text/ceshi1', // 接口地址
// method: 'POST', // 请求方式（GET/POST/PUT/DELETE）
// data: { id: 123 }, // 请求参数（GET 用 params，POST 用 data）
// header: {
// 'Content-Type': 'application/json', // 请求头
// },
// success: (res) => {
// console.log('请求成功:', res.data);
// var config = res.data;
// const wx = window.wx;
// // 动态加载微信 JS-SDK
// if (typeof wx === 'undefined') {
// const script = document.createElement('script');
// script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
// script.onload = () => {
// initWechatSDK(config); // 加载完成后初始化
// };
// document.body.appendChild(script);
// } else {
// initWechatSDK(config); // 如果已存在，直接初始化
// }
// wx.config({
// debug: true, // 调试模式
// appId: config.appId,
// timestamp: config.timestamp,
// nonceStr: config.nonceStr,
// signature: config.signature,
// jsApiList: ['miniProgram'], // 需要用到的 API
// });
// // 4. 配置完成后跳转小程序
// wx.ready(() => {
// wx.miniProgram.navigateTo({
// path: '/pages/home/index?id=123', // 小程序路径 + 参数
// success: () => console.log('跳转成功'),
// fail: (err) => {
// console.error('跳转失败:', err);
// uni.showToast({ title: '跳转失败，请在微信中打开', icon: 'none' });
// },
// });
// });
// },
// fail: (err) => {
// console.error('请求失败:', err);
// uni.showToast({ title: '网络错误', icon: 'none' });
// },
// complete: () => {
// console.log('请求完成');
// },
// });
// const appid = 'wx32d8423809b8d7d4';
// const path = `/pages/goods/goodsDetail/index`;
// const scheme = `weixin://dl/business/?appid=${appid}&path=${encodeURIComponent(path)}`;
// console.log('地址: ', scheme);
// // 方法1：动态创建 <a> 标签（兼容 iOS）
// const a = document.createElement('a');
// a.href = scheme;
// a.style.display = 'none';
// document.body.appendChild(a);
// a.click();
// document.body.removeChild(a);
// location.href = scheme;
// // 可添加失败回调（通过监听页面跳转失败）
// setTimeout(() => {
// alert('跳转失败，请手动打开小程序');
// }, 1000);
// location.href = `weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&id=${item.id}`
};
// }
</script>
<style scoped>
.uni-margin-wrap {
width: 100%;
/* height: 330px; */
padding: 16px 8px;
box-sizing: border-box;
}
.uni-margin-wrap {
width: 100%;
/* height: 330px; */
padding: 16px 8px;
box-sizing: border-box;
position: relative;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #031c24;
width: 336px;
margin: 0 auto;
margin-bottom: 16px;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #031c24;
width: 336px;
margin: 0 auto;
margin-bottom: 16px;
}
.flex .arrow-icon {
width: 24px;
}
.flex .arrow-icon {
width: 24px;
}
.swiper {
width: 336px;
height: 330px;
margin: 0 auto;
}
.swiper {
width: 336px;
height: 330px;
margin: 0 auto;
}
.swiper-item {
width: 336px;
height: 330px;
display: flex;
justify-content: space-between;
}
.swiper-item {
width: 336px;
height: 330px;
display: flex;
justify-content: space-between;
}
.swiper-item .left {
width: 223px;
height: 330px;
overflow: hidden;
}
.swiper-item .left {
width: 223px;
height: 330px;
overflow: hidden;
}
.swiper-item .left .left-img {
height: 330px;
/* width: 100%; */
object-fit: scale-down;
}
.swiper-item .left .left-img {
height: 330px;
/* width: 100%; */
object-fit: scale-down;
}
.swiper-item .right {
width: 102px;
height: 330px;
overflow: hidden;
.swiper-item .right {
width: 102px;
height: 330px;
overflow: hidden;
display: flex;
flex-direction: column;
}
display: flex;
flex-direction: column;
}
.swiper-item .right .good-img {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 15px;
}
.swiper-item .right .good-img {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 15px;
}
.swiper-item .right .good-img .good-img-box {
height: 134px;
overflow: hidden;
/* background-color: red; */
}
.swiper-item .right .good-img .good-img-box {
height: 134px;
overflow: hidden;
/* background-color: red; */
}
.swiper-item .right .good-img .good-img-box .good-img-detail {
height: 100%;
object-fit: scale-down;
}
.swiper-item .right .good-img .good-img-box .good-img-detail {
height: 100%;
object-fit: scale-down;
}
.swiper-item .right .btn {
height: 24px;
background-color: #031c24;
color: #ffffff;
font-size: 12px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-item .right .btn {
height: 24px;
background-color: #031c24;
color: #ffffff;
font-size: 12px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
}
.dots {
height: 22px;
margin-top: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.dots {
height: 22px;
margin-top: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.dots .dot {
width: 5px;
height: 2px;
background-color: #edf0f0;
margin-left: 5px;
}
.dots .dot {
width: 5px;
height: 2px;
background-color: #edf0f0;
margin-left: 5px;
}
.dots .dot:first-of-type {
margin-left: 0;
}
.dots .dot:first-of-type {
margin-left: 0;
}
.dots .active {
width: 10px;
background-color: #031c24;
}
.dots .active {
width: 10px;
background-color: #031c24;
}
</style>