aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of http://18.167.251.121:10003/aidlab/lanecarford_front

Browse Source
This commit is contained in:
李志鹏
2025-11-28 11:39:09 +08:00
parent e91f1071b3 578cc153f4
commit 281359eaf9
4 changed files with 576 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@@ -7,7 +7,15 @@
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> --> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<link rel="stylesheet" href="/css/woff/fontFamily.css"> <link rel="stylesheet" href="/css/woff/fontFamily.css">
<title>Activities</title> <title>Lane Crawford</title>
<!-- Open Graph / WhatsApp share metadata -->
<meta property="og:title" content="Lane Crawford" />
<meta property="og:description" content="create and share looks from the Lane Crawford creation gallery." />
<meta property="og:image" content="" />
<meta property="og:url" content="https://www.lc.aida.com.hk" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Lane Crawford" />
<meta name="twitter:card" content="summary_large_image" />
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

209
src/utils/share.ts Normal file
View File

@@ -0,0 +1,209 @@
/**
* 分享工具函数
* 支持移动浏览器原生分享 API 和 WhatsApp 分享
*/
interface ShareData {
title?: string
text?: string
url?: string
files?: File[]
}
/**
* 检查是否支持 Web Share API
*/
export function isWebShareSupported(): boolean {
return typeof navigator !== 'undefined' && 'share' in navigator
}
/**
* 使用 Web Share API 进行分享（移动浏览器原生分享）
* @param data 分享数据
*/
async function shareWithWebAPI(data: ShareData): Promise<void> {
if (!isWebShareSupported()) {
throw new Error('Web Share API is not supported')
}
try {
// Web Share API 只支持 title, text, url 和 files
const shareData: ShareData = {}
if (data.title) shareData.title = data.title
if (data.text) shareData.text = data.text
if (data.url) shareData.url = data.url
if (data.files && data.files.length > 0) shareData.files = data.files
await navigator.share(shareData)
} catch (error: any) {
// 用户取消分享时，会抛出 AbortError，这是正常情况
if (error.name !== 'AbortError') {
console.error('分享失败:', error)
throw error
}
}
}
/**
* 分享到 WhatsApp（回退方案）
* @param text 分享的文本内容
* @param url 分享的链接（可选）
*/
export function shareToWhatsApp(text: string, url?: string): void {
const shareText = url ? `${text} ${url}` : text
const encodedText = encodeURIComponent(shareText)
const whatsappScheme = `whatsapp://send?text=${encodedText}`
const whatsappWebUrl = `https://wa.me/?text=${encodedText}`
const isMobile = typeof navigator !== 'undefined' && /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent)
if (typeof window === 'undefined') return
if (isMobile) {
// 优先尝试调用已安装的 WhatsApp 应用，失败后回退到 Web 版本
let didFallback = false
const fallbackTimer = window.setTimeout(() => {
didFallback = true
window.location.href = whatsappWebUrl
}, 1500)
try {
window.location.href = whatsappScheme
} catch (error) {
window.clearTimeout(fallbackTimer)
window.location.href = whatsappWebUrl
}
// 某些浏览器会在成功唤起 App 时终止脚本，无需额外处理
return
}
// 桌面端或不支持 scheme 的环境直接打开 WhatsApp Web
window.open(whatsappWebUrl, '_blank')
}
/**
* 通用分享函数（优先使用 Web Share API，不支持则回退到 WhatsApp）
* @param options 分享选项
*/
export async function share(options: {
title?: string
text?: string
url?: string
files?: File[]
fallbackToWhatsApp?: boolean
}): Promise<void> {
const { title, text, url, files, fallbackToWhatsApp = true } = options
// 如果支持 Web Share API，优先使用
if (isWebShareSupported() && !files) {
try {
await shareWithWebAPI({ title, text, url })
return
} catch (error) {
// 如果分享失败且允许回退，则使用 WhatsApp
if (fallbackToWhatsApp) {
const shareText = [title, text, url].filter(Boolean).join('\n\n')
shareToWhatsApp(shareText)
return
}
throw error
}
}
// 如果不支持 Web Share API 或需要分享文件，使用 WhatsApp
if (fallbackToWhatsApp) {
const shareText = [title, text, url].filter(Boolean).join('\n\n')
shareToWhatsApp(shareText)
} else {
throw new Error('Web Share API is not supported and fallback is disabled')
}
}
/**
* 分享当前页面（优先使用原生分享，不支持则回退到 WhatsApp）
* @param title 分享的标题
* @param description 分享的描述（可选）
*/
export async function shareCurrentPage(title: string, description?: string): Promise<void> {
const currentUrl = window.location.href
await share({
title,
text: description,
url: currentUrl,
fallbackToWhatsApp: true
})
}
/**
* 分享图片（优先使用原生分享，不支持则回退到 WhatsApp）
* @param imageUrl 图片链接
* @param title 分享的标题
* @param description 分享的描述（可选）
*/
export async function shareImage(imageUrl: string, title: string, description?: string): Promise<void> {
const currentUrl = window.location.href
const text = description
? `${description}\n\n查看图片: ${imageUrl}`
: `查看图片: ${imageUrl}`
await share({
title,
text,
url: currentUrl,
fallbackToWhatsApp: true
})
}
/**
* 分享图片文件（使用 Web Share API，支持直接分享图片文件）
* @param imageFile 图片文件
* @param title 分享的标题（可选）
* @param text 分享的文本（可选）
*/
export async function shareImageFile(imageFile: File, title?: string, text?: string): Promise<void> {
if (!isWebShareSupported()) {
throw new Error('WEB_SHARE_UNSUPPORTED')
}
if (typeof navigator.canShare === 'function' && !navigator.canShare({ files: [imageFile] })) {
throw new Error('WEB_SHARE_FILE_UNSUPPORTED')
}
await shareWithWebAPI({
title,
text,
files: [imageFile]
})
}
/**
* 将远程图片转换为 File 对象，便于提前缓存后再触发分享
* @param imageUrl 图片链接
* @param fileName 文件名（可选）
*/
export async function createImageFileFromUrl(imageUrl: string, fileName?: string): Promise<File> {
const response = await fetch(imageUrl)
const blob = await response.blob()
const name = fileName || imageUrl.split('/').pop() || 'share-image.jpg'
return new File([blob], name, { type: blob.type || 'image/jpeg' })
}
/**
* 分享当前页面到 WhatsApp（兼容旧版本，推荐使用 shareCurrentPage）
* @param title 分享的标题
* @param description 分享的描述（可选）
*/
export async function shareCurrentPageToWhatsApp(title: string, description?: string): Promise<void> {
await shareCurrentPage(title, description)
}
/**
* 分享图片到 WhatsApp（兼容旧版本，推荐使用 shareImage）
* @param imageUrl 图片链接
* @param title 分享的标题
* @param description 分享的描述（可选）
*/
export async function shareImageToWhatsApp(imageUrl: string, title: string, description?: string): Promise<void> {
await shareImage(imageUrl, title, description)
}

