修改预警信息(tab闪烁）

src/views/enforce/enterpriseScanPreview.vue

@@ -2,12 +2,11 @@
 	<div class="home app_content">
 		<!-- 导航栏 -->
 		<div class="header_body">
-		
       <header-nav
 				:slefBack="true"
 				@goBack="goBack"
 				:titelText="`企业详情`"
-			>
+      >
 			</header-nav>
 		</div>
 
@@ -15,15 +14,33 @@
 		<!-- 中间 -->
 		<div class="warp_body">
 			<div class="white-body">
-			<van-tabs v-model:active="active">
-				<van-tab title="企业画像">
-					<enterpriseBaseInfo></enterpriseBaseInfo>
-				</van-tab>
-
-        <van-tab title="企业预警"  class="header-box" />
+    <div class="tabs">
+        <ul>
+          <li v-for='(item,index) in data.list' @click='check(index)' :class="{ active: index === data.TabId }">
+            <span v-if="index === 0"> {{item.title}}</span>
+            <span v-else-if="index === 1 || item.warningLevel==0" class="warn-tab"> {{item.title}}</span>
+            <span v-else-if="index === 1 || item.warningLevel==1" class="warn-tab level1"> {{item.title}}</span>
+            <span v-else-if="index === 1 || item.warningLevel==2" class="warn-tab level2"> {{item.title}}</span>
+            <span v-else-if="index === 1 || item.warningLevel==3" class="warn-tab level3"> {{item.title}}</span>
+          </li>
+        </ul>
+      </div>
+        <div v-if="data.TabId === 0">
+          <enterpriseBaseInfo></enterpriseBaseInfo>
+        </div>
+        <div v-if="data.TabId === 1">
           <enterpriseWarningInfo></enterpriseWarningInfo>
+        </div>
+
+<!--			<van-tabs v-model:active="active">-->
+<!--				<van-tab title="企业画像">-->
+<!--					<enterpriseBaseInfo></enterpriseBaseInfo>-->
+<!--				</van-tab>-->
 
-			</van-tabs>
+<!--        <van-tab title="企业预警"  class="header-box" />-->
+<!--          <enterpriseWarningInfo></enterpriseWarningInfo>-->
+
+<!--			</van-tabs>-->
 
 		</div>
 	</div>
@@ -52,7 +69,19 @@ const data = reactive({
 	// enterpriseNumber:"a7cbb677c11e4dffa810b4ad3abedc09$eb020e1a24a8a19a0bdc07b191aa9ce7",
 	enterpriseNumber:route?.query?.enterpriseNumber,
 	warningInfo:{},
-	searchParam:{}
+	searchParam:{},
+  status:0,
+  TabId: 0,
+  list: [
+    {
+      title: '企业画像',
+      value: '0'
+    },
+    {
+      title: '企业预警',
+      value: '1'
+    },
+  ]
 });
 const boutiqueAttr = reactive({
 	columnNum: 4,
@@ -60,7 +89,9 @@ const boutiqueAttr = reactive({
 	goodsCradclass: "boutique-crad",
 }); // 商品卡片展示
 
-
+const check = (index) =>{
+  data.TabId = index;
+};
 
 // 返回首页
 const toEnforceHomeView = () =>{
@@ -170,37 +201,106 @@ const goBack = () => {
   font-size: 0.5rem;
 }
 
-/deep/ .van-tabs__wrap {
-  padding: 2% 3%;
+///deep/ .van-tabs__wrap {
+//  padding: 2% 3%;
+//}
+//
+///deep/ .van-tab:nth-child(1) {
+//  color: #4aa1f9;
+//  background: url("../../assets/images/tab_bg1_1.png") no-repeat;
+//  background-size: 100% 100%;
+//}
+//
+///deep/ .van-tab:nth-child(1).van-tab--active {
+//  color: #fff;
+//  background: url("../../assets/images/tab_bg1.png") no-repeat;
+//  background-size: 100% 100%;
+//}
+//
+///deep/ .van-tab:nth-child(2) {
+//  color: #4aa1f9;
+//  background: url("../../assets/images/tab_bg.png") no-repeat;
+//  background-size: 100% 100%;
+//  animation: test 1000ms infinite;
+//    -webkit-animation: test 1000ms infinite;
+//}
+//
+///deep/ .van-tab:nth-child(2).van-tab--active {
+//  color: #fff;
+//  background: url("../../assets/images/tab_bg_1.png") no-repeat;
+//  background-size: 100% 100%;
+//}
+///deep/ .van-tabs__line {
+//  background-color: transparent;
+//}
+
+.tabs {
+  padding: 3% 3%;
+  width: 94%;
+  height: 1.25rem;
+  box-sizing: content-box;
+}
+
+.tabs ul {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  font-size: 0.4rem;
+  line-height: 1.25rem;
+  text-align: center;
+  align-content: center;
+  justify-items: center;
 }
 
-/deep/ .van-tab:nth-child(1) {
+.tabs ul li {
+  float: left;
+  width: 50%;
+  height: 100%;
+}
+
+.tabs ul li span {
+  display: block;
+  width: 100%;
+  height: 100%;
   color: #4aa1f9;
   background: url("../../assets/images/tab_bg1_1.png") no-repeat;
   background-size: 100% 100%;
 }
 
-/deep/ .van-tab:nth-child(1).van-tab--active {
-  color: #fff;
+.tabs ul li.active span {
   background: url("../../assets/images/tab_bg1.png") no-repeat;
   background-size: 100% 100%;
+  color: #fff;
 }
 
-/deep/ .van-tab:nth-child(2) {
-  color: #4aa1f9;
+.tabs ul li span.warn-tab {
+  margin-left: -2%;
   background: url("../../assets/images/tab_bg.png") no-repeat;
   background-size: 100% 100%;
-  animation: test 1000ms infinite;
-    -webkit-animation: test 1000ms infinite;
 }
 
-/deep/ .van-tab:nth-child(2).van-tab--active {
-  color: #fff;
+.tabs ul li.active span.warn-tab {
   background: url("../../assets/images/tab_bg_1.png") no-repeat;
   background-size: 100% 100%;
+  color: #fff;
+}
+
+.tabs ul li span.level1 {
+  background: url("../../assets/images/tab_shine_red.gif") no-repeat !important;
+  background-size: 100% 100% !important;
+  color: #fff !important;
 }
-/deep/ .van-tabs__line {
-  background-color: transparent;
+
+.tabs ul li span.level2 {
+  background: url("../../assets/images/tab_shine_org.gif") no-repeat !important;
+  background-size: 100% 100% !important;
+  color: #fff !important;
+}
+
+.tabs ul li span.level3 {
+  background: url("../../assets/images/tab_shine_yel.gif") no-repeat !important;
+  background-size: 100% 100% !important;
+  color: #fff !important;
 }
 
 .addinfo {