92 lines
1.9 KiB
Vue
92 lines
1.9 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
const isIos = ref(true);
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
onBack: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const onClick = () => {
|
|
if (props.onBack) props.onBack();
|
|
else uni.navigateBack();
|
|
};
|
|
|
|
onMounted(() => {
|
|
const deviceInfo = uni.getDeviceInfo();
|
|
isIos.value = deviceInfo.osName === "ios";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view class="container" :style="{ paddingTop: isIos ? '38px' : '25px' }">
|
|
<view class="back-btn" @click="onClick">
|
|
<image src="../static/back.png" mode="widthFix" />
|
|
</view>
|
|
<view>
|
|
<block v-if="'凹造型，感知距离，小试牛刀'.indexOf(title) === -1">
|
|
<text>{{ title }}</text>
|
|
</block>
|
|
<block v-else>
|
|
<view class="first-try-steps">
|
|
<text :class="title === '凹造型' ? 'current-step' : ''">凹造型</text>
|
|
<text>-</text>
|
|
<text :class="title === '感知距离' ? 'current-step' : ''"
|
|
>感知距离</text
|
|
>
|
|
<text>-</text>
|
|
<text :class="title === '小试牛刀' ? 'current-step' : ''"
|
|
>小试牛刀</text
|
|
>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 72vw;
|
|
height: 60px;
|
|
/* margin-top: var(--status-bar-height); */
|
|
padding-left: 15px;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
}
|
|
.back-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.back-btn > image {
|
|
width: 22px;
|
|
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;
|
|
}
|
|
</style>
|