feat: 修复工作台卡片背景图并调整水印展示
@@ -26,7 +26,8 @@
|
|||||||
hover-class="menu-card--active"
|
hover-class="menu-card--active"
|
||||||
@click="navTo(item.url)"
|
@click="navTo(item.url)"
|
||||||
>
|
>
|
||||||
<image class="card-background" :src="item.backgroundImage" mode="aspectFill"></image>
|
<image class="card-background" :src="staticSrc(item.backgroundImage)" mode="aspectFit"></image>
|
||||||
|
<view class="card-scrim"></view>
|
||||||
<text class="card-mark">“</text>
|
<text class="card-mark">“</text>
|
||||||
<view class="card-content">
|
<view class="card-content">
|
||||||
<view class="card-title">{{ item.name }}</view>
|
<view class="card-title">{{ item.name }}</view>
|
||||||
@@ -147,6 +148,13 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
staticSrc(path) {
|
||||||
|
let base = '';
|
||||||
|
// #ifdef H5
|
||||||
|
base = (process.env.BASE_URL || '/').replace(/\/$/, '');
|
||||||
|
// #endif
|
||||||
|
return `${base}${path}`;
|
||||||
|
},
|
||||||
// 自定义扫码处理回调 - 处理本页面特有的扫码逻辑
|
// 自定义扫码处理回调 - 处理本页面特有的扫码逻辑
|
||||||
handleScanCode(scanResult) {
|
handleScanCode(scanResult) {
|
||||||
console.log('工作台-扫码结果:', scanResult);
|
console.log('工作台-扫码结果:', scanResult);
|
||||||
@@ -327,16 +335,29 @@ page {
|
|||||||
|
|
||||||
.card-background {
|
.card-background {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
top: 18rpx;
|
||||||
|
right: -4rpx;
|
||||||
|
width: 150rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
opacity: 0.72;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-scrim {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 100%;
|
bottom: 0;
|
||||||
height: 100%;
|
left: 0;
|
||||||
opacity: 0.72;
|
background: linear-gradient(105deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.02) 58%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-mark {
|
.card-mark {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
top: 10rpx;
|
top: 10rpx;
|
||||||
left: 18rpx;
|
left: 18rpx;
|
||||||
color: rgba(255, 255, 255, 0.2);
|
color: rgba(255, 255, 255, 0.2);
|
||||||
@@ -348,7 +369,7 @@ page {
|
|||||||
|
|
||||||
.card-content {
|
.card-content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 2;
|
||||||
right: 16rpx;
|
right: 16rpx;
|
||||||
bottom: 42rpx;
|
bottom: 42rpx;
|
||||||
left: 22rpx;
|
left: 22rpx;
|
||||||
@@ -374,7 +395,7 @@ page {
|
|||||||
|
|
||||||
.card-arrow {
|
.card-arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 3;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |