Files
sorvor-front/src/components/Section7GreenTab.vue
Jarinya e5683c7f2b
All checks were successful
frontend-action / build-image (push) Successful in 57s
update edit / login / responsive
2024-04-23 18:57:44 +07:00

101 lines
4.3 KiB
Vue

<template>
<div style="position: relative" class="bg-green-full text-normal py-2">
<div id="scroll-container">
<div id="scroll-text" class="text-sub d-none">
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมบรหารราชการแผนดนและความมนคง
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมกฎหมายกระบวนการยธรรม
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมการศกษา
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมการสาธารณส
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมอาชพทำนา ปลกพชลมล
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมอาชพทำสวน าไม ปศตว ประมง
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมพนกงานหรอลกจางของบคคล(ไมใชหนวยงานร)
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมผประกอบอาชพดานสงแวดลอม งเมอง อสงหารมทรพยและสาธารณปโภค ทรพยากรธรรมชาต พลงงาน
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมผประกอบกจการ หร SME
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมผประกอบธรกจหรออาชพดานการทองเทยว
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมผประกอบอตสาหกรรม
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมสตร
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมผงอาย คนพการหรอทพพลภาพ กลมชาตนธ กลมอตลกษณ
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมศลปะ ฒนธรรม ดนตร การแสดงและบนเท
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมประชาสงคม องคกรสาธารณประโยชน
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมนกกฬา อสารมวลชน สรางสรรควรรณกรรม
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมผประกอบวชาช ประกอบอาชพอสระ
<v-icon icon="mdi-circle" size="20"></v-icon>
กลมอนๆ
<v-icon icon="mdi-circle" size="20"></v-icon>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss">
#scroll-container {
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
#scroll-text {
/* animation properties */
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: my-animation 50s linear infinite;
-webkit-animation: my-animation 60s linear infinite;
animation: my-animation 60s linear infinite;
}
/* for Firefox */
@-moz-keyframes my-animation {
from {
-moz-transform: translateX(100%);
}
to {
-moz-transform: translateX(-100%);
}
}
/* for Chrome */
@-webkit-keyframes my-animation {
from {
-webkit-transform: translateX(100%);
}
to {
-webkit-transform: translateX(-100%);
}
}
@keyframes my-animation {
from {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
</style>