<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<title>WI水务智能助手插件 - 你的浏览器AI助手</title>
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/normalize.min.css" /> -->
|
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/preset-icons.global.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script> -->
|
|
<script src="../../lib/vue-3.3.4.js"></script>
|
<!-- <script id="unocss-attributify" src="../../lib/unocss-attributify.global.js" onload="document.body.style.visibility='visible'"></script> -->
|
<link rel="stylesheet" href="index.css" />
|
<style>
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
}
|
|
body {
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
line-height: 1.5;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
}
|
|
a {
|
text-decoration: none;
|
color: inherit;
|
}
|
|
button {
|
border: none;
|
background: none;
|
cursor: pointer;
|
font: inherit;
|
}
|
|
img {
|
max-width: 100%;
|
height: auto;
|
display: block;
|
}
|
|
/* 只保留过渡动画相关样式 */
|
.fade-enter-active,
|
.fade-leave-active {
|
transition: opacity 0.3s ease;
|
}
|
|
.fade-enter-from,
|
.fade-leave-to {
|
opacity: 0;
|
}
|
|
.slide-enter-active,
|
.slide-leave-active {
|
transition: all 0.3s ease;
|
}
|
|
.slide-enter-from,
|
.slide-leave-to {
|
opacity: 0;
|
transform: translate(-50%, -40%);
|
}
|
</style>
|
</head>
|
<body>
|
<div id="app" class="bg-gradient-to-br from-[#E8F3FF] to-[#E5FFFA] min-h-screen font-sans">
|
<div v-if="!isLoading">
|
<!-- 导航栏 -->
|
<nav class="flex justify-between items-center px-8 py-4">
|
<div class="flex items-center">
|
<img
|
src="https://wi.beng35.com/web/test/static/images/logo/logoWithNoName.png"
|
alt="WI 水务智能助手"
|
style="height: 30px"
|
/>
|
<span class="text-gray-600 hover:text-gray-800 transition-colors ml-2">WI 水务智能助手</span>
|
</div>
|
<div class="flex items-center gap-8">
|
<a href="https://wi.beng35.com" target="_blank" class="text-gray-600 hover:text-gray-800 transition-colors">WI 网页端</a>
|
<a href="#" class="text-gray-600 hover:text-gray-800 transition-colors" @click.prevent="openModal">安装教程</a>
|
</div>
|
</nav>
|
|
<!-- 主要内容区 -->
|
<main
|
class="flex flex-col items-center justify-center text-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
>
|
<h2 class="text-gray-600 mb-4 text-lg">WI水务智能助手浏览器插件</h2>
|
<h1 class="text-6xl font-bold mb-12 text-gray-800 text-nowrap">智慧水务，尽在掌握</h1>
|
|
<!-- 按钮组 -->
|
<div class="flex gap-4 mb-12 mt-6">
|
<button
|
class="rounded-full px-8 py-3 flex items-center gap-2 hover:shadow-lg transition-shadow bg-blue-400 text-white active:bg-blue-400 hover:bg-blue-500"
|
@click="handleDownload"
|
>
|
<div class="i-carbon-download text-xl text-gray-600"></div>
|
<span class="text-white">立即下载</span>
|
</button>
|
</div>
|
</main>
|
|
<!-- 模态框 -->
|
<Transition name="fade">
|
<div v-if="showModal" class="fixed inset-0 bg-black/20 backdrop-blur z-50"></div>
|
</Transition>
|
|
<Transition name="slide">
|
<div
|
v-if="showModal"
|
class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-3xl p-8 max-w-90% w-50% z-51"
|
@click.stop
|
>
|
<!-- 模态框头部 -->
|
<div class="flex justify-between items-center mb-8">
|
<h3 class="text-xl font-medium">安装步骤</h3>
|
<button
|
class="w-6 h-6 flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-200"
|
@click="closeModal"
|
>
|
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
width="24"
|
height="24"
|
viewBox="0 0 24 24"
|
fill="none"
|
stroke="currentColor"
|
stroke-width="2"
|
stroke-linecap="round"
|
stroke-linejoin="round"
|
>
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
</svg>
|
</button>
|
</div>
|
|
<!-- 模态框内容 -->
|
<div class="modal-content">
|
<div
|
v-for="(step, index) in steps"
|
:key="index"
|
class="step gap-4"
|
:class="{ 'flex': currentStep === index, 'hidden': currentStep !== index }"
|
>
|
<div class="h-full flex flex-col w-[500px]">
|
<!-- 步骤标题 -->
|
<div class="mt-12 flex items-baseline gap-2 mb-2">
|
<span class="text-2xl font-medium">第{{index + 1}}步</span>
|
<span class="text-gray-500 text-sm">/共 {{steps.length}} 步</span>
|
</div>
|
<div class="flex-auto mt-20">
|
<!-- 步骤描述 -->
|
<div class="flex-auto text-gray-600 mb-6 text-xs flex flex-col gap-4">
|
<div class="flex items-start gap-2" v-for="(desc, i) in step.desc" :key="i">
|
<span
|
v-if="step.desc.length>1"
|
class="rounded-full text-center size-4 flex-shrink-0 text-white bg-[#1a66ff] inline-block"
|
>{{i + 1}}</span
|
>
|
<p class="desc" :data-index="i + 1" :class="[`before:content-[${index + 1}] before:mr-2`]" class="mb-1">
|
{{ desc }}
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 步骤图片 -->
|
<div class="bg-white rounded-2xl">
|
<div class="overflow-hidden rounded-2xl border border-black/10">
|
<img :src="step.image" :alt="`第${index + 1}步`" class="w-full" />
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 模态框底部 -->
|
<div class="flex justify-between mt-8">
|
<button
|
class="px-6 py-2 text-gray-600 rounded-lg hover:bg-black/5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
:disabled="currentStep === 0"
|
@click="prevStep"
|
>
|
上一步
|
</button>
|
<button
|
class="px-6 py-2 bg-[#1a73e8] text-white rounded-lg hover:bg-[#1557b0] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
@click="nextStep"
|
>
|
{{ currentStep === steps.length - 1 ? '完成安装' : '下一步' }}
|
</button>
|
</div>
|
</div>
|
</Transition>
|
</div>
|
<div v-else>
|
<div class="loading-container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
|
<div
|
class="loading-spinner"
|
style="
|
width: 50px;
|
height: 50px;
|
border: 5px solid #f3f3f3;
|
border-top: 5px solid #3498db;
|
border-radius: 50%;
|
animation: spin 1s linear infinite;
|
"
|
></div>
|
</div>
|
</div>
|
</div>
|
|
<script>
|
const { createApp, ref } = Vue;
|
const unocssScript = document.createElement('script');
|
unocssScript.src = '../../lib/unocss-attributify.global.js';
|
document.head.appendChild(unocssScript);
|
const isLoading = ref(true);
|
unocssScript.onload = () => {
|
isLoading.value = false;
|
};
|
|
createApp({
|
setup() {
|
const showModal = ref(false);
|
const currentStep = ref(0);
|
const steps = ref([
|
{
|
desc: ['下载插件后，点击浏览器右上角的"扩展程序"图标', '点击弹框底部"管理扩展程序"，进入扩展程序页面'],
|
image: './image/install-guide-0@2x.jpg',
|
},
|
{
|
desc: ['打开右上角的“开发者模式”'],
|
image: './image/install-guide-1@2x.jpg',
|
},
|
{
|
desc: [ '将zip压缩包（WI水务智能插件.zip）拖入拓展程序页，安装成功！'],
|
image: './image/install-guide-2@2x.jpg',
|
},
|
{
|
desc: ['点击右上角“拓展程序”图标', '将WI水务智能插件固定到工具栏，方便快速唤起，快来体验吧！'],
|
image: './image/install-guide-3@2x.jpg',
|
},
|
]);
|
|
const openModal = () => {
|
showModal.value = true;
|
currentStep.value = 0;
|
};
|
|
const closeModal = () => {
|
showModal.value = false;
|
};
|
|
const prevStep = () => {
|
if (currentStep.value > 0) {
|
currentStep.value--;
|
}
|
};
|
|
const nextStep = () => {
|
if (currentStep.value < steps.value.length - 1) {
|
currentStep.value++;
|
} else {
|
closeModal();
|
}
|
};
|
|
const handleDownload = () => {
|
window.location.href = 'https://wi.beng35.com/download/wi-extension-1.0.6-chrome.zip';
|
};
|
|
return {
|
showModal,
|
currentStep,
|
steps,
|
openModal,
|
closeModal,
|
prevStep,
|
nextStep,
|
handleDownload,
|
isLoading,
|
};
|
},
|
}).mount('#app');
|
</script>
|
</body>
|
</html>
|
