QingYu-Club/qing-yu-club-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 修改部分文案及删除多余内容

Browse Source
This commit is contained in:
秋水浮尘
2023-11-14 00:52:40 +08:00
parent 13f794caea
commit 3218fccf7c
15 changed files with 702 additions and 773 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@@ -1,17 +1,18 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<head> <title>鸡翅CLUB</title>
<meta charset="UTF-8" /> </head>
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <body>
</head> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<body> </body>
<div id="root"></div> </html>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

22
src/App.tsx
View File

@@ -1,20 +1,30 @@
import { useEffect, memo } from 'react';
import './App.less';
import { useLocation, useNavigate, Outlet } from 'react-router-dom';
import Header from '@views/header' import Header from '@views/header'
import { memo, useEffect } from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import './App.less'
const App = () => { const App = () => {
const location = useLocation(); const location = useLocation()
const navigate = useNavigate() const navigate = useNavigate()
useEffect(() => { useEffect(() => {
if (location.pathname === '/') { if (location.pathname === '/') {
const userInfoStorage = localStorage.getItem('userInfo')
if (!userInfoStorage) {
return window.location.replace('/login')
}
navigate('/question-bank') navigate('/question-bank')
} }
}, [location]) }, [location])
return ( return (
<div className="app-main" style={{ padding: location.pathname === '/login' ? '66px 0 0' : '66px 16px 32px' }}> <div
className='app-main'
style={{ padding: location.pathname === '/login' ? '66px 0 0' : '66px 16px 32px' }}
>
<Header /> <Header />
<div className='content-box' style={{ width: location.pathname === '/login' ? '100%' : '1439px' }}> <div
className='content-box'
style={{ width: location.pathname === '/login' ? '100%' : '1439px' }}
>
<Outlet /> <Outlet />
</div> </div>
</div> </div>

13
src/assets/base.less
View File

@@ -1,4 +1,4 @@
@import "normalize.less"; @import 'normalize.less';
* { * {
box-sizing: border-box; box-sizing: border-box;
@@ -8,7 +8,8 @@
body, body,
html { html {
font-family: -apple-system, "宋体","微软雅黑"; font-family: -apple-system, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
'微软雅黑', Arial, sans-serif;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #666666; color: #666666;
@@ -26,7 +27,7 @@ a {
display: block; display: block;
clear: both; clear: both;
height: 0; height: 0;
content: ""; content: '';
} }
.arrow-right { .arrow-right {
@@ -43,7 +44,7 @@ a {
//修改input高亮的问题 //修改input高亮的问题
.ant-input-affix-wrapper { .ant-input-affix-wrapper {
&:hover { &:hover {
border-color: none!important; border-color: none !important;
} }
} }
@@ -51,11 +52,11 @@ a {
box-shadow: none; box-shadow: none;
} }
.ant-input:focus, .ant-input:hover { .ant-input:focus,
.ant-input:hover {
border-color: #d9d9d9; border-color: #d9d9d9;
} }
.ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) { .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
} }

6
src/components/category-list/index.jsx
View File

@@ -305,6 +305,7 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
dashed dashed
style={{ style={{
marginTop: 10, marginTop: 10,
marginBottom: 10,
fontSize: 13, fontSize: 13,
cursor: 'pointer' cursor: 'pointer'
}} }}
@@ -326,11 +327,6 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
<div className='category-box'> <div className='category-box'>
<Fragment>{categoryList?.length && renderFirstContainer()}</Fragment> <Fragment>{categoryList?.length && renderFirstContainer()}</Fragment>
<Fragment>{secondCategoryList?.length > 0 && renderSecondContainer()}</Fragment> <Fragment>{secondCategoryList?.length > 0 && renderSecondContainer()}</Fragment>
{/* {!this.props.isHideSec && (
<Fragment>
{secondCategoryList?.length > 0 && this.renderSecondContainer()}
</Fragment>
)} */}
<Modal <Modal
open={openMoreFlag} open={openMoreFlag}
footer={null} footer={null}

354
src/components/category-list/index.less
View File

@@ -1,200 +1,186 @@
.category-box { .category-box {
.first-category-list { .first-category-list {
display: flex;
width: 100%;
.first-category-item {
flex-shrink: 1;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
margin-right: 18px;
padding: 10px 12px;
width: 120px;
height: 76px;
cursor: pointer;
border-radius: 4px;
background-size: 100% 100%;
background-color: rgba(0, 0, 0, 0.04);
font-weight: 400;
transition: all 0.5s;
&-title {
color: #ffffff;
font-size: 14px;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical;
display: -webkit-box;
word-wrap: break-word;
word-break: break-all;
}
&-count {
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
line-height: 16px;
word-wrap: break-word;
}
&:hover {
transition: all 0.5s;
transform: translateY(-8px);
}
&-active {
transform: translateY(-8px);
}
}
.first-category-more {
display: flex;
justify-content: center;
align-items: center;
width: 88px;
height: 76px;
font-size: 16px;
color: #13b4ff;
line-height: 20px;
cursor: pointer;
border-radius: 4px;
background-color: rgba(19, 180, 255, 0.08);
}
}
.second-category-list {
padding-top: 15px;
border-radius: 4px;
.second-category-item {
display: flex;
.second-category-item-title {
display: flex; display: flex;
align-items: center;
margin-right: 16px;
min-width: 70px;
height: 40px;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
font-weight: bold;
}
.second-category-item-box {
flex: 1;
display: flex;
justify-content: space-between;
width: 100%; width: 100%;
.first-category-item { .second-category-item-list {
flex-shrink: 1; flex: 1;
display: inline-flex; display: flex;
flex-direction: column; flex-wrap: wrap;
justify-content: space-between; height: 43px;
margin-right: 18px; overflow: hidden;
padding: 10px 12px; .third-category-item {
width: 120px;
height: 76px;
cursor: pointer;
border-radius: 4px;
background-size: 100% 100%;
background-color: rgba(0, 0, 0, 0.04);
font-weight: 400;
transition: all 0.5s;
&-title {
color: #ffffff;
font-size: 14px;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical;
display: -webkit-box;
word-wrap: break-word;
word-break: break-all;
}
&-count {
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
line-height: 16px;
word-wrap: break-word;
}
&:hover {
transition: all 0.5s;
transform: translateY(-8px);
}
&-active {
transform: translateY(-8px);
}
}
.first-category-more {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 88px; padding: 2px 8px;
height: 76px; margin: 8px 15px 8px 0;
font-size: 16px;
color: #13b4ff;
line-height: 20px;
cursor: pointer; cursor: pointer;
font-size: 14px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: 4px;
background-color: rgba(19, 180, 255, 0.08); &:hover {
} background-color: rgba(60, 110, 238, 0.1);
} border: 1px solid rgba(60, 110, 238, 1);
.second-category-list { color: rgba(60, 110, 238, 1);
padding-top: 15px;
border-radius: 4px;
.second-category-item {
display: flex;
.second-category-item-title {
display: flex;
align-items: center;
margin-right: 16px;
min-width: 60px;
height: 40px;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
font-weight: bold;
}
.second-category-item-box {
flex: 1;
display: flex;
justify-content: space-between;
width: 100%;
.second-category-item-list {
flex: 1;
display: flex;
flex-wrap: wrap;
height: 43px;
overflow: hidden;
.third-category-item {
display: flex;
justify-content: center;
align-items: center;
padding: 2px 8px;
margin: 8px 15px 8px 0;
cursor: pointer;
font-size: 14px;
border: 1px solid rgba(0, 0, 0, 0.04);
border-radius: 4px;
// @mixin box-backgroundColor($alpha: 1) {
// background-color: rgba(60, 110, 238, $alpha) !important;
// }
// @mixin box-border($width: 1px, $style: solid, $alpha: 1) {
// border: $width $style rgba(60, 110, 238, $alpha) !important;
// }
// @mixin font-color($alpha: 1) {
// color: rgba(60, 110, 238, $alpha) !important;
// }
&:hover {
background-color: rgba(60, 110, 238, 0.1);
border: 1px solid rgba(60, 110, 238, 1);
color: rgba(60, 110, 238, 1)
}
}
.third-category-item-active {
// @include box-backgroundColor(0.1);
// @include box-border();
// @include font-color();
background-color: rgba(60, 110, 238, 0.1);
border: 1px solid rgba(60, 110, 238, 1);
color: rgba(60, 110, 238, 1)
}
}
.second-category-item-status {
display: flex;
margin-top: 8px;
align-items: center;
justify-content: center;
padding: 4px 4px 4px 8px;
width: 54px;
height: 28px;
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
cursor: pointer;
&:hover {
background: rgba(0, 0, 0, 0.04);
border-radius: 4px;
}
}
} }
}
.third-category-item-active {
background-color: rgba(60, 110, 238, 0.1);
border: 1px solid rgba(60, 110, 238, 1);
color: rgba(60, 110, 238, 1);
}
} }
.ant-divider-horizontal.ant-divider-with-text-center { .second-category-item-status {
margin: 0; display: flex;
margin-top: 8px;
align-items: center;
justify-content: center;
padding: 4px 4px 4px 8px;
width: 54px;
height: 28px;
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
cursor: pointer;
&:hover {
background: rgba(0, 0, 0, 0.04);
border-radius: 4px;
}
} }
}
} }
.ant-divider-horizontal.ant-divider-with-text-center {
margin: 0;
}
}
} }
.ant-modal-content { .ant-modal-content {
width: 606px; width: 606px;
background-color: #fff; background-color: #fff;
.ant-modal-body { .ant-modal-body {
padding: 24px; padding: 24px;
.first-category-more-list { .first-category-more-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
.first-category-item { .first-category-item {
flex-shrink: 1; flex-shrink: 1;
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin: 10px 8px; margin: 10px 8px;
padding: 10px 12px; padding: 10px 12px;
width: 120px; width: 120px;
height: 76px; height: 76px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
background-size: 100% 100%; background-size: 100% 100%;
background-color: rgba(0, 0, 0, 0.04); background-color: rgba(0, 0, 0, 0.04);
font-weight: 400; font-weight: 400;
transition: all 0.5s; transition: all 0.5s;
&-title { &-title {
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
overflow: hidden; overflow: hidden;
/* autoprefixer: off */ /* autoprefixer: off */
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
display: -webkit-box; display: -webkit-box;
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
}
&-count {
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
line-height: 16px;
word-wrap: break-word;
}
&:hover {
transition: all 0.5s;
transform: translateY(-8px);
}
&-active {
transform: translateY(-8px);
}
&:nth-child(4n) {
margin-right: 0;
}
}
}
} }
} &-count {
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
line-height: 16px;
word-wrap: break-word;
}
&:hover {
transition: all 0.5s;
transform: translateY(-8px);
}
&-active {
transform: translateY(-8px);
}
&:nth-child(4n) {
margin-right: 0;
}
}
}
}
}

120
src/components/good-collection-error/index.jsx
View File

@@ -1,8 +1,7 @@
import React, { Component } from 'react' import { HeartTwoTone, InfoCircleTwoTone, LikeTwoTone } from '@ant-design/icons'
import { Modal, Input, Radio, message } from 'antd'
import { HeartTwoTone, LikeTwoTone, InfoCircleTwoTone } from '@ant-design/icons'
import { collection, good } from './constant'
import req from '@utils/request' import req from '@utils/request'
import { Input, Modal, Radio, message } from 'antd'
import React, { Component } from 'react'
import './index.less' import './index.less'
const { TextArea } = Input const { TextArea } = Input
@@ -19,19 +18,19 @@ export default class GoodCollectionError extends Component {
isModal: false, //是否显示纠错弹框 isModal: false, //是否显示纠错弹框
value: 1, //纠错类型对应值 value: 1, //纠错类型对应值
inputValue: '', //纠错详情内容 inputValue: '', //纠错详情内容
questionId: '', //题目id questionId: '' //题目id
} }
} }
/**纠错类型 */ /**纠错类型 */
errorType = [ errorType = [
{ {
value: 1, value: 1,
content: '答案错误', content: '答案错误'
}, },
{ {
value: 2, value: 2,
content: '题目与答案不符', content: '题目与答案不符'
}, }
] ]
componentDidMount() { componentDidMount() {
// this.getDetail() // this.getDetail()
@@ -39,32 +38,33 @@ export default class GoodCollectionError extends Component {
getDetail() { getDetail() {
let params = { let params = {
subjectId: this.props.questionId, subjectId: this.props.questionId
} }
req({ req({
method: 'post', method: 'post',
data: params, data: params,
url: 'admin/question/collect/getDetail', url: 'admin/question/collect/getDetail'
}) })
.then((res) => { .then(res => {
if (res.data) { if (res.data) {
this.setState({ this.setState({
isGood: res.data.isThump, isGood: res.data.isThump,
goodAmount: res.data.thumpCount, goodAmount: res.data.thumpCount,
isCollection: res.data.isCollect, isCollection: res.data.isCollect,
collectionAmount: res.data.collectCount, collectionAmount: res.data.collectCount
}) })
} }
}) })
.catch((err) => console.log(err)) .catch(err => console.log(err))
} }
/** /**
* 点击纠错按钮 * 点击纠错按钮
*/ */
handleModal = () => { handleModal = () => {
return message.info('敬请期待')
this.setState({ this.setState({
isModal: true, isModal: true
}) })
} }
/** /**
@@ -77,20 +77,20 @@ export default class GoodCollectionError extends Component {
let params = { let params = {
subjectId: questionId, subjectId: questionId,
errorType: value, errorType: value,
errorMsg: inputValue, errorMsg: inputValue
} }
if (inputValue.length === 0) { if (inputValue.length === 0) {
message.warning('请填写纠错详情!') message.warning('请填写纠错详情!')
} else { } else {
this.setState({ this.setState({
isModal: false, isModal: false,
inputValue: '', inputValue: ''
}) })
message.success('感谢纠错，立即更改！') message.success('感谢纠错，立即更改！')
JDreq({ req({
method: 'post', method: 'post',
data: params, data: params,
url: '/admin/question/subjectError/add', url: '/admin/question/subjectError/add'
}) })
} }
} }
@@ -100,25 +100,25 @@ export default class GoodCollectionError extends Component {
handleCancel = () => { handleCancel = () => {
this.setState({ this.setState({
isModal: false, isModal: false,
inputValue: '', inputValue: ''
}) })
} }
/** /**
* *
* @param {选择纠错类型} e * @param {选择纠错类型} e
*/ */
handleChangeRadio = (e) => { handleChangeRadio = e => {
this.setState({ this.setState({
value: e.target.value, value: e.target.value
}) })
} }
/** /**
* *
* @param {纠错详情中填写内容} e * @param {纠错详情中填写内容} e
*/ */
handleChangeInput = (e) => { handleChangeInput = e => {
this.setState({ this.setState({
inputValue: e.target.value, inputValue: e.target.value
}) })
} }
/** /**
@@ -130,19 +130,19 @@ export default class GoodCollectionError extends Component {
const { isGood, goodAmount } = this.state const { isGood, goodAmount } = this.state
const { questionId } = this.props const { questionId } = this.props
let params = { let params = {
subjectId: questionId, subjectId: questionId
} }
this.setState( this.setState(
{ {
isGood: isGood === true ? false : true, isGood: isGood === true ? false : true,
goodAmount: isGood === true ? goodAmount - 1 : goodAmount + 1, goodAmount: isGood === true ? goodAmount - 1 : goodAmount + 1
}, },
() => { () => {
JDreq({ req({
method: 'post', method: 'post',
data: params, data: params,
url: 'admin/question/thump/addOrCancel', url: 'admin/question/thump/addOrCancel'
}).catch((err) => console.log(err)) }).catch(err => console.log(err))
} }
) )
} }
@@ -154,62 +154,68 @@ export default class GoodCollectionError extends Component {
const { isCollection, collectionAmount } = this.state const { isCollection, collectionAmount } = this.state
const { questionId } = this.props const { questionId } = this.props
let params = { let params = {
subjectId: questionId, subjectId: questionId
} }
this.setState( this.setState(
{ {
isCollection: isCollection === true ? false : true, isCollection: isCollection === true ? false : true,
collectionAmount: isCollection === true ? collectionAmount - 1 : collectionAmount + 1, collectionAmount: isCollection === true ? collectionAmount - 1 : collectionAmount + 1
}, },
() => { () => {
req({ req({
method: 'post', method: 'post',
data: params, data: params,
url: 'admin/question/collect/addOrCancel', url: 'admin/question/collect/addOrCancel'
}).catch((err) => console.log(err)) }).catch(err => console.log(err))
} }
) )
} }
render() { render() {
const { isCollection, isGood, isModal, value, collectionAmount, goodAmount } = this.state const { isCollection, isGood, isModal, value, collectionAmount, goodAmount } = this.state
return ( return (
<div className="left"> <div className='left'>
<div <div
className="good" className='good'
size="middle" size='middle'
onClick={() => { onClick={() => {
this.handleChangeGood() this.handleChangeGood()
}} }}
> >
<LikeTwoTone twoToneColor={isGood == false ? 'grey' : 'blue'} style={{ marginRight: 4 }} />({goodAmount}) <LikeTwoTone
twoToneColor={isGood == false ? 'grey' : 'blue'}
style={{ marginRight: 4 }}
/>
({goodAmount})
</div> </div>
<div <div
className="collection" className='collection'
onClick={() => { onClick={() => {
this.handleChangeCollection() this.handleChangeCollection()
}} }}
> >
<HeartTwoTone twoToneColor={isCollection == false ? 'grey' : 'blue'} style={{ marginRight: 4 }} />( <HeartTwoTone
{collectionAmount}) twoToneColor={isCollection == false ? 'grey' : 'blue'}
style={{ marginRight: 4 }}
/>
({collectionAmount})
</div> </div>
{/* <div className="comment"> {/* <div className="comment">
<MessageTwoTone twoToneColor="blue" style={{ marginRight: 4 }} /> <MessageTwoTone twoToneColor="blue" style={{ marginRight: 4 }} />
评论 评论
</div> */} </div> */}
<div <div
className="error-collection" className='error-collection'
onClick={() => { onClick={() => {
console.log('111')
this.handleModal() this.handleModal()
}} }}
> >
<InfoCircleTwoTone twoToneColor="red" style={{ marginRight: 4 }} /> <InfoCircleTwoTone twoToneColor='red' style={{ marginRight: 4 }} />
纠错 纠错
</div> </div>
<Modal <Modal
className="error-modal" className='error-modal'
title="题目纠错" title='题目纠错'
visible={isModal} open={isModal}
destroyOnClose={true} destroyOnClose={true}
onOk={() => { onOk={() => {
this.handleOk() this.handleOk()
@@ -217,25 +223,25 @@ export default class GoodCollectionError extends Component {
onCancel={() => { onCancel={() => {
this.handleCancel() this.handleCancel()
}} }}
okText="确认" okText='确认'
cancelText="取消" cancelText='取消'
style={{ fontWeight: 500 }} style={{ fontWeight: 500 }}
> >
<div> <div>
<div className="error-collection-title">纠错类型</div> <div className='error-collection-title'>纠错类型</div>
<div className="error-collection-type"> <div className='error-collection-type'>
{this.errorType.map((item, index) => { {this.errorType.map((item, index) => {
return ( return (
<div key={index} className="error-collection-type-detail"> <div key={index} className='error-collection-type-detail'>
<Radio.Group <Radio.Group
onChange={(e) => { onChange={e => {
this.handleChangeRadio(e) this.handleChangeRadio(e)
}} }}
defaultValue={1} defaultValue={1}
buttonStyle="solid" buttonStyle='solid'
value={value} value={value}
> >
<Radio.Button value={item.value} className="ll"> <Radio.Button value={item.value} className='ll'>
{item.content} {item.content}
</Radio.Button> </Radio.Button>
</Radio.Group> </Radio.Group>
@@ -243,14 +249,14 @@ export default class GoodCollectionError extends Component {
) )
})} })}
</div> </div>
<div className="error-collection-title">纠错详情</div> <div className='error-collection-title'>纠错详情</div>
<TextArea <TextArea
className="error-input" className='error-input'
placeholder="请输入..." placeholder='请输入...'
maxLength={256} maxLength={256}
rows={4} rows={4}
showCount={true} showCount={true}
onChange={(e) => { onChange={e => {
this.handleChangeInput(e) this.handleChangeInput(e)
}} }}
/> />

152
src/components/question-list/index.less
View File

@@ -1,82 +1,80 @@
.question-list-filter { .question-list-filter {
padding: 0px 6px 20px 9px; padding: 0px 6px 20px 9px;
background-color: #ffffff; background-color: #ffffff;
.question-filter-container { .question-filter-container {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding-right: 18px;
padding-left: 5px;
.question-filter-box {
display: flex;
font-size: 14px;
.question-filter-select {
margin-right: 4px;
color: #000;
font-weight: bold;
border: 0;
.ant-select-selection {
border: 0;
}
}
}
.question-count-box {
color: rgba(0, 0, 0, 0.45);
.ant-btn {
margin-left: 16px;
width: 150px;
height: 34px;
font-size: 14px;
font-weight: 500;
color: #fff;
background-color: #13b4ff;
border-color: #13b4ff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
}
}
}
.question-list-container {
.ant-table-tbody > tr > td {
// border-bottom: 0;
padding: 10px 4px 0 14px;
}
.ant-table-thead > tr > th {
background-color: #ffffff;
// border-bottom: 0;
}
.ant-table-row:hover {
cursor: pointer;
}
.ant-table-thead > tr > th .ant-table-header-column .ant-table-column-sorters:hover:before {
// background-color: #fff;
}
.question-info-container {
.question-info-desc {
font-size: 14px;
line-height: 18px;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
.question-info-tags {
display: flex; display: flex;
justify-content: space-between; margin-top: 8px;
margin-bottom: 10px; padding-bottom: 10px;
padding-right: 18px; .question-info-tag {
padding-left: 5px; margin-right: 10px;
.question-filter-box { padding: 0px 6px;
display: flex; font-size: 10px !important;
font-size: 14px; border-radius: 4px;
.question-filter-select {
margin-right: 4px;
color: #000;
font-weight: bold;
border: 0;
.ant-select-selection {
border: 0;
}
}
}
.question-count-box {
color: rgba(0, 0, 0, 0.45);
.ant-btn {
margin-left: 16px;
width: 150px;
height: 34px;
font-size: 14px;
font-weight: 500;
color: #fff;
background-color: #13b4ff;
border-color: #13b4ff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
}
} }
}
} }
.question-list-container { }
.ant-table-tbody > tr > td { .question-type-icon {
// border-bottom: 0; width: 24px;
padding: 10px 4px 0 14px; height: 24px;
} }
.ant-table-thead > tr > th {
background-color: #ffffff;
// border-bottom: 0;
}
.ant-table-row:hover {
cursor: pointer;
}
.ant-table-thead > tr > th .ant-table-header-column .ant-table-column-sorters:hover:before {
// background-color: #fff;
}
.question-info-container {
.question-info-desc {
font-size: 14px;
line-height: 18px;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
.question-info-tags {
display: flex;
margin-top: 8px;
padding-bottom: 10px;
.question-info-tag {
margin-right: 10px;
padding: 0px 6px;
font-size: 10px !important;
border-radius: 4px;
// @include font-color();
// border: 1px solid rgba(60, 110, 238, 0.6);
}
}
}
}
.question-type-icon {
width: 24px;
height: 24px;
}
} }

6
src/constants/index.ts
View File

@@ -54,9 +54,3 @@ export const gradeObject = {
title: '专家' title: '专家'
} }
} }
export const imgObject = {
clickImg:
host +
'/jichi/icon/%E7%83%AD%E9%97%A8.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231102%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231102T153146Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=e6b8cdb3231b1c3d7114212cb9278ecc17cf6d4ec0f759ea0200e04156d4c8b7'
}

1
src/utils/request.ts
View File

@@ -15,7 +15,6 @@ export const baseHttp = () => {
} }
export default function request(config, url) { export default function request(config, url) {
console.log(config, url, 'config url')
// const navigate = useNavigate() // const navigate = useNavigate()
const userInfoStorage = localStorage.getItem('userInfo') const userInfoStorage = localStorage.getItem('userInfo')
const userInfo = userInfoStorage ? JSON.parse(userInfoStorage) : {} const userInfo = userInfoStorage ? JSON.parse(userInfoStorage) : {}

10
src/views/brush-questions/constant.ts
View File

@@ -1,9 +1,9 @@
export const good = { export const good = {
0:'未点赞', 0: '未点赞',
1:'已点赞', 1: '已点赞'
} }
export const collection={ export const collection = {
0:'未收藏', 0: '未收藏',
1:'已收藏', 1: '已收藏'
} }

200
src/views/brush-questions/index.less
View File

@@ -1,162 +1,118 @@
.brush-questions-box { .brush-questions-box {
width: 1439px; width: 1439px;
margin: 0 auto; margin: 0 auto;
// display: flex; background-color: #fff;
background-color: #fff; padding: 20px 50px;
padding: 20px 50px; border-radius: 5px;
border-radius: 5px; flex-direction: column;
overflow: auto;
.brush-questions-box,
.question-box {
flex-direction: column; flex-direction: column;
overflow: auto; overflow-y: auto;
.brush-questions-box, background-color: #fff;
.question-box { border-radius: 8px;
// display: flex; .question,
// flex: 1; .question-content {
flex-direction: column; display: flex;
overflow-y: auto; .question-type,
background-color: #fff; .question-number {
border-radius: 8px; display: flex;
// position: relative; flex: 1;
.question, align-items: center;
.question-content { }
display: flex;
// flex: 1;
.question-type,
.question-number {
display: flex;
flex: 1;
align-items: center;
}
}
} }
}
} }
// .answer-box{
// }
.question-box { .question-box {
margin-bottom: 10px; margin-bottom: 10px;
} }
.question { .question {
margin-bottom: 20px; margin-bottom: 20px;
} }
.question-type { .question-type {
// padding-left: 50px; color: rgba(60, 110, 238, 1) !important;
color: rgba(60, 110, 238, 1) !important; font-size: 16px;
font-size: 16px;
} }
.question-number { .question-number {
justify-content: right; justify-content: right;
// padding-right: 50px; color: rgba(60, 110, 238, 1) !important;
color: rgba(60, 110, 238, 1) !important; font-size: 16px;
font-size: 16px; font-weight: 600;
font-weight: 600;
// padding:2px 10px;
} }
.question-content { .question-content {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 16px; font-size: 16px;
// padding: 20px 0 20px 30px; line-height: 35px;
// border-bottom:1px dashed #000 margin-top: 50px;
line-height: 35px; margin-bottom: 10px;
margin-top: 50px; .difficulty {
margin-bottom: 10px; margin-right: 10px;
.difficulty { padding: 0 10px;
margin-right: 10px; border-radius: 4px;
padding: 0 10px; background-color: rgba(60, 110, 238, 0.3) !important;
border-radius: 4px; }
background-color: rgba(60, 110, 238, 0.3) !important;
}
} }
.reference-answer { .reference-answer {
color: rgba(60, 110, 238, 0.8) !important; color: rgba(60, 110, 238, 0.8) !important;
font-size: 14px; font-size: 14px;
padding: 20px 0 10px 0px; padding: 20px 0 10px 0px;
} }
.answer-content { .answer-content {
background-color: rgba(60, 110, 238, 0.2) !important; background-color: rgba(60, 110, 238, 0.2) !important;
padding: 15px 0 15px 35px; padding: 15px 0 15px 35px;
font-size: 14px; font-size: 14px;
line-height: 35px; line-height: 35px;
border-radius: 6px; border-radius: 6px;
margin-bottom: 5px; margin-bottom: 5px;
max-height: 500px; max-height: 500px;
overflow-y: scroll; overflow-y: scroll;
} }
.answer-box { .answer-box {
border-radius: 0px; border-radius: 0px;
border-top: 1px dashed #e4e4e4; border-top: 1px dashed #e4e4e4;
border-bottom: 1px dashed #e4e4e4; border-bottom: 1px dashed #e4e4e4;
} }
.change-question-box { .change-question-box {
display: flex; display: flex;
} }
.right { .right {
display: flex; display: flex;
flex: 1; flex: 1;
margin: 10px 0 10px 700px; margin: 10px 0 10px 700px;
} }
// .question-number-box{
// position:absolute;right:0px;
// }
// .right{
// position:absolute;right:0px;
// }
.jump-question { .jump-question {
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
// .answer-box,.question-box{
// display: flex;
// flex: 1;
// overflow-y: auto;
// border-radius: 8px;
// // position: relative;
// background-color: rgb(84, 169, 248);
// font-size: 20px;
// height: auto;
// min-height:200px;
// }
.last, .last,
.next { .next {
// background-color: rgba(60, 110, 238,1) !important; // background-color: rgba(60, 110, 238,1) !important;
margin: 0px 15px 15px 20px; margin: 0px 15px 15px 20px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
width: 110px; width: 110px;
height: 46px; height: 46px;
// color: white
} }
// .question-type-box,.question-number-box {
// height: 200px;
// line-height: 200px;
// font-size: 30px;
// font-weight: bold;
// color: rgb(84, 169, 248);
// }
// .word{
// font-size: 20px;
// font-weight: bold;
// color: rgb(84, 169, 248);
// }
.last:active, .last:active,
.next:active { .next:active {
background-color: rgba(60, 110, 238, 1) !important; background-color: rgba(60, 110, 238, 1) !important;
} }
.number { .number {
width: 35px; width: 35px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
border-radius: 50%; border-radius: 50%;
background-color: rgba(60, 110, 238, 1) !important; background-color: rgba(60, 110, 238, 1) !important;
color: white; color: white;
text-align: center; text-align: center;
} }
.all-number { .all-number {
color: #34495e; color: #34495e;
} }
.type { .type {
padding: 2px 10px; padding: 2px 10px;
} }

6
src/views/question-bank/components/ranking-box/index.less
View File

@@ -38,13 +38,9 @@
&:last-child { &:last-child {
margin-right: 0px; margin-right: 0px;
} }
&:hover {
// @include font-color();
}
} }
.ranking-list-btn-active { .ranking-list-btn-active {
font-weight: 600; font-weight: 600;
// @include font-color();
border-bottom: 1px solid rgba(60, 110, 238, 1); border-bottom: 1px solid rgba(60, 110, 238, 1);
} }
} }
@@ -101,7 +97,6 @@
color: #c3c3c6; color: #c3c3c6;
} }
&:hover { &:hover {
// @include box-backgroundColor(0.05);
background-color: rgba(60, 110, 238, 0.05); background-color: rgba(60, 110, 238, 0.05);
} }
} }
@@ -119,7 +114,6 @@
border-radius: 30px; border-radius: 30px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
background-color: rgba(60, 110, 238, 0.9); background-color: rgba(60, 110, 238, 0.9);
// @include box-backgroundColor(0.9);
.ranking-btn-go-icon { .ranking-btn-go-icon {
width: 22px; width: 22px;
height: 22px; height: 22px;

352
src/views/question-bank/index.tsx
View File

@@ -1,199 +1,199 @@
import { useState, useEffect, memo } from 'react' import CategoryList from '@components/category-list'
import QuestionList from '@components/question-list'; import QuestionList from '@components/question-list'
import CategoryList from '@components/category-list'; import req from '@utils/request'
import ContributionList from './components/contribution-list'; import { memo, useEffect, useState } from 'react'
import ContributionList from './components/contribution-list'
import RankingList from './components/practice-list' import RankingList from './components/practice-list'
import { apiName } from './constant'; import { apiName } from './constant'
import req from '@utils/request'; import './index.less'
import './index.less';
const QuestionBank = () => { const QuestionBank = () => {
const [firstCategoryList, setFirstCategoryList] = useState<Record<string, any>[]>([])
const [questionList, setQuestionList] = useState([])
const [labelList, setLabelList] = useState<string | number>() // 选中的标签列表
const [difficulty, setDiffculty] = useState('') //困难度（全部）
const [total, setTotal] = useState(0) // 总条数
const [pageIndex, setPageIndex] = useState(0)
const [primaryCategoryId, setPromaryCategoryId] = useState('') //第一个大类id
const [secondCategoryId, setSecondCategoryId] = useState('')
const [firstCategoryList, setFirstCategoryList] = useState<Record<string, any>[]>([]) const [loading, setLoading] = useState(false)
const [questionList, setQuestionList] = useState([]) const [finished, setFinished] = useState(false)
const [labelList, setLabelList] = useState<string | number>(); // 选中的标签列表 const [switchFlag, setSwitchFlag] = useState(false)
const [difficulty, setDiffculty] = useState(''); //困难度（全部）
const [total, setTotal] = useState(0); // 总条数
const [pageIndex, setPageIndex] = useState(0);
const [primaryCategoryId, setPromaryCategoryId] = useState(''); //第一个大类id
const [secondCategoryId, setSecondCategoryId] = useState('')
const [loading, setLoading] = useState(false) /**
const [finished, setFinished] = useState(false) * 获取大类分类
const [switchFlag, setSwitchFlag] = useState(false) */
const getPrimaryCategoryInfo = () => {
req({
method: 'post',
url: apiName.queryPrimaryCategory,
data: { categoryType: 1 }
})
.then((res: Record<string, any>) => {
if (res.data && res.data.length > 0) {
setPromaryCategoryId(res.data[0].id)
setFirstCategoryList(res.data)
}
})
.catch((err: string) => {
console.log(err)
})
}
/**
* 切换一级分类
* @param {*} e
*/
const onChangeCategory = (item: Record<string, any>) => {
setLabelList('')
setPromaryCategoryId(item.id)
setQuestionList([])
setTotal(0)
setPageIndex(1)
}
/** /**
* 获取大类分类 * 选择标签时，请求列表数据
*/ * @param {*} secondCategoryId 一级分类id
const getPrimaryCategoryInfo = () => { * @param {*} assembleIds 三级标签 assembleIds
req({ */
method: 'post', const onChangeLabel = (secondCategoryId: any, assembleIds: string) => {
url: apiName.queryPrimaryCategory, setSecondCategoryId(secondCategoryId)
data: { categoryType: 1 } setLabelList(assembleIds)
}) setQuestionList([])
.then((res: Record<string, any>) => { setTotal(0)
if (res.data && res.data.length > 0) { setPageIndex(1)
setPromaryCategoryId(res.data[0].id); }
setFirstCategoryList(res.data)
} const queryQuestionList = () => {
}) setLoading(true)
.catch((err: string) => { const params = {
console.log(err) pageNo: pageIndex,
}) pageSize: 20,
labelId: labelList,
categoryId: secondCategoryId,
subjectDifficult: difficulty || ''
} }
req({
/** method: 'post',
* 切换一级分类 url: apiName.getSubjectPage,
* @param {*} e data: params
*/ })
const onChangeCategory = (item: Record<string, any>) => { .then(res => {
setLabelList('') setLoading(false)
setPromaryCategoryId(item.id) let lastList = [...questionList]
setQuestionList([]) const { total = 0, result } = res.data
setTotal(0) setTotal(total)
setPageIndex(1) if (result.length) {
}; lastList = lastList.concat(result)
setQuestionList(lastList)
if (result.length < 20 || lastList.length >= total) {
/** setFinished(true)
* 选择标签时，请求列表数据 } else {
* @param {*} secondCategoryId 一级分类id setFinished(false)
* @param {*} assembleIds 三级标签 assembleIds setSwitchFlag(false)
*/ }
const onChangeLabel = (secondCategoryId: any, assembleIds: string) => {
setSecondCategoryId(secondCategoryId)
setLabelList(assembleIds)
setQuestionList([])
setTotal(0)
setPageIndex(1)
};
const queryQuestionList = () => {
setLoading(true)
const params = {
pageNo: pageIndex,
pageSize: 20,
labelId: labelList,
categoryId: secondCategoryId,
subjectDifficult: difficulty || ''
} }
req({ })
method: 'post', .catch(err => {
url: apiName.getSubjectPage, console.log(err)
data: params })
}).then(res => { .finally(() => {
setLoading(false) setLoading(false)
let lastList = [...questionList] })
const { total, result } = res.data }
if (result.length) {
lastList = lastList.concat(result) useEffect(() => {
setQuestionList(lastList) if (!primaryCategoryId) {
setTotal(total) getPrimaryCategoryInfo()
if (result.length < 20 || lastList.length >= total) {
setFinished(true)
} else {
setFinished(false)
setSwitchFlag(false)
}
}
}).catch(err => {
console.log(err)
}).finally(() => {
setLoading(false)
})
} }
}, [])
useEffect(() => { useEffect(() => {
if (!primaryCategoryId) { if (labelList && secondCategoryId) {
getPrimaryCategoryInfo() queryQuestionList()
} }
}, []) }, [labelList, pageIndex, secondCategoryId, difficulty])
useEffect(() => { /**
if (labelList && secondCategoryId) {
queryQuestionList()
}
}, [labelList, pageIndex, secondCategoryId, difficulty])
/**
* 更多分类切换 * 更多分类切换
* @param {*} e * @param {*} e
*/ */
const onChangeCategoryMore = (id: string, categoryList: Record<string, any>[]) => { const onChangeCategoryMore = (id: string, categoryList: Record<string, any>[]) => {
setFirstCategoryList(categoryList) setFirstCategoryList(categoryList)
setPromaryCategoryId(id) setPromaryCategoryId(id)
setLabelList('') setLabelList('')
setQuestionList([]) setQuestionList([])
setPageIndex(1) setPageIndex(1)
setTotal(0) setTotal(0)
}
const scrollHandler = e => {
let scrollTop = e.target.scrollTop // listBox 滚动条向上卷曲出去的长度，随滚动变化
let clientHeight = e.target.clientHeight // listBox 的视口可见高度，固定不变
let scrollHeight = e.target.scrollHeight // listBox 的整体高度，随数据加载变化
let saveHeight = 30 // 安全距离，距离底部XX时，触发加载
let tempVal = scrollTop + clientHeight + saveHeight
// 如果不加入 saveHeight 安全距离，在 scrollTop + clientHeight == scrollHeight 时，触发加载
// 加入安全距离，相当于在 scrollTop + clientHeight >= scrollHeight - 30 时，触发加载，比前者更早触发
if (tempVal >= scrollHeight) {
if (!finished && !switchFlag) {
// 数据加载未结束 && 未加锁
setPageIndex(pageIndex + 1)
}
setSwitchFlag(true)
} }
}
const scrollHandler = e => { const changeDifficuty = cur => {
let scrollTop = e.target.scrollTop; // listBox 滚动条向上卷曲出去的长度，随滚动变化 if (cur === difficulty) return
let clientHeight = e.target.clientHeight; // listBox 的视口可见高度，固定不变 setPageIndex(1)
let scrollHeight = e.target.scrollHeight; // listBox 的整体高度，随数据加载变化 setDiffculty(cur)
let saveHeight = 30; // 安全距离，距离底部XX时，触发加载 setQuestionList([])
let tempVal = scrollTop + clientHeight + saveHeight; }
// 如果不加入 saveHeight 安全距离，在 scrollTop + clientHeight == scrollHeight 时，触发加载
// 加入安全距离，相当于在 scrollTop + clientHeight >= scrollHeight - 30 时，触发加载，比前者更早触发
if (tempVal >= scrollHeight) {
if (!finished && !switchFlag) {
// 数据加载未结束 && 未加锁
setPageIndex(pageIndex + 1)
}
setSwitchFlag(true)
}
}
const changeDifficuty = cur => { return (
if (cur === difficulty) return <div className='question-bank-box'>
setPageIndex(1) <div className='mask-box' onScroll={scrollHandler}>
setDiffculty(cur) <div className='question-box'>
setQuestionList([]) <div className='category-list-box'>
} {firstCategoryList?.length > 0 && (
<CategoryList
onChangeCategory={onChangeCategory}
categoryList={firstCategoryList}
onChangeLabel={onChangeLabel}
primaryCategoryId={primaryCategoryId}
isMultipleChoice={false}
onChangeCategoryMore={onChangeCategoryMore}
/>
)}
</div>
<div className='question-list-box'>
<QuestionList
pageIndex={pageIndex}
total={total}
questionList={questionList}
changeDifficuty={changeDifficuty}
labelList={labelList}
/>
</div>
return ( <div className='loading-more'>
<div className="question-bank-box"> {questionList.length == 0
<div className='mask-box' onScroll={scrollHandler}> ? '暂无数据'
<div className="question-box" > : loading && !finished
<div className="category-list-box"> ? '努力加载中...'
{firstCategoryList?.length > 0 && ( : '我是有底线的（：'}
<CategoryList </div>
onChangeCategory={onChangeCategory}
categoryList={firstCategoryList}
onChangeLabel={onChangeLabel}
primaryCategoryId={primaryCategoryId}
isMultipleChoice={false}
onChangeCategoryMore={onChangeCategoryMore}
/>
)}
</div>
<div className="question-list-box">
<QuestionList
pageIndex={pageIndex}
total={total}
questionList={questionList}
changeDifficuty={changeDifficuty}
labelList={labelList}
/>
</div>
<div className='loading-more'>{
questionList.length == 0
? "暂无数据"
: loading && !finished
? "努力加载中..."
: "我是有底线的（："
}</div>
</div>
</div>
<div className="ranking-box">
<RankingList />
<ContributionList />
</div>
</div> </div>
); </div>
<div className='ranking-box'>
<RankingList />
<ContributionList />
</div>
</div>
)
} }
export default memo(QuestionBank) export default memo(QuestionBank)

150
src/views/upload-questions/components/repeat-content-box/index.less
View File

@@ -1,88 +1,78 @@
.repeat-content-box { .repeat-content-box {
font-size: 14px; font-size: 14px;
.repeat-subject-box { .repeat-subject-box {
padding-bottom: 14px; padding-bottom: 14px;
margin-bottom: 14px; margin-bottom: 14px;
line-height: 22px; line-height: 22px;
border-bottom: 1px dotted #e4e4e4; border-bottom: 1px dotted #e4e4e4;
.repeat-subject-title { .repeat-subject-title {
margin-right: 8px; margin-right: 8px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: #3c6eee; color: #3c6eee;
line-height: 22px; line-height: 22px;
}
.repeat-subject-text {
flex: 1;
line-height: 18px;
font-size: 14px;
color: rgba(51, 51, 51, 0.8);
}
.repeat-subject-list {
.repeat-subject-item {
display: flex;
margin-bottom: 20px;
padding: 12px 10px 13px;
background: #fff;
border: 1px solid #d4d4d4;
border-radius: 4px;
// .repeat-subject-label {
// margin-right: 4px;
// width: 20px;
// height: 20px;
// line-height: 20px;
// text-align: center;
// color: rgba(51, 51, 51, 0.8);
// border-radius: 50%;
// @include box-backgroundColor(0.3);
// }
.repeat-subject-text {
line-height: 22px;
font-size: 14px;
color: rgba(51, 51, 51, 0.8);
}
&:last-child {
margin-bottom: 0;
}
}
}
} }
.repeat-subject-info-box { .repeat-subject-text {
flex: 1;
line-height: 18px;
font-size: 14px;
color: rgba(51, 51, 51, 0.8);
}
.repeat-subject-list {
.repeat-subject-item {
display: flex; display: flex;
margin-bottom: 0; margin-bottom: 20px;
padding: 12px 10px 13px;
background: #fff;
border: 1px solid #d4d4d4;
border-radius: 4px;
.repeat-subject-text {
line-height: 22px;
font-size: 14px;
color: rgba(51, 51, 51, 0.8);
}
&:last-child {
margin-bottom: 0;
}
}
} }
}
.repeat-subject-info-box {
display: flex;
margin-bottom: 0;
}
} }
.repeat-content-repeat-box { .repeat-content-repeat-box {
// 弹框宽度 // 弹框宽度
.ant-modal-content { .ant-modal-content {
width: 630px; width: 630px;
// 提示框-头部title位置 // 提示框-头部title位置
.ant-modal-header { .ant-modal-header {
border-bottom: none; border-bottom: none;
.ant-modal-title { .ant-modal-title {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: baseline; align-items: baseline;
margin-top: 10px; margin-top: 10px;
font-size: 13px; font-size: 13px;
line-height: 40px; line-height: 40px;
color: rgba(51, 51, 51, 0.8); color: rgba(51, 51, 51, 0.8);
} }
}
// 提示框-两个按钮
.ant-modal-footer {
display: flex;
justify-content: center;
padding: 14px 0;
border-top: none;
.ant-btn {
border-radius: 18px;
}
.ant-btn-primary {
background: rgba(60, 110, 238, 1);
margin-left: 60px;
}
}
} }
// 提示框-两个按钮
.ant-modal-footer {
display: flex;
justify-content: center;
padding: 14px 0;
border-top: none;
.ant-btn {
border-radius: 18px;
}
.ant-btn-primary {
background: rgba(60, 110, 238, 1);
margin-left: 60px;
}
}
}
} }

54
src/views/upload-questions/components/upload-left-layout/index.less
View File

@@ -1,32 +1,30 @@
.upload-left-layout { .upload-left-layout {
width: 233px; width: 233px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 26px; padding-left: 26px;
.upload-left-layout-item { .upload-left-layout-item {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
padding-right: 10px; padding-right: 10px;
margin-bottom: 20px; margin-bottom: 20px;
width: 207px; width: 207px;
height: 48px; height: 48px;
font-size: 16px; font-size: 16px;
color: rgba(57, 60, 76, 1); color: rgba(57, 60, 76, 1);
transition: all 0.3s; transition: all 0.3s;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
border: 1px solid rgba(208, 212, 222, 1); border: 1px solid rgba(208, 212, 222, 1);
border-radius: 12px; border-radius: 12px;
&:hover { &:hover {
@include font-color(0.9);
@include box-backgroundColor(0.3);
}
}
.upload-left-layout-item-active {
color: rgba(60, 110, 238, 1);
font-weight: bold;
background: rgba(60, 110, 238, 0.1);
border: 1px solid rgba(60, 110, 238, 1);
} }
}
.upload-left-layout-item-active {
color: rgba(60, 110, 238, 1);
font-weight: bold;
background: rgba(60, 110, 238, 0.1);
border: 1px solid rgba(60, 110, 238, 1);
}
} }