静态页面

src/pages/ShouYe/index.css

@@ -256,6 +256,12 @@
 .ShouYe > view.flex-item > .PageContainer .Content > view > .OwnerContainer > view .OwnerList > view {
   position: relative;
 }
+.ShouYe > view.flex-item > .PageContainer .Content > view > .OwnerContainer > view .OwnerList > view image {
+  height: 60px;
+  width: auto;
+  display: block;
+  margin: 0 auto 10px;
+}
 .ShouYe > view.flex-item > .PageContainer .Content > view > .OwnerContainer > view .OwnerList > view text {
   display: block;
   width: 100%;
@@ -264,12 +270,6 @@
   color: #333;
   line-height: 40px;
 }
-.ShouYe > view.flex-item > .PageContainer .Content > view > .OwnerContainer > view .OwnerList > view text.iconfont {
-  color: #f35844;
-  font-size: 60px;
-  line-height: 70px;
-  margin-bottom: 10px;
-}
 .ShouYe > view.flex-item > .PageContainer .Content > view > .NewsContainer {
   padding: 0 30px;
   position: relative;

src/pages/ShouYe/index.jsx

@@ -18,11 +18,11 @@ export default function Index (props) {
 
   const { user } = useModel('user')
   const [OwnerList] = useState([
-    { icon: 'iconjiaofei', name: '物业缴费', id: 1, router: '/pages/WuYe/index', setName: 'WuYeNavId', setValue: '4', isTab: true },
-    { icon: 'icontongzhi', name: '物业通知', id: 2, router: '/pages/WuYe/index', setName: 'WuYeNavId', setValue: '1', isTab: true },
-    { icon: 'iconbaoxiu', name: '物业报修', id: 3, router: '/pages/WuYe/index', setName: 'WuYeNavId', setValue: '3', isTab: true },
-    { icon: 'iconrenzheng', name: '业主认证', id: 4, router: '/pages/WoDe/WoDeRenZheng/index', isTab: false },
-    { icon: 'iconguanjia', name: '生活管家', id: 5, router: '/pages/WuYe/ShengHuoGuanJia/index', isTab: false, bold: true }
+    { icon: require('@/assets/img/icon1.png'), name: '物业缴费', id: 1, router: '/pages/WuYe/index', setName: 'WuYeNavId', setValue: '4', isTab: true },
+    { icon: require('@/assets/img/icon2.png'), name: '物业通知', id: 2, router: '/pages/WuYe/index', setName: 'WuYeNavId', setValue: '1', isTab: true },
+    { icon: require('@/assets/img/icon3.png'), name: '物业报修', id: 3, router: '/pages/WuYe/index', setName: 'WuYeNavId', setValue: '3', isTab: true },
+    { icon: require('@/assets/img/icon4.png'), name: '业主认证', id: 4, router: '/pages/WoDe/WoDeRenZheng/index', isTab: false },
+    { icon: require('@/assets/img/icon5.png'), name: '生活管家', id: 5, router: '/pages/WuYe/ShengHuoGuanJia/index', isTab: false, bold: true }
   ])
   const [NavList] = useState([
     { icon: 'iconhuodong1', name: '活动', id: 1, router: '/pages/ShouYe/HuoDong/index', isTab: false },
@@ -263,7 +263,8 @@ export default function Index (props) {
                         {
                           OwnerList.map((item, index) => (
                             <view className='flex-item' key={`Owners-${index}`} onClick={OwnerClick(item)}>
-                              <Text className={`iconfont ${item.icon}`} style={{ fontWeight: item.bold !== undefined && item.bold === true ? 'bold' : 'normal' }}></Text>
+                              {/* <Text className={`iconfont ${item.icon}`} style={{ fontWeight: item.bold !== undefined && item.bold === true ? 'bold' : 'normal' }}></Text> */}
+                              <image mode='heightFix' src={item.icon.default}></image>
                               <view>
                                 <view><Text>{item.name}</Text></view>
                               </view>

src/pages/ShouYe/index.less

@@ -330,6 +330,13 @@
                   >view {
                     position: relative;
 
+                    image {
+                      height: 60px;
+                      width: auto;
+                      display: block;
+                      margin: 0 auto 10px;
+                    }
+
                     text {
                       display: block;
                       width: 100%;
@@ -337,13 +344,6 @@
                       font-size: 26px;
                       color: #333;
                       line-height: 40px;
-
-                      &.iconfont {
-                        color: #f35844;
-                        font-size: 60px;
-                        line-height: 70px;
-                        margin-bottom: 10px;
-                      }
                     }
                   }
                 }