|
@@ -1,88 +0,0 @@
|
|
|
-<template >
|
|
|
- <div class='playStopButton' @click='togglePlay' :class='{ active: status === "play", loading }'>
|
|
|
- <!-- //- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill='white' xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
|
|
|
- //- <circle id='circle' cx="50%" cy="50%" r="5%" fill/>
|
|
|
- //- </svg> -->
|
|
|
- <div id='stop'>
|
|
|
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
|
|
|
- <g><g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"><path d="M3598.3,1507.4l-46.2-48.3v-1354v-1356.1l48.3-44.1l48.3-46.2h1354h1356.1l44.1,48.3l46.2,48.3v1354v1356l-48.3,44.1l-48.3,46.2h-1354h-1356L3598.3,1507.4z"/></g></g>
|
|
|
- </svg>
|
|
|
- </div>
|
|
|
- <div id='play'>
|
|
|
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
|
|
|
- <g><g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"><path d="M3885.7,2036.4c-29.2-29.2-33.4-229.6-33.4-1888.8c0-1241.8,6.3-1872.1,20.9-1899.2c27.1-48,104.4-52.2,194.1-6.3C4286.4-1645.2,7143.6,14,7166.6,41.2c33.4,41.7,33.4,154.4-2.1,196.2c-20.9,27.1-2876,1686.3-3097.2,1799C3983.8,2078.1,3927.5,2078.1,3885.7,2036.4z"/></g></g>
|
|
|
- </svg>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-
|
|
|
-export default {
|
|
|
- data () {
|
|
|
- return {
|
|
|
- loading: false,
|
|
|
- status: 'stop'
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- play () {
|
|
|
- this.status = 'play'
|
|
|
- },
|
|
|
- stop () {
|
|
|
- this.status = 'stop'
|
|
|
- },
|
|
|
- togglePlay () {
|
|
|
- this.status = this.status === 'play' ? 'stop' : 'play'
|
|
|
- this.$emit(this.status)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style scoped>
|
|
|
-.playStopButton {
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- margin: 5px 0px 5px 5px;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.playStopButton:focus {
|
|
|
- outline:0;
|
|
|
-}
|
|
|
-
|
|
|
-.playStopButton.active #play {
|
|
|
- transform: rotate( 90deg ) scale( 0 );
|
|
|
- opacity: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.playStopButton:not( .active ) #stop {
|
|
|
- transform: rotate( -90deg ) scale( 0 );
|
|
|
- opacity: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.playStopButton svg {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-#play, #stop {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- transition: all .35s ease-in-out;
|
|
|
- position: absolute;
|
|
|
- stroke: rgba(248, 113, 113, var(--tw-text-opacity));
|
|
|
- fill:rgba(248, 113, 113, var(--tw-text-opacity));
|
|
|
- top: 0px;
|
|
|
- left: 0px;
|
|
|
-}
|
|
|
-
|
|
|
-#circle {
|
|
|
- fill: none;
|
|
|
- stroke: red;
|
|
|
- stroke-width: 3px;
|
|
|
-}
|
|
|
-</style>
|