1/* 2 * Copyright (c) 2021 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16{ 17 "@app-component/exteriorStyle": { 18 "_descriptor": {}, 19 "data": {}, 20 "template": { 21 "type": "div", 22 "attr": { 23 "debugLine": "pages/exteriorStyle/exteriorStyle:1", 24 "value": "exteriorStyle_test" 25 } 26 }, 27 "style": { 28 ".a": { 29 "width": "100%", 30 "height": "50%" 31 }, 32 ".b": { 33 "width": "100px", 34 "height": "200px" 35 }, 36 ".c": { 37 "color": "#808080" 38 }, 39 ".d": { 40 "color": "#008000" 41 }, 42 ".e": { 43 "color": "rgba(80,60,150,1)" 44 }, 45 ".f": { 46 "animationDuration": "500ms", 47 "animationDelay": "100ms" 48 }, 49 ".g": { 50 "animationIterationCount": 3 51 }, 52 ".h": { 53 "animationTimingFunction": "linear" 54 }, 55 ".h-steps": { 56 "animationTimingFunction": "steps(9,start)" 57 }, 58 ".i": { 59 "animationFillMode": "forwards" 60 }, 61 ".j": { 62 "gridTemplateColumns": "50px 40px 80px", 63 "gridTemplateRows": "auto-fill 20px" 64 }, 65 ".l": { 66 "gridRowStart": 3 67 }, 68 ".m": { 69 "borderTopWidth": "5px", 70 "borderRightWidth": "5px", 71 "borderBottomWidth": "5px", 72 "borderLeftWidth": "5px", 73 "borderTopStyle": "solid", 74 "borderRightStyle": "solid", 75 "borderBottomStyle": "solid", 76 "borderLeftStyle": "solid", 77 "borderTopColor": "#808080", 78 "borderRightColor": "#808080", 79 "borderBottomColor": "#808080", 80 "borderLeftColor": "#808080" 81 }, 82 ".n": { 83 "textIndent": "50px" 84 }, 85 ".o": { 86 "backgroundImage": "/common/img/a.jpg" 87 }, 88 "@TRANSITION": { 89 ".p": { 90 "property": "width" 91 }, 92 ".q": { 93 "duration": "5s" 94 } 95 }, 96 ".p": { 97 "transitionProperty": "width" 98 }, 99 ".q": { 100 "transitionDuration": "5s" 101 }, 102 ".r": { 103 "transform": "{\"translate\":\"50% 50%\"}" 104 }, 105 ".s": { 106 "transformOrigin": "20% 40%" 107 }, 108 ".t": { 109 "startAngle": "240deg" 110 }, 111 ".u": { 112 "selectedFontFamily": "PingFangSC-Regular" 113 }, 114 ".v": { 115 "paddingTop": "10px", 116 "paddingRight": "15px", 117 "paddingBottom": "10px", 118 "paddingLeft": "15px" 119 }, 120 "#w": { 121 "fontSize": "15px", 122 "fontFamily": "PingFangSC-Regular" 123 }, 124 "@KEYFRAMES": { 125 "animation1": [ 126 { 127 "backgroundColor": "#808080", 128 "time": 0 129 }, 130 { 131 "backgroundColor": "#000000", 132 "time": "50" 133 }, 134 { 135 "backgroundColor": "#000fff", 136 "time": 100 137 } 138 ], 139 "animation2": [ 140 { 141 "transform": "{\"translateX\":\"90px\"}", 142 "time": 0 143 }, 144 { 145 "transform": "{\"translateX\":\"130px\"}", 146 "time": "50" 147 }, 148 { 149 "transform": "{\"translateX\":\"200px\"}", 150 "time": 100 151 } 152 ], 153 "animation3": [ 154 { 155 "transform": "{\"rotate\":\"90deg\"}", 156 "time": 0 157 }, 158 { 159 "transform": "{\"rotate\":\"150deg\"}", 160 "time": "50" 161 }, 162 { 163 "transform": "{\"rotate\":\"260deg\"}", 164 "time": 100 165 } 166 ], 167 "animation4": [ 168 { 169 "transform": "{\"rotate\":\"0.25turn\"}", 170 "time": 0 171 }, 172 { 173 "transform": "{\"rotate\":\"57deg\"}", 174 "time": "50" 175 }, 176 { 177 "transform": "{\"rotate\":\"400grad\"}", 178 "time": 100 179 } 180 ], 181 "shared-transition": [ 182 { 183 "opacity": 0, 184 "time": 0 185 }, 186 { 187 "opacity": 1, 188 "time": 100 189 } 190 ] 191 }, 192 ".gradient1": { 193 "background": "{\"values\":[{\"type\":\"linearGradient\",\"directions\":[\"to\",\"bottom\"],\"values\":[\"#ff0000\",\"#00ff00\"]}]}" 194 }, 195 ".gradient2": { 196 "background": "{\"values\":[{\"type\":\"linearGradient\",\"directions\":[\"45deg\"],\"values\":[\"rgb(255,0,0)\",\"rgb(0,255,0)\"]}]}" 197 }, 198 ".gradient3": { 199 "background": "{\"values\":[{\"type\":\"linearGradient\",\"directions\":[\"to\",\"right\"],\"values\":[\"rgb(255,0,0) 90px\",\"rgb(0,0,255) 60%\"]}]}" 200 }, 201 ".gradient4": { 202 "background": "{\"values\":[{\"type\":\"repeatingLinearGradient\",\"directions\":[\"to\",\"right\"],\"values\":[\"rgba(255,255,0,1) 30px\",\"rgba(0,0,255,0.5) 60px\"]}]}" 203 }, 204 ".shared-transition-style": { 205 "sharedTransitionEffect": "static", 206 "sharedTransitionName": "shared-transition" 207 }, 208 "@FONT-FACE": [ 209 { 210 "fontFamily": "HWfont", 211 "src": "url(/common/HWfont.ttf)" 212 } 213 ], 214 ".txt": { 215 "fontFamily": "HWfont" 216 }, 217 ".shadow": { 218 "boxShadowBlur": "30px", 219 "boxShadowColor": "#888888", 220 "boxShadowH": "100px", 221 "boxShadowSpread": "40px", 222 "boxShadowV": "100px" 223 }, 224 ".transform-origin-style1":{ 225 "transformOrigin": "left" 226 }, 227 ".transform-origin-style2":{ 228 "transformOrigin": "left bottom" 229 }, 230 ".transform-origin-style3":{ 231 "transformOrigin": "right 90px" 232 }, 233 ".transform-style1":{ 234 "transform": "{\"translate3d\":\"1px 2px 3px\"}" 235 }, 236 ".transform-style2":{ 237 "transform": "{\"matrix\":\"1 2 3 4 5 6\"}" 238 }, 239 ".transform-style3":{ 240 "transform": "{\"matrix3d\":\"1 0 0 0 0 1 6 0 0 0 1 0 50 100 0 1.1\"}" 241 }, 242 ".transform-style4":{ 243 "transform": "{}" 244 }, 245 ".transform-style5":{ 246 "transform": "{\"rotate3d\":\"1 1 1 30deg\",\"translate3d\":\"1px 2px 3px\",\"scale3d\":\"1.5 1.5 1.5\",\"perspective\":\"800px\"}" 247 }, 248 ".simple-animation1":{ 249 "animationDuration": "3s", 250 "animationTimingFunction": "ease-in", 251 "animationDelay": "1s", 252 "animationIterationCount": 2, 253 "animationDirection": "reverse", 254 "animationFillMode": "both", 255 "animationPlayState": "paused", 256 "animationName": "slidein" 257 }, 258 ".simple-animation2":{ 259 "animationDuration": "3s", 260 "animationTimingFunction": "linear", 261 "animationDelay": "1s", 262 "animationDirection": "normal", 263 "animationPlayState": "running", 264 "animationIterationCount": 1, 265 "animationFillMode": "none", 266 "animationName": "test_05" 267 }, 268 ".simple-animation3":{ 269 "animationDuration": "3s", 270 "animationDelay": "0ms", 271 "animationDirection": "normal", 272 "animationTimingFunction": "ease", 273 "animationPlayState": "running", 274 "animationIterationCount": 1, 275 "animationFillMode": "none", 276 "animationName": "sliding-vertically" 277 }, 278 ".mask-image-url1": { 279 "maskImage": "common/mask.svg" 280 } 281 } 282 } 283} 284
