调整我的名片样式

xiaochengxu/pages/mySet/myInfo.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
 	<view class="content">
 		<u-loading-page loading-mode='spinner' image="/static/imgs/logo.png" iconSize='60'
 			:loading='loading'></u-loading-page>
@@ -42,206 +42,204 @@
 								<!-- <view class="">
 									备注
 								</view> -->
-							</view>
-						</view>
-						<view class="card-content style1 flex-between" v-if="item.cuttentTemplate==2">
-							<view class="right">
-								<view class="row1">
-									<text class="name">{{item.name}}</text>
-									<text class="post">{{item.post}}</text>
-								</view>
-								<view class="row2">
-									{{item.companyName}}
-								</view>
-								<view class="row3 flex">
-									<u--image :showLoading="true" :src="'/static/imgs/card/address'+item.icon+'.png'"
-										width="13px" height="16px"></u--image>
-									<view class='icon-text'>{{ item.province }}{{ item.city }}{{ item.area }}</view>
-								</view>
-								<view class="row4 flex">
-									<u--image :showLoading="true" :src="'/static/imgs/card/phone'+item.icon+'.png'"
-										width="12px" height="13px"></u--image>
-									<view class='icon-text'>{{ item.phone }}</view>
-								</view>
-								<view class="row4 flex">
-									<u--image :showLoading="true" :src="'/static/imgs/card/remark'+item.icon+'.png'"
-										width="10px" height="12px"></u--image>
-									<view class='icon-text'>{{item.remark?item.remark:'--'}}</view>
-								</view>
-								<!-- <view class="">
+</view>
+</view>
+<view class="card-content style1 flex-between" v-if="item.cuttentTemplate==2">
+	<view class="right">
+		<view class="row1">
+			<text class="name">{{item.name}}</text>
+			<text class="post">{{item.post}}</text>
+		</view>
+		<view class="row2">
+			{{item.companyName}}
+		</view>
+		<view class="row3 flex">
+			<u--image :showLoading="true" :src="'/static/imgs/card/address'+item.icon+'.png'" width="13px"
+				height="16px"></u--image>
+			<view class='icon-text'>{{ item.province }}{{ item.city }}{{ item.area }}</view>
+		</view>
+		<view class="row4 flex">
+			<u--image :showLoading="true" :src="'/static/imgs/card/phone'+item.icon+'.png'" width="12px"
+				height="13px"></u--image>
+			<view class='icon-text'>{{ item.phone }}</view>
+		</view>
+		<view class="row4 flex">
+			<u--image :showLoading="true" :src="'/static/imgs/card/remark'+item.icon+'.png'" width="10px"
+				height="12px"></u--image>
+			<view class='icon-text'>{{item.remark?item.remark:'--'}}</view>
+		</view>
+		<!-- <view class="">
 									备注
 								</view> -->
