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