yuxiaokui
/
xiaokv


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
							<html>
    <head>
        <meta charset="UTF-8">
        <title>小葵工具站</title>
        <!-- 引入样式 -->
        <link
        rel="stylesheet"
        href="https://unpkg.com/element3/lib/theme-chalk/index.css"
        />
        <!-- 引入Axios -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="app">
        <div v-for="i in data" :key="i" class="text item">
            <el-card class="box-card">
              <template v-slot:header>
                <div class="clearfix">
                  <span>{{ i.name }}</span>
                  <el-button style="float: right; padding: 3px 0" type="text" ><a :href="i.url">访问</a></el-button>
                </div>
              </template>
              <div v-if="i.status_code == 200"><el-button type="success" :loading="true">运行中</el-button></div>
              <div v-else><el-button type="danger" :loading="true">错误</el-button></div>
            </el-card>
        </div>  
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/element3"></script>
    <script>
        Vue.createApp({
          setup() {
            const { ref } = Vue;
            const data = ref([]);

            // 使用Axios发起请求
            const getData = async () =>{ 
                try {
                    const response = await axios.get('./static/data.json');
                    data.value = response.data;
                } catch (error) {
                    console.error(error);
                }
            };
            getData();
            return {
                data
                
            };
          }
        }).use(Element3).mount('#app')
    </script>
    <style>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: '';
    }
    .clearfix:after {
        clear: both;
    }

    .box-card {
        width: 480px;
    }
    </style>
</html>