liguigong
4ea873c1bd
- 添加 fittingRoom 存储模块，用于管理试衣间状态和数据 - 实现试衣间页面布局和基础功能，包括轮播图、标签页、衣服网格等组件 - 开发选择模特和上传衣服功能 - 优化页面样式和交互
80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<!-- 商品信息：满减送等营销活动的弹窗 -->
|
||
<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>
|