<template>
    <div>
         <div class="q-ma-md q-mb-xl">
            <q-img
              class="width q-ma-md rounded-borders"
              :src="storageUrl+'page/'+page.header_img"
              alt="exam logo"
            ></q-img>
            <div class="text-h5 text-bold text-grey-8 text-left q-pa-md">
              {{page.title}}
            </div>
            <div v-if="page.archive" v-html="page.archive.content"></div>
            <div class="text-body1 links-blue">
              <div v-html="page.content"></div>
            </div>
          </div>
    </div>
</template>

<script>
    export default {
        props:['page']
    }
</script>

<style lang="css" scoped>
.borders {
  border: 1px solid red;
}

.links-blue a {
  text-decoration: none;
  color: #0059ff;
  font-weight: bold;
}
.links-blue a:hover {
  color: #000bac;
  text-decoration: underline;
}

.ul-style {
  list-style-type: none;
  margin-left: 0px;
}
.ul-style li {
  padding: 2px 0px;
}
.ul-style a {
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: #29589e;
}
.ul-style a:hover {
  text-decoration: underline;
}
.font-size {
  font-size: 18px;
}

.line-height .q-skeleton {
  margin: 12px 0;
}

.fix-top {
  position: fixed;
}
.width {
  width: 60%;
}
.skeleton .q-skeleton {
  padding: 5px 0px;
  margin: 0 10px;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .font-size {
    font-size: 14px;
  }

  .fix-top {
    position: relative !important;
  }
  .width {
    width: 90%;
  }
}
</style>