jackyu66gitandCursor
dee8370c06
测评页背景 PNG 转 JPG；同步 unpackage 静态目录，修复 dev 包仍用旧 360KB 魔方图。 Co-authored-by: Cursor <cursoragent@cursor.com>
360 lines
9.2 KiB
Vue
360 lines
9.2 KiB
Vue
<template>
|
||
<view class="content">
|
||
<myNav :title="title" bgColor="nonoe" titleColor="#614D49" :backIcon="true" :backHome="false" :flex="false">
|
||
</myNav>
|
||
|
||
<view style="display: flex;flex-direction: column;align-items: center;overflow-y: auto; ">
|
||
<view style="height: 100%;padding-bottom: 220rpx;display: flex;flex-direction: column;align-items: center;">
|
||
|
||
|
||
<image src="/static/n-test/test-bg-n.jpg" style="width: 750rpx;height: 420rpx;"></image>
|
||
<!-- 评测卡片 -->
|
||
<view class="card">
|
||
<view style="border-radius: 10px 10px 0px 0px;background: linear-gradient(180deg, #FFE7D9 0%, rgba(255, 255, 255, 0) 98%);
|
||
height: 60rpx;width: 670rpx;opacity: 1;">
|
||
<image :src="showData.testPic" style="width: 88rpx;height: 88rpx;border-radius: 558rpx;
|
||
border: 8rpx solid #FFFFFF;margin-left: 92rpx;margin-top: -48rpx;"></image>
|
||
</view>
|
||
<view style="padding-left: 40rpx;padding-right: 40rpx;display: flex;flex-direction: column;">
|
||
<text class="card-title">{{showData.testName}}</text>
|
||
<view style="display: flex;align-items: center;">
|
||
<image src="/static/n-test/hz-icon.png" style="width: 48rpx;height: 48rpx;"></image>
|
||
<text class="card-subtitle">{{showData.subTitle}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="stats">
|
||
<!-- <image src="@/static/fire-icon.png" class="fire-icon"></image> -->
|
||
<image src="/static/n-test/icon1.png" style="width: 14rpx;height: 18rpx;margin-right: 10rpx;">
|
||
</image>
|
||
<text v-if="showData.questionDetailVOList&&showData.questionDetailVOList.length>0"
|
||
class="stats-text"
|
||
style="margin-right: 50rpx;">{{showData.questionDetailVOList.length}}道精选题</text>
|
||
<image src="/static/n-test/icon2.png" style="width: 16.54rpx;height: 17.5rpx;margin-right: 10rpx;">
|
||
</image>
|
||
<text class="stats-text">{{showData.showNum}}人已测</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view style="display: flex;justify-content: center;height: 284rpx;">
|
||
<view class="introduce-card" style="">
|
||
<view style="width: 670rpx;height: 60rpx;
|
||
border-radius: 10rpx 10rpx 0rpx 0rpx;opacity: 1;
|
||
background: linear-gradient(180deg, #DEE8FF 0%, rgba(255, 255, 255, 0) 98%);">
|
||
</view>
|
||
<view style="display: flex;flex-direction: column;overflow-y: auto;margin-top: -28rpx;">
|
||
<view style="display: flex;padding-left: 40rpx;padding-right: 40rpx;flex-direction: column;">
|
||
<view style="display: flex;align-items: center;">
|
||
<view style="width: 12rpx;height: 38rpx;background: #99B1FF;border-radius: 180rpx;">
|
||
</view>
|
||
<text style="color: #614D49;margin-left: 6rpx;
|
||
font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
|
||
font-size: 40rpx;
|
||
line-height: normal;
|
||
text-align: center;
|
||
letter-spacing: 0px;">
|
||
测评介绍
|
||
</text>
|
||
</view>
|
||
<rich-text class="rich-text" :nodes="showData.testIntroduction"></rich-text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="display: flex;justify-content: center;margin-top: 20rpx;height: 284rpx;">
|
||
<view class="introduce-card" style="">
|
||
<view style="width: 670rpx;height: 60rpx;
|
||
border-radius: 10rpx 10rpx 0rpx 0rpx;opacity: 1;
|
||
background: linear-gradient(180deg, #DEE8FF 0%, rgba(255, 255, 255, 0) 98%);">
|
||
</view>
|
||
<view style="display: flex;flex-direction: column;overflow-y: auto;margin-top: -28rpx;">
|
||
<view style="display: flex;padding-left: 40rpx;padding-right: 40rpx;flex-direction: column;">
|
||
<view style="display: flex;align-items: center;">
|
||
<view style="width: 12rpx;height: 38rpx;background: #99B1FF;border-radius: 180rpx;">
|
||
</view>
|
||
<text style="color: #614D49;margin-left: 6rpx;
|
||
font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
|
||
font-size: 40rpx;
|
||
line-height: normal;
|
||
text-align: center;
|
||
letter-spacing: 0px;">
|
||
测评须知
|
||
</text>
|
||
</view>
|
||
<rich-text class="rich-text" :nodes="showData.testNotice"></rich-text>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 立即测评按钮 -->
|
||
<view class="button-container">
|
||
<button class="start-btn" @click="startTest"><text class="btn-text">立即测评</text></button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import myNav from '@/components/my-nav.vue'
|
||
import {
|
||
urls
|
||
} from '@/util/apiUrl.js'
|
||
import dohttp from '@/util/requestConfig.js'
|
||
const title = ref("")
|
||
const showData = ref({})
|
||
onLoad((option) => {
|
||
|
||
if (option && option.id) {
|
||
|
||
dohttp.post(urls.getSingleDetail + "?studyId=" + option.id).then((result) => {
|
||
|
||
if (result) {
|
||
if (result.totalNum && Number(result.totalNum) >= 10000) {
|
||
result.showNum = (Number(result.totalNum) / 10000).toFixed(1) + "W"
|
||
} else {
|
||
result.showNum = result.totalNum
|
||
}
|
||
|
||
title.value = result.testName
|
||
showData.value = result
|
||
}
|
||
|
||
})
|
||
}
|
||
//计算滑动块的高度
|
||
|
||
let sysInfo = uni.getSystemInfoSync(); //状态栏的高度
|
||
// 胶囊位置信息
|
||
let rect = uni.getMenuButtonBoundingClientRect();
|
||
|
||
// 导航栏高度
|
||
let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
|
||
// 自定义导航栏的高度
|
||
let topHeight = sysInfo.statusBarHeight + navBarHeight;
|
||
|
||
|
||
const windowWidth = sysInfo.windowWidth; // 可用窗口宽度（px）
|
||
|
||
const bottomPx = 184 / (750 / windowWidth)
|
||
|
||
|
||
let contextHeight = sysInfo.screenHeight - topHeight - bottomPx
|
||
|
||
console.log("contextHeightcontextHeightcontextHeightcontextHeight", contextHeight)
|
||
|
||
|
||
})
|
||
|
||
const onShareAppMessage = () => {
|
||
return {
|
||
title: '快来体验一下吧~',
|
||
path: '/pages/index/index', // 分享的路径
|
||
};
|
||
};
|
||
|
||
const onShareTimeline = () => {
|
||
return {
|
||
title: '快来体验一下吧~',
|
||
query: 'id=31', // 分享路径的参数
|
||
};
|
||
};
|
||
|
||
const startTest = () => {
|
||
|
||
let data = {
|
||
data: showData.value.questionDetailVOList,
|
||
showTitle: showData.value.testName,
|
||
testPic: showData.value.testPic,
|
||
testId: showData.value.id
|
||
}
|
||
dohttp.navigateTo("/pages/show-question/show-question", data)
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #f9f8f8;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-family: SourceHanSans;
|
||
|
||
}
|
||
/* 评测卡片 */
|
||
.card {
|
||
background: #FFFFFF;
|
||
margin: -26rpx 40rpx 20rpx 40rpx;
|
||
border-radius: 10rpx;
|
||
height: 284rpx;
|
||
width: 670rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* padding-left: 40rpx;
|
||
padding-right: 40rpx; */
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 40rpx;
|
||
letter-spacing: 0px;
|
||
font-variation-settings: "opsz" auto;
|
||
color: #614D49;
|
||
margin-top: 12rpx;
|
||
font-family: SourceHanSansBold;
|
||
}
|
||
|
||
.card-subtitle {
|
||
font-family: SourceHanSans;
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
line-height: normal;
|
||
text-align: center;
|
||
letter-spacing: 0px;
|
||
|
||
font-variation-settings: "opsz" auto;
|
||
/* 正文色/正文辅助4 */
|
||
color: #9B918C;
|
||
}
|
||
|
||
.stats {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-bottom: 40rpx;
|
||
color: #909099;
|
||
margin-top: auto;
|
||
font-family: SourceHanSansBold;
|
||
font-size: 20rpx;
|
||
line-height: normal;
|
||
text-align: center;
|
||
letter-spacing: 0px;
|
||
font-variation-settings: "opsz" auto;
|
||
padding-left: 40rpx;
|
||
padding-right: 40rpx;
|
||
}
|
||
|
||
.fire-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.stats-text {
|
||
font-size: 22rpx;
|
||
color: #909099;
|
||
}
|
||
|
||
/* 评测介绍 & 评测须知 */
|
||
.section {
|
||
background: white;
|
||
margin: 20rpx 30rpx;
|
||
padding: 20rpx 40rpx;
|
||
margin-top: 5rpx;
|
||
border-radius: 10rpx;
|
||
box-shadow: 0rpx 8rpx 16rpx rgba(0, 0, 0, 0.05);
|
||
height: 210rpx;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.blue-bar {
|
||
width: 12rpx;
|
||
height: 34rpx;
|
||
background-color: #7f75ff;
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 36rpx;
|
||
font-family: SourceHanSansBold;
|
||
color: #333;
|
||
}
|
||
|
||
.bold {
|
||
font-family: SourceHanSansBold;
|
||
}
|
||
|
||
.description {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
/* 按钮 */
|
||
.button-container {
|
||
bottom: 0;
|
||
position: fixed;
|
||
height: 184rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 4rpx 12rpx 0px rgba(67, 33, 26, 0.3);
|
||
}
|
||
|
||
.start-btn {
|
||
margin-top: 24rpx;
|
||
width: 550rpx;
|
||
height: 96rpx;
|
||
border-radius: 2002rpx;
|
||
opacity: 1;
|
||
|
||
/* 自动布局 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 4rpx 20rpx;
|
||
|
||
background: linear-gradient(180deg, #FF9079 0%, #F37155 100%);
|
||
}
|
||
|
||
.btn-text {
|
||
|
||
/* 按钮/按钮文本大号 */
|
||
/* 样式描述：常规大按钮 */
|
||
font-family: SourceHanSansBold;
|
||
font-size: 36rpx;
|
||
line-height: normal;
|
||
letter-spacing: 0px;
|
||
|
||
/* 正文色/正文色 */
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* 评测卡片 */
|
||
.introduce-card {
|
||
width: 670rpx;
|
||
height: 284rpx;
|
||
border-radius: 32rpx;
|
||
background: #FFFFFF;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
}
|
||
|
||
.rich-text {
|
||
margin-top: 20rpx;
|
||
font-family: Source Han Sans;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
line-height: normal;
|
||
letter-spacing: 0rpx;
|
||
|
||
font-variation-settings: "opsz" auto;
|
||
/* 正文色/正文辅助4 */
|
||
color: #606271;
|
||
}
|
||
</style> |