FINI/fini-ui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

iopProject

Browse Source
This commit is contained in:
zhuzhuxia233
2023-04-12 14:40:19 +08:00
commit 54bc2204dc
133 changed files with 35706 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/login/modelComponents/Drawer.vue
+176
View File
@@ -0,0 +1,176 @@
<template>
<div class="wrap">
<div class="imgWrap">
<img src="@/assets/1x/1x/source8.png" alt="menu" >
</div>
<div class="nav">
<li :class="state == 1 && 'active'" @click="setState(1)" >
<img src="@/assets/1x/source10.png" alt="menu">
<span>Home</span>
</li>
<li :class="state == 2 && 'active'" @click="setState(2)">
<img src="@/assets/1x/source5.png" alt="menu">
<span>Dashboard</span>
</li>
<li :class="state == 3 && 'active'" class="IPO" @click="setState(3)">
<div class="ipoWrap">
<div>
<img src="@/assets/1x/source2.png" alt="menu">
<span>IPO Reference Data</span>
</div>
<div class="arrow" :style="{ transform: state == 3 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
<img src="@/assets/1x/source11.png" alt="" class="icon">
</div>
</div>
<div class="report" v-if="state == 3">
<span>report</span>
<img src="@/assets/1x/source3.png" alt="">
</div>
</li>
<li :class="state == 4 && 'active'" @click="setState(4)">
<img src="@/assets/1x/source6.png" alt="menu">
<span>IPO Calendar</span>
</li>
<li :class="state == 5 && 'active'" @click="setState(5)" class="IPO">
<div class="ipoWrap">
<div>
<img src="@/assets/1x/1x/source6.png" alt="menu">
<span>Languages</span>
</div>
<div class="arrow" :style="{ transform: state == 5 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
<img src="@/assets/1x/source11.png" alt="">
</div>
</div>
<div class="lang" v-if="state == 5">
<li>English</li>
<li>简体中文</li>
<li>繁體中文</li>
</div>
</li>
</div>
</div>
</template>
<script lang="ts">
export default {
name: "drawer",
};
</script>
<script lang="ts" setup>
import { ref } from "vue"
const state = ref(1)
// const drawer = ref(true)
const setState = (number: number) => {
state.value = number;
}
// const openDrawer = () => {
// drawer.value = false;
// }
</script>
<style lang="scss" scoped>
.wrap {
width: 80vw;
transform: translateX(-20rem);
.imgWrap {
margin-top: 30rem;
width: 25rem;
height: 20rem;
margin-left: 15rem;
img {
width: 100%;
height: 100%;
}
}
.nav {
height: fit-content;
margin-top: 20rem;
width: 100%;
>li {
display: flex;
align-items: center;
justify-self: center;
min-height: 50rem;
padding-left: 15rem;
margin-top: 10rem;
background-color: #B4C0C7;
&.active {
background-color: #fff;
}
img {
width: 22rem;
height: 22rem;
}
span {
margin-left: 25rem;
font-size: 20rem;
font-weight: 700;
color: #1C3F56;
}
}
.IPO {
flex-direction: column;
justify-content: center;
height: fit-content;
.lang {
margin-left: -90rem;
color: #1C3F56;
font-size: 18rem;
>li {
line-height: 24rem;
}
}
.report {
margin-left: -120rem;
span {
margin-right: 10rem;
}
}
.ipoWrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.arrow {
width: 12rem;
height: 19rem;
margin-right: 14rem;
img {
width: 100%;
height: 100%;
}
}
}
span {
display: inline-block;
transform: translateY(-3rem);
}
}
}
}
</style>