Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式更改超小屏幕适配

Browse Source
This commit is contained in:
lyp 2024-12-24 15:41:20 +08:00
parent 297859f287
commit 880a6227d0
7 changed files with 379 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ai/mod/AiHelperMod.tsx
View File

@ -152,7 +152,9 @@ export default function AiHelperMod(props: PropsType) {
}}><RedoOutlined /></Button>
}
return (
<div>
<div
// style={{ whiteSpace: 'nowrap' }}
>
<span
style={{
cursor: 'pointer'

31
src/components/card/CardProj.tsx
View File

@ -335,6 +335,7 @@ export default function CardProj(props: any) {
{data.gmtCreate}
</div>
{/* 标签 */}
<div className='selectTagmax'>
{props.tagArray.map((item: any) => {
return (
@ -356,7 +357,7 @@ export default function CardProj(props: any) {
)
})}
</div>
</div>
@ -432,6 +433,7 @@ export default function CardProj(props: any) {
>
{data.pay.payment / 100}
{/* 2000.00 */}
</div>
<div className='coupon-num' style={{ display: data.pay.couponAmount ? 'unset' : 'none', color: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#FF5D15' : '#8a8a8a' }}>(已优惠{data.pay.couponAmount / 100}元)</div>
</div>
@ -443,6 +445,7 @@ export default function CardProj(props: any) {
</div>
</div>
<div style={{ display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none' }}>
<div className='cpbl-btn-box'>
<div className='cpbl-btn'>
<div className='threeBtn' onClick={() => {
if (data.generate.generateStatus == GenerateStatus.SUCCESS || payCharge == '全托管') {
@ -485,6 +488,32 @@ export default function CardProj(props: any) {
<div>菜单排序({data.projModCount})</div>
</div>
</div>
<div className='selectTagmin'>
{props.tagArray.map((item: any) => {
return (
<div className='proj-progress' key={item.value} style={{
background: tagIdArray.includes(item.value) ? '#ff7b00' : '',
color: tagIdArray.includes(item.value) ? '#ffffff' : '#5a5a5a',
border: tagIdArray.includes(item.value) ? ' 1px solid #ff7b00' : ' 1px solid #5a5a5a',
// display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
marginBottom: 10
}}
onClick={() => {
upTag(item.value, data.projId)
// upData(item.value)
// props.updata()
}}
>
{item.label}
{/* 提交版权中心 */}
</div>
)
})}
</div>
</div>
</div>
</div>

49
src/components/card/card-proj.css
View File

@ -1,9 +1,21 @@
@media (min-width: 1571px) {
.selectTagmin {
display: none;
}
.selectTagmax {
display: flex;
}
.option {
display: flex;
/* background-color: red; */
align-items: flex-start;
}
.downloadBox {
display: flex;
flex-direction: column;
@ -11,10 +23,15 @@
margin-left: 10px;
margin-top: 2px;
}
.zpibtn{margin-left: 10px;}
.zpibtn {
margin-left: 10px;
}
.down-pdf {
margin-left: 5px;
}
.card-proj {
border-radius: 6px;
background-color: var(--color-light);
@ -38,6 +55,7 @@
padding-left: 21px;
padding-right: 29px;
}
.promptTags {
padding-left: 21px;
display: flex;
@ -46,6 +64,7 @@
/* justify-content: center; */
margin-top: 10px;
}
.cpt-left {
display: flex;
/* align-items: center; */
@ -598,6 +617,7 @@
padding-left: 21px;
padding-right: 29px;
}
.promptTags {
padding-left: 21px;
display: flex;
@ -605,6 +625,7 @@
align-items: center;
/* justify-content: center; */
}
.cpt-left {
display: flex;
/* align-items: center; */
@ -625,6 +646,13 @@
color: #292929;
margin-left: 18px;
cursor: pointer;
/* width: 300px; */
/* 超出部分勇...代替 */
/* overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; */
/* background-color: pink; */
}
.cp-tag {
@ -783,7 +811,7 @@
}
.cpbl-money {
min-width: 270px;
width: 230px;
padding: 0 20px;
box-sizing: border-box;
@ -834,15 +862,30 @@
.moneyBox {}
.cpbl-btn-box {
display: flex;
}
.cpbl-btn {
display: flex;
/* background-color: red; */
flex-direction: column;
align-items: flex-start;
margin-left: 60px;
margin-left: 20px;
margin-top: 5px;
}
.selectTagmin {
display: flex;
flex-direction: column;
margin-top: 10px;
margin-left: 20px;
}
.selectTagmax {
display: none;
}
.threeBtn {
display: flex;
cursor: pointer;

6
src/components/menu/MenuWithTopButton.tsx
View File

@ -98,11 +98,13 @@ export default function MenuWithTopButton(props: IMenuWithTopButton) {
{/* button 是三个黄色按钮 */}
<div className='top'>
<div className='top-lift'>
<div className='objimg'>
<img src={objImg} alt="" style={{ display: props.button.name == '项目' ? 'block' : 'none' }} />
</div>
{/* <img src={refunimg} alt="" style={{ display: props.button.name == '退款' ? 'block' : 'none', width: 16 }} /> */}
{/* <img src={correctionImg} alt="" style={{ display: props.button.name == '补正' ? 'block' : 'none', width: 16 }} /> */}
<div> {props.button.name}</div>
<div className='objimgName'> {props.button.name}</div>
</div>
<div className='top-right' onClick={(e) => {
props.button.handle(e);
@ -133,7 +135,9 @@ export default function MenuWithTopButton(props: IMenuWithTopButton) {
// }
}}>
{/* refunimg */}
{/* <div className='objimg'> */}
<img src={newImg} alt="" />
{/* </div> */}
<div style={{ display: props.button.name == '项目' ? 'block' : 'none' }}>创建</div>
{/* <div style={{ display: props.button.name == '退款' ? 'block' : 'none' }}>申请</div> */}
{/* <div style={{ display: props.button.name == '补正' ? 'block' : 'none' }}>申请</div> */}

144
src/components/menu/menu-with-top-button.css
View File

@ -1,9 +1,116 @@
@media (max-width: 1550px) {
.menu-with-top-button {
/* padding: 15px; */
}
.menu-with-top-button .top {
width: 231px;
/* 修改 */
width: 191px;
height: 56px;
font-size: 18px;
/* color: #FFAF22; */
background: #FFFBEF;
color: #FFAF22;
display: flex;
align-items: center;
border-top: 1px solid #fde9ab;
border-bottom: 1px solid #fde9ab;
}
.menu-with-top-button .top .top-lift {
display: flex;
align-items: center;
font-size: 18px;
}
.menu-with-top-button .top .top-lift img {
width: 19px;
height: 19px;
margin-left: 14px;
margin-right: 13px;
}
.menu-with-top-button .top .top-right {
display: flex;
align-items: center;
font-size: 14px;
cursor: pointer;
width: 53px;
/* background-color: red; */
margin-left: 82px;
/* 修改 */
margin-left: 32px;
}
/* 修改添加 */
.objimg{
/* display: none; */
}
.menu-with-top-button .top .top-right img {
/* margin-left: 96px; */
margin-right: 10px;
width: 14px;
height: 13px;
}
.menu-with-top-button ul {
padding-top: 12px;
padding-bottom: 12px;
width: 230px;
/* 修改 */
width: 190px;
/* background-color:pink; */
}
.menu-with-top-button ul li {
height: 50px;
margin-left: 35px;
font-weight: 400;
font-size: 16px;
color: #313131;
line-height: 50px;
cursor: pointer;
/* background-color: red; */
text-indent: 32px;
/* 修改 */
text-indent: 22px;
}
.menu-with-top-button ul li.active {
width: 213px;
/* 修改 */
width: 171px;
height: 50px;
background: #FF9F08;
border-radius: 25px;
color: white;
text-indent: 50px;
}
.topIcon{
display: none;
color: white;
margin-left: 150px;
}
}
@media (min-width: 1551px){
.menu-with-top-button {
/* padding: 15px; */
}
.menu-with-top-button .top {
width: 231px;
height: 56px;
font-size: 18px;
/* color: #FFAF22; */
@ -78,40 +185,15 @@
color: white;
margin-left: 68px;
}
/* .menu-with-top-button .top-button {
width: 268px;
height: 56px;
background: #FFFBEF;
font-size: 18px;
color: #FFAF22;
}
.menu-with-top-button ul li:last-child {
margin-bottom: 0;
}
.menu-with-top-button ul li .menu-icon {
width: 30px;
height: 30px;
}
.menu-with-top-button ul li .menu-name {
padding-left: 5px;
} */

10
src/route/index/Index.tsx
View File

@ -990,7 +990,9 @@ export default function Index() {
{/* <div style={{display:'flex'}}> */}
{/* <div style={{height:1000,width:6,background:'red',marginRight:-6,zIndex:99}}></div> */}
<div className="left" >
<div style={{ height: '15px', width: '230px', background: 'white' }}></div>
<div className='mediaBox' style={{
// height: '15px', width: '230px',
background: 'white' }}></div>
<MenuWithTopButton
button={projMenu.button}
list={projMenu.list}
@ -1219,8 +1221,10 @@ export default function Index() {
value={nowKeyword}
onSearch={handleSearch}
onChange={handleChange}
className='searchInputmedia'
style={{
width: '200px',
// maxWidth: '200px',
width: '170px',
height: '31px',
display: showSearchBox ? 'block' : 'none'
}}
@ -1229,7 +1233,7 @@ export default function Index() {
<Select
value={type}
allowClear
style={{ height: '31px', width: '130px', marginLeft: 20, display: showSearchBox ? 'block' : 'none' }}
style={{ height: '31px', width: '110px', marginLeft: 20, display: showSearchBox ? 'block' : 'none' }}
onChange={(value: string) => {
setType(value)

24
src/route/index/index.css
View File

@ -1,4 +1,9 @@
@media (min-width: 1671px) {
.mediaBox{
height: 15px;
width: 230px;
}
.index {
height: 100vh;
display: flex;
@ -258,6 +263,10 @@
}
@media (max-width: 1670px) {
.mediaBox{
height: 15px;
width: 230px;
}
.index {
height: 100vh;
display: flex;
@ -518,6 +527,10 @@
}
@media (max-width: 1550px) {
.mediaBox{
height: 15px;
width: 150px;
}
.index {
height: 100vh;
display: flex;
@ -621,6 +634,8 @@
/* position: fixed; */
/* width: 267px; */
width: 230px;
/* 修改 */
width: 190px;
min-height: calc(100vh - 65px);
/* overflow: auto; */
/* top: 65px; */
@ -647,6 +662,9 @@
.belongPeopleMenu-box {
min-height: 200px;
/* 修改 */
min-height: 160px;
/* background-color: pink; */
border-bottom: 1px solid #fde9ab;
@ -656,6 +674,8 @@
.belongpeopleName {
color: #313131;
width: 230px;
/* 修改 */
width: 190px;
height: 40px;
text-align: left;
font-size: 16px;
@ -675,10 +695,14 @@
.index .right {
margin-left: 250px;
/* 修改 */
margin-left: 210px;
box-sizing: border-box;
height: 100%;
position: fixed;
width: calc(100vw - 270px);
/* 修改 */
width: calc(100vw - 230px);
/* width: 1575px; */
}