card-mini/packagecard/cardDetail/cardDetail.wxml

<cu-custom isCustom="{{false}}" isBack="{{true}}">
  <view slot="content">创建名片</view>
</cu-custom>
<view style="margin:15rpx;">
  <view class="card"
    style="padding-bottom:{{(cardInfo.picturesTemplateHeight / cardInfo.picturesTemplateWidth) *100 +'%'}};">
    <!-- 背景图 -->
    <image src="{{cardUrl}}{{cardInfo.picturesTemplateBackgroundImage}}" alt="" class="card-bgImg"
      wx:if="{{cardInfo.picturesTemplateBackgroundImage}}"></image>
    <!-- 文字 -->
    <view class="area-box" wx:for="{{areaList}}" data-cur="{{index}}" catchtap="giveFocus" wx:key="index"
      style="position:absolute;top: {{(item.templateAreaTop / cardInfo.picturesTemplateHeight) * 100 + '%'}};left:{{(item.templateAreaLeft / cardInfo.picturesTemplateWidth) * 100 + '%'}};color:{{item.templateAreaFontColor}};;width:{{item.templateAreaWidth }}px;height:{{item.templateAreaHeight}}px;font-size:{{item.templateAreaFontSize}};font-style:{{item.templateAreaFontStyle}};font-weight:{{item.templateAreaFontBold}};text-align:{{item.templateAreaFontCenter}};line-height: {{item.templateAreaHeight}}px;"
      wx:if="{{item.templateAreaServerLink == '1' && item.templateAreaType != '1'}}">
      {{item.templateAreaFontValue}}
    </view>


    <!-- 图片 -->
    <!-- catchtap="choosePhoto" -->
    <view wx:for="{{areaList}}" data-cur="{{index}}" wx:key="index" data-item="{{item}}"
      style="position:absolute;top: {{(item.templateAreaTop / cardInfo.picturesTemplateHeight) * 100 + '%'}};left:{{(item.templateAreaLeft / cardInfo.picturesTemplateWidth) * 100 + '%'}};color:{{item.templateAreaFontColor}};width:{{(item.templateAreaWidth / cardInfo.picturesTemplateWidth) * 100 + '%'}};height:{{(item.templateAreaHeight / cardInfo.picturesTemplateHeight) * 100 + '%'}};"
      wx:if="{{item.templateAreaServerLink == '2'}}">
      <image src="{{cardUrl}}{{item.templateAreaFile}}" style="width: 100%;height:100%"></image>
    </view>

    <!-- 其他 -->
    <view class="area-box" wx:for="{{areaList}}" data-cur="{{index}}" wx:key="index" catchtap="giveFocus"
      style="position:absolute;top: {{(item.templateAreaTop / cardInfo.picturesTemplateHeight) * 100 + '%'}};left:{{(item.templateAreaLeft / cardInfo.picturesTemplateWidth) * 100 + '%'}};color:{{item.templateAreaFontColor}};width:{{(item.templateAreaWidth / cardInfo.picturesTemplateWidth) * 100 + '%'}};height:{{(item.templateAreaHeight / cardInfo.picturesTemplateHeight) * 100 + '%'}}"
      wx:if="{{item.templateAreaType == '1' && item.templateAreaServerLink == '1'}}">
      <text wx:if="{{!item.templateAreaFile}}">{{item.templateAreaFontValue}}</text>
      <image src="{{cardUrl}}{{item.templateAreaFile}}" wx:else></image>
      <!-- <image src="{{cardUrl}}{{item.templateAreaFile}}" style="width: 100%;height:100%"></image> -->
    </view>
  </view>
</view>
<view class="content-box">
  <view class="card-title">适用行业：{{cardInfo.templateIndustryName}}</view>
  <view class="card-info">
    <view class="edit-card">
      <view wx:for="{{areaList}}" wx:key="index"
        wx:if="{{item.templateAreaServerLink != '2' && item.templateAreaType != '1'}}">
        <view class="row-ver">
          <view class="item-title-box">
            <view class="item-title">{{item.templateAreaName}}</view>
            <view class="hint-txt" wx:if="{{item.templateAreaFontLength>0}}">最多输入{{item.templateAreaFontLength}}个字符
            </view>
          </view>
          <view class="item-input">
            <input type="text" data-num="{{index}}" bindblur="inputBlur" data-item="{{item}}"
              value="{{item.templateAreaFontValue}}" focus="{{item.focus}}"
              wx:if="{{item.templateAreaServerLink != '1'}}"></input>
            <input type="text" placeholder="请输入内容,最多{{item.templateAreaFontLength}}个字" data-item="{{item}}"
              bindblur="inputBlur" data-num="{{index}}" value="{{item.templateAreaFontValue}}" focus="{{item.focus}}"
              wx:else></input>
          </view>
        </view>
      </view>

      <view class="row-ver" wx:for="{{areaList}}" wx:key="index"
        wx:if="{{item.templateAreaServerLink == '2'  && item.templateAreaType != '1'}}">
        <view class="item-title-box">
          <view class="item-title">{{item.templateAreaName}}</view>
          <view class="hint-txt" wx:if="{{item.templateAreaFontLength>0}}">最多输入1张图片</view>
        </view>
        <view bindtap="choosePhoto" data-cur="{{index}}" data-item="{{item}}" class="card-img-box">
          <image src="{{cardUrl}}{{item.templateAreaFile}}" mode="widthFix"></image>
          <text class="cuIcon-cameraadd" style="font-size: 100rpx;"></text>
        </view>
      </view>
      <!-- <view class="row" wx:for="{{areaList}}" wx:key="index" wx:if="{{item.templateAreaType == '9'}}">
      <view class="item-title">二维码:</view>
      <view class="item-input item-code-input" bindtap="choosePhoto" data-cur="{{index}}">
        <image src="{{cardUrl}}route/file/download/true/{{item.templateAreaTitle}}"></image>
        点击修改
      </view>
    </view> -->
    </view>
  </view>
</view>
<view class="foot bg-white" style="padding: 15rpx;" wx:if="{{!isLoading}}">
  <button class="cu-btn bg-blue" style="width:100%" bindtap="createMyCard">生成我的名片</button>
</view>
<view class="hide-link" wx:if="{{showHide}}">
  <view class="hide">
    <view class="hide-title">创建成功</view>
    <view class="hide-text">恭喜您名片创建成功,如需查看请到(我的 → 我的卡包)</view>
    <view class="hide-btn-box">
      <view class="hide-btn" bindtap="continueCreate">继续创建</view>
      <view class="hide-btn" bindtap="backList">返回模板</view>
    </view>
  </view>
</view>