natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

use v-bind for bg img

This commit is contained in:
ThatOneCalculator 2022-11-21 20:30:17 -08:00
parent e7b914bea3
commit dfba51fbef
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "calckey", "name": "calckey",
"version": "12.119.0-calc.16.8", "version": "12.119.0-calc.16.9",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

12
packages/client/src/pages/page.vue
View File

@ -10,7 +10,7 @@
</div> </div>
<div class="_block main"> <div class="_block main">
<div class="banner"> <div class="banner">
<div class="banner-image" :style="{ 'background-image': bgImg }"> <div class="banner-image">
<div class="header"> <div class="header">
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
</div> </div>
@ -87,6 +87,8 @@ const props = defineProps<{
username: string; username: string;
}>(); }>();
let bgImg = 'linear-gradient(to bottom right, #31748f, #9ccfd8)';
let page = $ref(null); let page = $ref(null);
let error = $ref(null); let error = $ref(null);
const otherPostsPagination = { const otherPostsPagination = {
@ -98,8 +100,6 @@ const otherPostsPagination = {
}; };
const path = $computed(() => props.username + '/' + props.pageName); const path = $computed(() => props.username + '/' + props.pageName);
let bgImg = $ref('linear-gradient(to bottom right, #31748f, #9ccfd8)');
function fetchPage() { function fetchPage() {
page = null; page = null;
os.api('pages/show', { os.api('pages/show', {
@ -107,6 +107,9 @@ function fetchPage() {
username: props.username, username: props.username,
}).then(_page => { }).then(_page => {
page = _page; page = _page;
if (_page.eyeCatchingImage != null) {
bgImg = `url(${_page.eyeCatchingImage.url})`;
}
}).catch(err => { }).catch(err => {
error = err; error = err;
}); });
@ -161,8 +164,6 @@ const headerActions = $computed(() => []);
const headerTabs = $computed(() => []); const headerTabs = $computed(() => []);
if (page.eyeCatchingImage.url != null) { bgImg = `url(${page.eyeCatchingImage.url})`; }
definePageMetadata(computed(() => page ? { definePageMetadata(computed(() => page ? {
title: computed(() => page.title || page.name), title: computed(() => page.title || page.name),
avatar: page.user, avatar: page.user,
@ -201,6 +202,7 @@ definePageMetadata(computed(() => page ? {
height: 150px; height: 150px;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-image: v-bind('bgImg');
> .header { > .header {
padding: 16px; padding: 16px;