add support for rendering ui on various devices

main
Dawn1Ocean 2024-03-19 11:31:23 +08:00
parent f20a38af9b
commit 3c2b613d87
16 changed files with 64 additions and 55 deletions

View File

@ -105,8 +105,8 @@ export default class DetailFramework extends Component<
description: this.props.isInfoShow['description'] ? ( description: this.props.isInfoShow['description'] ? (
<View <View
style={{ style={{
paddingTop: 10, paddingTop: '20rpx',
paddingBottom: 10, paddingBottom: '20rpx',
width: '94%', width: '94%',
marginLeft: '3%', marginLeft: '3%',
}} }}
@ -123,8 +123,8 @@ export default class DetailFramework extends Component<
info: this.props.isInfoShow['info'] ? ( info: this.props.isInfoShow['info'] ? (
<View <View
style={{ style={{
paddingTop: 10, paddingTop: '20rpx',
paddingBottom: 10, paddingBottom: '20rpx',
width: '94%', width: '94%',
marginLeft: '3%', marginLeft: '3%',
}} }}
@ -133,7 +133,7 @@ export default class DetailFramework extends Component<
isFull isFull
title={pt.get().ticketDetail.info.title} title={pt.get().ticketDetail.info.title}
extra={pt.get().ticketDetail.info.extra} extra={pt.get().ticketDetail.info.extra}
extraStyle={{ fontSize: '32rpx', marginRight: 20 }} extraStyle={{ fontSize: '32rpx', marginRight: '40rpx' }}
> >
<View style={{ display: 'flex' }}> <View style={{ display: 'flex' }}>
<View className='at-article__h3'> <View className='at-article__h3'>
@ -149,7 +149,7 @@ export default class DetailFramework extends Component<
<View></View> <View></View>
), ),
current: this.props.isInfoShow['current'] ? ( current: this.props.isInfoShow['current'] ? (
<View style={{ padding: 10 }}> <View style={{ padding: '20rpx' }}>
<AtSteps <AtSteps
items={this.state.items} items={this.state.items}
current={this.state.current} current={this.state.current}
@ -161,11 +161,11 @@ export default class DetailFramework extends Component<
), ),
notelist: this.props.isInfoShow['notelist'] ? ( notelist: this.props.isInfoShow['notelist'] ? (
this.props.isInfoShow['showAllNotes'] ? ( this.props.isInfoShow['showAllNotes'] ? (
<View style={{ padding: 10 }}> <View style={{ padding: '20rpx' }}>
<NoteList noteList={this.state.notes} /> <NoteList noteList={this.state.notes} />
</View> </View>
) : ( ) : (
<View style={{ padding: 10 }}> <View style={{ padding: '20rpx' }}>
<NoteList <NoteList
noteList={[this.state.notes[this.state.notes.length - 1]]} noteList={[this.state.notes[this.state.notes.length - 1]]}
/> />

View File

@ -35,7 +35,7 @@ export default class NoteCard extends Component<NoteCardProps, {}> {
} }
return ( return (
<View style={{ marginTop: 20, marginBottom: 20 }}> <View style={{ marginTop: '40rpx', marginBottom: '40rpx' }}>
<View className='at-article__p'>{note.op}</View> <View className='at-article__p'>{note.op}</View>
<View className='at-article__info'> <View className='at-article__info'>
{note.createdTime.format(timeFormat)} {note.createdTime.format(timeFormat)}

View File

@ -19,7 +19,7 @@ export default class NoteList extends Component<NoteListProps, {}> {
<AtDivider <AtDivider
fontColor='#CCC' fontColor='#CCC'
content={pt.get().ticketDetail.divider} content={pt.get().ticketDetail.divider}
height={40} height='80rpx'
/> />
{this.props.noteList.map((note, idx) => ( {this.props.noteList.map((note, idx) => (
<View key={idx}> <View key={idx}>

View File

@ -3,8 +3,8 @@ import { AtDivider } from 'taro-ui';
import pt from '@/plain-text'; import pt from '@/plain-text';
export default () => { export default () => {
const blankHeightUpper = 15; const blankHeightUpper = '30rpx';
const blankHeightLower = 110; const blankHeightLower = '220rpx';
return ( return (
<View> <View>
<View style={{ height: blankHeightUpper }}></View> <View style={{ height: blankHeightUpper }}></View>
@ -16,7 +16,7 @@ export default () => {
/> />
</View> </View>
<View className='at-row at-row__justify--center'> <View className='at-row at-row__justify--center'>
<Text style='color:#dddddd;'>© 2024 EVA Tech</Text> <Text style='color:#dddddd; fontSize:32rpx'>© 2024 EVA Tech</Text>
</View> </View>
<View style={{ height: blankHeightLower }}></View> <View style={{ height: blankHeightLower }}></View>
</View> </View>

View File

@ -229,11 +229,11 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
<View> <View>
<View <View
className='at-row' className='at-row'
style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }} style={{ paddingTop: '20rpx', paddingBottom: '20rpx', width: '100%' }}
> >
<View <View
className='at-col' className='at-col'
style={{ marginLeft: 10, paddingRight: 5, width: '50%' }} style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
> >
<AtButton <AtButton
loading={this.state.isPickLoading} loading={this.state.isPickLoading}
@ -246,7 +246,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
</View> </View>
<View <View
className='at-col' className='at-col'
style={{ marginLeft: 10, paddingRight: 5, width: '50%' }} style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
> >
<AtButton <AtButton
loading={this.state.isOreoLoading} loading={this.state.isOreoLoading}
@ -260,11 +260,11 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
</View> </View>
<View <View
className='at-row' className='at-row'
style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }} style={{ paddingTop: '20rpx', paddingBottom: '20rpx', width: '100%' }}
> >
<View <View
className='at-col' className='at-col'
style={{ marginLeft: 10, paddingRight: 5, width: '50%' }} style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
> >
<AtButton <AtButton
loading={this.state.isStatusLoading} loading={this.state.isStatusLoading}
@ -277,7 +277,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
</View> </View>
<View <View
className='at-col' className='at-col'
style={{ marginLeft: 10, paddingRight: 5, width: '50%' }} style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
> >
<AtButton <AtButton
disabled={this.state.isCommentDisable} disabled={this.state.isCommentDisable}
@ -293,11 +293,11 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
) : ( ) : (
<View <View
className='at-row' className='at-row'
style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }} style={{ paddingTop: '20rpx', paddingBottom: '20rpx', width: '100%' }}
> >
<View <View
className='at-col' className='at-col'
style={{ marginLeft: 10, paddingRight: 5, width: '50%' }} style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
> >
<AtButton <AtButton
loading={this.state.isRetrieveLoading} loading={this.state.isRetrieveLoading}
@ -310,7 +310,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
</View> </View>
<View <View
className='at-col' className='at-col'
style={{ marginRight: 10, paddingLeft: 5, width: '50%' }} style={{ marginRight: '20rpx', paddingLeft: '10rpx', width: '50%' }}
> >
<AtButton <AtButton
disabled={this.state.isCommentDisable} disabled={this.state.isCommentDisable}
@ -374,7 +374,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
value={this.state.comment} value={this.state.comment}
onChange={this.handleCommentChange.bind(this)} onChange={this.handleCommentChange.bind(this)}
maxLength={200} maxLength={200}
height={200} height='400rpx'
placeholder={pt.get().ticketDetail.comment.placeholder} placeholder={pt.get().ticketDetail.comment.placeholder}
/> />
<AtButton formType='submit' type='primary'> <AtButton formType='submit' type='primary'>

View File

@ -36,19 +36,19 @@ class Card extends Component {
style={{ style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
marginBottom: 20, marginBottom: '40rpx',
}} }}
> >
<Image <Image
src={iconsrc} src={iconsrc}
style={{ style={{
width: 24, width: '48rpx',
height: 24, height: '48rpx',
}} }}
/> />
<View <View
style={{ style={{
marginLeft: 10, marginLeft: '20rpx',
fontSize: '60rpx', fontSize: '60rpx',
fontWeight: 'bold', fontWeight: 'bold',
}} }}

View File

@ -10,7 +10,7 @@ export default class TitleCard extends React.Component {
<View className='at-row at-row__align--center'> <View className='at-row at-row__align--center'>
<View className='at-col at-col-1 at-col--auto'> <View className='at-col at-col-1 at-col--auto'>
<Image <Image
style='width: 50px; height: 50px; margin-left: 15px;' style='width: 100rpx; height: 100rpx; margin-left: 30rpx;'
src={logo} src={logo}
mode='aspectFit' mode='aspectFit'
/> />

View File

@ -20,7 +20,7 @@ class CardContent {
function mainPageCard(c: CardContent): JSX.Element { function mainPageCard(c: CardContent): JSX.Element {
return ( return (
<View style={{ marginTop: 10, marginBottom: 20 }}> <View style={{ marginTop: '20rpx', marginBottom: '40rpx' }}>
<AtCard note={c.note} extra={c.extra} title={c.title}> <AtCard note={c.note} extra={c.extra} title={c.title}>
{c.content()} {c.content()}
</AtCard> </AtCard>
@ -106,7 +106,7 @@ export default class MainPage extends Component<{}, MainPageState> {
<View> <View>
<TitleCard /> <TitleCard />
<View style={{ width: '94%', marginLeft: '3%' }}> <View style={{ width: '94%', marginLeft: '3%' }}>
<View style={{ marginTop: 30 }}> <View style={{ marginTop: '60rpx' }}>
{mainPageCard(this.state.dutyInfoCard)} {mainPageCard(this.state.dutyInfoCard)}
{mainPageCard(this.state.tipsInfoCard)} {mainPageCard(this.state.tipsInfoCard)}
<ExpandItem <ExpandItem

View File

@ -36,20 +36,20 @@ class Card extends Component {
style={{ style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
marginBottom: 20, marginBottom: '40rpx',
}} }}
> >
<Image <Image
src={iconsrc} src={iconsrc}
style={{ style={{
width: 24, width: '48rpx',
height: 24, height: '48rpx',
}} }}
/> />
<View <View
style={{ style={{
marginLeft: 10, marginLeft: '20rpx',
fontSize: 30, fontSize: '60rpx',
fontWeight: 'bold', fontWeight: 'bold',
}} }}
> >

View File

@ -10,7 +10,7 @@ export default class MemberTitleCard extends React.Component {
<View className='at-row at-row__align--center'> <View className='at-row at-row__align--center'>
<View className='at-col at-col-1 at-col--auto'> <View className='at-col at-col-1 at-col--auto'>
<Image <Image
style='width: 50px; height: 50px; margin-left: 15px;' style='width: 100rpx; height: 100rpx; margin-left: 30rpx;'
src={logo} src={logo}
mode='aspectFit' mode='aspectFit'
/> />

View File

@ -24,7 +24,7 @@ class CardContent {
function memberPageCard(c: CardContent): JSX.Element { function memberPageCard(c: CardContent): JSX.Element {
return ( return (
<View style={{ marginTop: 10 }}> <View style={{ marginTop: '20rpx' }}>
<AtCard note={c.note} extra={c.extra} title={c.title}> <AtCard note={c.note} extra={c.extra} title={c.title}>
{c.content()} {c.content()}
</AtCard> </AtCard>
@ -124,7 +124,7 @@ export default class MemberPage extends Component<{}, MemberPageState> {
return ( return (
<View> <View>
<MemberTitleCard /> <MemberTitleCard />
<View style={{ marginTop: 30 }}> <View style={{ marginTop: '60rpx' }}>
{memberPageCard(this.state.dutyInfoCard)} {memberPageCard(this.state.dutyInfoCard)}
{memberPageCard(this.state.tipsInfoCard)} {memberPageCard(this.state.tipsInfoCard)}
<ExpandItem <ExpandItem

View File

@ -188,11 +188,13 @@ export default class RepairPage extends Component<{}, RepairPageState> {
this.state.currentTicketsIdName.map((pair, idx) => ( this.state.currentTicketsIdName.map((pair, idx) => (
<AtCard <AtCard
key={idx} key={idx}
title={pair.get(pair.keys().next().value)} //pair.keys().next().value == id title={pair.values().next().value} //pair.keys().next().value == ticket['device'] + ' ' + ticket['deviceModel']
extra={pt.get().repairPage.currentTicket.extra} extra={pt.get().repairPage.currentTicket.extra}
onClick={() => { onClick={() => {
Taro.navigateTo({ Taro.navigateTo({
url: '/pages/TicketDetail/TicketDetail?id=' + pair.keys()[0], url:
'/pages/TicketDetail/TicketDetail?id=' +
pair.keys().next().value,
}); });
}} }}
note={ note={
@ -202,7 +204,7 @@ export default class RepairPage extends Component<{}, RepairPageState> {
} }
> >
<DetailFramework <DetailFramework
id={pair.keys()[0]} id={pair.keys().next().value} //pair.keys().next().value == id
isInfoShow={isInfoShow} isInfoShow={isInfoShow}
middleButton={middleButton} middleButton={middleButton}
/> />
@ -216,8 +218,8 @@ export default class RepairPage extends Component<{}, RepairPageState> {
<AtMessage /> <AtMessage />
<View <View
style={{ style={{
marginTop: 10, marginTop: '20rpx',
marginBottom: 20, marginBottom: '40rpx',
}} }}
> >
{ticketsRenderer} {ticketsRenderer}

View File

@ -16,7 +16,7 @@ interface MyTicketState {
export default class MyTicketPage extends Component<{}, MyTicketState> { export default class MyTicketPage extends Component<{}, MyTicketState> {
state = { state = {
fixList: [new TicketListItem(0, '', '', 1, moment(), false)], fixList: [new TicketListItem(0, '', '', 1, moment())],
rs: new RequestState(), rs: new RequestState(),
}; };

View File

@ -11,7 +11,6 @@ import logo from '@/assets/images/UserPage/logo.png';
import { setLocaleData } from '@/service/localeData'; import { setLocaleData } from '@/service/localeData';
import './user.scss'; import './user.scss';
const listLangInterval = 20;
const memberClickTimes = 7; const memberClickTimes = 7;
export default class UserPage extends Component { export default class UserPage extends Component {
@ -104,11 +103,11 @@ export default class UserPage extends Component {
<View> <View>
<View <View
className='at-row at-row__justify--center at-row__align--end' className='at-row at-row__justify--center at-row__align--end'
style='height:110px;' style='height:220rpx;'
> >
<Image <Image
onTap={this.onTapImage} onTap={this.onTapImage}
style='width: 100px;height: 100px;' style='width: 200rpx;height: 200rpx;'
src={logo} src={logo}
mode='aspectFit' mode='aspectFit'
/> />
@ -119,23 +118,29 @@ export default class UserPage extends Component {
></AtToast> ></AtToast>
<View <View
className='at-row at-row__justify--center at-row__align--center' className='at-row at-row__justify--center at-row__align--center'
style='height:60px;color:#696969;' style='height:120rpx;color:#696969;'
> >
<Text> EVA Notify v1.0.0</Text> <Text style={{ fontSize: '32rpx' }}> EVA Notify v1.0.0</Text>
</View> </View>
<AtList> <AtList>
<AtListItem <AtListItem
title={pt.get().userPage.ticketColumn.title} title={pt.get().userPage.ticketColumn.title}
note={pt.get().userPage.ticketColumn.note} note={pt.get().userPage.ticketColumn.note}
arrow='right' arrow='right'
iconInfo={{ color: '#E69966', value: 'clock' }} iconInfo={{
color: '#E69966',
value: 'clock',
}}
onClick={this.myTicketPage} onClick={this.myTicketPage}
/> />
<AtListItem <AtListItem
title={pt.get().userPage.infoColumn.title} title={pt.get().userPage.infoColumn.title}
note={pt.get().userPage.infoColumn.note} note={pt.get().userPage.infoColumn.note}
arrow='right' arrow='right'
iconInfo={{ color: '#78A4FA', value: 'user' }} iconInfo={{
color: '#78A4FA',
value: 'user',
}}
onClick={this.informPage} onClick={this.informPage}
/> />
<AtListItem <AtListItem
@ -143,7 +148,10 @@ export default class UserPage extends Component {
note={pt.get().userPage.reportColumn.note} note={pt.get().userPage.reportColumn.note}
extraText='' extraText=''
arrow='right' arrow='right'
iconInfo={{ color: '#9ACD32', value: 'message' }} iconInfo={{
color: '#9ACD32',
value: 'message',
}}
onClick={this.reportPage} onClick={this.reportPage}
/> />
<AtListItem <AtListItem
@ -154,7 +162,7 @@ export default class UserPage extends Component {
thumb={aboutIcon} thumb={aboutIcon}
onClick={this.aboutPage} onClick={this.aboutPage}
/> />
<View style={{ height: listLangInterval }}></View> <View style={{ height: '40rpx' }}></View>
<Picker <Picker
mode='selector' mode='selector'
range={this.state.selector} range={this.state.selector}

View File

@ -74,7 +74,7 @@ export const repairPageZhCn: RepairPageText = {
}, },
descriptionText: { descriptionText: {
title: '问题描述', title: '问题描述',
placeholder: '如:ZJUWLAN 无法登入校内网站', placeholder: '如:无法登入校内网站',
}, },
checkboxText: { checkboxText: {
none: '无附件', none: '无附件',

View File

@ -28,7 +28,6 @@ export function getCurrentTicket(that: RepairPage) {
); );
} }
}); });
console.log(newIdNameList);
that.setState({ that.setState({
currentTicketsIdName: newIdNameList, currentTicketsIdName: newIdNameList,
}); });