125 lines
2.1 KiB
Vue
125 lines
2.1 KiB
Vue
<template>
|
|
<view class="detail-page page-fade" :class="{ 'enter-active': enterActive }">
|
|
<view class="safe-top"></view>
|
|
<view class="page-body">
|
|
<view class="top-row">
|
|
<view class="back-btn" @click="goBack">
|
|
<uni-icons type="left" color="#2d3b50" :size="18" />
|
|
</view>
|
|
<text class="title">详情介绍</text>
|
|
</view>
|
|
|
|
<view class="content-card">
|
|
<text class="content-title">{{ title }}</text>
|
|
<text class="content-desc">{{ desc }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
enterActive: false,
|
|
title: '详情介绍',
|
|
desc: '暂无详细说明'
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
if (options && options.title) {
|
|
this.title = decodeURIComponent(options.title);
|
|
}
|
|
if (options && options.desc) {
|
|
this.desc = decodeURIComponent(options.desc);
|
|
}
|
|
},
|
|
onShow() {
|
|
this.playEnter();
|
|
},
|
|
methods: {
|
|
playEnter() {
|
|
this.enterActive = false;
|
|
setTimeout(() => {
|
|
this.enterActive = true;
|
|
}, 20);
|
|
},
|
|
goBack() {
|
|
uni.navigateBack();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.detail-page {
|
|
min-height: 100vh;
|
|
background: #f4f7fb;
|
|
}
|
|
|
|
.page-fade {
|
|
opacity: 0;
|
|
transform: translateY(8rpx);
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.page-fade.enter-active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.safe-top {
|
|
height: calc(var(--status-bar-height) + 12rpx);
|
|
}
|
|
|
|
.page-body {
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.top-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.back-btn {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 16rpx;
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 6rpx 16rpx rgba(35, 49, 73, 0.08);
|
|
}
|
|
|
|
.title {
|
|
margin-left: 16rpx;
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: #28364d;
|
|
}
|
|
|
|
.content-card {
|
|
margin-top: 24rpx;
|
|
padding: 26rpx;
|
|
border-radius: 20rpx;
|
|
background: #ffffff;
|
|
box-shadow: 0 8rpx 22rpx rgba(35, 49, 73, 0.08);
|
|
}
|
|
|
|
.content-title {
|
|
display: block;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #2c3a4f;
|
|
}
|
|
|
|
.content-desc {
|
|
display: block;
|
|
margin-top: 14rpx;
|
|
font-size: 26rpx;
|
|
line-height: 1.65;
|
|
color: #5f6f88;
|
|
}
|
|
</style>
|