| | |
| | | <!-- 名片展示区域 --> |
| | | <view class="content"> |
| | | <view class="business-card"> |
| | | <image style="width: 100%;" @tap="viewPicture(businessImage)" mode="widthFix" :src="businessImage"> |
| | | <image class="card-image" @tap="viewPicture(businessImage)" mode="widthFix" :src="businessImage"> |
| | | </image> |
| | | </view> |
| | | |
| | |
| | | businessImage: '', |
| | | business_card_id: '', |
| | | height: 0, |
| | | cardWidth: 0, // 名片宽度 |
| | | businessList: [], |
| | | current: 0, |
| | | statistics: {}, |
| | |
| | | }, |
| | | onLoad() { |
| | | this.screenWidth = uni.getSystemInfoSync().windowWidth * 2 - 70; |
| | | |
| | | // 计算名片宽度:屏幕宽度减去左右padding(40rpx) |
| | | const systemInfo = uni.getSystemInfoSync(); |
| | | this.cardWidth = (systemInfo.windowWidth * 2) - 40; // rpx单位 |
| | | }, |
| | | onShow() { |
| | | this.getbusinessList(); |
| | |
| | | background: #fff; |
| | | border-radius: 20rpx; |
| | | overflow: hidden; |
| | | box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
| | | |
| | | .card-image { |
| | | width: 100%; |
| | | display: block; |
| | | // 确保图片清晰度,使用高质量渲染 |
| | | image-rendering: -webkit-optimize-contrast; |
| | | image-rendering: crisp-edges; |
| | | } |
| | | |
| | | .top-image { |
| | | width: 100%; |
| | |
| | | .card-preview { |
| | | border-radius: 12rpx; |
| | | position: relative; |
| | | overflow: hidden; |
| | | |
| | | image { |
| | | // 保持图片原始清晰度 |
| | | display: block; |
| | | image-rendering: -webkit-optimize-contrast; |
| | | } |
| | | |
| | | .mrmp { |
| | | height: 50rpx; |