TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

修改文字

Browse Source
This commit is contained in:
zhangmanman
2021-09-27 12:12:50 +08:00
parent 9e9fc63c1b
commit 3e3215df42
9 changed files with 129 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
pages/instrument/Spread.vue
View File

@@ -1,29 +1,27 @@
<template>
<view class="content">
<view class="codeContent">
<!-- <image class="codeContent-back" src="../../static/icons/store_codeBack.png" mode="widthFix"></image> -->
<image class="codeContent-cont" src="../../static/icons/store_contBack.png" mode="widthFix"></image>
<view class="textContent">
<view class="company">
<image class="company-logo" :src="companyInfo.cover" mode="aspectFill"></image>
<view class="company-cont">
<view class="nowrap company-name">{{companyInfo.name}}</view>
<view class="company-tips">易货平台</view>
<view class="codeTop">
<image class="codeTop-cover" :src="companyInfo.cover" mode="aspectFill"></image>
<view class="codeTop-title">
<view class="codeTop-name">
{{companyInfo.name}}
</view>
<view class="codeTop-tips">
邀请你 加入链商星球
</view>
</view>
<view class="code">
<image class="code-img" :src="companyInfo.code" mode="aspectFit"></image>
<!-- <view class="code-text">简单扫一扫，即可进入平台</view> -->
</view>
<!-- @click="shareCanvas" -->
<view class="codeBnt">
扫码推广
</view>
<view class="codeCode">
<!-- <image class="codeImg-code" :src="companyInfo.code" mode="aspectFill"></image> -->
<!-- 先默认死数据 -->
<image class="codeImg-code" src="/static/user/wallet-code.png" mode="aspectFill"></image>
<view class="codeImg-text">
长按二维码，进行保存
</view>
</view>
</view>
<canvas class="codeImg" canvas-id="qrcodeCard"></canvas>
<!-- <canvas class="codeImg" canvas-id="qrcodeCard"></canvas> -->
</view>
</template>
@@ -37,6 +35,7 @@
},
created() {
companiesCode().then(res=>{
console.log(res.code)
this.companyInfo = res
})
},
@@ -153,75 +152,62 @@
.codeContent {
position: relative;
width: 100%;
height: 100vh;
.codeContent-back {
width: 100%;
height: 100%;
z-index: 1;
left: 0;
right: 0;
top: 0;
.codeTop {
position: absolute;
}
.codeContent-cont {
left: 5%;
top: 240rpx;
width: 90%;
top: 100px;
z-index: 2;
position: absolute;
}
.codeContent-tips {
position: absolute;
top: 0;
right: 20rpx;
width: 200rpx;
z-index: 2;
}
.textContent {
position: absolute;
padding: 20rpx 20rpx 0 40rpx;
background-color: #FFFFFF;
border-radius: 30rpx;
padding: 0 50rpx;
box-sizing: border-box;
width: 70%;
z-index: 3;
left: 15%;
right: 15%;
top: 140px;
}
.company {
width: 100%;
.company-logo {
box-shadow: 0 0 40rpx rgba(94,59,201,.5);
z-index: 2;
display: flex;
height: 200rpx;
.codeTop-cover {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin: 40rpx 30rpx 0 0;
border: 4rpx solid #FFFFFF;
box-shadow: 0 5rpx 10rpx rgba(94,59,201,.3);
}
.company-cont {
position: absolute;
width: 100%;
height: 230rpx;
left: 0;
top: 0;
padding: 20rpx 20rpx 30rpx 210rpx;
font-size: $title-size;
.company-name {
.codeTop-title {
padding-top: 50rpx;
.codeTop-name {
font-weight: 600;
margin: 10rpx 0;
font-size: 36rpx;
margin-bottom: 10rpx;
}
.company-tips {
font-size: 26rpx;
color: #787878;
.codeTop-tips {
color: $text-gray-m;
}
}
}
.code {
.codeCode {
background-color: #FFFFFF;
box-shadow: 0 0 40rpx rgba(27, 0, 111,.4);
position: absolute;
padding: 400rpx 0 200rpx;
left: 10%;
top: 160rpx;
width: 80%;
border-radius: 30rpx;
z-index: 1;
text-align: center;
width: 100%;
box-sizing: border-box;
margin-bottom: $margin;
.code-img {
width: 90%;
.codeImg-code {
width: 360rpx;
height: 360rpx;
margin: 0 0 20rpx;
border: 2px solid #f3f3f3;
}
.code-text {
color: #787878;
margin-top: $margin - 10;
font-size: $title-size;
.codeImg-text {
font-size: 32rpx;
color: $text-color;
}
}
}