-							</view>
-							<view class="left">
-								<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
-									shape="circle" v-if="item.headSculpture"></u--image>
-								<u--image :showLoading="true" src="/static/imgs/card/defaulthead.png" width="66px"
-									height="66px" shape="circle" v-else></u--image>
-							</view>
-						</view>
-						<view class="card-content style2" v-if="item.cuttentTemplate==3">
-							<view class="top">
-								<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
-									shape="circle" v-if="item.headSculpture"></u--image>
-								<u--image :showLoading="true" src="/static/imgs/card/defaulthead.png" width="66px"
-									height="66px" shape="circle" v-else></u--image>
-							</view>
-							<view class="bottom flex">
-								<view class="left">
-									<view class="row1">
-										<text class="name">{{item.name}}</text>
-										<text class="post">{{item.post}}</text>
-									</view>
-									<view class="row2">
-										{{item.companyName}}
-									</view>
-								</view>
-								<view class="right">
-									<view class="row3 flex">
-										<u--image :showLoading="true"
-											:src="'/static/imgs/card/address'+item.icon+'.png'" width="13px"
-											height="16px"></u--image>
-										<view class='icon-text'>{{ item.province }}{{ item.city }}{{ item.area }}</view>
-									</view>
-									<view class="row4 flex">
-										<u--image :showLoading="true" :src="'/static/imgs/card/phone'+item.icon+'.png'"
-											width="12px" height="13px"></u--image>
-										<view class='icon-text'>{{ item.phone }}</view>
-									</view>
-									<view class="row4 flex">
-										<u--image :showLoading="true" :src="'/static/imgs/card/remark'+item.icon+'.png'"
-											width="10px" height="12px"></u--image>
-										<view class='icon-text'>{{item.remark?item.remark:'--'}}</view>
-									</view>
-								</view>
-							</view>
-						</view>
-						<view class="card-content style2" v-if="item.cuttentTemplate==4">
-							<view class="top">
-								<view class="row1">
-									<text class="name">{{item.name}}</text>
-									<text class="post">{{item.post}}</text>
-								</view>
-								<view class="row2">
-									{{item.companyName}}
-								</view>
-
-							</view>
-							<view class="bottom flex">
-								<view class="left">
-									<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
-										shape="circle" v-if="item.headSculpture"></u--image>
-									<u--image :showLoading="true" src="/static/imgs/card/defaulthead.png" width="66px"
-										height="66px" shape="circle" v-else></u--image>
-								</view>
-								<view class="right">
-									<view class="row3 flex">
-										<u--image :showLoading="true"
-											:src="'/static/imgs/card/address'+item.icon+'.png'" width="13px"
-											height="16px"></u--image>
-										<view class='icon-text'>{{ item.province }}{{ item.city }}{{ item.area }}</view>
-									</view>
-									<view class="row4 flex">
-										<u--image :showLoading="true" :src="'/static/imgs/card/phone'+item.icon+'.png'"
-											width="12px" height="13px"></u--image>
-										<view class='icon-text'>{{ item.phone }}</view>
-									</view>
-									<view class="row4 flex">
-										<u--image :showLoading="true" :src="'/static/imgs/card/remark'+item.icon+'.png'"
-											width="10px" height="12px"></u--image>
-										<view class='icon-text'>{{item.remark?item.remark:'--'}}</view>
-									</view>
-								</view>
-							</view>
-						</view>
-						<view class="car-bottom flex">
-							<view class="left">
-								<image src="../../static/imgs/card/home.png" mode="widthFix"
-									style="width: 32rpx;height: auto;" @click="toHome(item)"></image>
-								<image src="../../static/imgs/card/share.png" mode="widthFix"
-									style="width: 35rpx;height: auto;" @click="share(item)"></image>
-								<image src="../../static/imgs/card/ewm.png" mode="widthFix"
-									style="width: 32rpx;height: auto;" @click="showCode(item)"></image>
-							</view>
-							<view class="right">
-								<text class="text" @click="topMarking(item)">置顶</text>
-								<text class="text" @click="del(item.id)">删除</text>
-								<text class="text" @click="toEditCard(item)">编辑</text>
-							</view>
-							<!-- <u-button text="置顶" @click="topMarking(item)" throttle-time='1000'></u-button> -->
-							<!-- <button @click="$u.debounce(topMarking, 500)">置顶</button> -->
-							<!-- <button @click="$u.debounce(topMarking(item), 500)">置顶</button> -->
-							<!-- <u-button text="删除" @click="del(item.id)" throttle-time='1000'></u-button> -->
-							<!-- <button @click="toEditCard(item)">编辑</button> -->
-						</view>
-					</view>
-				</view>
+	</view>
+	<view class="left">
+		<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px" shape="circle"
+			v-if="item.headSculpture"></u--image>
+		<u--image :showLoading="true" src="/static/imgs/card/defaulthead.png" width="66px" height="66px" shape="circle"
+			v-else></u--image>
+	</view>
+</view>
+<view class="card-content style2" v-if="item.cuttentTemplate==3">
+	<view class="top">
+		<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px" shape="circle"
+			v-if="item.headSculpture"></u--image>
+		<u--image :showLoading="true" src="/static/imgs/card/defaulthead.png" width="66px" height="66px" shape="circle"
+			v-else></u--image>
+	</view>
+	<view class="bottom flex">
+		<view class="left">
+			<view class="row1">
+				<text class="name">{{item.name}}</text>
+				<text class="post">{{item.post}}</text>
 			</view>
