initial

src/components/Section7GreenTab.vue

@@ -0,0 +1,100 @@
+<template>
+  <div style="position: relative" class="bg-green-full text-normal py-7">
+    <div id="scroll-container">
+      <div id="scroll-text" class="text-sub">
+        <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>