Skip to content

S
sdream-ai-fe
Commit 6384ebb2 by HoMeTown
Options

feat: 调整样式

parent 1a233366
Showing with 94 additions and 15 deletions
src/assets/bot.png
This diff was suppressed by a .gitattributes entry.
src/assets/botPop.png 0 → 100644
This diff was suppressed by a .gitattributes entry.
src/assets/svg/sayHi.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="143px" height="24px" viewBox="0 0 143 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Hi，我是得宝</title>
<defs>
<linearGradient x1="99.3558444%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#29B6FD" offset="0%"></stop>
<stop stop-color="#006CDF" offset="100%"></stop>
</linearGradient>
<path d="M4.4,20 L4.4,12.896 L10.856,12.896 L10.856,20 L14.816,20 L14.816,3.2 L10.856,3.2 L10.856,9.656 L4.4,9.656 L4.4,3.2 L0.44,3.2 L0.44,20 L4.4,20 Z M21.608,5.384 L21.608,1.544 L17.768,1.544 L17.768,5.384 L21.608,5.384 Z M21.608,20 L21.608,7.04 L17.768,7.04 L17.768,20 L21.608,20 Z M28.784,23.168 L31.808,16.064 L28.112,16.064 L25.976,23.168 L28.784,23.168 Z M69.944,22.64 L69.944,19.352 C68.536,18.776 67.384,18.032 66.488,17.12 C67.912,15.28 68.944,13.104 69.584,10.592 L69.584,10.592 L66.656,10.592 C66.288,12 65.68,13.304 64.832,14.504 C64.368,13.272 64.112,11.72 64.064,9.848 L64.064,9.848 L69.92,9.848 L69.92,6.848 L64.064,6.848 L64.064,0.8 L60.992,0.8 L60.992,6.848 L56.072,6.848 L56.072,4.136 C57.032,4.008 58.152,3.824 59.432,3.584 L59.432,3.584 L59.432,0.584 C55.88,1.224 52.44,1.544 49.112,1.544 L49.112,1.544 L49.112,4.544 C50.648,4.544 51.952,4.504 53.024,4.424 L53.024,4.424 L53.024,6.848 L48.32,6.848 L48.32,9.848 L53.024,9.848 L53.024,12.92 L48.32,13.88 L48.32,16.976 L53.024,16.016 L53.024,19.472 L49.832,19.472 L49.832,22.4 L56.072,22.4 L56.072,15.68 L59.84,14.912 L59.84,11.816 L56.072,12.584 L56.072,9.848 L60.992,9.848 C61.04,12.36 61.528,14.552 62.456,16.424 C61.208,17.4 59.696,18.176 57.92,18.752 L57.92,18.752 L57.92,22.064 C60.368,21.328 62.456,20.32 64.184,19.04 C65.656,20.704 67.576,21.904 69.944,22.64 L69.944,22.64 Z M69.536,5.48 L68.24,1.28 L65.288,1.28 L66.584,5.48 L69.536,5.48 Z M91.784,10.184 L91.784,0.992 L74.456,0.992 L74.456,10.184 L91.784,10.184 Z M88.688,4.544 L77.552,4.544 L77.552,3.488 L88.688,3.488 L88.688,4.544 Z M88.688,7.688 L77.552,7.688 L77.552,6.656 L88.688,6.656 L88.688,7.688 Z M75.872,22.4 C76.288,21.728 76.616,21.096 76.856,20.504 C77.592,21.144 78.42,21.592 79.34,21.848 C80.26,22.104 81.464,22.232 82.952,22.232 L82.952,22.232 L93.92,22.232 L93.92,19.4 L84.752,19.4 L84.752,17.744 L91.952,17.744 L91.952,15.056 L84.752,15.056 L84.752,13.736 L93.632,13.736 L93.632,11.072 L72.848,11.072 L72.848,13.736 L81.632,13.736 L81.632,19.352 C80.8,19.272 80.068,19.108 79.436,18.86 C78.804,18.612 78.216,18.248 77.672,17.768 C77.864,16.856 77.984,15.712 78.032,14.336 L78.032,14.336 L74.984,14.336 C74.936,15.872 74.7,17.292 74.276,18.596 C73.852,19.9 73.144,21.168 72.152,22.4 L72.152,22.4 L75.872,22.4 Z M96.08,10.136 C100.096,8.056 102.672,4.888 103.808,0.632 L103.808,0.632 L100.712,0.632 C99.864,3.032 98.32,4.952 96.08,6.392 L96.08,6.392 L96.08,10.136 Z M116.96,9.92 L116.96,1.016 L105.056,1.016 L105.056,9.92 L116.96,9.92 Z M113.84,4.448 L108.176,4.448 L108.176,3.368 L113.84,3.368 L113.84,4.448 Z M113.84,7.592 L108.176,7.592 L108.176,6.488 L113.84,6.488 L113.84,7.592 Z M101.864,22.52 L101.864,12.104 C103.032,10.584 103.88,8.888 104.408,7.016 L104.408,7.016 L101.144,7.016 C100.184,9.528 98.496,11.48 96.08,12.872 L96.08,12.872 L96.08,16.64 C97.04,16.16 97.928,15.632 98.744,15.056 L98.744,15.056 L98.744,22.52 L101.864,22.52 Z M116.144,22.4 L116.144,16.832 L118.16,16.832 L118.16,14.336 L116.144,14.336 L116.144,13.28 L117.488,13.28 L117.488,10.784 L104.528,10.784 L104.528,13.28 L113.072,13.28 L113.072,14.336 L104.048,14.336 L104.048,16.832 L113.072,16.832 L113.072,19.76 L110.864,19.76 L110.864,22.4 L116.144,22.4 Z M109.88,21.872 L108.2,17.48 L105.176,17.48 L106.856,21.872 L109.88,21.872 Z M123.32,6.272 L123.32,4.664 L138.92,4.664 L138.92,6.272 L142.04,6.272 L142.04,1.664 L132.704,1.664 L132.704,0.32 L129.536,0.32 L129.536,1.664 L120.2,1.664 L120.2,6.272 L123.32,6.272 Z M141.92,22.16 L141.92,19.136 L139.328,19.136 L138.44,16.688 L135.272,16.688 L136.16,19.136 L132.704,19.136 L132.704,15.608 L140.12,15.608 L140.12,12.632 L132.704,12.632 L132.704,9.968 L140.792,9.968 L140.792,6.992 L121.448,6.992 L121.448,9.968 L129.536,9.968 L129.536,12.632 L122.12,12.632 L122.12,15.608 L129.536,15.608 L129.536,19.136 L120.32,19.136 L120.32,22.16 L141.92,22.16 Z" id="path-2"></path>
</defs>
<g id="晓得---PC端页面-草稿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="机器人" transform="translate(-41.000000, -422.000000)" fill-rule="nonzero">
<g id="Hi，我是得宝" transform="translate(41.000000, 422.000000)">
<use fill="#1577C8" xlink:href="#path-2"></use>
<use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/pages/Home/components/QuestionList/QuestionList.tsx
...@@ -80,40 +80,40 @@ export const QuestionList: React.FC<QuestionListProps> = ({ dotColor, title, ico ...@@ -80,40 +80,40 @@ export const QuestionList: React.FC<QuestionListProps> = ({ dotColor, title, ico
<motion.li <motion.li
variants={item} variants={item}
> >
<Button disableRipple className="w-full bg-[#F7FCFF]"> <Button color="primary" variant="flat" className="w-full bg-[#F7FCFF] ">
<div className="w-full text-nowrap text-ellipsis overflow-hidden"> <div className="w-full text-nowrap text-ellipsis overflow-hidden text-[#ABB1B8]">
<span style={{ color: dotColor }}>·</span> <span style={{ color: dotColor }}>·</span>
<span className="text-[#27353c] ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span> <span className="ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
</div> </div>
</Button> </Button>
</motion.li> </motion.li>
<motion.li <motion.li
variants={item} variants={item}
> >
<Button disableRipple className="w-full bg-[#F7FCFF]"> <Button color="primary" variant="flat" className="w-full bg-[#F7FCFF] ">
<div className="w-full text-nowrap text-ellipsis overflow-hidden"> <div className="w-full text-nowrap text-ellipsis overflow-hidden text-[#ABB1B8]">
<span style={{ color: dotColor }}>·</span> <span style={{ color: dotColor }}>·</span>
<span className="text-[#27353c] ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span> <span className="ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
</div> </div>
</Button> </Button>
</motion.li> </motion.li>
<motion.li <motion.li
variants={item} variants={item}
> >
<Button disableRipple className="w-full bg-[#F7FCFF]"> <Button color="primary" variant="flat" className="w-full bg-[#F7FCFF] ">
<div className="w-full text-nowrap text-ellipsis overflow-hidden"> <div className="w-full text-nowrap text-ellipsis overflow-hidden text-[#ABB1B8]">
<span style={{ color: dotColor }}>·</span> <span style={{ color: dotColor }}>·</span>
<span className="text-[#27353c] ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span> <span className="ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
</div> </div>
</Button> </Button>
</motion.li> </motion.li>
<motion.li <motion.li
variants={item} variants={item}
> >
<Button disableRipple className="w-full bg-[#F7FCFF]"> <Button color="primary" variant="flat" className="w-full bg-[#F7FCFF] ">
<div className="w-full text-nowrap text-ellipsis overflow-hidden"> <div className="w-full text-nowrap text-ellipsis overflow-hidden text-[#ABB1B8]">
<span style={{ color: dotColor }}>·</span> <span style={{ color: dotColor }}>·</span>
<span className="text-[#27353c] ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span> <span className="ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
</div> </div>
</Button> </Button>
</motion.li> </motion.li>
......
src/pages/Home/components/WelcomeWord/WelcomeWord.module.less 0 → 100644
.eyesShadow {
box-shadow: 0px 0px 11px 3px rgba(255,255,255,0.6), inset 0px -1px 3px 0px rgba(160,211,255,0.6);
}
src/pages/Home/components/WelcomeWord/WelcomeWord.module.less.d.ts 0 → 100644
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
eyesShadow: string
}
declare const cssExports: CssExports
export default cssExports
src/pages/Home/components/WelcomeWord/WelcomeWord.tsx
import { Button } from '@nextui-org/react' import { Button } from '@nextui-org/react'
import type React from 'react' import type React from 'react'
import { motion, useAnimation } from 'framer-motion'
import { useEffect } from 'react'
import styles from './WelcomeWord.module.less'
import BotImg from '@/assets/bot.png' import BotImg from '@/assets/bot.png'
import BotPopImg from '@/assets/botPop.png'
import BotBgImg from '@/assets/botBg.png' import BotBgImg from '@/assets/botBg.png'
import SayHi from '@/assets/svg/sayHi.svg?react'
const BotEye: React.FC = () => {
const controls = useAnimation()
const blink = async () => {
await controls.start({ scaleY: 0.1, transition: { duration: 0.05 } })
await controls.start({ scaleY: 1, transition: { duration: 0.1 } })
}
useEffect(() => {
const blinkInterval = setInterval(() => {
blink()
}, 4000) // 每2秒眨一次眼
return () => clearInterval(blinkInterval)
}, [])
return (
<motion.div
className={`w-[10px] h-[17px] bg-white rounded-lg ${styles.eyesShadow}`}
style={{ transformOrigin: 'center' }}
animate={controls}
/>
)
}
const BotAnimateBox: React.FC = () => {
return (
<div className="w-[180px] absolute right-0 top-[-18px]">
<img className="w-full" src={BotImg} alt="" />
<motion.img
animate={{ y: '-4px', transition: { duration: 0.5, repeat: Infinity, repeatType: 'reverse', ease: 'easeInOut' } }}
initial={{ y: 0 }}
className="absolute right-0 top-[35px] w-[42px]"
src={BotPopImg}
alt=""
/>
<div className="eyes w-[43px] absolute flex justify-between left-[44px] top-[50px]">
<BotEye />
<BotEye />
</div>
</div>
)
}
export const WelcomeWord: React.FC = () => { export const WelcomeWord: React.FC = () => {
return ( return (
<div className="w-full h-auto flex-shrink-0 relative sm:w-[360px] sm:h-[276px]"> <div className="w-full h-auto flex-shrink-0 relative sm:w-[360px] sm:h-[276px]">
<img className="absolute z-[-1] top-0 left-0" src={BotBgImg} alt="" /> <img className="absolute z-[-1] top-0 left-0" src={BotBgImg} alt="" />
<img className="w-[180px] absolute right-0 top-[-18px]" src={BotImg} alt="" /> <BotAnimateBox />
<div className="relative z-[1] box-border px-[24px] pt-[68px]"> <div className="relative z-[1] box-border px-[24px] pt-[68px]">
<h3>Hi，我是得宝</h3> <SayHi />
<p className="text-[#27353C] text-[15px] mt-[24px] mb-[16px]">做为您的智能保险伙伴，您有各类专业相关的问题都可以抛给我哟~让我们互相帮助共同成长吧~</p> <p className="text-[#27353C] text-[15px] mt-[24px] mb-[16px]">做为您的智能保险伙伴，您有各类专业相关的问题都可以抛给我哟~让我们互相帮助共同成长吧~</p>
<Button className="bg-white text-[#20ABD9] font-medium">立即前往 ➔</Button> <Button className="bg-white text-[#20ABD9] font-medium rounded-[20px]">立即前往 ➔</Button>
</div> </div>
</div> </div>
) )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment