@opendesign-plus-test/components 0.0.1-rc.43 → 0.0.1-rc.45

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export * from './components/element-plus';
 export * from './components/events';
 export * from './components/header';
 export * from './components/meeting';
+export * from './components/search';
 declare const _default: {
     install: (app: any) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus-test/components",
-  "version": "0.0.1-rc.43",
+  "version": "0.0.1-rc.45",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -26,13 +26,13 @@
     }
   },
   "dependencies": {
-    "@opensig/opendesign": "1.0.2",
+    "@opensig/opendesign": "1.2.3",
     "@vueuse/core": "10.11.1",
     "aos": "^2.3.4",
     "dayjs": "^1.11.13",
     "video.js": "^8.23.7",
     "vue-dompurify-html": "^3.1.2",
-    "@opendesign-plus/composables": "0.0.1-rc.11",
+    "@opendesign-plus/composables": "0.0.1-rc.8",
     "@opendesign-plus/styles": "0.0.1-rc.2"
   },
   "devDependencies": {

package/src/assets/svg-icons/icon-delete-hover.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path fill="#6f6f75" d="M22.5 12c0 5.799-4.701 10.5-10.5 10.5s-10.5-4.701-10.5-10.5c0-5.799 4.701-10.5 10.5-10.5s10.5 4.701 10.5 10.5z"></path>
+<path fill="#ffffff" d="M15.3 7.631c0.274-0.197 0.657-0.172 0.903 0.074 0.273 0.273 0.273 0.717 0 0.99l-3.259 3.259 3.259 3.259c0.273 0.273 0.273 0.717 0 0.99-0.246 0.246-0.63 0.271-0.903 0.074l-0.087-0.074-3.259-3.259-3.259 3.259-0.087 0.074c-0.274 0.197-0.657 0.172-0.903-0.074-0.273-0.273-0.273-0.717 0-0.99l3.259-3.259-3.259-3.259c-0.273-0.273-0.273-0.717 0-0.99 0.246-0.246 0.63-0.271 0.903-0.074l0.087 0.074 3.259 3.259 3.259-3.259 0.087-0.074z"></path>
+</svg>

package/src/assets/svg-icons/icon-delete.svg

@@ -1,3 +1,7 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path fill="currentColor" d="M19.154 5.295c0.387 0 0.7 0.313 0.7 0.7 0 0.354-0.263 0.647-0.605 0.694l-0.095 0.006-12.201-0.001 0.001 12.413c0 0.17 0.12 0.311 0.28 0.344l0.071 0.007h9.39c0.17 0 0.311-0.12 0.344-0.28l0.007-0.071v-10.47c0-0.387 0.313-0.7 0.7-0.7 0.354 0 0.647 0.263 0.694 0.605l0.006 0.095v10.47c0 0.919-0.708 1.672-1.608 1.745l-0.144 0.006h-9.39c-0.919 0-1.672-0.708-1.745-1.608l-0.006-0.144-0.001-12.413-0.707 0.001c-0.387 0-0.7-0.313-0.7-0.7 0-0.354 0.263-0.647 0.605-0.694l0.095-0.006h14.308zM10.011 9.744c0.354 0 0.647 0.263 0.694 0.605l0.006 0.095v5.68c0 0.387-0.313 0.7-0.7 0.7-0.354 0-0.647-0.263-0.694-0.605l-0.006-0.095v-5.68c0-0.387 0.313-0.7 0.7-0.7zM13.953 9.744c0.354 0 0.647 0.263 0.694 0.605l0.006 0.095v5.68c0 0.387-0.313 0.7-0.7 0.7-0.354 0-0.647-0.263-0.694-0.605l-0.006-0.095v-5.68c0-0.387 0.313-0.7 0.7-0.7zM13.652 3.189c0.387 0 0.7 0.313 0.7 0.7 0 0.354-0.263 0.647-0.605 0.694l-0.095 0.006h-3.972c-0.387 0-0.7-0.313-0.7-0.7 0-0.354 0.263-0.647 0.605-0.694l0.095-0.006h3.972z"></path>
+<path opacity="0.8" fill="currentColor" d="M5.616 4.34c0.368 0 0.674 0.265 0.738 0.615l0.012 0.135v14.968c0 0.213 0.148 0.391 0.347 0.438l0.103 0.012h10.719c0.213 0 0.391-0.148 0.438-0.347l0.012-0.103v-11.712c0-0.414 0.336-0.75 0.75-0.75 0.368 0 0.674 0.265 0.738 0.615l0.012 0.135v11.712c0 1.010-0.767 1.84-1.751 1.94l-0.199 0.010h-10.719c-1.010 0-1.84-0.767-1.94-1.751l-0.010-0.199v-14.968c0-0.414 0.336-0.75 0.75-0.75z"></path>
+<path opacity="0.8" fill="currentColor" d="M20.19 4.34c0.414 0 0.75 0.336 0.75 0.75 0 0.368-0.265 0.674-0.615 0.738l-0.135 0.012h-16.333c-0.414 0-0.75-0.336-0.75-0.75 0-0.368 0.265-0.674 0.615-0.738l0.135-0.012h16.333z"></path>
+<path opacity="0.8" fill="currentColor" d="M14.256 1.936c0.414 0 0.75 0.336 0.75 0.75 0 0.368-0.265 0.674-0.615 0.738l-0.135 0.012h-4.535c-0.414 0-0.75-0.336-0.75-0.75 0-0.368 0.265-0.674 0.615-0.738l0.135-0.012h4.535z"></path>
+<path opacity="0.8" fill="currentColor" d="M10.096 9.419c0.368 0 0.674 0.265 0.738 0.615l0.012 0.135v6.484c0 0.414-0.336 0.75-0.75 0.75-0.368 0-0.674-0.265-0.738-0.615l-0.012-0.135v-6.484c0-0.414 0.336-0.75 0.75-0.75z"></path>
+<path opacity="0.8" fill="currentColor" d="M14.596 9.419c0.368 0 0.674 0.265 0.738 0.615l0.012 0.135v6.484c0 0.414-0.336 0.75-0.75 0.75-0.368 0-0.674-0.265-0.738-0.615l-0.012-0.135v-6.484c0-0.414 0.336-0.75 0.75-0.75z"></path>
 </svg>

package/src/assets/svg-icons/icon-image-close.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M22.5 12c0 5.799-4.701 10.5-10.5 10.5s-10.5-4.701-10.5-10.5c0-5.799 4.701-10.5 10.5-10.5s10.5 4.701 10.5 10.5z"></path>
+<path fill="currentColor" d="M15.3 7.631c0.274-0.197 0.657-0.172 0.903 0.074 0.273 0.273 0.273 0.717 0 0.99l-3.259 3.259 3.259 3.259c0.273 0.273 0.273 0.717 0 0.99-0.246 0.246-0.63 0.271-0.903 0.074l-0.087-0.074-3.259-3.259-3.259 3.259-0.087 0.074c-0.274 0.197-0.657 0.172-0.903-0.074-0.273-0.273-0.273-0.717 0-0.99l3.259-3.259-3.259-3.259c-0.273-0.273-0.273-0.717 0-0.99 0.246-0.246 0.63-0.271 0.903-0.074l0.087 0.074 3.259 3.259 3.259-3.259 0.087-0.074z"></path>
+</svg>

package/src/assets/svg-icons/icon-image-upload.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path opacity="0.8" d="M19.724 4.238c1.105 0 2 0.895 2 2v6.772c0 0.387-0.313 0.7-0.7 0.7s-0.7-0.313-0.7-0.7v-0.816l-3.544 3.84c-0.248 0.268-0.661 0.301-0.948 0.075l-4.13-3.256-3.925 3.843c-0.249 0.243-0.632 0.264-0.904 0.064l-0.086-0.075c-0.27-0.276-0.266-0.72 0.011-0.99l4.365-4.273c0.251-0.246 0.647-0.267 0.923-0.050l4.104 3.235 4.134-4.478v-3.892c0-0.331-0.269-0.6-0.6-0.6h-15.45c-0.331 0-0.6 0.269-0.6 0.6v11.501c0 0.331 0.269 0.6 0.6 0.6h9.781c0.387 0 0.7 0.313 0.7 0.7s-0.313 0.7-0.7 0.7h-9.781c-1.105 0-2-0.895-2-2v-11.501c0-1.105 0.895-2 2-2h15.45zM9.532 8.878c0-0.695-0.579-1.259-1.294-1.259s-1.294 0.564-1.294 1.259c0 0.695 0.579 1.259 1.294 1.259s1.294-0.564 1.294-1.259zM16.561 18.645c-0.195-0.195-0.195-0.512 0-0.707l2.090-2.090c0.010-0.011 0.020-0.021 0.030-0.030l0.001-0.001c0.195-0.195 0.512-0.195 0.707 0l2.121 2.121c0.195 0.195 0.195 0.512 0 0.707s-0.512 0.195-0.707 0l-1.284-1.284v3.57c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3.538l-1.251 1.251c-0.174 0.174-0.443 0.193-0.638 0.058l-0.069-0.058z"></path>
+</svg>

package/src/assets/svg-icons/icon-image-zoomin.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path fill="currentColor" d="M3.398 10.877c0-4.099 3.323-7.423 7.423-7.423s7.423 3.323 7.423 7.423c0 4.099-3.323 7.423-7.423 7.423s-7.423-3.323-7.423-7.423zM16.774 10.877c0-3.326-2.657-6.023-5.935-6.023s-5.935 2.696-5.935 6.023c0 3.326 2.657 6.023 5.935 6.023s5.935-2.696 5.935-6.023zM11.499 13.369c0 0.365-0.296 0.661-0.661 0.661s-0.661-0.296-0.661-0.661v-1.821h-1.775c-0.371 0-0.671-0.3-0.671-0.671s0.3-0.671 0.671-0.671h1.775v-1.821c0-0.365 0.296-0.661 0.661-0.661s0.661 0.296 0.661 0.661v1.821h1.775c0.371 0 0.671 0.3 0.671 0.671s-0.3 0.671-0.671 0.671h-1.775v1.821zM16.579 16.598c0.242-0.246 0.62-0.271 0.89-0.075l0.086 0.074 2.72 2.754c0.27 0.273 0.27 0.716 0.001 0.99-0.242 0.246-0.62 0.271-0.89 0.075l-0.086-0.074-2.72-2.754c-0.27-0.273-0.27-0.716-0.001-0.99z"></path>
+</svg>

package/src/assets/svg-icons/icon-refresh.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path opacity="0.8" fill="currentColor" d="M17.947 4.273c-1.676-1.292-3.752-2.023-5.948-2.023-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75c4.032 0 7.604-2.47 9.066-6.156 0.153-0.385-0.035-0.821-0.42-0.974s-0.821 0.036-0.974 0.42c-1.237 3.119-4.26 5.209-7.672 5.209-4.556 0-8.25-3.694-8.25-8.25s3.694-8.25 8.25-8.25c1.837 0 3.574 0.604 4.983 1.673l-1.305 1.556c-0.077 0.092-0.021 0.232 0.098 0.246l4.873 0.539c0.106 0.012 0.191-0.088 0.16-0.191l-1.377-4.706c-0.034-0.115-0.182-0.146-0.259-0.054l-1.226 1.461z"></path>
+</svg>

package/src/components/OBanner.vue

@@ -151,7 +151,7 @@ const onClick = (href: string, hasBtn: boolean | undefined) => {
     background-size: contain;
     background-repeat: no-repeat;
 
-    @include respond-to('pad') {
+    @include respond('pad') {
       height: var(--pad-height);
       width: var(--pad-width);
     }
@@ -169,15 +169,15 @@ const onClick = (href: string, hasBtn: boolean | undefined) => {
       @include h4;
     }
 
-    @include respond-to('laptop-pc_s') {
+    @include respond('laptop-pc_s') {
       --banner-height: 400px;
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       --banner-height: 360px;
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       --banner-height: 184px;
     }
   }
@@ -194,15 +194,15 @@ const onClick = (href: string, hasBtn: boolean | undefined) => {
       @include text2;
     }
 
-    @include respond-to('laptop-pc_s') {
+    @include respond('laptop-pc_s') {
       --banner-height: 280px;
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       --banner-height: 220px;
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       --banner-height: 120px;
     }
 
@@ -210,7 +210,7 @@ const onClick = (href: string, hasBtn: boolean | undefined) => {
       --pc-height: 100px !important;
       --pc-width: 500px !important;
 
-      @include respond-to('pad') {
+      @include respond('pad') {
         --pc-height: 60px !important;
         --pc-width: 300px !important;
       }
@@ -229,15 +229,15 @@ const onClick = (href: string, hasBtn: boolean | undefined) => {
       @include text2;
     }
 
-    @include respond-to('laptop-pc_s') {
+    @include respond('laptop-pc_s') {
       --banner-height: 220px;
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       --banner-height: 180px;
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       display: none;
     }
 
@@ -245,7 +245,7 @@ const onClick = (href: string, hasBtn: boolean | undefined) => {
       --pc-height: 80px !important;
       --pc-width: 400px !important;
 
-      @include respond-to('pad') {
+      @include respond('pad') {
         --pc-height: 50px !important;
         --pc-width: 250px !important;
       }
@@ -260,11 +260,11 @@ const onClick = (href: string, hasBtn: boolean | undefined) => {
 .banner-carousel {
   width: 100%;
   height: 100%;
-  @include respond-to('>pad_v') {
+  @include respond('>pad_v') {
     --carousel-indicator-offset: 53px;
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     --carousel-indicator-offset: 1px;
   }
 
@@ -287,14 +287,14 @@ const onClick = (href: string, hasBtn: boolean | undefined) => {
     height: 100%;
   }
 
-  @include respond-to('pad') {
+  @include respond('pad') {
     :deep(.o-figure-img) {
       transition: object-position 0.3s ease;
       object-position: var(--pad-offset);
     }
   }
 
-  @include respond-to('phone') {
+  @include respond('phone') {
     --figure-radius: 4px;
   }
 }
@@ -367,7 +367,7 @@ const onClick = (href: string, hasBtn: boolean | undefined) => {
   .banner-attach {
     height: 120px;
 
-    @include respond-to('pad') {
+    @include respond('pad') {
       height: 80px;
     }
   }
@@ -377,7 +377,7 @@ const onClick = (href: string, hasBtn: boolean | undefined) => {
   .banner-attach {
     height: 156px;
 
-    @include respond-to('pad') {
+    @include respond('pad') {
       height: 120px;
     }
   }

package/src/components/OCookieNotice.vue

@@ -294,19 +294,19 @@ defineExpose({
 <style lang="scss">
 .o-cookie-notice-dlg-main {
   --dlg-edge-gap: 32px;
-  @include respond-to('laptop') {
+  @include respond('laptop') {
     --dlg-edge-gap: 24px;
   }
-  @include respond-to('phone') {
+  @include respond('phone') {
     --dlg-edge-gap: 16px 24px;
   }
 
   --dlg-width: var(--grid-14);
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     --dlg-edge-gap: 16px;
     --dlg-width: var(--grid-8);
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     --dlg-width: 100vw;
   }
 }
@@ -341,7 +341,7 @@ defineExpose({
 }
 
 .cookie-notice-content {
-  background-color: rgba(var(--o-mixedgray-1), 0.9);
+  background-color: rgba(var(--o-grey-1), 0.9);
   backdrop-filter: blur(5px);
   box-shadow: var(--o-shadow-1);
 }
@@ -354,13 +354,13 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     padding: 12px var(--layout-content-padding);
   }
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     padding: 8px var(--layout-content-padding);
   }
   @media (max-width: 840px) {
     padding: 16px var(--layout-content-padding);
   }
-  @include respond-to('phone') {
+  @include respond('phone') {
     padding: 16px var(--layout-content-padding);
   }
   &:not([type='zh']) {
@@ -377,13 +377,13 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     padding: 12px 0;
   }
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     padding: 8px 0;
   }
   @media (max-width: 840px) {
     padding: 16px 0;
   }
-  @include respond-to('phone') {
+  @include respond('phone') {
     padding: 16px 0;
   }
   &:not([type='zh']) {
@@ -403,13 +403,13 @@ defineExpose({
   @media (max-width: 1680px) {
     font-size: 14px;
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     text-align: center;
   }
 }
 
 .cookie-en-title {
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     margin-left: auto;
   }
 }
@@ -419,7 +419,7 @@ defineExpose({
   line-height: 22px;
   margin-right: 8px;
   text-align: start;
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     font-size: 12px;
     line-height: 18px;
   }
@@ -429,7 +429,7 @@ defineExpose({
   display: flex;
   width: 100%;
   margin-top: 8px;
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     flex-direction: column;
   }
 }
@@ -444,10 +444,10 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     margin-right: 40px;
   }
-  @include respond-to('pad') {
+  @include respond('pad') {
     margin-right: 24px;
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     margin: 0;
   }
 }
@@ -461,7 +461,7 @@ defineExpose({
     @media (1680px >= width >= 1201px) {
       margin-left: 12px;
     }
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       margin-left: 8px;
     }
     @media (min-width: 841px) {
@@ -469,7 +469,7 @@ defineExpose({
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     margin-top: 16px;
     width: 100%;
     display: grid;
@@ -514,7 +514,7 @@ defineExpose({
     @media (1680px >= width >= 1201px) {
       margin-top: 16px;
     }
-    @include respond-to('<=pad') {
+    @include respond('<=pad') {
       margin-top: 12px;
     }
   }
@@ -532,7 +532,7 @@ defineExpose({
         @media (1680px >= width >= 1201px) {
           font-size: 18px;
         }
-        @include respond-to('<=pad') {
+        @include respond('<=pad') {
           font-size: 16px;
         }
       }
@@ -541,7 +541,7 @@ defineExpose({
         font-size: 14px;
         color: var(--o-color-info3);
         margin-left: 24px;
-        @include respond-to('<=pad') {
+        @include respond('<=pad') {
           font-size: 12px;
         }
       }
@@ -556,7 +556,7 @@ defineExpose({
         margin-top: 12px;
         font-size: 14px;
       }
-      @include respond-to('<=pad') {
+      @include respond('<=pad') {
         margin-top: 8px;
       }
       @media (max-width: 840px) {

package/src/components/OFooter.vue

@@ -201,11 +201,11 @@ const props = withDefaults(defineProps<{
       height: 32px;
       margin-top: 12px;
 
-      @include respond-to('<=laptop') {
+      @include respond('<=laptop') {
         margin-top: 8px;
       }
 
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         height: 30px;
         margin-top: 12px;
       }
@@ -214,10 +214,10 @@ const props = withDefaults(defineProps<{
   .atom-divider {
     --o-divider-bd-color: rgba(229, 229, 229, 0.12);
     --o-divider-gap: 16px;
-    @include respond-to('laptop') {
+    @include respond('laptop') {
       --o-divider-gap: 12px;
     }
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       --o-divider-gap: 8px;
     }
   }
@@ -241,7 +241,7 @@ const props = withDefaults(defineProps<{
     display: flex;
     justify-content: space-between;
     max-width: 1140px;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       display: none;
     }
     .category {
@@ -280,7 +280,7 @@ const props = withDefaults(defineProps<{
       margin-right: 24px;
     }
 
-    @include respond-to('<=pad') {
+    @include respond('<=pad') {
       .friendship-link-title {
         margin-right: 24px;
         min-width: 48px;
@@ -290,7 +290,7 @@ const props = withDefaults(defineProps<{
       }
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       display: none;
     }
   }
@@ -301,14 +301,14 @@ const props = withDefaults(defineProps<{
     padding: 8px 0 32px;
     position: relative;
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       margin: 0 auto;
       padding: 0 0 24px;
       flex-direction: column;
     }
   }
   .inner-en {
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       max-width: fit-content;
     }
   }
@@ -327,7 +327,7 @@ const props = withDefaults(defineProps<{
       color: var(--o-color-white);
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       text-align: center;
       margin: 16px 0;
       .show-pc {
@@ -355,7 +355,7 @@ const props = withDefaults(defineProps<{
       }
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       order: -1;
     }
   }
@@ -395,14 +395,14 @@ const props = withDefaults(defineProps<{
       }
     }
 
-    @include respond-to('<=pad') {
+    @include respond('<=pad') {
       flex-direction: column;
       .filing {
         margin-left: 6px;
       }
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       margin-top: 4px;
       .filing {
         margin-left: 4px;
@@ -457,19 +457,19 @@ const props = withDefaults(defineProps<{
           }
         }
 
-        @include respond-to('pad_h') {
+        @include respond('pad_h') {
           height: 18px;
         }
       }
       .code-pop + .code-pop {
         margin-left: 80px;
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           margin-left: 64px;
         }
       }
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       .code-box {
         justify-content: space-between;
         .code-pop {
@@ -564,7 +564,8 @@ const props = withDefaults(defineProps<{
       }
     }
   }
-  @include respond-to('<=pad') {
+
+  @include respond('<=pad') {
     .app-footer-pc {
       display: none;
     }