├── public
    ├── favicon.ico
    ├── images
    │   └── arrow-right.png
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   └── images
    │   │   └── arrow-right.png
    ├── main.js
    ├── components
    │   ├── scroll-view.vue
    │   ├── text.vue
    │   ├── view.vue
    │   ├── image.vue
    │   ├── element.vue
    │   └── canvas.vue
    ├── index.js
    ├── App.vue
    └── examples
    │   ├── Table.vue
    │   └── index.vue
├── babel.config.js
├── .gitignore
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gitjinfeiyang/vue-easy-canvas/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gitjinfeiyang/vue-easy-canvas/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/images/arrow-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gitjinfeiyang/vue-easy-canvas/HEAD/public/images/arrow-right.png


--------------------------------------------------------------------------------
/src/assets/images/arrow-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gitjinfeiyang/vue-easy-canvas/HEAD/src/assets/images/arrow-right.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import easyCanvas from './index'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | Vue.use(easyCanvas)
 8 | 
 9 | new Vue({
10 |   render: h => h(App),
11 | }).$mount('#app')
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/components/scroll-view.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="display:none;">
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   props: {
 9 |     tag: {
10 |       type: String,
11 |       default: 'scroll-view',
12 |     },
13 |     styles: {
14 |       type: Object,
15 |       default() {
16 |         return {}
17 |       },
18 |     },
19 |     on: {
20 |       type: Object,
21 |     },
22 |   },
23 | }
24 | </script>


--------------------------------------------------------------------------------
/src/components/text.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div style="display:none;">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     props:{
 9 |         tag:{
10 |             type:String,
11 |             default:'text'
12 |         },
13 |         styles:{
14 |             type:Object,
15 |             default(){
16 |                 return {}
17 |             }
18 |         },
19 |         on:{
20 |             type:Object
21 |         }
22 |     }
23 | }
24 | </script>


--------------------------------------------------------------------------------
/src/components/view.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div style="display:none;">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     props:{
 9 |         tag:{
10 |             type:String,
11 |             default:'view'
12 |         },
13 |         styles:{
14 |             type:Object,
15 |             default(){
16 |                 return {}
17 |             }
18 |         },
19 |         on:{
20 |             type:Object
21 |         }
22 |     }
23 | }
24 | </script>


--------------------------------------------------------------------------------
/src/components/image.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div style="display:none;">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     props:{
 9 |         tag:{
10 |             type:String,
11 |             default:'image'
12 |         },
13 |         styles:{
14 |             type:Object,
15 |             default(){
16 |                 return {}
17 |             }
18 |         },
19 |         on:{
20 |             type:Object
21 |         }
22 |     }
23 | }
24 | </script>


