From 47047d626ea8fab28c04e6534fe6ffa3dc61de69 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期五, 26 十二月 2025 16:09:22 +0800
Subject: [PATCH] feat: init
---
apps/housekeepingMiniApp/src/components/Card/ChooseSupplierCard.vue | 175 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 175 insertions(+), 0 deletions(-)
diff --git a/apps/housekeepingMiniApp/src/components/Card/ChooseSupplierCard.vue b/apps/housekeepingMiniApp/src/components/Card/ChooseSupplierCard.vue
new file mode 100644
index 0000000..b6ed4fd
--- /dev/null
+++ b/apps/housekeepingMiniApp/src/components/Card/ChooseSupplierCard.vue
@@ -0,0 +1,175 @@
+<template>
+ <div class="choose-supplier-card-wrapper">
+ <div class="choose-supplier-card-top-wrapper">
+ <Avatar :src="setOSSLink(avatar)" :size="60" class="choose-supplier-card-top-avatar" />
+ <div class="choose-supplier-card-top-info">
+ <div class="flexJob-card-top-info-item">
+ <div class="flexJob-card-top-info-item-w">
+ <div class="flexJob-card-top-info-name">{{ name }}</div>
+ <slot name="name-right"></slot>
+ </div>
+ </div>
+ <div class="flexJob-card-top-info-detail">
+ <slot name="infoDetail"> 鏈嶅姟浜哄憳 {{ serverCount }} | 鏈嶅姟浜烘 {{ serviceCount }} </slot>
+ </div>
+ <div class="flexJob-card-top-info-detail-desc">
+ <slot name="desc">{{ mainBusiness }}</slot>
+ </div>
+ </div>
+ </div>
+ <div class="choose-supplier-card-footer">
+ <div class="flexJob-card-footer-left-wrapper"></div>
+ <div class="flexJob-card-footer-right">
+ <slot name="actions"> </slot>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { setOSSLink } from '@12333/utils';
+import { Avatar } from '@12333/components';
+
+defineOptions({
+ name: 'ChooseSupplierCard',
+});
+
+type Props = {
+ avatar?: string;
+ name?: string;
+ mainBusiness?: string;
+ serverCount?: number;
+ serviceCount?: number;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+</script>
+
+<style lang="scss">
+@import '@/styles/common.scss';
+
+.choose-supplier-card-wrapper {
+ padding: 32px 24px 20px;
+ margin-bottom: 24px;
+ background-color: #fff;
+ border-radius: 12px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ .choose-supplier-card-top-wrapper {
+ display: flex;
+ align-items: center;
+
+ .choose-supplier-card-top-avatar {
+ margin-right: 30px;
+ }
+ }
+
+ .choose-supplier-card-footer {
+ display: flex;
+ align-items: center;
+ border-top: #d9d9d9 1px solid;
+ padding-top: 24px;
+ margin-top: 18px;
+
+ .flexJob-card-footer-left-wrapper {
+ flex: 1;
+ min-width: 0;
+ }
+
+ .flexJob-card-footer-right {
+ --nut-button-default-font-size: 24px;
+ --nut-button-default-height: 52px;
+ --nut-button-default-line-height: 49px;
+
+ .nut-button {
+ min-width: 144rpx;
+
+ &.nut-button--plain {
+ border-width: 1px;
+ }
+
+ &.nut-button {
+ margin-left: 10px;
+ }
+ }
+ }
+ }
+
+ .choose-supplier-card-top-info {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-width: 0;
+
+ .flexJob-card-top-info-item-w {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ min-width: 0;
+ }
+
+ .flexJob-card-top-info-item {
+ display: flex;
+ align-items: center;
+
+ .flexJob-card-top-info-item-right {
+ font-size: 28px;
+ line-height: 34px;
+ color: boleGetCssVar('text-color', 'secondary');
+ }
+
+ .flexJob-card-top-info-name {
+ font-size: 34px;
+ line-height: 34px;
+ font-weight: bold;
+ color: boleGetCssVar('text-color', 'primary');
+ @include ellipsis;
+ }
+
+ .flexJob-card-top-info-gender {
+ display: inline-flex;
+ align-items: center;
+ height: 34px;
+ margin: 0 10px;
+ flex-shrink: 0;
+
+ .flexJob-card-top-info-gender-icon {
+ width: 24px;
+ height: 24px;
+ }
+ }
+
+ .flexJob-card-top-info-auth {
+ font-size: 28px;
+ line-height: 34px;
+ flex-shrink: 0;
+
+ &.is-real-name {
+ color: #2a9e1b;
+ }
+ }
+ }
+
+ .flexJob-card-top-info-detail {
+ font-size: 24px;
+ font-weight: 400;
+ line-height: 28px;
+ margin-top: 12px;
+ color: boleGetCssVar('text-color', 'regular');
+ @include ellipsis;
+ }
+
+ .flexJob-card-top-info-detail-desc {
+ font-size: 24px;
+ font-weight: 400;
+ line-height: 28px;
+ margin-top: 12px;
+ color: boleGetCssVar('text-color', 'secondary');
+ @include ellipsis;
+ }
+ }
+}
+</style>
--
Gitblit v1.10.0