JSFiddle - React, Tailwind, and code Playground

by zhouzhijun01

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="//unpkg.com/[email protected]/dist/axios.min.js"></script>
<div id="app">
  <template>
    {{response}}
  </template>
</div>

CSS

@import url("//unpkg.com/element-ui/lib/theme-default/index.css");
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

JavaScript

var Main = {
    data() {
      return {
         response: null
      }
    },
    mounted(){
    	axios({
      	url: 'http://172.16.225.15:8084/sop/api/core/userInfo',
        method: 'get',
        headers: {
        	'Content-Type': 'text/plain'
        }
      })
            .then(res => {
                this.response = res
            })
            .catch(err => {
                this.response = err
            })
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')