mirror of
https://github.com/Funkoala14/KnowledgeBase_OOIN.git
synced 2025-06-08 05:49:44 +08:00
[dev]knowledge base cards style
This commit is contained in:
parent
ee53e2ddd3
commit
26c81c1fd8
@ -1,7 +1,10 @@
|
||||
import React from 'react';
|
||||
import KnowledgeCard from './KnowledgeCard';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
export default function KnowledgeBase() {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const knowledgeList = [
|
||||
{
|
||||
title: '产品开发知识库',
|
||||
|
||||
@ -2,12 +2,43 @@ import React from 'react';
|
||||
|
||||
export default function KnowledgeCard({ title, description, documents, date, access }) {
|
||||
return (
|
||||
<div className='col-md-4'>
|
||||
<div className='card shadow-sm border-0'>
|
||||
<div className='col-sm-6 col-md-6 col-lg-4 col-xl-3'>
|
||||
<div className='knowledge-card card shadow border-0'>
|
||||
<div className='card-body'>
|
||||
<h5 className='card-title'>{title}</h5>
|
||||
<div className='hoverdown position-absolute end-0 top-0'>
|
||||
<button type='button' className='detail-btn btn'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height='20' width='5' viewBox='0 0 128 512'>
|
||||
<path d='M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z' />
|
||||
</svg>
|
||||
</button>
|
||||
<ul class='hoverdown-menu shadow bg-white p-1 rounded'>
|
||||
<li className='p-1 hoverdown-item px-2'>
|
||||
删除
|
||||
<svg
|
||||
t='1740778468968'
|
||||
className='icon'
|
||||
viewBox='0 0 1024 1024'
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
p-id='2707'
|
||||
width='16'
|
||||
height='16'
|
||||
>
|
||||
<path
|
||||
d='M896 298.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h768c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z'
|
||||
p-id='2708'
|
||||
></path>
|
||||
<path
|
||||
d='M725.333333 981.333333H298.666667c-72.533333 0-128-55.466667-128-128V256c0-25.6 17.066667-42.666667 42.666666-42.666667s42.666667 17.066667 42.666667 42.666667v597.333333c0 25.6 17.066667 42.666667 42.666667 42.666667h426.666666c25.6 0 42.666667-17.066667 42.666667-42.666667V256c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666666 42.666667v597.333333c0 72.533333-55.466667 128-128 128zM682.666667 298.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667V170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667h-170.666666c-25.6 0-42.666667 17.066667-42.666667 42.666667v85.333333c0 25.6-17.066667 42.666667-42.666667 42.666667s-42.666667-17.066667-42.666666-42.666667V170.666667c0-72.533333 55.466667-128 128-128h170.666666c72.533333 0 128 55.466667 128 128v85.333333c0 25.6-17.066667 42.666667-42.666666 42.666667z'
|
||||
p-id='2709'
|
||||
></path>
|
||||
</svg>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className='card-text text-muted'>{description}</p>
|
||||
<div className='d-flex align-items-center gap-2 text-muted'>
|
||||
<div className='text-muted d-flex align-items-center gap-1'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 384 512'>
|
||||
<path
|
||||
fill='#737373'
|
||||
@ -15,7 +46,7 @@ export default function KnowledgeCard({ title, description, documents, date, acc
|
||||
/>
|
||||
</svg>
|
||||
{documents} 文档
|
||||
<span className='ms-3'>
|
||||
<span className='ms-3 d-flex align-items-center gap-1'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 512 512'>
|
||||
<path
|
||||
fill='#737373'
|
||||
@ -25,52 +56,70 @@ export default function KnowledgeCard({ title, description, documents, date, acc
|
||||
{date}
|
||||
</span>
|
||||
</div>
|
||||
<div className='mt-3 d-flex justify-content-between align-items-center'>
|
||||
<div className='mt-3 d-flex justify-content-between align-items-end'>
|
||||
{access === 'full' ? (
|
||||
<span className='badge bg-success'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height='14' width='14' viewBox='0 0 512 512'>
|
||||
<path
|
||||
fill='#63E6BE'
|
||||
d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'
|
||||
/>
|
||||
<span className='badge bg-success-subtle d-flex align-items-center gap-1'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
height='14'
|
||||
width='14'
|
||||
viewBox='0 0 512 512'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z' />
|
||||
</svg>
|
||||
完全访问
|
||||
</span>
|
||||
) : access === 'read' ? (
|
||||
<span className='badge bg-secondary'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height='14' width='15.75' viewBox='0 0 576 512'>
|
||||
<span className='badge bg-primary-subtle d-flex align-items-center gap-1'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
height='14'
|
||||
width='15.75'
|
||||
viewBox='0 0 576 512'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z' />
|
||||
</svg>
|
||||
只读访问
|
||||
</span>
|
||||
) : (
|
||||
<span className='badge bg-dark'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height='14' width='12.25' viewBox='0 0 448 512'>
|
||||
<path
|
||||
fill='#1e3050'
|
||||
d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'
|
||||
/>
|
||||
<span className='badge bg-dark-subtle d-flex align-items-center gap-1'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
height='14'
|
||||
width='12.25'
|
||||
viewBox='0 0 448 512'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z' />
|
||||
</svg>
|
||||
无访问权限
|
||||
</span>
|
||||
)}
|
||||
{access === 'full' || access === 'read' ? (
|
||||
<button className='btn btn-outline-secondary btn-sm'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height='14' width='14' viewBox='0 0 512 512'>
|
||||
<path
|
||||
fill='#1d1e20'
|
||||
d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'
|
||||
/>
|
||||
<button className='btn btn-outline-dark btn-sm d-flex align-items-center gap-1'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
height='14'
|
||||
width='14'
|
||||
viewBox='0 0 512 512'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z' />
|
||||
</svg>
|
||||
新聊天
|
||||
</button>
|
||||
) : (
|
||||
<button className='btn btn-outline-dark btn-sm'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height='14' width='14' viewBox='0 0 512 512'>
|
||||
<path
|
||||
fill='#0f0f0f'
|
||||
d='M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17l0 80c0 13.3 10.7 24 24 24l80 0c13.3 0 24-10.7 24-24l0-40 40 0c13.3 0 24-10.7 24-24l0-40 40 0c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z'
|
||||
/>
|
||||
<button className='btn btn-outline-dark btn-sm d-flex align-items-center gap-1'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
height='14'
|
||||
width='14'
|
||||
viewBox='0 0 512 512'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17l0 80c0 13.3 10.7 24 24 24l80 0c13.3 0 24-10.7 24-24l0-40 40 0c13.3 0 24-10.7 24-24l0-40 40 0c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z' />
|
||||
</svg>
|
||||
申请权限
|
||||
</button>
|
||||
|
||||
@ -1,2 +1,12 @@
|
||||
// Import all of Bootstrap's CSS
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
@import 'bootstrap/scss/bootstrap';
|
||||
|
||||
ul,
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -1,7 +1,36 @@
|
||||
@import 'bootstrap/scss/bootstrap';
|
||||
|
||||
.dropdown-toggle {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.snackbar {
|
||||
top:6.5rem;
|
||||
}
|
||||
top: 6.5rem;
|
||||
}
|
||||
|
||||
.knowledge-card {
|
||||
.hoverdown:hover .hoverdown-menu{
|
||||
display: block;
|
||||
color: red;
|
||||
}
|
||||
.hoverdown {
|
||||
position: relative;
|
||||
.hoverdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
.hoverdown-item {
|
||||
width: max-content;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-radius: 4px;
|
||||
color: $dark;
|
||||
&:hover {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user