feat: 愈心魔方 Tab 与首页入口改版

新增愈心魔方 WebView Tab、首页魔方横幅与四宫格入口(心理测评/咨询/情绪压力评估/就医保障);H5 地址配置于 yxgConfig.js。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
2026-08-25 00:41:14 +08:00
co-authored by Cursor
parent c3c9db3151
commit 69d9825b63
14 changed files with 227 additions and 16 deletions
+152 -15
View File
@@ -20,6 +20,17 @@
</swiper>
</uni-swiper-dot>
</view>
<view class="yxg-magic-entry" @click="toYxgMagic">
<view class="yxg-magic-banner-wrap">
<image
class="yxg-magic-banner"
src="/static/n-main/yxg-magic-cube.jpg"
mode="widthFix"
></image>
<text class="yxg-magic-title">愈心魔方</text>
</view>
<text class="yxg-magic-desc">数字魔方亲子魔方艺术魔方急救魔方情感魔方成长魔方解构魔方</text>
</view>
<view
style="width: 670rpx;display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
<!-- 左边部分 -->
@@ -27,16 +38,19 @@
background: linear-gradient(180deg, #FFE6DF 2%, #FCF3EA 100%);
box-sizing: border-box;
display: flex;
align-items: center;
padding-right: 36rpx;
" @click="toTestList">
<view style="display: flex;flex-direction: column;margin-top: 26rpx;">
<text style="margin-left: 26rpx;color: #614D49;
<view style="display: flex;flex-direction: column;flex: 1;min-width: 0;justify-content: center;margin-left: 20rpx;">
<text style="color: #614D49;
font-family: SourceHanSansBold;font-variation-settings: 'opsz' auto;
font-size: 30rpx;
line-height: normal;
letter-spacing: 0px;">
line-height: 1.2;
letter-spacing: 0px;
white-space: nowrap;">
心理测评
</text>
<text style="margin-left: 26rpx;color: #B88973;
<text style="margin-top: 8rpx;color: #B88973;
font-family: SourceHanSans;ont-variation-settings: 'opsz' auto;
font-size: 24rpx;
font-weight: normal;
@@ -45,24 +59,27 @@
探寻自我
</text>
</view>
<image src="/static/n-main/left.png"
style="margin-top:50rpx;width: 90rpx;margin-left: 70rpx;height: 90rpx;"></image>
<image src="/static/n-main/icon-emotion-assess.png"
style="flex-shrink: 0;width: 90rpx;height: 90rpx;margin-left: 6rpx;"></image>
</view>
<!-- 右边部分 -->
<view style="width: 324rpx;height: 168rpx;border-radius: 10rpx;
background: linear-gradient(180deg, #FFE6DF 2%, #FCF3EA 100%);
box-sizing: border-box;
display: flex;
align-items: center;
padding-right: 36rpx;
" @click="toZxList">
<view style="display: flex;flex-direction: column;margin-top: 26rpx;">
<text style="margin-left: 26rpx;color: #614D49;
<view style="display: flex;flex-direction: column;flex: 1;min-width: 0;justify-content: center;margin-left: 20rpx;">
<text style="color: #614D49;
font-family: SourceHanSansBold;font-variation-settings: 'opsz' auto;
font-size: 30rpx;
line-height: normal;
letter-spacing: 0px;">
letter-spacing: 0px;
white-space: nowrap;">
心理咨询
</text>
<text style="margin-left: 26rpx;color: #B88973;
<text style="margin-top: 8rpx;color: #B88973;
font-family: SourceHanSans;ont-variation-settings: 'opsz' auto;
font-size: 24rpx;
font-weight: normal;
@@ -71,8 +88,67 @@
严选咨询师
</text>
</view>
<image src="/static/n-main/right.png"
style="margin-top:58rpx;width: 82rpx;margin-left: 70rpx;height: 82rpx;"></image>
<image src="/static/n-main/icon-consult.png"
style="flex-shrink: 0;width: 82rpx;height: 82rpx;margin-left: 6rpx;"></image>
</view>
</view>
<view
style="width: 670rpx;display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
<view style="width: 324rpx;height: 168rpx;border-radius: 10rpx;
background: linear-gradient(180deg, #FFE6DF 2%, #FCF3EA 100%);
box-sizing: border-box;
display: flex;
align-items: center;
padding-right: 36rpx;
" @click="toBioelectric">
<view style="display: flex;flex-direction: column;flex: 1;min-width: 0;justify-content: center;margin-left: 20rpx;">
<text style="color: #614D49;
font-family: SourceHanSansBold;font-variation-settings: 'opsz' auto;
font-size: 30rpx;
line-height: normal;
letter-spacing: 0px;
white-space: nowrap;">
情绪压力评估
</text>
<text style="margin-top: 8rpx;color: #B88973;
font-family: SourceHanSans;ont-variation-settings: 'opsz' auto;
font-size: 24rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0px;">
脑机检测
</text>
</view>
<image src="/static/n-main/icon-bioelectric.png"
style="flex-shrink: 0;width: 90rpx;height: 90rpx;margin-left: 6rpx;"></image>
</view>
<view style="width: 324rpx;height: 168rpx;border-radius: 10rpx;
background: linear-gradient(180deg, #FFE6DF 2%, #FCF3EA 100%);
box-sizing: border-box;
display: flex;
align-items: center;
padding-right: 36rpx;
" @click="toMedicalService">
<view style="display: flex;flex-direction: column;flex: 1;min-width: 0;justify-content: center;margin-left: 20rpx;">
<text style="color: #614D49;
font-family: SourceHanSansBold;font-variation-settings: 'opsz' auto;
font-size: 30rpx;
line-height: normal;
letter-spacing: 0px;
white-space: nowrap;">
就医保障
</text>
<text style="margin-top: 8rpx;color: #B88973;
font-family: SourceHanSans;ont-variation-settings: 'opsz' auto;
font-size: 24rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0px;">
绿色就医
</text>
</view>
<image src="/static/n-main/icon-medical.png"
style="flex-shrink: 0;width: 82rpx;height: 82rpx;margin-left: 6rpx;"></image>
</view>
</view>
@@ -622,6 +698,26 @@
"animationType": "pop-in"
})
}
const toYxgMagic = () => {
uni.switchTab({
url: '/pages/yxg-magic/index'
})
}
const toMedicalService = () => {
uni.showToast({
title: '就医保障即将上线',
icon: 'none'
})
}
const toBioelectric = () => {
uni.showToast({
title: '情绪压力评估即将上线',
icon: 'none'
})
}
</script>
<style scoped>
@@ -640,13 +736,54 @@
background-position: center;
background-repeat: no-repeat;
width: 750rpx;
height: 660rpx;
min-height: 660rpx;
padding-bottom: 24rpx;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: flex-start;
align-items: center;
}
.yxg-magic-entry {
width: 670rpx;
margin-top: 20rpx;
}
.yxg-magic-banner-wrap {
position: relative;
border-radius: 10rpx;
overflow: hidden;
}
.yxg-magic-banner {
width: 670rpx;
display: block;
border-radius: 10rpx;
}
.yxg-magic-title {
position: absolute;
top: 20rpx;
left: 24rpx;
color: #ffffff;
font-family: SourceHanSansBold;
font-size: 32rpx;
line-height: 1.2;
z-index: 1;
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.28);
}
.yxg-magic-desc {
display: block;
margin-top: 12rpx;
padding: 0 4rpx;
color: #9B918C;
font-family: SourceHanSans;
font-size: 24rpx;
line-height: 1.55;
letter-spacing: 0.5rpx;
}
.choce-view {
display: flex;
+13
View File
@@ -0,0 +1,13 @@
<template>
<web-view :src="url"></web-view>
</template>
<script setup>
const url = ref('')
onLoad((options) => {
if (options.url) {
url.value = decodeURIComponent(options.url)
}
})
</script>
+9
View File
@@ -0,0 +1,9 @@
<template>
<web-view :src="h5Url"></web-view>
</template>
<script setup>
import { YXG_H5_HOME_URL } from '@/util/yxgConfig.js'
const h5Url = YXG_H5_HOME_URL
</script>