标签管理页面
This commit is contained in:
+89
-12
@@ -4,11 +4,36 @@
|
||||
backgroundColor="#fff" :statusBar="true" :title="$t('navbar.businesscard')"></uni-nav-bar>
|
||||
<view class="card">
|
||||
<view class="img_top" ref="poster" id="poster">
|
||||
<view class="name">
|
||||
<view>刘亦菲</view>
|
||||
<view>业务经理</view>
|
||||
<view>13838225452</view>
|
||||
</view>
|
||||
<view class="name">
|
||||
<view class="left">
|
||||
<view class="title">
|
||||
<view class="leftbg"></view>
|
||||
<view>刘亦菲</view>
|
||||
</view>
|
||||
<view class="ftitle">业务经理</view>
|
||||
</view>
|
||||
<view>
|
||||
<image src="/static/image/mine/user.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="conts">
|
||||
<view class="coles">
|
||||
<image src="/static/image/mine/phone.png" mode=""></image>
|
||||
<view class="">13838225452</view>
|
||||
</view>
|
||||
<view class="coles">
|
||||
<image src="/static/image/mine/email.png" style="height:13px;" mode=""></image>
|
||||
<view class="">17752584152@163.com</view>
|
||||
</view>
|
||||
<view class="coles">
|
||||
<image src="/static/image/mine/addr.png" style="height:18px;width: 14px;" mode=""></image>
|
||||
<view class="">13838225452</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="code">
|
||||
<image src="/static/image/mine/ewm.png" mode=""></image>
|
||||
<text>微信</text>
|
||||
</view>
|
||||
<!-- <view class="code" :class=" activeImg === share_one ? 'code_one' : activeImg === share_two ? 'code_two' : activeImg === share_three ? 'code_three' : 'code_one'">
|
||||
<qrcode-vue :value="codeUrl" :size="70"></qrcode-vue>
|
||||
</view> -->
|
||||
@@ -16,7 +41,7 @@
|
||||
|
||||
</view>
|
||||
<view class="foot">
|
||||
<button class="btn" @click="goDown">{{$t('submit')}}</button>
|
||||
<button class="btn" @click="goDown">{{$t('download')}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -97,9 +122,9 @@
|
||||
}).then(canvas => {
|
||||
// canvas 其实就是我们所讲的res 的意思 返回报文的意思
|
||||
let baseImg = canvas.toDataURL('image/png')
|
||||
uni.showModal({
|
||||
uni.showModal ({
|
||||
title: '下载名片',
|
||||
content: '确定下载当前名片图至相册嘛',
|
||||
content: '确定下载当前名片图吗?',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
that.downloadImage(baseImg, 'screenshot.png');
|
||||
@@ -126,11 +151,63 @@
|
||||
position: relative;
|
||||
width:690rpx;
|
||||
height:1060rpx;
|
||||
border-radius: 15px;
|
||||
padding-top: 60rpx;
|
||||
.leftbg{
|
||||
width: 10px;
|
||||
height: 34px;
|
||||
background: linear-gradient(to bottom, #3471FF, #BD67FF);
|
||||
margin-right: 15px;
|
||||
}
|
||||
.name{
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 10%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
margin: 0px 25px 0px 0px;
|
||||
.title{
|
||||
color: #3C4169;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ftitle{
|
||||
color: #222222;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
}
|
||||
image{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
.conts{
|
||||
padding: 15px 25px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 20px;
|
||||
.coles{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
image{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.code{
|
||||
background-color: rgba(255,255,255,50%);
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
padding: 15px;
|
||||
image{
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.foot{
|
||||
|
||||
Reference in New Issue
Block a user