[Component] add EventBlock for Agenda
This commit is contained in:
Tony Yang
parent
71358b34bd
commit
f3b42b5914
GPG Key ID:
D88388851C28715D
3
src/assets/images/arrow-left.svg
Normal file
3
src/assets/images/arrow-left.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="74.204" height="98.826" viewBox="0 0 74.204 98.826">
|
||||
<path fill="#1060ff" d="M146.837 161.345l22.812-22.812-19.928-19.928a6.763 6.763 0 0 0-9.559 0l-42.736 42.74a6.757 6.757 0 0 0 0 9.559l42.568 42.568a6.757 6.757 0 0 0 9.559 0l19.928-19.928-22.644-22.644a6.763 6.763 0 0 1 0-9.555z" transform="translate(-95.445 -116.627)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 384 B |
3
src/assets/images/arrow-right.svg
Normal file
3
src/assets/images/arrow-right.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="74.204" height="98.826" viewBox="0 0 74.204 98.826">
|
||||
<path fill="#1060ff" d="M220.093 161.177l-42.568-42.572a6.763 6.763 0 0 0-9.559 0l-19.928 19.928 22.644 22.644a6.759 6.759 0 0 1 0 9.556l-22.812 22.812 19.93 19.927a6.757 6.757 0 0 0 9.559 0l42.736-42.74a6.753 6.753 0 0 0-.002-9.555z" transform="translate(-147.87 -116.627)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 388 B |
3
src/assets/images/event-block-bg.svg
Normal file
3
src/assets/images/event-block-bg.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="216.324" height="216.324" viewBox="0 0 216.324 216.324">
|
||||
<path fill="#1060ff" d="M270.137 214.144l-49.566-49.566-43.62-43.62a14.8 14.8 0 0 0-20.924 0l-93.548 93.554a14.79 14.79 0 0 0 0 20.924l93.179 93.179a14.79 14.79 0 0 0 20.924 0l43.62-43.62 49.934-49.934a14.8 14.8 0 0 0 .001-20.917z" transform="translate(-58.143 -116.627)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 389 B |
16
src/assets/images/group.svg
Normal file
16
src/assets/images/group.svg
Normal file
@ -0,0 +1,16 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="105.871" height="92.748" viewBox="0 0 105.871 92.748">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-2{fill:#1060ff;stroke:#fff;stroke-width:3.5px}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Group_540" opacity="0.3" transform="translate(-126.894 -400.496)">
|
||||
<g id="Group_92" transform="translate(143.99 402.246)">
|
||||
<path id="Path_383" d="M179.22 450.7c-8.739 0-17.086-2.021-23.505-5.693-7.839-4.482-12.335-11.238-12.335-18.534s4.5-14.052 12.335-18.534c6.419-3.67 14.766-5.691 23.505-5.691s17.085 2.021 23.5 5.691c7.839 4.482 12.335 11.238 12.335 18.534s-4.5 14.052-12.335 18.534c-6.42 3.67-14.762 5.693-23.5 5.693zm0-31.015c-12.484 0-18.4 5.445-18.4 6.788s5.918 6.789 18.4 6.789 18.4-5.445 18.4-6.789-5.92-6.79-18.4-6.79z" class="cls-2" transform="translate(-143.38 -402.246)"/>
|
||||
</g>
|
||||
<g id="Group_93" transform="translate(128.673 445.406)">
|
||||
<path id="Path_384" d="M223.192 438.249c-3.057-3.235-5.611 1.516-8.116 4.88-3.321 4.46-11.068 9.493-18.615 10.916a37.429 37.429 0 0 1-13.794 0c1.529 8.213-2.845 11.857-2.845 11.857a39.3 39.3 0 0 0 15.22 15.176c5.919 3.215 9.737 2.471 12.973 1.048s2.544-6.977 2.544-6.977 4.594-.236 6.966-3.32-.711-8.062-.711-8.062 4.979-1.185 5.437-5.705-1.643-6.625-1.643-6.625 6.825-8.7 2.584-13.188z" class="cls-2" transform="translate(-122.266 -437.17)"/>
|
||||
<path id="Path_385" d="M173.586 454.045a37.429 37.429 0 0 1-13.794 0c-7.547-1.423-15.294-6.455-18.615-10.916-2.505-3.364-5.059-8.115-8.115-4.88-4.243 4.489 2.585 13.188 2.585 13.188s-2.1 2.1-1.643 6.625 5.438 5.705 5.438 5.705-3.083 4.98-.712 8.062 6.966 3.32 6.966 3.32-.693 5.553 2.544 6.977 7.054 2.167 12.973-1.048a39.3 39.3 0 0 0 15.22-15.176s-4.376-3.644-2.847-11.857z" class="cls-2" transform="translate(-131.673 -437.17)"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
14
src/assets/images/guide-outline.svg
Normal file
14
src/assets/images/guide-outline.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="73.621" height="94.167" viewBox="0 0 73.621 94.167">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-2{fill:none;stroke:#fff;stroke-width:3.5px}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Guide_outline" opacity="0.3" transform="translate(-324.946 -220.658)">
|
||||
<g id="Group_95" transform="translate(326.696 237.248)">
|
||||
<path id="Rectangle_189" d="M0 0H10.423V75.826H0z" class="cls-2" transform="translate(56.632)"/>
|
||||
<path id="Path_386" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5px" d="M335.075 259.877l56.632 22.208v-44.416z" transform="translate(-335.075 -236.451)"/>
|
||||
</g>
|
||||
<ellipse id="Ellipse_13" cx="8.278" cy="7.62" class="cls-2" rx="8.278" ry="7.62" transform="translate(380.262 222.408)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 845 B |
3
src/assets/images/lightning-outline.svg
Normal file
3
src/assets/images/lightning-outline.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="44.299" height="82.48" viewBox="0 0 44.299 82.48">
|
||||
<path fill="none" stroke="#fff" stroke-width="5px" d="M331.807 398.336h32.662l-15.836 25.636 11.392 12.83-30.046 40.012 14.357-36.914-16.984-12.4z" opacity="0.3" transform="translate(-324.652 -395.836)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 314 B |
3
src/assets/images/stall-outline.svg
Normal file
3
src/assets/images/stall-outline.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="66.419" height="67.359" viewBox="0 0 66.419 67.359">
|
||||
<path fill="none" stroke="#fefefe" stroke-width="5px" d="M186.072 98.126a13.924 13.924 0 0 0-7.162-7.8 11.178 11.178 0 1 0-11.753 0 13.924 13.924 0 0 0-7.162 7.8h-12V71.065h-9.543V87.85h7.9v10.276h-12.481v33.886h61.419V98.126z" opacity="0.3" transform="translate(-131.371 -67.153)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 395 B |
6
src/assets/images/union.svg
Normal file
6
src/assets/images/union.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="65" height="78.999" viewBox="0 0 65 78.999">
|
||||
<g fill="none" stroke-linejoin="round" opacity="0.3">
|
||||
<path d="M-3975 79a5.005 5.005 0 0 1-5-5V28.487a5.007 5.007 0 0 1 5-5h16.5a14.8 14.8 0 0 1-2.82-8.718A14.7 14.7 0 0 1-3946.687 0a14.7 14.7 0 0 1 14.63 14.768 14.794 14.794 0 0 1-2.82 8.718H-3920a5.007 5.007 0 0 1 5 5v15.468a10.994 10.994 0 0 0-6.808-2.27c-5.5 0-9.973 3.783-9.973 8.432s4.474 8.431 9.973 8.431a11 11 0 0 0 6.808-2.269V74a5.005 5.005 0 0 1-5 5z" transform="translate(3980)"/>
|
||||
<path fill="#fff" d="M-3920.003 73.999l.003-.003V63.45c-.597.065-1.2.098-1.808.098-3.84 0-7.49-1.298-10.277-3.654-1.436-1.214-2.574-2.647-3.382-4.259-.872-1.74-1.315-3.598-1.315-5.519 0-1.921.443-3.778 1.315-5.519.808-1.612 1.945-3.045 3.381-4.259 2.787-2.356 6.437-3.654 10.278-3.654.607 0 1.21.033 1.808.097V28.49l-.004-.004h-14.873c-1.88 0-3.6-1.054-4.454-2.729-.854-1.675-.697-3.687.407-5.208 1.222-1.683 1.867-3.682 1.867-5.781 0-5.386-4.32-9.768-9.63-9.768-5.31 0-9.629 4.382-9.629 9.768 0 2.1.646 4.098 1.867 5.782 1.104 1.521 1.261 3.533.407 5.207-.854 1.675-2.574 2.729-4.454 2.729h-16.5l-.004.004v45.506l.003.003h54.994m.003 5h-55c-2.757 0-5-2.242-5-5V28.488c0-2.758 2.243-5.001 5-5.001h16.504c-1.773-2.443-2.82-5.458-2.82-8.718 0-8.157 6.55-14.768 14.63-14.768 8.08 0 14.63 6.611 14.63 14.768 0 3.26-1.048 6.275-2.821 8.718H-3920c2.756 0 5 2.243 5 5.001v15.467c-1.853-1.463-4.27-2.27-6.808-2.27-5.5 0-9.974 3.783-9.974 8.432 0 4.65 4.474 8.432 9.974 8.432 2.537 0 4.955-.807 6.808-2.27V74c0 2.757-2.244 4.999-5 4.999z" transform="translate(3980)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
17
src/assets/scss/agenda.scss
Normal file
17
src/assets/scss/agenda.scss
Normal file
@ -0,0 +1,17 @@
|
||||
#agenda {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
|
||||
div.event.container {
|
||||
display: grid;
|
||||
grid-template-columns: min-content repeat(6, 1fr) min-content;
|
||||
grid-template-rows: 1fr;
|
||||
column-gap: 30px;
|
||||
|
||||
img.arrow {
|
||||
margin: auto;
|
||||
width: auto;
|
||||
height: calc(99/217 * 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
105
src/assets/scss/eventblock.scss
Normal file
105
src/assets/scss/eventblock.scss
Normal file
@ -0,0 +1,105 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC&display=swap');
|
||||
|
||||
.event.block {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-size: 24px;
|
||||
line-height: 1.44;
|
||||
font-family: 'Noto Serif TC', serif;
|
||||
font-weight: bold;
|
||||
|
||||
.background {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: .75em;
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
|
||||
span {
|
||||
white-space: pre;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
i.icon {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
scale: 0.75;
|
||||
|
||||
&::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
content: '';
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// different size for each icon
|
||||
&.union {
|
||||
width: 65px;
|
||||
height: 79px;
|
||||
|
||||
&::before {
|
||||
background-image: url('../assets/images/union.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.stall-outline {
|
||||
width: 61px;
|
||||
height: 62px;
|
||||
|
||||
&::before {
|
||||
background-image: url('../assets/images/stall-outline.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.group {
|
||||
width: 100px;
|
||||
height: 85px;
|
||||
|
||||
&::before {
|
||||
background-image: url('../assets/images/group.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.lightning-outline {
|
||||
margin-top: 10px;
|
||||
width: 37px;
|
||||
height: 78px;
|
||||
|
||||
&::before {
|
||||
background-image: url('../assets/images/lightning-outline.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.guide-outline {
|
||||
margin-right: 40px;
|
||||
width: 74px;
|
||||
height: 95px;
|
||||
|
||||
&::before {
|
||||
background-image: url('../assets/images/guide-outline.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
27
src/components/EventBlock.vue
Normal file
27
src/components/EventBlock.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<a href="" class="event block">
|
||||
<img class="background" src="../assets/images/event-block-bg.svg">
|
||||
<div class="inner">
|
||||
<i v-if="icon" :class="icon" class="icon" />
|
||||
<span>{{ newlineText }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component({
|
||||
})
|
||||
export default class EventBlock extends Vue {
|
||||
@Prop({ default: '' }) private text!: string;
|
||||
@Prop({ default: '' }) private icon!: string;
|
||||
|
||||
get newlineText () {
|
||||
return this.text.replace('\\n', '\n');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/eventblock';
|
||||
</style>
|
||||
@ -1,11 +1,30 @@
|
||||
<template>
|
||||
<div id="agenda">
|
||||
<div class="event container">
|
||||
<img class="arrow" src="@/assets/images/arrow-left.svg">
|
||||
<EventBlock icon="union" text="大地遊戲"/>
|
||||
<EventBlock icon="stall-outline" text="社群攤位"/>
|
||||
<EventBlock icon="group" text="天使計劃"/>
|
||||
<EventBlock icon="lightning-outline" text="Lightning\nTalk" style="font-size: 20px"/>
|
||||
<EventBlock icon="guide-outline" text="導遊團"/>
|
||||
<EventBlock text="開放式\n議程"/>
|
||||
<img class="arrow" src="@/assets/images/arrow-right.svg">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
<script lang="ts">
|
||||
import { Watch, Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
import EventBlock from '../components/EventBlock.vue';
|
||||
@Component({
|
||||
components: {
|
||||
EventBlock
|
||||
}
|
||||
})
|
||||
export default class Agenda extends Vue {
|
||||
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/agenda';
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user