fix: make content api
This commit is contained in:
@@ -1,23 +1,29 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="fortune-detail-page">
|
<view
|
||||||
|
class="fortune-detail-page"
|
||||||
|
:style="{ paddingTop: navHeight + 10 + 'px' }"
|
||||||
|
>
|
||||||
<NavBar title="" :transparent="true" color="#ffd700" />
|
<NavBar title="" :transparent="true" color="#ffd700" />
|
||||||
|
|
||||||
<!-- 顶部提示条 -->
|
<!-- 顶部提示条 -->
|
||||||
<view class="top-banner" v-if="inviterName">
|
<view class="top-banner">
|
||||||
<image
|
<view class="banner-left">
|
||||||
class="avatar-icon"
|
<image
|
||||||
v-if="inviterAvatar"
|
class="avatar-icon"
|
||||||
:src="inviterAvatar"
|
v-if="inviterName && inviterAvatar"
|
||||||
mode="aspectFill"
|
:src="inviterAvatar"
|
||||||
/>
|
mode="aspectFill"
|
||||||
<text class="banner-text"
|
/>
|
||||||
>你的好友 {{ inviterName }} 正在抽取2026新年运势</text
|
<text class="banner-icon" v-else-if="!inviterName">✨</text>
|
||||||
>
|
<text class="banner-text" v-if="inviterName"
|
||||||
|
>你的好友 {{ inviterName }} 正在抽取2026新年运势</text
|
||||||
|
>
|
||||||
|
<text class="banner-text" v-else>2026 灵马贺岁 · 开启你的新年好运</text>
|
||||||
|
</view>
|
||||||
|
<view class="mini-btn" @click="goTest">
|
||||||
|
我也要测 <text class="mini-arrow">↗</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="top-banner" v-else>
|
|
||||||
<text class="banner-icon">✨</text>
|
|
||||||
<text class="banner-text">2026 灵马贺岁 · 开启你的新年好运</text>
|
|
||||||
</view> -->
|
|
||||||
|
|
||||||
<!-- 页面标题 -->
|
<!-- 页面标题 -->
|
||||||
<view class="page-header">
|
<view class="page-header">
|
||||||
@@ -79,14 +85,20 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
import { onLoad } from "@dcloudio/uni-app";
|
import { onLoad } from "@dcloudio/uni-app";
|
||||||
import { getPageDetail } from "@/api/system.js";
|
import { getPageDetail } from "@/api/system.js";
|
||||||
import { saveViewRequest } from "@/utils/common.js";
|
import { saveViewRequest } from "@/utils/common.js";
|
||||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||||
|
import { getBavBarHeight } from "@/utils/system.js";
|
||||||
|
|
||||||
const inviterName = ref("");
|
const inviterName = ref("");
|
||||||
const inviterAvatar = ref("");
|
const inviterAvatar = ref("");
|
||||||
|
const navHeight = ref(88);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
navHeight.value = getBavBarHeight();
|
||||||
|
});
|
||||||
|
|
||||||
const fortuneData = ref({
|
const fortuneData = ref({
|
||||||
imageUrl: "",
|
imageUrl: "",
|
||||||
@@ -159,7 +171,7 @@ const saveCard = () => {
|
|||||||
.fortune-detail-page {
|
.fortune-detail-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #2c1e1c;
|
background-color: #2c1e1c;
|
||||||
padding: 44px 20px 40px;
|
padding: 0 20px 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -167,28 +179,57 @@ const saveCard = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.top-banner {
|
.top-banner {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
background: rgba(255, 215, 0, 0.1);
|
background: rgba(255, 215, 0, 0.1);
|
||||||
border: 1px solid rgba(255, 215, 0, 0.2);
|
border: 1px solid rgba(255, 215, 0, 0.2);
|
||||||
border-radius: 20px;
|
border-radius: 30px;
|
||||||
padding: 6px 16px;
|
padding: 6px 6px 6px 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
.banner-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
.banner-icon {
|
.banner-icon {
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
.avatar-icon {
|
.avatar-icon {
|
||||||
width: 32px;
|
width: 28px;
|
||||||
height: 32px;
|
height: 28px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 6px;
|
margin-right: 8px;
|
||||||
|
border: 1px solid rgba(255, 215, 0, 0.3);
|
||||||
}
|
}
|
||||||
.banner-text {
|
.banner-text {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #ffd700;
|
color: #ffd700;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.mini-btn {
|
||||||
|
background: linear-gradient(90deg, #ffd700 0%, #ffa500 100%);
|
||||||
|
color: #333;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-left: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.mini-arrow {
|
||||||
|
margin-left: 2px;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
|
|||||||
Reference in New Issue
Block a user