liguigong
4ea873c1bd
- 添加 fittingRoom 存储模块，用于管理试衣间状态和数据 - 实现试衣间页面布局和基础功能，包括轮播图、标签页、衣服网格等组件 - 开发选择模特和上传衣服功能 - 优化页面样式和交互
96 lines
2.2 KiB
Vue
96 lines
2.2 KiB
Vue
<!--
|
|
* @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>
|