gypsy-crm-frontend-vu/pages/login/components/LoginHeaderGroup.vue

<template>
  <view class="login-header-group">
    <view class="header-item">
      <cwg-system :text-color="textColor" :icon-color="iconColor" event-source="login"/>
    </view>
    <view class="divider" :style="{ backgroundColor: dividerColor }"></view>
    <view class="header-item" style="margin-right: 10rpx">
      <cwg-language :text-color="textColor" :icon-color="iconColor" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import CwgSystem from '@/components/cwg-system.vue'
import CwgLanguage from '@/components/cwg-language.vue'

const props = defineProps({
  iconColor: {
    type: String,
    default: '#141d22'
  },
  textColor: {
    type: String,
    default: '#141d22'
  }
})

const dividerColor = computed(() => {
  return props.textColor === '#fff' ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.2)'
})
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.login-header-group {
  display: flex;
  align-items: center;
  padding: px2rpx(4) 0;
  height: px2rpx(36);
  
  .header-item {
    display: flex;
    align-items: center;
  }
  
  .divider {
    width: 1px;
    height: px2rpx(14);
    margin: 0 px2rpx(16);
  }
}
</style>