Compare commits
No commits in common. "c5b63f3b2cce73baaefe6cef1ff9a16fa6bcfe9d" and "4acec54234d4eea56ca89fcd6d7a2cb9359e4322" have entirely different histories.
c5b63f3b2c
...
4acec54234
|
@ -29,11 +29,7 @@ storage-minio.yml
|
||||||
out/
|
out/
|
||||||
build
|
build
|
||||||
dist
|
dist
|
||||||
cache-redis.yml
|
|
||||||
database-postgres.yml
|
|
||||||
test/
|
|
||||||
search-elasticsearch.yml
|
|
||||||
dockers/
|
|
||||||
|
|
||||||
# Debug
|
# Debug
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
|
|
|
@ -1,132 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
const services = [
|
|
||||||
{
|
|
||||||
icon: '/picture/1.jpg', // 这里可以替换为图片或SVG
|
|
||||||
label: '军队自考',
|
|
||||||
href: '/study',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '/picture/2.jpg',
|
|
||||||
label: '军人',
|
|
||||||
href: '/scholarship',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '/picture/3.jpg',
|
|
||||||
label: '蓝天邮局',
|
|
||||||
href: '/mail',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '/picture/4.jpg',
|
|
||||||
label: '策划工具',
|
|
||||||
href: '/plan',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '/picture/5.jpg',
|
|
||||||
label: '情调研',
|
|
||||||
href: '/survey',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '/picture/6.jpg',
|
|
||||||
label: '上网助手',
|
|
||||||
href: '/net',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '/picture/7.jpg',
|
|
||||||
label: '常用软件',
|
|
||||||
href: '/software',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '/picture/8.jpg',
|
|
||||||
label: '智能语音',
|
|
||||||
href: '/voice',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '/picture/9.jpg',
|
|
||||||
label: '办公模板',
|
|
||||||
href: '/office',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '/picture/10.jpg',
|
|
||||||
label: '智能校对',
|
|
||||||
href: '/ai-check',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '/picture/11.jpg',
|
|
||||||
label: '考试平台',
|
|
||||||
href: '/exam',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '/picture/12.jpg',
|
|
||||||
label: '学习平台',
|
|
||||||
href: '/study',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const Integrated: React.FC = () => {
|
|
||||||
return (
|
|
||||||
<div className="w-[1514px] h-[573px] bg-[#000]">
|
|
||||||
<div className="w-[1514px] h-[573px] bg-white">
|
|
||||||
<div className="flex items-center mb-6 h-[77px]">
|
|
||||||
<span
|
|
||||||
className="text-3xl font-bold mr-3 border-l-[14px] pl-4 py-2"
|
|
||||||
style={{ color: '#165E97', borderLeftColor: '#165E97' }}
|
|
||||||
>
|
|
||||||
综合服务
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="h-[479px] grid grid-cols-6 grid-rows-2">
|
|
||||||
{services.map((service, index) => {
|
|
||||||
// 计算实际显示位置
|
|
||||||
const row = Math.floor(index / 6);
|
|
||||||
const col = index % 6;
|
|
||||||
|
|
||||||
// 根据行数调整列的顺序
|
|
||||||
let displayCol = col;
|
|
||||||
// if (row === 0) {
|
|
||||||
// // 第一行:右下、左下顺序
|
|
||||||
// displayCol = col < 3 ? col + 3 : col - 3;
|
|
||||||
// } else {
|
|
||||||
// // 第二行:右上、左上顺序
|
|
||||||
// displayCol = col < 3 ? col + 3 : col - 3;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// 确定内容在网格中的位置
|
|
||||||
const positionClass = row === 0
|
|
||||||
? (col % 2 === 0 ? 'bottom-0 right-0' : 'bottom-0 left-0') // 第一行:右下、左下
|
|
||||||
: (col % 2 === 0 ? 'top-0 right-0' : 'top-0 left-0'); // 第二行:右上、左上
|
|
||||||
|
|
||||||
return (
|
|
||||||
// 外部 div:负责网格布局和白色背景,本身不可点击
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className={`relative w-full h-full bg-white`}
|
|
||||||
style={{ gridColumn: displayCol + 1, gridRow: row + 1 }}
|
|
||||||
>
|
|
||||||
{/* 这个 div 是 104x108 的容器,绝对定位在单元格内,并负责对齐其内部的可点击链接 */}
|
|
||||||
<div className={`absolute p-4 w-[104px] h-[108px] flex flex-col ${positionClass} ${col % 2 === 0 ? 'items-end' : 'items-start'}`}>
|
|
||||||
{/* 这个 <a> 标签是可点击的区域,它将包裹图标和标签,并作为 Flex 容器垂直排列它们 */}
|
|
||||||
<a href={service.href} className="flex flex-col w-[72px] h-[84px]">
|
|
||||||
{/* 为图标创建一个圆形背景的 div */}
|
|
||||||
<div className={`rounded-full w-12 h-12 flex items-center justify-center mb-2 `}>
|
|
||||||
{/* 图标:应用文本颜色 */}
|
|
||||||
<img src={service.icon} alt={service.label} className="w-full h-full object-contain" />
|
|
||||||
</div>
|
|
||||||
{/* 标签:没有额外颜色类,使用默认文本颜色 */}
|
|
||||||
<span className="text-lg font-medium text-black">{service.label}</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Integrated;
|
|
Before Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 7.8 KiB |
Before Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 8.5 KiB |
Before Width: | Height: | Size: 6.5 KiB |
Before Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 6.7 KiB |
Before Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 8.1 KiB |
Before Width: | Height: | Size: 7.3 KiB |