|
|
@@ -0,0 +1,471 @@
|
|
|
+<template>
|
|
|
+ <view class="card-container">
|
|
|
+
|
|
|
+ <!-- 顶部背景 -->
|
|
|
+ <image class="top-bg" src="/static/image/home/top-bg.png" />
|
|
|
+ <NavBar title="名片信息" :show_back="false" color="#FFFFFF" :fixed="true" :bg="'transparent'"></NavBar>
|
|
|
+ <!-- 名片卡片 -->
|
|
|
+ <view class="page-top">
|
|
|
+ <view class="user-card">
|
|
|
+ <!-- 背景图 -->
|
|
|
+ <image class="user-card-bg" src="/static/image/home/usecard-bg.png" />
|
|
|
+
|
|
|
+ <!-- 左上:姓名 + 职位 -->
|
|
|
+ <view class="user-header">
|
|
|
+ <view class="name-row">
|
|
|
+ <text class="user-name">赵建平</text>
|
|
|
+ <text class="user-role">销售经理</text>
|
|
|
+ </view>
|
|
|
+ <text class="company-name">杭州碟滤膜技术有限公司</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 右上:头像 -->
|
|
|
+ <view class="avatar-wrapper">
|
|
|
+ <image class="avatar" src="/static/image/public/avatar-default.png" />
|
|
|
+ <image class="badge-icon" src="/static/image/public/badge-icon.png" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 左下:联系方式 -->
|
|
|
+ <view class="user-contact">
|
|
|
+ <view class="contact-row" @click="makeCall">
|
|
|
+ <uni-icons type="phone" :size="18" color="#666666"></uni-icons>
|
|
|
+ <text class="contact-text">138-0000-0000</text>
|
|
|
+ </view>
|
|
|
+ <view class="contact-row">
|
|
|
+ <uni-icons type="email" :size="18" color="#666666"></uni-icons>
|
|
|
+ <text class="contact-text">zhao.jp@subote.com</text>
|
|
|
+ </view>
|
|
|
+ <view class="contact-row">
|
|
|
+ <uni-icons type="location" :size="18" color="#666666"></uni-icons>
|
|
|
+ <text class="contact-text">上海市静安区江宁路 168 号</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="control-card">
|
|
|
+ <view class="item">
|
|
|
+ <image src="/static/image/public/card-sharing.png"></image>
|
|
|
+ <text>分享名片</text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <image src="/static/image/public/card-save.png"></image>
|
|
|
+ <text>保存名片</text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <image src="/static/image/public/card-qr.png"></image>
|
|
|
+ <text>名片码</text>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="card-content">
|
|
|
+ <!-- Tab 切换 -->
|
|
|
+ <view class="tab-section">
|
|
|
+ <view class="tab-wrapper">
|
|
|
+ <view class="tab-item" :class="{ active: currentTab === 'products' }"
|
|
|
+ @click="switchTab('products')">
|
|
|
+ <text class="tab-text">产品列表</text>
|
|
|
+ <view class="tab-indicator" v-if="currentTab === 'products'"></view>
|
|
|
+ </view>
|
|
|
+ <view class="tab-item" :class="{ active: currentTab === 'company' }" @click="switchTab('company')">
|
|
|
+ <text class="tab-text">企业简介</text>
|
|
|
+ <view class="tab-indicator" v-if="currentTab === 'company'"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 产品列表 -->
|
|
|
+ <view class="product-list" v-if="currentTab === 'products'">
|
|
|
+ <view class="product-item" v-for="(item, index) in productList" :key="index">
|
|
|
+ <image class="product-image" :src="item.image" mode="aspectFill" />
|
|
|
+ <view class="product-info">
|
|
|
+ <text class="product-title">{{ item.title }}</text>
|
|
|
+ <text class="product-desc">{{ item.description }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 企业简介 -->
|
|
|
+ <view class="company-section" v-if="currentTab === 'company'">
|
|
|
+ <view class="company-content">
|
|
|
+ <text class="company-text">
|
|
|
+ 杭州碟滤膜技术有限公司是一家专注于膜技术研发、生产和销售的高新技术企业。公司主要产品包括各种规格的滤膜、过滤器及相关设备,广泛应用于医药、化工、食品、环保等领域。
|
|
|
+ </text>
|
|
|
+ <text class="company-text">
|
|
|
+ 公司拥有一支专业的研发团队和先进的生产设备,始终坚持"质量第一、客户至上"的经营理念,为客户提供优质的产品和服务。
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ ref
|
|
|
+ } from 'vue'
|
|
|
+ import NavBar from '@/components/nav-bar/index.vue'
|
|
|
+ const currentTab = ref('products')
|
|
|
+
|
|
|
+ const productList = ref([{
|
|
|
+ id: 1,
|
|
|
+ title: '惠普黑白激光打印机 选配小白盒巴',
|
|
|
+ description: '打印机 | 惠普',
|
|
|
+ image: '/static/image/product/product-1.png'
|
|
|
+ },
|
|
|
+ ])
|
|
|
+
|
|
|
+ const goBack = () => {
|
|
|
+ uni.navigateBack()
|
|
|
+ }
|
|
|
+
|
|
|
+ const shareCard = () => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '分享名片',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const saveCard = () => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '保存名片',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const showQRCode = () => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '名片码',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const switchTab = (tab) => {
|
|
|
+ currentTab.value = tab
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .card-container {
|
|
|
+ background: #f5f6f8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-bg {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 634rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 顶部背景区域
|
|
|
+ .header-bg {
|
|
|
+ background: linear-gradient(135deg, #4A90E2 0%, #6FB3F2 50%, #87CEEB 100%);
|
|
|
+ padding: 0 40rpx;
|
|
|
+ padding-top: calc(var(--status-bar-height) + 20rpx);
|
|
|
+ padding-bottom: 60rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ // 背景光效
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: -100rpx;
|
|
|
+ right: -100rpx;
|
|
|
+ width: 500rpx;
|
|
|
+ height: 500rpx;
|
|
|
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 导航栏
|
|
|
+ .nav-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 88rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+ .nav-back {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ffffff;
|
|
|
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .more-btn,
|
|
|
+ .refresh-btn {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(255, 255, 255, 0.15);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /* 用户信息卡片 */
|
|
|
+ .page-top {
|
|
|
+ margin: 0 24rpx 24rpx;
|
|
|
+ .user-card {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ width: 100%;
|
|
|
+ height: 400rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 80rpx 40rpx 32rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .user-card-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ view,
|
|
|
+ text {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-header {
|
|
|
+ .name-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .user-name {
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #202020;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-role {
|
|
|
+ margin-left: 16rpx;
|
|
|
+ padding: 6rpx 16rpx;
|
|
|
+ background: rgba(68, 110, 255, 0.10);
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #446eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .company-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar-wrapper {
|
|
|
+ position: absolute;
|
|
|
+ top: 32rpx;
|
|
|
+ right: 40rpx;
|
|
|
+ width: 140rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(21, 93, 252, 0.20);
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .badge-icon {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ transform: translate(50% 50%);
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-contact {
|
|
|
+ margin-top: 32rpx;
|
|
|
+
|
|
|
+ .contact-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ uni-icons {
|
|
|
+ margin-right: 12rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact-text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .control-card{
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 0 0 24rpx 24rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ bottom: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding-top: 48rpx;
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 4rpx;
|
|
|
+ image{
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #202020;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ // 名片内容区域
|
|
|
+ .card-content {
|
|
|
+ margin: 0 24rpx;
|
|
|
+ padding: 0 24rpx ;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ // Tab 切换区域
|
|
|
+ .tab-section {
|
|
|
+ border-radius: 24rpx 24rpx 0 0;
|
|
|
+ padding: 0 40rpx;
|
|
|
+
|
|
|
+ .tab-wrapper {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 32rpx 0;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .tab-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999999;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active .tab-text {
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-indicator {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 4rpx;
|
|
|
+ background: linear-gradient(90deg, #4A90E2 0%, #6FB3F2 100%);
|
|
|
+ border-radius: 2rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 产品列表
|
|
|
+ .product-list {
|
|
|
+ padding: 24rpx 40rpx;
|
|
|
+ .product-item {
|
|
|
+ display: flex;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-image {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-info {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .product-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-desc {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 企业简介
|
|
|
+ .company-section {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 40rpx;
|
|
|
+
|
|
|
+ .company-content {
|
|
|
+ .company-text {
|
|
|
+ display: block;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 1.8;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ text-align: justify;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|