<template> <view class="page"> <u-navbar :title="title" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36' :title-bold='true' height='45' id="navbar"> </u-navbar> <view class="tit"> 邀请好友认养蜂箱 </view> <view class="img"> <view class="qrbpx"> <view class="tips"> 用微信扫一扫 </view> <view class="imgs"> </view> <view class="code"> 编码16895634218 </view> </view> <view class="share"> <view class="share_li" style="margin-left: 136rpx;"> <image src="https://api.ccttiot.com/smartmeter/img/static/un17gT0JM8FjA6xk5kpe" mode=""></image> <view class="txt"> 存入相册 </view> </view> <view class="share_li" style="margin-right: 136rpx;"> <image src="https://api.ccttiot.com/smartmeter/img/static/upmGmVeLxK5WI3OR8TOi" mode=""></image> <view class="txt"> 微信好友 </view> </view> </view> </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: " #FFD34D", }, title: "认养邀请", } }, onLoad() { }, onShow() { }, methods: { shareImg(){ wx.downloadFile({ url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',//分享的图片的链接 success: (res) => { wx.showShareImageMenu({ path: res.tempFilePath }) } }) }, } } </script> <style lang="scss"> page { background-color: #fff; background-image: url('https://api.ccttiot.com/smartmeter/img/static/uvGHxEbHxpMUf9RnG7dZ'); background-size: cover; /* 确保背景图覆盖整个区域 */ background-repeat: no-repeat; /* 防止背景图重复 */ background-position: center; } .page { width: 750rpx; .tit{ margin: 76rpx auto; width: 316rpx; height: 54rpx; font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; font-weight: 500; font-size: 40rpx; color: #FFFFFF; line-height: 54rpx; text-align: center; font-style: normal; text-transform: none; } .img{ margin: 0 auto; width: 624rpx; height: 1030rpx; background-image: url('https://api.ccttiot.com/smartmeter/img/static/usiti6HV7sOrG5UnWecR'); background-size: cover; /* 确保背景图覆盖整个区域 */ background-repeat: no-repeat; /* 防止背景图重复 */ background-position: center; padding-top: 230rpx; .share{ margin-top: 56rpx; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; .share_li{ display: flex; flex-wrap: wrap; width: 112rpx; image{ margin-left: 24rpx; width: 62rpx; height: 62rpx; } .txt{ margin-top: 10rpx; width: 112rpx; font-weight: 500; font-size: 28rpx; color: #FFD045; } } } .qrbpx{ padding:26rpx 68rpx ; margin-left: 64rpx; width: 496rpx; height: 596rpx; background: #FFFFFF; box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.3); border-radius: 40rpx 40rpx 40rpx 40rpx; .tips{ margin: auto; width: 214rpx; height: 50rpx; font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; font-weight: 600; font-size: 36rpx; color: #3D3D3D; line-height: 50rpx; text-align: center; font-style: normal; text-transform: none; } .imgs{ margin-top: 16rpx; width: 364rpx; height: 364rpx; background: #3D3D3D; } .code{ margin-top: 34rpx; width: 100%; text-align: center; font-weight: 600; font-size: 36rpx; color: #3D3D3D; } } } } </style>