bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: test popup not done

Browse Source
This commit is contained in:
刘杰
2025-09-30 14:07:42 +08:00
parent 9fef267cf6
commit 4b31141287
9 changed files with 306 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/NTRPTestEntryCard/index.module.scss Normal file
View File

@@ -0,0 +1,138 @@
@mixin commonCardStyle {
width: 100%;
padding: 16px;
box-sizing: border-box;
border-radius: 20px;
border: 0.5px solid rgba(0, 0, 0, 0.08);
background: linear-gradient(180deg, #BFFFEF 0%, #F2FFFC 100%), var(--Backgrounds-Primary, #FFF);
display: flex;
align-items: center;
justify-content: space-between;
}
.higher {
height: 100px;
@include commonCardStyle();
}
.lower {
height: 80px;
@include commonCardStyle();
}
.desc {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 7px;
.title {
color: #2A4D44;
font-family: "Noto Sans SC";
font-size: 16px;
font-style: normal;
font-weight: 900;
line-height: 24px;
.colorTip {
color: #00E5AD;
font-family: "Noto Sans SC";
font-size: 16px;
font-style: normal;
font-weight: 900;
line-height: 24px;
}
.strongTip {
color: #00E5AD;
font-family: "Noto Sans SC";
font-size: 16px;
font-style: normal;
font-weight: 900;
line-height: 24px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
}
}
.entry {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
color: #5CA693;
font-feature-settings: 'liga' off, 'clig' off;
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: normal;
.entryIcon {
width: 12px;
height: 12px;
}
}
@mixin commonAvatarStyle($multiple: 1) {
.avatar {
flex: 0 0 auto;
width: calc(100px * $multiple);
height: calc(100px * $multiple);
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 50%;
border: 1px solid #efefef;
overflow: hidden;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 8px 20px 0 rgba(0, 0, 0, 0.12);
.avatarUrl {
width: calc(90px * $multiple);
height: calc(90px * $multiple);
border-radius: 50%;
border: 1px solid #efefef;
}
}
.addonImage {
flex: 0 0 auto;
width: calc(88px * $multiple);
height: calc(88px * $multiple);
transform: rotate(8deg);
flex-shrink: 0;
aspect-ratio: 1/1;
border-radius: calc(20px * $multiple);
border: 4px solid #FFF;
background: linear-gradient(0deg, rgba(89, 255, 214, 0.20) 0%, rgba(89, 255, 214, 0.20) 100%), #FFF;
box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin-left: calc(-1 * 20px * $multiple);
.docImage {
width: calc(48px * $multiple);
height: calc(48px * $multiple);
transform: rotate(-7deg);
flex-shrink: 0;
}
}
}
.avatarWrap {
display: flex;
align-items: center;
justify-content: flex-start;
@include commonAvatarStyle(0.5);
}

82
src/components/NTRPTestEntryCard/index.tsx Normal file
View File

@@ -0,0 +1,82 @@
import React, { useEffect } from "react";
import { View, Image, Text } from "@tarojs/components";
import { useUserInfo, useUserActions } from "@/store/userStore";
import DocCopy from "@/static/ntrp/ntrp_doc_copy.svg";
import ArrowRight from "@/static/ntrp/ntrp_arrow_right_color.svg";
import styles from "./index.module.scss";
function NTRPTestEntryCard(props) {
const userInfo = useUserInfo();
// const { fetchUserInfo } = useUserActions()
// useEffect(() => {
// fetchUserInfo()
// }, [])
const { type } = props;
return type !== "list" ? (
<View className={styles.higher}>
<View className={styles.desc}>
<View>
<View className={styles.title}>
<Text>快速测一测✏️</Text>
</View>
<View className={styles.title}>
<Text>你的</Text>
<Text className={styles.colorTip}> (</Text>
<Text className={styles.strongTip}>NTRP</Text>
<Text className={styles.colorTip}>) </Text>
<Text>水平?</Text>
</View>
</View>
<View className={styles.entry}>
<Text>快速测试</Text>
<Image className={styles.entryIcon} src={ArrowRight} />
</View>
</View>
<View className={styles.avatarWrap}>
<View className={styles.avatar}>
<Image
className={styles.avatarUrl}
src={userInfo.avatar_url}
mode="aspectFit"
/>
</View>
{/* avatar side */}
<View className={styles.addonImage}>
<Image className={styles.docImage} src={DocCopy} mode="aspectFill" />
</View>
</View>
</View>
) : (
<View className={styles.lower}>
<View className={styles.desc}>
<View className={styles.title}>
<Text>不知道自己的</Text>
<Text className={styles.colorTip}> (</Text>
<Text className={styles.strongTip}>NTRP</Text>
<Text className={styles.colorTip}>) </Text>
<Text>水平?</Text>
</View>
<View className={styles.entry}>
<Text>快速测试</Text>
<Image className={styles.entryIcon} src={ArrowRight} />
</View>
</View>
<View className={styles.avatarWrap}>
<View className={styles.avatar}>
<Image
className={styles.avatarUrl}
src={userInfo.avatar_url}
mode="aspectFit"
/>
</View>
{/* avatar side */}
<View className={styles.addonImage}>
<Image className={styles.docImage} src={DocCopy} mode="aspectFill" />
</View>
</View>
</View>
);
}
export default NTRPTestEntryCard;