add icons

bob0627 · Nov 24, 2023 · d9b211c · d9b211c
1 parent 036cd0c
commit d9b211c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -40,7 +40,7 @@
     }
 
     .jn-container {
-      padding-top: 5pt;
+      padding-top: 2pt;
     }
 
     .jn-text {
@@ -97,10 +97,11 @@ <h2>🚦 可用性测试</h2>
           <button @click="checkAllConnectivity" class="btn btn-light"><i class="bi bi-arrow-clockwise"></i></button>
         </div>
         <div class="row">
-          <div v-for="test in connectivityTests" :key="test.id" class="col-md-3 mb-4">
+          <div v-for="test in connectivityTests" :key="test.id" class="col-6 col-md-3 mb-4">
             <div class="card jn-card">
               <div class="card-body">
-                <h5 class="card-title">{{ test.name }}</h5>
+                <h5 class="card-title"><i class="bi" :class="'bi-'+test.icon"></i> {{ test.name }}</h5>
+
                 <p class="card-text"
                   :class="{'text-info': test.status === '检查中...', 'text-success': test.status.includes('可用'), 'text-danger': test.status === '不可用' || test.status === '超时或不可用'}"
                   v-html="test.status">
@@ -114,7 +115,7 @@ <h5 class="card-title">{{ test.name }}</h5>
     </div>
   </div>
 
-  <button id="ip-btn" class="btn btn-primary position-fixed" style="bottom: 20px; right: 20px; z-index: 1000;">IP
+  <button id="ip-btn" class="btn btn-primary position-fixed" style="bottom: 20px; right: 20px; z-index: 1000;"><i class="bi bi-search"></i> IP
     查询</button>
   <div id="ip-modal" class="modal fade" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" style="max-height: 50vh;">

diff --git a/res/app.js b/res/app.js
@@ -7,14 +7,14 @@ new Vue({
             // 其他卡片数据...
         ],
         connectivityTests: [
-            { id: 'netease', name: 'Netease', url: 'https://s2.music.126.net/style/web2/img/frame/topbar.png?', status: '待检测' },
-            { id: 'baidu', name: 'Baidu', url: 'https://www.baidu.com/img/flexible/logo/pc/peak-result.png?', status: '待检测' },
-            { id: 'wechat', name: 'WeChat', url: 'https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico?', status: '待检测' },
-            { id: 'google', name: 'Google', url: 'https://www.google.com/images/errors/robot.png?', status: '待检测' },
-            { id: 'cloudflare', name: 'Cloudflare', url: 'https://www.cloudflare.com/favicon.ico?', status: '待检测' },
-            { id: 'youtube', name: 'Youtube', url: 'https://i.ytimg.com/vi/GYkq9Rgoj8E/hq720.jpg?', status: '待检测' },
-            { id: 'github', name: 'Github', url: 'https://raw.githubusercontent.com/jason5ng32/fulian4/master/background.jpg?', status: '待检测' },
-            { id: 'chatgpt', name: 'ChatGPT', url: 'https://chat.openai.com/favicon.ico?', status: '待检测' }
+            { id: 'netease', name: 'Netease',icon:'globe-americas', url: 'https://s2.music.126.net/style/web2/img/frame/topbar.png?', status: '待检测' },
+            { id: 'baidu', name: 'Baidu', icon:'globe-americas',url: 'https://www.baidu.com/img/flexible/logo/pc/peak-result.png?', status: '待检测' },
+            { id: 'wechat', name: 'WeChat',  icon:'wechat', url: 'https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico?', status: '待检测' },
+            { id: 'google', name: 'Google', icon:'google',url: 'https://www.google.com/images/errors/robot.png?', status: '待检测' },
+            { id: 'cloudflare', name: 'Cloudflare', icon:'cloud-fill',url: 'https://www.cloudflare.com/favicon.ico?', status: '待检测' },
+            { id: 'youtube', name: 'Youtube', icon:'youtube',url: 'https://i.ytimg.com/vi/GYkq9Rgoj8E/hq720.jpg?', status: '待检测' },
+            { id: 'github', name: 'Github', icon:'github',url: 'https://raw.githubusercontent.com/jason5ng32/fulian4/master/background.jpg?', status: '待检测' },
+            { id: 'chatgpt', name: 'ChatGPT', icon:'chat-quote-fill',url: 'https://chat.openai.com/favicon.ico?', status: '待检测' }
 
         ],
         showAlert: false,