product
This commit is contained in:
X1627315083
500
src/component/HomePage/productImg.vue
Normal file
500
src/component/HomePage/productImg.vue
Normal file
@@ -0,0 +1,500 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="productImg_modal generalModel"
|
||||
v-model:visible="productImg"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="productImgMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productImg_content">
|
||||
<div class="modal_title_text">
|
||||
<div>Finalize</div>
|
||||
<div class="modal_title_text_intro"></div>
|
||||
</div>
|
||||
<div class="productImg_content_bottom">
|
||||
<div class="productImg_left">
|
||||
<div class="productImg_content_item_title">Select Collection</div>
|
||||
<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
|
||||
<div class="content_item_imgBox_itemImg" v-for="item in likeDesignCollectionList" :key="item.id" >
|
||||
<img v-lazy="item.designOutfitUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="productImg_content_item_title">Up Load</div>
|
||||
<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
|
||||
<div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
|
||||
<a-spin
|
||||
:indicator="indicator"
|
||||
tip="Uploading..."
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item_content content_item_imgBox_itemImg"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_file_item upload_component ">
|
||||
<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:capture="null"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
:before-upload="beforeUpload"
|
||||
v-model:file-list="fileList"
|
||||
:multiple="true"
|
||||
:maxCount="8"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productImg_content_item_title">Magic Tools</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="productImg_right">
|
||||
<div class="productImg_content_item_title">Selected Product</div>
|
||||
<div class="productImg_right_item_box generalScroll" v-mousewheel>
|
||||
<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
|
||||
<img v-lazy="item.url" alt="">
|
||||
<div class="productImg_right_item_like">
|
||||
<i class="fi fi-rr-heart" @click.stop="likeFile(item,'like',index)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productImg_content_item_title productImg_right_titleBtn">
|
||||
Selected Product
|
||||
<div class="button_second">Export</div>
|
||||
</div>
|
||||
<div class="productImg_right_item_box generalScroll" v-mousewheel>
|
||||
<div class="productImg_right_item" v-for="item,index in likeList" :key="item">
|
||||
<img v-lazy="item.url" alt="">
|
||||
<div class="productImg_right_item_like">
|
||||
<i class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike',index)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
|
||||
// import { getCookie } from "@/tool/cookie";
|
||||
import { Https } from "@/tool/https";
|
||||
import { getCookie,setCookie } from "@/tool/cookie";
|
||||
// import domTurnImg from '@/tool/domTurnImg'
|
||||
import { getUploadUrl,isMoible } from "@/tool/util";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Upload,message,Modal } from 'ant-design-vue';
|
||||
import { downloadIamge } from "@/tool/util";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import ExportModel from "@/component/HomePage/ExportModel.vue";
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
ExportModel,
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const {t} = useI18n()
|
||||
let productImg: any = ref(false);//弹窗
|
||||
let productImgMask:any = ref(false)//弹窗遮罩
|
||||
let productImgData:any = reactive({
|
||||
isShowMark:false,
|
||||
fileList:[],
|
||||
generateList:[
|
||||
{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:2,
|
||||
}
|
||||
],
|
||||
likeList:[
|
||||
{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},{
|
||||
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
|
||||
id:1,
|
||||
},
|
||||
],
|
||||
})
|
||||
let likeDesignCollectionList: any = computed(() => {
|
||||
return store.state.HomeStoreModule.likeDesignCollectionList;
|
||||
});
|
||||
let init = ()=>{
|
||||
productImg.value = true
|
||||
console.log(likeDesignCollectionList);
|
||||
|
||||
}
|
||||
let cancelDsign = ()=>{
|
||||
Modal.confirm({
|
||||
title: 'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
cleardata()
|
||||
}
|
||||
});
|
||||
}
|
||||
let cleardata = ()=>{
|
||||
productImg.value = false
|
||||
productImgData.isShowMark = false
|
||||
}
|
||||
|
||||
let fileUploadChange = (data: any)=> {
|
||||
let file = data.file;
|
||||
let bor = true
|
||||
if (file.status === "done") {
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
if(res.errCode == 0){
|
||||
file.imgUrl = res.data.url;
|
||||
// file.type_ = {
|
||||
// type1:'upload',
|
||||
// type2:'Moodboard'
|
||||
// };
|
||||
file.id = res.data.id
|
||||
productImgData.fileList.filter((v: any) => v.status === "done");
|
||||
}else{
|
||||
bor = false
|
||||
}
|
||||
// this.showFileList = productImgData.fileList
|
||||
} else if (file.status === "error") {
|
||||
bor = false
|
||||
}
|
||||
}
|
||||
let beforeUpload = (file: any)=>{
|
||||
const isJpgOrPng =
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/png" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/bmp";
|
||||
if (!isJpgOrPng) {
|
||||
message.info(useI18n().t('MoodboardUpload.jsContent3'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.info(useI18n().t('MoodboardUpload.jsContent4'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
}
|
||||
let deleteFile = (index:any)=>{
|
||||
productImgData.fileList.splice(index,1)
|
||||
}
|
||||
let likeFile = (item:any,str:any,index:any) =>{
|
||||
if(str == 'like'){
|
||||
productImgData.likeList.push(item)
|
||||
productImgData.generateList.splice(index,1)
|
||||
|
||||
}else{
|
||||
productImgData.generateList.push(item)
|
||||
productImgData.likeList.splice(index,1)
|
||||
}
|
||||
}
|
||||
let setExport = ()=>{
|
||||
// let exportModel:any = this.$refs.ExportModel
|
||||
// exportModel.init()
|
||||
}
|
||||
let setTask = (data:any)=>{
|
||||
emit('setTask',data)
|
||||
}
|
||||
return {
|
||||
productImg,
|
||||
productImgMask,
|
||||
...toRefs(productImgData),
|
||||
likeDesignCollectionList,
|
||||
init,
|
||||
cancelDsign,
|
||||
fileUploadChange,
|
||||
beforeUpload,
|
||||
deleteFile,
|
||||
likeFile,
|
||||
setExport,
|
||||
setTask,
|
||||
};
|
||||
},
|
||||
directives:{
|
||||
mousewheel:{
|
||||
mounted (el) {
|
||||
el.addEventListener('wheel',(e:WheelEvent)=>{
|
||||
let num = 0
|
||||
if(e.deltaY > 0){
|
||||
num = 25
|
||||
}else{
|
||||
num = -25
|
||||
}
|
||||
el.scrollBy(num, 0);
|
||||
},{ passive: true })
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
// moodTemplateId: "", //模板id
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
upload: {
|
||||
isPin: 0,
|
||||
gender:'',
|
||||
level1Type: "Moodboard",
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.token = getCookie("token") || "";
|
||||
this.uploadUrl = getUploadUrl();
|
||||
},
|
||||
methods: {
|
||||
// init(list:any,index:any,dialogueIndex:any){
|
||||
|
||||
// },
|
||||
// cancelDsign(){
|
||||
// this.productImg = false
|
||||
// // this.productImgList = []
|
||||
// // this.productImgIndex = 0
|
||||
// },
|
||||
// download(){
|
||||
// // downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
|
||||
// },
|
||||
// setScaleImageIndex(index:any){
|
||||
// // this.productImgIndex = index
|
||||
// // console.log(this.productImgIndex);
|
||||
|
||||
// },
|
||||
// LikeFile(item:any,str:string){
|
||||
// let parent:any = this.$parent
|
||||
// parent.likeFile(item,str)
|
||||
// },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.productImg_modal {
|
||||
.productImg_page{
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
&.productImg_page::-webkit-scrollbar{display: none;}
|
||||
}
|
||||
.productImg_content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.modal_title_text{
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
.productImg_content_bottom{
|
||||
height: calc(100% - 4rem - 2.4rem);
|
||||
--border-color: #c4c4c4;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
.upload_item{
|
||||
|
||||
}
|
||||
.upload_file_item{
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
&.upload_file_item:last-child{
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
.productImg_content_item_title{
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.productImg_content_item_intro{
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.productImg_content_item_imgBox{
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
width: auto;
|
||||
margin-bottom: 2rem;
|
||||
align-items: center;
|
||||
.content_item_imgBox_itemImg{
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
height: 12rem;
|
||||
img{
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
&.content_item_imgBox_itemImg:hover{
|
||||
.content_item_imgBox_itemImg_delete{
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.content_item_imgBox_itemImg_delete{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,.2);
|
||||
position: absolute;
|
||||
i{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.content_item_imgBox_itemImg:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.productImg_left,.productImg_right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.productImg_content_item:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.productImg_left{
|
||||
width: 25%;
|
||||
// width: 45%;
|
||||
.productImg_content_item_imgBox{
|
||||
.content_item_imgBox_itemImg{
|
||||
width: 5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.productImg_right{
|
||||
width: 75%;
|
||||
padding-left: 2rem;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
.productImg_right_item_box{
|
||||
height: 40%;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
background: #f6f6fa;
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 2%;
|
||||
padding: 0 1.5rem;
|
||||
.productImg_right_item{
|
||||
height: 100%;
|
||||
padding: 1rem 0;
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
img{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.productImg_right_item_like{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 2rem;
|
||||
cursor: pointer;
|
||||
.fi-sr-heart{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
.productImg_right_item:hover{
|
||||
.productImg_right_item_like{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.productImg_right_item:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.productImg_right_item_box:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.productImg_right_titleBtn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user