<comment>
    # 组件注释
</comment>
<template>
    <div class="imageDoc">
      <h1 class="h1title" >
        {{titles[0].title}}
      </h1>
      <div class="code">
        <img :src="titles[0].image" :width=getRem() :height=getRem()>
        <br/>
        <span>其中比较重要的是项目里面的</span><span style="color:#E53333;">static</span><span>文件夹</span>
      </div>
      <h1 class="h1title" >
        {{titles[1].title}}
      </h1>
      <img :src="titles[1].image" :width=getRem() :height=getRem()>
      <h1 class="h1title" >
        {{titles[2].title}}
      </h1>
      <img :src="titles[2].image" :width=getRem() :height=getRem()>

      <h1 class="h1title" >
        {{titles[3].title}}
      </h1>
      <div class="code">
        <p>
        <pre class="prettyprint lang-js">&lt;comment&gt;
    # 组件注释
&lt;/comment&gt;
&lt;template&gt;
    &lt;div class="imageDoc"&gt;
      &lt;h1 class="h1title" &gt;
        {{titles[0].title}}
      &lt;/h1&gt;
      &lt;div class="code"&gt;
        &lt;img :src="titles[0].image"&gt;
        &lt;br/&gt;
        &lt;span&gt;其中比较重要的是项目里面的&lt;/span&gt;&lt;span style="color:#E53333;"&gt;static&lt;/span&gt;&lt;span&gt;文件夹&lt;/span&gt;
      &lt;/div&gt;
      &lt;h1 class="h1title" &gt;
        {{titles[1].title}}
      &lt;/h1&gt;
      &lt;img :src="titles[1].image"&gt;
      &lt;h1 class="h1title" &gt;
        {{titles[2].title}}
      &lt;/h1&gt;
      &lt;img :src="titles[2].image"&gt;

      &lt;h1 class="h1title" &gt;
        {{titles[3].title}}
      &lt;/h1&gt;
      &lt;div class="code"&gt;

      &lt;/div&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import imagelocation from '../../../static/imageDoc/location.jpg'
  import logo from '../../../static/logo.png'

    export default {
        name: 'imageDoc',
        components: {
            //Xgplayer :  () =&gt; import('../xgplayer'),
        },
        data() {
            return {
              titles : [
                {
                  title : '图片文件放到正确的文件夹',
                  image : imagelocation
                },
                {
                  title : '本地图片',
                  image : logo
                },
                {
                  title : '网络图片',
                  image : 'https://timgsa.baidu.com/timg?image&amp;
        quality=80&amp;size=b9999_10000&amp;sec=1564653564406&amp;di=3cb2616df1054cb5621858742e48a869&amp;
        imgtype=0&amp;src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%
        2Fitem%2Fd1a20cf431adcbefdc7ef0eba2af2edda2cc9f91.jpg'
                },
                {
                  title : '代码部分',
                }
              ],

            }
        },
        //作为子组件的时候应用父组件的时候设定的变量
        props: {},
        //用来观察 方法 对象 变量 有变化 走的回调方法
        watch: {},
        //正常方法
        methods: {},
        //计算方法
        computed: {},
        //生命周期 渲染html之前 可以初始化数据
        created() {

        },
        //生命周期 渲染html完毕 可以dom操作
        mounted() {

        },
        //生命周期 离开这个页面
        destroyed() {

        }
    }
&lt;/script&gt;

&lt;style scoped&gt;

&lt;/style&gt;
</pre>
        </p>
      </div>
    </div>
</template>

<script>
  import imagelocation from '../../../static/imageDoc/location.jpg'
  import logo from '../../../static/logo.png'

    export default {
        name: 'imageDoc',
        components: {
            //Xgplayer :  () => import('../xgplayer'),
        },
        data() {
            return {

              rempx : "700rem",

              titles : [
                {
                  title : '图片文件放到正确的文件夹',
                  image : imagelocation
                },
                {
                  title : '本地图片',
                  image : logo
                },
                {
                  title : '网络图片',
                  image : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564653564406&di=3cb2616df1054cb5621858742e48a869&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd1a20cf431adcbefdc7ef0eba2af2edda2cc9f91.jpg'
                },
                {
                  title : '代码部分',
                }
              ],

            }
        },
        //作为子组件的时候应用父组件的时候设定的变量
        props: {},
        //用来观察 方法 对象 变量 有变化 走的回调方法
        watch: {},
        //正常方法
        methods: {
          showPC(){
            this._pc = true;
            this._mobile = false;


          },
          showMobile(){
            this._pc = false;
            this._mobile = true;
            // this.switchs()
          },
          getRem(){
            var temp = "1rem"
            if (this._pc) {
              temp = "700rem"
            }else {
              temp = "200rem"
            }

            return temp
          },
        },
        //计算方法
        computed: {},
        //生命周期 渲染html之前 可以初始化数据
        created() {
          if (this.utils.isMobile()) {
            // alert("手机")
            this.showMobile()
          }else{
            // alert("PC")
            this.showPC()
          }
        },


        //生命周期 渲染html完毕 可以dom操作
        mounted() {

        },
        //生命周期 离开这个页面
        destroyed() {

        }
    }
</script>

<style scoped>

</style>
