UI调整
This commit is contained in:
@@ -115,6 +115,9 @@ defineProps({
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
transition: all 0.3s linear;
|
transition: all 0.3s linear;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
|
|||||||
@@ -35,7 +35,12 @@ const toUserPage = () => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="container" :style="{ width: containerWidth }">
|
<view class="container" :style="{ width: containerWidth }">
|
||||||
<Avatar :frame="true" :src="user.avatarUrl" :onClick="toUserPage" />
|
<Avatar
|
||||||
|
:frame="true"
|
||||||
|
:src="user.avatarUrl"
|
||||||
|
:onClick="toUserPage"
|
||||||
|
:size="42"
|
||||||
|
/>
|
||||||
<view class="user-details">
|
<view class="user-details">
|
||||||
<view class="user-name">
|
<view class="user-name">
|
||||||
<text>{{ user.nickName }}</text>
|
<text>{{ user.nickName }}</text>
|
||||||
@@ -60,12 +65,13 @@ const toUserPage = () => {
|
|||||||
src="../static/global-rank.png"
|
src="../static/global-rank.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
/>
|
/>
|
||||||
<text>本赛季全国</text>
|
<text>本赛季</text>
|
||||||
<text class="rank-number"
|
<text>暂未上榜</text>
|
||||||
|
<!-- <text class="rank-number"
|
||||||
>第<text :style="{ color: '#ffd700' }"
|
>第<text :style="{ color: '#ffd700' }"
|
||||||
>{{ user.points }}/{{ user.rankLvl }}</text
|
>{{ user.points }}/{{ user.rankLvl }}</text
|
||||||
>名</text
|
>名</text
|
||||||
>
|
> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -82,7 +88,7 @@ const toUserPage = () => {
|
|||||||
.user-details {
|
.user-details {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-left: 5px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-name {
|
.user-name {
|
||||||
@@ -92,7 +98,7 @@ const toUserPage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.user-name > text:first-child {
|
.user-name > text:first-child {
|
||||||
font-size: 16px;
|
font-size: 13px;
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -115,7 +121,7 @@ const toUserPage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.level-tag-first {
|
.level-tag-first {
|
||||||
width: 45px;
|
width: 40px;
|
||||||
background: #5f51ff;
|
background: #5f51ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -127,7 +133,7 @@ const toUserPage = () => {
|
|||||||
.level-tag,
|
.level-tag,
|
||||||
.rank-tag {
|
.rank-tag {
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
font-size: 10px;
|
font-size: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rank-tag {
|
.rank-tag {
|
||||||
@@ -156,6 +162,8 @@ const toUserPage = () => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
color: #b3b3b3;
|
color: #b3b3b3;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rank-info-image {
|
.rank-info-image {
|
||||||
|
|||||||
@@ -26,6 +26,7 @@ const stepButtonTexts = [
|
|||||||
"",
|
"",
|
||||||
"退出新手试炼",
|
"退出新手试炼",
|
||||||
];
|
];
|
||||||
|
const title = ref("新手试炼场");
|
||||||
const start = ref(false);
|
const start = ref(false);
|
||||||
const practiseResult = ref({});
|
const practiseResult = ref({});
|
||||||
const power = ref(0);
|
const power = ref(0);
|
||||||
@@ -68,12 +69,16 @@ onUnmounted(() => {
|
|||||||
const nextStep = async () => {
|
const nextStep = async () => {
|
||||||
if (step.value === 0) {
|
if (step.value === 0) {
|
||||||
step.value = 1;
|
step.value = 1;
|
||||||
|
title.value = "凹造型";
|
||||||
} else if (step.value === 1) {
|
} else if (step.value === 1) {
|
||||||
btnDisabled.value = true;
|
btnDisabled.value = true;
|
||||||
step.value = 2;
|
step.value = 2;
|
||||||
|
title.value = "感知距离";
|
||||||
} else if (step.value === 2) {
|
} else if (step.value === 2) {
|
||||||
step.value = 3;
|
step.value = 3;
|
||||||
|
title.value = "小试牛刀";
|
||||||
} else if (step.value === 3) {
|
} else if (step.value === 3) {
|
||||||
|
title.value = "新手试炼场";
|
||||||
scores.value = [];
|
scores.value = [];
|
||||||
await createPractise(total);
|
await createPractise(total);
|
||||||
step.value = 4;
|
step.value = 4;
|
||||||
@@ -96,9 +101,14 @@ const onClose = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container :bgType="1" title="新手试炼场">
|
<Container :bgType="1" :title="title">
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<Guide v-if="step !== 4" :tall="step === 2 || step === 5">
|
<Guide
|
||||||
|
v-if="step !== 4"
|
||||||
|
:tall="
|
||||||
|
(step === 1 && user.nickName.length > 6) || step === 2 || step === 5
|
||||||
|
"
|
||||||
|
>
|
||||||
<text v-if="step === 0">
|
<text v-if="step === 0">
|
||||||
hi,<text :style="{ color: '#fed847' }">{{ user.nickName }}</text>
|
hi,<text :style="{ color: '#fed847' }">{{ user.nickName }}</text>
|
||||||
,这是新人必刷小任务,0基础小白也能快速掌握弓箭技巧和游戏规则哦~:)
|
,这是新人必刷小任务,0基础小白也能快速掌握弓箭技巧和游戏规则哦~:)
|
||||||
|
|||||||
@@ -192,6 +192,7 @@ const backToHome = () => {
|
|||||||
width: 40%;
|
width: 40%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
margin: 35% 0;
|
||||||
}
|
}
|
||||||
.scan-code > view:first-child > image {
|
.scan-code > view:first-child > image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -270,6 +271,13 @@ const backToHome = () => {
|
|||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
.device-binded > view > text {
|
||||||
|
width: 120px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
.device-binded > image {
|
.device-binded > image {
|
||||||
width: 16vw;
|
width: 16vw;
|
||||||
margin: 0 20px;
|
margin: 0 20px;
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import Avatar from "@/components/Avatar.vue";
|
|||||||
import useStore from "@/store";
|
import useStore from "@/store";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const { user } = storeToRefs(store);
|
const { user, device } = storeToRefs(store);
|
||||||
const { updateUser } = store;
|
const { updateUser } = store;
|
||||||
|
|
||||||
const toOrderPage = () => {
|
const toOrderPage = () => {
|
||||||
@@ -17,6 +17,12 @@ const toOrderPage = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const toFristTryPage = () => {
|
const toFristTryPage = () => {
|
||||||
|
if (!device.value.deviceId) {
|
||||||
|
return uni.showToast({
|
||||||
|
title: "请先绑定设备",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
}
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: "/pages/first-try",
|
url: "/pages/first-try",
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user