<template>
  <div class="hello">
    <div>
      <h3>示例：使用本地图片资源</h3>
      <img alt="Vue logo" src="@/assets/image/logo.png" />
      <img alt="Vue logo" src="@/assets/svg/Freesample.svg" />
      <hr />
    </div>
    <div>
      <h3>示例：使用fontawesome</h3>
      <div>
        <i class="fas fa-phone"></i>
      </div>
      <div>
        <i class="fas fa-keyboard"></i>
        <i class="far fa-keyboard"></i>
      </div>
      <div>
        <i class="fab fa-angular"></i>
      </div>
      <hr />
    </div>
    <div>
      <h3>
        示例：使用iconfont，从阿里的https://icofont.com/icons下载下来的资源
      </h3>
      <i class="icofont-adjust"></i>
      <i class="icofont-alarm"></i>
      <i class="icofont-addons"></i>
      <i class="icofont-anchor"></i>
      <i class="icofont-audio"></i>
      <hr />
    </div>
    <div>
      <h3>示例：加载视频</h3>
      <video controls>
        <source src="@/assets/video/sample-mp4-file.mp4" type="video/mp4" />
        <p>
          Your browser doesn't support HTML5 video. Here is a
          <a href="@/assets/video/sample-mp4-file.mp4">link to the video</a>
          instead.
        </p>
      </video>
      <hr />
    </div>
    <div>
      <h3>示例：加载json数据</h3>
      <div>{{ data }}</div>
      <hr />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import data from '@/assets/data/example.json';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  setup() {
    return {
      data,
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
