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

View File

@ -35,7 +35,7 @@ export default class NoteCard extends Component<NoteCardProps, {}> {
}
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__info'>
{note.createdTime.format(timeFormat)}

View File

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

View File

@ -3,8 +3,8 @@ import { AtDivider } from 'taro-ui';
import pt from '@/plain-text';
export default () => {
const blankHeightUpper = 15;
const blankHeightLower = 110;
const blankHeightUpper = '30rpx';
const blankHeightLower = '220rpx';
return (
<View>
<View style={{ height: blankHeightUpper }}></View>
@ -16,7 +16,7 @@ export default () => {
/>
</View>
<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 style={{ height: blankHeightLower }}></View>
</View>

View File

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

View File

@ -36,19 +36,19 @@ class Card extends Component {
style={{
display: 'flex',
alignItems: 'center',
marginBottom: 20,
marginBottom: '40rpx',
}}
>
<Image
src={iconsrc}
style={{
width: 24,
height: 24,
width: '48rpx',
height: '48rpx',
}}
/>
<View
style={{
marginLeft: 10,
marginLeft: '20rpx',
fontSize: '60rpx',
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-col at-col-1 at-col--auto'>
<Image
style='width: 50px; height: 50px; margin-left: 15px;'
style='width: 100rpx; height: 100rpx; margin-left: 30rpx;'
src={logo}
mode='aspectFit'
/>

View File

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

View File

@ -36,20 +36,20 @@ class Card extends Component {
style={{
display: 'flex',
alignItems: 'center',
marginBottom: 20,
marginBottom: '40rpx',
}}
>
<Image
src={iconsrc}
style={{
width: 24,
height: 24,
width: '48rpx',
height: '48rpx',
}}
/>
<View
style={{
marginLeft: 10,
fontSize: 30,
marginLeft: '20rpx',
fontSize: '60rpx',
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-col at-col-1 at-col--auto'>
<Image
style='width: 50px; height: 50px; margin-left: 15px;'
style='width: 100rpx; height: 100rpx; margin-left: 30rpx;'
src={logo}
mode='aspectFit'
/>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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