harmony 鸿蒙Building the Details Page
Building the Details Page
The detail page displays the air quality data of a week in a chart. There are two parts on the page: title bar and chart bar. Considering the display effect of the chart bar, use multiple
Add a root
<div class="container">
<div class="header" onclick="backMain">
<image class="back" src="common/ic_back.png"></image>
<text class="title">
History
</text>
</div>
<list class="chart-list">
</list>
</div>
In the preceding example, onclick=“backMain” indicates that the application returns to the home page when the click event is triggered. The sample code for detail.js is as follows:
import router from '@system.router'
export default {
backMain() {
router.replace({
// Home page URL
uri: 'pages/index/index',
params: {
// Parameters to pass to the home page
selectedCityIndex: this.selectedCityIndex
}
});
}
}
Add
The complete sample code in the three files is as follows.
detail.hml
<div class="container">
<div class="header" onclick="backMain">
<image class="back" src="common/ic_back.png"></image>
<text class="title">
History
</text>
</div>
<list class="chart-list">
<list-item class="list-item-title">
<text class="location">{{location}}
</text>
</list-item>
<list-item class="list-item-chart">
<div style="margin-top: 24px;width: 960px;height: 256px;">
<div class="chart-wrapper" style="margin-left: 128px;">
<text class="gas-name">
CO
</text>
<div class="chart">
<div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
<div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
<div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
<div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
<div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
<div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
<div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
</div>
<div class="white-line"></div>
<div class="week">
<text class="day">
MON
</text>
<text class="day">
TUE
</text>
<text class="day">
WED
</text>
<text class="day">
THU
</text>
<text class="day">
FRI
</text>
<text class="day">
SAT
</text>
<text class="day">
SUN
</text>
</div>
</div>
<div class="chart-wrapper" style="margin-left: 88px;">
<text class="gas-name">
SO2
</text>
<div class="chart">
<div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
<div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
<div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
<div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
<div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
<div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
<div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
</div>
<div class="white-line"></div>
<div class="week">
<text class="day">
MON
</text>
<text class="day">
TUE
</text>
<text class="day">
WED
</text>
<text class="day">
THU
</text>
<text class="day">
FRI
</text>
<text class="day">
SAT
</text>
<text class="day">
SUN
</text>
</div>
</div>
</div>
</list-item>
<list-item class="list-item-chart">
<div style="margin-top: 24px;width: 960px;height: 256px;">
<div class="chart-wrapper" style="margin-left: 128px;">
<text class="gas-name">
PM10
</text>
<div class="chart">
<div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
<div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
<div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
<div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
<div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
<div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
<div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
</div>
<div class="white-line"></div>
<div class="week">
<text class="day">
MON
</text>
<text class="day">
TUE
</text>
<text class="day">
WED
</text>
<text class="day">
THU
</text>
<text class="day">
FRI
</text>
<text class="day">
SAT
</text>
<text class="day">
SUN
</text>
</div>
</div>
<div class="chart-wrapper" style="margin-left: 88px;">
<text class="gas-name">
PM2.5
</text>
<div class="chart">
<div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
<div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
<div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
<div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
<div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
<div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
<div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
</div>
<div class="white-line"></div>
<div class="week">
<text class="day">
MON
</text>
<text class="day">
TUE
</text>
<text class="day">
WED
</text>
<text class="day">
THU
</text>
<text class="day">
FRI
</text>
<text class="day">
SAT
</text>
<text class="day">
SUN
</text>
</div>
</div>
</div>
</list-item>
<list-item class="list-item-chart">
<div style="margin-top: 24px;width: 960px;height: 256px;">
<div class="chart-wrapper" style="margin-left: 128px;">
<text class="gas-name">
NO2
</text>
<div class="chart">
<div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
<div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
<div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
<div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
<div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
<div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
<div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
</div>
<div class="white-line"></div>
<div class="week">
<text class="day">
MON
</text>
<text class="day">
TUE
</text>
<text class="day">
WED
</text>
<text class="day">
THU
</text>
<text class="day">
FRI
</text>
<text class="day">
SAT
</text>
<text class="day">
SUN
</text>
</div>
</div>
</div>
</list-item>
</list>
</div>
detail.css
.location {
text-align: center;
color: #ffffff;
width: 960px;
height: 52px;
font-size: 40px;
}
.container {
height: 480px;
width: 960px;
flex-direction: column;
}
.header {
width: 960px;
height: 72px;
}
.back {
width: 36px;
height: 36px;
margin-left: 39px;
margin-top: 23px;
}
.title {
width: 296px;
height: 40px;
margin-top: 20px;
margin-left: 21px;
color: #e6e6e6;
}
.chart-list {
width: 960px;
height: 408px;
}
.list-item-title {
width: 960px;
height: 52px;
}
.list-item-chart {
width: 960px;
height: 280px;
}
.chart-wrapper {
width: 308px;
height: 256px;
flex-direction: column;
}
.gas-name {
width: 308px;
height: 35px;
text-align: left;
}
.chart {
width: 308px;
height: 155px;
margin-top: 10px;
justify-content: flex-start;
align-items: flex-end;
}
.chart-item {
width: 24px;
margin-left: 18px;
border-radius: 3px;
}
.white-line {
width: 308px;
height: 2px;
background-color: #ffffff;
margin-top: 22px;
}
.week {
width: 308px;
height: 17px;
margin-top: 6px;
border-color: #ffffff;
border-radius: 2px;
margin-top: 6px;
}
.day {
width: 26px;
height: 17px;
font-size: 10px;
margin-left: 16px;
text-align: center;
}
detail.js
import router from '@system.router'
export default {
data: {
location: ''
},
onInit() {
if (this.selectedCityIndex === 0) {
this.location = 'Dongguan';
} else {
this.location = 'Shenzhen';
}
},
backMain() {
router.replace({
uri: 'pages/index/index',
params: {
selectedCityIndex: this.selectedCityIndex
}
});
}
}
你可能感兴趣的鸿蒙文章
harmony 鸿蒙Development Examples
harmony 鸿蒙Screen and Camera Control Overview
0
赞
- 所属分类： 后端技术
- 本文标签：
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