<template>
|
<div class="page-wrapper">
|
<div class="bg-top"></div>
|
|
<!-- 页面内容 -->
|
<div class="content-wrapper">
|
<!-- title -->
|
<h1 class="title">
|
WIFI服务
|
</h1>
|
|
<view class="wifi-card">
|
<view class="h-80"></view>
|
<view class="wifi-item">• WIFI账号: <text class="highlight">JMYBY</text></view>
|
<view class="wifi-item">• WIFI密码: <text class="highlight">jmyby88888888</text></view>
|
<view class="wifi-item">• 覆盖范围: (1)园区主路 (2)景点休息区 (3)餐厅</view>
|
|
<view class="wifi-buttons">
|
<view class="wifi-btn" @click="copyWifiPassword">复制WIFI密码</view>
|
<view class="wifi-btn" @click="connectWifi">（Android）自动连接WIFI</view>
|
</view>
|
<view class="h-80"></view>
|
|
</view>
|
|
|
</div>
|
|
<!-- 底部背景 -->
|
<div class="bg-bottom"></div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
methods: {
|
copyWifiPassword() {
|
const password = 'jmyby88888888' // 你的WIFI密码
|
uni.setClipboardData({
|
data: password,
|
success: () => {
|
// 提示文字
|
uni.showToast({
|
title: '密码已复制',
|
icon: 'none',
|
duration: 1500
|
})
|
},
|
fail: () => {
|
uni.showToast({
|
title: '复制失败',
|
icon: 'error'
|
})
|
}
|
})
|
},
|
connectWifi() {
|
const SSID = 'JMYBY'
|
const PASSWORD = 'jmyby88888888'
|
|
// 检测平台
|
if (uni.getSystemInfoSync().platform !== 'android') {
|
uni.showToast({
|
title: '仅支持安卓手机自动连接',
|
icon: 'none'
|
})
|
return
|
}
|
|
// 初始化 WiFi 模块
|
uni.startWifi({
|
success: () => {
|
// 尝试连接
|
uni.connectWifi({
|
SSID,
|
password: PASSWORD,
|
success: () => {
|
uni.showToast({
|
title: 'WiFi连接成功',
|
icon: 'none'
|
})
|
},
|
fail: (err) => {
|
console.log('连接失败：', err)
|
uni.showToast({
|
title: '连接失败，请手动连接',
|
icon: 'none'
|
})
|
}
|
})
|
},
|
fail: (err) => {
|
console.log('启动WiFi模块失败：', err)
|
uni.showToast({
|
title: '无法启动WiFi模块',
|
icon: 'none'
|
})
|
}
|
})
|
}
|
|
|
}
|
}
|
</script>
|
<style>
|
.page-wrapper {
|
position: relative;
|
min-height: 100vh;
|
/* 确保小内容时填满视口 */
|
overflow: hidden;
|
}
|
|
/* 顶部背景 */
|
.bg-top {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 500rpx;
|
/* 可用固定像素或图片高度 */
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_top.jpg') no-repeat top center;
|
background-size: cover;
|
z-index: 0;
|
}
|
|
/* 底部背景 */
|
.bg-bottom {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 500rpx;
|
/* 可用固定像素或图片高度 */
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_bottom.jpg') no-repeat bottom center;
|
background-size: cover;
|
z-index: 0;
|
}
|
|
/* 内容层 */
|
.content-wrapper {
|
position: relative;
|
z-index: 1;
|
padding: 2rem 1rem;
|
}
|
|
|
/* title 背景 */
|
.title {
|
text-align: center;
|
font-size: 1.5rem;
|
font-weight: bold;
|
padding: 1rem;
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_title.png') center/cover no-repeat;
|
margin-bottom: 1rem;
|
}
|
|
.text-content {
|
margin-top: 1rem;
|
width: 80%;
|
margin-left: auto;
|
margin-right: auto;
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/wifi_bg_content.png') no-repeat center center;
|
background-size: 100% auto;
|
/* 宽度占满容器，高度自适应 */
|
position: relative;
|
z-index: 999;
|
}
|
|
/* 主内容卡片 */
|
.wifi-card {
|
margin: 1rem auto;
|
width: 90%;
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/wifi_bg_content.png') no-repeat center center;
|
background-size: 100% 100%;
|
padding: 1rem;
|
}
|
|
.wifi-item {
|
font-size: 15px;
|
color: #7b4b2c;
|
margin-bottom: 1rem;
|
}
|
|
.highlight {
|
color: #b76e00;
|
font-weight: 600;
|
}
|
|
/* 按钮样式 */
|
.wifi-buttons {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin-top: 3rem;
|
}
|
|
.wifi-btn {
|
width: 80%;
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/wifi_bg_button.png') no-repeat center center;
|
background-size: 100% 100%;
|
text-align: center;
|
padding: 0.6rem 0;
|
font-weight: bold;
|
margin-bottom: 0.6rem;
|
margin-top: 4rem;
|
}
|
|
.videos {
|
flex-direction: column;
|
text-align: center;
|
padding-top: 20rpx;
|
}
|
|
.videos video {
|
margin: auto;
|
}
|
|
.images {
|
text-align: center;
|
/* 子元素 inline/inline-block 会居中 */
|
}
|
|
.images img {
|
width: 100%;
|
max-height: 24rem;
|
margin: 0 auto 1rem;
|
/* 上下外边距为 0 和 1rem，左右为 auto */
|
}
|
|
|
.p-4 {
|
padding: 1rem;
|
}
|
|
.bg-white {
|
background-color: #ffffff;
|
}
|
|
.space-y-6 {
|
margin-top: 1.5rem;
|
}
|
|
.text-2xl {
|
font-size: 1.5rem;
|
line-height: 2rem;
|
}
|
|
.font-bold {
|
font-weight: 700;
|
}
|
|
.text-center {
|
text-align: center;
|
}
|
|
.text-base {
|
font-size: 1rem;
|
line-height: 1.5rem;
|
}
|
|
.text-gray-700 {
|
color: #374151;
|
}
|
|
.space-y-4 {
|
margin-top: 1rem;
|
}
|
|
.w-full {
|
width: 100%;
|
}
|
|
.max-h-96 {
|
max-height: 24rem;
|
/* 384px */
|
}
|
|
.rounded-lg {
|
border-radius: 0.5rem;
|
/* 8px */
|
}
|
|
.h-80 {
|
height: 80rpx
|
}
|
|
.h-200 {
|
height: 200rpx
|
}
|
</style>
|
