Basic profile
This commit is contained in:
Jan Groß
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<Designer msg="Midari profile designer"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import Designer from './components/Designer.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld
|
||||
Designer
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
BIN
src/assets/midari_overlay.png
Normal file
BIN
src/assets/midari_overlay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
src/assets/midari_panels.png
Normal file
BIN
src/assets/midari_panels.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
21
src/assets/midari_panels.svg
Normal file
21
src/assets/midari_panels.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 800 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g>
|
||||
<g id="TopBar" transform="matrix(7.20721,0,0,1.325,-79.2793,-24.85)">
|
||||
<rect x="11" y="58" width="111" height="40" style="fill-opacity:0.75;"/>
|
||||
</g>
|
||||
<g id="MainCard" transform="matrix(2.3908,0,0,3.80899,-63.8046,-414.112)">
|
||||
<path d="M130,148.662C130,147.193 128.1,146 125.759,146L47.241,146C44.9,146 43,147.193 43,148.662L43,232.338C43,233.807 44.9,235 47.241,235L125.759,235C128.1,235 130,233.807 130,232.338L130,148.662Z" style="fill-opacity:0.75;"/>
|
||||
</g>
|
||||
<g id="Description" transform="matrix(5.86207,0,0,1.07865,-0.0689655,-15.4831)">
|
||||
<path d="M130,155.792C130,150.388 129.193,146 128.198,146L44.802,146C43.807,146 43,150.388 43,155.792L43,225.208C43,230.612 43.807,235 44.802,235L128.198,235C129.193,235 130,230.612 130,225.208L130,155.792Z" style="fill-opacity:0.75;"/>
|
||||
</g>
|
||||
<g id="Badges" transform="matrix(5.86207,0,0,1.07865,-0.0689655,83.5169)">
|
||||
<path d="M130,156.173C130,150.558 129.161,146 128.128,146L44.872,146C43.839,146 43,150.558 43,156.173L43,224.827C43,230.442 43.839,235 44.872,235L128.128,235C129.161,235 130,230.442 130,224.827L130,156.173Z" style="fill-opacity:0.75;"/>
|
||||
</g>
|
||||
<g id="Showcase" transform="matrix(5.86207,0,0,1.58427,-0.0689655,108.697)">
|
||||
<path d="M130,152.767C130,149.032 129.181,146 128.171,146L44.829,146C43.819,146 43,149.032 43,152.767L43,228.233C43,231.968 43.819,235 44.829,235L128.171,235C129.181,235 130,231.968 130,228.233L130,152.767Z" style="fill-opacity:0.75;"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/user.webp
Normal file
BIN
src/assets/user.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
106
src/components/Designer.vue
Normal file
106
src/components/Designer.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="designer">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
HELO
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<div class="profile-container">
|
||||
<div class="profile">
|
||||
<svg class="overlay-panels" width="100%" height="100%" viewBox="0 0 800 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g>
|
||||
<g id="TopBar" transform="matrix(7.20721,0,0,1.325,-79.2793,-24.85)">
|
||||
<rect x="11" y="58" width="111" height="40" style="fill-opacity:0.75;"/>
|
||||
</g>
|
||||
<g id="MainCard" transform="matrix(2.3908,0,0,3.80899,-63.8046,-414.112)">
|
||||
<path d="M130,148.662C130,147.193 128.1,146 125.759,146L47.241,146C44.9,146 43,147.193 43,148.662L43,232.338C43,233.807 44.9,235 47.241,235L125.759,235C128.1,235 130,233.807 130,232.338L130,148.662Z" style="fill-opacity:0.75;"/>
|
||||
</g>
|
||||
<g id="Description" transform="matrix(5.86207,0,0,1.07865,-0.0689655,-15.4831)">
|
||||
<path d="M130,155.792C130,150.388 129.193,146 128.198,146L44.802,146C43.807,146 43,150.388 43,155.792L43,225.208C43,230.612 43.807,235 44.802,235L128.198,235C129.193,235 130,230.612 130,225.208L130,155.792Z" style="fill-opacity:0.75;"/>
|
||||
</g>
|
||||
<g id="Badges" transform="matrix(5.86207,0,0,1.07865,-0.0689655,83.5169)">
|
||||
<path d="M130,156.173C130,150.558 129.161,146 128.128,146L44.872,146C43.839,146 43,150.558 43,156.173L43,224.827C43,230.442 43.839,235 44.872,235L128.128,235C129.161,235 130,230.442 130,224.827L130,156.173Z" style="fill-opacity:0.75;"/>
|
||||
</g>
|
||||
<g id="Showcase" transform="matrix(5.86207,0,0,1.58427,-0.0689655,108.697)">
|
||||
<path d="M130,152.767C130,149.032 129.181,146 128.171,146L44.829,146C43.819,146 43,149.032 43,152.767L43,228.233C43,231.968 43.819,235 44.829,235L128.171,235C129.181,235 130,231.968 130,228.233L130,152.767Z" style="fill-opacity:0.75;"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="overlay-icons"></div>
|
||||
<img class="user-image" src="../assets/user.webp" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Designer',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
.profile-container {
|
||||
width: 800px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
resize: horizontal;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 16px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 62.5%;
|
||||
background-color: red;
|
||||
}
|
||||
.overlay-panels {
|
||||
position:absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.overlay-icons {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
background-size:cover;
|
||||
background-image: url('../assets/midari_overlay.png');
|
||||
}
|
||||
|
||||
.user-image {
|
||||
position: absolute;
|
||||
left: 1.5%;
|
||||
top: 2.2%;
|
||||
width: 14.5%;
|
||||
border-radius: 100%;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
g {
|
||||
fill: green;
|
||||
}
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user