整体样式调整

components/tabBar/index.vue

@@ -57,28 +57,19 @@ export default {
   }
 }
 </script>
-
 <style lang="less">
 .tabBar {
   width: 100%;
   height: 93px;
-  // position: fixed;
-  // bottom: 0;
-  // left: 0;
+  background-color: #fff;
   .tabBarItem {
     height: 93px;
-
     .icon {
       width: 25px;
       height: 25px;
     }
   }
-
 }
-
-// 	:deep(.u-tabbar__content__item-wrapper) {
-// 	height: 93px !important;
-// }
 ::v-deep .u-tabbar__content__item-wrapper {
   height: 93px !important;
 }

components/yx-navbar/yx-navbar.less

@@ -1,104 +1,110 @@
-.narBarCon{
-	width: 100%;
-	.topBarCon{
-		width: 100%;
-		height:176rpx;
-		background-image:url('../../static/img/bg.png');
-		background-size: 100% 100%;
-		background-repeat: no-repeat;
-		position: relative;
-		.itemCon{
-			color: #fff;
-			width: 100%;
-			height: 60rpx;
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			padding: 0  40rpx;
-			box-sizing: border-box;
-			position: absolute;
-			left: 0;
-			bottom: 20rpx;
-			.leftIcon{
-				width: 10%;
-			}
-			.title{
-				width: 78%;
-				text-align: center;
-				font-size: 36rpx;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-			.rightIcon{
-				width: 12%;
-				.yuan{
-					margin-left: 20rpx;
-					width: 52rpx;
-					height: 52rpx;
-					background-color: #fff;
-					border-radius: 50%;
-					display: flex;
-					flex-direction: row;
-					align-items: center;
-					justify-content: center;
-				}
-	
-			}
-		}
-	}
-	.searchOptions{
-		width: 100%;
-		height: auto;
-		position: absolute;
-		margin-top: 0px;
-		z-index: 999;
-		display: flex;
-		flex-direction: column;
-		background-color: #fff;
-		.myList{
-			width: 100%;
-			height: 100rpx;
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-around;
-			border-bottom: 1px solid #ccc;
-			.name{
-				width: 70%;
-				font-size: 28rpx;
-			}
-		}
-	}
-	.addMenuCon{
-		position: absolute;
-		z-index: 99;
-		right: 20rpx;
-		top: 175rpx;
-		width: 210rpx;
-		height: 310rpx;
-		background-color: #444;
-		border-radius: 12rpx;
-		color: white;
-		font-size: 28rpx;
-	}
-	.addMenuCon::after {
-	    content: '';
-	    position: absolute;
-	    top: -10rpx;
-	    left: 60%;
-	    width: 0;
-	    height: 0;
-	    border-left: 10rpx solid transparent;
-	    border-right: 10rpx solid transparent;
-	    border-bottom: 10rpx solid #444;
-	}
-	.addMenuConZhe{
-		position: absolute;
-		z-index: 90;
-		width: 100vw;
-		height: 100vh;
-		top: 0;
-		left: 0;
-	}
+.narBarCon {
+  width: 100%;
+  position: relative;
+  .topBarCon {
+    width: 100%;
+    height: 176rpx;
+    background-image: url('../../static/img/bg.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: relative;
+    .itemCon {
+      color: #fff;
+      width: 100%;
+      height: 60rpx;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 0 40rpx;
+      box-sizing: border-box;
+      position: absolute;
+      left: 0;
+      bottom: 20rpx;
+      .leftIcon {
+        width: 10%;
+      }
+      .title {
+        width: 78%;
+        text-align: center;
+        font-size: 36rpx;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .rightIcon {
+        width: 12%;
+        .yuan {
+          margin-left: 20rpx;
+          width: 52rpx;
+          height: 52rpx;
+          background-color: #fff;
+          border-radius: 50%;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+        }
+
+      }
+    }
+  }
+  .searchOptions {
+    width: 100%;
+    height: auto;
+    position: absolute;
+    margin-top: 0px;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    .myList {
+      width: 100%;
+      height: 100rpx;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-around;
+      border-bottom: 1px solid #ccc;
+      .name {
+        width: 70%;
+        font-size: 28rpx;
+      }
+    }
+  }
+  .addMenuCon {
+    position: absolute;
+    z-index: 99;
+    right: 20rpx;
+    top: 175rpx;
+    width: 210rpx;
+    height: 310rpx;
+    background-color: #444;
+    border-radius: 12rpx;
+    color: white;
+    font-size: 28rpx;
+  }
+  .addMenuCon::after {
+    content: '';
+    position: absolute;
+    top: -10rpx;
+    left: 60%;
+    width: 0;
+    height: 0;
+    border-left: 10rpx solid transparent;
+    border-right: 10rpx solid transparent;
+    border-bottom: 10rpx solid #444;
+  }
+  .addMenuConZhe {
+    position: absolute;
+    z-index: 90;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+  }
+  .u-icon {
+    position: absolute;
+    right: 13px;
+    bottom: 13px;
+  }
 }

components/yx-navbar/yx-navbar.vue

@@ -72,6 +72,7 @@
 			
 		</view>
 		<view class="addMenuConZhe" v-if="addMenuShow" v-on:touchstart="addMenuShow=false;searchToolList=[]"/>
+		<u-icon name="close-circle" size="22" color="#fff"></u-icon>
 	</view>
 </template>
 

pages/home/apps.vue

@@ -3,13 +3,17 @@
     <yx-navbar :isBack="false" title="移动应用"></yx-navbar>
     <view class="pageIndex">
       <view class="tabs">
-        <view class="tab" :class="tabIndex == 0 ? 'active' : ''" @click="onClickTab(0)">系统应用</view>
-        <view class="tab" :class="tabIndex == 1 ? 'active' : ''" @click="onClickTab(1)">我的应用</view>
+        <view class="tab" :class="tabIndex == 0 ? 'active' : ''" @click="onClickTab(0)">
+          <text>系统应用</text>
+        </view>
+        <view class="tab" :class="tabIndex == 1 ? 'active' : ''" @click="onClickTab(1)">
+          <text>我的应用</text>
+        </view>
       </view>
       <view class="search">
         <u-search
           placeholder="请输入应该名称" v-model="params.appName" :show-action="false"
-          search-icon-color='#eb5a10' bg-color="#fff" @change="onSearch"
+          bg-color="#f6f6f6" @change="onSearch" shape="square"
         ></u-search>
       </view>
       <scroll-view class="content" scroll-y @scrolltolower="getData(false)">
@@ -17,10 +21,10 @@
           <view class="infoList" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
             <img v-if="item.appIcon" class="infoImg" :src="item.appIcon" alt="">
             <img v-else class="infoImg" src="../../static/img/no-bg-img.jpg" alt="">
-            <view class="infoRight">
+            <view class="info-box">
               <view class="name">{{ item.appName }}</view>
               <view class="describe">{{ item.appDescription }}</view>
-              <view class="infoBottom">
+              <view class="info">
                 <view class="num"><i class="el-icon-view"></i> 访问量:0</view>
                 <view class="dateTime">{{ item.date }}</view>
               </view>

pages/home/home.less

@@ -2,104 +2,106 @@
   width: 100%;
   height: 100vh;
   overflow: hidden;
-
   .pageIndex {
     width: 100%;
     height: calc(100vh - 190px);
-    padding: 10px 10px 0;
+    padding: 0 10px;
     box-sizing: border-box;
-
+    background-color: #fff;
     .tabs {
-      height: 32px;
-      border: 1px solid #EB5A10;
-      border-radius: 5px;
-      color: #EB5A10;
+      height: 40px;
+      border-bottom: 1px solid #f0f0f0;
+      color: #333;
       display: flex;
       justify-content: space-between;
       align-items: center;
-
       .tab {
         width: 50%;
-        text-align: center;
+        display: flex;
+        justify-content: center;
         height: 100%;
         font-size: 14px;
-        line-height: 32px;
+        line-height: 40px;
+        font-weight: 600;
+        text {
+          position: relative;
+          height: 100%;
+          &:before {
+            content: '';
+            position: absolute;
+            bottom: -1rpx;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background-color: #EB5A10;
+            visibility: hidden;
+          }
+        }
       }
-
       .active {
-        background-color: #EB5A10;
-        color: #fff;
+        color: #EB5A10;
+        text {
+          &:before {
+            visibility: visible;
+          }
+        }
       }
     }
-
     .search {
-      margin: 14px 0 10px;
+      margin: 10px 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
+      .icon {
+        width: 30px;
+        height: 30px;
+        margin-left: 6px;
+      }
     }
-
     .content {
       height: calc(100% - 90px);
       box-sizing: border-box;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
-
       .main {
-        overflow-y: hidden;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        align-items: start;
+        gap: 10px;
+        padding-bottom: 5px;
       }
-
       .infoList {
-        height: 130px;
-        overflow: hidden;
-        border-radius: 10px;
+        border-radius: 5px;
         background-color: #fff;
-        padding: 10px;
         box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 10px;
-
+        overflow: hidden;
+        border: 1px solid #f0f0f0;
         .infoImg {
-          height: 100%;
-          width: 170px;
-          margin-right: 10px;
+          width: 100%;
+          height: 90px;
         }
-
-        .infoRight {
-          flex: 1;
-          width: calc(100% - 180px);
-          position: relative;
-
+        .info-box {
+          line-height: 20px;
+          font-size: 12px;
+          color: #999999;
+          padding: 0 10px 5px;
           .name {
-            font-size: 16px;
-            // font-weight: 600;
+            line-height: 24px;
+            font-size: 14px;
+            font-weight: 600;
             color: #161616;
             overflow: hidden; //超出隐藏
             text-overflow: ellipsis; //超出文本设置为...
-            // white-space: normal;
-            -webkit-box-orient: vertical; //从顶部向底部垂直布置子元素
-            -webkit-line-clamp: 2; //设置div1的文本为2行
             white-space: nowrap;
           }
-
-          .describe,
-          .infoBottom {
-            font-size: 12px;
-            color: #999999;
-            max-height: 60px;
-            overflow: hidden;
-            line-height: 20px;
-          }
-
           .describe {
-            margin: 5px 0;
+            height: 20px;
+            overflow: hidden; //超出隐藏
+            text-overflow: ellipsis; //超出文本设置为...
+            white-space: nowrap;
           }
-
-          .infoBottom {
-            width: 100%;
-            position: absolute;
-            bottom: 0;
+          .info {
+            height: 20px;
             display: flex;
             justify-content: space-between;
             align-content: center;

pages/home/home.vue

@@ -2,37 +2,42 @@
   <view class="pageHome">
     <yx-navbar :isBack="false" title="企业看板"></yx-navbar>
     <view class="pageIndex">
-      <view class="tabs">
-        <view class="tab" :class="tabIndex === 0 ? 'active' : ''" @click="onClickTab(0)">可视化大屏</view>
-        <view class="tab" :class="tabIndex === 1 ? 'active' : ''" @click="onClickTab(1)">自助报表</view>
-      </view>
-      <view class="search">
-        <u-icon name="list" size='35' @click="showCategory=true"></u-icon>
-        <u-search
-          :placeholder="placeholder" v-model="params.title" :show-action="false"
-          search-icon-color='#eb5a10' bg-color="#fff" @change="onSearch"
-        ></u-search>
-      </view>
-      <scroll-view class="content" scroll-y @scrolltolower="getData(false)">
-        <view class="main" v-if="dataList.length > 0">
-          <view class="infoList" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
-            <img v-if="item.backgroundUrl" class="infoImg" :src="item.backgroundUrl" alt="">
-            <img v-else class="infoImg" src="../../static/img/no-bg-img.jpg" alt="">
-            <view class="infoRight">
-              <view class="name">{{ item.title }}</view>
-              <view class="describe">所属分类：{{ item.categoryName }}</view>
-              <view class="infoBottom">
-                <view class="num"><i class="el-icon-view"></i> 访问量:{{ item.count }}</view>
-                <view class="dateTime">{{ item.date }}</view>
+        <view class="tabs">
+          <view class="tab" :class="tabIndex === 0 ? 'active' : ''" @click="onClickTab(0)">
+            <text>可视化大屏</text>
+          </view>
+          <view class="tab" :class="tabIndex === 1 ? 'active' : ''" @click="onClickTab(1)">
+            <text>自助报表</text>
+          </view>
+        </view>
+        <view class="search">
+          <u-search
+            :placeholder="placeholder" v-model="params.title" :show-action="false"
+            bg-color="#f6f6f6" @change="onSearch" shape="square"
+          ></u-search>
+          <img class="icon" src="../../static/img/cate.png" alt="" @click="showCategory=true">
+        </view>
+        <scroll-view class="content" scroll-y @scrolltolower="getData(false)">
+          <view class="main" v-if="dataList.length > 0">
+            <view class="infoList" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
+              <img v-if="item.backgroundUrl" class="infoImg" :src="item.backgroundUrl" alt="">
+              <img v-else class="infoImg" src="../../static/img/no-bg-img.jpg" alt="">
+              <view class="info-box">
+                <view class="name">{{ item.title }}</view>
+                <view class="describe">所属分类：{{ item.categoryName }}</view>
+                <view class="info">
+                  <view class="num"><i class="el-icon-view"></i> 访问量:{{ item.count }}</view>
+                  <view class="dateTime">{{ item.date }}</view>
+                </view>
               </view>
             </view>
           </view>
-        </view>
-        <template v-if="!loading&&!dataList.length">
-          <image v-if="params.title" src="../../static/img/no-search.png" style="width: 100%" mode="aspectFit"></image>
-          <image v-else src="../../static/img/no-data.png" style="width: 100%" mode="aspectFit"></image>
-        </template>
-      </scroll-view>
+          <template v-if="!loading&&!dataList.length">
+            <image v-if="params.title" src="../../static/img/no-search.png" style="width: 100%"
+                   mode="aspectFit"></image>
+            <image v-else src="../../static/img/no-data.png" style="width: 100%" mode="aspectFit"></image>
+          </template>
+        </scroll-view>
     </view>
     <u-picker :show="showCategory" :columns="categoryList" confirmColor="#eb5a10" @cancel="showCategory=false"
               closeOnClickOverlay @close="showCategory=false" key-name="categoryValue" @change="onCategoryChange"

pages/home/me.vue

@@ -3,25 +3,29 @@
     <yx-navbar :isBack="false" title="我的看板"></yx-navbar>
     <view class="pageIndex">
       <view class="tabs">
-        <view class="tab" :class="tabIndex === 0 ? 'active' : ''" @click="onClickTab(0)">可视化大屏</view>
-        <view class="tab" :class="tabIndex === 1 ? 'active' : ''" @click="onClickTab(1)">自助报表</view>
+        <view class="tab" :class="tabIndex === 0 ? 'active' : ''" @click="onClickTab(0)">
+          <text>可视化大屏</text>
+        </view>
+        <view class="tab" :class="tabIndex === 1 ? 'active' : ''" @click="onClickTab(1)">
+          <text>自助报表</text>
+        </view>
       </view>
       <view class="search">
-        <u-icon name="list" size='35' @click="showCategory=true"></u-icon>
         <u-search
           :placeholder="placeholder" v-model="params.title" :show-action="false"
-          search-icon-color='#eb5a10' bg-color="#fff" @change="onSearch"
+          bg-color="#f6f6f6" @change="onSearch" shape="square"
         ></u-search>
+        <img class="icon" src="../../static/img/cate.png" alt="" @click="showCategory=true">
       </view>
       <scroll-view class="content" scroll-y @scrolltolower="getData(false)">
         <view class="main" v-if="dataList.length > 0">
           <view class="infoList" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
             <img v-if="item.backgroundUrl" class="infoImg" :src="item.backgroundUrl" alt="">
             <img v-else class="infoImg" src="../../static/img/no-bg-img.jpg" alt="">
-            <view class="infoRight">
+            <view class="info-box">
               <view class="name">{{ item.title }}</view>
               <view class="describe">所属分类：{{ item.categoryName }}</view>
-              <view class="infoBottom">
+              <view class="info">
                 <view class="num"><i class="el-icon-view"></i> 访问量:{{ item.count }}</view>
                 <view class="dateTime">{{ item.date }}</view>
               </view>

pages/home/share.vue

@@ -3,13 +3,17 @@
     <yx-navbar :isBack="false" title="分享给我"></yx-navbar>
     <view class="pageIndex">
       <view class="tabs">
-        <view class="tab" :class="tabIndex == 0 ? 'active' : ''" @click="onClickTab(0)">可视化大屏</view>
-        <view class="tab" :class="tabIndex == 1 ? 'active' : ''" @click="onClickTab(1)">自助报表</view>
+        <view class="tab" :class="tabIndex == 0 ? 'active' : ''" @click="onClickTab(0)">
+          <text>可视化大屏</text>
+        </view>
+        <view class="tab" :class="tabIndex == 1 ? 'active' : ''" @click="onClickTab(1)">
+          <text>自助报表</text>
+        </view>
       </view>
       <view class="search">
         <u-search
           :placeholder="placeholder" v-model="params.name" :show-action="false"
-          search-icon-color='#eb5a10' bg-color="#fff" @change="onSearch"
+          bg-color="#f6f6f6" @change="onSearch" shape="square"
         ></u-search>
       </view>
       <scroll-view class="content" scroll-y @scrolltolower="getData(false)">
@@ -17,9 +21,9 @@
           <view class="infoList" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
             <img v-if="item.visualData.backgroundUrl" class="infoImg" :src="item.visualData.backgroundUrl" alt="">
             <img v-else class="infoImg" src="../../static/img/no-bg-img.jpg" alt="">
-            <view class="infoRight">
+            <view class="info-box">
               <view class="name">{{ item.visualData.title }}</view>
-              <view class="infoBottom">
+              <view class="info">
                 <view class="num"><i class="el-icon-view"></i> 访问量:{{ item.count }}</view>
                 <view class="dateTime">{{ item.date }}</view>
               </view>