@jname/vue-mobile-components
Version:
基于 Vue 3 + Vant 4 的移动端组件库
2 lines (1 loc) • 9.1 kB
CSS
.jname-content-card[data-v-1b240819]{position:relative;background:#fff;border-bottom:1px solid #ddd;padding:10px;transition:background-color .2s ease;display:flex;gap:6}.jname-content-card__content[data-v-1b240819]{min-width:0;flex:1;font-size:16px}.jname-content-card__title[data-v-1b240819]{margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;font-weight:600;font-size:inherit}.jname-content-card__description[data-v-1b240819]{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px;color:#666;line-height:1.4}.jname-content-card__images[data-v-1b240819]{margin:10px 0;display:flex;gap:14px}.jname-content-card__image[data-v-1b240819]{height:68px;width:98px;flex:1;border-radius:5px}.jname-content-card__meta[data-v-1b240819]{margin-top:14px;display:flex;align-items:center;justify-content:space-between}.jname-content-card__tag[data-v-1b240819]{display:flex;align-items:center;justify-content:center;border-radius:8px;padding:4px 12px;font-size:10px;background-color:#f5f5f5;color:#666;border:1px solid transparent}.jname-content-card__tag--success[data-v-1b240819]{background-color:#e8f5e8;color:#388e3c}.jname-content-card__tag--warning[data-v-1b240819]{background-color:#fff3e0;color:#f57c00}.jname-content-card__tag--error[data-v-1b240819]{background-color:#ffebee;color:#d32f2f}.jname-content-card__tag--info[data-v-1b240819]{background-color:#e3f2fd;color:#1976d2}.jname-content-card__time[data-v-1b240819]{display:flex;align-items:center;gap:8px;font-size:12px;color:#999}.jname-content-card__image-single[data-v-1b240819]{margin-left:6px;height:68px;width:98px;flex-shrink:0;border-radius:5px}.jname-upload-error[data-v-49c439e7]{margin-top:8px;font-size:12px;color:#ee0a24}.jname-list-enter-active[data-v-473e52f3],.jname-list-leave-active[data-v-473e52f3]{transition:all .3s ease}.jname-list-leave-to[data-v-473e52f3],.jname-list-enter-from[data-v-473e52f3]{opacity:0;transform:translate(30px)}.jname-organization-popup[data-v-473e52f3]{display:flex;flex-direction:column;height:100%;overflow:hidden}.jname-popup-header[data-v-473e52f3]{padding:16px 20px 12px;background:#fff;border-bottom:1px solid #eee;flex-shrink:0}.jname-popup-header .jname-popup-title[data-v-473e52f3]{margin:0 0 8px;font-size:18px;font-weight:500;color:#333;line-height:1.2}.jname-popup-header .jname-header-actions[data-v-473e52f3]{display:flex;align-items:center;justify-content:space-between}.jname-popup-header .jname-header-actions .jname-selected-count[data-v-473e52f3]{font-size:12px;color:#999}.jname-search-section[data-v-473e52f3]{background:#fff;border-bottom:1px solid #eee;flex-shrink:0}.jname-breadcrumb-nav[data-v-473e52f3]{background:#fff;border-bottom:1px solid #eee;padding:10px 20px;flex-shrink:0}.jname-breadcrumb-nav .jname-breadcrumb-content[data-v-473e52f3]{display:flex;align-items:center;overflow-x:auto;white-space:nowrap;scroll-behavior:smooth;scrollbar-width:none}.jname-breadcrumb-nav .jname-breadcrumb-content[data-v-473e52f3]::-webkit-scrollbar{display:none}.jname-breadcrumb-nav .jname-breadcrumb-content .jname-breadcrumb-item[data-v-473e52f3]{display:inline-flex;align-items:center;font-size:14px;color:#1989fa;cursor:pointer;flex-shrink:0}.jname-breadcrumb-nav .jname-breadcrumb-content .jname-breadcrumb-item.active[data-v-473e52f3]{color:#333;cursor:default}.jname-breadcrumb-nav .jname-breadcrumb-content .jname-breadcrumb-item .van-icon[data-v-473e52f3]{margin:0 8px;color:#999;font-size:12px}.jname-popup-content[data-v-473e52f3]{flex:1;background:#f8f8f8;overflow-y:auto;overflow-x:hidden}.jname-popup-content .jname-org-list[data-v-473e52f3]{padding:12px 0;min-height:100%}.jname-popup-content .jname-org-list .jname-org-item[data-v-473e52f3],.jname-popup-content .jname-org-list .jname-person-item[data-v-473e52f3]{background:#fff;margin:0 12px 8px;border-radius:8px;cursor:pointer;transition:all .2s}.jname-popup-content .jname-org-list .jname-org-item[data-v-473e52f3]:active,.jname-popup-content .jname-org-list .jname-person-item[data-v-473e52f3]:active{transform:scale(.98);background-color:#f2f3f5;box-shadow:0 0 4px #00000026}.jname-popup-content .jname-org-list .jname-org-item .jname-item-content[data-v-473e52f3],.jname-popup-content .jname-org-list .jname-person-item .jname-item-content[data-v-473e52f3]{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}.jname-popup-content .jname-org-list .jname-org-item .jname-org-info[data-v-473e52f3]{display:flex;align-items:center}.jname-popup-content .jname-org-list .jname-org-item .jname-org-info .jname-org-icon[data-v-473e52f3]{margin-right:12px;color:#1989fa;font-size:20px}.jname-popup-content .jname-org-list .jname-org-item .jname-org-info .jname-org-name[data-v-473e52f3]{font-size:16px;color:#333;font-weight:500}.jname-popup-content .jname-org-list .jname-org-item .jname-arrow-icon[data-v-473e52f3]{color:#999;font-size:16px}.jname-popup-content .jname-org-list .jname-person-item .jname-person-info[data-v-473e52f3]{display:flex;align-items:center}.jname-popup-content .jname-org-list .jname-person-item .jname-person-info .jname-person-icon[data-v-473e52f3]{margin-right:12px;color:#07c160;font-size:20px}.jname-popup-content .jname-org-list .jname-person-item .jname-person-info .jname-person-details .jname-person-name[data-v-473e52f3]{font-size:16px;color:#333;line-height:1.2}.jname-popup-content .jname-org-list .jname-person-item .jname-person-info .jname-person-details .jname-person-id[data-v-473e52f3]{font-size:12px;color:#999;margin-top:2px}.jname-popup-footer[data-v-473e52f3]{display:flex;gap:12px;padding:12px 20px 20px;background:#fff;border-top:1px solid #eee;flex-shrink:0}.jname-popup-footer .van-button[data-v-473e52f3]{flex:1;height:44px;border-radius:6px;font-size:16px}.jname-steps-card[data-v-af2389e6]{display:flex;margin-bottom:10px;padding-bottom:15px}.jname-steps-card__timeline[data-v-af2389e6]{position:relative;width:15px;display:flex;justify-content:center}.jname-steps-card__timeline-container[data-v-af2389e6]{display:flex;flex-direction:column;align-items:center}.jname-steps-card__dot-container[data-v-af2389e6]{position:relative}.jname-steps-card__outer-dot[data-v-af2389e6]{height:21px;width:21px;border-radius:50%;background-color:var(--j-primary-color);opacity:.23}.jname-steps-card__inner-dot[data-v-af2389e6]{position:absolute;left:50%;top:50%;height:8px;width:8px;transform:translate(-50%) translateY(-50%);border-radius:50%;background-color:var(--j-primary-color)}.jname-steps-card__line[data-v-af2389e6]{margin-top:0;width:1px;border-left:1px dashed var(--j-primary-color)}.jname-steps-card__line--visible[data-v-af2389e6]{height:100%}.jname-steps-card__line--hidden[data-v-af2389e6]{height:0}.jname-steps-card__content[data-v-af2389e6]{margin-left:17px;flex:1}.jname-steps-card__content-header[data-v-af2389e6]{display:flex;align-items:center}.jname-steps-card__content-body[data-v-af2389e6]{margin-top:15px;padding-left:5px}.jname-tabs-container{width:100%;display:flex;align-items:center;justify-content:space-around;gap:20px;overflow-x:auto;white-space:nowrap;padding:10px 0}.jname-tabs-container .jname-tab-item{position:relative;cursor:pointer;font-size:14px;color:#999;transition:all .3s ease-in-out}.jname-tabs-container .jname-tab-item.active{color:#333 ;font-size:15px;font-weight:500}.jname-tabs-container .jname-tab-item .jname-tab-count{margin-left:4px}.jname-tabs-container .jname-tab-item .jname-tab-indicator{position:absolute;bottom:0;left:0;right:0;height:6px;width:100%;border-radius:7px;background-color:var(--j-primary-color);opacity:0;transition:all .3s ease-in-out}.jname-tabs-container .jname-tab-item .jname-tab-indicator.active{opacity:.23}:root{--j-primary-color: #4873c1;--j-success-color: #4caf50;--j-warning-color: #ff9800;--j-error-color: #f44336;--j-info-color: #2196f3;--j-text-color: #333333;--j-text-color-secondary: #666666;--j-text-color-disabled: #999999;--j-border-color: #e0e0e0;--j-background-color: #ffffff;--j-background-color-light: #f5f5f5;--j-border-radius-small: 4px;--j-border-radius-medium: 8px;--j-border-radius-large: 12px;--j-font-size-small: 12px;--j-font-size-medium: 14px;--j-font-size-large: 16px;--j-font-size-xlarge: 18px;--j-spacing-xs: 4px;--j-spacing-sm: 8px;--j-spacing-md: 16px;--j-spacing-lg: 24px;--j-spacing-xl: 16px}.j{box-sizing:border-box}.j,.j:before,.j:after{box-sizing:inherit}.j-text-center{text-align:center}.j-text-left{text-align:left}.j-text-right{text-align:right}.j-flex{display:flex}.j-flex-center{display:flex;align-items:center;justify-content:center}.j-flex-column{display:flex;flex-direction:column}.j-mb-xs{margin-bottom:var(--j-spacing-xs)}.j-mb-sm{margin-bottom:var(--j-spacing-sm)}.j-mb-md{margin-bottom:var(--j-spacing-md)}.j-mb-lg{margin-bottom:var(--j-spacing-lg)}.j-mb-xl{margin-bottom:var(--j-spacing-xl)}.j-mt-xs{margin-top:var(--j-spacing-xs)}.j-mt-sm{margin-top:var(--j-spacing-sm)}.j-mt-md{margin-top:var(--j-spacing-md)}.j-mt-lg{margin-top:var(--j-spacing-lg)}.j-mt-xl{margin-top:var(--j-spacing-xl)}