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
1 <template> 1 <template>
2 <div class="poster-page"> 2 <div class="poster-page">
3 + <div style="position: absolute; right: 5px; top: 10px;">
4 + <img src="https://cdn.ipadbiz.cn/xfPark/post/public/go-back-btn.1713241695.png" style="width: 2rem; height: 2rem;">
5 + </div>
3 <div class="poster-contain-wrapper"> 6 <div class="poster-contain-wrapper">
4 - <div v-if="flag" ref="canvasRef" class="poster-contain" style="border: 1px solid #4e4e4e; "> 7 + <div v-if="flag" ref="canvasRef" class="poster-contain" style="border: 1.5px solid #9C8882; ">
5 <div class="poster-text-boxer"> 8 <div class="poster-text-boxer">
6 <div class="poster-text"> 9 <div class="poster-text">
7 <span class="name">{{ tree_data?.name }}</span> 10 <span class="name">{{ tree_data?.name }}</span>
8 <div class="nickname">{{ tree_data?.nickname }}</div> 11 <div class="nickname">{{ tree_data?.nickname }}</div>
9 </div> 12 </div>
10 </div> 13 </div>
14 + <div style="position: relative;">
11 <img :src="imgSrc"> 15 <img :src="imgSrc">
16 + <div style="position: absolute; right: 5px; bottom: 5px;">
17 + <img src="https://cdn.ipadbiz.cn/xfPark/post/public/logo.1713241695.png" style=" width: 4rem; height: 5rem;">
18 + </div>
19 + </div>
12 <div class="poster-mission"> 20 <div class="poster-mission">
13 <div style="font-weight: bold; text-decoration: underline; margin-bottom: 0.5rem;"> 21 <div style="font-weight: bold; text-decoration: underline; margin-bottom: 0.5rem;">
14 {{ tree_data?.mission_title }} 22 {{ tree_data?.mission_title }}
15 </div> 23 </div>
24 + <div style="font-size: 0.9rem; margin-bottom: 0.5rem;">
25 + {{ tree_data?.mission_note }}
26 + </div>
16 </div> 27 </div>
28 +
17 </div> 29 </div>
18 <div v-if="imgUrl"> 30 <div v-if="imgUrl">
19 <img :src="imgUrl" crossOrigin="anonymous" :style="{ width: ref_width, height: ref_height }"> 31 <img :src="imgUrl" crossOrigin="anonymous" :style="{ width: ref_width, height: ref_height }">
...@@ -22,12 +34,12 @@ ...@@ -22,12 +34,12 @@
22 <div class="poster-control-wrapper"> 34 <div class="poster-control-wrapper">
23 <p class="save-text">长按保存到相册</p> 35 <p class="save-text">长按保存到相册</p>
24 <div class="poster-control"> 36 <div class="poster-control">
25 - <div @click="posterPrev" class="poster-prev">上一个</div> 37 + <div @click="posterPrev" class="poster-prev"></div>
26 <van-uploader v-if="tree_data?.is_tree === 1" :before-read="beforeRead" :after-read="afterRead" accept="file"> 38 <van-uploader v-if="tree_data?.is_tree === 1" :before-read="beforeRead" :after-read="afterRead" accept="file">
27 - <div v-if="!upload_loading" class="poster-upload-btn">上传图片</div> 39 + <div v-if="!upload_loading" class="poster-upload-btn"></div>
28 <van-loading v-else size="24px" color="#fff" text-color="#fff" vertical>上传中...</van-loading> 40 <van-loading v-else size="24px" color="#fff" text-color="#fff" vertical>上传中...</van-loading>
29 </van-uploader> 41 </van-uploader>
30 - <div @click="posterNext" class="poster-next">下一个</div> 42 + <div @click="posterNext" class="poster-next"></div>
31 </div> 43 </div>
32 </div> 44 </div>
33 </div> 45 </div>
...@@ -76,7 +88,7 @@ onMounted(async () => { ...@@ -76,7 +88,7 @@ onMounted(async () => {
76 ref_width.value = canvasDom.offsetWidth + 'px'; 88 ref_width.value = canvasDom.offsetWidth + 'px';
77 ref_height.value = canvasDom.offsetHeight + 'px'; 89 ref_height.value = canvasDom.offsetHeight + 'px';
78 }); 90 });
79 - createImage(); 91 + // createImage();
80 }); 92 });
81 93
82 const resizePoster = () => { // 重置海报 94 const resizePoster = () => { // 重置海报
...@@ -210,15 +222,18 @@ const afterRead = async (res) => { ...@@ -210,15 +222,18 @@ const afterRead = async (res) => {
210 <style lang="less" scoped> 222 <style lang="less" scoped>
211 .poster-page { 223 .poster-page {
212 height: 100vh; 224 height: 100vh;
213 - background-color: #DCD8D2; 225 + background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/bg.1713241290.jpg');
226 + background-size: 100%;
227 + overflow: auto;
214 .poster-contain-wrapper { 228 .poster-contain-wrapper {
215 - height: calc(83vh - 2rem); 229 + // height: calc(83vh - 2rem);
216 - padding: 1rem; 230 + padding: 2.5rem 2rem 1rem;
217 .poster-contain { 231 .poster-contain {
218 position: relative; 232 position: relative;
219 padding: 1rem; 233 padding: 1rem;
220 background-color: #fff; 234 background-color: #fff;
221 .poster-text-boxer { 235 .poster-text-boxer {
236 + z-index: 10;
222 position: absolute; 237 position: absolute;
223 top: 3rem; 238 top: 3rem;
224 left: 2rem; 239 left: 2rem;
...@@ -228,22 +243,27 @@ const afterRead = async (res) => { ...@@ -228,22 +243,27 @@ const afterRead = async (res) => {
228 .poster-text { 243 .poster-text {
229 position: relative; 244 position: relative;
230 .name { 245 .name {
231 - font-size: 2.5rem; 246 + font-size: 2.2rem;
232 font-weight: bolder; 247 font-weight: bolder;
233 letter-spacing: 5px; 248 letter-spacing: 5px;
234 - text-shadow: 249 + // text-shadow:
235 - -1px -1px 0 #1F6D4E, 250 + // -2px -2px 0 #1F6D4E,
236 - 1px -1px 0 #1F6D4E, 251 + // 2px -2px 0 #1F6D4E,
237 - -1px 1px 0 #1F6D4E, 252 + // -2px 2px 0 #1F6D4E,
238 - 1px 1px 0 #1F6D4E; 253 + // 2px 2px 0 #1F6D4E;
254 + -webkit-text-stroke: 1px #1F6D4E;
239 } 255 }
240 .nickname { 256 .nickname {
257 + font-size: 0.95rem;
241 position: absolute; 258 position: absolute;
242 top: 0.5rem; 259 top: 0.5rem;
260 + // left: 3.5rem;
243 letter-spacing: 5px; 261 letter-spacing: 5px;
244 color: #1F6D4E; 262 color: #1F6D4E;
245 - background-color: #FFCE0B; 263 + padding: 0.5rem;
246 - padding: 0.25rem; 264 + background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/wenzi-bg.1713239032.png');
265 + background-repeat: no-repeat;
266 + background-size: 100% 100%;
247 } 267 }
248 } 268 }
249 } 269 }
...@@ -260,8 +280,7 @@ const afterRead = async (res) => { ...@@ -260,8 +280,7 @@ const afterRead = async (res) => {
260 .poster-control-wrapper { 280 .poster-control-wrapper {
261 .save-text { 281 .save-text {
262 text-align: center; 282 text-align: center;
263 - margin-top: 2rem; 283 + margin-bottom: 0.5rem;
264 - margin-bottom: 1rem;
265 color: #797572; 284 color: #797572;
266 font-size: 0.9rem; 285 font-size: 0.9rem;
267 } 286 }
...@@ -269,29 +288,44 @@ const afterRead = async (res) => { ...@@ -269,29 +288,44 @@ const afterRead = async (res) => {
269 display: flex; 288 display: flex;
270 justify-content: space-between; 289 justify-content: space-between;
271 align-items: center; 290 align-items: center;
291 + margin-bottom: 1rem;
272 .poster-prev { 292 .poster-prev {
273 - background-color: rgba(0, 0, 0, 0.3); 293 + // background-color: rgba(0, 0, 0, 0.3);
274 - color: #FFF; 294 + // color: #FFF;
275 - padding: 0.5rem 0.8rem 0.5rem 1rem; 295 + // padding: 0.5rem 0.8rem 0.5rem 1rem;
276 - border-top-right-radius: 15px; 296 + // border-top-right-radius: 15px;
277 - border-bottom-right-radius: 15px; 297 + // border-bottom-right-radius: 15px;
278 - font-size: 0.9rem; 298 + // font-size: 0.9rem;
299 + background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/left-btn.1713242078.png');
300 + background-repeat: no-repeat;
301 + background-size: 100% 100%;
302 + width: 3rem;
303 + height: 3rem;
279 } 304 }
280 .poster-next { 305 .poster-next {
281 - background-color: rgba(0, 0, 0, 0.3); 306 + // background-color: rgba(0, 0, 0, 0.3);
282 - color: #FFF; 307 + // color: #FFF;
283 - padding: 0.5rem 1rem 0.5rem 0.8rem; 308 + // padding: 0.5rem 1rem 0.5rem 0.8rem;
284 - border-top-left-radius: 15px; 309 + // border-top-left-radius: 15px;
285 - border-bottom-left-radius: 15px; 310 + // border-bottom-left-radius: 15px;
286 - font-size: 0.9rem; 311 + // font-size: 0.9rem;
312 + background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/right-btn.1713242078.png');
313 + background-repeat: no-repeat;
314 + background-size: 100% 100%;
315 + width: 3rem;
316 + height: 3rem;
287 } 317 }
288 .poster-upload-btn { 318 .poster-upload-btn {
289 display: inline-block; 319 display: inline-block;
290 - background-color: #F68015; 320 + // color: #fff;
291 - color: #fff; 321 + // padding: 0.5rem 2.5rem;
292 - padding: 0.5rem 2.5rem; 322 + // border-radius: 1.5rem;
293 - border-radius: 1.5rem; 323 + // font-size: 0.95rem;
294 - font-size: 0.95rem; 324 + background-image: url('https://cdn.ipadbiz.cn/xfPark/post/public/poster-btn.1713242078.png');
325 + background-repeat: no-repeat;
326 + background-size: 100% 100%;
327 + width: 10rem;
328 + height: 3rem;
295 } 329 }
296 } 330 }
297 } 331 }
......