Changed image to svg
This commit is contained in:
parent
e4109e8b16
commit
2d1cc47268
5 changed files with 181 additions and 7 deletions
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<div class="image--wrap flex-divided-view">
|
||||
<img src="../../login.png" alt="Signup" />
|
||||
<div class="image--wrap">
|
||||
<div class="image">
|
||||
<img src="./assets/top-left.svg" class="top-left absolute" />
|
||||
<img src="./assets/center.svg" class="union-center absolute" />
|
||||
<img src="./assets/bottom-right.svg" class="bottom-right absolute" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -10,11 +14,36 @@ export default {};
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.image--wrap {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1;
|
||||
background: #56b9fc;
|
||||
|
||||
img {
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.image {
|
||||
.top-left {
|
||||
width: 24rem;
|
||||
height: 24rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.union-center {
|
||||
width: 100rem;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: 0 var(--space-larger);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.bottom-right {
|
||||
width: 32rem;
|
||||
height: 32rem;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M800 0H600V200H400V400H200V600H0V800H200H400H600H800V600V400V200V0Z" fill="#2773E4" fill-opacity="0.42"/>
|
||||
</svg>
|
After Width: | Height: | Size: 262 B |
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 7 MiB |
|
@ -0,0 +1,3 @@
|
|||
<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M200 0H0V200V400V600H200V400H400V200H600V0H400H200Z" fill="#2773E4" fill-opacity="0.42"/>
|
||||
</svg>
|
After Width: | Height: | Size: 246 B |
|
@ -7,7 +7,7 @@
|
|||
--w-75: #D6EBFF;
|
||||
--w-100: #C2E1FF;
|
||||
--w-200: #99CEFF;
|
||||
--w-300: ##70BAFF;
|
||||
--w-300: #70BAFF;
|
||||
--w-400: #47A6FF;
|
||||
--w-500: #1F93FF;
|
||||
--w-600: #1976CC;
|
||||
|
|
Loading…
Reference in a new issue