完成pc端试衣换衣功能
This commit is contained in:
parent
b5296f1512
commit
e1968dbbbc
626
pages/pc_web/workshops/components/dress_select.vue
Normal file
626
pages/pc_web/workshops/components/dress_select.vue
Normal file
@ -0,0 +1,626 @@
|
||||
<template>
|
||||
<view class="dress-select">
|
||||
<!-- 模特 -->
|
||||
<view class="mw-editor">
|
||||
<view class="mw-tips">
|
||||
<u-icon :name="fileUrl+mannequin" size="30" color="#c2ea04" label="选择模特"
|
||||
labelColor="#84878c" margin-left="20rpx" labelSize="32rpx"></u-icon>
|
||||
</view>
|
||||
<!-- 预设模特 -->
|
||||
<view class="ds-mannequin">
|
||||
<view class="mannequin-list">
|
||||
<view class="mannequin-item" v-for="(item,index) in list[2]" :key="item.id"
|
||||
@click="selectMannequin(index)" :class="mannequinJudge(index)?'mannequin-item-select':''">
|
||||
<image :lazy-load="true" :src="getImagePath(item.path)"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 上装 -->
|
||||
<view class="mw-editor">
|
||||
<view class="mw-tips">
|
||||
<u-icon :name="fileUrl+cloth" size="32" color="#c2ea04" label="选择上衣"
|
||||
labelColor="#84878c" margin-left="20rpx" labelSize="32rpx"></u-icon>
|
||||
<view class="mwt-btn" @click="handleClickSelect(0,$event)">
|
||||
<view :data-select="1" :class="selectOptions[0]?'mwt-select':''">预设上衣</view>
|
||||
<view :class="selectOptions[0]?'':'mwt-select'">自定义</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 预设上装 -->
|
||||
<view v-show="selectOptions[0]">
|
||||
<view class="section-options">
|
||||
<view class="section-cloth" v-for="(item,index) in getCoatOptions" :key="item.id"
|
||||
@click="selectElement(0,index)" :class="form.coatIndex===index?'u-tag-select':''">
|
||||
<image :src="getImagePath(item.path)"></image>
|
||||
</view>
|
||||
<view class="section-cloth" v-if="list[0]&&list[0].length>9"
|
||||
@click="showMoreOptions = true;currentMore = 0;" :class="form.coatIndex>=getCoatOptions.length?'u-tag-select':''">
|
||||
<image src="/static/image-more.png"></image>
|
||||
<text>更多</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 自定义上装 -->
|
||||
<view class="ds-mannequin ds-auto" @click="uploadFile('coat')" v-show="!selectOptions[0]"
|
||||
:style="{cursor: form.coatTemporaryUrl === '' ? 'pointer' : 'default'}">
|
||||
<u-icon v-if="form.coatTemporaryUrl === ''" :name="fileUrl+upload" size="30" color="#c2ea04" label="添加上衣"
|
||||
labelColor="#befda1" margin-left="20rpx" labelSize="32rpx" top="10"></u-icon>
|
||||
<view v-else class="dsa-upload" :class="form.coatIndex===-1?'dsa-upload-select':''">
|
||||
<u-icon @click.native.stop="removeImage('coatTemporaryUrl')" class="close" name="backspace" size="35" color="#de3730"></u-icon>
|
||||
<image @click.native.stop="handleSelectImage('coat')" :src="form.coatTemporaryUrl" mode="heightFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 下装 -->
|
||||
<view class="mw-editor">
|
||||
<view class="mw-tips">
|
||||
<u-icon :name="fileUrl+cloth" size="32" color="#c2ea04" label="选择下衣"
|
||||
labelColor="#84878c" margin-left="20rpx" labelSize="32rpx"></u-icon>
|
||||
<view class="mwt-btn" @click="handleClickSelect(1,$event)">
|
||||
<view :data-select="1" :class="selectOptions[1]?'mwt-select':''">预设下衣</view>
|
||||
<view :class="selectOptions[1]?'':'mwt-select'">自定义</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 预设下装 -->
|
||||
<view v-show="selectOptions[1]">
|
||||
<view class="section-options">
|
||||
<view class="section-cloth" v-for="(item,index) in getBottomsOptions" :key="item.id"
|
||||
@click="selectElement(1,index)" :class="form.bottomsIndex===index?'u-tag-select':''">
|
||||
<image :src="getImagePath(item.path)"></image>
|
||||
</view>
|
||||
<view class="section-cloth" v-if="list[1]&&list[1].length>9"
|
||||
@click="showMoreOptions = true;currentMore = 1;" :class="form.bottomsIndex>=getBottomsOptions.length?'u-tag-select':''">
|
||||
<image src="/static/image-more.png"></image>
|
||||
<text>更多</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 自定义下装 -->
|
||||
<view class="ds-mannequin ds-auto" @click="uploadFile('bottoms')" v-show="!selectOptions[1]"
|
||||
:style="{cursor: form.bottomsTemporaryUrl === '' ? 'pointer' : 'default'}">
|
||||
<u-icon v-if="form.bottomsTemporaryUrl === ''" :name="fileUrl+upload" size="30" color="#c2ea04" label="添加下衣"
|
||||
labelColor="#befda1" margin-left="20rpx" labelSize="32rpx" top="10"></u-icon>
|
||||
<view v-else class="dsa-upload" :class="form.bottomsIndex===-1?'dsa-upload-select':''">
|
||||
<u-icon @click.native.stop="removeImage('bottomsTemporaryUrl')" class="close" name="backspace" size="35" color="#de3730"></u-icon>
|
||||
<image @click.native.stop="handleSelectImage('bottoms')" :src="form.bottomsTemporaryUrl" mode="heightFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 更多类型 -->
|
||||
<u-popup class="options-popup" v-model="showMoreOptions" mode="bottom" border-radius="30"
|
||||
closeable close-icon="arrow-down" close-icon-color="#a7b6b8" :maskCustomStyle="{position: 'absolute'}">
|
||||
<view class="op-content">
|
||||
<view class="op-top">
|
||||
<u-icon name="tags" size="42" label="更多服装" color="#a7b6b8"
|
||||
label-size="35" label-color="#a7b6b8" margin-left="20"></u-icon>
|
||||
</view>
|
||||
<scroll-view :scrollY="true" class="options-list">
|
||||
<view class="section-options">
|
||||
<view class="section-cloth" v-for="(item,index) in list[currentMore]"
|
||||
:key="item.id" @click="selectElement(currentMore,index)"
|
||||
:class="(currentMore === 0 ? form.coatIndex : form.bottomsIndex)===index?'u-tag-select':''">
|
||||
<image :lazy-load="true" :src="getImagePath(item.path)"></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configService from '@/common/config.service.js';
|
||||
import { ossUpload } from '@/common/ossutil/ossWebUpload.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 基础路径
|
||||
staticIp: configService.ip,
|
||||
fileUrl: configService.fileUrl+'pixel/workshops/',
|
||||
// 模特图标
|
||||
mannequin: 'mannequin.png',
|
||||
// 服装图标
|
||||
cloth: 'cloth.png',
|
||||
// 上传图标
|
||||
upload: 'upload.png',
|
||||
form: {
|
||||
coatIndex: '',// 上衣下标 -1自定义
|
||||
coatUrl: '',// 预设/自定义 上装
|
||||
coatTemporaryUrl: '',// 自定义上传上装
|
||||
bottomsIndex: '',// 上装下标 -1自定义
|
||||
bottomsUrl: '',// 预设/自定义 下装
|
||||
bottomsTemporaryUrl: '',// 自定义上传下装
|
||||
mannequinIndex: '',// 模特下标
|
||||
},
|
||||
// 预设模特/上装/下装列表
|
||||
list: [],
|
||||
/**
|
||||
* 预设/自定义-选项列表
|
||||
* true预设 false自定义
|
||||
* 上装
|
||||
* 下装
|
||||
*/
|
||||
selectOptions: [true,true],
|
||||
// 弹窗显示更多选项
|
||||
showMoreOptions: false,
|
||||
// 当前更多弹窗显示类型 0-上装 1-下装
|
||||
currentMore: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 获取上装options
|
||||
getCoatOptions(){
|
||||
let options = this.list[0];
|
||||
const length = options.length;
|
||||
return length > 8 ? options.slice(0,7) : options;
|
||||
},
|
||||
// 获取下装options
|
||||
getBottomsOptions(){
|
||||
let options = this.list[1];
|
||||
const length = options.length;
|
||||
return length > 8 ? options.slice(0,7) : options;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 获取上装
|
||||
this.getCpPhotoById(0);
|
||||
// 获取下装
|
||||
this.getCpPhotoById(1);
|
||||
// 获取模特
|
||||
this.getCpPhotoById(2);
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
async getCpPhotoById(index){
|
||||
// 获取服装-labelId不是index，1-上衣、2-下装、3-模特
|
||||
let res = await this.$api.getCpPhotoById({labelId: (index+1)});
|
||||
if(res.success){
|
||||
this.list[index] = await res.data;
|
||||
this.$forceUpdate();
|
||||
}else{
|
||||
uni.showToast({
|
||||
icon: 'none', title: index===2?'模特获取失败！':'服装获取失败！'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取图片路径
|
||||
getImagePath(path){
|
||||
let index = path?.indexOf('?');
|
||||
let judge = path?.includes(configService.anotherAliUrl);
|
||||
return path?.includes('://') ? path.substring(0,(judge||!index||index===-1) ? path.length : index) : encodeURI(this.staticIp+path);
|
||||
},
|
||||
// 点击预设/自定义按钮
|
||||
handleClickSelect(index,event){
|
||||
if(index!==null){
|
||||
this.selectOptions[index] = Boolean(event.target.dataset.select);
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
// 自定义上传
|
||||
uploadFile(type = ''){
|
||||
if((type === 'coat' && this.form.coatTemporaryUrl) || (type === 'bottoms' && this.form.bottomsTemporaryUrl)) return;
|
||||
let that = this;
|
||||
// 上传图片
|
||||
that.selectImage((path)=>{
|
||||
if(path){
|
||||
switch(type){
|
||||
// 上装
|
||||
case 'coat':
|
||||
that.form.coatTemporaryUrl = path;
|
||||
that.form.coatUrl = path;
|
||||
that.form.coatIndex = -1;
|
||||
break;
|
||||
// 下装
|
||||
case 'bottoms':
|
||||
that.form.bottomsTemporaryUrl = path;
|
||||
that.form.bottomsUrl = path;
|
||||
that.form.bottomsIndex = -1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 清除上传
|
||||
removeImage(type = ''){
|
||||
if(type === '') return;
|
||||
this.form[type] = '';
|
||||
if(type === 'coatTemporaryUrl' && this.form.coatIndex === -1){
|
||||
this.form.coatIndex = '';
|
||||
this.form.coatUrl = '';
|
||||
}else if(type === 'bottomsTemporaryUrl' && this.form.bottomsIndex === -1){
|
||||
this.form.bottomsIndex = '';
|
||||
this.form.bottomsUrl = '';
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 上传图片
|
||||
selectImage(successTo = null){
|
||||
let that = this;
|
||||
uni.chooseImage({
|
||||
count: 1, // 默认9
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success: (res) => {
|
||||
if (res.tempFiles[0].type.indexOf('image') === -1) {
|
||||
that.$refs.uToast.show({
|
||||
type: 'warning',
|
||||
title: "图片上传格式错误!"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const size = res.tempFiles[0].size / 1024; // 计算文件大小
|
||||
if(size<5 || (size/1024)>5){
|
||||
that.$refs.uToast.show({
|
||||
type: 'warning',
|
||||
title: "图片大小不符合规范!"
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 上传图片
|
||||
ossUpload(that,res.tempFilePaths[0],(path)=>{
|
||||
if(!path) return;
|
||||
successTo(path);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 模特选择
|
||||
selectMannequin(index){
|
||||
if(this.form.mannequinIndex === index){
|
||||
this.form.mannequinIndex = '';
|
||||
this.$emit('previewMannequin','');
|
||||
} else {
|
||||
this.form.mannequinIndex = index;
|
||||
this.$emit('previewMannequin',this.getImagePath(this.list[2][index].path));
|
||||
}
|
||||
},
|
||||
/*
|
||||
* @description 选择option
|
||||
* @param {type} 0—上装 1-下装
|
||||
* @param {index} 选项下标
|
||||
*/
|
||||
async selectElement(type, index){
|
||||
if(type === 0){
|
||||
const judge = this.form.coatIndex === index;
|
||||
this.form.coatIndex = judge ? '' : index;
|
||||
this.form.coatUrl = judge ? '' : this.list[0][index].path;
|
||||
} else {
|
||||
const judge = this.form.bottomsIndex === index;
|
||||
this.form.bottomsIndex = judge ? '' : index;
|
||||
this.form.bottomsUrl = judge ? '' : this.list[1][index].path;
|
||||
}
|
||||
},
|
||||
// 点击自定义上传图片
|
||||
handleSelectImage(type = ''){
|
||||
if(type === '') return;
|
||||
// 上装
|
||||
if(type === 'coat'){
|
||||
const judge = this.form.coatIndex === -1;
|
||||
this.form.coatIndex = judge ? '' : -1;
|
||||
this.form.coatUrl = judge ? '' : this.form.coatTemporaryUrl;
|
||||
// 下装
|
||||
}else if(type === 'bottoms'){
|
||||
const judge = this.form.bottomsIndex === -1;
|
||||
this.form.bottomsIndex = judge ? '' : -1;
|
||||
this.form.bottomsUrl = judge ? '' : this.form.bottomsTemporaryUrl;
|
||||
}
|
||||
|
||||
},
|
||||
// 判断模特是否选中
|
||||
mannequinJudge(index){
|
||||
return this.form.mannequinIndex === index;
|
||||
},
|
||||
// 重置表单
|
||||
resetForm(){
|
||||
this.form = {
|
||||
coatIndex: '',// 上衣下标 -1自定义
|
||||
coatUrl: '',// 预设/自定义 上装
|
||||
coatTemporaryUrl: '',// 自定义上传上装
|
||||
bottomsIndex: '',// 上装下标 -1自定义
|
||||
bottomsUrl: '',// 预设/自定义 下装
|
||||
bottomsTemporaryUrl: '',// 自定义上传下装
|
||||
mannequinIndex: '',// 模特下标
|
||||
}
|
||||
this.selectOptions = [true,true];
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dress-select{
|
||||
border-radius: 30rpx;
|
||||
.mw-editor{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 34rpx;
|
||||
&:nth-child(1){
|
||||
margin-top: 0;
|
||||
}
|
||||
.mw-tips{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
::v-deep .u-icon__img{
|
||||
filter: drop-shadow(0 0 4rpx #00a66f);
|
||||
}
|
||||
::v-deep .u-icon__label{
|
||||
font-weight: bold;
|
||||
}
|
||||
.mwt-btn{
|
||||
display: flex;
|
||||
view{
|
||||
cursor: pointer;
|
||||
width: 130rpx;
|
||||
height: 48rpx;
|
||||
font-size: 22rpx;
|
||||
border-radius: 56rpx;
|
||||
border: 2rpx solid rgba(167,182,184,0.8);
|
||||
color: #a7b6b8;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
border-color: #b0ddee;
|
||||
color: #99d7ff;
|
||||
filter: drop-shadow(0 0 2rpx #befd83);
|
||||
}
|
||||
}
|
||||
.mwt-select{
|
||||
border-color: #b0ddee;
|
||||
color: #99d7ff;
|
||||
filter: drop-shadow(0 0 2rpx #befd83);
|
||||
}
|
||||
}
|
||||
.mwt-back{
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.ds-mannequin{
|
||||
margin: 25rpx 0 10rpx;
|
||||
// background-color: #2d3240;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
width: 710rpx;
|
||||
height: 220rpx;
|
||||
.mannequin-list{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.mannequin-item{
|
||||
width: 144rpx;
|
||||
height: 100%;
|
||||
margin-right: 26rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: rgba(236,245,255,0.8);
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
image{
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
border: 2rpx solid #a7b6b8;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #a7b6b8;
|
||||
color: #aea4ee;
|
||||
background-color: rgba(236,245,255,1);
|
||||
opacity: 1;
|
||||
image{
|
||||
border: 2rpx solid #b3a0da !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mannequin-item-select{
|
||||
box-shadow: 0 0 20rpx #a7b6b8;
|
||||
color: #aea4ee;
|
||||
background-color: rgba(236,245,255,1);
|
||||
opacity: 1;
|
||||
image{
|
||||
border: 2rpx solid #b3a0da !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.section-options{
|
||||
margin-top: 40rpx;
|
||||
display: grid;
|
||||
grid-gap: 26rpx;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
|
||||
.u-tag-select{
|
||||
box-shadow: 0 0 20rpx #a7b6b8;
|
||||
background-color: rgba(236,245,255,1);
|
||||
opacity: 1 !important;
|
||||
image{
|
||||
border: 2rpx solid #b3a0da !important;
|
||||
}
|
||||
}
|
||||
|
||||
.section-cloth{
|
||||
width: 150rpx;
|
||||
height: 170rpx;
|
||||
border-radius: 8rpx;
|
||||
background-color: rgba(236,245,255,0.8);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
|
||||
image{
|
||||
width: 150rpx;
|
||||
height: 170rpx;
|
||||
border: 2rpx solid #a7b6b8;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
text{
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
margin-bottom: -100rpx;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #a7b6b8;
|
||||
background-color: rgba(236,245,255,1);
|
||||
opacity: 1 !important;
|
||||
image{
|
||||
border: 2rpx solid #b3a0da !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ds-auto{
|
||||
min-height: 300rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(245, 246, 249, 0.6);
|
||||
border-radius: 20rpx;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
border: 2rpx dashed rgba(167, 182, 184, 0.6);
|
||||
&:hover{
|
||||
border-color: #a7b6b8;
|
||||
background-color: rgba(245, 246, 249, 1);
|
||||
.u-icon{
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.u-icon{
|
||||
filter: drop-shadow(0 0 2rpx #008559);
|
||||
}
|
||||
.dsa-upload{
|
||||
height: calc(100% - 4rpx);
|
||||
position: relative;
|
||||
border-radius: 10rpx;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
image{
|
||||
opacity: 0.7;
|
||||
height: 100%;
|
||||
border: 2rpx solid #a7b6b8;
|
||||
border-radius: 10rpx;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.close{
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
top: 10rpx;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
filter: opacity(0.8);
|
||||
}
|
||||
&:active{
|
||||
filter: opacity(0.6);
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #a7b6b8;
|
||||
background-color: rgba(236,245,255,1);
|
||||
image{
|
||||
opacity: 1;
|
||||
border: 2rpx solid #b3a0da !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dsa-upload-select{
|
||||
box-shadow: 0 0 20rpx #a7b6b8;
|
||||
background-color: rgba(236,245,255,1);
|
||||
image{
|
||||
opacity: 1;
|
||||
border: 2rpx solid #b3a0da !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.options-popup{
|
||||
position: absolute;
|
||||
.op-content{
|
||||
background-color: #ffffff;
|
||||
padding: 10rpx 25rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.op-top{
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.options-list{
|
||||
height: 800rpx;
|
||||
color: #a7b6b8;
|
||||
width: 100%;
|
||||
margin-top: 10rpx;
|
||||
.section-options{
|
||||
margin-top:20rpx;
|
||||
display: grid;
|
||||
grid-gap: 26rpx;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
|
||||
.u-tag-select{
|
||||
box-shadow: 0 0 20rpx #a7b6b8;
|
||||
background-color: rgba(236,245,255,1);
|
||||
opacity: 1 !important;
|
||||
image{
|
||||
border: 2rpx solid #b3a0da !important;
|
||||
}
|
||||
}
|
||||
|
||||
.section-cloth{
|
||||
width: 150rpx;
|
||||
height: 170rpx;
|
||||
border-radius: 8rpx;
|
||||
background-color: rgba(236,245,255,0.8);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
|
||||
image{
|
||||
width: 150rpx;
|
||||
height: 170rpx;
|
||||
border: 2rpx solid #a7b6b8;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
text{
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
margin-bottom: -100rpx;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #a7b6b8;
|
||||
background-color: rgba(236,245,255,1);
|
||||
opacity: 1 !important;
|
||||
image{
|
||||
border: 2rpx solid #b3a0da !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .u-close{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -22,46 +22,71 @@
|
||||
</view>
|
||||
<!-- 服务中心 -->
|
||||
<view class="control-center">
|
||||
<!-- 文生图 -->
|
||||
<view class="cc-edit" v-if="serviceItem.type===1">
|
||||
<EditorBox :height="200" :icon="ip+editorIcon" title="提示词"
|
||||
v-model="serviceItem.text" placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
|
||||
rightTip="使用教程" :rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
|
||||
</view>
|
||||
<!-- 生成艺术字 -->
|
||||
<view class="cc-edit" v-if="serviceItem.type===3">
|
||||
<u-section title="艺术字" color="#84878c" :right="false" lineColor="#c2ea04" fontSize="34" />
|
||||
<u-input :customStyle="{color:'#333',fontSize:'50rpx',height:'100rpx'}" v-model="serviceItem.text"
|
||||
placeholder="请输入需要生成的文字" trim inputAlign="center" :clearable="false" :maxlength="6" class="art-input"/>
|
||||
</view>
|
||||
<view class="cc-edit" v-if="serviceItem.type===3">
|
||||
<EditorBox :height="200" :icon="ip+editorIcon" title="提示词"
|
||||
v-model="serviceItem.promt" placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
|
||||
rightTip="使用教程" :rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
|
||||
</view>
|
||||
<view class="cc-edit" v-if="serviceItem.type===1">
|
||||
<u-section title="尺寸选择" color="#84878c" :right="false" lineColor="#c2ea04" fontSize="34" />
|
||||
<view class="dimensional-drawing">
|
||||
<view class="dimensional-item" v-for="(item,index) in (serviceItem.id === 4 ? aliDimensions : volcengineDimensions)" :key="index"
|
||||
:class="selectSizeIndex===index?'dimensional-item-select':''" @click="selectSize(index)">
|
||||
<view :style="{ aspectRatio: item.value }"></view>
|
||||
<text>{{ item.name }}</text>
|
||||
<view class="control-center-scroll">
|
||||
<!-- 文生图 -->
|
||||
<view class="cc-edit" v-if="serviceItem.type===1">
|
||||
<EditorBox :height="200" :icon="ip+editorIcon" title="提示词"
|
||||
v-model="serviceItem.text" placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
|
||||
rightTip="使用教程" :rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
|
||||
</view>
|
||||
<!-- 生成艺术字 -->
|
||||
<view class="cc-edit" v-if="serviceItem.type===3">
|
||||
<u-section title="艺术字" color="#84878c" :right="false" lineColor="#c2ea04" fontSize="34" />
|
||||
<u-input :customStyle="{color:'#333',fontSize:'50rpx',height:'100rpx'}" v-model="serviceItem.text"
|
||||
placeholder="请输入需要生成的文字" trim inputAlign="center" :clearable="false" :maxlength="6" class="art-input"/>
|
||||
</view>
|
||||
<view class="cc-edit" v-if="serviceItem.type===3">
|
||||
<EditorBox :height="200" :icon="ip+editorIcon" title="提示词"
|
||||
v-model="serviceItem.promt" placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
|
||||
rightTip="使用教程" :rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
|
||||
</view>
|
||||
<view class="cc-edit" v-if="serviceItem.type===1">
|
||||
<u-section title="尺寸选择" color="#84878c" :right="false" lineColor="#c2ea04" fontSize="34" />
|
||||
<view class="dimensional-drawing">
|
||||
<view class="dimensional-item" v-for="(item,index) in (serviceItem.id === 4 ? aliDimensions : volcengineDimensions)" :key="index"
|
||||
:class="selectSizeIndex===index?'dimensional-item-select':''" @click="selectSize(index)">
|
||||
<view :style="{ aspectRatio: item.value }"></view>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选项生图 -->
|
||||
<view class="cc-edit" v-if="serviceItem.type===2||serviceItem.type===3 || serviceItem.type === 1">
|
||||
<u-section title="类型选择" color="#84878c" :right="serviceItem.options.length>8" lineColor="#c2ea04" fontSize="34" @click="showMoreOptions = true"
|
||||
subTitle="更多" :subColor="selectElementIndex>=getOptions.length ? '#b3a0da' : '#84878c'"></u-section>
|
||||
<view class="section-options">
|
||||
<view class="section-tags" v-for="(item,index) in getOptions" :key="item.id" :title="item.optionName"
|
||||
:class="selectElementIndex===index?'section-tags-select':''" @click="selectElement(index)">
|
||||
<image :src="getTypeImage(item.path)"></image>
|
||||
<text>{{ item.optionName }}</text>
|
||||
<!-- 选项生图 -->
|
||||
<view class="cc-edit" v-if="serviceItem.type===2||serviceItem.type===3 || serviceItem.type === 1">
|
||||
<u-section title="类型选择" color="#84878c" :right="serviceItem.options.length>8" lineColor="#c2ea04" fontSize="34" @click="showMoreOptions = true"
|
||||
subTitle="更多" :subColor="selectElementIndex>=getOptions.length ? '#b3a0da' : '#84878c'"></u-section>
|
||||
<view class="section-options">
|
||||
<view class="section-tags" v-for="(item,index) in getOptions" :key="item.id" :title="item.optionName"
|
||||
:class="selectElementIndex===index?'section-tags-select':''" @click="selectElement(index)">
|
||||
<image :src="getTypeImage(item.path)"></image>
|
||||
<text>{{ item.optionName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 换衣选择 -->
|
||||
<view class="cc-edit" v-if="serviceItem.type===4">
|
||||
<DressSelect ref="dressRef" @previewMannequin="previewMannequin" />
|
||||
</view>
|
||||
<view class="use-tips">Tips：<view class="uset-content">{{ serviceItem.tips || '智能创作~' }}</view></view>
|
||||
</view>
|
||||
<view class="use-tips">Tips：<view class="uset-content">{{ serviceItem.tips || '智能创作~' }}</view></view>
|
||||
<!-- 更多类型 -->
|
||||
<u-popup class="options-popup" v-model="showMoreOptions" mode="bottom" border-radius="30"
|
||||
closeable close-icon="arrow-down" close-icon-color="#a7b6b8" :maskCustomStyle="{position: 'absolute'}">
|
||||
<view class="op-content">
|
||||
<view class="op-top">
|
||||
<u-icon name="tags" size="42" label="更多类型" color="#a7b6b8"
|
||||
label-size="35" label-color="#a7b6b8" margin-left="20"></u-icon>
|
||||
</view>
|
||||
<scroll-view :scrollY="true" class="options-list">
|
||||
<view class="section-options">
|
||||
<view class="section-tags" v-for="(item,index) in serviceItem.options" :key="item.id" :title="item.optionName"
|
||||
:class="selectElementIndex===index?'section-tags-select':''" @click="selectElement(index)">
|
||||
<image :src="getTypeImage(item.path)"></image>
|
||||
<text>{{ item.optionName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
<!-- 服务底栏 -->
|
||||
<view class="control-bottom">
|
||||
@ -134,9 +159,10 @@
|
||||
import configService from '@/common/config.service.js';
|
||||
import { ossUpload } from '@/common/ossutil/ossWebUpload.js';
|
||||
import EditorBox from './components/editor.vue';
|
||||
import DressSelect from './components/dress_select.vue';
|
||||
import { tools } from '@/utils/utils.js';
|
||||
export default {
|
||||
components: { EditorBox },
|
||||
components: { EditorBox, DressSelect },
|
||||
props:{
|
||||
sid: {
|
||||
type: [Number,String],
|
||||
@ -252,6 +278,7 @@ export default {
|
||||
if(!this.serviceId){
|
||||
this.serviceId = this.serviceList[0]?.id;
|
||||
this.serviceItem = this.serviceList[0];
|
||||
this.serviceItem.type = Number(this.serviceItem.type);
|
||||
}
|
||||
}else{
|
||||
this.$refs.uToast.show({type: 'error', title: '服务列表获取失败'});
|
||||
@ -275,8 +302,8 @@ export default {
|
||||
async singleService(){
|
||||
let res = await this.$api.singleServices(this.serviceId);
|
||||
if(res.success){
|
||||
res.data.type = Number(res.data.type);
|
||||
this.serviceItem = res.data;
|
||||
this.serviceItem.type = Number(this.serviceItem.type);
|
||||
}else{
|
||||
this.$refs.uToast.show({type:'error',title: "ai功能暂未开放!"});
|
||||
}
|
||||
@ -302,6 +329,7 @@ export default {
|
||||
this.realRedraw();
|
||||
this.realChangeWork(item, index);
|
||||
} else {
|
||||
this.realRedraw();
|
||||
this.realChangeWork(item, index);
|
||||
}
|
||||
},
|
||||
@ -393,13 +421,13 @@ export default {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// if(currentType === 4){
|
||||
// const { bottomImageUrl, topImageUrl } = this.$refs.dressRef.form;
|
||||
// if(topImageUrl===''){
|
||||
// this.$refs.uToast.show({type:'error',title: "请选择更换上衣!"});
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
if(currentType === 4){
|
||||
const { bottomsUrl, coatUrl } = this.$refs.dressRef.form;
|
||||
if(coatUrl===''){
|
||||
this.$refs.uToast.show({type:'error',title: "请选择更换上衣!"});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
@ -410,9 +438,8 @@ export default {
|
||||
// 判断图片是否符合规范
|
||||
if(!this.legalJudge()) return;
|
||||
that.dotLoading = true;
|
||||
// let mannequinIndex = that.form.type === 4 ? that.$refs.dressRef.form.mannequinIndex : '';
|
||||
// if(that.uploadFile && (mannequinIndex === '' || mannequinIndex === -1)){
|
||||
if(that.formData.fileList.length > 0){
|
||||
let mannequinIndex = that.serviceItem.type === 4 ? that.$refs.dressRef.form.mannequinIndex : '';
|
||||
if(mannequinIndex === '' && that.formData.fileList.length > 0){
|
||||
// 上传图片
|
||||
ossUpload(that,that.formData.uploadFile,(path)=>{
|
||||
if(!path) return;
|
||||
@ -501,22 +528,26 @@ export default {
|
||||
promt: promt
|
||||
}
|
||||
break;
|
||||
// case 4 :
|
||||
// const { bottomImageUrl, topImageUrl } = this.$refs.dressRef.form;
|
||||
// result = {
|
||||
// serviceId: id,
|
||||
// bottomImageUrl: bottomImageUrl,
|
||||
// topImageUrl: topImageUrl,
|
||||
// imageUrl: that.getImagePath(that.uploadFile),
|
||||
// };
|
||||
// if(bottomImageUrl === '') delete result.bottomImageUrl;
|
||||
// else result.bottomImageUrl = that.getImagePath(bottomImageUrl);
|
||||
// if(topImageUrl === '') delete result.topImageUrl;
|
||||
// else result.topImageUrl = that.getImagePath(topImageUrl);
|
||||
// break;
|
||||
case 4 :
|
||||
const { bottomsUrl, coatUrl } = this.$refs.dressRef.form;
|
||||
result = {
|
||||
serviceId: id,
|
||||
bottomImageUrl: bottomsUrl,
|
||||
topImageUrl: coatUrl,
|
||||
imageUrl: that.formData.uploadFile,
|
||||
};
|
||||
if(bottomsUrl === '') delete result.bottomImageUrl;
|
||||
else result.bottomImageUrl = that.getImagePath(bottomsUrl);
|
||||
if(coatUrl === '') delete result.topImageUrl;
|
||||
else result.topImageUrl = that.getImagePath(coatUrl);
|
||||
break;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
// 获取图片格式化路径
|
||||
getImagePath(path){
|
||||
return path?.includes('://') ? path : encodeURI(this.ip+path);
|
||||
},
|
||||
// 设置进度条——最多15秒
|
||||
startDealPercent(){
|
||||
let that = this;
|
||||
@ -579,6 +610,9 @@ export default {
|
||||
this.$refs.uploadCover.clearFiles();
|
||||
this.formData.fileList = [];
|
||||
this.formData.uploadFile = '';
|
||||
// 试衣换衣服务删除图片，需要取消模特选择，进行联调
|
||||
if(this.serviceItem.type === 4)
|
||||
this.$refs.dressRef.form.mannequinIndex = '';
|
||||
setTimeout(()=>{
|
||||
this.uploadDisabled = false;
|
||||
},400);
|
||||
@ -611,9 +645,10 @@ export default {
|
||||
this.formData.uploadFile = '';
|
||||
delete this.serviceItem.text;
|
||||
delete this.serviceItem.promt;
|
||||
this.showMoreOptions = false;
|
||||
this.selectElementIndex = '';
|
||||
this.selectSizeIndex = '';
|
||||
// if(this.form.type === 4) this.$refs.dressRef.resetForm();
|
||||
if(this.serviceItem.type === 4) this.$refs.dressRef.resetForm();
|
||||
this.errorTips = '';
|
||||
this.asyncPollTime = -1;
|
||||
setTimeout(()=>{this.dealPercent = 100;});
|
||||
@ -624,6 +659,18 @@ export default {
|
||||
this.setResultFile();
|
||||
}
|
||||
},
|
||||
// ai试衣模特预选
|
||||
previewMannequin(model){
|
||||
this.formData.uploadFile = model;
|
||||
if(model === ''){
|
||||
this.formData.fileList = [];
|
||||
this.uploadDisabled = false;
|
||||
}else{
|
||||
if(this.formData.fileList[0]) this.formData.fileList[0].url = model;
|
||||
else this.formData.fileList = [{url: model}];
|
||||
this.uploadDisabled = true;
|
||||
}
|
||||
},
|
||||
// 元素选择
|
||||
selectElement(index){
|
||||
this.selectElementIndex = this.selectElementIndex === index ? '' : index;
|
||||
@ -718,61 +765,77 @@ export default {
|
||||
}
|
||||
.control-center{
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
overflow-y: hidden;
|
||||
background-color: rgba(248,248,248,0.7);
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.cc-edit{
|
||||
margin-bottom: 40rpx;
|
||||
.art-input{
|
||||
margin: 20rpx 0 10rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 0 10rpx #d0d6dd;
|
||||
border: 2rpx solid #858585;
|
||||
}
|
||||
.dimensional-drawing{
|
||||
width: 710rpx;
|
||||
height: 180rpx;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
padding: 0 10rpx 0 0;
|
||||
overflow-x: scroll;
|
||||
.dimensional-item{
|
||||
min-width: 160rpx;
|
||||
height: 100%;
|
||||
padding: 0 0 18rpx;
|
||||
background-color: #eff0f4;
|
||||
.control-center-scroll{
|
||||
overflow-y: scroll;
|
||||
padding: 40rpx;
|
||||
.cc-edit{
|
||||
margin-bottom: 40rpx;
|
||||
.art-input{
|
||||
margin: 20rpx 0 10rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: #b3a0da;
|
||||
margin-right: 30rpx;
|
||||
cursor: pointer;
|
||||
|
||||
&:nth-last-child(1){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
text{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
view{
|
||||
opacity: 0.7;
|
||||
border-radius: 10rpx;
|
||||
width: 54rpx;
|
||||
border: 6rpx solid #aea4ee;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
box-shadow: 0 0 10rpx #d0d6dd;
|
||||
border: 2rpx solid #bcc1c8;
|
||||
&:hover{
|
||||
box-shadow: 0 0 10rpx #b4b9bf;
|
||||
}
|
||||
}
|
||||
.dimensional-drawing{
|
||||
width: 710rpx;
|
||||
height: 180rpx;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
padding: 0 10rpx 0 0;
|
||||
overflow-x: scroll;
|
||||
.dimensional-item{
|
||||
min-width: 160rpx;
|
||||
height: 100%;
|
||||
padding: 0 0 18rpx;
|
||||
background-color: #eff0f4;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: #b3a0da;
|
||||
margin-right: 30rpx;
|
||||
cursor: pointer;
|
||||
|
||||
&:nth-last-child(1){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
text{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
view{
|
||||
opacity: 0.7;
|
||||
border-radius: 10rpx;
|
||||
width: 54rpx;
|
||||
border: 6rpx solid #aea4ee;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
border: 2rpx solid #b3a0da;
|
||||
view{
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 8rpx #aea4ee;
|
||||
}
|
||||
text{
|
||||
text-shadow: 0 0 2rpx #aea4ee;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dimensional-item-select{
|
||||
border: 2rpx solid #b3a0da;
|
||||
view{
|
||||
opacity: 1;
|
||||
@ -783,68 +846,153 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.dimensional-item-select{
|
||||
border: 2rpx solid #b3a0da;
|
||||
view{
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 8rpx #aea4ee;
|
||||
}
|
||||
text{
|
||||
text-shadow: 0 0 2rpx #aea4ee;
|
||||
}
|
||||
}
|
||||
}
|
||||
.section-options{
|
||||
// margin-top: 40rpx;
|
||||
display: grid;
|
||||
grid-gap: 26rpx;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.section-tags{
|
||||
height: 200rpx;
|
||||
width: 150rpx;
|
||||
background-color: #ebecef;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
color: #b3a0da;
|
||||
cursor: pointer;
|
||||
.section-options{
|
||||
// margin-top: 40rpx;
|
||||
display: grid;
|
||||
grid-gap: 26rpx;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
text{
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
image{
|
||||
opacity: 0.7;
|
||||
.section-tags{
|
||||
height: 200rpx;
|
||||
width: 150rpx;
|
||||
background-color: #ebecef;
|
||||
border-radius: 20rpx;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
color: #b3a0da;
|
||||
cursor: pointer;
|
||||
|
||||
text{
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
image{
|
||||
opacity: 0.7;
|
||||
border-radius: 20rpx;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
border: 2rpx solid #b3a0da;
|
||||
image{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
.section-tags-select{
|
||||
border: 2rpx solid #b3a0da;
|
||||
image{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-tags-select{
|
||||
border: 2rpx solid #b3a0da;
|
||||
image{
|
||||
opacity: 1;
|
||||
::v-deep .u-section__right-info{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .u-section__right-info{
|
||||
.use-tips{
|
||||
width: 100%;
|
||||
border-radius: 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #101010;
|
||||
background-color: #eff0f4;
|
||||
padding: 30rpx;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
.uset-content{
|
||||
color: #6b6b6b;
|
||||
font-weight: normal;
|
||||
margin-top: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
&:hover{
|
||||
box-shadow: 0 0 10rpx #b3b4b6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.options-popup{
|
||||
position: absolute;
|
||||
.op-content{
|
||||
background-color: #ffffff;
|
||||
padding: 10rpx 25rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.op-top{
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.options-list{
|
||||
height: 800rpx;
|
||||
color: #a7b6b8;
|
||||
width: 100%;
|
||||
margin-top: 10rpx;
|
||||
.section-options{
|
||||
display: grid;
|
||||
grid-gap: 26rpx;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
|
||||
.section-tags{
|
||||
height: 200rpx;
|
||||
width: 150rpx;
|
||||
background-color: #ebecef;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
color: #b3a0da;
|
||||
cursor: pointer;
|
||||
|
||||
text{
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
image{
|
||||
opacity: 0.7;
|
||||
border-radius: 20rpx;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
border: 2rpx solid #b3a0da;
|
||||
image{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-tags-select{
|
||||
border: 2rpx solid #b3a0da;
|
||||
image{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .u-close{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
@ -854,27 +1002,9 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.use-tips{
|
||||
margin: -10rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #101010;
|
||||
background-color: #eff0f4;
|
||||
padding: 30rpx;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
.uset-content{
|
||||
color: #6b6b6b;
|
||||
font-weight: normal;
|
||||
margin-top: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
&:hover{
|
||||
box-shadow: 0 0 10rpx #b3b4b6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.control-bottom{
|
||||
min-height: 140rpx;
|
||||
height: 140rpx;
|
||||
border-top: 2rpx solid #d5d5d5;
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user