标签管理页面

This commit is contained in:
浅念
2025-03-26 17:02:04 +08:00
parent be8674fd51
commit 8583ff2543
12 changed files with 298 additions and 20 deletions
+89 -12
View File
@@ -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{