51 lines
		
	
	
		
			992 B
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			51 lines
		
	
	
		
			992 B
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <div class="display0">
 | |
|     <div class="display0-container">
 | |
|       <div class="display0-content">
 | |
|         <img src="../asset/display0-left.png">
 | |
|         <img src="../asset/display0-left.png">
 | |
|       </div>
 | |
|     </div>
 | |
|   </div>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
|   export default {
 | |
|     name: 'display0',
 | |
| 
 | |
|     data () {
 | |
|       return {
 | |
| 
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
|   .display0 {
 | |
|     position: relative;
 | |
|     width: 840px;
 | |
|     height: 465px;
 | |
|     background: url(../asset/display0-bg.png) no-repeat center;
 | |
|     background-size: cover;
 | |
| 
 | |
|     .display0-content {
 | |
|       display: flex;
 | |
|       position: absolute;
 | |
|       top: 50%;
 | |
|       width: 100%;
 | |
|       height: 465px;
 | |
|       transform: translateY(-50%);
 | |
|       align-items: center;
 | |
|       justify-content: space-between;
 | |
|       background: url(../asset/display0-bg.png) no-repeat center;
 | |
|       background-size: cover;
 | |
| 
 | |
|       img:last-child {
 | |
|         position: relative;
 | |
|         transform: rotate(180deg);
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| </style>
 |