|
|
<template> <div class="tabs_container"> <div :class="tabStore.activeTab == 1 ? 'tab_wrap active' : 'tab_wrap'" @click="changeTab(1)" > <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="25" height="25" viewBox="0 0 25 25" > <g> <g> <path d="M18.982599999999998,12.27498L18.9687,12.23331C18.9132,12.1222,18.8438,11.9972,18.7882,11.84442L18.704900000000002,11.63609C18.204900000000002,10.52498,17.691000000000003,9.64998,16.5521,8.511087L16.4687,8.427754C16.107599999999998,8.0527532,15.56597,7.9138648,15.06597,8.0527532C14.81597,8.108309,14.57986,8.247198,14.39931,8.427754C14.28819,8.552754,14.19097,8.691642,14.12153,8.84442C13.6632,8.511087,13.24653,8.524975,12.95486,8.566642L12.94097,8.566642C12.69097,8.622198000000001,12.45486,8.761087,12.27431,8.941642C12.09375,9.1222,11.96875,9.35831,11.91319,9.60831L11.91319,9.63609C11.74653,9.6222,11.56597,9.63609,11.41319,9.67775C11.16319,9.73331,10.92708,9.8722,10.74653,10.05275C10.6493,10.14998,10.56597,10.26109,10.51042,10.3722L8.56597,8.441642C8.49653,8.372198,8.3993,8.302754,8.37153,8.288865C8.03819,8.0527532,7.62153,7.9555313,7.21875,8.0388648L7.03819,8.0944201L6.954861,8.122198L6.84375,8.177753C6.774305,8.21942,6.704861,8.247198,6.635417,8.302754L6.579861,8.330531C6.524305,8.372198,6.482638,8.399975,6.427083,8.455531C5.857639,9.03886,5.857639,9.98331,6.427083,10.56664L9.99653,14.20553L9.12153,13.95553C8.76042,13.84442,8.35764,13.88609,7.99653,14.09442C7.67708,14.28886,7.44097,14.60831,7.34375,14.98331C7.1493,15.7472,7.60764,16.58053,8.35764,16.83053C8.6493,16.94164,10.92708,17.70553,11.92708,18.038899999999998C12.89931,18.3583,13.74653,18.525,14.46875,18.525C14.71875,18.525,14.95486,18.5111,15.17708,18.4694C15.88542,18.3444,16.204900000000002,18.052799999999998,16.2604,17.98331L18.482599999999998,15.70553C18.8993,15.27498,19.1493,14.7472,19.2187,14.13609C19.2743,13.56664,19.204900000000002,12.95553,18.982599999999998,12.27498ZM8.34375,15.2472C8.35764,15.16386,8.42708,15.08053,8.51042,15.02497C8.60764,14.96942,8.71875,14.95553,8.82986,14.9972L10.71875,15.51109C11.39931,15.71942,11.6632,15.44164,11.74653,15.26109C11.87153,15.05275,11.92708,14.69164,11.46875,14.21942L7.1632,9.83053C7.12153,9.78886,7.10764,9.7472,7.07986,9.69164C6.996529,9.46942,7.10764,9.23331,7.34375,9.13609C7.45486,9.10831,7.52431,9.10831,7.57986,9.10831C7.64931,9.1222,7.71875,9.16387,7.77431,9.21942L11.48264,13.01109C11.51042,13.03887,11.5382,13.05275,11.55208,13.06664C11.74653,13.20553,12.01042,13.19164,12.20486,13.02498L12.21875,13.01109C12.32986,12.89998,12.38542,12.73331,12.35764,12.59442C12.35764,12.4972,12.31597,12.39998,12.23264,12.28887L11.96875,12.02498L11.44097,11.48331C11.42708,11.46942,11.4132,11.45553,11.4132,11.44164C11.39931,11.42775,11.38542,11.39998,11.37153,11.38609C11.27431,11.21942,11.31597,11.01109,11.45486,10.88609C11.62153,10.71942,11.88542,10.71942,12.05208,10.88609L12.84375,11.69164L12.85764,11.70553C12.96875,11.80275,13.09375,11.84442,13.23264,11.83053C13.37153,11.81664,13.51042,11.76109,13.59375,11.64998C13.76042,11.45553,13.76042,11.16387,13.60764,10.95553L13.01042,10.34442C12.84375,10.16387,12.85764,9.89998,13.0382,9.73331C13.20486,9.56664,13.44097,9.56664,13.60764,9.73331L14.62153,10.76109C14.81597,10.95553,15.13542,10.96942,15.35764,10.77498L15.37153,10.76109C15.56597,10.56664,15.56597,10.21942,15.37153,10.01109L15.17708,9.81664C15.01042,9.63609,15.02431,9.3722,15.20486,9.20553C15.37153,9.03887,15.60764,9.03887,15.77431,9.20553L15.85764,9.28887C17.0243,10.48331,17.482599999999998,11.30275,17.8993,12.31664C17.941000000000003,12.42775,17.996499999999997,12.53886,18.0243,12.64998C18.357599999999998,13.69164,18.2743,14.48331,17.7604,14.9972L15.55208,17.2472Q15.37152,17.38609,14.94097,17.44164C14.24653,17.53887,13.31597,17.39998,12.2743,17.05276C9.49653,16.10831,8.87152,15.88609,8.70486,15.84442C8.42708,15.7472,8.28819,15.46942,8.34375,15.2472Z" :fill="tabStore.activeTab == 1 ? '#FFF' : '#565EE4'" fill-opacity="1" /> </g> <g> <ellipse cx="12.5" cy="12.5" rx="11.399999976158142" ry="11.399999976158142" fill-opacity="0" stroke-opacity="1" :stroke="tabStore.activeTab == 1 ? '#FFF' : '#565EE4'" fill="none" stroke-width="2.200000047683716" /> </g> </g> </svg> <p class="text">操作</p> </div> <div :class="tabStore.activeTab == 2 ? 'tab_wrap active' : 'tab_wrap'" @click="changeTab(2)" > <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24.5" height="24.5" viewBox="0 0 24.5 24.5" > <g> <path d="M14.735,11.5745C14.959,12.4215,14.7403,13.3612,14.0753,14.0245C13.083,15.0168,11.473,15.0168,10.4808,14.0245C9.4885,13.0322,9.4885,11.4222,10.4808,10.43C11.1982,9.7125,12.2395,9.51475,13.1372,9.835L22.3598,1.4595C22.848,0.973,23.464,0.79975,23.6548,0.98875C23.8892,1.22325,23.6705,1.7955,23.184,2.282L14.735,11.5745ZM12.25,3.0625C7.17675,3.0625,3.0625,7.17675,3.0625,12.25C3.0625,17.3232,7.17675,21.4375,12.25,21.4375C17.3232,21.4375,21.4375,17.3232,21.4375,12.25C21.4375,11.0442,21.1908,9.89975,20.769,8.8445L22.995,6.36475C23.9523,8.113,24.5,10.1168,24.5,12.25C24.5,19.0155,19.0155,24.5,12.25,24.5C5.4845,24.5,0,19.0155,0,12.25C0,5.4845,5.4845,0,12.25,0C14.441,0,16.4937,0.58275,18.2717,1.59075L15.8637,3.80625C14.7542,3.33025,13.5345,3.0625,12.25,3.0625Z" :fill="tabStore.activeTab == 2 ? '#FFF' : '#565EE4'" fill-opacity="1" /> </g> </svg> <p class="text">测试</p> </div> <div :class="tabStore.activeTab == 3 ? 'tab_wrap active' : 'tab_wrap'" @click="changeTab(3)" > <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24" > <g> <path d="M6.54521,10.9091L17.4548,10.9091L17.4548,13.0909L6.54521,13.0909L6.54521,10.9091ZM12,21.8182C17.4226,21.8182,21.8192,17.4223,21.8192,11.9987C21.8192,6.57505,17.4226,2.17913,12,2.17913C6.57744,2.17913,2.18084,6.57505,2.18084,11.9987C2.18084,17.4223,6.57744,21.8182,12,21.8182ZM12,24C5.37153,24,0,18.6275,0,11.9987C0,5.37249,5.37153,0,12,0C18.6285,0,24,5.37249,24,12.0013C24,18.6275,18.6285,24,12,24Z" :fill="tabStore.activeTab == 3 ? '#FFF' : '#565EE4'" fill-opacity="1" /> </g> </svg> <p class="text">排液氮</p> </div> <EjectLiquid v-if="ejectModalVisible" :handleModalVisible="handleModalVisible" /> <LoginModal v-if="loginVisible" :handleModalVisible="handleLoginVisible" /> </div></template>
<script setup>import EjectLiquid from 'cpns/modals/EjectLiquid'import { useRouter } from 'vue-router'import { useTabStore } from '@/store'import LoginModal from 'cpns/modals/LoginModal'import { ref } from 'vue'
const router = useRouter()const tabStore = useTabStore()
const ejectModalVisible = ref(false)const loginVisible = ref(false)
const handleLoginVisible = () => { loginVisible.value = false}
const handleModalVisible = () => { ejectModalVisible.value = false tabStore.updateActiveTab(tabStore.preActiveTab)}const changeTab = index => { tabStore.updateActiveTab(index) if (index == 1) { router.push('/') tabStore.updatePreActiveTab(1) } if (index == 2) { if (tabStore.isLogin) { tabStore.updatePreActiveTab(2) router.push('/test') } else { loginVisible.value = true } } if (index == 3) { ejectModalVisible.value = true }}</script>
<style lang="scss" scoped>.tabs_container { width: 760px; height: 90px; border-radius: 45px; background: #f0f6fb; display: flex; align-items: center; box-sizing: border-box; padding: 10px; .tab_wrap { width: 246px; height: 70px; border-radius: 35px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; .text { font-family: Source Han Sans CN; font-size: 24px; font-weight: 500; line-height: normal; letter-spacing: 0.04em; color: #565ee4; margin-left: 10px; } } .active { background: linear-gradient(180deg, #616af6 15%, #424bde 87%); border: 2px solid #6e75f2; box-shadow: 0px 4px 6px 0px rgba(30, 39, 122, 0.3), inset 0px 4px 10px 0px rgba(30, 46, 186, 0.3); .text { color: #fff; } }}</style>
|