-			<view class="upload flex flex-all-center" @click="addCard">
-				<view class="solids flex flex-all-center">
-					<image src="../../static/imgs/card/add.png" mode="widthFix" style="width: 148rpx;height: auto;">
-					</image>
-					<text class='text'>添加新名片</text>
-				</view>
+			<view class="row2">
+				{{item.companyName}}
 			</view>
 		</view>
+		<view class="right">
+			<view class="row3 flex">
+				<u--image :showLoading="true" :src="'/static/imgs/card/address'+item.icon+'.png'" width="13px"
+					height="16px"></u--image>
+				<view class='icon-text'>{{ item.province }}{{ item.city }}{{ item.area }}</view>
+			</view>
+			<view class="row4 flex">
+				<u--image :showLoading="true" :src="'/static/imgs/card/phone'+item.icon+'.png'" width="12px"
+					height="13px"></u--image>
+				<view class='icon-text'>{{ item.phone }}</view>
+			</view>
+			<view class="row4 flex">
+				<u--image :showLoading="true" :src="'/static/imgs/card/remark'+item.icon+'.png'" width="10px"
+					height="12px"></u--image>
+				<view class='icon-text'>{{item.remark?item.remark:'--'}}</view>
+			</view>
+		</view>
+	</view>
+</view>
+<view class="card-content style2" v-if="item.cuttentTemplate==4">
+	<view class="top">
+		<view class="row1">
+			<text class="name">{{item.name}}</text>
+			<text class="post">{{item.post}}</text>
+		</view>
+		<view class="row2">
+			{{item.companyName}}
+		</view>
 
-
-		<u-toast ref="uToast"></u-toast>
-		<u-popup :round='10' :show="isShowDel" @close="isShowDel=false" mode="center">
-			<view class="del-style">
-				<text class="title">删除名片自动退出关联得圈子，确定删除？</text>
-				<view class="">
-					<view @click='radiovalue=1' class="flex align-item-center radio-wrap">
-						<image style='width:13px;height:13px;margin-right:10rpx;'
-							:src="radiovalue==1?'../../static/imgs/mySet/checked.png':'../../static/imgs/mySet/not-checked.png'"
-							mode=""></image>
-						<view class="">仅从自己名片列表删除</view>
-					</view>
-					<view @click='radiovalue=2' class="flex align-item-center radio-wrap">
-						<image style='width:13px;height:13px;margin-right:10rpx;'
-							:src="radiovalue==2?'../../static/imgs/mySet/checked.png':'../../static/imgs/mySet/not-checked.png'"
-							mode=""></image>
-						<view class="">从所有拥有此名片用户列表删除</view>
-					</view>
-				</view>
-				<view class="flex footer">
-					<view class="cancel" @click="isShowDel=false">
-						取消
-					</view>
-					<view class="confirm" @click="delCard">
-						删除
-					</view>
-				</view>
+	</view>
+	<view class="bottom flex">
+		<view class="left">
+			<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px" shape="circle"
+				v-if="item.headSculpture"></u--image>
+			<u--image :showLoading="true" src="/static/imgs/card/defaulthead.png" width="66px" height="66px"
+				shape="circle" v-else></u--image>
+		</view>
+		<view class="right">
+			<view class="row3 flex">
+				<u--image :showLoading="true" :src="'/static/imgs/card/address'+item.icon+'.png'" width="13px"
+					height="16px"></u--image>
+				<view class='icon-text'>{{ item.province }}{{ item.city }}{{ item.area }}</view>
 			</view>
