登录 注册
开源 企业版 高校版 私有云 Gitee AI NEW
扫描微信二维码支付
取消
支付完成
Watch
不关注 关注所有动态 仅关注版本发行动态 关注但不提醒动态
1 Star 0 Fork 4.9K

丛林 / docs

forked from OpenHarmony / docs 
代码 Issues 0 Pull Requests 0 Wiki 统计 流水线
服务
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
克隆/下载
device-camera-visual-details.md 13.19 KB
一键复制 编辑 原始数据 按行查看 历史
wusongqing 提交于 2022-01-30 14:35 . deleted unnecessary links

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 <div> components instead of one <chart> component.

Add a root <div>, set the flex-direction attribute to column to arrange the two bars vertically. The sample code is as follows:

<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 <div> components to the <list> component to form a chart.

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
            }
        });
    }
}
1
https://gitee.com/jungle8023/docs.git
git@gitee.com:jungle8023/docs.git
jungle8023
docs
docs
master
点此查找更多帮助

搜索帮助

Git 命令在线学习 如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
仓库举报
回到顶部