I. Bilder für die Uhr#

Die Uhr wird aus einzelnen Grafiken zusammengesetzt. Die Bilder für die Uhr als Download:

Diese speichern Sie im Ordner public des Projektes.
Vergessen Sie nicht, die Namen berlinclock1.vue in App.vue zu importieren.

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.

../../_images/berlin-clock-schritt-01.png

<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="/clockimages/minute-small-yellow.png" />
	<img id="minute25"
	     alt=""
	     src="/clockimages/minute-small-yellow.png" />
	<img id="minute30"
	     alt=""
	     src="/clockimages/minute-small-red.png" />
	<img id="minute35"
	     alt=""
	     src="/clockimages/minute-small-yellow.png" />
	<img id="minute40"
	     alt=""
	     src="/clockimages/minute-small-yellow.png" />
	<img id="minute45"
	     alt=""
	     src="/clockimages/minute-small-red.png" />
	<img id="minute50"
	     alt=""
	     src="/clockimages/minute-small-yellow.png" />
	<img id="minute55"
	     alt=""
	     src="/clockimages/minute-small-right.png" />
	<img id="minute01"
	     alt=""
	     src="/clockimages/minute-left.png" />
	<img id="minute02"
	     alt=""
	     src="/clockimages/minute-middle.png" />
	<img id="minute03"
	     alt=""
	     src="/clockimages/minute-middle.png" />
	<img id="minute04"
	     alt=""
	     src="/clockimages/minute-right.png" />
      </div>
    </div>
    <p><b>Autor: </b> Rüdiger Appel</p>
    <p><b>Quelle:</b>
      <a href="http://www.3quarks.com/de/Mengenlehreuhr/index.html">
      Mengenlehrenuhr</a>
    </p>
  </div>
</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(/clockimages/background.png)
  no-repeat top right;
  } 
</style>