Hooke / fxPark

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3d8dac38 1 parent 7b5d5f66

海报页图片样式结构调整

Inline Side-by-side
Showing 9 changed files with 69 additions and 35 deletions
<template>
<div class="poster-page">
<div style="position: absolute; right: 5px; top: 10px;">
<img src="https://cdn.ipadbiz.cn/xfPark/post/public/go-back-btn.1713241695.png" style="width: 2rem; height: 2rem;">
</div>
<div class="poster-contain-wrapper">
<div v-if="flag" ref="canvasRef" class="poster-contain" style="border: 1px solid #4e4e4e; ">
<div v-if="flag" ref="canvasRef" class="poster-contain" style="border: 1.5px solid #9C8882; ">
<div class="poster-text-boxer">
<div class="poster-text">
<span class="name">{{ tree_data?.name }}</span>
<div class="nickname">{{ tree_data?.nickname }}</div>
</div>
</div>
<div style="position: relative;">
<img :src="imgSrc">
<div style="position: absolute; right: 5px; bottom: 5px;">
<img src="https://cdn.ipadbiz.cn/xfPark/post/public/logo.1713241695.png" style=" width: 4rem; height: 5rem;">
</div>
</div>
<div class="poster-mission">
<div style="font-weight: bold; text-decoration: underline; margin-bottom: 0.5rem;">
{{ tree_data?.mission_title }}
</div>
<div style="font-size: 0.9rem; margin-bottom: 0.5rem;">
{{ tree_data?.mission_note }}
</div>
</div>
</div>
<div v-if="imgUrl">
<img :src="imgUrl" crossOrigin="anonymous" :style="{ width: ref_width, height: ref_height }">
......@@ -22,12 +34,12 @@
<div class="poster-control-wrapper">
<p class="save-text">长按保存到相册</p>
<div class="poster-control">
<div @click="posterPrev" class="poster-prev">上一个</div>
<div @click="posterPrev" class="poster-prev"></div>
<van-uploader v-if="tree_data?.is_tree === 1" :before-read="beforeRead" :after-read="afterRead" accept="file">
<div v-if="!upload_loading" class="poster-upload-btn">上传图片</div>
<div v-if="!upload_loading" class="poster-upload-btn"></div>
<van-loading v-else size="24px" color="#fff" text-color="#fff" vertical>上传中...</van-loading>
</van-uploader>
<div @click="posterNext" class="poster-next">下一个</div>
<div @click="posterNext" class="poster-next"></div>
</div>
</div>
</div>
......@@ -76,7 +88,7 @@ onMounted(async () => {
ref_width.value = canvasDom.offsetWidth + 'px';
ref_height.value = canvasDom.offsetHeight + 'px';
});
createImage();
// createImage();
});
const resizePoster = () => { // 重置海报
......@@ -210,15 +222,18 @@ const afterRead = async (res) => {
<style lang="less" scoped>
.poster-page {
height: 100vh;
background-color: #DCD8D2;
background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/bg.1713241290.jpg');
background-size: 100%;
overflow: auto;
.poster-contain-wrapper {
height: calc(83vh - 2rem);
padding: 1rem;
// height: calc(83vh - 2rem);
padding: 2.5rem 2rem 1rem;
.poster-contain {
position: relative;
padding: 1rem;
background-color: #fff;
.poster-text-boxer {
z-index: 10;
position: absolute;
top: 3rem;
left: 2rem;
......@@ -228,22 +243,27 @@ const afterRead = async (res) => {
.poster-text {
position: relative;
.name {
font-size: 2.5rem;
font-size: 2.2rem;
font-weight: bolder;
letter-spacing: 5px;
text-shadow:
-1px -1px 0 #1F6D4E,
1px -1px 0 #1F6D4E,
-1px 1px 0 #1F6D4E,
1px 1px 0 #1F6D4E;
// text-shadow:
// -2px -2px 0 #1F6D4E,
// 2px -2px 0 #1F6D4E,
// -2px 2px 0 #1F6D4E,
// 2px 2px 0 #1F6D4E;
-webkit-text-stroke: 1px #1F6D4E;
}
.nickname {
font-size: 0.95rem;
position: absolute;
top: 0.5rem;
// left: 3.5rem;
letter-spacing: 5px;
color: #1F6D4E;
background-color: #FFCE0B;
padding: 0.25rem;
padding: 0.5rem;
background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/wenzi-bg.1713239032.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
......@@ -260,8 +280,7 @@ const afterRead = async (res) => {
.poster-control-wrapper {
.save-text {
text-align: center;
margin-top: 2rem;
margin-bottom: 1rem;
margin-bottom: 0.5rem;
color: #797572;
font-size: 0.9rem;
}
......@@ -269,29 +288,44 @@ const afterRead = async (res) => {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
.poster-prev {
background-color: rgba(0, 0, 0, 0.3);
color: #FFF;
padding: 0.5rem 0.8rem 0.5rem 1rem;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
font-size: 0.9rem;
// background-color: rgba(0, 0, 0, 0.3);
// color: #FFF;
// padding: 0.5rem 0.8rem 0.5rem 1rem;
// border-top-right-radius: 15px;
// border-bottom-right-radius: 15px;
// font-size: 0.9rem;
background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/left-btn.1713242078.png');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 3rem;
height: 3rem;
}
.poster-next {
background-color: rgba(0, 0, 0, 0.3);
color: #FFF;
padding: 0.5rem 1rem 0.5rem 0.8rem;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
font-size: 0.9rem;
// background-color: rgba(0, 0, 0, 0.3);
// color: #FFF;
// padding: 0.5rem 1rem 0.5rem 0.8rem;
// border-top-left-radius: 15px;
// border-bottom-left-radius: 15px;
// font-size: 0.9rem;
background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/right-btn.1713242078.png');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 3rem;
height: 3rem;
}
.poster-upload-btn {
display: inline-block;
background-color: #F68015;
color: #fff;
padding: 0.5rem 2.5rem;
border-radius: 1.5rem;
font-size: 0.95rem;
// color: #fff;
// padding: 0.5rem 2.5rem;
// border-radius: 1.5rem;
// font-size: 0.95rem;
background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/poster-btn.1713242078.png');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 10rem;
height: 3rem;
}
}
}
......