|
@@ -7,7 +7,8 @@
|
|
|
<div class="list">
|
|
|
<div v-for="item in items">
|
|
|
<img :src="item.icon" />
|
|
|
- <p @click="useClickHandler(item.link)"><img :src="b" /> {{ item.name }}</p>
|
|
|
+ <!-- <img :src="b" /> -->
|
|
|
+ <p @click="useClickHandler(item.link)">{{ item.name }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -17,29 +18,68 @@
|
|
|
<script lang="ts" setup>
|
|
|
const a = "images/err.png";
|
|
|
const b = "images/download.png";
|
|
|
-const items = [
|
|
|
- {
|
|
|
- name: "Firefox",
|
|
|
- icon: "images/ff.png",
|
|
|
- link: "http://www.firefox.com.cn/",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "Microsoft Edge",
|
|
|
- icon: "images/eg.png",
|
|
|
- link: "https://www.microsoft.com/en-us/edge",
|
|
|
- },
|
|
|
- // {
|
|
|
- // icon: "images/safar.png",
|
|
|
- // link: "https://www.apple.com/safari/",
|
|
|
- // },
|
|
|
- {
|
|
|
- name: "Chrome",
|
|
|
- icon: "images/chrome.png",
|
|
|
- link: "https://www.google.com/chrome/",
|
|
|
- },
|
|
|
-];
|
|
|
+
|
|
|
+// 识别国产操作系统逻辑(示例覆盖常见标识,可根据需要补充)
|
|
|
+function isDomesticOS() {
|
|
|
+ const userAgent = navigator.userAgent.toLowerCase();
|
|
|
+ const platform = navigator.platform.toLowerCase();
|
|
|
+ console.log(userAgent, platform, "浏览器标识");
|
|
|
+ // 统信 UOS、银河麒麟、深度 Deepin、中标麒麟等标识
|
|
|
+ return (
|
|
|
+ /uos|kylin|deepin|neokylin/.test(userAgent) ||
|
|
|
+ /linux/.test(platform) ||
|
|
|
+ /国产|中国/.test(userAgent)
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+// 国产浏览器
|
|
|
+const items = isDomesticOS()
|
|
|
+ ? [
|
|
|
+ {
|
|
|
+ name: "Chromiun",
|
|
|
+ icon: "./images/browser_Chromium.png",
|
|
|
+ link: "./images/browser_Chromium.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "奇安信可信浏览器",
|
|
|
+ icon: "./images/browser_Qianxin.png",
|
|
|
+ link: "./images/browser_Qianxin.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "360安全浏览器",
|
|
|
+ icon: "./images/browser_360.png",
|
|
|
+ link: "./images/browser_360.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "火狐",
|
|
|
+ icon: "./images/browser_Firefox.png",
|
|
|
+ link: "./images/browser_Firefox.png",
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ name: "Firefox",
|
|
|
+ icon: "images/ff.png",
|
|
|
+ link: "http://www.firefox.com.cn/",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "Microsoft Edge",
|
|
|
+ icon: "images/eg.png",
|
|
|
+ link: "https://www.microsoft.com/en-us/edge",
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // icon: "images/safar.png",
|
|
|
+ // link: "https://www.apple.com/safari/",
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ name: "Chrome",
|
|
|
+ icon: "images/chrome.png",
|
|
|
+ link: "https://www.google.com/chrome/",
|
|
|
+ },
|
|
|
+ ];
|
|
|
|
|
|
const useClickHandler = (link: string) => {
|
|
|
+ return;
|
|
|
console.log(link);
|
|
|
window.open(link);
|
|
|
};
|
|
@@ -57,6 +97,7 @@ const useClickHandler = (link: string) => {
|
|
|
.content {
|
|
|
color: #999;
|
|
|
text-align: center;
|
|
|
+
|
|
|
> img {
|
|
|
width: 200px;
|
|
|
}
|
|
@@ -80,15 +121,13 @@ const useClickHandler = (link: string) => {
|
|
|
|
|
|
p {
|
|
|
color: #999;
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- width: 16px;
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+
|
|
|
> div {
|
|
|
margin: 0 20px;
|
|
|
+
|
|
|
> img {
|
|
|
width: 70px !important;
|
|
|
}
|