Merge pull request #216 in YR/star-web-components from modify-some-css to master

* commit 'd5e0aeebdae8396032500bf6f61c1b68652e2eec':
  调整部分组件css

src/components/brightness-slider/brightness-slider.ts

@@ -1,7 +1,15 @@
-import {html, css, LitElement, HTMLTemplateResult} from 'lit'
+import {
-import {customElement, property, query} from 'lit/decorators.js'
+  html,
+  CSSResultArray,
+  HTMLTemplateResult,
+  customElement,
+  property,
+  query,
+  StarBaseElement,
+} from '@star-web-components/base'
+import {sharedStyles} from './style.js'
 @customElement('brightness-slider')
-export class BrightnessSlider extends LitElement {
+export class BrightnessSlider extends StarBaseElement {
   @query('.progress') progress!: HTMLDivElement
   @query('.sliderBar') sliderBar!: HTMLDivElement
   @property({type: String}) id = ''
@@ -75,83 +83,10 @@ export class BrightnessSlider extends LitElement {
     `
   }
 
-  static styles = css`
+  static override get styles(): CSSResultArray {
-    :host {
+    return [sharedStyles]
-      width: inherit;
-      height: inherit;
-      dislay: block;
-      --cover-length: 3.78px;
-      --background-lm: rgba(255, 255, 255, 0.5);
-      --background-dm: rgba(0, 0, 0, 0.15);
-      --icon-color-lm: #4d4d4d;
-      --icon-color-dm: #d1d1d1;
-      --progress-background-lm: rgba(255, 255, 255, 0.8);
-      --progress-background-dm: rgba(255, 255, 255, 0.7);
   }
 
-    .sliderBar {
-      width: inherit;
-      height: inherit;
-      position: absolute;
-      left: 0px;
-      right: 0px;
-      border-radius: 1.3vw;
-    }
-
-    .progress {
-      width: var(--cover-length);
-      height: 100%;
-      position: absolute;
-      left: 0px;
-      right: 0px;
-      border-radius: 1.3vw;
-    }
-
-    .sliderBar::before {
-      width: 4vw;
-      height: 4vw;
-      left: 2.4vw;
-      top: 2.4vw;
-      font-size: 4vw;
-      position: absolute;
-      content: attr(data-icon);
-      font-family: gaia-icons;
-      font-style: normal;
-      text-rendering: optimizelegibility;
-      font-weight: 500;
-    }
-
-    @media (prefers-color-scheme: light) {
-      .sliderBar {
-        background: var(--background-lm);
-      }
-
-      .progress {
-        background: var(--progress-background-lm);
-      }
-
-      .sliderBar::before {
-        color: var(--icon-color-lm);
-        z-index: 1;
-      }
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .sliderBar {
-        background: var(--background-dm);
-      }
-
-      .progress {
-        background: var(--progress-background-dm);
-      }
-
-      .sliderBar::before {
-        color: var(--icon-color-dm);
-        z-index: auto;
-      }
-    }
-  `
-
   handleEvent(event: TouchEvent) {
     switch (event.type) {
       case 'touchstart':

src/components/brightness-slider/style.ts

@@ -0,0 +1,79 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+  :host {
+    width: inherit;
+    height: inherit;
+    dislay: block;
+    --cover-length: 3.78px;
+    --background-lm: rgba(255, 255, 255, 0.5);
+    --background-dm: rgba(0, 0, 0, 0.15);
+    --icon-color-lm: #4d4d4d;
+    --icon-color-dm: #d1d1d1;
+    --progress-background-lm: rgba(255, 255, 255, 0.8);
+    --progress-background-dm: rgba(255, 255, 255, 0.7);
+  }
+
+  .sliderBar {
+    width: inherit;
+    height: inherit;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    border-radius: var(--auto-16px);
+  }
+
+  .progress {
+    width: var(--cover-length);
+    height: 100%;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    border-radius: var(--auto-16px);
+  }
+
+  .sliderBar::before {
+    width: var(--auto-48px);
+    height: var(--auto-48px);
+    left: calc(29px / var(--hostDevicePixelRatio));
+    top: calc(29px / var(--hostDevicePixelRatio));
+    font-size: var(--auto-48px);
+
+    position: absolute;
+    content: attr(data-icon);
+    font-family: gaia-icons;
+    font-style: normal;
+    text-rendering: optimizelegibility;
+    font-weight: 500;
+  }
+
+  @media (prefers-color-scheme: light) {
+    .sliderBar {
+      background: var(--background-lm);
+    }
+
+    .progress {
+      background: var(--progress-background-lm);
+    }
+
+    .sliderBar::before {
+      color: var(--icon-color-lm);
+      z-index: 1;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .sliderBar {
+      background: var(--background-dm);
+    }
+
+    .progress {
+      background: var(--progress-background-dm);
+    }
+
+    .sliderBar::before {
+      color: var(--icon-color-dm);
+      z-index: auto;
+    }
+  }
+`

src/components/drop-down-menu/drop-down-menu.ts

@@ -1,21 +1,25 @@
-import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
 import {
+  html,
+  CSSResultArray,
+  HTMLTemplateResult,
+  nothing,
   customElement,
   property,
   query,
   queryAssignedElements,
-} from 'lit/decorators.js'
+  StarBaseElement,
-import {HeaderBar, HeaderBarType} from '../header-bar/header-bar.js'
+} from '@star-web-components/base'
-import {IconControlBarType} from '../icon-control-bar/icon-control-bar.js'
+import {sharedStyles} from './style.js'
-import '../icon-control-bar/icon-control-bar.js'
+import {HeaderBar, HeaderBarType} from '@star-web-components/header-bar'
-import '../header-bar/header-bar.js'
+import {IconControlBarType} from '@star-web-components/icon-control-bar'
+
 export enum DropDownMenuType {
   HEADER_WITH_TIME = 'header-with-time',
   HEADER_WITH_DATE_TIME = 'header-with-date-time',
 }
 
 @customElement('drop-down-menu')
-export class DropDownMenu extends LitElement {
+export class DropDownMenu extends StarBaseElement {
   @property({type: DropDownMenuType}) type = ''
   @queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]
   @query('header-bar') headerBar!: HeaderBar
@@ -75,54 +79,9 @@ export class DropDownMenu extends LitElement {
     this.headerBar.autoUpdateDateTime()
   }
 
-  static styles = css`
+  static override get styles(): CSSResultArray {
-    :host {
+    return [sharedStyles]
-      width: inherit;
-      height: inherit;
   }
-
-    :host([open]) {
-      transform: translateY(0);
-      transition: transform 300ms ease, visibility 300ms;
-      will-change: transform;
-      visibility: visible;
-    }
-
-    .inner {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    header-bar[type='only-time'] {
-      dispaly: flex;
-      width: 42.7vw;
-      height: 4.3vw;
-      height: 2.7vh;
-    }
-
-    header-bar[type='date-time'] {
-      dispaly: flex;
-      width: 71.7vw;
-      height: 3.3vh;
-    }
-
-    .all-quick-icons {
-      width: 100%;
-      height: 97.6%;
-      position: relative;
-      top: 2.4%;
-    }
-
-    .others {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      top: 5.2vh;
-    }
-  `
 }
 
 declare global {

src/components/drop-down-menu/style.ts

@@ -0,0 +1,49 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+  :host {
+    width: inherit;
+    height: inherit;
+  }
+
+  :host([open]) {
+    transform: translateY(0);
+    transition: transform 300ms ease, visibility 300ms;
+    will-change: transform;
+    visibility: visible;
+  }
+
+  .inner {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  header-bar[type='only-time'] {
+    dispaly: flex;
+    width: calc(512px / var(--hostDevicePixelRatio));
+    height: var(--auto-52px);
+  }
+
+  header-bar[type='date-time'] {
+    dispaly: flex;
+    width: calc(860px / var(--hostDevicePixelRatio));
+    height: var(--auto-64px);
+  }
+
+  .all-quick-icons {
+    width: 100%;
+    height: 97.6%;
+    position: relative;
+    top: 2.4%;
+  }
+
+  .others {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: var(--auto-100px);
+  }
+`

src/components/header-bar/header-bar.ts

@@ -1,13 +1,22 @@
-import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
+import {
-import {customElement, property, query, state} from 'lit/decorators.js'
+  html,
-
+  CSSResultArray,
+  HTMLTemplateResult,
+  nothing,
+  customElement,
+  property,
+  query,
+  state,
+  StarBaseElement,
+} from '@star-web-components/base'
+import {sharedStyles} from './style.js'
 export enum HeaderBarType {
   ONLY_TIME = 'only-time',
   DATE_TIME = 'date-time',
 }
 
 @customElement('header-bar')
-export class HeaderBar extends LitElement {
+export class HeaderBar extends StarBaseElement {
   @state() updateTimeTimeout!: number
   @state() updateDateTimeout!: number
   @property({type: HeaderBarType}) type = ''
@@ -52,129 +61,10 @@ export class HeaderBar extends LitElement {
     }
   }
 
-  static styles = css`
+  static override get styles(): CSSResultArray {
-    :host {
+    return [sharedStyles]
-      --only-time-color-lm: #292929;
-      --only-time-color-dm: #f0f0f0;
-      --time-date-time-color-lm: #404040;
-      --time-date-date-color-lm: #000000;
-      --time-date-time-color-dm: #e0e0e0;
-      --time-date-date-color-dm: #e0e0e0;
-      width: inherit;
-      height: inherit;
   }
 
-    .time-outer {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .time-outer > #time {
-      font-family: OPPOSans;
-      font-style: normal;
-      font-weight: 400;
-    }
-
-    .time-icons > ::slotted(*) {
-      display: flex;
-    }
-
-    .time-date-outer {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: end;
-    }
-
-    .time-date {
-      height: 100%;
-      width: 100%;
-      display: flex;
-      align-items: end;
-      vertical-align: middle;
-      font-family: 'OPPOSans';
-      font-style: normal;
-      font-weight: 400;
-      position: relative;
-    }
-
-    #date {
-      position: relative;
-      opacity: 0.6;
-      mix-blend-mode: normal;
-    }
-
-    .time-outer > #time {
-      height: 2.7vh;
-      line-height: 2.7vh;
-      font-size: 2.7vh;
-    }
-
-    .time-icons {
-      display: flex;
-      width: 11.3vw;
-      position: relative;
-      right: 0.3vw;
-    }
-
-    .time-icons > ::slotted(:last-child) {
-      position: relative;
-      left: 3.3vw;
-    }
-
-    .time-date {
-      line-height: 3.3vh;
-      left: 0.8vw;
-    }
-
-    .time-date > #time {
-      font-size: 5.3vw;
-    }
-
-    #date {
-      height: 1.8vh;
-      line-height: 1.8vh;
-      left: 1.8vw;
-      font-size: 2.2vw;
-    }
-
-    .time-date-icons {
-      position: relative;
-      right: 0.9vw;
-    }
-
-    @media (prefers-color-scheme: light) {
-      .time-outer > #time {
-        color: var(--only-time-color-lm);
-      }
-
-      .time-date > #time {
-        color: var(--time-date-time-color-lm);
-      }
-
-      #date {
-        color: var(--time-date-date-color-lm);
-      }
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .time-outer > #time {
-        color: var(--only-time-color-dm);
-      }
-
-      .time-date > #time {
-        color: var(--time-date-time-color-dm);
-      }
-
-      #date {
-        color: var(--time-date-date-color-dm);
-      }
-    }
-  `
-
   firstUpdated() {
     this.autoUpdateDateTime()
   }

src/components/header-bar/style.ts

@@ -0,0 +1,124 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+  :host {
+    --only-time-color-lm: #292929;
+    --only-time-color-dm: #f0f0f0;
+    --time-date-time-color-lm: #404040;
+    --time-date-date-color-lm: #000000;
+    --time-date-time-color-dm: #e0e0e0;
+    --time-date-date-color-dm: #e0e0e0;
+    width: inherit;
+    height: inherit;
+  }
+
+  .time-outer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .time-outer > #time {
+    font-family: OPPOSans;
+    font-style: normal;
+    font-weight: 400;
+  }
+
+  .time-icons > ::slotted(*) {
+    display: flex;
+  }
+
+  .time-date-outer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: end;
+  }
+
+  .time-date {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: end;
+    vertical-align: middle;
+    font-family: 'OPPOSans';
+    font-style: normal;
+    font-weight: 400;
+    position: relative;
+  }
+
+  #date {
+    position: relative;
+    opacity: 0.6;
+    mix-blend-mode: normal;
+  }
+
+  .time-outer > #time {
+    height: var(--auto-52px);
+    line-height: var(--auto-52px);
+    font-size: var(--auto-52px);
+  }
+
+  .time-icons {
+    display: flex;
+    position: relative;
+    width: calc(136px / var(--hostDevicePixelRatio));
+    right: var(--auto-4px);
+  }
+
+  .time-icons > ::slotted(:last-child) {
+    position: relative;
+    left: var(--auto-40px);
+  }
+
+  .time-date {
+    line-height: var(--auto-64px);
+    left: var(--auto-10px);
+  }
+
+  .time-date > #time {
+    font-size: var(--auto-64px);
+  }
+
+  #date {
+    height: var(--auto-34px);
+    line-height: var(--auto-34px);
+    left: var(--auto-22px);
+    font-size: var(--auto-26px);
+  }
+
+  .time-date-icons {
+    position: relative;
+    right: var(--auto-11px);
+  }
+
+  @media (prefers-color-scheme: light) {
+    .time-outer > #time {
+      color: var(--only-time-color-lm);
+    }
+
+    .time-date > #time {
+      color: var(--time-date-time-color-lm);
+    }
+
+    #date {
+      color: var(--time-date-date-color-lm);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .time-outer > #time {
+      color: var(--only-time-color-dm);
+    }
+
+    .time-date > #time {
+      color: var(--time-date-time-color-dm);
+    }
+
+    #date {
+      color: var(--time-date-date-color-dm);
+    }
+  }
+`

