首页

2023-07-10 11:44:41 +08:00
parent 444c6bb486
commit 8ceba4234d
52 changed files with 7263 additions and 5078 deletions
--- a/src/components/selectTabBox/selectTabBox.vue
+++ b/src/components/selectTabBox/selectTabBox.vue
@@ -0,0 +1,122 @@
+<template>
+    <div class="dis-f s-w-100">
+        <div class="select-box s-w-50 bor-r">
+            <div class="dis-f">
+                <div class="tab-title">地理位置</div>
+                <div class="tab-text">
+                    <div class="dis-f">
+                        <div class="btn  jus-x al-item dis-f" :class="{'btn-check':selectPosition==='region'}" @click="selectPosition='region'">按区域</div>
+                        <div class="btn  jus-x al-item dis-f" :class="{'btn-check':selectPosition==='school'}" @click="selectPosition='school'">按学校</div>
+                    </div>
+                    <div class="select-tab-info">
+                        <img src="../../assets/homeImage/checkBG.svg" class="img" alt="">
+                    </div>
+                </div>
+            </div>
+            <div></div>
+            <div></div>
+        </div>
+        <div>
+
+        </div>
+    </div>
+</template>
+  
+<script setup>
+import { ref } from 'vue';
+
+let selectPosition = ref('region')
+
+</script>
+<script>
+export default {
+    props: {
+
+    }
+}
+</script>
+<style scoped>
+.dis-f {
+    display: flex;
+}
+.jus-x{
+    justify-content: center;
+}
+.al-item{
+    align-items: center;
+}
+
+.s-w-100 {
+    width: 100%;
+}
+
+.bor-r {
+    border-right: 1px dashed #ebebeb;
+}
+
+.s-w-50 {
+    width: 50%;
+}
+img{
+    object-fit: contain;
+}
+
+.select-box {
+    display: flex;
+    padding: 20px;
+
+    .select-tab-info{
+        position: relative;
+        margin-top:5px;
+        .img{
+            width: 459px;
+            height:55px;
+        }
+    }
+
+    .tab-title {
+        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 14px;
+        color: #B5B5B5;
+        text-align: left;
+        height: 30px;
+        line-height: 30px;
+        margin-right: 35px;
+    }
+
+    .info-bor-b{
+        border-bottom:1px dashed #ebebeb;
+    }
+    .tab-text {
+        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 14px;
+        color: #7F7F7F;
+        text-align: center;
+        padding-bottom:10px;
+
+        .btn {
+            width: 70px;
+            height: 30px;
+            display: flex;
+            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-weight: 400;
+            font-style: normal;
+            font-size: 14px;
+            text-align: center;
+            line-height: 30px;
+            border-radius: 10px;
+            margin-right:30px;
+        }
+
+        .btn-check {
+            color: #50E3C2;
+            border:1px solid #50E3C2;
+        }
+    }
+}
+</style>
+