【银保app】抽离服务页面样式 调整水印展示列数

This commit is contained in:
liu.xiaofeng@ebiz-digits.com
2022-12-01 14:07:34 +08:00
parent a7d7893392
commit 0765250565
3 changed files with 88 additions and 33 deletions

View File

@@ -11,7 +11,7 @@ let setWatermark = (str, str1) => {
}
let can = document.createElement('canvas')// 创建一个画布
can.width = 350 // 设置宽度
can.width = 180 // 设置宽度
can.height = 150 // 高度
let cans = can.getContext('2d')
@@ -21,17 +21,18 @@ let setWatermark = (str, str1) => {
cans.textAlign = 'left' // 设置文本内容的当前对齐方式
cans.textBaseline = 'Middle' // 设置在绘制文本时使用的当前文本基线
cans.globalAlpha = 0.1 // 透明度
cans.fillText(str, can.width / 4.5, can.height / 1) // 在画布上绘制填色的文本输出的文本开始绘制文本的X坐标位置开始绘制文本的Y坐标位置
// 在画布上绘制填色的文本输出的文本开始绘制文本的X坐标位置开始绘制文本的Y坐标位置
cans.fillText(str, can.width / 100, can.height / 1)
cans.fillText(str1, can.width / 3, can.height / 2.5) // 根据需求可添加多行水印在方法中添加str1
let div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.top = '100px'
div.style.left = '0px'
div.style.left = '-20px'
div.style.position = 'fixed'
div.style.zIndex = '100000'
div.style.width = document.documentElement.clientWidth - 30 + 'px'
div.style.width = document.documentElement.clientWidth + 'px'
div.style.height = document.documentElement.clientHeight + 'px'
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)

View File