673
src/views/Workshop/creation/creation-list.vue
View File

@@ -1,334 +1,367 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue' import { ref, reactive, onMounted, computed } from 'vue'
import MyList from '@/components/MyList.vue' import MyList from '@/components/MyList.vue'
import { DownloadImages } from '@/utils/tools' import { DownloadImages } from '@/utils/tools'
import { import {
getTryOnEffectFavoriteList, getTryOnEffectFavoriteList,
getTryOnEffectStyleList, getTryOnEffectStyleList,
setTryOnEffectFavorite, setTryOnEffectFavorite,
cancelTryOnEffectFavorite cancelTryOnEffectFavorite
} from '@/api/workshop' } from '@/api/workshop'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const emit = defineEmits(['view-type']) const emit = defineEmits(['view-type'])
const query = computed(() => router.currentRoute.value.query) const query = computed(() => router.currentRoute.value.query)
const visitRecordId = computed(() => query.value.visitRecordId)// 访问记录ID const visitRecordId = computed(() => query.value.visitRecordId) // 访问记录ID
import { useGenerateStore } from '@/stores' import { useGenerateStore } from '@/stores'
const generateStore = useGenerateStore() const generateStore = useGenerateStore()
onMounted(() => { onMounted(() => {
emit('view-type', 1) emit('view-type', 1)
}) })
const list = reactive([]) const list = reactive([])
const loading = ref(false) const loading = ref(false)
const finish = ref(false) const finish = ref(false)
const selectCount = computed(() => list.filter((v) => v.selected).length) const selectCount = computed(() => list.filter((v) => v.selected).length)
const maxSelectCount = 10 const maxSelectCount = 10
const isChooseSave = ref(false) //是否选择保存模式 const isChooseSave = ref(false) //是否选择保存模式
const onLoad = () => { const onLoad = () => {
loading.value = true loading.value = true
const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList
const id = visitRecordId.value || generateStore.styleId const id = visitRecordId.value || generateStore.styleId
http(id) http(id)
.then((data) => { .then((data) => {
data?.forEach((v) => { data?.forEach((v) => {
const obj = { const obj = {
tryOnId: v.tryOnId, tryOnId: v.tryOnId,
tryOnUrl: v.tryOnUrl, tryOnUrl: v.tryOnUrl,
styleUrl: v.styleUrl, styleUrl: v.styleUrl,
isFavorite: !!v.isFavorite, isFavorite: !!v.isFavorite,
isRegenerated: !!v.isRegenerated, isRegenerated: !!v.isRegenerated,
selected: list.length < maxSelectCount, selected: list.length < maxSelectCount,
loading: false, loading: false,
downloaded: false downloaded: false
} }
list.push(obj) list.push(obj)
}) })
loading.value = false loading.value = false
finish.value = true finish.value = true
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err)
loading.value = false loading.value = false
finish.value = true finish.value = true
}) })
} }
const onItem = (v) => { const onItem = (v) => {
isChooseSave.value ? onSelectItem(v) : onDetailsItem(v) isChooseSave.value ? onSelectItem(v) : onDetailsItem(v)
} }
// 详情页 // 详情页
const onDetailsItem = (v) => { const onDetailsItem = (v) => {
if (v.isRegenerated) return if (v.isRegenerated) return
router.push({ query: { ...query.value, styleUrl: v.styleUrl } }) router.push({ query: { ...query.value, styleUrl: v.styleUrl } })
} }
// 喜欢 // 喜欢
const isLoveLoading = ref(false) const isLoveLoading = ref(false)
const onLoveItem = (v) => { const onLoveItem = (v) => {
if (isLoveLoading.value) return if (isLoveLoading.value) return
const http = v.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite const http = v.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
isLoveLoading.value = true isLoveLoading.value = true
v.isFavorite = !v.isFavorite v.isFavorite = !v.isFavorite
http(v.tryOnId) http(v.tryOnId)
.then(() => { .then(() => {
isLoveLoading.value = false isLoveLoading.value = false
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err)
isLoveLoading.value = false isLoveLoading.value = false
}) })
} }
const onDownloadItem = (v) => {
// console.log('保存', v) const shareImageToWhatsapp = async (url) => {
if (v.loading) return // 把图片 URL 转为 Blob
v.loading = true const blob = await fetch(url).then((res) => res.blob())
v.selected = false
DownloadImages([{ url: v.tryOnUrl }], null, null, () => { // 创建文件对象
v.loading = false const file = new File([blob], 'image.jpg', { type: 'image/jpeg' })
v.downloaded = true
}) // 判断浏览器是否支持文件分享
} if (navigator.canShare && navigator.canShare({ files: [file] })) {
const onSelectItem = (v) => { await navigator.share({
if (selectCount.value >= maxSelectCount && !v.selected) return files: [file]
v.selected = !v.selected })
} } else {
const onChooseSave = () => { // 你可以附加一些自定义文本
isChooseSave.value = true const message = 'share image ' + url
}
const onBackChooseSave = () => { // 构造WhatsApp链接
isChooseSave.value = false const whatsappLink = `https://api.whatsapp.com/send/?text=${encodeURIComponent(message)}`
} window.open(whatsappLink, '_blank')
// 下载选中项 }
const onConfirm = () => { }
const downloadList = []
if (selectCount.value > 0) { const isShare = ref(false)
list.forEach((v, i) => { const handleOpenShare = () => {
if (v.selected) { isShare.value = !isShare.value
v.selected = false
v.loading = true alert(`现在${isShare.value ? '可以' : '不可以'}分享`)
downloadList.push({ }
index: i,
url: v.tryOnUrl const onDownloadItem = async (v) => {
}) if (isShare.value) {
} await shareImageToWhatsapp(v.tryOnUrl)
}) return
} }
if (selectCount.value < maxSelectCount) { if (v.loading) return
list.forEach((v) => { v.loading = true
if (!v.selected && !v.downloaded && !v.loading && selectCount.value < maxSelectCount) v.selected = false
v.selected = true DownloadImages([{ url: v.tryOnUrl }], null, null, () => {
}) v.loading = false
} v.downloaded = true
if (downloadList.length > 0) { })
DownloadImages( }
downloadList, const onSelectItem = (v) => {
(count, total, item) => { if (selectCount.value >= maxSelectCount && !v.selected) return
list[item.index].loading = false v.selected = !v.selected
list[item.index].downloaded = true }
console.log('下载成功', count, total, item) const onChooseSave = () => {
}, isChooseSave.value = true
(count, total, item) => { }
list[item.index].loading = false const onBackChooseSave = () => {
console.log('下载失败', count, total, item) isChooseSave.value = false
}, }
(successCount, errCount) => { // 下载选中项
console.log('下载完成', successCount, errCount) const onConfirm = () => {
} const downloadList = []
) if (selectCount.value > 0) {
} list.forEach((v, i) => {
} if (v.selected) {
const onContinue = () => { v.selected = false
router.push({ name: 'end' }) v.loading = true
} downloadList.push({
index: i,
url: v.tryOnUrl
})
}
})
}
if (selectCount.value < maxSelectCount) {
list.forEach((v) => {
if (!v.selected && !v.downloaded && !v.loading && selectCount.value < maxSelectCount)
v.selected = true
})
}
if (downloadList.length > 0) {
DownloadImages(
downloadList,
(count, total, item) => {
list[item.index].loading = false
list[item.index].downloaded = true
console.log('下载成功', count, total, item)
},
(count, total, item) => {
list[item.index].loading = false
console.log('下载失败', count, total, item)
},
(successCount, errCount) => {
console.log('下载完成', successCount, errCount)
}
)
}
}
const onContinue = () => {
router.push({ name: 'end' })
}
</script> </script>
<template> <template>
<div class="creation-list"> <div class="creation-list">
<div class="title">Your Creation</div> <div class="title" @click="handleOpenShare">Your Creation</div>
<div class="list"> <div class="list">
<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad"> <my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
<div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)"> <div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)">
<img v-lazy="v.tryOnUrl" /> <img v-lazy="v.tryOnUrl" />
<div class="corner"> <div class="corner">
<div class="ai" v-if="v.isRegenerated">Gen-AI</div> <div class="ai" v-if="v.isRegenerated">Gen-AI</div>
<div class="tryon" v-else>Try-on</div> <div class="tryon" v-else>Try-on</div>
</div> </div>
<div class="icons"> <div class="icons">
<div @click.stop="onLoveItem(v)"> <div @click.stop="onLoveItem(v)">
<SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" size="27" /> <SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" size="27" />
</div> </div>
<div @click.stop="onDownloadItem(v)"> <div @click.stop="onDownloadItem(v)">
<SvgIcon name="download" size="27" v-show="!v.loading" /> <SvgIcon name="download" size="27" v-show="!v.loading" />
<van-loading color="#000" size="3rem" v-show="v.loading" /> <van-loading color="#000" size="3rem" v-show="v.loading" />
</div> </div>
</div> </div>
<div class="icon-selected" v-show="isChooseSave && v.selected"> <div class="icon-selected" v-show="isChooseSave && v.selected">
<SvgIcon name="modelSelected" size="50" /> <SvgIcon name="modelSelected" size="50" />
</div> </div>
<div class="download-state" v-show="isChooseSave && v.loading">Downloading...</div> <div class="download-state" v-show="isChooseSave && v.loading">Downloading...</div>
<div class="download-state" v-show="isChooseSave && v.downloaded">Downloaded</div> <div class="download-state" v-show="isChooseSave && v.downloaded">Downloaded</div>
</div> </div>
</my-list> </my-list>
</div> </div>
<div class="btns" v-show="!visitRecordId"> <div class="btns" v-show="!visitRecordId">
<template v-if="!isChooseSave"> <template v-if="!isChooseSave">
<button @click="onChooseSave">Choose to Save</button> <button @click="onChooseSave">Choose to Save</button>
<button @click="onContinue">Continue</button> <button @click="onContinue">Continue</button>
</template> </template>
<template v-else> <template v-else>
<button @click="onBackChooseSave">Back</button> <button @click="onBackChooseSave">Back</button>
<button @click="onConfirm">Confirm ({{ selectCount }}/{{ maxSelectCount }})</button> <button @click="onConfirm">Confirm ({{ selectCount }}/{{ maxSelectCount }})</button>
</template> </template>
</div> </div>
</div> </div>
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.creation-list { .creation-list {
width: 100%; width: 100%;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
background-color: #e3e3e3; background-color: #e3e3e3;
border-radius: 1rem; border-radius: 1rem;
position: relative; position: relative;
color: #000; color: #000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> .title { > .title {
font-family: satoshiRegular; font-family: satoshiRegular;
font-size: 9rem; font-size: 9rem;
text-align: center; text-align: center;
line-height: 124%; line-height: 124%;
font-weight: 500; font-weight: 500;
margin: 7.2rem 0; margin: 7.2rem 0;
} }
> .list { > .list {
flex: 1; flex: 1;
margin: 0 3.8rem; margin: 0 3.8rem;
overflow: hidden; overflow: hidden;
--border-radius: 2rem; --border-radius: 2rem;
> .my-list { > .my-list {
padding: 0 6rem; padding: 0 6rem;
--my-list-footer-margin: 0 0 2rem; --my-list-footer-margin: 0 0 2rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-content: flex-start; align-content: flex-start;
.item { .item {
width: 47%; width: 47%;
height: 62.2rem; height: 62.2rem;
// overflow: hidden; // overflow: hidden;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: #fff; background-color: #fff;
margin-bottom: 4rem; margin-bottom: 4rem;
border: 0.1rem solid #000; border: 0.1rem solid #000;
position: relative; position: relative;
> img { > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
> .corner { > .corner {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
> div { > div {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 12.6rem; width: 12.6rem;
height: 3.6rem; height: 3.6rem;
font-family: satoshiBold; font-family: satoshiBold;
font-size: 1.6rem; font-size: 1.6rem;
border-bottom-left-radius: 1.6rem; border-bottom-left-radius: 1.6rem;
border-top-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius);
background-color: #000; background-color: #000;
color: #fff; color: #fff;
} }
> .ai { > .ai {
color: #646464; color: #646464;
background: linear-gradient( background: linear-gradient(
137.95deg, 137.95deg,
#7a96ac 2.28%, #7a96ac 2.28%,
#eaeff3 19.8%, #eaeff3 19.8%,
#c2d4e1 32.94%, #c2d4e1 32.94%,
#ffffff 50.16%, #ffffff 50.16%,
#d4dee5 62.15%, #d4dee5 62.15%,
#abbdc8 78.69%, #abbdc8 78.69%,
#bccad7 95.24% #bccad7 95.24%
), ),
linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5)); linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5));
} }
} }
> .icons { > .icons {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 1.7rem; right: 1.7rem;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
> div { > div {
margin-bottom: 2.2rem; margin-bottom: 2.2rem;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border-radius: 1rem; border-radius: 1rem;
border: 0.2rem solid #000; border: 0.2rem solid #000;
--svg-icon-color: #000; --svg-icon-color: #000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #fff; background-color: #fff;
} }
} }
> .icon-selected { > .icon-selected {
position: absolute; position: absolute;
bottom: -2rem; bottom: -2rem;
right: -2rem; right: -2rem;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
} }
> .download-state { > .download-state {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: #fff; color: #fff;
font-size: 4rem; font-size: 4rem;
} }
} }
} }
} }
> .btns { > .btns {
margin: 9rem 0; margin: 9rem 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
> button { > button {
box-sizing: content-box; box-sizing: content-box;
font-family: satoshiRegular; font-family: satoshiRegular;
width: 35rem; width: 35rem;
height: 8rem; height: 8rem;
border-radius: 1.3rem; border-radius: 1.3rem;
border: none; border: none;
background: #000; background: #000;
font-weight: 400; font-weight: 400;
font-size: 4.2rem; font-size: 4.2rem;
margin: 0 3.25rem; margin: 0 3.25rem;
color: #fff; color: #fff;
&:active { &:active {
opacity: 0.7; opacity: 0.7;
} }
} }
} }
} }
</style> </style>

8
src/views/Workshop/home.vue
View File

@@ -110,12 +110,14 @@ defineExpose({})
padding: 0 7.4rem; padding: 0 7.4rem;
gap: 4.8rem; gap: 4.8rem;
> .item{ > .item{
width: 44.2rem; // width: 44.2rem;
height: 41.6rem; // height: 41.6rem;
height: auto;
width: calc(50% - 4.8rem / 2);
> img{ > img{
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: contain;
} }
} }
} }