-		</u-popup>
-		<u-popup :show="isShowCode" @close="isShowCode=false" mode="center" :round='10'>
-			<image style='margin:10px;height: auto;' :src="selectCode" mode="widthFix"></image>
-		</u-popup>
-		<u-popup :show="popupshow" :closeOnClickOverlay='true' :overlayOpacity='0.4' @close='handleHiddenShare'
-			:round="10" mode="bottom">
-			<view>
-				<view class="share-content">
-					<view class="block" @click="toUrl()">
-						<button class="moment">
-							<view class="iconfont icon-pengyouquan"></view>
-							<view style="font-size: 26rpx;">分享朋友圈</view>
-						</button>
-					</view>
-					<view class="block">
-						<button class="shareBtn" type="default" data-name="shareBtn" open-type="share">
-							<view class="iconfont icon-weixin"></view>
-							<view  style="font-size: 26rpx;">分享微信好友</view>
-						</button>
-					</view>
-				</view>
+			<view class="row4 flex">
+				<u--image :showLoading="true" :src="'/static/imgs/card/phone'+item.icon+'.png'" width="12px"
+					height="13px"></u--image>
+				<view class='icon-text'>{{ item.phone }}</view>
 			</view>
-		</u-popup>
-		<!-- 生成图片 -->
-		<poster :data="canvasData" background-color="#FFF" :width='750' :height='420' @on-success="posterSuccess"
-			ref="poster" @on-error="posterError"></poster>
-		<point-share @close='showShare=false' :show='showShare'></point-share>
+			<view class="row4 flex">
+				<u--image :showLoading="true" :src="'/static/imgs/card/remark'+item.icon+'.png'" width="10px"
+					height="12px"></u--image>
+				<view class='icon-text'>{{item.remark?item.remark:'--'}}</view>
+			</view>
+		</view>
+	</view>
+</view>
+<view class="car-bottom flex">
+	<view class="left">
+		<image src="../../static/imgs/card/home.png" mode="widthFix" style="width: 32rpx;height: auto;"
+			@click="toHome(item)"></image>
+		<image src="../../static/imgs/card/share.png" mode="widthFix" style="width: 35rpx;height: auto;"
+			@click="share(item)"></image>
+		<image src="../../static/imgs/card/ewm.png" mode="widthFix" style="width: 32rpx;height: auto;"
+			@click="showCode(item)"></image>
+	</view>
+	<view class="right">
+		<text class="text" @click="topMarking(item)">置顶</text>
+		<text class="text" @click="del(item.id)">删除</text>
+		<text class="text" @click="toEditCard(item)">编辑</text>
+	</view>
+	<!-- <u-button text="置顶" @click="topMarking(item)" throttle-time='1000'></u-button> -->
+	<!-- <button @click="$u.debounce(topMarking, 500)">置顶</button> -->
+	<!-- <button @click="$u.debounce(topMarking(item), 500)">置顶</button> -->
+	<!-- <u-button text="删除" @click="del(item.id)" throttle-time='1000'></u-button> -->
+	<!-- <button @click="toEditCard(item)">编辑</button> -->
+</view>
+</view>
+</view>
+</view>
+<view class="upload flex flex-all-center" @click="addCard">
+	<view class="solids flex flex-all-center">
+		<image src="../../static/imgs/card/add.png" mode="widthFix" style="width: 148rpx;height: auto;">
+		</image>
+		<text class='text'>添加新名片</text>
+	</view>
+</view>
+</view>
+
+
+<u-toast ref="uToast"></u-toast>
+<u-popup :round='10' :show="isShowDel" @close="isShowDel=false" mode="center">
+	<view class="del-style">
+		<text class="title">删除名片自动退出关联得圈子，确定删除？</text>
+		<view class="">
+			<view @click='radiovalue=1' class="flex align-item-center radio-wrap">
+				<image style='width:13px;height:13px;margin-right:10rpx;'
+					:src="radiovalue==1?'../../static/imgs/mySet/checked.png':'../../static/imgs/mySet/not-checked.png'"
+					mode=""></image>
+				<view class="">仅从自己名片列表删除</view>
+			</view>
+			<view @click='radiovalue=2' class="flex align-item-center radio-wrap">
+				<image style='width:13px;height:13px;margin-right:10rpx;'
+					:src="radiovalue==2?'../../static/imgs/mySet/checked.png':'../../static/imgs/mySet/not-checked.png'"
+					mode=""></image>
+				<view class="">从所有拥有此名片用户列表删除</view>
+			</view>
+		</view>
+		<view class="flex footer">
+			<view class="cancel" @click="isShowDel=false">
+				取消
+			</view>
+			<view class="confirm" @click="delCard">
+				删除
+			</view>
+		</view>
 	</view>