src/components/icon-control-bar-group/icon-control-bar-group.ts

@@ -1,13 +1,21 @@
-import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
+import {
-import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
+  html,
-
+  CSSResultArray,
+  HTMLTemplateResult,
+  nothing,
+  customElement,
+  property,
+  queryAssignedElements,
+  StarBaseElement,
+} from '@star-web-components/base'
+import {sharedStyles} from './style.js'
 export enum IconControlBarGroupType {
   BASE = 'base',
   WITH_STATE = 'with-state',
 }
 
 @customElement('icon-control-bar-group')
-export class IconControlBarGroup extends LitElement {
+export class IconControlBarGroup extends StarBaseElement {
   @property({type: IconControlBarGroupType}) type = ''
   @property({type: Number}) count = 2
   @queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]
@@ -57,78 +65,9 @@ export class IconControlBarGroup extends LitElement {
     }
   }
 
-  static styles = css`
+  static override get styles(): CSSResultArray {
-    :host {
+    return [sharedStyles]
-      --background-lm: #ffffff;
-      // --background-dm: #000000;
-      --background-dm: rgba(0, 0, 0, 0.15);
-      --opacity-lm: 0.75;
-      --opacity-dm: 0.25;
-      --line-border-lm: rgba(0, 0, 0, 0.07);
-      --line-border-dm: rgba(255, 255, 255, 0.07);
-
-      width: inherit;
-      height: inherit;
-      mix-blend-mode: normal;
-      // opacity: var(--opacity-lm);
-      border-radius: 1.3vw;
   }
-
-    .icon-with-state {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      // justify-content: space-around;
-      justify-content: space-between;
-    }
-
-    .icon-only {
-      width: inherit;
-      height: inherit;
-      background: inherit;
-      border-radius: inherit;
-    }
-
-    .icon-only > div {
-      display: flex;
-      align-items: center;
-      height: 100%;
-    }
-
-    .icon-only > div > ::slotted(*) {
-      width: 25%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 2.5vw;
-      border-radius: 0.17vw;
-    }
-
-    @media (prefers-color-scheme: light) {
-      :host {
-        background: var(--background-lm);
-        opacity: var(--opacity-lm);
-      }
-
-      .icon-only > div > ::slotted(*) {
-        border-left: 0.17vw solid var(--line-border-lm);
-      }
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .icon-only > div > ::slotted(*) {
-        border-left: 0.17vw solid var(--line-border-dm);
-      }
-
-      .icon-only > div > ::slotted(:first-child) {
-        border-left-style: none;
-      }
-
-      :host {
-        background: var(--background-dm);
-      }
-    }
-  `
 }
 
 declare global {

src/components/icon-control-bar-group/style.ts

@@ -0,0 +1,74 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+  :host {
+    --background-lm: #ffffff;
+    // --background-dm: #000000;
+    --background-dm: rgba(0, 0, 0, 0.15);
+    --opacity-lm: 0.75;
+    --opacity-dm: 0.25;
+    --line-border-lm: rgba(0, 0, 0, 0.07);
+    --line-border-dm: rgba(255, 255, 255, 0.07);
+
+    width: inherit;
+    height: inherit;
+    mix-blend-mode: normal;
+    // opacity: var(--opacity-lm);
+    border-radius: var(--auto-16px);
+  }
+
+  .icon-with-state {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    // justify-content: space-around;
+    justify-content: space-between;
+  }
+
+  .icon-only {
+    width: inherit;
+    height: inherit;
+    background: inherit;
+    border-radius: inherit;
+  }
+
+  .icon-only > div {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  .icon-only > div > ::slotted(*) {
+    width: 25%;
+    height: var(--auto-30px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--auto-2px);
+  }
+
+  @media (prefers-color-scheme: light) {
+    :host {
+      background: var(--background-lm);
+      opacity: var(--opacity-lm);
+    }
+
+    .icon-only > div > ::slotted(*) {
+      border-left: var(--auto-2px) solid var(--line-border-lm);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .icon-only > div > ::slotted(*) {
+      border-left: var(--auto-2px) solid var(--line-border-dm);
+    }
+
+    .icon-only > div > ::slotted(:first-child) {
+      border-left-style: none;
+    }
+
+    :host {
+      background: var(--background-dm);
+    }
+  }
+`

src/components/icon-control-bar/icon-control-bar.ts

@@ -1,27 +1,25 @@
 import {
   html,
-  LitElement,
   HTMLTemplateResult,
   nothing,
   CSSResultArray,
-} from 'lit'
-import {
   customElement,
   property,
   eventOptions,
   query,
   state,
-} from 'lit/decorators.js'
+  StarBaseElement,
+} from '@star-web-components/base'
 import {sharedStyles} from './iconstyle.js'
-
 export enum IconControlBarType {
   BASE = 'base',
   BASE_WITHOUT_BORDER = 'base-without-border',
   WITH_STATE = 'with-state',
+  GROUP_WITHOUT_BORDER = 'group-without-border',
 }
 
 @customElement('icon-control-bar')
-export class IconControlBar extends LitElement {
+export class IconControlBar extends StarBaseElement {
   @property({type: IconControlBarType}) type = ''
   @property({type: String}) icon = ''
   @property({type: String}) stateDesc = ''
@@ -50,35 +48,6 @@ export class IconControlBar extends LitElement {
     //   return nothing
     // }
 
-    const iconstyle = html`
-      <style>
-        .icon-button {
-          width: 8.67vw;
-          height: 8.67vw;
-        }
-        // @media screen and (min-width: 300px) {
-        //   .icon-button {
-        //     width: 34px;
-        //     height: 34px;
-        //   }
-        // }
-
-        // @media screen and (min-width: 600px) {
-        //   .icon-button {
-        //     width: 52px;
-        //     height: 52px;
-        //   }
-        // }
-
-        // @media screen and (min-width: 900px) {
-        //   .icon-button {
-        //     width: 104px;
-        //     height: 104px;
-        //   }
-        // }
-      </style>
-    `
-
     const iconNamestyle = this.isNameShown ? 'icon-name-shown' : 'icon-name'
     return html`
       <div class="inner">
@@ -88,9 +57,7 @@ export class IconControlBar extends LitElement {
           @click=${this}
           @touchstart=${this}
           @touchend=${this}
-        >
+        ></div>
-          ${iconstyle}
-        </div>
         <div class=${iconNamestyle}>
           <span>${this.name}</span>
         </div>
@@ -121,35 +88,6 @@ export class IconControlBar extends LitElement {
       return nothing
     }
 
-    const iconstyle = html`
-      <style>
-        :host {
-          width: 20vw;
-          height: 9vw;
-        }
-        // @media screen and (min-width: 300px) {
-        //   :host {
-        //     width: 80px;
-        //     height: 36px;
-        //   }
-        // }
-
-        // @media screen and (min-width: 600px) {
-        //   :host {
-        //     width: 120px;
-        //     height: 54px;
-        //   }
-        // }
-
-        // @media screen and (min-width: 900px) {
-        //   :host {
-        //     width: 240px;
-        //     height: 108px;
-        //   }
-        // }
-      </style>
-    `
-
     return html`
       <div
         class="icon-button icon-with-state with-border config-activity"
@@ -164,11 +102,27 @@ export class IconControlBar extends LitElement {
           @click=${this.handleInfo}
           data-icon="drop-down"
         ></div>
-        ${iconstyle}
       </div>
     `
   }
 
+  getGroupWithOutBorder(): HTMLTemplateResult | typeof nothing {
+    if (!this.icon) {
+      console.error('【icon-control-bar】缺少 icon 参数')
+      return nothing
+    }
+
+    return html`
+      <div
+        class="icon-button icon-base group-without-border"
+        data-icon=${this.icon}
+        @click=${this}
+        @touchstart=${this}
+        @touchend=${this}
+      ></div>
+    `
+  }
+
   @eventOptions({passive: false})
   handleEvent(event: Event) {
     switch (event.type) {
@@ -202,6 +156,7 @@ export class IconControlBar extends LitElement {
 
       isActive = target.classList.contains('active')
       this.activeOrInactive(isActive, target)
+      this.fireEvent(isActive)
     }
 
     // if (this.type == IconControlBarType.WITH_STATE) {
@@ -214,7 +169,17 @@ export class IconControlBar extends LitElement {
     //     this.moreInfoIcon.dataset.icon = "";
     //   }
     // }
+    if (this.type == IconControlBarType.GROUP_WITHOUT_BORDER) {
+      this.iconBtn.classList.add('actived')
+      let timeoutId = window.setTimeout(() => {
+        clearTimeout(timeoutId)
+        this.iconBtn.classList.remove('actived')
+        this.fireEvent()
+      }, 200)
+    }
+  }
 
+  fireEvent(isActive?: boolean) {
     this.dispatchEvent(
       new CustomEvent('icon-control-bar-click', {
         detail: {
@@ -307,6 +272,8 @@ export class IconControlBar extends LitElement {
         return this.getbaseWithOutBorder()
       case IconControlBarType.WITH_STATE:
         return this.getwithstate()
+      case IconControlBarType.GROUP_WITHOUT_BORDER:
+        return this.getGroupWithOutBorder()
       default:
         console.error('unhandled 【icon-control-bar】 type')
         return nothing
@@ -333,7 +300,7 @@ export class IconControlBar extends LitElement {
     return this.iconBtn.classList
   }
 
-  public static override get styles(): CSSResultArray {
+  static override get styles(): CSSResultArray {
     return [sharedStyles]
   }
 }

src/components/icon-control-bar/iconstyle.ts

@@ -10,6 +10,21 @@ export const sharedStyles: CSSResult = css`
     --text-color-active: #ffffff;
   }
 
+  .icon-with-state {
+    width: calc(240px / var(--hostDevicePixelRatio));
+    height: var(--auto-108px);
+  }
+
+  .icon-base.with-border {
+    width: var(--auto-104px);
+    height: var(--auto-104px);
+  }
+
+  .icon-base.group-without-border {
+    height: calc(110px / var(--hostDevicePixelRatio));
+    width: calc(126px / var(--hostDevicePixelRatio));
+  }
+
   .active {
     background-color: var(--background-active) !important;
     color: var(--text-color-active) !important;
@@ -39,12 +54,8 @@ export const sharedStyles: CSSResult = css`
     // height: 100%;
     display: flex;
     align-items: center;
-    border-radius: 1.3vw;
+    border-radius: var(--auto-16px);
-  }
+    justify-content: space-between;
-
-  .icon-with-state {
-    width: 100%;
-    height: 100%;
   }
 
   .active::before,
@@ -63,20 +74,25 @@ export const sharedStyles: CSSResult = css`
     font-weight: 500;
   }
 
+  .icon-button.icon-base.group-without-border::before {
+    position: relative;
+    left: calc(50% - var(--auto-24px));
+    top: calc(50% - var(--auto-24px));
+  }
+
   .more-info-icon {
     display: flex;
     align-items: center;
-    width: 1.3vw;
+    width: var(--auto-16px);
-    height: 1.3vw;
+    height: var(--auto-16px);
-    position: relative;
+    padding-inline-end: var(--auto-18px);
-    left: 4.8vw;
   }
 
   .more-info-icon::after {
-    width: 1.3vw;
+    width: var(--auto-16px);
-    height: 1.3vw;
+    height: var(--auto-16px);
-    line-height: 1.3vw;
+    line-height: var(--auto-16px);
-    font-size: 1.3vw;
+    font-size: var(--auto-16px);
   }
 
   .icon-base {
@@ -92,23 +108,18 @@ export const sharedStyles: CSSResult = css`
     font-family: OPPOSans;
     font-style: normal;
     mix-blend-mode: normal;
-    width: 8.3vw;
+    width: var(--auto-100px);
-    // height: 1vh;
+    font-size: calc(21px / var(--hostDevicePixelRatio));
-    font-size: 1.75vw;
-    // line-height: 1.7vw;
   }
 
   .icon-name-shown,
   .icon-name {
-    // font-size: 20px;
+    font-size: var(--auto-20px);
-    // height: 48px;
+    height: var(--auto-48px);
-
-    font-size: 1.7vw;
-    height: 4vw;
   }
 
   .inner {
-    width: 8.67vw;
+    width: var(--auto-104px);
   }
 
   .active > p {
@@ -125,7 +136,7 @@ export const sharedStyles: CSSResult = css`
     font-family: 'OPPOSans';
     font-style: normal;
     font-weight: 400;
-    font-size: 1.75vw;
+    font-size: calc(21px / var(--hostDevicePixelRatio));
     display: none;
   }
 
@@ -147,19 +158,14 @@ export const sharedStyles: CSSResult = css`
     font-family: 'OPPOSans';
     font-style: normal;
     font-weight: 400;
-    font-size: 1.75vw;
+    font-size: calc(21px / var(--hostDevicePixelRatio));
   }
 
   .icon-button::before {
-    // width: 48px;
+    width: var(--auto-48px);
-    // height: 48px;
+    height: var(--auto-48px);
-    // line-height: 48px;
+    line-height: var(--auto-48px);
-    // font-size: 48px;
+    font-size: var(--auto-48px);
-
-    width: 4vw;
-    height: 4vw;
-    line-height: 4vw;
-    font-size: 4vw;
   }
 
   :host([disabled='true']) {
@@ -188,6 +194,11 @@ export const sharedStyles: CSSResult = css`
     .icon-name-shown {
       color: var(--text-color-lm);
     }
+
+    .icon-base.group-without-border.actived {
+      background: rgba(255, 255, 255, 1) !important;
+      border-radius: var(--auto-16px);
+    }
   }
 
   @media (prefers-color-scheme: dark) {
@@ -202,5 +213,10 @@ export const sharedStyles: CSSResult = css`
     .icon-name-shown {
       color: var(--text-color-dm);
     }
+
+    .icon-base.group-without-border.actived {
+      background: rgba(0, 0, 0, 0.13) !important;
+      border-radius: var(--auto-16px);
+    }
   }
 `