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>