feat: 测试分享到whatsapp
This commit is contained in:
10
index.html
10
index.html
@@ -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" />
|
||||
<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="https://abs.twimg.com/rweb/ssr/default/v2/og/image.png" />
|
||||
<meta property="og:url" content="https://www.lc.aida.com.hk/workshop/creation" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="Lane Crawford AI Stylist" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
184
src/utils/share.ts
Normal file
184
src/utils/share.ts
Normal file
@@ -0,0 +1,184 @@
|
||||
/**
|
||||
* 分享工具函数
|
||||
* 支持移动浏览器原生分享 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
|
||||
// WhatsApp Web API: https://wa.me/?text=
|
||||
const encodedText = encodeURIComponent(shareText)
|
||||
const whatsappUrl = `https://wa.me/?text=${encodedText}`
|
||||
|
||||
// 打开 WhatsApp 分享链接
|
||||
window.open(whatsappUrl, '_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> {
|
||||
console.log('1',imageUrl,'2',title)
|
||||
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()) {
|
||||
// 如果不支持文件分享，可以尝试将文件转换为 URL 后分享
|
||||
const imageUrl = URL.createObjectURL(imageFile)
|
||||
await shareImage(imageUrl, title || '分享图片', text)
|
||||
URL.revokeObjectURL(imageUrl)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await shareWithWebAPI({
|
||||
title,
|
||||
text,
|
||||
files: [imageFile]
|
||||
})
|
||||
} catch (error) {
|
||||
// 如果分享失败，回退到 URL 方式
|
||||
const imageUrl = URL.createObjectURL(imageFile)
|
||||
await shareImage(imageUrl, title || '分享图片', text)
|
||||
URL.revokeObjectURL(imageUrl)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 分享当前页面到 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)
|
||||
}
|
||||
|
||||
@@ -1,334 +1,346 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import MyList from '@/components/MyList.vue'
|
||||
import { DownloadImages } from '@/utils/tools'
|
||||
import {
|
||||
getTryOnEffectFavoriteList,
|
||||
getTryOnEffectStyleList,
|
||||
setTryOnEffectFavorite,
|
||||
cancelTryOnEffectFavorite
|
||||
} from '@/api/workshop'
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import MyList from '@/components/MyList.vue'
|
||||
import { DownloadImages } from '@/utils/tools'
|
||||
import {
|
||||
getTryOnEffectFavoriteList,
|
||||
getTryOnEffectStyleList,
|
||||
setTryOnEffectFavorite,
|
||||
cancelTryOnEffectFavorite
|
||||
} from '@/api/workshop'
|
||||
import { shareImage } from '@/utils/share'
|
||||
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['view-type'])
|
||||
const query = computed(() => router.currentRoute.value.query)
|
||||
const visitRecordId = computed(() => query.value.visitRecordId)// 访问记录ID
|
||||
import { useGenerateStore } from '@/stores'
|
||||
const generateStore = useGenerateStore()
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['view-type'])
|
||||
const query = computed(() => router.currentRoute.value.query)
|
||||
const visitRecordId = computed(() => query.value.visitRecordId) // 访问记录ID
|
||||
import { useGenerateStore } from '@/stores'
|
||||
const generateStore = useGenerateStore()
|
||||
|
||||
onMounted(() => {
|
||||
emit('view-type', 1)
|
||||
})
|
||||
const list = reactive([])
|
||||
const loading = ref(false)
|
||||
const finish = ref(false)
|
||||
const selectCount = computed(() => list.filter((v) => v.selected).length)
|
||||
const maxSelectCount = 10
|
||||
const isChooseSave = ref(false) //是否选择保存模式
|
||||
onMounted(() => {
|
||||
emit('view-type', 1)
|
||||
})
|
||||
const list = reactive([])
|
||||
const loading = ref(false)
|
||||
const finish = ref(false)
|
||||
const selectCount = computed(() => list.filter((v) => v.selected).length)
|
||||
const maxSelectCount = 10
|
||||
const isChooseSave = ref(false) //是否选择保存模式
|
||||
|
||||
const onLoad = () => {
|
||||
loading.value = true
|
||||
const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList
|
||||
const id = visitRecordId.value || generateStore.styleId
|
||||
http(id)
|
||||
.then((data) => {
|
||||
data?.forEach((v) => {
|
||||
const obj = {
|
||||
tryOnId: v.tryOnId,
|
||||
tryOnUrl: v.tryOnUrl,
|
||||
styleUrl: v.styleUrl,
|
||||
isFavorite: !!v.isFavorite,
|
||||
isRegenerated: !!v.isRegenerated,
|
||||
const onLoad = () => {
|
||||
loading.value = true
|
||||
const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList
|
||||
const id = visitRecordId.value || generateStore.styleId
|
||||
http(id)
|
||||
.then((data) => {
|
||||
data?.forEach((v) => {
|
||||
const obj = {
|
||||
tryOnId: v.tryOnId,
|
||||
tryOnUrl: v.tryOnUrl,
|
||||
styleUrl: v.styleUrl,
|
||||
isFavorite: !!v.isFavorite,
|
||||
isRegenerated: !!v.isRegenerated,
|
||||
|
||||
selected: list.length < maxSelectCount,
|
||||
loading: false,
|
||||
downloaded: false
|
||||
}
|
||||
list.push(obj)
|
||||
})
|
||||
loading.value = false
|
||||
finish.value = true
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
loading.value = false
|
||||
finish.value = true
|
||||
})
|
||||
}
|
||||
const onItem = (v) => {
|
||||
isChooseSave.value ? onSelectItem(v) : onDetailsItem(v)
|
||||
}
|
||||
// 详情页
|
||||
const onDetailsItem = (v) => {
|
||||
if (v.isRegenerated) return
|
||||
router.push({ query: { ...query.value, styleUrl: v.styleUrl } })
|
||||
}
|
||||
// 喜欢
|
||||
const isLoveLoading = ref(false)
|
||||
const onLoveItem = (v) => {
|
||||
if (isLoveLoading.value) return
|
||||
const http = v.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
|
||||
isLoveLoading.value = true
|
||||
v.isFavorite = !v.isFavorite
|
||||
http(v.tryOnId)
|
||||
.then(() => {
|
||||
isLoveLoading.value = false
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
isLoveLoading.value = false
|
||||
})
|
||||
}
|
||||
const onDownloadItem = (v) => {
|
||||
// console.log('保存', v)
|
||||
if (v.loading) return
|
||||
v.loading = true
|
||||
v.selected = false
|
||||
DownloadImages([{ url: v.tryOnUrl }], null, null, () => {
|
||||
v.loading = false
|
||||
v.downloaded = true
|
||||
})
|
||||
}
|
||||
const onSelectItem = (v) => {
|
||||
if (selectCount.value >= maxSelectCount && !v.selected) return
|
||||
v.selected = !v.selected
|
||||
}
|
||||
const onChooseSave = () => {
|
||||
isChooseSave.value = true
|
||||
}
|
||||
const onBackChooseSave = () => {
|
||||
isChooseSave.value = false
|
||||
}
|
||||
// 下载选中项
|
||||
const onConfirm = () => {
|
||||
const downloadList = []
|
||||
if (selectCount.value > 0) {
|
||||
list.forEach((v, i) => {
|
||||
if (v.selected) {
|
||||
v.selected = false
|
||||
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' })
|
||||
}
|
||||
selected: list.length < maxSelectCount,
|
||||
loading: false,
|
||||
downloaded: false
|
||||
}
|
||||
list.push(obj)
|
||||
})
|
||||
loading.value = false
|
||||
finish.value = true
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
loading.value = false
|
||||
finish.value = true
|
||||
})
|
||||
}
|
||||
const onItem = (v) => {
|
||||
isChooseSave.value ? onSelectItem(v) : onDetailsItem(v)
|
||||
}
|
||||
// 详情页
|
||||
const onDetailsItem = (v) => {
|
||||
if (v.isRegenerated) return
|
||||
router.push({ query: { ...query.value, styleUrl: v.styleUrl } })
|
||||
}
|
||||
// 喜欢
|
||||
const isLoveLoading = ref(false)
|
||||
const onLoveItem = (v) => {
|
||||
if (isLoveLoading.value) return
|
||||
const http = v.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
|
||||
isLoveLoading.value = true
|
||||
v.isFavorite = !v.isFavorite
|
||||
http(v.tryOnId)
|
||||
.then(() => {
|
||||
isLoveLoading.value = false
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
isLoveLoading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const isShare = ref(false)
|
||||
const handleOpenShare = () => {
|
||||
isShare.value = !isShare.value
|
||||
alert(`现在${isShare.value ? '可以' : '不可以'}分享`)
|
||||
}
|
||||
|
||||
const onDownloadItem = (v) => {
|
||||
// console.log('1111111111111111', v)
|
||||
if (isShare.value) {
|
||||
shareImage(v.tryOnUrl,'Creation')
|
||||
} else {
|
||||
if (v.loading) return
|
||||
v.loading = true
|
||||
v.selected = false
|
||||
DownloadImages([{ url: v.tryOnUrl }], null, null, () => {
|
||||
v.loading = false
|
||||
v.downloaded = true
|
||||
})
|
||||
}
|
||||
}
|
||||
const onSelectItem = (v) => {
|
||||
if (selectCount.value >= maxSelectCount && !v.selected) return
|
||||
v.selected = !v.selected
|
||||
}
|
||||
const onChooseSave = () => {
|
||||
isChooseSave.value = true
|
||||
}
|
||||
const onBackChooseSave = () => {
|
||||
isChooseSave.value = false
|
||||
}
|
||||
// 下载选中项
|
||||
const onConfirm = () => {
|
||||
const downloadList = []
|
||||
if (selectCount.value > 0) {
|
||||
list.forEach((v, i) => {
|
||||
if (v.selected) {
|
||||
v.selected = false
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div class="creation-list">
|
||||
<div class="title">Your Creation</div>
|
||||
<div class="list">
|
||||
<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)">
|
||||
<img v-lazy="v.tryOnUrl" />
|
||||
<div class="corner">
|
||||
<div class="ai" v-if="v.isRegenerated">Gen-AI</div>
|
||||
<div class="tryon" v-else>Try-on</div>
|
||||
</div>
|
||||
<div class="icons">
|
||||
<div @click.stop="onLoveItem(v)">
|
||||
<SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" size="27" />
|
||||
</div>
|
||||
<div @click.stop="onDownloadItem(v)">
|
||||
<SvgIcon name="download" size="27" v-show="!v.loading" />
|
||||
<van-loading color="#000" size="3rem" v-show="v.loading" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-selected" v-show="isChooseSave && v.selected">
|
||||
<SvgIcon name="modelSelected" size="50" />
|
||||
</div>
|
||||
<div class="download-state" v-show="isChooseSave && v.loading">Downloading...</div>
|
||||
<div class="download-state" v-show="isChooseSave && v.downloaded">Downloaded</div>
|
||||
</div>
|
||||
</my-list>
|
||||
</div>
|
||||
<div class="btns" v-show="!visitRecordId">
|
||||
<template v-if="!isChooseSave">
|
||||
<button @click="onChooseSave">Choose to Save</button>
|
||||
<button @click="onContinue">Continue</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button @click="onBackChooseSave">Back</button>
|
||||
<button @click="onConfirm">Confirm ({{ selectCount }}/{{ maxSelectCount }})</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="creation-list">
|
||||
<div class="title" @click="handleOpenShare">Your Creation</div>
|
||||
<div class="list">
|
||||
<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)">
|
||||
<img v-lazy="v.tryOnUrl" />
|
||||
<div class="corner">
|
||||
<div class="ai" v-if="v.isRegenerated">Gen-AI</div>
|
||||
<div class="tryon" v-else>Try-on</div>
|
||||
</div>
|
||||
<div class="icons">
|
||||
<div @click.stop="onLoveItem(v)">
|
||||
<SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" size="27" />
|
||||
</div>
|
||||
<div @click.stop="onDownloadItem(v)">
|
||||
<SvgIcon name="download" size="27" v-show="!v.loading" />
|
||||
<van-loading color="#000" size="3rem" v-show="v.loading" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-selected" v-show="isChooseSave && v.selected">
|
||||
<SvgIcon name="modelSelected" size="50" />
|
||||
</div>
|
||||
<div class="download-state" v-show="isChooseSave && v.loading">Downloading...</div>
|
||||
<div class="download-state" v-show="isChooseSave && v.downloaded">Downloaded</div>
|
||||
</div>
|
||||
</my-list>
|
||||
</div>
|
||||
<div class="btns" v-show="!visitRecordId">
|
||||
<template v-if="!isChooseSave">
|
||||
<button @click="onChooseSave">Choose to Save</button>
|
||||
<button @click="onContinue">Continue</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button @click="onBackChooseSave">Back</button>
|
||||
<button @click="onConfirm">Confirm ({{ selectCount }}/{{ maxSelectCount }})</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.creation-list {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background-color: #e3e3e3;
|
||||
border-radius: 1rem;
|
||||
position: relative;
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .title {
|
||||
font-family: satoshiRegular;
|
||||
font-size: 9rem;
|
||||
text-align: center;
|
||||
line-height: 124%;
|
||||
font-weight: 500;
|
||||
margin: 7.2rem 0;
|
||||
}
|
||||
> .list {
|
||||
flex: 1;
|
||||
margin: 0 3.8rem;
|
||||
overflow: hidden;
|
||||
--border-radius: 2rem;
|
||||
> .my-list {
|
||||
padding: 0 6rem;
|
||||
--my-list-footer-margin: 0 0 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: flex-start;
|
||||
.item {
|
||||
width: 47%;
|
||||
height: 62.2rem;
|
||||
// overflow: hidden;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: #fff;
|
||||
margin-bottom: 4rem;
|
||||
border: 0.1rem solid #000;
|
||||
position: relative;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
> .corner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 12.6rem;
|
||||
height: 3.6rem;
|
||||
font-family: satoshiBold;
|
||||
font-size: 1.6rem;
|
||||
border-bottom-left-radius: 1.6rem;
|
||||
border-top-right-radius: var(--border-radius);
|
||||
.creation-list {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background-color: #e3e3e3;
|
||||
border-radius: 1rem;
|
||||
position: relative;
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .title {
|
||||
font-family: satoshiRegular;
|
||||
font-size: 9rem;
|
||||
text-align: center;
|
||||
line-height: 124%;
|
||||
font-weight: 500;
|
||||
margin: 7.2rem 0;
|
||||
}
|
||||
> .list {
|
||||
flex: 1;
|
||||
margin: 0 3.8rem;
|
||||
overflow: hidden;
|
||||
--border-radius: 2rem;
|
||||
> .my-list {
|
||||
padding: 0 6rem;
|
||||
--my-list-footer-margin: 0 0 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: flex-start;
|
||||
.item {
|
||||
width: 47%;
|
||||
height: 62.2rem;
|
||||
// overflow: hidden;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: #fff;
|
||||
margin-bottom: 4rem;
|
||||
border: 0.1rem solid #000;
|
||||
position: relative;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
> .corner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 12.6rem;
|
||||
height: 3.6rem;
|
||||
font-family: satoshiBold;
|
||||
font-size: 1.6rem;
|
||||
border-bottom-left-radius: 1.6rem;
|
||||
border-top-right-radius: var(--border-radius);
|
||||
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
> .ai {
|
||||
color: #646464;
|
||||
background: linear-gradient(
|
||||
137.95deg,
|
||||
#7a96ac 2.28%,
|
||||
#eaeff3 19.8%,
|
||||
#c2d4e1 32.94%,
|
||||
#ffffff 50.16%,
|
||||
#d4dee5 62.15%,
|
||||
#abbdc8 78.69%,
|
||||
#bccad7 95.24%
|
||||
),
|
||||
linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5));
|
||||
}
|
||||
}
|
||||
> .icons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 1.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
> div {
|
||||
margin-bottom: 2.2rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 1rem;
|
||||
border: 0.2rem solid #000;
|
||||
--svg-icon-color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
> .icon-selected {
|
||||
position: absolute;
|
||||
bottom: -2rem;
|
||||
right: -2rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
> .download-state {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: var(--border-radius);
|
||||
color: #fff;
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .btns {
|
||||
margin: 9rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
> .ai {
|
||||
color: #646464;
|
||||
background: linear-gradient(
|
||||
137.95deg,
|
||||
#7a96ac 2.28%,
|
||||
#eaeff3 19.8%,
|
||||
#c2d4e1 32.94%,
|
||||
#ffffff 50.16%,
|
||||
#d4dee5 62.15%,
|
||||
#abbdc8 78.69%,
|
||||
#bccad7 95.24%
|
||||
),
|
||||
linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5));
|
||||
}
|
||||
}
|
||||
> .icons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 1.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
> div {
|
||||
margin-bottom: 2.2rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 1rem;
|
||||
border: 0.2rem solid #000;
|
||||
--svg-icon-color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
> .icon-selected {
|
||||
position: absolute;
|
||||
bottom: -2rem;
|
||||
right: -2rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
> .download-state {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: var(--border-radius);
|
||||
color: #fff;
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .btns {
|
||||
margin: 9rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
> button {
|
||||
box-sizing: content-box;
|
||||
font-family: satoshiRegular;
|
||||
width: 35rem;
|
||||
height: 8rem;
|
||||
border-radius: 1.3rem;
|
||||
border: none;
|
||||
background: #000;
|
||||
font-weight: 400;
|
||||
font-size: 4.2rem;
|
||||
margin: 0 3.25rem;
|
||||
color: #fff;
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> button {
|
||||
box-sizing: content-box;
|
||||
font-family: satoshiRegular;
|
||||
width: 35rem;
|
||||
height: 8rem;
|
||||
border-radius: 1.3rem;
|
||||
border: none;
|
||||
background: #000;
|
||||
font-weight: 400;
|
||||
font-size: 4.2rem;
|
||||
margin: 0 3.25rem;
|
||||
color: #fff;
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user