120 lines
2.1 KiB
Vue
120 lines
2.1 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="wrap">
|
||
<view class="icon-bg">
|
||
<FaIcon name="screwdriver-wrench" color="#2563eb" :size="44" />
|
||
</view>
|
||
<text class="title">功能开发中</text>
|
||
<text v-if="name" class="name">{{ name }}</text>
|
||
<text class="desc">该功能正在开发中，暂未开放使用，敬请期待</text>
|
||
<view class="btn" @tap="goBack">
|
||
<text class="btn-text">返回</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
|
||
const name = ref('')
|
||
|
||
onLoad((options) => {
|
||
const raw = (options && options.t) || ''
|
||
try {
|
||
name.value = decodeURIComponent(raw)
|
||
} catch (e) {
|
||
name.value = raw
|
||
}
|
||
uni.setNavigationBarTitle({ title: name.value || '功能开发中' })
|
||
})
|
||
|
||
function goBack() {
|
||
const pages = getCurrentPages()
|
||
if (pages.length > 1) {
|
||
uni.navigateBack()
|
||
} else {
|
||
uni.reLaunch({ url: '/pages/nav/nav' })
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/src/styles/page-common.scss';
|
||
|
||
.page {
|
||
height: 100vh;
|
||
background: $color-bg-page;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20rpx;
|
||
padding: 0 80rpx;
|
||
}
|
||
|
||
.icon-bg {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 50%;
|
||
background: $color-primary-bg;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 16rpx 40rpx rgba(37, 99, 235, 0.16);
|
||
}
|
||
|
||
.title {
|
||
margin-top: 16rpx;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: $color-text;
|
||
}
|
||
|
||
.name {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: $color-primary;
|
||
word-break: break-all;
|
||
text-align: center;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 26rpx;
|
||
color: $color-text-secondary;
|
||
text-align: center;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.btn {
|
||
margin-top: 32rpx;
|
||
min-width: 240rpx;
|
||
height: 84rpx;
|
||
padding: 0 40rpx;
|
||
border-radius: $radius-full;
|
||
background: $color-primary;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 10rpx 24rpx rgba(37, 99, 235, 0.28);
|
||
|
||
&:active {
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.btn-text {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
}
|
||
</style>
|