完成首页3个tab页的移动端改造
This commit is contained in:
kron
@@ -10,56 +10,31 @@ const props = defineProps({
|
||||
default: "#050b19",
|
||||
},
|
||||
});
|
||||
const capsuleHeight = ref(0);
|
||||
// onMounted(() => {
|
||||
// const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// capsuleHeight.value = menuBtnInfo.top + 50 - 9;
|
||||
// });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="background" :style="{ backgroundColor: bgColor }">
|
||||
<image
|
||||
class="bg-image"
|
||||
v-if="type === 2"
|
||||
src="../static/app-bg3.png"
|
||||
:style="{ height: capsuleHeight + 'px' }"
|
||||
/>
|
||||
<image class="bg-image" v-if="type === 2" src="../static/app-bg3.png" />
|
||||
<image
|
||||
class="bg-image"
|
||||
v-if="type === 4"
|
||||
src="../static/app-bg5.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="bg-overlay" v-if="type === 0"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.background {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bg-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(26, 26, 26, 0.2),
|
||||
rgba(0, 0, 0, 0.2)
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,7 @@ const props = defineProps({
|
||||
},
|
||||
bgType: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
default: 2,
|
||||
},
|
||||
onBack: {
|
||||
type: Function,
|
||||
@@ -25,18 +25,13 @@ const props = defineProps({
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "#050b19",
|
||||
default: "#F5F5F5",
|
||||
},
|
||||
});
|
||||
const showHint = ref(false);
|
||||
const hintType = ref(0);
|
||||
const capsuleHeight = ref(0);
|
||||
const isLoading = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
// const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// capsuleHeight.value = menuBtnInfo.top - 9;
|
||||
});
|
||||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
@@ -44,13 +39,13 @@ const goBack = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view :style="{ paddingTop: capsuleHeight + 'px' }">
|
||||
<view :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<AppBackground :type="bgType" :bgColor="bgColor" />
|
||||
<Header v-if="!isHome" :title="title" :onBack="onBack" />
|
||||
<view
|
||||
class="content"
|
||||
:style="{
|
||||
height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px)`,
|
||||
height: `calc(100vh - ${statusBarHeight + (isHome ? 0 : 50)}px)`,
|
||||
overflow,
|
||||
}"
|
||||
>
|
||||
|
||||
+4
-102
@@ -1,17 +1,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import Avatar from "@/components/Avatar.vue";
|
||||
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
const store = useStore();
|
||||
const { user } = storeToRefs(store);
|
||||
|
||||
const currentPage = computed(() => {
|
||||
const pages = getCurrentPages();
|
||||
return pages[pages.length - 1].route;
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
@@ -38,37 +28,14 @@ const onClick = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const toUserPage = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/profile",
|
||||
});
|
||||
};
|
||||
|
||||
const signin = () => {
|
||||
if (!user.value.id) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/signin",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const pointBook = ref(null);
|
||||
const heat = ref(0);
|
||||
|
||||
const updateHot = (value) => {
|
||||
heat.value = value;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const pages = getCurrentPages();
|
||||
const currentPage = pages[pages.length - 1];
|
||||
if (currentPage.route === "pages/edit") {
|
||||
const currentPage = pages[pages.length - 1].route;
|
||||
if (currentPage === "pages/edit") {
|
||||
pointBook.value = uni.getStorageSync("point-book");
|
||||
}
|
||||
uni.$on("update-hot", updateHot);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
uni.$off("update-hot", updateHot);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -77,32 +44,6 @@ onBeforeUnmount(() => {
|
||||
<view class="back-btn" @click="onClick">
|
||||
<image src="../static/back-black.png" mode="widthFix" />
|
||||
</view>
|
||||
<view :style="{ color: '#000' }">
|
||||
<view
|
||||
v-if="currentPage === 'pages/index'"
|
||||
class="user-header"
|
||||
@click="signin"
|
||||
>
|
||||
<block v-if="user.id">
|
||||
<Avatar
|
||||
:src="user.avatar"
|
||||
:onClick="toUserPage"
|
||||
:size="40"
|
||||
borderColor="#333"
|
||||
/>
|
||||
<text class="truncate">{{ user.nickName }}</text>
|
||||
<image
|
||||
v-if="heat"
|
||||
:src="`../static/hot${heat}.png`"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image src="../static/user-icon.png" mode="widthFix" />
|
||||
<text>新来的弓箭手你好呀~</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="pointBook" class="point-book-info">
|
||||
<text>{{ pointBook.bowType.name }}</text>
|
||||
<text>{{ pointBook.distance }} 米</text>
|
||||
@@ -129,8 +70,7 @@ onBeforeUnmount(() => {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 72vw;
|
||||
height: 50px;
|
||||
/* margin-top: var(--status-bar-height); */
|
||||
height: 100rpx;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.container > view:nth-child(2) {
|
||||
@@ -146,23 +86,6 @@ onBeforeUnmount(() => {
|
||||
height: 22px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.first-try-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff6;
|
||||
font-size: 14px;
|
||||
}
|
||||
.first-try-steps > text {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.first-try-steps > text:nth-child(2),
|
||||
.first-try-steps > text:nth-child(4) {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.current-step {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
.point-book-info {
|
||||
color: #333;
|
||||
position: fixed;
|
||||
@@ -178,25 +101,4 @@ onBeforeUnmount(() => {
|
||||
padding: 5px 10px;
|
||||
margin: 3px;
|
||||
}
|
||||
.user-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.user-header > image:first-child {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #333;
|
||||
}
|
||||
.user-header > image:last-child {
|
||||
width: 36rpx;
|
||||
}
|
||||
.user-header > text:nth-child(2) {
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
margin: 0 20rpx;
|
||||
max-width: 300rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
const props = defineProps({
|
||||
selected: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
onClick: {
|
||||
type: Function,
|
||||
default: (index) => {},
|
||||
},
|
||||
});
|
||||
const isIOS = computed(() => {
|
||||
const systemInfo = uni.getDeviceInfo();
|
||||
return systemInfo.osName === "ios";
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<view class="tabbar" :style="{ paddingBottom: isIOS ? '30rpx' : '0rpx' }">
|
||||
<view @click="onClick(0)">
|
||||
<image
|
||||
:src="`../static/tab-score${selected === 0 ? '-s' : ''}.png`"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<text :style="{ color: selected === 0 ? '#333' : '#999999' }">Score</text>
|
||||
</view>
|
||||
<view @click="onClick(1)">
|
||||
<image
|
||||
:src="`../static/tab-history${selected === 1 ? '-s' : ''}.png`"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<text :style="{ color: selected === 1 ? '#333' : '#999999' }"
|
||||
>History</text
|
||||
>
|
||||
</view>
|
||||
<view @click="onClick(2)">
|
||||
<image
|
||||
:src="`../static/tab-user${selected === 2 ? '-s' : ''}.png`"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<text :style="{ color: selected === 2 ? '#333' : '#999999' }"
|
||||
>Profile</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tabbar {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 100vw;
|
||||
height: 100rpx;
|
||||
}
|
||||
.tabbar > view {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.tabbar > view > image {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user