+</u-popup>
+<u-popup :show="isShowCode" @close="isShowCode=false" mode="center" :round='10'>
+	<image style='margin:10px;height: auto;' :src="selectCode" mode="widthFix"></image>
+</u-popup>
+<u-popup :show="popupshow" :closeOnClickOverlay='true' :overlayOpacity='0.4' @close='handleHiddenShare' :round="10"
+	mode="bottom">
+	<view>
+		<view class="share-content">
+			<view class="block" @click="toUrl()">
+				<button class="moment">
+					<view class="iconfont icon-pengyouquan"></view>
+					<view style="font-size: 26rpx;">分享朋友圈</view>
+				</button>
+			</view>
+			<view class="block">
+				<button class="shareBtn" type="default" data-name="shareBtn" open-type="share">
+					<view class="iconfont icon-weixin"></view>
+					<view style="font-size: 26rpx;">分享微信好友</view>
+				</button>
+			</view>
+		</view>
+	</view>
+</u-popup>
+<!-- 生成图片 -->
+<poster :data="canvasData" background-color="#FFF" :width='750' :height='420' @on-success="posterSuccess" ref="poster"
+	@on-error="posterError"></poster>
+<point-share @close='showShare=false' :show='showShare'></point-share>
+</view>
 </template>
 
 <script>
@@ -281,16 +279,16 @@
 					icon: 'none',
 					duration: 10000
 				});
-			} 
+			}
 			this.userInfo = uni.getStorageSync("userInfo")
 			if (uni.getStorageSync("userInfo").phone) {
 				this.init()
 			} else {
 				uni.switchTab({
-					url:'/pages/cardHolder/cardHolder'
+					url: '/pages/cardHolder/cardHolder'
 				})
-			
-				
+
+
 			}
 
 		},
@@ -302,7 +300,7 @@
 			console.log("imageUrl", imageUrl)
 			if (res.from === 'button') {
 				let path = `/pages/cardHolder/scanCodeAddCard?id=${that.currectData.id}`
-				console.log("分享地址",path)
+				console.log("分享地址", path)
 				return {
 					title: this.popupshow ? `${that.currectData.name}分享的名片~` : '电子名片',
 					path: path,
@@ -460,20 +458,11 @@
 					},
 					{
 						type: 'image',
-						path: '../../static/imgs/card/bgc1.png',
+						path: '../../static/imgs/card/bgc6.png',
 						use: 'bg1',
 						x: 3,
 						y: 243,
-						width: 240,
-						height: 67
-					},
-					{
-						type: 'image',
-						path: '../../static/imgs/card/bgc2.png',
-						use: 'bg2',
-						x: 225,
-						y: 243,
-						width: 278,
+						width: 518,
 						height: 67
 					},
 					{
@@ -917,19 +906,22 @@
 
 		.car-bottom {
 			position: absolute;
-			bottom: 22rpx;
+			bottom: 27rpx;
 			left: 20rpx;
 			width: calc(100% - 40rpx);
+			background: url("../../static/imgs/card/bgc6.png") no-repeat center;
+			background-size: cover;
+			border-radius: 0 0 20rpx 20rpx;
 
 			.left {
 				position: absolute;
 				padding: 20rpx 0;
-				width: 305rpx;
+				width: 270rpx;
 				box-sizing: border-box;
 				display: flex;
 				justify-content: space-evenly;
-				background: url("../../static/imgs/card/bgc1.png") no-repeat center;
-				background-size: 100% 100%;
+				// background: url("../../static/imgs/card/bgc1.png") no-repeat center;
+				// background-size: 100% 100%;
 			}
 
 			.right {
@@ -941,8 +933,8 @@
 				box-sizing: border-box;
 				display: flex;
 				justify-content: space-evenly;
-				background: url("../../static/imgs/card/bgc2.png") no-repeat center;
-				background-size: 100% 100%;
+				// background: url("../../static/imgs/card/bgc2.png") no-repeat center;
+				// background-size: 100% 100%;
 
 				.text {
 					color: #fff;
@@ -1060,4 +1052,4 @@
 			color: #4977FC;
 		}
 	}
-</style>
+</style> -->