完成:项目开发
This commit is contained in:
@@ -57,6 +57,13 @@ export default defineAppConfig({
|
|||||||
"detail"
|
"detail"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"root": "zzjy",
|
||||||
|
"pages": [
|
||||||
|
"index",
|
||||||
|
"detail"
|
||||||
|
]
|
||||||
|
},
|
||||||
],
|
],
|
||||||
window: {
|
window: {
|
||||||
backgroundTextStyle: 'dark',
|
backgroundTextStyle: 'dark',
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ const Index = () => {
|
|||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className={'flex flex-col justify-center items-center cursor-pointer'}
|
className={'flex flex-col justify-center items-center cursor-pointer'}
|
||||||
onClick={() => Taro.navigateTo({url: `./index?id=${item.navigationId}`})}
|
onClick={() => Taro.navigateTo({url: `/${item.model}/index?id=${item.navigationId}`})}
|
||||||
>
|
>
|
||||||
{/* 图片容器 */}
|
{/* 图片容器 */}
|
||||||
<div className={'w-full mb-2 flex justify-center bg-gray-50 rounded-lg'}>
|
<div className={'w-full mb-2 flex justify-center bg-gray-50 rounded-lg'}>
|
||||||
|
|||||||
@@ -102,8 +102,8 @@ const List = () => {
|
|||||||
}}>
|
}}>
|
||||||
<p className={'font-bold py-1'}>{item.title}</p>
|
<p className={'font-bold py-1'}>{item.title}</p>
|
||||||
<p className={'text-xs line-clamp-6'} style={{
|
<p className={'text-xs line-clamp-6'} style={{
|
||||||
width: '240px',
|
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
|
width: item.image ? '240px' : '100%',
|
||||||
}}>
|
}}>
|
||||||
{item.comments || '暂无'}
|
{item.comments || '暂无'}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -149,6 +149,108 @@ html {
|
|||||||
.message-text {
|
.message-text {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
|
|
||||||
|
.message-markdown {
|
||||||
|
// 通用Markdown样式
|
||||||
|
.markdown-paragraph {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-list-item,
|
||||||
|
.markdown-ordered-list-item {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-heading {
|
||||||
|
margin: 12px 0 6px 0;
|
||||||
|
|
||||||
|
&.markdown-h1 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.markdown-h2 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.markdown-h3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// AI消息特定样式
|
||||||
|
&.ai-markdown {
|
||||||
|
.markdown-code-block {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 8px;
|
||||||
|
margin: 8px 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-inline-code {
|
||||||
|
background-color: #f1f3f4;
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #d73a49;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-blockquote {
|
||||||
|
border-left: 3px solid #3498db;
|
||||||
|
padding-left: 8px;
|
||||||
|
margin: 8px 0;
|
||||||
|
background-color: rgba(52, 152, 219, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-link {
|
||||||
|
color: #3498db;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户消息特定样式
|
||||||
|
&.user-markdown {
|
||||||
|
.markdown-code-block {
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 8px;
|
||||||
|
margin: 8px 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-inline-code {
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-blockquote {
|
||||||
|
border-left: 3px solid rgba(255, 255, 255, 0.5);
|
||||||
|
padding-left: 8px;
|
||||||
|
margin: 8px 0;
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-link {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-bold {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.typing-cursor {
|
.typing-cursor {
|
||||||
@@ -194,10 +296,8 @@ html {
|
|||||||
|
|
||||||
.message-input {
|
.message-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 90px;
|
|
||||||
max-height: 120px;
|
|
||||||
padding: 10px 16px;
|
padding: 10px 16px;
|
||||||
border: 1px solid #e0e0e0;
|
border: 2px solid #424242;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
font-size: 1rem; // 使用 rem 单位
|
font-size: 1rem; // 使用 rem 单位
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
@@ -249,7 +349,7 @@ html {
|
|||||||
|
|
||||||
.stop-button {
|
.stop-button {
|
||||||
min-width: 60px;
|
min-width: 60px;
|
||||||
height: 40px;
|
height: 60px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
|
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
|
||||||
border: none;
|
border: none;
|
||||||
|
|||||||
@@ -1,11 +1,14 @@
|
|||||||
import {useEffect, useState, useRef} from "react";
|
import {useEffect, useState, useRef} from "react";
|
||||||
import {View, Textarea} from '@tarojs/components';
|
import {Textarea} from '@tarojs/components';
|
||||||
import Taro from '@tarojs/taro';
|
import Taro from '@tarojs/taro';
|
||||||
import {Button} from '@nutui/nutui-react-taro';
|
import {Button} from '@nutui/nutui-react-taro';
|
||||||
import {User, ArrowUp, Home} from '@nutui/icons-react-taro';
|
import {User, Home} from '@nutui/icons-react-taro';
|
||||||
import {sendAiMessage, stopAiMessage} from '@/api/ai';
|
import {sendAiMessage} from '@/api/ai';
|
||||||
import {createWebSocket} from '@/utils/websocket';
|
import {createWebSocket} from '@/utils/websocket';
|
||||||
import {getAiToken} from '@/utils/aiToken';
|
import {getAiToken} from '@/utils/aiToken';
|
||||||
|
import MarkdownRenderer from '@/components/MarkdownRenderer';
|
||||||
|
// 显示html富文本
|
||||||
|
import {View, RichText} from '@tarojs/components'
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
import {WSS_API_URL} from "@/utils/server";
|
import {WSS_API_URL} from "@/utils/server";
|
||||||
|
|
||||||
@@ -27,7 +30,7 @@ const AiChat = () => {
|
|||||||
const [messages, setMessages] = useState<Message[]>([]);
|
const [messages, setMessages] = useState<Message[]>([]);
|
||||||
const [inputValue, setInputValue] = useState('');
|
const [inputValue, setInputValue] = useState('');
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [currentTaskId, setCurrentTaskId] = useState<string>('');
|
// const [currentTaskId, setCurrentTaskId] = useState<string>('');
|
||||||
const [wsConnected, setWsConnected] = useState(false);
|
const [wsConnected, setWsConnected] = useState(false);
|
||||||
const [isInitialized, setIsInitialized] = useState(false);
|
const [isInitialized, setIsInitialized] = useState(false);
|
||||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||||
@@ -84,7 +87,7 @@ const AiChat = () => {
|
|||||||
msg.isTyping ? {...msg, isTyping: false} : msg
|
msg.isTyping ? {...msg, isTyping: false} : msg
|
||||||
));
|
));
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
setCurrentTaskId('');
|
// setCurrentTaskId('');
|
||||||
} else {
|
} else {
|
||||||
// 实时更新AI回复消息
|
// 实时更新AI回复消息
|
||||||
setMessages(prev => {
|
setMessages(prev => {
|
||||||
@@ -109,7 +112,7 @@ const AiChat = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (data.taskId) {
|
if (data.taskId) {
|
||||||
setCurrentTaskId(data.taskId);
|
// setCurrentTaskId(data.taskId);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -270,20 +273,20 @@ const AiChat = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 停止AI回复
|
// 停止AI回复
|
||||||
const handleStopMessage = async () => {
|
// const handleStopMessage = async () => {
|
||||||
if (currentTaskId) {
|
// if (currentTaskId) {
|
||||||
try {
|
// try {
|
||||||
await stopAiMessage({taskId: currentTaskId});
|
// await stopAiMessage({taskId: currentTaskId});
|
||||||
setIsLoading(false);
|
// setIsLoading(false);
|
||||||
setCurrentTaskId('');
|
// setCurrentTaskId('');
|
||||||
setMessages(prev => prev.map(msg =>
|
// setMessages(prev => prev.map(msg =>
|
||||||
msg.isTyping ? {...msg, isTyping: false} : msg
|
// msg.isTyping ? {...msg, isTyping: false} : msg
|
||||||
));
|
// ));
|
||||||
} catch (error) {
|
// } catch (error) {
|
||||||
console.error('停止消息失败:', error);
|
// console.error('停止消息失败:', error);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
};
|
// };
|
||||||
|
|
||||||
// 处理快捷问题点击
|
// 处理快捷问题点击
|
||||||
const handleQuickQuestion = (question: string) => {
|
const handleQuickQuestion = (question: string) => {
|
||||||
@@ -341,7 +344,10 @@ const AiChat = () => {
|
|||||||
</View>
|
</View>
|
||||||
<View className="message-content">
|
<View className="message-content">
|
||||||
<View className="message-text">
|
<View className="message-text">
|
||||||
{message.query || (message.isTyping && message.type === 'ai' ? '正在思考中...' : '')}
|
<MarkdownRenderer
|
||||||
|
content={message.query || (message.isTyping && message.type === 'ai' ? '正在思考中...' : '')}
|
||||||
|
className={`message-markdown ${message.type === 'user' ? 'user-markdown' : 'ai-markdown'}`}
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
{message.isTyping && message.type === 'ai' && message.query && (
|
{message.isTyping && message.type === 'ai' && message.query && (
|
||||||
<View className="typing-cursor">|</View>
|
<View className="typing-cursor">|</View>
|
||||||
@@ -365,7 +371,10 @@ const AiChat = () => {
|
|||||||
className="question-item"
|
className="question-item"
|
||||||
onClick={() => handleQuickQuestion(question)}
|
onClick={() => handleQuickQuestion(question)}
|
||||||
>
|
>
|
||||||
{question}
|
<RichText
|
||||||
|
nodes={question}
|
||||||
|
space="nbsp"
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
))}
|
))}
|
||||||
</View>
|
</View>
|
||||||
@@ -373,7 +382,9 @@ const AiChat = () => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<View className="input-container">
|
<View className="input-container">
|
||||||
<View className="input-wrapper">
|
<div className="input-wrapper flex justify-between items-center">
|
||||||
|
<Home size={26} className={'bg-white'} onClick={() => Taro.reLaunch({url: '/pages/index/index'})}/>
|
||||||
|
<div className={'w-full mx-2'}>
|
||||||
<Textarea
|
<Textarea
|
||||||
className="message-input"
|
className="message-input"
|
||||||
value={inputValue}
|
value={inputValue}
|
||||||
@@ -387,31 +398,17 @@ const AiChat = () => {
|
|||||||
autoHeight
|
autoHeight
|
||||||
maxlength={500}
|
maxlength={500}
|
||||||
/>
|
/>
|
||||||
</View>
|
</div>
|
||||||
|
<div
|
||||||
{isLoading ? (
|
className={'flex justify-center items-center pr-1'}
|
||||||
<Button
|
|
||||||
onClick={handleStopMessage}
|
|
||||||
type="primary"
|
|
||||||
className="stop-button"
|
|
||||||
>
|
|
||||||
停止
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
onClick={() => handleSendMessage(inputValue)}
|
onClick={() => handleSendMessage(inputValue)}
|
||||||
disabled={!isInitialized || !inputValue.trim()}
|
|
||||||
icon={<ArrowUp/>}
|
|
||||||
className="send-button"
|
|
||||||
>
|
>
|
||||||
</Button>
|
<img alt={'发送'} src={'https://oss.wsdns.cn/20250709/13424d78bb004352864051d61afe9f0e.png'} width={'30px'} />
|
||||||
)}
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View className="fixed top-2 left-3" onClick={() => Taro.reLaunch({'url': '/pages/index/index'})}>
|
|
||||||
<Home/>
|
|
||||||
</View>
|
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ const Index = () => {
|
|||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className={'flex flex-col justify-center items-center cursor-pointer'}
|
className={'flex flex-col justify-center items-center cursor-pointer'}
|
||||||
onClick={() => Taro.navigateTo({url: `./index?id=${item.navigationId}`})}
|
onClick={() => Taro.navigateTo({url: `/${item.model}/index?id=${item.navigationId}`})}
|
||||||
>
|
>
|
||||||
{/* 图片容器 */}
|
{/* 图片容器 */}
|
||||||
<div className={'w-full mb-2 flex justify-center'}>
|
<div className={'w-full mb-2 flex justify-center'}>
|
||||||
|
|||||||
4
src/zzjy/detail.config.ts
Normal file
4
src/zzjy/detail.config.ts
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
export default definePageConfig({
|
||||||
|
navigationBarTitleText: '详情',
|
||||||
|
navigationBarBackgroundColor: '#ffe0e0'
|
||||||
|
})
|
||||||
6
src/zzjy/detail.scss
Normal file
6
src/zzjy/detail.scss
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
.content{
|
||||||
|
img{
|
||||||
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-bottom: 40px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
50
src/zzjy/detail.tsx
Normal file
50
src/zzjy/detail.tsx
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import {useEffect, useState} from 'react'
|
||||||
|
// import {Tag} from '@nutui/nutui-react-taro'
|
||||||
|
import {useRouter} from '@tarojs/taro'
|
||||||
|
import {Divider} from '@nutui/nutui-react-taro'
|
||||||
|
import {CmsArticle} from "@/api/cms/cmsArticle/model"
|
||||||
|
// import {Eye} from '@nutui/icons-react-taro'
|
||||||
|
// 显示html富文本
|
||||||
|
import {View, RichText} from '@tarojs/components'
|
||||||
|
import {getCmsArticle} from "@/api/cms/cmsArticle";
|
||||||
|
import './detail.scss';
|
||||||
|
|
||||||
|
function Detail() {
|
||||||
|
const {params} = useRouter();
|
||||||
|
// 文章详情
|
||||||
|
const [item, setItem] = useState<CmsArticle>()
|
||||||
|
// 浏览量
|
||||||
|
// const [views, setViews] = useState<number>()
|
||||||
|
|
||||||
|
const reload = () => {
|
||||||
|
getCmsArticle(Number(params.id)).then(data => {
|
||||||
|
if (data) {
|
||||||
|
setItem(data)
|
||||||
|
// setViews(data.actualViews)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
reload();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={'bg-white'}>
|
||||||
|
<div className={'p-3 font-bold text-lg'}>{item?.title}</div>
|
||||||
|
{/*<div className={'flex justify-between px-3'}>*/}
|
||||||
|
{/* <Tag type={'success'}>{item?.categoryName}</Tag>*/}
|
||||||
|
{/* <div className={'flex items-center gap-2 text-xs text-gray-400'}><Eye size={14}/>{views}</div>*/}
|
||||||
|
{/*</div>*/}
|
||||||
|
<Divider/>
|
||||||
|
<View className={'content text-gray-700 text-sm'}>
|
||||||
|
<RichText
|
||||||
|
nodes={item?.content || '暂无内容'}
|
||||||
|
space="nbsp"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Detail
|
||||||
5
src/zzjy/index.config.ts
Normal file
5
src/zzjy/index.config.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export default definePageConfig({
|
||||||
|
navigationBarTitleText: '政治教育',
|
||||||
|
navigationBarBackgroundColor: '#d32f2f',
|
||||||
|
navigationBarTextStyle: 'white'
|
||||||
|
})
|
||||||
186
src/zzjy/index.scss
Normal file
186
src/zzjy/index.scss
Normal file
@@ -0,0 +1,186 @@
|
|||||||
|
.veteran-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
|
||||||
|
|
||||||
|
.hero-section {
|
||||||
|
position: relative;
|
||||||
|
padding: 40px 20px 60px;
|
||||||
|
background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 320px;
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-decoration {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
.decoration-circle {
|
||||||
|
position: absolute;
|
||||||
|
top: -50px;
|
||||||
|
right: -50px;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: rotate 20s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decoration-star {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 30px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 15px solid transparent;
|
||||||
|
border-right: 15px solid transparent;
|
||||||
|
border-bottom: 10px solid rgba(255, 255, 255, 0.1);
|
||||||
|
transform: rotate(35deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -15px;
|
||||||
|
top: 3px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 15px solid transparent;
|
||||||
|
border-right: 15px solid transparent;
|
||||||
|
border-bottom: 10px solid rgba(255, 255, 255, 0.1);
|
||||||
|
transform: rotate(-70deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.veteran-list {
|
||||||
|
padding: 20px 15px;
|
||||||
|
|
||||||
|
.veteran-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 2px solid #d32f2f;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.veteran-avatar {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 15px;
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
border: 3px solid #d32f2f;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.veteran-info {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.veteran-name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #d32f2f;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.veteran-description {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #666;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.veteran-page {
|
||||||
|
.hero-section {
|
||||||
|
padding: 30px 15px 50px;
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
.hero-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.veteran-list {
|
||||||
|
padding: 15px 10px;
|
||||||
|
|
||||||
|
.veteran-card {
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
.veteran-avatar {
|
||||||
|
.avatar-img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.veteran-info {
|
||||||
|
.veteran-name {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.veteran-description {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
91
src/zzjy/index.tsx
Normal file
91
src/zzjy/index.tsx
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
import {useEffect, useState} from "react";
|
||||||
|
import {pageCmsArticle} from "@/api/cms/cmsArticle";
|
||||||
|
import {CmsArticle} from "@/api/cms/cmsArticle/model";
|
||||||
|
import Taro from '@tarojs/taro'
|
||||||
|
import {useRouter} from '@tarojs/taro'
|
||||||
|
import {Image,InfiniteLoading} from '@nutui/nutui-react-taro'
|
||||||
|
import {getCmsNavigation} from "@/api/cms/cmsNavigation";
|
||||||
|
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文章终极列表
|
||||||
|
* @constructor
|
||||||
|
*/
|
||||||
|
const Index = () => {
|
||||||
|
const {params} = useRouter();
|
||||||
|
const [navigation, setNavigation] = useState<CmsNavigation>()
|
||||||
|
const [list, setList] = useState<CmsArticle[]>([])
|
||||||
|
|
||||||
|
const reload = async () => {
|
||||||
|
// 获取栏目ID
|
||||||
|
const categoryId = Number(params.id);
|
||||||
|
// 当前栏目信息
|
||||||
|
const navs = await getCmsNavigation(categoryId);
|
||||||
|
// 终极新闻列表
|
||||||
|
const articles = await pageCmsArticle({categoryId,limit: 50});
|
||||||
|
|
||||||
|
// 当前栏目信息
|
||||||
|
if (navs) {
|
||||||
|
setNavigation(navs);
|
||||||
|
}
|
||||||
|
// 新闻列表
|
||||||
|
if (articles) {
|
||||||
|
setList(articles?.list || [])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
reload()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<InfiniteLoading className={'bg-red-200 h-full'}>
|
||||||
|
<div style={{padding: navigation?.span + 'px'}}>
|
||||||
|
<Image src={navigation?.style} width={'100%'}
|
||||||
|
height={'auto'}/>
|
||||||
|
</div>
|
||||||
|
<div className={'rounded-lg py-3 px-2'}>
|
||||||
|
<div className={'grid grid-cols-1 gap-3'}>
|
||||||
|
{
|
||||||
|
// 终极文章列表
|
||||||
|
list.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={'flex items-center cursor-pointer px-3'}
|
||||||
|
style={{
|
||||||
|
border: '3px solid #F2FE03',
|
||||||
|
backgroundColor: '#C01717',
|
||||||
|
color: '#F2FE03',
|
||||||
|
borderRadius: '16px',
|
||||||
|
}}
|
||||||
|
onClick={() => Taro.navigateTo({url: `./detail?id=${item.articleId}`})}
|
||||||
|
>
|
||||||
|
{/* 图片容器 */}
|
||||||
|
{/*<div className={'w-full m-3 flex justify-center'}*/}
|
||||||
|
{/* style={{*/}
|
||||||
|
{/* width: '108px',*/}
|
||||||
|
{/* height: '160px',*/}
|
||||||
|
{/* }}>*/}
|
||||||
|
{/* <img*/}
|
||||||
|
{/* className={'object-cover'}*/}
|
||||||
|
{/* src={item.image}*/}
|
||||||
|
{/* alt={item.title || ''}*/}
|
||||||
|
{/* />*/}
|
||||||
|
{/*</div>*/}
|
||||||
|
{/* 标题 */}
|
||||||
|
<div className={'flex flex-col items-start my-3 text-sm leading-tight'} style={{
|
||||||
|
color: '#F2FE03'
|
||||||
|
}}>
|
||||||
|
<p className={'font-bold py-1'}>{item.title}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</InfiniteLoading>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Index
|
||||||
Reference in New Issue
Block a user