1/* 2 * Copyright (C) 2022 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 unknown KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16export const SpAdvertisementHtml = `<style> 17 #sp-advertisement { 18 position: absolute; 19 bottom: -200px; 20 transform: translateX(-50%); 21 opacity: 0; 22 animation: slideUpVerticalAndFadeIn 1.5s forwards ease-out; 23 background-color:#fff; 24 display:none; 25 min-width: 400px; 26 border-radius: 5px; 27 border:1px solid gray; 28 box-shadow: 0px 0px 10px #d9d9d9; 29 cursor: pointer; 30 padding:15px 5px 5px 5px; 31 font-family: "HarmonyOS Sans SC", "Arial", sans-serif; 32 } 33 @keyframes slideUpVerticalAndFadeIn { 34 0% { 35 bottom: -200px; 36 opacity: 0; 37 } 38 100% { 39 bottom: 0; 40 transform: translateX(-100%); 41 opacity: 1; 42 } 43 } 44 #close { 45 position:absolute; 46 right:0px; 47 top:0px; 48 padding:1px 2px; 49 border-top-right-radius:5px; 50 color:#999; 51 } 52 #close:hover { 53 background-color:#999; 54 color:#666; 55 font-weight:bold; 56 } 57 #notice { 58 display: flex; 59 align-items: center; 60 color:#000; 61 overflow-wrap: break-word; 62 line-height:30px; 63 padding-right:15px; 64 overflow:hidden; 65 } 66 67 img { 68 flex-grow: 1; 69 flex-basis: 0; 70 max-width: 20%; 71 object-fit: cover; 72 } 73 .text { 74 flex-grow: 2; 75 padding-left: 10px; 76 } 77 78 span { 79 display:inline-block; 80 } 81 82 a { 83 word-wrap: break-word; 84 overflow-wrap: break-word; 85 } 86 </style> 87 <div class="sp-advertisement" id="sp-advertisement"> 88 <lit-icon name="close" size="18px" id = "close"></lit-icon> 89 <div id="notice"> 90 <img src="img/logo.png" alt="Description" class="image" id="Image"> 91 <div class="text"></div> 92 </div> 93 </div> 94 `;