From 99c0e4f2d09459748da76ddb40927ba9261f89b4 Mon Sep 17 00:00:00 2001 From: dongwei Date: Tue, 8 Mar 2022 18:20:54 +0800 Subject: [PATCH] add test cases Signed-off-by: dongwei --- .../main/js/default/pages/qrcode/index.css | 15 - .../main/js/default/pages/qrcode/index.hml | 14 - .../js/default/pages/qrcode/prop/index.css | 403 ++++++++++++++ .../js/default/pages/qrcode/prop/index.hml | 267 ++++++++++ .../js/default/pages/qrcode/prop/index.js | 127 +++++ .../js/default/pages/qrcode/router/index.css | 476 +++++++++++++++++ .../js/default/pages/qrcode/router/index.hml | 345 ++++++++++++ .../js/default/pages/qrcode/router/index.js | 459 ++++++++++++++++ .../js/default/pages/qrcode/style/index.css | 503 ++++++++++++++++++ .../js/default/pages/qrcode/style/index.hml | 157 ++++++ .../default/pages/qrcode/{ => style}/index.js | 28 +- 11 files changed, 2740 insertions(+), 54 deletions(-) delete mode 100644 ace/ace_standard/src/main/js/default/pages/qrcode/index.css delete mode 100644 ace/ace_standard/src/main/js/default/pages/qrcode/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/qrcode/prop/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/qrcode/prop/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/qrcode/prop/index.js create mode 100644 ace/ace_standard/src/main/js/default/pages/qrcode/router/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/qrcode/router/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/qrcode/router/index.js create mode 100644 ace/ace_standard/src/main/js/default/pages/qrcode/style/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/qrcode/style/index.hml rename ace/ace_standard/src/main/js/default/pages/qrcode/{ => style}/index.js (53%) diff --git a/ace/ace_standard/src/main/js/default/pages/qrcode/index.css b/ace/ace_standard/src/main/js/default/pages/qrcode/index.css deleted file mode 100644 index 966582849..000000000 --- a/ace/ace_standard/src/main/js/default/pages/qrcode/index.css +++ /dev/null @@ -1,15 +0,0 @@ -.container { - width: 100%; - height: 100%; - flex-direction: column; - justify-content: center; - align-items: center; -} -.txt { - font-size: 24px; - color: orangered; -} -select{ - margin-top: 40px; - margin-bottom: 40px; -} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/qrcode/index.hml b/ace/ace_standard/src/main/js/default/pages/qrcode/index.hml deleted file mode 100644 index c6c88b1a3..000000000 --- a/ace/ace_standard/src/main/js/default/pages/qrcode/index.hml +++ /dev/null @@ -1,14 +0,0 @@ -
- - Type - - Color - - Background Color - -
diff --git a/ace/ace_standard/src/main/js/default/pages/qrcode/prop/index.css b/ace/ace_standard/src/main/js/default/pages/qrcode/prop/index.css new file mode 100644 index 000000000..4bb4c9866 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/qrcode/prop/index.css @@ -0,0 +1,403 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development 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:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} +.div-container{ + flex-weight: 1; +} +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + flex-weight: 1; + background-color:#f00000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +.classProp { + flex-weight: 1; + background-color:#0f0000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#classPropNone { + flex-weight: 1; + background-color:#0000e0; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#refProp { + flex-weight: 1; + background-color:#00f000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#refPropNone { + flex-weight: 1; + background-color:#00000e; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#disabledPropTrue { + flex-weight: 1; + background-color:#000f00; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#disabledPropFalse { + flex-weight: 1; + background-color:#0000f0; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#disabledPropNone { + flex-weight: 1; + background-color:#d00000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#focusablePropTrue { + flex-weight: 1; + background-color:#00000f; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#focusablePropFalse { + flex-weight: 1; + background-color:#ff0000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#focusablePropNone { + flex-weight: 1; + background-color:#0d0000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#dataPropB { + flex-weight: 1; + background-color:#0ff000; + width: 30px; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropBNone { + flex-weight: 1; + background-color:#00d000; + width: 30px; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + flex-weight: 1; + background-color:#0ff000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#dataPropNone { + flex-weight: 1; + background-color:#00d000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#clickEffectPropSmall { + flex-weight: 1; + background-color:#00ff00; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#clickEffectPropMedium { + flex-weight: 1; + background-color:#000ff0; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#clickEffectPropLarge { + flex-weight: 1; + background-color:#fff000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#clickEffectPropNone{ + flex-weight: 1; + background-color:#000d00; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#dirPropRtl { + flex-weight: 1; + background-color:#0fff00; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#dirPropAuto { + flex-weight: 1; + background-color:#00fff0; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#dirPropLtr { + flex-weight: 1; + background-color:#000fff; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#dirPropNone { + flex-weight: 1; + background-color:#0000d0; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#forPropNull { + flex-weight: 1; + background-color:#ffff00; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#forPropOne { + flex-weight: 1; + background-color:#00e000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#forPropThree { + flex-weight: 1; + background-color:#000e00; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#ifPropTrue { + flex-weight: 1; + background-color:#0ffff0; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#ifPropFalse { + flex-weight: 1; + background-color:#00ffff; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#ifPropNone { + flex-weight: 1; + background-color:#00000d; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#showPropTrue { + flex-weight: 1; + background-color:#e00000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#showPropFalse { + flex-weight: 1; + background-color:#0e0000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +#showPropNone { + flex-weight: 1; + background-color:#c00000; + width: 30px; + margin-left: 10px; + margin-right: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} +#qrcodeTypeValue { + flex-weight: 1; + background-color:#c00000; + width: 100px; + margin-left: 10px; + margin-right: 10px; +} +#qrcodeTypeValueNone { + flex-weight: 1; + background-color:yellow; + width: 100px; + margin-left: 10px; + margin-right: 10px; +} +#qrcodeTypeRect { + flex-weight: 1; + background-color:blue; + width: 100px; + margin-left: 10px; + margin-right: 10px; +} +#qrcodeTypeCircle { + flex-weight: 1; + width: 100px; + margin-left: 10px; + margin-right: 10px; +} +#qrcodeTypeNone { + flex-weight: 1; + background-color:blue; + width: 100px; + margin-left: 10px; + margin-right: 10px; +} + +#showFor1 { + flex-weight: 1; + background-color:#c00000; + width: 50px; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showFor2 { + flex-weight: 1; + background-color:blue; + width: 50px; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showIf { + flex-weight: 1; + background-color:#c00000; + width: 50px; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showElseIfTrue { + flex-weight: 1; + background-color:black; + width: 50px; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showElseIfFalse { + flex-weight: 1; + background-color:blue; + width: 50px; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showElse { + flex-weight: 1; + background-color:yellow; + width: 50px; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/qrcode/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/qrcode/prop/index.hml new file mode 100644 index 000000000..c575fecd2 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/qrcode/prop/index.hml @@ -0,0 +1,267 @@ + + +
+
+ + qrcode通用属性 + + + + 通用属性 -- id + + + + + + 通用属性 -- class + +
+ + + + +
+ + + + 通用属性 -- style + + + + + + 通用属性 -- ref + +
+ + + + +
+ + + 通用属性 -- disabled + +
+ + + + + + +
+ + + 通用属性 -- focusable + +
+ + + + + + +
+ + + 通用属性 -- data + + + + + + + + 通用属性 -- data-* + +
+ + + + +
+ + + 通用属性 -- click-effect + +
+ + + + + + + + +
+ + + 通用属性 -- dir + +
+ + + + + + + + +
+ + + 渲染属性 -- for + +
+ + + + + + +
+ + + 渲染属性 -- if + + + + + + 渲染属性 -- show + +
+ + + + + + +
+
+ +
+
+
+ + qrcode特有属性 + + + 特有属性 -- value + + + + + + + 特有属性 -- type + + + + + + + + + 特有属性 -- tid + + + + + 特有属性 -- if elif + + + + + + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/qrcode/prop/index.js b/ace/ace_standard/src/main/js/default/pages/qrcode/prop/index.js new file mode 100644 index 000000000..e55a781e7 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/qrcode/prop/index.js @@ -0,0 +1,127 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development 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 prompt from '@system.prompt'; + +export default { + data:{ + array: [ + {id: 1, name: 'jack', age: 18}, + {id: 2, name: 'tony', age: 18}, + ], + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + clickEffectPropSmall : null, + clickEffectPropMedium : null, + clickEffectPropLarge : null, + clickEffectPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + + qrcodeTypeValue : null, + qrcodeTypeValueNone : null, + qrcodeTypeRect : null, + qrcodeTypeCircle : null, + qrcodeTypeNone : null + }, + + onShow(){ + this.getCommonPropValues(); + this.getSpecificPropValues(); + globalThis.value = { + idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone, + styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone, + disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse, + disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue, + focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone, + dataProp : this.dataProp, dataPropNone : this.dataPropNone, + clickEffectPropSmall : this.clickEffectPropSmall, clickEffectPropMedium : this.clickEffectPropMedium, + clickEffectPropLarge : this.clickEffectPropLarge, clickEffectPropNone : this.clickEffectPropNone, + dirPropRtl : this.dirPropRtl, dirPropAuto : this.dirPropAuto, dirPropLtr : this.dirPropLtr, + dirPropNone : this.dirPropNone, forPropNull : this.forPropNull, forPropOne : this.forPropOne, + forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue, showPropTrue : this.showPropTrue, + showPropFalse : this.showPropFalse, showPropNone : this.showPropNone, + + qrcodeTypeValue : this.qrcodeTypeValue, + qrcodeTypeValueNone : this.qrcodeTypeValueNone, + qrcodeTypeRect : this.qrcodeTypeRect, + qrcodeTypeCircle : this.qrcodeTypeCircle, + qrcodeTypeNone : this.qrcodeTypeNone + } + }, + + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.disabledPropTrue = this.$element("disabledPropTrue").getInspector() + this.disabledPropFalse = this.$element("disabledPropFalse").getInspector() + this.disabledPropNone = this.$element("disabledPropNone").getInspector() + this.focusablePropTrue = this.$element("focusablePropTrue").getInspector() + this.focusablePropFalse = this.$element("focusablePropFalse").getInspector() + this.focusablePropNone = this.$element("focusablePropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector() + this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector() + this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector() + this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector() + this.dirPropRtl = this.$element("dirPropRtl").getInspector() + this.dirPropAuto = this.$element("dirPropAuto").getInspector() + this.dirPropLtr = this.$element("dirPropLtr").getInspector() + this.dirPropNone = this.$element("dirPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + }, + + getSpecificPropValues(){ + this.qrcodeTypeValue = this.$element("qrcodeTypeValue").getInspector() + this.qrcodeTypeValueNone = this.$element("qrcodeTypeValueNone").getInspector() + this.qrcodeTypeRect = this.$element("qrcodeTypeRect").getInspector() + this.qrcodeTypeCircle = this.$element("qrcodeTypeCircle").getInspector() + this.qrcodeTypeNone = this.$element("qrcodeTypeNone").getInspector() + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/qrcode/router/index.css b/ace/ace_standard/src/main/js/default/pages/qrcode/router/index.css new file mode 100644 index 000000000..189bae667 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/qrcode/router/index.css @@ -0,0 +1,476 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development 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:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} + +.title{ + width: 100%; + height: 60px; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + height: 20px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + flex-weight: 1; + width: 100%; + height: 100%; + min-width: 40px; + min-height: 10px; + max-width: 30px; + max-height: 30px; + padding-left: 1px; + padding-top: 1px; + padding-right: 1px; + padding-bottom: 1px; + margin-left: 10px; + margin-top: 1px; + margin-right: 15px; + margin-bottom: 1px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 50px; + padding-start: 1px; + padding-end: 1px; + margin-start: 1px; + margin-end: 1px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.style3{ + flex-weight: 1; + width: 20%; + height: 160px; + padding: 1px; + margin: 1px; + border-left: 1px solid #000000; + border-right: 1px dashed #00ff00; + border-top: 0.5px dotted #0000ff; + border-bottom: 0.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 150px; + flex-shrink: 1; +} + +.style4{ + width: 100%; + height: 50px; + padding: 1px; + margin: 1px; + border: 1px solid #000000; +} + +.contain1{ + flex-weight: 1; + width: 100%; + height: 120px; + flex-direction: row; +} + +.style5{ + width: 20%; + height: 50px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 50px; + height: 50px; + position: absolute; + left: 50px; + top: 1px; + bottom: 1px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + flex-weight: 1; + flex-direction: column; + flex-wrap:wrap; + justify-content:flex-start; + align-items: flex-end; + align-content:space-around; + display: flex; + height: 100px; +} + +.style8{ + flex-weight: 1; + flex-direction: row; + flex-wrap:nowrap; + scrollbar-color: yellow; + scrollbar-width: 10px; + overscroll-effect:spring; + height: 100px; + overflow:scroll; +} +.flex-item { + width: 20%; + height: 50px; + border-radius: 16px; + margin-right: 20px; + margin-left: 20px; +} + +.style9{ + flex-direction: row; + flex-wrap:nowrap; + scrollbar-color: yellow; + scrollbar-width: 10px; + overscroll-effect:spring; + height: 20px; + overflow:scroll; +} + +.color-red { + color: red; +} + +.color-white { + color: blue; +} + +.font-weight3{ + font-weight:300 +} +.font-weight6{ + font-weight:600 +} +.background-primary{ + background-color: red; +} +.background-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 100%; + border-radius: 2px; +} + +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} + +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} + +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} + +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + flex-weight: 1; +} + +.event1{ + width: 15%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 15%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 15%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.prop-container{ + flex-direction: column; +} + +#prop1 { + height: 22px; + background-color: mediumslateblue; + width: 100%; + margin-left: 20px; +} + +.prop2 { + height: 22px; + background-color: pink; + width: 100%; + margin-left: 20px; +} + +.prop3 { + height: 22px; + background-color: darkseagreen; + width: 100%; +} +.prop4 { + height: 22px; + background-color: red; + width: 100%; +} +.prop5 { + height: 22px; + background-color: purple; + width: 100%; + margin-bottom: 10px; +} +.prop6 { + height: 22px; + background-color: purple; + width: 100%; + margin-bottom: 5px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + background-color: #72ac33; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + background-color: #321124; + margin: 5px; + width: 90%; + height: 30px; +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} + +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + height: 22px; +} + +.function2{ + background-color: #00ff00; + height: 22px; +} + +.function3{ + background-color: #0000ff; + height: 22px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/qrcode/router/index.hml b/ace/ace_standard/src/main/js/default/pages/qrcode/router/index.hml new file mode 100644 index 000000000..717cacc1b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/qrcode/router/index.hml @@ -0,0 +1,345 @@ + + +
+
+
+ + 通用样式 + + + qrcode通用样式1 + + + + + qrcode通用样式2 + +
+ + +
+ + qrcode通用样式3 + + + + + qrcode通用样式4 + +
+ + +
+ + qrcode通用样式5 + +
+ + + + +
+ + qrcode特有样式1 + +
+ + + + +
+ + qrcode特有样式2 + +
+ + + + +
+
+ + +
+ + 动画样式 + + + qrcode动画样式1 + + + + + qrcode动画样式2 + + + +
+
+ +
+
+ +
+
+ + 通用属性 + + + qrcode通用属性1 + + + + + qrcode通用属性2 + + + + + qrcode通用属性3 + + + + + qrcode特有属性1 + +
+ + + + + + + + + + +
+ + qrcode特有属性2 + +
+ + + + +
+
+
+
+
+ + 通用事件 + + + qrcode通用事件1 + + + + + qrcode通用事件2 + + + + + qrcode通用事件3 + + + + + qrcode特有事件1 + + + +
+
+
+
+ + 通用方法 + + + qrcode通用方法1 + + + + + qrcode通用方法2 + + + + + qrcode通用方法3 + + + +
+
+ +
+
+ +
+
+ + 渐变样式 + + + qrcode渐变样式1 + + + + + qrcode渐变样式2 + + + + + qrcode渐变样式3 + + + + + qrcode渐变样式4 + + + +
+
+
+
+ + 无障碍 + + + qrcode无障碍1 + + + +
+
+
+
+ + 原子布局 + + + qrcode原子布局1 + +
+ + + + + + + + + + + + +
+ + qrcode原子布局2 + +
+ + + + + + + + + + + + +
+ + qrcode原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+ + 多模输入 + + + qrcode多模输入1 + + + +
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/qrcode/router/index.js b/ace/ace_standard/src/main/js/default/pages/qrcode/router/index.js new file mode 100644 index 000000000..4e591f67c --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/qrcode/router/index.js @@ -0,0 +1,459 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development 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 prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + data: { + array: [ + {id: 1, name: 'jack', age: 18}, + {id: 2, name: 'tony', age: 18}, + ], + }, + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + accessibility(event){ + prompt.showToast({ + message: JSON.stringify(event) + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/qrcode/style/index.css b/ace/ace_standard/src/main/js/default/pages/qrcode/style/index.css new file mode 100644 index 000000000..588215918 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/qrcode/style/index.css @@ -0,0 +1,503 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development 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:row; + width:100%; + height:100%; + padding: 1px; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style-container{ + flex-direction: column; + width: 50%; +} + +#styleOne{ + width: 150px; + height: 22px; + padding-top: 1px; + padding-left: 2px; + padding-right: 3px; + padding-bottom: 0.5px; + margin-left: 1px; + margin-top: 2px; + margin-right: 1.5px; + margin-bottom: 0.5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dotted; + border-bottom-style: solid; + border-left-width: 1px; + border-right-width: 1.5px; + border-top-width: 2px; + border-bottom-width: 0.5px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 15px; + border-top-left-radius: 10px; + border-top-right-radius: 0px; + opacity: 0.5; + align-self:flex-end; +} + +#styleTwo{ + width: 150px; + height: 22px; + padding-start: 1px; + padding-end: 2px; + margin-start: 1px; + margin-end: 2px; + border-style: dotted; + border-width: 2px; + border-color:#0f00f0; + border-radius:5px; + opacity: 1.5; + align-self:flex-start; +} + +#styleThree{ + width: 50px; + height: 22px; + padding: 2px; + margin:1px; + border-left: 1px solid #ff0000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + opacity: 1; + align-self:baseline; +} + +#styleFour{ + width: 50px; + height: 22px; + align-self:center; + border: 2px solid #00ff00; +} + +#styleFive{ + width: 150px; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleSix{ + width: 100%; + height: 22px; + background-color: #ff0000; + padding-top: 1%; + padding-left: 2%; + padding-right: 3%; + padding-bottom: 0.5%; + margin-left: 1%; + margin-top: 2%; + margin-right: 1.5%; + margin-bottom: 0.5%; +} + +#styleSeven{ + width: 70%; + height: 22px; + padding-start: 1%; + padding-end: 2%; + margin-start: 1%; + margin-end: 2%; + background-color: #00ff00; +} + +#styleEight{ + width: 60%; + height: 22px; + margin: 1%; + padding: 2%; + background-color: #0000ff; +} + +#styleNine{ + width: 100%; + height: 40px; + display:flex; + background-color: red; + flex-direction: row; +} + +#styleTen{ + width: 22px; + height: 22px; + display: none; + background-color: #ff0000; +} + +#styleEleven{ + height: 22px; + background-color: #00ff00; + flex:1 1 20px; + z-index:10; +} + +#styleTwelve{ + height: 22px; + background-color: #ff00ff; + flex-grow:2; + flex-shrink: 3; + flex-basis: 30px; + z-index:13; +} + +#styleThirteen{ + position: absolute; + left: 10px; + top: 20px; + width: 22px; + height: 22px; + background-color: #00ff00; + z-index:12; +} + +#styleFourteen{ + position: absolute; + right: 10px; + bottom: 20px; + width: 22px; + height: 22px; + background-color: #0000ff; + z-index:3; +} + +#styleFifteen{ + position: absolute; + left: 10%; + top: 20%; + width: 22px; + height: 22px; + background-color: #fff000; + z-index:5; +} + +#styleSixteen{ + position: absolute; + right: 10%; + bottom: 20%; + width: 22px; + height: 22px; + background-color: #00ffff; + z-index:15; +} + +#styleSeventeen{ + position: absolute; + start: 50px; + width: 22px; + height: 22px; + background-color: #ffff00; + z-index:7; +} + +#styleEighteen{ + position: absolute; + end: 20px; + width: 22px; + height: 22px; + background-color: #00ffff; + z-index:4; +} + +#styleNineteen{ + position: absolute; + start: 20%; + width: 22px; + height: 22px; + background-color: #ffff00; + z-index:1; +} + +#styleTwenty{ + position: absolute; + end: 20%; + width: 22px; + height: 22px; + background-color: #00ffff; + z-index:17; +} + +#styleTwentyOne{ + height: 22px; + box-shadow: 2px 4px; + flex-weight: 1; + margin:5px; +} + +#styleTwentyTwo{ + flex-weight: 1; + height: 22px; + box-shadow: 2px 4px 6px 8px; + margin:5px; +} + +#styleTwentyThree{ + flex-weight: 1; + height: 22px; + box-shadow: 1px 2px 3px 4px #ff0000; + margin:5px; +} + +#styleTwentyFour{ + width: 100px; + height: 22px; + background-color: #00ffff; + clip-path:inset(2 23); + visibility: visible; +} + +#styleTwentyFive{ + width: 100px; + height: 22px; + background-color: #00ffff; + visibility: hidden; +} + +#styleTwentySix{ + width: 150px; + height: 22px; + background-color: #999999; +} + +#styleTwentySeven{ + width: 150px; + height: 22px; + background: linear-gradient(pink,#fff000); +} + +#styleTwentyNine{ + width: 150px; + height: 22px; + background-image:url('common/images/image.png'); + background-size:contain; + background-repeat: repeat-x; + background-position: center; +} + +#styleThirty{ + width: 150px; + height: 22px; + background-image:url('common/images/image.png'); + background-size:50px 10px; + background-repeat: no-repeat; + background-position: 10px 10px; +} + +#styleThirtyOne{ + width: 150px; + height: 22px; + background-image:url('common/images/image.png'); + background-size:10% 20%; + background-repeat: repeat; + background-position: 30% 40%; + mask-image:linear-gradient(pink,#fff000); +} + +#styleThirtyTwo{ + width: 150px; + height: 22px; + background: linear-gradient(pink,#fff000); + clip-path: margin-box; + image-fill: #000fff; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#specificOne{ + width: 100%; + height: 100px; + flex-direction: row; + flex-wrap:nowrap; +} +#specificColor1{ + background-color: purple; + width: 100px; +} +#specificColor2{ + background-color: yellow; + width: 100px; +} +.color-red{ + color:red +} +.color-black{ + color:black +} +#specificTwo{ + width: 100%; + height: 100px; + flex-direction: row; + flex-wrap:nowrap; +} +#specificBackgroundColor1{ + height: 100px; +} +#specificBackgroundColor2{ + height: 100px; +} +.background-color1{ + background-color: rebeccapurple; +} +.background-color2{ + background-color: saddlebrown; +} + +#addOne{ + width: 10%; + height:50px; + background-image:url('common/images/image.png'); + background-size:cover; + align-self:stretch; + position:fixed; + transform: none; + animation-timing-function:cubic-bezier(0.4, 0.0, 0.4, 1.0); + shared-transition-effect:static; + shared-transition-name:ani; + shared-transition-timing-function:friction; + transition-enter:ani; + transition-exit: ani; + transition-duration:10; + transition-timing-function:friction; + clip-path:border-box; + display-index:1; + filter:blur(10px); + backdrop-filter:blur(10px); + window-filter:blur(10%); +} + +#addTwo{ + width: 100px; + height: 50px; + background-image:url('common/images/image.png'); + background-size:auto; + position:relative; + transform: matrix(0.5,0.1,0.2,0.9,20,10); + animation-timing-function:steps(4); + shared-transition-effect:exchange; + clip-path:padding-box; +} + +#addThree{ + width: 100px; + height: 50px; + background-color:#000000; + transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2); + clip-path:content-box; +} + +#addFour{ + width: 100px; + height: 50px; + background-color:#000000; + transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px); + clip-path:circle(1); +} + +#addFive{ + width: 100px; + height: 50px; + background-color:#000000; + transform: translateY(1px) translateZ(10px) + scale(1,2) scaleZ(0.4) + rotateX(10deg) rotateY(10deg) rotateZ(10deg) + skewX(1deg) skewY(2deg); + clip-path:ellipse(1); +} + +#addSix{ + width: 100px; + height: 50px; + background-color:#000000; + transform: scaleX(1) scaleY(0.4); + clip-path:ellipse(1) +} + +#addSeven{ + width: 100px; + height: 50px; + background-color:#000000; + clip-path:path(1); + aspect-ratio:2; + radius: 100px; +} + +#addSeven:disabled{ + width: 100px; + height: 15px; + background-color:#ff0000; +} + +#addSeven:active{ + width: 100px; + height: 15px; + background-color:#ff0000; +} + +#addSeven:focus{ + width: 100px; + height: 15px; + background-color:#ff0000; +} + +@font-face { + font-family: SimSunfont; + src: url('/common/simsun.ttf'); +} + +@media (device-type: tv) { + .addSeven { + width: 500px; + height: 500px; + background-color: #fa8072; + } +} + + + diff --git a/ace/ace_standard/src/main/js/default/pages/qrcode/style/index.hml b/ace/ace_standard/src/main/js/default/pages/qrcode/style/index.hml new file mode 100644 index 000000000..aa3bb2b04 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/qrcode/style/index.hml @@ -0,0 +1,157 @@ + + +
+
+ + qrcode通用样式 + + + + 通用样式 1-8 \n width height padding margin border opacity align-self + + + + + + + + + + + + + + + + + + + + 通用样式9-20 \n display flex z-index position + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + + 通用样式21-23 box-shadow + +
+ + + + + + +
+ + + 通用样式23-25 visibility clip-path + + + + + + + + 通用样式26-31 background + + + + + + + + + + + + + + 通用样式32 clip-path image-fill mask-image + + + +
+
+
+
+ + qrcode特有样式 + + + + 特有样式 color + +
+ + + + +
+ + 特有样式 background-color + +
+ + + + +
+ +
+ + 补充样式 + + + + + + + + + + + + + + + +
+
+
+ diff --git a/ace/ace_standard/src/main/js/default/pages/qrcode/index.js b/ace/ace_standard/src/main/js/default/pages/qrcode/style/index.js similarity index 53% rename from ace/ace_standard/src/main/js/default/pages/qrcode/index.js rename to ace/ace_standard/src/main/js/default/pages/qrcode/style/index.js index 7097ca65e..8179ff70c 100644 --- a/ace/ace_standard/src/main/js/default/pages/qrcode/index.js +++ b/ace/ace_standard/src/main/js/default/pages/qrcode/style/index.js @@ -14,28 +14,6 @@ */ export default { - data: { - qrType: 'rect', - qrSize: '300px', - qrCol: '#87ceeb', - colList: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#00ff00ff'], - qrBCol: '#f0ffff', - bColList: ['#f0ffff','#ffffe0','#d8bfd8'] - }, - setType(e) { - if (e.checked) { - this.qrType = 'rect' - } else { - this.qrType = 'circle' - } - }, - setvalue(e) { - this.qrValue = e.newValue - }, - setCol(e) { - this.qrCol = e.newValue - }, - setBCol(e) { - this.qrBCol = e.newValue - } -} \ No newline at end of file + + +} -- GitLab