feat: 修改图片显示问题
BIN
components/CommonPane/img/临时用电.png
Normal file
|
After Width: | Height: | Size: 208 B |
BIN
components/CommonPane/img/动土作业.png
Normal file
|
After Width: | Height: | Size: 8.4 KiB |
BIN
components/CommonPane/img/动火作业.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
components/CommonPane/img/吊装作业.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
components/CommonPane/img/有限空间.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
components/CommonPane/img/高处作业.png
Normal file
|
After Width: | Height: | Size: 249 B |
@@ -12,13 +12,15 @@
|
|||||||
<!-- 遍历渲染业务图标 -->
|
<!-- 遍历渲染业务图标 -->
|
||||||
<view class="item u-flex-col" v-for="(item,index) in cardData" :key="index" @click="clickItem(item)">
|
<view class="item u-flex-col" v-for="(item,index) in cardData" :key="index" @click="clickItem(item)">
|
||||||
<view class="item-icon" :style="{ background: item.iconBackground || '#008cff' }">
|
<view class="item-icon" :style="{ background: item.iconBackground || '#008cff' }">
|
||||||
|
|
||||||
|
<image class="item-img" :src="`/static/image/${item.name}.png`"></image>
|
||||||
<!-- 使用 iconify-icon 渲染 ep 系列图标 -->
|
<!-- 使用 iconify-icon 渲染 ep 系列图标 -->
|
||||||
<iconify-icon
|
<!-- <iconify-icon
|
||||||
:icon="item.icon"
|
:icon="item.icon"
|
||||||
color="#ffffff"
|
color="#ffffff"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"
|
||||||
></iconify-icon>
|
></iconify-icon> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="item-title u-m-t-8">{{item.name}}</view>
|
<view class="item-title u-m-t-8">{{item.name}}</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -184,6 +186,10 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.item-img {
|
||||||
|
width: 60%;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
.more {
|
.more {
|
||||||
background: #ececec;
|
background: #ececec;
|
||||||
|
|||||||
13
index.html
@@ -13,19 +13,6 @@
|
|||||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||||
</script>
|
</script>
|
||||||
<!-- 引入 Iconify 核心库(新增) -->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
|
|
||||||
<!-- 引入 Element Plus 图标集(ep 系列,新增) -->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@iconify/icons-ep@1.2.4/es/ep.min.js"></script>
|
|
||||||
<!-- 全局注册 iconify-icon 组件(新增) -->
|
|
||||||
<script>
|
|
||||||
// 确保 DOM 加载完成后注册组件,避免兼容性问题
|
|
||||||
window.onload = function() {
|
|
||||||
if (window.customElements && !window.customElements.get('iconify-icon')) {
|
|
||||||
customElements.define('iconify-icon', IconifyIcon);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<!-- <title>
|
<!-- <title>
|
||||||
<%= htmlWebpackPlugin.options.title %>
|
<%= htmlWebpackPlugin.options.title %>
|
||||||
</title> -->
|
</title> -->
|
||||||
|
|||||||
@@ -16,13 +16,14 @@
|
|||||||
@click="handelClick(item)">
|
@click="handelClick(item)">
|
||||||
<!-- 渲染图标 -->
|
<!-- 渲染图标 -->
|
||||||
<view class="item-icon" :style="{ background: item.iconBackground || '#008cff' }">
|
<view class="item-icon" :style="{ background: item.iconBackground || '#008cff' }">
|
||||||
|
<image class="item-img" :src="`/static/image/${item.name}.png`"></image>
|
||||||
<!-- 使用 iconify-icon 渲染 ep 系列图标 -->
|
<!-- 使用 iconify-icon 渲染 ep 系列图标 -->
|
||||||
<iconify-icon
|
<!-- <iconify-icon
|
||||||
:icon="item.icon"
|
:icon="item.icon"
|
||||||
color="#ffffff"
|
color="#ffffff"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"
|
||||||
></iconify-icon>
|
></iconify-icon> -->
|
||||||
</view>
|
</view>
|
||||||
<!-- 渲染名称 -->
|
<!-- 渲染名称 -->
|
||||||
<text class="u-font-24 u-line-1 item-text">{{item.name}}</text>
|
<text class="u-font-24 u-line-1 item-text">{{item.name}}</text>
|
||||||
@@ -272,7 +273,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.menu-v {
|
.menu-v {
|
||||||
// 原有样式...
|
|
||||||
|
|
||||||
.workFlow-list {
|
.workFlow-list {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
@@ -311,6 +311,11 @@
|
|||||||
margin-bottom: 10rpx;
|
margin-bottom: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-img {
|
||||||
|
width: 60%;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
// 文字样式
|
// 文字样式
|
||||||
.item-text {
|
.item-text {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
|
|||||||
BIN
static/image/临时用电.png
Normal file
|
After Width: | Height: | Size: 208 B |
BIN
static/image/动土作业.png
Normal file
|
After Width: | Height: | Size: 8.4 KiB |
BIN
static/image/动火作业.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
static/image/吊装作业.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
static/image/有限空间.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
static/image/高处作业.png
Normal file
|
After Width: | Height: | Size: 249 B |