--------------------------------------------------------------------------------
/src/components/element.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div style="display:none;">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     props:{
 9 |         tag:{
10 |             type:String,
11 |             default:'view'
12 |         },
13 |         styles:{
14 |             type:Object,
15 |             default(){
16 |                 return {}
17 |             }
18 |         }
19 |     },
20 |     data(){
21 |         return {
22 | 
23 |         }
24 |     },
25 |     created(){
26 | 
27 |     },
28 |     render(){
29 |         return null
30 |     }
31 | }
32 | </script>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import canvas from './components/canvas'
 2 | import element from './components/element'
 3 | import image from './components/image'
 4 | import scrollView from './components/scroll-view'
 5 | import text from './components/text'
 6 | import view from './components/view'
 7 | 
 8 | export default {
 9 |     install(vue){
10 |         vue.component('ec-canvas',canvas)
11 |         vue.component('ec-element',element)
12 |         vue.component('ec-image',image)
13 |         vue.component('ec-scroll-view',scrollView)
14 |         vue.component('ec-text',text)
15 |         vue.component('ec-view',view)
16 |     }
17 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <component :is="current" />
 4 |     <div class="nav">
 5 |       <a class="item" :class="current === item?'active':''" v-for="(item,index) in routes" :key="index"
 6 |         @click="current = item">{{item}}</a>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import Index from './examples/index'
13 | import Table from './examples/Table'
14 | export default {
15 |   name: 'App',
16 |   components: {
17 |     Index,
18 |     Table,
19 |   },
20 |   data() {
21 |     return {
22 |       current: 'Index',
23 |       routes: ['Index', 'Table'],
24 |     }
25 |   },
26 | }
27 | </script>
28 | 
29 | <style>
30 | * {
31 |   margin: 0;
32 |   padding: 0;
33 | }
34 | .nav {
35 |   position: fixed;
36 |   bottom: 0;
37 |   left: 0;
38 |   width: 100vw;
39 |   height: 40px;
40 |   line-height: 40px;
41 | }
42 | .nav .item {
43 |   display: inline-block;
44 |   padding: 0 10px;
45 | }
46 | .nav .item.active {
47 |   text-decoration: underline;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-easy-canvas",
 3 |   "version": "0.1.0",
 4 |   "main": "./src/index.js",
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "easy-canvas-layout": "0.0.8",
13 |     "vue": "^2.6.11"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.5.0",
17 |     "@vue/cli-plugin-eslint": "~4.5.0",
18 |     "@vue/cli-service": "~4.5.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^6.2.2",
22 |     "vue-template-compiler": "^2.6.11"
23 |   },
24 |   "eslintConfig": {
25 |     "root": true,
26 |     "env": {
27 |       "node": true
28 |     },
29 |     "extends": [
30 |       "plugin:vue/essential",
31 |       "eslint:recommended"
32 |     ],
33 |     "parserOptions": {
34 |       "parser": "babel-eslint"
35 |     },
36 |     "rules": {}
37 |   },
38 |   "browserslist": [
39 |     "> 1%",
40 |     "last 2 versions",
41 |     "not dead"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-easy-canvas
 2 | 将 easy-canvas 封装成vue组件进行使用
 3 | *注意：内部实现是将vue节点转换成目标节点，转换过程中会有性能损失，渲染与转换时间大概4:1*
 4 | 
 5 | - 相关库 [easy-canvas](https://github.com/Gitjinfeiyang/easy-canvas)
 6 | 
 7 | ## Installation
 8 | ``` bash
 9 | npm install vue-easy-canvas --save
10 | ```
11 | 
12 | ## Usage
13 | ``` javascript
14 | import easyCanvas from 'vue-easy-canvas'
15 | Vue.use(easyCanvas)
16 | ```
17 | 
18 | ``` html
19 | <ec-canvas :width="300" :height="600">
20 |     <ec-scroll-view :styles="{height:600}">
21 | 
22 |     <ec-view :styles="styles.imageWrapper">
23 |         <ec-image src="https://tse1-mm.cn.bing.net/th/id/OIP.Dkj8fnK1SsPHIBmAN9XnUAHaNK?pid=Api&rs=1" :styles="styles.image" mode="aspectFill"></ec-image>
24 |         <ec-view :styles="styles.homeTitleWrapper">
25 |         <ec-text>easyCanvas</ec-text>
26 |         </ec-view>
27 |     </ec-view>
28 | 
29 |     <ec-view :styles="styles.itemWrapper"
30 |         v-for="(item,index) in examples"
31 |         :key="index"
32 |         :on="{
33 |         click(e){
34 |             window.location.href = host + item.url
35 |         }
36 |         }">
37 |         <ec-view :styles="styles.title">
38 |         <ec-text>{{item.title}}</ec-text>
39 |         </ec-view>
40 |         <ec-view :styles="styles.desc">
41 |         <ec-text>{{item.desc}}</ec-text>
42 |         </ec-view>
43 |     </ec-view>
44 | 
45 |     </ec-scroll-view>
46 | </ec-canvas>
47 | ```
48 | 
49 | 


--------------------------------------------------------------------------------
/src/examples/Table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ec-canvas :width="window.innerWidth" :height="window.innerHeight" animate>
 3 |     <ec-scroll-view :styles="styles.scrollView" :renderOnDemand="true">
 4 |       <ec-view :styles="styles.tr">
 5 |         <ec-text :styles="styles.th">日期</ec-text>
 6 |         <ec-text :styles="styles.th">姓名</ec-text>
 7 |         <ec-text :styles="styles.th">地区</ec-text>
 8 |         <ec-text :styles="styles.th">城市</ec-text>
 9 |         <ec-text :styles="styles.th">详细地址</ec-text>
10 |         <ec-text :styles="styles.th">邮编</ec-text>
11 |       </ec-view>
12 | 
13 |       <ec-view :styles="styles.tr" v-for="(item,index) in tableData" :key="index">
14 |         <ec-text :styles="styles.td">{{index}}</ec-text>
15 |         <ec-text :styles="styles.td">{{item.date}}</ec-text>
16 |         <ec-text :styles="styles.td">{{item.name}}</ec-text>
17 |         <ec-text :styles="styles.td">{{item.province}}</ec-text>
18 |         <ec-text :styles="styles.td">{{item.city}}</ec-text>
19 |         <ec-text :styles="styles.td">{{item.address}}</ec-text>
20 |         <ec-text :styles="styles.td">{{item.zip}}</ec-text>
21 |       </ec-view>
22 |     </ec-scroll-view>
23 |   </ec-canvas>
24 | </template>
25 | 
26 | <script>
27 | export default {
28 |   data() {
29 |     return {
30 |       tableData: getTableData(1000),
31 |       window,
32 |       styles: {
33 |         scrollView: {
34 |           height: window.innerHeight,
35 |           width: window.innerWidth,
36 |           direction: 'xy',
37 |         },
38 |         tr: {
39 |           width: 600,
40 |           display: 'flex',
41 |           borderBottomWidth: 0.5,
42 |           borderColor: '#999',
43 |           padding: [10, 0],
44 |         },
45 |         td: {
46 |           flex: 1,
47 |           color: '#666',
48 |           padding: [0, 5],
49 |           display: 'block',
50 |           maxLine: 1,
51 |         },
52 |         th: {
53 |           flex: 1,
54 |           padding: [0, 5],
55 |           display: 'block',
56 |           maxLine: 1,
57 |           color: '#333',
58 |           textAlign: 'center',
59 |         },
60 |         content: {
61 |           maxLine: 1,
62 |         },
63 |       },
64 |     }
65 |   },
66 | }
67 | 
68 | const data = {
69 |   date: '2016-05-02',
70 |   name: '王小虎',
71 |   province: '上海',
72 |   city: '普陀区',
73 |   address: '上海市普陀区金沙江路 1518 弄',
74 |   zip: 200333,
75 | }
76 | function getTableData(count = 100) {
77 |   let list = []
78 |   for (let i = 0; i < count; i++) {
79 |     list.push(data)
80 |   }
81 |   return list
82 | }
83 | </script>


--------------------------------------------------------------------------------
/src/components/canvas.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <canvas ref="canvas" :style="canvasStyle" @touchstart="ontouchstart" @touchmove="ontouchmove" @touchend="ontouchend"
  4 |       @click="onClick"></canvas>
  5 |     <slot />
  6 |   </div>
  7 | </template>
  8 | 
  9 | <script>
 10 | import easyCanvas from 'easy-canvas-layout'
 11 | 
 12 | export default {
 13 |   props: {
 14 |     width: {
 15 |       type: Number,
 16 |       default: 300,
 17 |     },
 18 |     height: {
 19 |       type: Number,
 20 |       default: 300,
 21 |     },
 22 |     debug: {
 23 |       type: Boolean,
 24 |       default: false,
 25 |     },
 26 |     animate: {
 27 |       type: Boolean,
 28 |       default: false,
 29 |     },
 30 |   },
 31 |   data() {
 32 |     return {
 33 |       layer: null,
 34 |       canvas: null,
 35 |       ctx: null,
 36 |       node: null,
 37 |       tag: 'view',
 38 |       options: {},
 39 |     }
 40 |   },
 41 |   computed: {
 42 |     canvasStyle() {
 43 |       return {
 44 |         width: this.width + 'px',
 45 |         height: this.height + 'px',
 46 |       }
 47 |     },
 48 |   },
 49 |   mounted() {
 50 |     this.init()
 51 |     this.generateElement()
 52 |     this.mountNode()
 53 |     if (this.animate) {
 54 |       this.layer.animate()
 55 |     }
 56 |   },
 57 |   updated() {
 58 |     this.generateElement()
 59 |     this.mountNode()
 60 |   },
 61 |   methods: {
 62 |     init() {
 63 |       this.canvas = this.$refs.canvas
 64 |       this.ctx = this.canvas.getContext('2d')
 65 |       const dpr = window.devicePixelRatio
 66 |       const w = this.width
 67 |       const h = this.height
 68 |       this.canvas.width = w * dpr
 69 |       this.canvas.height = h * dpr
 70 |       this.ctx.scale(dpr, dpr)
 71 |       this.layer = easyCanvas.createLayer(this.ctx, {
 72 |         dpr,
 73 |         width: w,
 74 |         height: h,
 75 |         debug: this.debug,
 76 |       })
 77 |     },
 78 | 
 79 |     generateElement() {
 80 |       const start = Date.now()
 81 |       this.node = generate(this, easyCanvas.createElement)
 82 |       console.log(`转换节点耗时 ${Date.now() - start} ms`)
 83 |     },
 84 | 
 85 |     mountNode() {
 86 |       this.node.mount(this.layer)
 87 |       console.log(this.node)
 88 |     },
 89 | 
 90 |     ontouchstart(e) {
 91 |       e.preventDefault()
 92 |       this.layer.eventManager.touchstart(e.touches[0].pageX, e.touches[0].pageY)
 93 |     },
 94 |     ontouchmove(e) {
 95 |       e.preventDefault()
 96 |       this.layer.eventManager.touchmove(e.touches[0].pageX, e.touches[0].pageY)
 97 |     },
 98 |     ontouchend(e) {
 99 |       e.preventDefault()
100 |       this.layer.eventManager.touchend(
101 |         e.changedTouches[0].pageX,
102 |         e.changedTouches[0].pageY
103 |       )
104 |     },
105 |     onClick(e) {
106 |       e.preventDefault()
107 |       this.layer.eventManager.click(e.pageX, e.pageY)
108 |     },
109 |   },
110 | }
111 | 
112 | function generate(node, c) {
113 |   let children = []
114 |   if (node.$children) {
115 |     children = node.$children.map((child) => {
116 |       return generate(child, c)
117 |     })
118 |   }
119 |   if (node.tag === 'text') {
120 |     return c((h) =>
121 |       h(
122 |         node.tag,
123 |         {
124 |           styles: node.styles,
125 |           attrs: node.$attrs,
126 |           on: node.on || {},
127 |         },
128 |         node.$el.innerText
129 |       )
130 |     )
131 |   } else {
132 |     return c((h) =>
133 |       h(
134 |         node.tag,
135 |         {
136 |           styles: node.styles,
137 |           attrs: node.$attrs,
138 |           on: node.on || {},
139 |         },
140 |         children
141 |       )
142 |     )
143 |   }
144 | }
145 | </script>
146 | 


--------------------------------------------------------------------------------
/src/examples/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <ec-canvas :width="300" :height="600">
  4 |       <ec-scroll-view :styles="{height:600,direction:'y'}" renderOnDemand>
  5 | 
  6 |         <ec-view :styles="styles.imageWrapper">
  7 |           <ec-image src="https://tse1-mm.cn.bing.net/th/id/OIP.Dkj8fnK1SsPHIBmAN9XnUAHaNK?pid=Api&rs=1"
  8 |             :styles="styles.image" mode="aspectFill"></ec-image>
  9 |           <ec-view :styles="styles.homeTitleWrapper">
 10 |             <ec-text>easyCanvas</ec-text>
 11 |           </ec-view>
 12 |         </ec-view>
 13 | 
 14 |         <ec-view :styles="{padding:[10,5,5,5],backgroundColor:'#F2F6FC'}">
 15 |           <ec-view :styles="{display:'inline-block',textAlign:'center',width:'25%',margin:5,}"
 16 |             v-for="(item,index) in examples" :key="index" :on="{
 17 |             click(e){
 18 |               window.location.href = host + item.url
 19 |             }
 20 |           }">
 21 |             <ec-view :styles="{textAlign:'center'}">
 22 |               <ec-image :styles="{width:40,height:40,display:'inline-block',borderRadius:4}" mode="aspectFill"
 23 |                 src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709216491,2536617744&fm=26&gp=0.jpg" />
 24 |             </ec-view>
 25 |             <ec-view :styles="{textAlign:'center'}">
 26 |               <ec-text :styles="{fontSize:10,maxLine:1,color:'#333'}">{{item.title}}</ec-text>
 27 |             </ec-view>
 28 |             <ec-view v-if="item.tag" :styles="{
 29 |                 position:'absolute',
 30 |                 right:0,
 31 |                 top:-4,
 32 |                 backgroundColor:'#f00',
 33 |                 color:'#fff',
 34 |                 textAlign:'center',
 35 |                 fontSize:8,
 36 |                 lineHeight:12,
 37 |                 padding:[0,4],
 38 |                 borderRadius:7
 39 |               }">
 40 |               <ec-text>{{item.tag}}</ec-text>
 41 |             </ec-view>
 42 |           </ec-view>
 43 |         </ec-view>
 44 | 
 45 |         <ec-view :styles="styles.itemWrapper" v-for="(item,index) in examples" :key="index" :on="{
 46 |             click(e){
 47 |               window.location.href = host + item.url
 48 |             }
 49 |           }">
 50 |           <ec-view :styles="styles.title">
 51 |             <ec-view :styles="{flex:1}">
 52 |               <ec-text>{{item.title}}</ec-text>
 53 |             </ec-view>
 54 |             <ec-image src="/images/arrow-right.png" :styles="{width:20}"></ec-image>
 55 |           </ec-view>
 56 |           <ec-view :styles="styles.desc">
 57 |             <ec-text>{{item.desc}}</ec-text>
 58 |           </ec-view>
 59 |         </ec-view>
 60 | 
 61 |       </ec-scroll-view>
 62 |     </ec-canvas>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script>
 67 | export default {
 68 |   name: 'App',
 69 |   components: {},
 70 |   data() {
 71 |     return {
 72 |       styles: {
 73 |         imageWrapper: { width: '100%', height: 300 },
 74 |         image: { width: '100%', height: '100%', position: 'absolute' },
 75 |         homeTitleWrapper: {
 76 |           backgroundColor: 'rgba(255,255,255,0.5)',
 77 |           fontSize: 30,
 78 |           padding: 10,
 79 |           position: 'absolute',
 80 |           bottom: 0,
 81 |           left: 0,
 82 |           width: '100%',
 83 |           textAlign: 'center',
 84 |         },
 85 |         itemWrapper: {
 86 |           backgroundColor: '#fff',
 87 |           padding: 10,
 88 |           marginBottom: 10,
 89 |         },
 90 |         title: {
 91 |           color: '#333',
 92 |           fontSize: 18,
 93 |           fontWeight: 800,
 94 |           display: 'flex',
 95 |         },
 96 |         desc: { color: '#999' },
 97 |       },
 98 | 
 99 |       examples: [
100 |         { title: 'Basic', desc: '基本布局', url: 'basic.html', tag: 'Hot' },
101 |         { title: 'Event 事件', desc: '事件监听', url: 'event.html' },
102 |         { title: 'Image 图片', desc: '图片缩放类型', url: 'image.html' },
103 |         {
104 |           title: 'Demo',
105 |           desc: '展示了滚动、事件、flex布局、文本换行对齐等能力',
106 |           url: 'test.html',
107 |         },
108 |         { title: 'Test', desc: '测试用', url: 'test1.html' },
109 |       ],
110 |       host: 'https://gitjinfeiyang.github.io/easy-canvas/example/',
111 |       window,
112 |     }
113 |   },
114 | }
115 | </script>
116 | 
117 | <style>
118 | #app {
119 |   text-align: center;
120 |   color: #2c3e50;
121 | }
122 | </style>
123 | 


--------------------------------------------------------------------------------