@@ -65,7 +65,7 @@ switch (process.env.VUE_APP_FLAG) {
REQ_PWD = '41424344454631323334353637383930'
CACHE_ENCRYP = '41424344454631323334353637383930'
// YB_APP = 'http://10.10.100.98:7001'
// YB_APP = 'https://iagentsales.e-guofu.com/api/' + apiVersion
// YB_APP = 'https://iagentsales-test2.e-guofu.com:5200/api/v1'
YB_APP = 'https://iagentsales-test2.e-guofu.com:5200/api/'+apiVersion
API_VERSION = apiVersion
break

View File

@@ -1,55 +1,55 @@
<template>
<div class="public_container" style="position: relative;">
<p style="position: absolute;top: 50px;right: 15px;" @click="messageJump">
<img v-if="!messages" style="width:20px;" src="@/assets/YB_APP/images/3.png">
<img v-if="messages" style="width:20px;" src="@/assets/YB_APP/images/4.png">
<p class="messageIcon_con" @click="messageJump">
<img class="messageIcon_con_img" v-if="!messages" src="@/assets/YB_APP/images/3.png">
<img class="messageIcon_con_img" v-if="messages" src="@/assets/YB_APP/images/4.png">
</p>
<div class="head" style="color: #fff;font-size: 20px;padding-top: 50px;text-align: center;">
<div class="head">
<span>服务</span>
</div>
<div class="menu1" style="margin: 15px;background: #fff;border-radius: 5px;padding: 15px;margin-top: 25px;">
<p style="display:flex;align-items: center;margin-bottom: 15px;">
<img style="width:14px;" src="@/assets/YB_APP/images/15.png">
<span style="font-size: 16px;font-weight: bold;margin-left: 15px;">投保相关</span>
<div class="menu1">
<p class="menu1_p">
<img class="menu1_p_img" src="@/assets/YB_APP/images/15.png">
<span class="menu1_p_span">投保相关</span>
</p>
<div style="display:flex;justify-content: space-around;align-items: center;">
<div v-for="(item, ind) in menu1" :key="ind" @click="pageJump(item)" style="text-align: center;width: 25%;">
<div class="menu1_div">
<div v-for="(item, ind) in menu1" :key="ind" @click="pageJump(item)" class="menu1_div_div">
<div>
<img style="width: 34px;" :src="item.img">
<img class="menu1_div_div_img" :src="item.img">
</div>
<p style="margin-top:5px;">{{ item.title }}</p>
<p class="menu1_div_p">{{ item.title }}</p>
</div>
</div>
</div>
<div class="menu2" style="margin: 15px;background: #fff;border-radius: 5px;padding: 15px;margin-top: 25px;">
<p style="display:flex;align-items: center;margin-bottom: 15px;">
<img style="width:14px;" src="@/assets/YB_APP/images/16.png">
<span style="font-size: 16px;font-weight: bold;margin-left: 15px;">活动管理</span>
<div class="menu2">
<p class="menu2_p">
<img class="menu2_p_img" src="@/assets/YB_APP/images/16.png">
<span class="menu2_p_span">活动管理</span>
</p>
<div style="display:flex;justify-content: space-around;align-items: center;">
<div v-for="(item, ind) in menu2" :key="ind" @click="pageJump(item)" style="text-align: center;width: 25%;">
<div class="menu2_div">
<div v-for="(item, ind) in menu2" :key="ind" @click="pageJump(item)" class="menu2_div_div">
<div>
<img style="width: 34px;" :src="item.img">
<img class="menu2_div_div_img" :src="item.img">
</div>
<p style="margin-top:5px;">{{ item.title }}</p>
<p class="menu2_div_p">{{ item.title }}</p>
</div>
</div>
</div>
<div class="menu3" style="margin: 15px;background: #fff;border-radius: 5px;padding: 15px;margin-top: 25px;">
<p style="display:flex;align-items: center;margin-bottom: 15px;">
<img style="width:14px;" src="@/assets/YB_APP/images/21.png">
<span style="font-size: 16px;font-weight: bold;margin-left: 15px;">扩展服务</span>
<div class="menu3">
<p class="menu3_p">
<img class="menu3_p_img" src="@/assets/YB_APP/images/21.png">
<span class="menu3_p_span">扩展服务</span>
</p>
<div style="display:flex;justify-content: flex-start;align-items: center;">
<div v-for="(item, ind) in menu3" :key="ind" @click="pageJump(item)" style="text-align: center;width: 25%;">
<div class="menu3_div">
<div v-for="(item, ind) in menu3" :key="ind" @click="pageJump(item)" class="menu3_div_div">
<div>
<img style="width: 34px;" :src="item.img">
<img class="menu3_div_div_img" :src="item.img">
</div>
<p style="margin-top:5px;">{{ item.title }}</p>
<p class="menu3_div_p">{{ item.title }}</p>
</div>
</div>
</div>
@@ -154,4 +154,58 @@ export default {
background-repeat: no-repeat;
background-size: contain;
}
.messageIcon_con{
position: absolute;top: 50px;right: 15px;
}
.messageIcon_con_img{
width:20px;
}
.head{
color: #fff;font-size: 20px;padding-top: 50px;text-align: center;
}
.menu1,.menu2,.menu3{
margin: 15px;background: #fff;border-radius: 5px;padding: 15px;margin-top: 25px;
}
.menu1_p{
display:flex;align-items: center;margin-bottom: 15px;
}
.menu1_p_img{
width:14px;
}
.menu1_p_span{
font-size: 16px;font-weight: bold;margin-left: 15px;
}
.menu1_div,.menu2_div,.menu3_div{
display:flex;justify-content: space-around;align-items: center;
}
.menu1_div_div{
text-align: center;width: 25%;
}
.menu1_div_div_img{
width: 34px;
}
.menu1_div_p,.menu2_div_p,.menu3_div_p{
margin-top:5px;
}
.menu,.menu3{
margin: 15px;background: #fff;border-radius: 5px;padding: 15px;margin-top: 25px;
}
.menu2_p,.menu3_p{
display:flex;align-items: center;margin-bottom: 15px;
}
.menu2_p_img,.menu3_p_img{
width:14px;
}
.menu2_p_span,.menu3_p_span{
font-size: 16px;font-weight: bold;margin-left: 15px;
}
.menu2_div{
display:flex;justify-content: space-around;align-items: center;
}
.menu2_div_div,.menu3_div_div{
text-align: center;width: 25%;
}
.menu2_div_div_img,.menu3_div_div_img{
width: 34px;
}
</style>