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 ANY 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 TimerShaftElementHtml = ` 17<style> 18:host{ 19 box-sizing: border-box; 20 display: flex; 21 width: 100%; 22 height: 148px; 23 border-bottom: 1px solid var(--dark-background,#dadada); 24 border-top: 1px solid var(--dark-background,#dadada); 25} 26*{ 27 box-sizing: border-box; 28 user-select: none; 29} 30:host(:not([distributed])) .collect_group{ 31 display: flex; 32} 33:host([distributed]) .collect_group{ 34 display: none; 35} 36.root{ 37 width: 100%; 38 height: 100%; 39 display: grid; 40 grid-template-rows: 100%; 41 grid-template-columns: 248px 1fr; 42 background: var(--dark-background4,#FFFFFF); 43} 44.total{ 45 display: grid; 46 grid-template-columns: 1fr; 47 grid-template-rows: min-content 1fr; 48 background-color: transparent; 49} 50.panel{ 51 color: var(--dark-border,#dadada); 52 width: 100%; 53 height: 100%; 54 overflow: visible; 55 background-color: var(--dark-background4,#ffffff); 56} 57.cpu-usage{ 58 color: var(--dark-color1,#4b5766); 59 font-size: 0.9rem; 60 text-align: left; 61 padding-left: 10px; 62 width: 100%; 63 background: var(--dark-background4,#F6F6F6); 64 box-sizing: border-box; 65} 66.time-div{ 67 box-sizing: border-box; 68 width: 100%; 69 border-top: 1px solid var(--dark-background,#dadada); 70 height: 100%;display: flex;justify-content: space-between; 71 background-color: var(--dark-background1,white); 72 color: var(--dark-color1,#212121); 73 font-size: 0.7rem; 74 border-right: 1px solid var(--dark-background,#999); 75 padding: 2px 6px; 76 display: flex; 77 justify-content: space-between; 78 user-select: none; 79 position: relative; 80} 81.time-total::after{ 82 content: " +"; 83} 84.time-collect{ 85 position:absolute; 86 right:5px; 87 bottom:5px; 88 color: #5291FF; 89 display: none; 90} 91.time-collect[close] > .time-collect-arrow{ 92 transform: rotateZ(-180deg); 93} 94.collect_group{ 95 position:absolute; 96 right:25px; 97 bottom:5px; 98 display: flex; 99 flex-direction: row; 100} 101.collect_div{ 102 display: flex; 103 align-items: center; 104} 105 106</style> 107<div class="root"> 108 <div class="total"> 109 <div class="cpu-usage"></div> 110 <div class="time-div"> 111 <span class="time-total">10</span> 112 <span class="time-offset">0</span> 113 <div class="time-collect"> 114 <lit-icon class="time-collect-arrow" name="caret-down" size="17"></lit-icon> 115 </div> 116 <div class="collect_group"> 117 <div class="collect_div"> 118 <input id="collect1" type="radio" style="cursor: pointer" checked name="collect_group" value="1"/> 119 <label>G1</label> 120 </div> 121 <div class="collect_div"> 122 <input type="radio" style="cursor: pointer" name="collect_group" value="2"/> 123 <label>G2</label> 124 </div> 125 </div> 126 <collapse-button expand>123</collapse-button> 127 </div> 128 </div> 129 <canvas class="panel"></canvas> 130</div> 131`; 132