version1

Umbau und Bilder der Uhr

Die Uhr wird aus einzelnen Grafiken zusammengesetzt. Die Bilder können Sie hier herunterladen Bilder zur Uhr

• Diese speichern Sie im Ordner static des Projektes.

• Vergessen Sie nicht, die Namen hello durch einen kontextbezogenen Namen zu ersetzen, wie es für die Lotto-App demonstriert wurde.

Wie am Bildschirmfoto zu erkennen ist, sind noch nicht alle Bilder am richtigen Platz. Die Lösung wird auf der nächsten Seite erklärt.

vue/vue-berlin-clock/berlinclock1.vue (Source)

<template>

  <div class="berlinclock">
  <h1>Berlin-Clock</h1>
  <div class="content">
    <div id="background">
      <img id="second" alt="" src="/static/clockimages/second.png" />
      <img id="hour05" alt="" src="/static/clockimages/hour-left.png" />
      <img id="hour10" alt="" src="/static/clockimages/hour-middle.png" />
      <img id="hour15" alt="" src="/static/clockimages/hour-middle.png" />
      <img id="hour20" alt="" src="/static/clockimages/hour-right.png" />
      <img id="hour01" alt="" src="/static/clockimages/hour-left.png" />
      <img id="hour02" alt="" src="/static/clockimages/hour-left.png" />
      <img id="hour03" alt="" src="/static/clockimages/hour-left.png" />
      <img id="hour04" alt="" src="/static/clockimages/hour-left.png" />
      <img id="minute05" alt="" src="/static/clockimages/minute-small-left.png" />
      <img id="minute10" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute15" alt="" src="/static/clockimages/minute-small-red.png" />
      <img id="minute20" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute25" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute30" alt="" src="/static/clockimages/minute-small-red.png" />
      <img id="minute35" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute40" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute45" alt="" src="/static/clockimages/minute-small-red.png" />
      <img id="minute50" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute55" alt="" src="/static/clockimages/minute-small-right.png" />
      <img id="minute01" alt="" src="/static/clockimages/minute-left.png" />
      <img id="minute02" alt="" src="/static/clockimages/minute-middle.png" />
      <img id="minute03" alt="" src="/static/clockimages/minute-middle.png" />
      <img id="minute04" alt="" src="/static/clockimages/minute-right.png" />
    </div>
  </div>
  <p><b>Autor:</b></p>
  <p>Rüdiger Appel</p>
  <p><b>Quelle:</b></p>
  <p>http://www.3quarks.com/de/Mengenlehreuhr/index.html</p>
</template>

<script>
export default {
  name: 'berlinclock'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#background {
  width: 190px;
  height: 265px;
  margin: auto;
  position: relative;
  background: transparent url(/static/clockimages/background.png)
  no-repeat top right;
 }
</style>