feat: 愈心魔方 Tab 与首页入口改版
新增愈心魔方 WebView Tab、首页魔方横幅与四宫格入口(心理测评/咨询/情绪压力评估/就医保障);H5 地址配置于 yxgConfig.js。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+152
-15
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user