ieeemysight4rehab/ieeemysight4rehab.github.io

<template>
    <v-container class="pa-0">
        <v-layout wrap align-center justify-center row fill-height >
           <v-flex xs12 md3 lg3 class="pa-2">
               <p class="google-font" style="font-size:180%">What we do?</p>
               <p class="google-font" style="font-size:110%">To develop a cost-effective, and integrated rehabilitation system that includes interactive and intelligent features.</p>

               <p class="google-font" style="font-size:110%">Technology stacks</p>

                <span v-for="(item,i) in whatWeDoData" :key="i">
                    <v-tooltip bottom>
                        <template v-slot:activator="{ on }" >
                            <a :href="item.link" target="_blank" rel="noopener" flat class="ma-0">
                                <img :src="getImgUrl(item.image)" height="30vh" alt="" srcset="" dark v-on="on">
                            </a> 
                            &nbsp;&nbsp;&nbsp;
                        </template>
                        <span>{{item.TechName}}</span>
                    </v-tooltip>
                </span>
                
                <br><br>
            </v-flex> 
            <v-flex xs12 md9 lg9 class="">
                <v-layout row wrap>

                    <v-flex xs6 sm6 md3 lg3 class="text-xs-center pa-2">
                        <v-icon large style="font-size:300%">settings</v-icon>
                        <p class="google-font" style="font-size:130%">Mechanical</p>
                        <p class="google-font" style="font-size:110%">Design and build physical structure with safety measure</p>
                    </v-flex>

                    <v-flex xs6 sm6 md3 lg3 class="text-xs-center pa-2">
                        <v-icon large style="font-size:300%">memory</v-icon>
                        <p class="google-font" style="font-size:130%">Electronic</p>
                        <p class="google-font" style="font-size:110%">Design and build circuit boards and control system</p>
                    </v-flex>

                    <v-flex xs6 sm6 md3 lg3 class="text-xs-center pa-2">
                        <v-icon large style="font-size:300%">desktop_windows</v-icon>
                        <p class="google-font" style="font-size:130%">Software</p>
                        <p class="google-font" style="font-size:110%">Design and develop mobile and web apps</p>
                    </v-flex>

                    <v-flex xs6 sm6 md3 lg3 class="text-xs-center pa-2">
                        <v-icon large style="font-size:300%">school</v-icon>
                        <p class="google-font" style="font-size:130%">Event</p>
                        <p class="google-font" style="font-size:110%">Share knowledge in different universities and rehabilitation centres</p>
                    </v-flex>

                </v-layout>
            </v-flex>
        </v-layout>

    </v-container>
</template>

<script>
import whatWeDoData from '@/assets/data/whatWeDoComponentData.json'
import ChapterDetails from '@/assets/data/chapterDetails.json'
export default {
    data() {
        return {
            chapterDetails: ChapterDetails,
            whatWeDoData: whatWeDoData
        }
    },
    methods:{
        getImgUrl(url) {
            if(url.length>0){
                return require('@/assets/img/what-we-do/'+url)
            }else{
                return require('@/assets/img/what-we-do/notFound.png')
            }
        },
    }
}
</script>