openharmony/ace_engine_lite
1
0
Fork 0
mirror of https://github.com/openharmony/ace_engine_lite.git synced 2026-07-18 10:31:07 -04:00
Code Issues Packages Projects Releases Wiki Activity

add ace l0 js qrcode xts code

Browse Source 
Signed-off-by: xwx1101857 <xucheng57@huawei.com>
This commit is contained in:
xwx1101857
2022-02-16 15:41:59 +08:00
parent 6f863d2df2
commit 7d502b1959
23 changed files with 729 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frameworks/examples/showcase/src/main/config.json
+5 -1
View File
@@ -244,7 +244,11 @@
"pages/component/canvas/canvas6/index",
"pages/component/canvas/canvas7/index",
"pages/component/canvas/canvas8/index",
"pages/component/canvas/canvas9/index"
"pages/component/canvas/canvas9/index",
"pages/component/qrcode/index/index",
"pages/component/qrcode/attr/attr",
"pages/component/qrcode/style/style",
"pages/component/qrcode/event/event"
],
"name": "default"
}
frameworks/examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.hml
+38 -14
View File
@@ -24,19 +24,7 @@ limitations under the License.
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="image" onclick="changeImage" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="progress" onclick="changeProgress" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="text" onclick="changeText" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="marquee" onclick="changeMarquee" />
<input type="button" class="buttonStyle" value="canvas" onclick="changeCanvas" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
@@ -44,7 +32,43 @@ limitations under the License.
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="canvas" onclick="changeCanvas" />
<input type="button" class="buttonStyle" value="image" onclick="changeImage" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="image-animator" onclick="changeImageAnimator" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="input" onclick="changeInput" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="marquee" onclick="changeMarquee" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="picker-view" onclick="changePickerView" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="progress" onclick="changeProgress" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="qrcode" onclick="changeQrcode" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="slider" onclick="changeSlider" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="switch" onclick="changeSwitch" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="text" onclick="changeText" />
</list-item>
<list-item style="height: 40px; width: 454px"> </list-item>
</list>
frameworks/examples/showcase/src/main/js/default/pages/component/index/baseIndex/index.js
+7 -1
View File
@@ -20,5 +20,11 @@ export default {
changeText: routePage("pages/component/text/index/index").changePage,
changeMarquee: routePage("pages/component/marquee/index/index").changePage,
changeChart: routePage("pages/component/chart/index/index").changePage,
changeCanvas: routePage("pages/component/canvas/index/index").changePage
changeCanvas: routePage("pages/component/canvas/index/index").changePage,
changeImageAnimator: routePage("pages/component/animator/index/index").changePage,
changeInput: routePage("pages/component/input/index/index").changePage,
changePickerView: routePage("pages/component/picker_view/index/index").changePage,
changeQrcode: routePage("pages/component/qrcode/index/index").changePage,
changeSlider: routePage("pages/component/slider/index/index").changePage,
changeSwitch: routePage("pages/component/switch/index/index").changePage
};
frameworks/examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.hml
+4
View File
@@ -31,6 +31,10 @@ limitations under the License.
<input type="button" class="buttonStyle" value="list" onclick="changeList" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="list-item" onclick="changeListItem" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="stack" onclick="changeStack" />
</list-item>
frameworks/examples/showcase/src/main/js/default/pages/component/index/containerIndex/index.js
+1
View File
@@ -17,6 +17,7 @@ export default {
...backPage("pages/index/index"),
changeDiv: routePage("pages/component/div/index/index").changePage,
changeList: routePage("pages/component/list/index/index").changePage,
changeListItem: routePage("pages/component/list/list-item/index/index").changePage,
changeStack: routePage("pages/component/stack/index/index").changePage,
changeSwiper: routePage("pages/component/swiper/index/index").changePage
};
frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.hml
+1 -1
View File
@@ -69,7 +69,7 @@ limitations under the License.
</div>
<div class="attribute-right-div">
<input type="checkbox" class="checkbox" checked="true" onchange="changeStatus" />
<text class="text">值为{{ show }}</text>
<text class="text">值为{{ showAttr }}</text>
</div>
</list-item>
<list-item style="width: 454px; height: 60px"> </list-item>
frameworks/examples/showcase/src/main/js/default/pages/component/input/checkbox/attr/attr.js
+1 -1
View File
@@ -16,7 +16,7 @@ import { goPage, routePage } from "../../../../../common/js/general";
import { changeStatus, changeIf } from "../../../../../common/js/input";
export default {
data: {
show: true,
showAttr: true,
status: true,
ifStatus: true,
listData: [true, false]
frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.hml
+1 -1
View File
@@ -46,7 +46,7 @@ limitations under the License.
</div>
<div class="attribute-right-div">
<input type="radio" class="radio" onchange="changeChecked" />
<text class="text">值为{{ show }}</text>
<text class="text">值为{{ showAttr }}</text>
</div>
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
frameworks/examples/showcase/src/main/js/default/pages/component/input/radio/attr/attr.js
+1 -1
View File
@@ -15,7 +15,7 @@
import { goPage, routePage } from "../../../../../common/js/general";
export default {
data: {
show: "false",
showAttr: "false",
name: "show",
status: true
},
frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.hml
+4 -4
View File
@@ -26,11 +26,11 @@ limitations under the License.
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="item-attribute">
<input type="button" class="text" style="margin-left: 30px" onclick="changeStatus" value="show" />
<progress type="horizontal" show="{{ status }}" percent="{{ show }}" class="horizontal-progress"></progress>
<progress type="horizontal" show="{{ status }}" percent="{{ showAttr }}" class="horizontal-progress"></progress>
</list-item>
<list-item class="item-attribute">
<input type="button" class="text" style="margin-left: 30px" onclick="changeStatusIf" value="if" />
<progress type="horizontal" if="{{ ifStatus }}" percent="{{ show }}" class="horizontal-progress"></progress>
<progress type="horizontal" if="{{ ifStatus }}" percent="{{ showAttr }}" class="horizontal-progress"></progress>
</list-item>
<list-item class="item-attribute">
<div class="attribute-div">
@@ -39,7 +39,7 @@ limitations under the License.
<progress
for="{{ listData }}"
type="horizontal"
percent="{{ show }}"
percent="{{ showAttr }}"
style="width: 100px; height: 50px; stroke-width: 5px"
></progress>
</div>
@@ -53,7 +53,7 @@ limitations under the License.
<list-item class="item-attribute">
<div class="attribute-div">
<text class="left-text" style="margin-left: 30px">percent</text>
<progress type="horizontal" percent="{{ show }}" class="horizontal-progress"></progress>
<progress type="horizontal" percent="{{ showAttr }}" class="horizontal-progress"></progress>
</div>
</list-item>
<list-item style="width: 454px; height: 60px"> </list-item>
frameworks/examples/showcase/src/main/js/default/pages/component/progress/horizontal/attr/attr.js
+1 -1
View File
@@ -19,7 +19,7 @@ export default {
listData: ["a", "b"],
status: true,
ifStatus: true,
show: 20
showAttr: 20
},
...goPage("pages/component/progress/horizontal/index/index"),
changeStatus: changeStatus,
frameworks/examples/showcase/src/main/js/default/pages/component/qrcode/attr/attr.css
Executable
+76
View File
@@ -0,0 +1,76 @@
/*
* Copyright (c) 2020 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.
*/
.list {
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.item-title {
left: 0px;
top: 0px;
width: 400px;
height: 70px;
}
.separatorContainerStyle {
width: 454px;
height: 4px;
background-color: #8b8b7a;
}
.item-types {
width: 454px;
height: 80px;
}
.whole-text {
margin-top: 10px;
margin-left: 150px;
width: 200px;
height: 60px;
font-size: 30px;
color: red;
}
.text {
width: 200px;
height: 50px;
margin-top: 10px;
margin-left: 10px;
font-size: 30px;
}
.item-attribute {
width: 454px;
height: 100px;
}
.attribute-div {
left: 0px;
top: 0px;
height: 100px;
width: 250px;
flex-direction: row;
}
.attribute-div-if-text {
left: 0px;
top: 0px;
height: 100px;
width: 200px;
flex-direction: column;
}
frameworks/examples/showcase/src/main/js/default/pages/component/qrcode/attr/attr.hml
Executable
+63
View File
@@ -0,0 +1,63 @@
<!--
Copyright (c) 2020 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.
-->
<list class="list">
<list-item style="height: 60px; width: 454px"> </list-item>
<list-item class="item-title">
<input type="button" style="margin-left: 85px; width: 130px; height: 60px" onclick="goHome" value="首页" />
<input type="button" style="margin-left: 20px; width: 130px; height: 60px" onclick="goPrevious" value="上一页" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="item-types">
<text class="whole-text">通用属性</text>
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="item-attribute">
<div class="attribute-div">
<input type="button" class="text" style="margin-left: 30px" onclick="changeShow" value="show" />
</div>
<div class="attribute-div-if-text">
<qrcode value='value' show="{{ showStatus }}" style="width: 100px; height: 50px"> </qrcode>
</div>
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="item-attribute">
<div class="attribute-div">
<input type="button" class="text" style="margin-left: 30px" onclick="changeStatusIf" value="if" />
</div>
<div class="attribute-div-if-text">
<qrcode value='value' if="{{ ifStatus }}" style="width: 100px; height: 50px"> </qrcode>
</div>
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="item-attribute">
<div class="attribute-div">
<input type="button" class="text" style="margin-left: 30px" value="for" />
</div>
<div class="attribute-div-if-text">
<qrcode style="width: 100px; height: 30px;margin-top:10px" value='item' for="{{ textfor }}"></qrcode>
</div>
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="item-attribute">
<div class="attribute-div">
<input type="button" class="text" style="margin-left: 30px" value="type" />
</div>
<div class="attribute-div-if-text">
<qrcode style="width: 80px; height: 80px" value='value' type="{{type}}" onclick="changeType" ></qrcode>
</div>
</list-item>
<list-item style="height: 60px; width: 454px"> </list-item>
</list>
frameworks/examples/showcase/src/main/js/default/pages/component/qrcode/attr/attr.js
Executable
+48
View File
@@ -0,0 +1,48 @@
/*
* Copyright (c) 2020 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 { goPage, routePage } from "../../../../common/js/general";
export default {
data: {
showStatus: true,
ifStatus: true,
display: "flex",
textfor: ["1", "2"],
type:'rect',
},
...goPage("pages/component/qrcode/index/index"),
changeShow() {
if (this.showStatus == true) {
this.showStatus = false;
} else {
this.showStatus = true;
}
},
changeStatusIf() {
if (this.ifStatus == true) {
this.ifStatus = false;
} else {
this.ifStatus = true;
}
},
changeType() {
if (this.type == 'rect') {
this.type = 'circle';
} else {
this.type = 'rect';
}
},
};
frameworks/examples/showcase/src/main/js/default/pages/component/qrcode/event/event.css
Executable
+89
View File
@@ -0,0 +1,89 @@
/*
* Copyright (c) 2020 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.
*/
.list {
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.item-title {
left: 0px;
top: 0px;
width: 400px;
height: 70px;
}
.separatorContainerStyle {
width: 454px;
height: 4px;
background-color: #8b8b7a;
}
.item-types {
width: 454px;
height: 80px;
}
.whole-text {
margin-top: 10px;
margin-left: 150px;
width: 200px;
height: 60px;
font-size: 30px;
color: red;
}
.text {
width: 200px;
height: 50px;
margin-top: 10px;
margin-left: 10px;
font-size: 30px;
}
.item-two {
width: 450px;
height: 200px;
}
.two-right-div {
width: 230px;
height: 200px;
top: 40px;
left: 0px;
}
.two-left-div {
width: 220px;
height: 200px;
left: 0px;
top: 0px;
flex-direction: column;
}
.two-div {
width: 450px;
height: 200px;
left: 0px;
top: 0px;
}
.click-qrcode {
margin-top: 30px;
width: 150px;
height: 150px;
}
frameworks/examples/showcase/src/main/js/default/pages/component/qrcode/event/event.hml
Executable
+40
View File
@@ -0,0 +1,40 @@
<!--
Copyright (c) 2020 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.
-->
<list class="list">
<list-item style="height: 60px; width: 454px"> </list-item>
<list-item class="item-title">
<input type="button" style="margin-left: 85px; width: 130px; height: 60px" onclick="goHome" value="首页" />
<input type="button" style="margin-left: 20px; width: 130px; height: 60px" onclick="goPrevious" value="上一页" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="item-types">
<text class="whole-text">通用事件</text>
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="item-two">
<div class="two-div">
<div class="two-left-div" style="margin-left: 30px">
<text class="text">click</text>
<text class="text">longpress</text>
<text class="text">swipe</text>
</div>
<div class="two-right-div" style="flex-direction: column">
<qrcode value='value' style="color: {{qr_color}};" onclick="clickEvent" onlongpress="longpressEvent" onswipe="swipeEvent" class="click-qrcode"></qrcode>
</div>
</div>
</list-item>
<list-item style="height: 60px; width: 454px"> </list-item>
</list>
frameworks/examples/showcase/src/main/js/default/pages/component/qrcode/event/event.js
Executable
+30
View File
@@ -0,0 +1,30 @@
/*
* Copyright (c) 2020 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 { goPage, routePage } from "../../../../common/js/general";
export default {
data: {
qr_color: ""
},
...goPage("pages/component/qrcode/index/index"),
clickEvent() {
this.qr_color = "#fa8072";
},
longpressEvent() {
this.qr_color = "#87ceeb";
},
swipeEvent(e) {
this.qr_color = '#50bf1f';
}
};
frameworks/examples/showcase/src/main/js/default/pages/component/qrcode/index/index.css
Executable
+42
View File
@@ -0,0 +1,42 @@
/*
* Copyright (c) 2020 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.
*/
.separatorContainerStyle {
width: 454px;
height: 4px;
background-color: #8b8b7a;
}
.titleContainerStyle {
width: 454px;
height: 70px;
}
.titleTextStyle {
width: 454px;
height: 50px;
margin-left: 195px;
margin-top: 0px;
}
.buttonContainerStyle {
width: 454px;
height: 80px;
}
.buttonStyle {
width: 200px;
height: 60px;
margin-left: 130px;
}
frameworks/examples/showcase/src/main/js/default/pages/component/qrcode/index/index.hml
Executable
+44
View File
@@ -0,0 +1,44 @@
<!--
Copyright (c) 2020 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.
-->
<list style="left: 0px; top: 0px; flex-direction: column; width: 454px; height: 454px">
<list-item style="height: 40px; width: 454px"> </list-item>
<list-item style="width: 454px; height: 80px">
<input type="button" style="margin-left: 85px; width: 130px; height: 60px" value="返回首页" onclick="backMain" />
<input
type="button"
style="margin-left: 20px; width: 130px; height: 60px"
value="返回上级"
onclick="backSuperior"
/>
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="titleContainerStyle">
<text class="titleTextStyle"> qrcode</text>
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="属性" onclick="changePage1" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="样式" onclick="changePage2" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="buttonContainerStyle">
<input type="button" class="buttonStyle" value="事件" onclick="changePage3" />
</list-item>
<list-item style="height: 40px; width: 454px"> </list-item>
</list>
frameworks/examples/showcase/src/main/js/default/pages/component/qrcode/index/index.js
Executable
+21
View File
@@ -0,0 +1,21 @@
/*
* Copyright (c) 2020 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 { backPage, routePage } from "../../../../common/js/general";
export default {
...backPage("pages/component/index/baseIndex/index"),
changePage1: routePage("pages/component/qrcode/attr/attr").changePage,
changePage2: routePage("pages/component/qrcode/style/style").changePage,
changePage3: routePage("pages/component/qrcode/event/event").changePage
};
frameworks/examples/showcase/src/main/js/default/pages/component/qrcode/style/style.css
Executable
+127
View File
@@ -0,0 +1,127 @@
/*
* Copyright (c) 2020 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.
*/
.list {
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.item-title {
left: 0px;
top: 0px;
width: 400px;
height: 70px;
}
.separatorContainerStyle {
width: 454px;
height: 4px;
background-color: #8b8b7a;
}
.item-types {
width: 454px;
height: 80px;
}
.whole-text {
margin-top: 10px;
margin-left: 150px;
width: 200px;
height: 60px;
font-size: 30px;
color: red;
}
.text {
width: 200px;
height: 50px;
margin-top: 10px;
margin-left: 10px;
font-size: 30px;
}
.item-three {
width: 450px;
height: 240px;
}
.three-div {
width: 450px;
height: 240px;
}
.three-left-div {
width: 220px;
height: 240px;
flex-direction: column;
}
.three-right-div {
width: 230px;
height: 190px;
}
.item-two {
width: 450px;
height: 150px;
}
.two-left-div {
width: 220px;
height: 150px;
flex-direction: column;
}
.two-div {
width: 450px;
height: 150px;
}
.general-stack {
width: 200px;
height: 190px;
left: 0px;
top: 0px;
background-color: springgreen;
}
.general-text {
color: red;
background-color: #ffdd00;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
}
.right-div {
width: 250px;
height: 220px;
background-color: springgreen;
}
.show {
opacity: 1;
border-width: 5px;
border-color: #0000ff;
border-radius: 5px;
padding: 10px;
width: 150px;
height: 50px;
background-color: red;
margin-left: 10px;
}
frameworks/examples/showcase/src/main/js/default/pages/component/qrcode/style/style.hml
Executable
+66
View File
@@ -0,0 +1,66 @@
<!--
Copyright (c) 2020 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.
-->
<list class="list">
<list-item style="height: 60px; width: 454px"> </list-item>
<list-item class="item-title">
<input type="button" style="margin-left: 85px; width: 130px; height: 60px" onclick="goHome" value="首页" />
<input type="button" style="margin-left: 20px; width: 130px; height: 60px" onclick="goPrevious" value="上一页" />
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="item-types">
<text class="whole-text">样式</text>
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="item-three">
<div class="three-div">
<div class="three-left-div" style="margin-left: 30px; width: 160px">
<text class="text">红色</text>
<text class="text">背景黄色</text>
<text class="text">left为50</text>
<text class="text">top为50</text>
</div>
<stack class="general-stack" style="margin-left: 0px; width: 200px; height: 200px">
<qrcode value='value' class="general-text"></qrcode>
</stack>
</div>
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="item-three">
<div class="three-div">
<div class="three-left-div" style="margin-left: 30px">
<text class="text">margin为40</text>
<text class="text">height为100</text>
<text class="text">width为100</text>
</div>
<div class="three-right-div" style="background-color: springgreen; width: 160px">
<qrcode value='value' style="margin: 40px; width: 100px; height: 100px;"></qrcode>
</div>
</div>
</list-item>
<list-item class="separatorContainerStyle"> </list-item>
<list-item class="item-two">
<div class="two-div">
<div class="two-left-div" style="margin-left: 30px">
<text class="text">border</text>
<text class="text">padding</text>
</div>
<div class="right-div" style="background-color: springgreen; width: 160px">
<qrcode value='value' class="show" style="width: 100px;height:100px;"></qrcode>
</div>
</div>
</list-item>
<list-item style="height: 60px; width: 454px"> </list-item>
</list>
frameworks/examples/showcase/src/main/js/default/pages/component/qrcode/style/style.js
Executable
+19
View File
@@ -0,0 +1,19 @@
/*
* Copyright (c) 2020 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.
*/
// commonStyle.js
import { goPage, routePage } from "../../../../common/js/general";
export default {
...goPage("pages/component/qrcode/index/index")
};