diff --git a/UI/AdaptivePortalList/README_zh.md b/UI/AdaptivePortalList/README_zh.md new file mode 100644 index 0000000000000000000000000000000000000000..08bec1b4c9f57d7cbb4d09a66025f59289fa15fa --- /dev/null +++ b/UI/AdaptivePortalList/README_zh.md @@ -0,0 +1,13 @@ +# 多设备自适应的效率型首页 + +### 简介 + +本示例展示了一个列表页面，在不同尺寸的设备上，通过拉伸、缩放、均分、占比等自适应能力，使用多态控件、布局和组件的延展性以及响应式布局的运用，自适应展示为合理的布局效果。 + +### 使用说明 + +开发者可将本示例安装到不同类型设备上，查看自适应效果 + +### 约束与限制 + +本示例仅支持在大型系统上运行。 diff --git a/UI/AdaptivePortalList/build.gradle b/UI/AdaptivePortalList/build.gradle new file mode 100644 index 0000000000000000000000000000000000000000..078a938c864dba35fdfe799e50c9237dac685afe --- /dev/null +++ b/UI/AdaptivePortalList/build.gradle @@ -0,0 +1,36 @@ +// Top-level build file where you can add configuration options common to all sub-projects/modules. +apply plugin: 'com.huawei.ohos.app' + +//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510 +ohos { + compileSdkVersion 6 + defaultConfig { + compatibleSdkVersion 6 + } +} + +buildscript { + repositories { + maven { + url 'https://repo.huaweicloud.com/repository/maven/' + } + maven { + url 'https://developer.huawei.com/repo/' + } + } + dependencies { + classpath 'com.huawei.ohos:hap:2.4.4.2' + } +} + +allprojects { + repositories { + maven { + url 'https://repo.huaweicloud.com/repository/maven/' + } + maven { + url 'https://developer.huawei.com/repo/' + } + jcenter() + } +} diff --git a/UI/AdaptivePortalList/entry/build.gradle b/UI/AdaptivePortalList/entry/build.gradle new file mode 100644 index 0000000000000000000000000000000000000000..fac23f31a7b3ea6a1a9977c974c20ae13287bf52 --- /dev/null +++ b/UI/AdaptivePortalList/entry/build.gradle @@ -0,0 +1,21 @@ +apply plugin: 'com.huawei.ohos.hap' +//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510 +ohos { + compileSdkVersion 6 + defaultConfig { + compatibleSdkVersion 6 + } + buildTypes { + release { + proguardOpt { + proguardEnabled false + rulesFiles 'proguard-rules.pro' + } + } + } + +} + +dependencies { + implementation fileTree(dir: 'libs', include: ['*.jar', '*.har']) +} \ No newline at end of file diff --git a/UI/AdaptivePortalList/entry/src/main/config.json b/UI/AdaptivePortalList/entry/src/main/config.json new file mode 100644 index 0000000000000000000000000000000000000000..02621350d645c5d965f5202f2f9534db64a96ad8 --- /dev/null +++ b/UI/AdaptivePortalList/entry/src/main/config.json @@ -0,0 +1,57 @@ +{ + "app": { + "bundleName": "ohos.samples.adaptiveportallist", + "version": { + "code": 1000000, + "name": "1.0.0" + } + }, + "deviceConfig": {}, + "module": { + "package": "ohos.samples.adaptiveportallist", + "name": ".MyApplication", + "mainAbility": "ohos.samples.adaptiveportallist.MainAbility", + "deviceType": [ + "phone", + "tablet" + ], + "distro": { + "deliveryWithInstall": true, + "moduleName": "entry", + "moduleType": "entry", + "installationFree": false + }, + "abilities": [ + { + "skills": [ + { + "entities": [ + "entity.system.home" + ], + "actions": [ + "action.system.home" + ] + } + ], + "name": "ohos.samples.adaptiveportallist.MainAbility", + "icon": "$media:icon", + "description": "$string:mainability_description", + "label": "$string:entry_MainAbility", + "type": "page", + "launchType": "standard" + } + ], + "js": [ + { + "pages": [ + "pages/index/index" + ], + "name": "default", + "window": { + "designWidth": 720, + "autoDesignWidth": true + } + } + ] + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalList/entry/src/main/java/ohos/samples/adaptiveportallist/MainAbility.java b/UI/AdaptivePortalList/entry/src/main/java/ohos/samples/adaptiveportallist/MainAbility.java new file mode 100644 index 0000000000000000000000000000000000000000..a051e5e5a9e309ba9351fee98808852ccc76d4e8 --- /dev/null +++ b/UI/AdaptivePortalList/entry/src/main/java/ohos/samples/adaptiveportallist/MainAbility.java @@ -0,0 +1,31 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package ohos.samples.adaptiveportallist; + +import ohos.ace.ability.AceAbility; +import ohos.aafwk.content.Intent; + +public class MainAbility extends AceAbility { + @Override + public void onStart(Intent intent) { + super.onStart(intent); + } + + @Override + public void onStop() { + super.onStop(); + } +} diff --git a/UI/AdaptivePortalList/entry/src/main/java/ohos/samples/adaptiveportallist/MyApplication.java b/UI/AdaptivePortalList/entry/src/main/java/ohos/samples/adaptiveportallist/MyApplication.java new file mode 100644 index 0000000000000000000000000000000000000000..27ca43f821268f0316667dbb20541801254ee5a4 --- /dev/null +++ b/UI/AdaptivePortalList/entry/src/main/java/ohos/samples/adaptiveportallist/MyApplication.java @@ -0,0 +1,25 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package ohos.samples.adaptiveportallist; + +import ohos.aafwk.ability.AbilityPackage; + +public class MyApplication extends AbilityPackage { + @Override + public void onInitialize() { + super.onInitialize(); + } +} diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/app.js b/UI/AdaptivePortalList/entry/src/main/js/default/app.js new file mode 100644 index 0000000000000000000000000000000000000000..aedcefe0054c6e16c40491f4d1abc20a4dc1c6ef --- /dev/null +++ b/UI/AdaptivePortalList/entry/src/main/js/default/app.js @@ -0,0 +1,8 @@ +export default { + onCreate() { + console.info('AceApplication onCreate'); + }, + onDestroy() { + console.info('AceApplication onDestroy'); + } +}; diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/common/images/add.png b/UI/AdaptivePortalList/entry/src/main/js/default/common/images/add.png new file mode 100644 index 0000000000000000000000000000000000000000..118a438b1ca198cae96a5c170be733163698acee Binary files /dev/null and b/UI/AdaptivePortalList/entry/src/main/js/default/common/images/add.png differ diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/common/images/circle.png b/UI/AdaptivePortalList/entry/src/main/js/default/common/images/circle.png new file mode 100644 index 0000000000000000000000000000000000000000..4d1341ed59d3d963502b2611cb5a7366f9c8a771 Binary files /dev/null and b/UI/AdaptivePortalList/entry/src/main/js/default/common/images/circle.png differ diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/common/images/home_person_picture.png b/UI/AdaptivePortalList/entry/src/main/js/default/common/images/home_person_picture.png new file mode 100644 index 0000000000000000000000000000000000000000..8cb133e57c09a08bd38b75565bca29a819cb9f5f Binary files /dev/null and b/UI/AdaptivePortalList/entry/src/main/js/default/common/images/home_person_picture.png differ diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/common/images/icon_person_blue.png b/UI/AdaptivePortalList/entry/src/main/js/default/common/images/icon_person_blue.png new file mode 100644 index 0000000000000000000000000000000000000000..c010be05f36e74b8533d33be0d179b7670e4a57d Binary files /dev/null and b/UI/AdaptivePortalList/entry/src/main/js/default/common/images/icon_person_blue.png differ diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/common/images/icon_person_gray.png b/UI/AdaptivePortalList/entry/src/main/js/default/common/images/icon_person_gray.png new file mode 100644 index 0000000000000000000000000000000000000000..db275e4b13a73c30ff1f19d4729849630c3d356a Binary files /dev/null and b/UI/AdaptivePortalList/entry/src/main/js/default/common/images/icon_person_gray.png differ diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/common/images/more.png b/UI/AdaptivePortalList/entry/src/main/js/default/common/images/more.png new file mode 100644 index 0000000000000000000000000000000000000000..e9fd24ddc0e5e8269d51f2a3b537c0c8b5328e1b Binary files /dev/null and b/UI/AdaptivePortalList/entry/src/main/js/default/common/images/more.png differ diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/common/template-tabbar.css b/UI/AdaptivePortalList/entry/src/main/js/default/common/template-tabbar.css new file mode 100644 index 0000000000000000000000000000000000000000..ebef4c22fd6aaae288afeeff716f10861b834de9 --- /dev/null +++ b/UI/AdaptivePortalList/entry/src/main/js/default/common/template-tabbar.css @@ -0,0 +1,50 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.div-tab-bar-bottom { + align-items: center; + justify-content: center; + flex-direction: column; + width: 25%; + height: 56px; +} + +.icons { + width: 100%; + justify-content: center; +} + +.img-tab-bar-bottom { + width: 24px; + height: 24px; + flex-shrink: 0; +} + +.txt-tab-bar-bottom { + font-size: 10px; + text-align: center; + margin-top: 4px; +} + +@media screen and (min-aspect-ratio: 1) { + .div-tab-bar-bottom { + width: 100%; + height: 25%; + } + .txt-tab-bar-bottom { + font-size: 10px; + text-align: center; + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/common/template-tabbar.hml b/UI/AdaptivePortalList/entry/src/main/js/default/common/template-tabbar.hml new file mode 100644 index 0000000000000000000000000000000000000000..35ebf5dabba7ee3b4f71cf4c09cf3667e660f962 --- /dev/null +++ b/UI/AdaptivePortalList/entry/src/main/js/default/common/template-tabbar.hml @@ -0,0 +1,21 @@ + + +
+
+ +
+ {{ text }} +
\ No newline at end of file diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/i18n/en-US.json b/UI/AdaptivePortalList/entry/src/main/js/default/i18n/en-US.json new file mode 100644 index 0000000000000000000000000000000000000000..670deafb80b6d799b50532cf8be840202475cdb4 --- /dev/null +++ b/UI/AdaptivePortalList/entry/src/main/js/default/i18n/en-US.json @@ -0,0 +1,13 @@ +{ + "strings": { + "title": "title", + "search_hint": "search", + "item_name": "double lines", + "item_description": "item description", + "item_right_text": "item right text", + "second_page": "Second page", + "third_page": "Third page", + "fourth_page": "Fourth page", + "fifth_page": "Fifth page" + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/i18n/zh-CN.json b/UI/AdaptivePortalList/entry/src/main/js/default/i18n/zh-CN.json new file mode 100644 index 0000000000000000000000000000000000000000..5b04786a43fc9f06c0c860cd8ad377fae7117e45 --- /dev/null +++ b/UI/AdaptivePortalList/entry/src/main/js/default/i18n/zh-CN.json @@ -0,0 +1,13 @@ +{ + "strings": { + "title": "标题", + "search_hint": "搜索", + "item_name": "双行列表", + "item_description": "辅助文本", + "item_right_text": "右侧文本", + "second_page": "第二页", + "third_page": "第三页", + "fourth_page": "第四页", + "fifth_page": "第五页" + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/pages/index/index.css b/UI/AdaptivePortalList/entry/src/main/js/default/pages/index/index.css new file mode 100644 index 0000000000000000000000000000000000000000..c71b7d504a9f7b13af0e892571251accfe7f486f --- /dev/null +++ b/UI/AdaptivePortalList/entry/src/main/js/default/pages/index/index.css @@ -0,0 +1,176 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.container { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 100%; + height: 100%; + background-color: white; +} +.top-tool-bar { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + width: 100%; + height: 56px; + padding-left: 24px; + padding-right: 24px; +} +.toolbar-image-add{ + width: 24px; + height: 24px; + margin-right: 40px; + opacity: 0.9; +} +.toolbar-image-more { + width: 24px; + height: 24px; + opacity: 0.9; +} +.div-content { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + background-color: white; +} +.title { + font-size: 30px; + color: black; + opacity: 0.9; + align-content: center; + height: 56px; + margin-left: 24px; + font-weight: bold; +} +.tabs { + width: 100%; +} +.tabContent { + width: 100%; + flex-direction: column; +} +.item-content { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 100%; + height: 100%; +} +.search { + height: 56px; + margin: 0 16px; + align-items: center; +} +.item-title { + width: 100%; + height: 100%; + font-size: 18px; + text-align: center; +} +.bottom-bar-wrapper { + width: 100%; + height: 56px; + flex-direction: row; + justify-content: center; + align-items: center; + background-color: #F6F4F1; +} +.search-bar { + width: 100%; + height: 40px; + font-size: 16px; +} +.list-wrapper { + width: 100%; + flex-direction: column; + background-color: #F6F4F1; + margin-top: 8px; +} +.list-items { + width: 100%; + flex-direction: column; + padding-left: 24px; + padding-right: 24px; + height: 72px; + align-items: center; + margin-bottom: 1px; + background-color: white; +} +.item-wrapper { + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + height: 100%; + margin: 8px 0; +} +.item-icon { + width: 50px; + height: 50px; + object-fit: contain; +} +.item-name-description-wrapper { + flex-direction: column; + justify-content: center; + margin-left: 16px; + flex-grow: 1; + flex-shrink: 1; +} +.item-name { + text-align: left; + font-size: 16px; + font-weight: bold; +} +.item-description { + text-align: left; + font-size: 14px; + opacity: 0.75; + margin-top: 4px; +} +.item-right-part-wrapper { + flex-direction: column; + justify-content: center; + align-items: flex-end; +} +.item-right-text { + font-size: 14px; + opacity: 0.75; +} +.item-right-circle { + width: 12px; + height: 12px; + object-fit: contain; + margin-top: 4px; +} + +@media screen and (min-aspect-ratio: 1) { + .container { + flex-direction: row; + justify-content: center; + background-color: #F6F4F1; + align-items: center; + } + .bottom-bar-wrapper { + width: 96px; + height: 400px; + flex-direction: column; + justify-content: space-between; + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/pages/index/index.hml b/UI/AdaptivePortalList/entry/src/main/js/default/pages/index/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..6c1d75d3d3892de04d3f1436061fcf8a8af1413d --- /dev/null +++ b/UI/AdaptivePortalList/entry/src/main/js/default/pages/index/index.hml @@ -0,0 +1,68 @@ + + + +
+
+ +
+
+
+ + + +
+ + +
+ {{ $t('strings.title') }} +
+ +
+ + +
+ +
+ {{ $t('strings.item_name') }} + {{ $t('strings.item_description') }} +
+
+ {{ $t('strings.item_right_text') }} + +
+
+ + +
+
+ {{ $t('strings.second_page') }} +
+
+ {{ $t('strings.third_page') }} +
+
+ {{ $t('strings.fourth_page') }} +
+
+ {{ $t('strings.fifth_page') }} +
+ + +
+
+ +
+
\ No newline at end of file diff --git a/UI/AdaptivePortalList/entry/src/main/js/default/pages/index/index.js b/UI/AdaptivePortalList/entry/src/main/js/default/pages/index/index.js new file mode 100644 index 0000000000000000000000000000000000000000..2fd9614d31297bba1ce0e8f93dfdabfd9674a42f --- /dev/null +++ b/UI/AdaptivePortalList/entry/src/main/js/default/pages/index/index.js @@ -0,0 +1,37 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import mediaquery from '@system.mediaquery'; + +export default { + data: { + list_data: Array(16).fill().map((_, index) => ({id: "item_" + index})), + tabBars: [ + {icon: "icon_person_blue.png", text: "页签"}, + {icon: "icon_person_gray.png", text: "页签"}, + {icon: "icon_person_gray.png", text: "页签"}, + {icon: "icon_person_gray.png", text: "页签"}, + ], + menu_tabs_index: 0, + isTabletLandscape: false + }, + onInit() { + this.regMediaQuery(); + }, + regMediaQuery() { + let mq = mediaquery.matchMedia('(min-aspect-ratio: 1)'); + mq.addListener((data) => { this.isTabletLandscape = data.matches; }); + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalList/entry/src/main/resources/base/element/string.json b/UI/AdaptivePortalList/entry/src/main/resources/base/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..1fbb94802deb844d7dcb18e3c0f35db9ae8fe86c --- /dev/null +++ b/UI/AdaptivePortalList/entry/src/main/resources/base/element/string.json @@ -0,0 +1,12 @@ +{ + "string": [ + { + "name": "entry_MainAbility", + "value": "AdaptivePortalList" + }, + { + "name": "mainability_description", + "value": "JS_Empty Ability" + } + ] +} \ No newline at end of file diff --git a/UI/AdaptivePortalList/entry/src/main/resources/base/media/icon.png b/UI/AdaptivePortalList/entry/src/main/resources/base/media/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c Binary files /dev/null and b/UI/AdaptivePortalList/entry/src/main/resources/base/media/icon.png differ diff --git a/UI/AdaptivePortalList/screenshots/device/phone.png b/UI/AdaptivePortalList/screenshots/device/phone.png new file mode 100644 index 0000000000000000000000000000000000000000..39a770a3cd22909187f5fdf6fc98ff75c38a0501 Binary files /dev/null and b/UI/AdaptivePortalList/screenshots/device/phone.png differ diff --git a/UI/AdaptivePortalList/screenshots/device/tablet1.png b/UI/AdaptivePortalList/screenshots/device/tablet1.png new file mode 100644 index 0000000000000000000000000000000000000000..e23ebbaf74f8a423a9acb5b9c62095097d7084e5 Binary files /dev/null and b/UI/AdaptivePortalList/screenshots/device/tablet1.png differ diff --git a/UI/AdaptivePortalList/screenshots/device/tablet2.png b/UI/AdaptivePortalList/screenshots/device/tablet2.png new file mode 100644 index 0000000000000000000000000000000000000000..3c73ce520e79d890d401e42dc983e753c5b812e5 Binary files /dev/null and b/UI/AdaptivePortalList/screenshots/device/tablet2.png differ diff --git a/UI/AdaptivePortalList/settings.gradle b/UI/AdaptivePortalList/settings.gradle new file mode 100644 index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07 --- /dev/null +++ b/UI/AdaptivePortalList/settings.gradle @@ -0,0 +1 @@ +include ':entry' diff --git a/UI/AdaptivePortalPage/README.md b/UI/AdaptivePortalPage/README.md new file mode 100644 index 0000000000000000000000000000000000000000..1eaa5024255935aaeebd13514f3621fbb6eec08e --- /dev/null +++ b/UI/AdaptivePortalPage/README.md @@ -0,0 +1,15 @@ +# Multi-Device Adaptive FA Page + +### Introduction + +This sample provides a typical information presentation page of applications, including the search bar and list. By leveraging adaptive features such as stretching, zooming, hiding, equalization, and proportion, this sample automatically adapts its layouts to screens of different sizes and presents a proper layout on them based on polymorphic components and responsive layouts. + +### Usage + +Touch the tabs to switch between tab pages. You can swipe up and down on the content page and swipe left and right on the list to view hidden content. + +You can install the app on different types of devices to view the adaptation effect. + +### Constraints + +This sample can only be run on large-system devices. diff --git a/UI/AdaptivePortalPage/README_zh.md b/UI/AdaptivePortalPage/README_zh.md new file mode 100644 index 0000000000000000000000000000000000000000..6af364b36b3ca1efb4d39a8a8b190aaa50830100 --- /dev/null +++ b/UI/AdaptivePortalPage/README_zh.md @@ -0,0 +1,15 @@ +# 多设备自适应的FA页面 + +### 简介 + +本示例构建了常见应用的信息展示页面，包含搜索栏，列表展示。在不同尺寸的设备上，通过拉伸、缩放、隐藏、均分、占比等自适应能力，使用多态控件、布局和组件的延展性以及响应式布局的运用，自适应展示为合理的布局效果。 + +### 使用说明 + +点击tab-bar按钮进行页面切换，可上下滑动内容页，左右滑动列表查看隐藏内容。 + +开发者可将本示例安装到不同类型设备上，查看自适应效果。 + +### 约束与限制 + +本示例仅支持在大型系统上运行。 \ No newline at end of file diff --git a/UI/AdaptivePortalPage/build.gradle b/UI/AdaptivePortalPage/build.gradle new file mode 100644 index 0000000000000000000000000000000000000000..078a938c864dba35fdfe799e50c9237dac685afe --- /dev/null +++ b/UI/AdaptivePortalPage/build.gradle @@ -0,0 +1,36 @@ +// Top-level build file where you can add configuration options common to all sub-projects/modules. +apply plugin: 'com.huawei.ohos.app' + +//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510 +ohos { + compileSdkVersion 6 + defaultConfig { + compatibleSdkVersion 6 + } +} + +buildscript { + repositories { + maven { + url 'https://repo.huaweicloud.com/repository/maven/' + } + maven { + url 'https://developer.huawei.com/repo/' + } + } + dependencies { + classpath 'com.huawei.ohos:hap:2.4.4.2' + } +} + +allprojects { + repositories { + maven { + url 'https://repo.huaweicloud.com/repository/maven/' + } + maven { + url 'https://developer.huawei.com/repo/' + } + jcenter() + } +} diff --git a/UI/AdaptivePortalPage/entry/build.gradle b/UI/AdaptivePortalPage/entry/build.gradle new file mode 100644 index 0000000000000000000000000000000000000000..fac23f31a7b3ea6a1a9977c974c20ae13287bf52 --- /dev/null +++ b/UI/AdaptivePortalPage/entry/build.gradle @@ -0,0 +1,21 @@ +apply plugin: 'com.huawei.ohos.hap' +//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510 +ohos { + compileSdkVersion 6 + defaultConfig { + compatibleSdkVersion 6 + } + buildTypes { + release { + proguardOpt { + proguardEnabled false + rulesFiles 'proguard-rules.pro' + } + } + } + +} + +dependencies { + implementation fileTree(dir: 'libs', include: ['*.jar', '*.har']) +} \ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/config.json b/UI/AdaptivePortalPage/entry/src/main/config.json new file mode 100644 index 0000000000000000000000000000000000000000..0fbc2404c8ce6fa3629fdd12288c9acb97d934da --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/config.json @@ -0,0 +1,58 @@ +{ + "app": { + "bundleName": "ohos.samples.adaptiveportalpage", + "version": { + "code": 1000000, + "name": "1.0.0" + } + }, + "deviceConfig": {}, + "module": { + "package": "ohos.samples.adaptiveportalpage", + "name": ".MyApplication", + "mainAbility": "ohos.samples.adaptiveportalpage.MainAbility", + "deviceType": [ + "phone", + "tablet", + "tv" + ], + "distro": { + "deliveryWithInstall": true, + "moduleName": "entry", + "moduleType": "entry", + "installationFree": false + }, + "abilities": [ + { + "skills": [ + { + "entities": [ + "entity.system.home" + ], + "actions": [ + "action.system.home" + ] + } + ], + "name": "ohos.samples.adaptiveportalpage.MainAbility", + "icon": "$media:icon", + "description": "$string:mainability_description", + "label": "$string:entry_MainAbility", + "type": "page", + "launchType": "standard" + } + ], + "js": [ + { + "pages": [ + "pages/index/index" + ], + "name": "default", + "window": { + "designWidth": 720, + "autoDesignWidth": true + } + } + ] + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/java/ohos/samples/adaptiveportalpage/MainAbility.java b/UI/AdaptivePortalPage/entry/src/main/java/ohos/samples/adaptiveportalpage/MainAbility.java new file mode 100644 index 0000000000000000000000000000000000000000..627a436c0aa3eec372ac9bd722b79a19b4451f3b --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/java/ohos/samples/adaptiveportalpage/MainAbility.java @@ -0,0 +1,31 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package ohos.samples.adaptiveportalpage; + +import ohos.ace.ability.AceAbility; +import ohos.aafwk.content.Intent; + +public class MainAbility extends AceAbility { + @Override + public void onStart(Intent intent) { + super.onStart(intent); + } + + @Override + public void onStop() { + super.onStop(); + } +} diff --git a/UI/AdaptivePortalPage/entry/src/main/java/ohos/samples/adaptiveportalpage/MyApplication.java b/UI/AdaptivePortalPage/entry/src/main/java/ohos/samples/adaptiveportalpage/MyApplication.java new file mode 100644 index 0000000000000000000000000000000000000000..6cd1bee6a473bd44608b413af09e221583d8a787 --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/java/ohos/samples/adaptiveportalpage/MyApplication.java @@ -0,0 +1,25 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package ohos.samples.adaptiveportalpage; + +import ohos.aafwk.ability.AbilityPackage; + +public class MyApplication extends AbilityPackage { + @Override + public void onInitialize() { + super.onInitialize(); + } +} diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/app.js b/UI/AdaptivePortalPage/entry/src/main/js/default/app.js new file mode 100644 index 0000000000000000000000000000000000000000..aedcefe0054c6e16c40491f4d1abc20a4dc1c6ef --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/js/default/app.js @@ -0,0 +1,8 @@ +export default { + onCreate() { + console.info('AceApplication onCreate'); + }, + onDestroy() { + console.info('AceApplication onDestroy'); + } +}; diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/icon_person_blue.png b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/icon_person_blue.png new file mode 100644 index 0000000000000000000000000000000000000000..c010be05f36e74b8533d33be0d179b7670e4a57d Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/icon_person_blue.png differ diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/icon_person_gray.png b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/icon_person_gray.png new file mode 100644 index 0000000000000000000000000000000000000000..db275e4b13a73c30ff1f19d4729849630c3d356a Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/icon_person_gray.png differ diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/img_sq.png b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/img_sq.png new file mode 100644 index 0000000000000000000000000000000000000000..b857dd92358468946474c31ae42b68619e224b6e Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/img_sq.png differ diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/item.png b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/item.png new file mode 100644 index 0000000000000000000000000000000000000000..54a9238cd58b297940ca3bb5a80d6bb0df2cb3d2 Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/item.png differ diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/item_tv.png b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/item_tv.png new file mode 100644 index 0000000000000000000000000000000000000000..dea296a9a580aecab842a45a4065d1f201cc7f08 Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/item_tv.png differ diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/more.png b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/more.png new file mode 100644 index 0000000000000000000000000000000000000000..bfebc6fc5d445371169d555b6c8bfaafcbbac078 Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/more.png differ diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/more_tv.png b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/more_tv.png new file mode 100644 index 0000000000000000000000000000000000000000..d3bff2fd73018adb8e27883a978c6112091002c8 Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/more_tv.png differ diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/search_tv.png b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/search_tv.png new file mode 100644 index 0000000000000000000000000000000000000000..562f1d4a2a56a8e5f379b3ddfd04c9051888d808 Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/search_tv.png differ diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/tab_bar_right.png b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/tab_bar_right.png new file mode 100644 index 0000000000000000000000000000000000000000..c730b81668b073ce2560c042d85aa81e624f75dd Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/tab_bar_right.png differ diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/tab_bar_right_tv.png b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/tab_bar_right_tv.png new file mode 100644 index 0000000000000000000000000000000000000000..97d91bf9b03a840ed3dbd26c1b2df37e06ce80bc Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/tab_bar_right_tv.png differ diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/tv/icon_person_blue.png b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/tv/icon_person_blue.png new file mode 100644 index 0000000000000000000000000000000000000000..7153a42c7f47cc2607461cafb6687f9a88edac55 Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/tv/icon_person_blue.png differ diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/tv/icon_person_gray.png b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/tv/icon_person_gray.png new file mode 100644 index 0000000000000000000000000000000000000000..c78720113bc1f5a1a957962b994719aa8e9c75d5 Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/js/default/common/images/tv/icon_person_gray.png differ diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-card-item.css b/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-card-item.css new file mode 100644 index 0000000000000000000000000000000000000000..d9cc64a0e1ec3f094f61a19f946f50ae3b27a94c --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-card-item.css @@ -0,0 +1,77 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.div-list-item-three { + flex-direction: row; + align-items: center; + width: 100%; + margin-top: 2px; + height: 33%; + border-radius: 10px; +} + +.img-hmqs-three { + margin-left: 12px; + width: 48px; + height: 48px; + background-image: url('/common/images/item.png'); + background-size: 48px 48px; +} + +.div-txt-hmqs-three { + width: 220px; + height: 100%; + flex-direction: column; + justify-content: center; + margin-left: 20px; +} + +.txt-list-three-item-top { + font-size: 14px; + text-color: black; + width: 100%; +} + +.div-list-three-item-right-down { + flex-direction: row; + justify-content: flex-start; + align-items: center; +} + +.img-list-three-item-right-down { + width: 18px; + height: 18px; + flex-shrink: 0; +} + +.txt-list-three-item-bottom { + font-size: 12px; + text-color: #BCBCBC; + margin-left: 4px; +} + +@media screen and (min-aspect-ratio: 1.7) { + .img-hmqs-three { + background-image: url('/common/images/item_tv.png'); + } + + .txt-list-three-item-top { + text-color: #d9ffffff; + } + + .txt-list-three-item-bottom { + text-color: #d9ffffff; + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-card-item.hml b/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-card-item.hml new file mode 100644 index 0000000000000000000000000000000000000000..c2849f026c5c35bae09020cbd15732aafbb8382e --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-card-item.hml @@ -0,0 +1,25 @@ + + +
+ +
+ {{ title }} +
+ + {{ author }} +
+
+
\ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-group-header.css b/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-group-header.css new file mode 100644 index 0000000000000000000000000000000000000000..f7698bddde8c04adb3445e5d052414a80851fa09 --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-group-header.css @@ -0,0 +1,81 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.content-title-more { + width: 100%; + height: 48px; + flex-direction: row; + justify-content: center; + flex-wrap: nowrap; + align-content: center; + background-color: #F6F4F1; +} + +.div-title-left { + width: 50%; + height: 100%; + flex-direction: column; + justify-content: center; + margin-left: 24px; +} + +.txt-content-title { + font-size: 16px; + font-weight: bold; + text-color: black; +} + +.div-title-right { + flex-direction: row; + width: 50%; + height: 100%; + justify-content: flex-end; + margin-right: 24px; + align-items: center; +} + +.txt-content-more { + font-size: 12px; + text-color: #A3A3A3; + margin-right: 10px; +} + +.img-content-more { + width: 12px; + height: 24px; + flex-shrink: 0; + background-image: url('/common/images/more.png'); + background-size: 12px 24px; +} + +@media screen and (min-aspect-ratio: 1.7) { + .content-title-more { + background-color: black; + } + + .img-content-more { + background-image: url('/common/images/more_tv.png'); + background-size: 12px 24px; + background-position: right; + } + + .txt-content-title { + text-color: #d9ffffff; + } + + .txt-content-more { + text-color: #d9ffffff; + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-group-header.hml b/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-group-header.hml new file mode 100644 index 0000000000000000000000000000000000000000..10309345686b860e5a1e33f68e4dfd59351ba904 --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-group-header.hml @@ -0,0 +1,24 @@ + + +
+
+ {{ $t('strings.txt-content-title')}} +
+
+ {{ $t('strings.txt-content-more') }} + +
+
\ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-tabbar.css b/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-tabbar.css new file mode 100644 index 0000000000000000000000000000000000000000..c04fe3e89c762224f8e8802c5ed605d79f5916c9 --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-tabbar.css @@ -0,0 +1,69 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.div-tab-bar-bottom { + align-items: center; + justify-content: center; + flex-direction: column; + width: 20%; + height: 100%; +} + +.icons { + width: 100%; + margin-bottom: 2px; + justify-content: center; +} + +.img-tab-bar-bottom { + width: 24px; + height: 24px; + flex-shrink: 0; + margin-top: 8px; +} + +.txt-tab-bar-bottom { + font-size: 10px; + margin-bottom: 6px; + text-align: center; +} + +@media screen and (min-aspect-ratio: 1.6) { + .div-tab-bar-bottom { + width: 100%; + height: 20%; + } + .img-tab-bar-bottom { + margin-bottom: 2px; + } + .txt-tab-bar-bottom { + font-size: 10px; + text-align: center; + } +} + +@media screen and (min-aspect-ratio: 1.7) { + .div-tab-bar-bottom { + width: 100%; + height: 20%; + } + .img-tab-bar-bottom { + margin-bottom: 2px; + } + .txt-tab-bar-bottom { + font-size: 10px; + text-align: center; + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-tabbar.hml b/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-tabbar.hml new file mode 100644 index 0000000000000000000000000000000000000000..35ebf5dabba7ee3b4f71cf4c09cf3667e660f962 --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/js/default/common/template-tabbar.hml @@ -0,0 +1,21 @@ + + +
+
+ +
+ {{ text }} +
\ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/i18n/en-US.json b/UI/AdaptivePortalPage/entry/src/main/js/default/i18n/en-US.json new file mode 100644 index 0000000000000000000000000000000000000000..f70e77a52a041759a4c849e04f533d5666f26c52 --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/js/default/i18n/en-US.json @@ -0,0 +1,11 @@ +{ + "strings": { + "SearchHint": "Search...", + "swiper-text1": "Banner", + "swiper-text2": "Description", + "txt-show": "Other pages", + "txt-content-title": "Content title", + "txt-content-more": "more", + "content": "pages" + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/i18n/zh-CN.json b/UI/AdaptivePortalPage/entry/src/main/js/default/i18n/zh-CN.json new file mode 100644 index 0000000000000000000000000000000000000000..65004ca7699d171e1bad7051f88677fe2d84d2b3 --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/js/default/i18n/zh-CN.json @@ -0,0 +1,11 @@ +{ + "strings": { + "SearchHint": "Search...", + "swiper-text1": "Banner", + "swiper-text2": "Description", + "txt-show": "Other pages", + "txt-content-title": "内容子标题", + "txt-content-more": "更多", + "content": "页签" + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/pages/index/index.css b/UI/AdaptivePortalPage/entry/src/main/js/default/pages/index/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ea3cfc01d4b6b9594f8d540545c976ea46ea3c61 --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/js/default/pages/index/index.css @@ -0,0 +1,415 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.container { + flex-direction: column; + align-items: center; + background-color: #F6F4F1; + width: 100%; + height: 100%; +} + +.tab-bar-bottom { + width: 100%; + height: 56px; + flex-direction: row; + background-color: #F6F4F1; + justify-content: space-between; +} + +.div-tabs-bottom { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.div-tab-content { + width: 100%; + height: 150%; + background-color: #F6F4F1; +} + +.div-content-one { + width: 100%; + height: 150%; + flex-direction: column; + align-items: center; + justify-content: flex-start; +} + +.search-title { + width: 100%; + height: 40px; + margin-top: 8px; + margin-left: 16px; + margin-right: 16px; +} + +.img-tab-bar-right { + width: 24px; + height: 24px; + position: absolute; + right: 24px; + top: 68px; +} + +.div-tabs { + width: 100%; + margin-top: 8px; +} + +.div-tab-bar { + width: 100%; + height: 56px; + margin-right: 56px; +} + +.txt-tab-bar { + color: gray; + font-size: 16px; + text-align: center; +} + +.txt-tab-bar:active { + color: #035AFE; + font-size: 18px; + font-weight: bold; +} + +.item-content { + width: 100%; + flex-direction: column; + align-items: center; +} + +.list-one { + flex-direction: row; + align-items: center; + margin-top: 18px; + justify-content: space-between; + width: 100%; + height: 72px; + padding-left: 8px; + background-color: #F6F4F1; +} + +.div-list-item-one { + flex-direction: column; + align-items: center; + justify-content: flex-start; + width: 52px; + height: 64px; +} + +.button-circle { + width: 40px; + height: 40px; + background-color: #CCCCCC; +} + +.txt-list-item-one { + font-size: 14px; + margin-top: 6px; +} + +.list-two { + height: 144px; + flex-direction: row; + justify-content: center; + align-items: flex-start; + background-color: #F6F4F1; +} + +.item-two { + width: 104px; + height: 144px; + margin-left: 12px; + background-color: #F6F4F1; +} + +.div-list-item-two { + flex-direction: column; + align-items: center; + justify-content: flex-start; + height: 100%; + width: 100%; +} + +.img-hmqs { + width: 104px; + height: 104px; + flex-shrink: 0; + border-radius: 10px; +} + +.div-txt-hmqs { + width: 100%; + margin-top: 6px; + flex-direction: row; +} + +.txt-list-item-two { + font-size: 16px; +} + +.list-three { + width: 100%; + height: 224px; + flex-direction: row; + justify-content: center; + margin-top: 8px; + background-color: #F6F4F1; +} + +.item-three { + display: flex; + flex-direction: column; + border-radius: 10px; + margin-left: 12px; + margin-right: -4px; + width: 95%; + background-color: white; +} + +.divider { + color: #1affffff; + stroke-width: 1px; + line-cap: round; + margin-left: 24px; + margin-right: 24px; +} + +.div-content-others { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: white; +} + +.txt-show-page { + text-color: black; + font-size: 30px; +} + +@media screen and (min-aspect-ratio: 0.8) { + .list-one { + width: 558px; + height: 72px; + padding-left: 13px; + } + + .div-list-item-one { + width: 81px; + height: 64px; + } + + .item-two { + margin-left: 16px; + } + + .item-three { + width: 48%; + } +} + +@media screen and (min-aspect-ratio: 0.6) { + .search-title { + margin-left: 24px; + margin-right: 24px; + } + + .img-tab-bar-right { + top: 65px; + } + + .list-one { + width: 100%; + height: 72px; + margin-left: 24px; + margin-right: 24px; + padding-left: 16px; + background-color: #F6F4F1; + } + + .div-list-item-one { + width: 110px; + height: 64px; + } + + .item-two { + margin-left: 16px; + } + + .item-three { + width: 48%; + background-color: white; + } +} + +@media screen and (min-aspect-ratio: 1.6) { + .search-title { + margin-left: 24px; + margin-right: 24px; + } + + .img-tab-bar-right { + top: 65px; + } + + .list-one { + width: 963px; + height: 72px; + margin-left: 99px; + margin-right: 122px; + padding-left: 21px; + background-color: #F6F4F1; + } + + .div-list-item-one { + width: 140px; + height: 64px; + } + + .item-two { + margin-right: 46px; + } + + .item-three { + width: 32%; + background-color: white; + } + + .tab-bar-bg{ + width: 96px; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F6F4F1; + } + + .tab-bar-bottom { + width: 96px; + height: 400px; + flex-direction: column; + align-items: center; + background-color: #F6F4F1; + justify-content: space-between; + } + + .container { + flex-direction: row; + justify-content: center; + background-color: #F6F4F1; + } +} + +@media screen and (min-aspect-ratio: 1.7) { + .container { + flex-direction: row; + justify-content: center; + background-color: black; + } + + .img-tab-bar-right { + top: 65px; + } + + .div-list-item-one { + width: 81px; + height: 61px; + } + + .item-two { + margin-right: 18px; + background-color: black; + } + + .item-three { + width: 48%; + background-color: #1affffff; + } + + .txt-list-item-one { + text-color: #99ffffff; + } + + .txt-list-item-two { + text-color: #99ffffff; + } + + .tab-bar-bg{ + width: 96px; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #1affffff; + } + + .tab-bar-bottom { + width: 96px; + height: 400px; + flex-direction: column; + justify-content: space-between; + background-color: #00ffffff + } + + .search-title { + margin-left: 24px; + margin-right: 24px; + background-color: #1affffff; + placeholder-color: #99ffffff; + text-color: #99ffffff; + } + + .div-tab-bar { + background-color: black; + } + + .div-tab-content { + background-color: black; + } + + .list-one { + width: 629px; + height: 61px; + background-color: black; + } + + .button-circle { + background-color: #1affffff; + } + + .div-list-item-one { + width: 81px; + height: 61px; + } + + .list-two { + background-color: black; + } + + .list-three { + background-color: black; + } + + .txt-tab-bar:active { + color: #3F97E9; + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/pages/index/index.hml b/UI/AdaptivePortalPage/entry/src/main/js/default/pages/index/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..e1f8788ec0a9d80bd1b200769c44b29a4f853482 --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/js/default/pages/index/index.hml @@ -0,0 +1,128 @@ + + + + + + +
+
+
+ +
+
+ + +
+ + + + + {{ $item }} + + + + +
+
+ + {{ $item.title }} +
+
+ + + +
+ +
+ {{ $item.title }} +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ {{ $t('strings.txt-show') }} +
+
+ {{ $t('strings.txt-show') }} +
+
+ {{ $t('strings.txt-show') }} +
+
+ {{ $t('strings.txt-show') }} +
+
+ {{ $t('strings.txt-show') }} +
+ + +
+
+ {{ $t('strings.txt-show') }} +
+
+ {{ $t('strings.txt-show') }} +
+
+ {{ $t('strings.txt-show') }} +
+
+ {{ $t('strings.txt-show') }} +
+ + +
+ +
+
\ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/js/default/pages/index/index.js b/UI/AdaptivePortalPage/entry/src/main/js/default/pages/index/index.js new file mode 100644 index 0000000000000000000000000000000000000000..436d7d83b6f7c9d9c599e7807da111910bc5d4c3 --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/js/default/pages/index/index.js @@ -0,0 +1,44 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import mediaquery from '@system.mediaquery'; + +export default { + data: { + subTabList: ["子页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签", "页签"], + listOne: Array(5).fill().map((_, index) => ({ uri: "", title: "item", id: "item_" + index})), + listTwo: Array(16).fill().map((_, index) => ({ uri: "", title: "item " + index, id: "item_" + index})), + listThree: Array(16).fill().map((_, index) => ({ msg1: "The End Of The World", msg2: "Justin Timberland", id: "item_" + index})), + tabBars: [ + { icon: "icon_person_blue.png", text: "页签" }, + { icon: "icon_person_gray.png", text: "页签" }, + { icon: "icon_person_gray.png", text: "页签" }, + { icon: "icon_person_gray.png", text: "页签" }, + { icon: "icon_person_gray.png", text: "页签" }, + ], + isTablet: false, + isTv: false, + menu_tabs_index: 0 + }, + onInit() { + this.regMediaQuery(); + }, + regMediaQuery() { + let mediaQueryTablet = mediaquery.matchMedia('(device-type:tablet) and (orientation: landscape)'); + let mediaQueryTv = mediaquery.matchMedia('(device-type: tv)'); + mediaQueryTablet.addListener((data) => { this.isTablet = data.matches; }); + mediaQueryTv.addListener((data) => {this.isTv = data.matches; }); + } +} \ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/resources/base/element/string.json b/UI/AdaptivePortalPage/entry/src/main/resources/base/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..b9d0cc7db5423e594eadc78618c907b331f19269 --- /dev/null +++ b/UI/AdaptivePortalPage/entry/src/main/resources/base/element/string.json @@ -0,0 +1,12 @@ +{ + "string": [ + { + "name": "entry_MainAbility", + "value": "AdaptivePortalPage" + }, + { + "name": "mainability_description", + "value": "JS_Empty Ability" + } + ] +} \ No newline at end of file diff --git a/UI/AdaptivePortalPage/entry/src/main/resources/base/media/icon.png b/UI/AdaptivePortalPage/entry/src/main/resources/base/media/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c Binary files /dev/null and b/UI/AdaptivePortalPage/entry/src/main/resources/base/media/icon.png differ diff --git a/UI/AdaptivePortalPage/screenshots/device/phone.png b/UI/AdaptivePortalPage/screenshots/device/phone.png new file mode 100644 index 0000000000000000000000000000000000000000..2d5887fb0211c5b62eaf7021c05dcb5ecaacc384 Binary files /dev/null and b/UI/AdaptivePortalPage/screenshots/device/phone.png differ diff --git a/UI/AdaptivePortalPage/screenshots/device/tablet1.png b/UI/AdaptivePortalPage/screenshots/device/tablet1.png new file mode 100644 index 0000000000000000000000000000000000000000..39097cd95d4e3e8121b809eecfb69cd7ee756ffa Binary files /dev/null and b/UI/AdaptivePortalPage/screenshots/device/tablet1.png differ diff --git a/UI/AdaptivePortalPage/screenshots/device/tablet2.png b/UI/AdaptivePortalPage/screenshots/device/tablet2.png new file mode 100644 index 0000000000000000000000000000000000000000..90be56fc359d3e1a4db13aaca24054b8b1acdebc Binary files /dev/null and b/UI/AdaptivePortalPage/screenshots/device/tablet2.png differ diff --git a/UI/AdaptivePortalPage/screenshots/device/tv.png b/UI/AdaptivePortalPage/screenshots/device/tv.png new file mode 100644 index 0000000000000000000000000000000000000000..d89683b15cc8c988ceb64692815577b7c318a480 Binary files /dev/null and b/UI/AdaptivePortalPage/screenshots/device/tv.png differ diff --git a/UI/AdaptivePortalPage/settings.gradle b/UI/AdaptivePortalPage/settings.gradle new file mode 100644 index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07 --- /dev/null +++ b/UI/AdaptivePortalPage/settings.gradle @@ -0,0 +1 @@ +include ':entry'