个人/中介页面二维码组件

2023-08-07 17:51:26 +08:00
parent 33c1d6e865
commit 7d0c5331d5
7 changed files with 183 additions and 8 deletions
--- a/src/components/seachModule/authenticationInfo.vue
+++ b/src/components/seachModule/authenticationInfo.vue
@@ -0,0 +1,126 @@
+<template>
+    <div class="info-box dis-f al-item" :class="{'intermediary-housing-s':path==='/intermediaryHousing'}">
+        <img src="../../assets/img/detail/authenticationInfoR.svg" v-if="path==='/personHousing'" class="tab-img" alt="">
+        <img src="../../assets/img/detail/authenticationInfoInte.svg" v-if="path==='/intermediaryHousing'" class="tab-img" alt="">
+        <div class="dis-f al-item">
+            <div class="tab-text">
+                <div class="dis-f al-item" v-for="(item, i) in tabText" :key="i" :class="{ 'mg-t-25': i > 0 }">
+                    <img src="../../assets/img/detail/authenticationInfoTab.svg" class="tab-icon" alt="" v-if="path==='/personHousing'">
+                    <img src="../../assets/img/detail/authenticationInfoInteTab.svg" class="tab-icon" alt="" v-if="path==='/intermediaryHousing'">{{ item }}
+                </div>
+            </div>
+            <div class="mg-l-100">
+                <div class="qr-code-bg dis-f jus-x al-item">
+                    <img src="https://app.gter.net/tenement/pc/api/qrcode?type=propertyAuth" v-if="path==='/personHousing'" class="qr-code" alt="">
+                    <img src="https://app.gter.net/tenement/pc/api/qrcode?type=middlemanAuth" v-if="path==='/intermediaryHousing'" class="qr-code" alt="">
+                </div>
+                <div class="code-text">
+                    微信扫码认证
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import {  } from 'vue'
+import { useRouter } from "vue-router";
+
+//路由
+let router=useRouter()
+let path = router.currentRoute.value.path
+
+let tabText=null
+path==='/personHousing'?tabText = ['认证标识', '发布更多房源', '求房源对接']:
+path==='/intermediaryHousing'?tabText = ['身份标识', '发布更多房源', '求房源对接']:[]
+
+
+</script>
+<style scoped lang="less">
+.dis-f {
+    display: flex;
+}
+
+.jus-x {
+    justify-content: center;
+}
+
+.al-item {
+    align-items: center;
+}
+
+img {
+    object-fit: contain;
+}
+
+.mg-t-25 {
+    margin-top: 25px;
+}
+
+.mg-l-100 {
+    margin-left: 100px;
+}
+.intermediary-housing-s{
+    background: #f1f5f7 !important;
+    border:1px solid #dbe7ed !important;
+}
+
+.info-box {
+    width: 462px;
+    height: 217px;
+    border-radius: 16px;
+    border: 1px solid #e4e4f6;
+    background: #f4f3ff;
+    position: relative;
+    padding:0 45px;
+
+    .tab-icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+    }
+
+    .tab-text {
+        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 16px;
+        color: #333;
+    }
+
+    .qr-code-bg {
+        width: 120px;
+        height: 120px;
+        background: inherit;
+        background-color: rgba(255, 255, 255, 1);
+        border: none;
+        border-radius: 70px;
+        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
+        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
+
+        .qr-code {
+            width: 102px;
+            height: 102px;
+            border-radius: 50%;
+        }
+    }
+
+    .code-text {
+        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 14px;
+        color: #7F7F7F;
+        text-align: center;
+        margin-top:15px;
+    }
+}
+
+.tab-img {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    right: -1px;
+    top: -1px;
+}</style>
+