扫码详情

src/views/enforce/enterpriseScanPreview.vue

@@ -30,19 +30,45 @@
 			  </span>
             </div>
 				</div>
-				<div class="boutique_box">
-					<div class="boutique_body">
-						
-            <div class="box-qr-code" @click="toSign">
-            </div>
-			</div>
-          
-			</div>
+        <div class="tab-nav">
+          <ul>
+            <!-- data-id对li元素添加自定义id属性 -->
+            <li class="active" data-id="0">企业画像</li>
+            <li data-id="1">企业预警</li>
+          </ul>
+        </div>
+        <div class="tab-content">
+          <div class="item active">1</div>
+          <div class="item">2</div>
+
+        </div>
+
+
     </div>
 		</div>
 	</div>
 </template>
 
+<script>
+//利用css样式进行变换
+//#region
+const Nav = document.querySelectorAll(".tab-nav li")
+for (let i = 0; i < Nav.length; i++) {
+  Nav[i].addEventListener('click',function(){
+    //寻找class='.active'的结构，并将结构中的该类名取消
+    document.querySelector('.tab-nav .active').classList.remove('active')
+    //在对点击对象的li中添加active类名，实现字体变色等css样式
+    this.classList.add('active')
+    //同样移除tab-content结构中的active类名
+    document.querySelector('.tab-content .active').classList.remove('active')
+    //再对tab-content结构中item的第几个div添加active类名，实现图片的出现和消失
+    //注意nth-child（）中的值必须从1开始（不要了解可以去看css的伪类选择器），i是从0开始，故要+1
+    document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
+  })
+}
+//#endregion
+</script>
+
 <script setup name="Home">
 import {getEnterpriseMerchantAuthorization} from '@/api/Home';
 import {queryEarlyWarning} from '../../api/enforce';
@@ -193,61 +219,6 @@ const goBack = () => {
       display: flex;
       justify-content: center;
 		};
-    .box-qr-code{
-      width: 52%;
-      text-align: right;
-      height: 7rem;
-      //background-color: var(--van-primary-color);
-      background: url("../../assets/images/scan-btn.jpg") no-repeat center center;
-      background-size: 100%;
-      // border-radius: 0.26667rem;
-      // background-size: cover;
-      // border-radius: 50%;
-      // background-image: url("@/assets/images/scan.png");
-      .box-qr-code-text{
-        margin-right: 25%;
-        margin-top: 70%;
-        display: block;
-        font-size: 0.45333rem;
-      }
-      img{
-        position: absolute;
-        top: 0%;
-        left: 34%;
-      }
-    }
-    .box-info{
-      width: 52%;
-      text-align: right;
-      height: 3.66667rem;
-      background-color: #ff976a;
-      border-radius: 10px;
-      background: url("@/assets/images/item_check.png");
-      background-size: cover;
-      
-      .box-info-text{
-        margin-right: 3%;
-        margin-top: 2%;
-        display: block;
-        font-size: 17px
-      }
-    }
-    .box-complaint{
-      width: 36%;
-      text-align: right;
-      height: 3.66667rem;
-      background-color: #ff976a;
-      border-radius: 10px;
-      margin-left: 2%;
-      background: url("@/assets/images/item_complain.png");
-      background-size: cover;
-      .box-complaint-text{
-        margin-right: 5%;
-        margin-top: 3%;
-        display: block;
-        font-size: 17px
-      }
-    }
 	}
 
 	.recommend_box {
@@ -272,4 +243,54 @@ const goBack = () => {
   text-align: center;
   line-height: 3;
 }
+
+
+.tab-nav {
+  display: flex;
+  justify-content: center;
+  margin: 5% 2%;
+  width: 96%;
+  height: 1.25rem;
+}
+
+.tab-nav ul {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  list-style: none;
+}
+.tab-nav ul li {
+  display: inline-block;
+  margin: 0 2%;
+  padding: 0;
+  width: 47%;
+  height: 100%;
+  color: #1367fe;
+  font-size: 0.45rem;
+  line-height: 1.25rem;
+  border-radius: 0.2rem;
+  text-align: center;
+  background-color: #e7efff;
+  color: #1367fe;
+}
+
+.tab-nav ul li.active {
+  color: #fff;
+  background: #1367fe;
+}
+
+.tab-content {
+  position: relative;
+  width: 100%;
+  height: 50vh;
+  background-color: aquamarine;
+  margin: 2%;
+}
+.item {
+  display: none;
+  width: 100%;
+  height: 100%;
+}
 </style>