File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
2024-11-19
<template>
<div class="content-wrap">
<div class="title-box mb25 flex align-center mt40">
<span class="title mr40">1. Hello WORLD</span>
<span class="title mr40">기념 사진을 꾸며봅시다.</span>
</div>
<div class="flex justify-between align-center" style="gap: 40px;">
<div class="content" style="padding: 30px;">
<div class="tool">
<div class="flex justify-center mb20" style="gap: 20px;">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
:class="{ active: selectedIndex === index }">
<img :src="item.imgSrc1" style="display: block;">
<img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
</button>
</div>
</div>
<div class="stickers">
<button><img src="../../../resources/img/img146_75s.png" alt=""></button>
<button><img src="../../../resources/img/img147_75s.png" alt=""></button>
<button><img src="../../../resources/img/img148_75s.png" alt=""></button>
<button><img src="../../../resources/img/img149_75s.png" alt=""></button>
<button><img src="../../../resources/img/img150_75s.png" alt=""></button>
<button><img src="../../../resources/img/img151_75s.png" alt=""></button>
<button><img src="../../../resources/img/img152_75s.png" alt=""></button>
<button><img src="../../../resources/img/img153_75s.png" alt=""></button>
<button><img src="../../../resources/img/img154_75s.png" alt=""></button>
<button><img src="../../../resources/img/img155_75s.png" alt=""></button>
<button><img src="../../../resources/img/img156_75s.png" alt=""></button>
<button><img src="../../../resources/img/img157_75s.png" alt=""></button>
<button><img src="../../../resources/img/img158_75s.png" alt=""></button>
</div>
</div>
<div>
<div class="content" style="height: 549px; width: 973px;">
<button><img class="captured-img" :src="capturedImage" alt="Captured Image"></button>
</div>
<div class="btn-wrap flex justify-center mt40" style="gap: 40px;">
<button class="login-btn" @click="goToPage('Camera')">
<img src="../../../resources/img/btn07_s.png" alt="">
<p>재촬영</p>
</button>
<button class="login-btn" type="submit" @click="goToPage('PhotoEdit')">
<img src="../../../resources/img/btn07_s.png" alt="">
<p>완성</p>
</button>
</div>
</div>
<div class="content title-box" style="padding: 30px;">
<div class="mb20">
<p class="title">랜덤 단어</p>
</div>
<div class="flex-column" style="gap: 10px;">
<button class="login-btn"><img src="../../../resources/img/img141_75s.png" alt="">
<p class="title">a</p>
</button>
<button class="login-btn"><img src="../../../resources/img/img152_75s_01.png" alt="">
<p class="title">a</p>
</button>
<button class="login-btn"><img src="../../../resources/img/img144_75s.png" alt="">
<p class="title" style="color: #fff;">a</p>
</button>
<button class="login-btn"><img src="../../../resources/img/img145_75s.png" alt="">
<p class="title mt20" style="color: #fff;">a</p>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ imgSrc1: 'client/resources/img/btn20_75s_normal.png', imgSrc2: 'client/resources/img/btn20_75s_click.png' },
{ imgSrc1: 'client/resources/img/btn21_75s_normal.png', imgSrc2: 'client/resources/img/btn21_75s_click.png' },
],
selectedIndex: 0,
};
},
computed: {
capturedImage() {
// Retrieve the captured image from route query parameters
return this.$route.query.image || ''; // Return an empty string if no image is provided
}
},
methods: {
updateContent(index) {
this.selectedIndex = index;
},
goToPage(page) {
this.$router.push({ name: page });
},
// captureAndGoToPhotoDesign() {
// const video = this.$refs.modalVideoElement;
// const canvas = document.createElement('canvas');
// canvas.width = video.videoWidth;
// canvas.height = video.videoHeight;
// const ctx = canvas.getContext('2d');
// // 좌우 반전 적용
// ctx.translate(canvas.width, 0);
// ctx.scale(-1, 1);
// ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// const imageDataUrl = canvas.toDataURL('image/png');
// this.$router.push({ name: 'PhotoDesign', query: { image: imageDataUrl } });
// }
},
}
</script>
<style scoped>
.captured-img {
margin: auto auto;
}
.imgGroup {
width: fit-content;
}
.imgGroup button {
position: relative;
}
.imgGroup button p,
.textbox p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: fit-content;
height: fit-content;
background: #ffffffb8;
border-radius: 5px;
padding: 10px;
font-size: 48px;
font-family: 'ONEMobilePOP';
}
.pickGroup button {
position: relative;
margin-right: 30px;
}
.pickGroup button p {
font-size: 34px;
color: #c6c6c6;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.pickGroup article img {
object-fit: contain;
width: -webkit-fill-available;
}
.pickGroup article>div>p {
font-size: 64px;
}
.popTxt {
width: 101px;
}
</style>