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>
|
<template>
|
||||||
<div class="image--wrap flex-divided-view">
|
<div class="image--wrap">
|
||||||
<img src="../../login.png" alt="Signup" />
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -10,11 +14,36 @@ export default {};
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.image--wrap {
|
.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;
|
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-75: #D6EBFF;
|
||||||
--w-100: #C2E1FF;
|
--w-100: #C2E1FF;
|
||||||
--w-200: #99CEFF;
|
--w-200: #99CEFF;
|
||||||
--w-300: ##70BAFF;
|
--w-300: #70BAFF;
|
||||||
--w-400: #47A6FF;
|
--w-400: #47A6FF;
|
||||||
--w-500: #1F93FF;
|
--w-500: #1F93FF;
|
||||||
--w-600: #1976CC;
|
--w-600: #1976CC;
|
||||||
|
|
Loading…
Reference in a new issue