@opendesign-plus-test/components 0.0.1-rc.20 → 0.0.1-rc.22

package/src/components/OFooter.vue

@@ -3,7 +3,7 @@ import { ODivider } from '@opensig/opendesign';
 
 import ContentWrapper from './common/ContentWrapper.vue';
 
-const props = defineProps({
+const props = withDefaults(defineProps(), {
   simple: false,
   atom: undefined,
   lang: undefined,
@@ -29,7 +29,7 @@ const props = defineProps({
               <img :src="props.atom[props.lang].img" class="atom-logo" alt="" />
             </a>
           </div>
-          <ODivider :style="{ '--o-divider-bd-color': 'rgba(229, 229, 229, 0.12)', '--o-divider-gap': '16px' }" />
+          <ODivider class="atom-divider" />
         </slot>
       </ContentWrapper>
       <div class="footer-content" :style="{ backgroundImage: `url(${props.footerBg})` }">
@@ -81,7 +81,7 @@ const props = defineProps({
                     <ODivider
                       v-if="index !== props.footerOption[props.lang].link.length - 1"
                       :style="{
-                        '--o-divider-bd-color': 'var(--o-color-white)',
+                        '--o-divider-bd-color': 'var(--o-color-info3-inverse)',
                         '--o-divider-label-gap': '0 8px',
                       }"
                       direction="v"
@@ -191,12 +191,26 @@ const props = defineProps({
       height: 32px;
       margin-top: 12px;
 
+      @include respond-to('<=laptop') {
+        margin-top: 8px;
+      }
+
       @include respond-to('<=pad_v') {
         height: 30px;
-        margin-top: 16px;
+        margin-top: 12px;
       }
     }
   }
+  .atom-divider {
+    --o-divider-bd-color: rgba(229, 229, 229, 0.12);
+    --o-divider-gap: 16px;
+    @include respond-to('laptop') {
+      --o-divider-gap: 12px;
+    }
+    @include respond-to('pad_h') {
+      --o-divider-gap: 8px;
+    }
+  }
   .footer-content {
     @include tip1;
     background-position: bottom;
@@ -244,11 +258,12 @@ const props = defineProps({
     margin-top: 16px;
     padding-bottom: 12px;
     display: flex;
+    justify-content: center;
     border-bottom: 1px solid rgba(229, 229, 229, 0.12);
     @include tip2;
     .friendship-link-title {
       color: var(--o-color-white);
-      margin-right: 38px;
+      margin-right: 32px;
       flex-shrink: 0;
     }
     a:not(:last-of-type) {
@@ -266,13 +281,7 @@ const props = defineProps({
     }
 
     @include respond-to('<=pad_v') {
-      flex-direction: column;
-      padding-bottom: 16px;
-      .friendship-link-box {
-        margin-top: 12px;
-        display: flex;
-        flex-wrap: wrap;
-      }
+      display: none;
     }
   }
   .inner {
@@ -284,7 +293,7 @@ const props = defineProps({
 
     @include respond-to('<=pad_v') {
       margin: 0 auto;
-      padding: 12px 0 24px;
+      padding: 0 0 24px;
       flex-direction: column;
     }
   }
@@ -328,7 +337,12 @@ const props = defineProps({
       display: inline-block;
     }
     .footer-option-item {
+      display: flex;
+      justify-content: center;
       align-items: center;
+      .o-divider {
+        height: 12px;
+      }
     }
 
     @include respond-to('<=pad_v') {
@@ -337,14 +351,10 @@ const props = defineProps({
   }
   .license {
     color: var(--o-color-white);
-    margin-top: 6px;
+    margin-top: 8px;
     span {
       color: rgba(var(--o-white), 0.6);
     }
-
-    @include respond-to('<=pad_v') {
-      margin-top: 4px;
-    }
   }
   .copyright {
     margin-top: 6px;
@@ -390,7 +400,7 @@ const props = defineProps({
     }
   }
   .footer-right {
-    flex-shrink: 0;
+    flex: 1;
     .code-box {
       display: flex;
       justify-content: right;
@@ -442,7 +452,10 @@ const props = defineProps({
         }
       }
       .code-pop + .code-pop {
-        margin-left: 16px;
+        margin-left: 80px;
+        @include respond-to('<=pad_v') {
+          margin-left: 64px;
+        }
       }
     }
 
@@ -504,6 +517,11 @@ const props = defineProps({
     .footer-right {
       flex-shrink: 0;
       margin-left: 16px;
+      display: flex;
+      align-items: center;
+      .o-divider-v {
+        height: 12px;
+      }
     }
   }
   .app-footer-mb {
@@ -512,6 +530,14 @@ const props = defineProps({
     text-align: center;
     color: var(--o-color-info4);
     @include tip1;
+    .links {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .o-divider-v {
+        height: 12px;
+      }
+    }
     .copyright {
       margin-top: 4px;
     }

package/src/components/OHeader.vue

@@ -60,11 +60,12 @@ const goHome = () => {
   z-index: 999;
   box-shadow: 0 3px 9px 0 rgba(0, 18, 85, 0.08);
   backdrop-filter: blur(5px);
+  --o-header-height: 72px;
 }
 .header-wrap {
   display: flex;
   align-items: center;
-  height: 72px;
+  height: var(--o-header-height);
 }
 .header-logo {
   height: 100%;

package/src/components/OHeaderMoblie.vue

@@ -94,11 +94,12 @@ const mobileClick = () => {
   z-index: 999;
   box-shadow: 0 3px 9px 0 rgba(0, 18, 85, 0.08);
   backdrop-filter: blur(5px);
+  --o-header-height: 56px;
 }
 .header-wrap {
   display: flex;
   align-items: center;
-  height: 48px;
+  height: var(--o-header-height);
   justify-content: space-between;
   position: relative;
 }
@@ -119,11 +120,10 @@ const mobileClick = () => {
     .header-title {
       color: var(--o-color-info1);
       font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+      @include text2;
     }
   }
   .simple-header-right {

package/src/components/OSourceCode.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { OIcon, ODropdown, ODropdownItem } from '@opensig/opendesign';
 
 import IconChevronDown from '~icons/components/icon-chevron-down.svg';
@@ -14,6 +15,7 @@ interface CodePropsT {
   options?: CodeItemT[];
   url?: string;
   icon?: string;
+  justify?: string;
 }
 
 withDefaults(defineProps<CodePropsT>(), {
@@ -21,11 +23,17 @@ withDefaults(defineProps<CodePropsT>(), {
   options: undefined,
   url: undefined,
   icon: undefined,
+  justify: 'center',
 });
 
 const itemChange = (data: any) => {
   window.open(data.url, '_blank');
 };
+
+const dropdownVisible = ref(false);
+const visibleChange = (val: boolean) => {
+  dropdownVisible.value = val;
+};
 </script>
 
 <template>
@@ -36,13 +44,20 @@ const itemChange = (data: any) => {
         <component :is="icon" class="icon" />
       </OIcon>
     </div>
-    <ODropdown v-else trigger="hover" optionPosition="bottom" option-wrap-class="dropdown">
+    <ODropdown
+      v-else
+      trigger="hover"
+      optionPosition="bottom"
+      option-wrap-class="dropdown"
+      :class="{ 'dropdown-active': dropdownVisible }"
+      @visible-change="visibleChange"
+    >
       <div class="info-wrap hover-icon-rotate">
         <span class="title">{{ title }}</span>
         <OIcon class="icon"><IconChevronDown /></OIcon>
       </div>
       <template #dropdown>
-        <ODropdownItem v-for="item in options" @click="itemChange(item)" :key="item.url" class="list">
+        <ODropdownItem v-for="item in options" @click="itemChange(item)" :key="item.url" class="list" :style="{ '--dropdown-item-justify': justify }">
           {{ item.label }}
           <OIcon v-if="item.icon">
             <component :is="item.icon" class="icon" />
@@ -65,7 +80,7 @@ const itemChange = (data: any) => {
     color: var(--o-color-info1);
     cursor: pointer;
 
-    &:hover {
+    @include hover {
       color: var(--o-color-primary1);
     }
 
@@ -105,18 +120,32 @@ const itemChange = (data: any) => {
 .o-dropdown {
   height: 100%;
 }
+.dropdown-active {
+  .info-wrap {
+    color: var(--o-color-primary1);
+  }
+  .o-icon {
+    transform: rotate(-180deg);
+  }
+}
 .o-dropdown-item {
   background: var(--o-color-fill2);
   cursor: pointer;
   border-radius: var(--o-radius_control-xs);
-  padding: var(--o-gap-1);
+  padding: var(--o-gap-1) 12px;
   min-width: 144px;
-  height: 40px;
+  height: 32px;
+  @include tip1;
 
   @include hover {
-    color: var(--o-color-primary1);
     background: var(--o-color-control2-light);
   }
+
+  &:active {
+    color: var(--o-color-primary1);
+    background: var(--o-color-control3-light);
+    font-weight: 600;
+  }
 }
 .dropdown {
   --dropdown-list-radius: var(--o-radius-xs);