140 lines
7.3 KiB
Vue
140 lines
7.3 KiB
Vue
<template>
|
|
<v-flex xs6 class="left">
|
|
<v-layout row>
|
|
<v-flex pl-2 pr-2 pt-0 pb-2 md12>
|
|
<v-card>
|
|
<v-layout pl-2 pr-2 row>
|
|
<v-flex xs12 sm6 md6>
|
|
<v-text-field
|
|
label="PERUSAHAAN X"
|
|
small
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs12 sm6 md6>
|
|
<v-select
|
|
:mous="mous"
|
|
label="MOU X"
|
|
small
|
|
></v-select>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
<v-layout row>
|
|
<v-flex pl-2 pr-2 pt-1 xs12 sm12 md12>
|
|
<v-card class="search-test">
|
|
<v-card-actions>
|
|
<v-btn outline color="orange">Pemeriksaan</v-btn>
|
|
<v-btn flat color="orange">Panel</v-btn>
|
|
<v-btn flat color="orange">Profile</v-btn>
|
|
<v-btn flat color="orange" text-color="red">MOU *</v-btn>
|
|
</v-card-actions>
|
|
<v-divider></v-divider>
|
|
<v-card-text>
|
|
<v-layout row pt-0 pb-0>
|
|
<v-flex >
|
|
<v-text-field
|
|
v-model="value"
|
|
color="cyan darken"
|
|
placeholder="ketikkan pemeriksaan ..."
|
|
|
|
>
|
|
<v-progress-linear
|
|
v-if="custom"
|
|
slot="progress"
|
|
:value="progress"
|
|
:color="color"
|
|
height="7"
|
|
></v-progress-linear>
|
|
</v-text-field>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout row>
|
|
<v-flex text-md-center >
|
|
<v-btn depressed small color="error">TEST 1</v-btn>
|
|
<v-btn depressed small color="error">TEST 2</v-btn>
|
|
<v-btn depressed small color="error">TEST 3</v-btn>
|
|
<v-btn depressed small color="error">TEST 4</v-btn>
|
|
<v-btn depressed small color="error">TEST 5</v-btn>
|
|
<v-btn depressed small color="error">TEST 6</v-btn>
|
|
<v-btn depressed small color="error">TEST 7</v-btn>
|
|
<v-btn depressed small color="info">TEST 8</v-btn>
|
|
<v-btn depressed small color="info">TEST 9</v-btn>
|
|
<v-btn depressed small color="info">TEST 10</v-btn>
|
|
<v-btn depressed small color="info">TEST 11</v-btn>
|
|
<v-btn depressed small color="info">TEST 12</v-btn>
|
|
<v-btn depressed small color="info">TEST 13</v-btn>
|
|
<v-btn depressed small color="info">TEST 14</v-btn>
|
|
<v-btn depressed small color="warning">TEST 15</v-btn>
|
|
<v-btn depressed small color="warning">TEST 16</v-btn>
|
|
<v-btn depressed small color="warning">TEST 17</v-btn>
|
|
<v-btn depressed small color="warning">TEST 18</v-btn>
|
|
<v-btn depressed small color="warning">TEST 19</v-btn>
|
|
<v-btn depressed small color="warning">TEST 20</v-btn>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card-text>
|
|
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
<v-layout row>
|
|
<v-flex pl-2 pr-2 pt-2 pb-3 md12>
|
|
<v-card class="persyaratan">
|
|
<v-layout pl-2 pr-2 row>
|
|
<v-flex md12>
|
|
<v-list
|
|
subheader
|
|
three-line
|
|
|
|
>
|
|
<v-subheader red--text text--lighten-1> PERSYARATAN</v-subheader>
|
|
<v-divider></v-divider>
|
|
|
|
|
|
<div role="listitem"><a class="v-list__tile v-list__tile--link theme--light"><div class="v-list__tile__action"><div class="v-input v-input--selection-controls v-input--checkbox theme--light"><div class="v-input__control"><div class="v-input__slot"><div class="v-input--selection-controls__input"><input aria-checked="false" role="checkbox" type="checkbox" value=""><div class="v-input--selection-controls__ripple"></div><i aria-hidden="true" class="v-icon material-icons theme--light">check_box_outline_blank</i></div></div><div class="v-messages theme--light"><div class="v-messages__wrapper"></div></div></div></div></div> <div class="v-list__tile__content"><div class="v-list__tile__sub-title pt-3"><div class="flex justify-center md12" style="width: 100%;"><div class="v-input text-list-fhm v-text-field v-text-field--enclosed v-text-field--outline v-text-field--placeholder theme--light"><div class="v-input__control"><div class="v-input__slot"><div class="v-text-field__slot"><label aria-hidden="true" class="v-label v-label--active theme--light" style="left: 0px; right: auto; position: absolute;">Tidak bab satu minggu</label><input aria-label="Tidak bab satu minggu" type="text" placeholder="ketikkan alasan di sini ..."></div></div><div class="v-text-field__details"><div class="v-messages theme--light"><div class="v-messages__wrapper"></div></div></div></div></div></div></div></div></a></div>
|
|
|
|
|
|
</v-list>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
div.search-test .v-text-field {
|
|
padding-top: 2px;
|
|
margin-top: 4px;
|
|
}
|
|
div.persyaratan input[type=text]::-webkit-input-placeholder {
|
|
font-size: 1em;
|
|
}
|
|
div.persyaratan input[type=text] {
|
|
font-size: .7em;
|
|
}
|
|
div.persyaratan label {
|
|
color: #f44336!important;
|
|
font-size: 1.1em;
|
|
font-weight:400;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data: () => ({
|
|
mous: ['Foo', 'Bar', 'Fizz', 'Buzz'],
|
|
custom: false,
|
|
value: '',
|
|
notifications:true
|
|
})
|
|
}
|
|
</script>
|