<template>
|
<div class="flex flex-col min-h-screen bg-white">
|
|
<view class="mt-2"></view>
|
|
<!-- 上部：宣传视频 -->
|
<!--
|
<section class="bg-black flex justify-center items-center">
|
<img v-show="!isVideoPlaying" class="w-full max-w-1200px aspect-video object-cover cursor-pointer"
|
:src="ASSETS.video.promoImg"
|
alt="Video Cover"
|
@click="playVideo" />
|
<video v-show="isVideoPlaying" class="w-full max-w-1200px aspect-video object-cover" :src="ASSETS.video.promo" autoplay loop playsinline
|
controls></video>
|
</section>
|
-->
|
<section class="bg-black flex justify-center items-center">
|
<div class="relative w-full max-w-1200px aspect-video">
|
<!-- 封面图，点击后隐藏 -->
|
<img v-if="!isVideoPlaying" class="w-full h-full object-cover cursor-pointer"
|
:src="ASSETS.video.promoImg" alt="Video Cover" @click="playVideo" />
|
|
<!-- 视频 -->
|
<video v-if="isVideoPlaying" class="w-full h-full object-cover" :src="ASSETS.video.promo" autoplay loop
|
playsinline controls></video>
|
</div>
|
</section>
|
|
<!-- 中部：功能区 -->
|
<section class="p-4 mt-2 bg-white">
|
<div class="flex flex-wrap justify-between p-4">
|
<!-- 单个功能按钮 -->
|
<div class="flex flex-col items-center w-1-5" @click="goToGuide">
|
<div class="flex items-center justify-center w-12 h-12 rounded-full mb-2">
|
<img :src="`https://farm.evcc.top/Uploads/yuanboyuan/index/01.png`" mode="aspectFill" alt="icon"
|
class="w-24 h-16" />
|
</div>
|
<span class="text-xs text-center">景点导览</span>
|
</div>
|
|
<div class="flex flex-col items-center w-1-5" @click="goTo('hotels')">
|
<div class="flex items-center justify-center w-12 h-12 rounded-full mb-2">
|
<img :src="`https://farm.evcc.top/Uploads/yuanboyuan/index/02.png`" mode="aspectFill" alt="icon"
|
class="w-24 h-16" />
|
</div>
|
<span class="text-xs text-center">酒店介绍</span>
|
</div>
|
|
<div class="flex flex-col items-center w-1-5" @click="goTo('foods')">
|
<div class="flex items-center justify-center w-12 h-12 rounded-full mb-2">
|
<img :src="`https://farm.evcc.top/Uploads/yuanboyuan/index/03.png`" mode="aspectFill" alt="icon"
|
class="w-24 h-16" />
|
</div>
|
<span class="text-xs text-center">美食推荐</span>
|
</div>
|
|
<div class="flex flex-col items-center w-1-5" @click="goTo('traffic')">
|
<div class="flex items-center justify-center w-12 h-12 rounded-full mb-2">
|
<img :src="`https://farm.evcc.top/Uploads/yuanboyuan/index/04.png`" mode="aspectFill" alt="icon"
|
class="w-24 h-16" />
|
</div>
|
<span class="text-xs text-center">交通指南</span>
|
</div>
|
|
<div class="flex flex-col items-center w-1-5" @click="gotoMini">
|
<div class="flex items-center justify-center w-12 h-12 rounded-full mb-2">
|
<img :src="`https://farm.evcc.top/Uploads/yuanboyuan/index/05.png`" mode="aspectFill" alt="icon"
|
class="w-24 h-16" />
|
</div>
|
<span class="text-xs text-center">停车场</span>
|
</div>
|
|
<!-- 第二行 -->
|
<div class="flex flex-col items-center w-1-5 mt-4" @click="callRescue">
|
<div class="flex items-center justify-center w-12 h-12 rounded-full mb-2">
|
<img :src="`https://farm.evcc.top/Uploads/yuanboyuan/index/06.png`" mode="aspectFill" alt="icon"
|
class="w-24 h-16" />
|
</div>
|
<span class="text-xs text-center">游客救援</span>
|
</div>
|
|
<div class="flex flex-col items-center w-1-5 mt-4" @click="goTo('advice')">
|
<div class="flex items-center justify-center w-12 h-12 rounded-full mb-2">
|
<img :src="`https://farm.evcc.top/Uploads/yuanboyuan/index/07.png`" mode="aspectFill" alt="icon"
|
class="w-24 h-16" />
|
</div>
|
<span class="text-xs text-center">投诉建议</span>
|
</div>
|
|
<div class="flex flex-col items-center w-1-5 mt-4" @click="goTo('booking')">
|
<div class="flex items-center justify-center w-12 h-12 rounded-full mb-2">
|
<img :src="`https://farm.evcc.top/Uploads/yuanboyuan/index/08.png`" mode="aspectFill" alt="icon"
|
class="w-24 h-16" />
|
</div>
|
<span class="text-xs text-center">分时预约</span>
|
</div>
|
|
<div class="flex flex-col items-center w-1-5 mt-4" @click="goTo('wifi')">
|
<div class="flex items-center justify-center w-12 h-12 rounded-full mb-2">
|
<img :src="`https://farm.evcc.top/Uploads/yuanboyuan/index/09.png`" mode="aspectFill" alt="icon"
|
class="w-24 h-16" />
|
</div>
|
<span class="text-xs text-center">无线WIFI</span>
|
</div>
|
|
<div class="flex flex-col items-center w-1-5 mt-4" @click="goTo('vr-page')">
|
<!--<div class="flex flex-col items-center w-1-5 mt-4" @click="gotoVR">-->
|
<div class="flex items-center justify-center w-12 h-12 rounded-full mb-2">
|
<img :src="`https://farm.evcc.top/Uploads/yuanboyuan/index/10.png`" mode="aspectFill" alt="icon"
|
class="w-24 h-16" />
|
</div>
|
<span class="text-xs text-center">全景VR</span>
|
</div>
|
</div>
|
</section>
|
|
<section class="p-4 mt-2 bg-white rounded-lg flex justify-center">
|
<div class="w-full max-w-md">
|
<img :src="currentImage" mode="aspectFill" alt="轮播图片"
|
class="w-full h-64 object-cover rounded-lg transition-opacity duration-500" />
|
</div>
|
</section>
|
|
<section class="p-4 mt-2 bg-white rounded-lg " @click="goTo('notices')">
|
<div class="flex justify-between items-center mb-4">
|
<h2 class="text-lg font-semibold mb-2">景区资讯</h2>
|
<div class="flex right mb-4">
|
<view class="text-blue-500 text-sm flex items-center" @tap="goTo('notices')">
|
更多❯❯
|
</view>
|
</div>
|
|
</div>
|
|
<div class="relative w-full h-40 overflow-hidden">
|
<div v-for="(item, index) in visibleNotices" :key="item.id" class="flex items-start mb-2">
|
<div class="w-24 h-16 flex-shrink-0 mr-2 rounded-5">
|
<img :src="parseContentImg(item.content) || `https://farm.evcc.top/Uploads/yuanboyuan/news/${encodeURIComponent(item.category)}.jpg`"
|
mode="aspectFill" alt="icon" class="w-24 h-16 rounded-5" />
|
|
</div>
|
<div class="flex-1">
|
<div class="text-base font-medium text-gray-800 truncate">
|
{{ item.title.length > 18 ? item.title.slice(0, 18) + '……' : item.title }}
|
</div>
|
<div class="text-xs text-gray-500 mt-0-5">{{ item.createTime }}</div>
|
</div>
|
</div>
|
</div>
|
</section>
|
|
|
<!-- 下部：景点图 -->
|
<section class="p-4 mt-2">
|
<!-- 标题栏 -->
|
<div class="flex justify-between items-center mb-4">
|
<!-- 左侧标题 -->
|
<h2 class="text-lg font-semibold">园区景点</h2>
|
|
<!-- 右侧更多按钮 -->
|
<!--
|
<div class="flex justify-between right mb-4">
|
<button class="text-blue-500 text-sm flex items-center" @click="goTo('scenic-list')">
|
更多>;
|
</button>
|
</div>
|
-->
|
</div>
|
|
<!-- 景点网格，每行3个 -->
|
<div class="grid grid-cols-3 gap-4">
|
<div v-for="(scenic, index) in ASSETS.spots" :key="index"
|
class="bg-white rounded-xl overflow-hidden shadow" @click="goToSpotDetail(scenic)">
|
<img :src="scenic.imgUrl" alt="" class="w-full h-24 object-cover">
|
<div class="p-2 text-xs text-center font-bold">{{ scenic.name }}</div>
|
</div>
|
</div>
|
</section>
|
|
<view v-if="!userStore.username && showAuth" class="auth-popup">
|
<view class="auth-content">
|
<view class="auth-title">荆门市园博园 申请</view>
|
|
<view class="auth-info">
|
将获取您的微信昵称、头像和性别
|
</view>
|
|
<view class="auth-buttons">
|
<view class="auth-btn cancel" @click="getUserinfoCancel">取消</view>
|
<view class="auth-btn allow" @click="getUserinfoAllow">允许</view>
|
<!--<button open-type="getUserProfile" @getuserinfo="handleGetUserInfo">
|
获取微信授权
|
</button>-->
|
|
</view>
|
</view>
|
</view>
|
|
</div>
|
</template>
|
|
<script>
|
import {
|
ASSETS
|
} from './assets.js';
|
import {
|
ref,
|
onMounted,
|
onUnmounted
|
} from 'vue';
|
import {
|
apiService
|
} from '@/apiservice/apiService';
|
import {
|
useUserStore
|
} from '@/stores/user'
|
|
const userStore = useUserStore()
|
|
export default {
|
name: 'Home',
|
data() {
|
return {
|
ASSETS,
|
isVideoPlaying: false,
|
currentImage: '', // 当前轮播图片
|
currentIndex: 0, // 当前图片索引
|
noticesList: [], // 后台数据
|
visibleNotices: [], // 当前显示的3条
|
noticeIndex: 0, // 当前起始索引
|
noticeTimer: null, // 定时器
|
userStore: userStore,
|
showAuth: true
|
}
|
},
|
onShareAppMessage() {
|
return {
|
title: '欢迎来荆门市园博园游玩！',
|
path: '/pages/index/index'
|
}
|
},
|
onShareTimeline() {
|
return {
|
title: '欢迎来荆门市园博园游玩！'
|
}
|
},
|
methods: {
|
goToGuide() {
|
uni.switchTab({
|
url: '/pages/guide/guide'
|
})
|
},
|
goTo(page) {
|
//alert(`跳转到 ${page} 页面`);
|
//this.$router.push(`/pages/index/${page}`)
|
uni.navigateTo({
|
url: `/pages/index/${page}`
|
})
|
},
|
playVideo() {
|
this.isVideoPlaying = true;
|
},
|
gotoVR() {
|
uni.showModal({
|
title: '提示',
|
content: '小程序无法直接打开全景页面，是否在浏览器中查看？',
|
success: (res) => {
|
if (res.confirm) {
|
uni.openUrl({
|
url: ASSETS.vr_url
|
})
|
}
|
}
|
})
|
|
},
|
gotoMini() {
|
//alert(`需要在正式环境下生效`);
|
uni.navigateToMiniProgram({
|
appId: ASSETS.parking_appid, // 目标小程序的 AppID
|
//path: 'pages/index/index', // 打开的页面路径，可选
|
//extraData: {
|
// foo: 'bar'
|
//}, // 传递参数，可选
|
envVersion: 'release', // 打开版本：develop / trial / release
|
success(res) {
|
console.log('跳转成功', res);
|
},
|
fail(err) {
|
console.error('跳转失败', err);
|
}
|
});
|
},
|
goToSpotDetail(spot) {
|
//alert(`跳转到景点详情：${spot.name}`);
|
//this.$router.push(`/pages/index/scenic-detail?id=${spot.id}&t=${Date.now()}`)
|
uni.setStorageSync('scenic_id', spot.id)
|
uni.navigateTo({
|
url: `/pages/index/scenic-detail?id=${spot.id}&t=${Date.now()}`
|
})
|
},
|
callRescue() {
|
uni.showModal({
|
title: "提示",
|
content: `是否拨打救援电话：${ASSETS.rescure_phoneNumber}`,
|
cancelText: "取消",
|
confirmText: "拨打",
|
success: (res) => {
|
if (res.confirm) {
|
uni.makePhoneCall({
|
phoneNumber: ASSETS.rescure_phoneNumber
|
});
|
}
|
}
|
});
|
},
|
startCarousel() {
|
if (!ASSETS.jiaonang || ASSETS.jiaonang.length === 0) return;
|
|
// 初始显示第一张
|
this.currentImage = ASSETS.jiaonang[0];
|
this.currentIndex = 0;
|
|
// 每隔3秒切换
|
this.carouselInterval = setInterval(() => {
|
this.currentIndex = (this.currentIndex + 1) % ASSETS.jiaonang.length;
|
this.currentImage = ASSETS.jiaonang[this.currentIndex];
|
}, 3000);
|
},
|
stopCarousel() {
|
if (this.carouselInterval) {
|
clearInterval(this.carouselInterval);
|
this.carouselInterval = null;
|
}
|
},
|
updateVisibleNotices() {
|
const total = this.noticesList.length;
|
if (total === 0) return;
|
|
// 从 noticeIndex 开始取 3 条，循环取
|
this.visibleNotices = [];
|
for (let i = 0; i < 3; i++) {
|
this.visibleNotices.push(this.noticesList[(this.noticeIndex + i) % total]);
|
}
|
|
// 更新起始索引
|
this.noticeIndex = (this.noticeIndex + 1) % total;
|
},
|
|
// 启动定时器
|
startNoticeRotation() {
|
this.updateVisibleNotices(); // 初始化显示
|
this.noticeTimer = setInterval(() => {
|
this.updateVisibleNotices();
|
}, 5000); // 每5秒切换一次，可根据需求调整
|
},
|
|
stopNoticeRotation() {
|
if (this.noticeTimer) clearInterval(this.noticeTimer);
|
},
|
|
// 获取数据
|
async fetchNotices() {
|
try {
|
const res = await apiService.noticeList(); // 假设返回数组
|
this.noticesList = res.data;
|
this.startNoticeRotation();
|
//this.updateVisibleNotices(); // 初始化显示
|
|
} catch (err) {
|
console.error('获取公告失败', err);
|
}
|
},
|
parseContentImg(content) {
|
if (!content || typeof content !== 'string') {
|
return null;
|
}
|
const imgMatch = content.match(/<img[^>]+src=["']?([^"'>]+)["']?/i);
|
const imgSrc = imgMatch ? imgMatch[1] : null;
|
return imgSrc;
|
},
|
getUserinfoCancel() {
|
this.showAuth = false;
|
|
},
|
async handleGetUserInfo(e) {
|
console.log("getUserProfile detail:", e.detail);
|
if (e.detail.errMsg === "getUserProfile:ok") {
|
const userInfo = e.detail.userInfo;
|
const jsonData = {
|
id: userStore.id,
|
uuid: userStore.uuid,
|
username: userInfo.nickName,
|
sex: userInfo.gender === 2 ? "female" : "male",
|
avatarurl: userInfo.avatarUrl
|
};
|
|
if (jsonData.id) {
|
try {
|
const res = await apiService.touristUpdate(jsonData);
|
if (res.code === 1000) {
|
userStore.saveUserInfo({
|
username: jsonData.username,
|
avatarUrl: jsonData.avatarurl,
|
sex: jsonData.sex
|
});
|
uni.showToast({
|
title: "更新成功",
|
icon: "success"
|
});
|
} else {
|
uni.showToast({
|
title: "更新失败",
|
icon: "error"
|
});
|
}
|
} catch (err) {
|
console.error(err);
|
uni.showToast({
|
title: "网络错误",
|
icon: "error"
|
});
|
}finally{
|
this.showAuth = false;
|
}
|
}
|
this.showAuth = false;
|
} else {
|
console.log("用户拒绝授权");
|
}
|
this.showAuth = false;
|
},
|
async getUserinfoAllow() {
|
uni.navigateTo({
|
url: `/pages/ucenter/settings`
|
})
|
/*
|
uni.getUserProfile({
|
desc: '获取微信公开信息-昵称和头像',
|
success: (infoRes) => {
|
const userInfo = infoRes.userInfo
|
const jsonData = {
|
id: userStore.id,
|
uuid: userStore.uuid,
|
username: userInfo.nickName,
|
sex: userInfo.gender == 2 ? "female" : "male",
|
phone: userStore.phone,
|
avatarurl: userInfo.avatarUrl
|
};
|
console.log(jsonData)
|
|
if (jsonData.id) {
|
apiService.touristUpdate(jsonData).then((res) => {
|
if (res.code === 1000) {
|
console.log('后端请求执行成功:')
|
console.log(res)
|
|
uni.showModal({
|
title: '更新成功',
|
content: res.message,
|
showCancel: false,
|
confirmText: '确定'
|
});
|
userStore.saveUserInfo({
|
username: jsonData.username,
|
avatarUrl: jsonData.avatarurl,
|
sex: jsonData.sex,
|
phone: ''
|
});
|
|
} else {
|
uni.showModal({
|
title: '更新失败',
|
content: res.message,
|
showCancel: false,
|
confirmText: '确定'
|
});
|
console.warn('游客更新失败:', res.message)
|
}
|
this.showAuth = false;
|
}).catch((err) => {
|
console.error('游客更新错误:', err)
|
this.showAuth = false;
|
})
|
}
|
},
|
fail: (err) => {
|
console.error('获取用户信息失败:', err);
|
this.showAuth = false;
|
}
|
});
|
*/
|
}
|
|
},
|
mounted() {
|
this.startCarousel();
|
this.fetchNotices();
|
|
},
|
beforeUnmount() {
|
this.stopCarousel();
|
this.stopNoticeRotation();
|
}
|
}
|
</script>
|
|
<style>
|
/* transition-opacity */
|
.transition-opacity {
|
transition-property: opacity;
|
}
|
|
/* duration-500 (500ms) */
|
.duration-500 {
|
transition-duration: 1000ms;
|
}
|
|
.flex {
|
display: flex;
|
}
|
|
.flex-col {
|
flex-direction: column;
|
}
|
|
.min-h-screen {
|
min-height: 100vh;
|
}
|
|
.bg-gray-100 {
|
background-color: #f3f4f6;
|
}
|
|
.p-10 {
|
padding: 10px;
|
}
|
|
.bg-black {
|
background-color: #000000;
|
}
|
|
.justify-center {
|
justify-content: center;
|
}
|
|
.items-center {
|
align-items: center;
|
}
|
|
.w-full {
|
width: 100%;
|
}
|
|
.h-full {
|
height: 100%;
|
}
|
|
.max-w-120px {
|
max-width: 1200px;
|
}
|
|
.aspect-video {
|
aspect-ratio: 16/9;
|
}
|
|
.object-cover {
|
object-fit: cover;
|
}
|
|
.p-4 {
|
padding: 1rem;
|
/* 16px */
|
}
|
|
.p-2 {
|
padding: 0.5rem;
|
/* 16px */
|
}
|
|
.bg-white {
|
background-color: #ffffff;
|
}
|
|
.flex-wrap {
|
flex-wrap: wrap;
|
}
|
|
.justify-between {
|
justify-content: space-between;
|
}
|
|
.font-bold {
|
font-weight: bold;
|
}
|
|
.w-1-5 {
|
width: 20%;
|
}
|
|
.items-center {
|
align-items: center;
|
}
|
|
.w-12 {
|
width: 3rem;
|
/* 48px */
|
}
|
|
.h-12 {
|
height: 3rem;
|
/* 48px */
|
}
|
|
.bg-blue-500 {
|
background-color: #3b82f6;
|
}
|
|
.bg-green-500 {
|
background-color: #10b981;
|
}
|
|
.bg-red-500 {
|
background-color: #ef4444;
|
}
|
|
.bg-yellow-500 {
|
background-color: #f59e0b;
|
}
|
|
.bg-purple-500 {
|
background-color: #8b5cf6;
|
}
|
|
.bg-indigo-500 {
|
background-color: #6366f1;
|
}
|
|
.bg-pink-500 {
|
background-color: #ec4899;
|
}
|
|
.bg-teal-500 {
|
background-color: #14b8a6;
|
}
|
|
.bg-gray-700 {
|
background-color: #374151;
|
}
|
|
.bg-orange-500 {
|
background-color: #f97316;
|
}
|
|
.rounded-full {
|
border-radius: 9999px;
|
}
|
|
.rounded-5 {
|
border-radius: 5px;
|
}
|
|
.mb-2 {
|
margin-bottom: 0.5rem;
|
}
|
|
.mt-2 {
|
margin-top: 0.5rem;
|
}
|
|
.text-white {
|
color: #ffffff;
|
}
|
|
.text-2xl {
|
font-size: 1.5rem;
|
line-height: 2rem;
|
}
|
|
.text-xs {
|
font-size: 0.75rem;
|
line-height: 1rem;
|
}
|
|
.text-center {
|
text-align: center;
|
}
|
|
.mt-4 {
|
margin-top: 1rem;
|
}
|
|
.max-w-md {
|
max-width: 28rem;
|
/* 448px */
|
}
|
|
.rounded-full {
|
border-radius: 9999px;
|
}
|
|
.rounded-xl {
|
border-radius: 12px;
|
}
|
|
.overflow-hidden {
|
overflow: hidden;
|
}
|
|
.h-16 {
|
height: 4rem;
|
/* 64px */
|
}
|
|
.h-32 {
|
height: 5rem;
|
/* 64px */
|
}
|
|
.h-64 {
|
height: 10rem;
|
}
|
|
.grid {
|
display: grid;
|
}
|
|
.grid-cols-3 {
|
grid-template-columns: repeat(3, 1fr);
|
}
|
|
.gap-4 {
|
gap: 1rem;
|
/* 16px */
|
}
|
|
.shadow {
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
}
|
|
.p-2 {
|
padding: 0.5rem;
|
}
|
|
.text-lg {
|
font-size: 1.125rem;
|
line-height: 1.75rem;
|
}
|
|
.font-semibold {
|
font-weight: 600;
|
}
|
|
.text-blue-500 {
|
color: #3b82f6;
|
}
|
|
.text-sm {
|
font-size: 0.875rem;
|
line-height: 1.25rem;
|
}
|
|
.text-base {
|
font-size: 1rem;
|
line-height: 1.5rem;
|
}
|
|
.mb-4 {
|
margin-bottom: 1rem;
|
}
|
|
.h-24 {
|
height: 4rem
|
}
|
|
.h-40 {
|
height: 8rem
|
}
|
|
/* 容器 */
|
.w-full {
|
width: 100%;
|
}
|
|
.p-4 {
|
padding: 1rem;
|
/* 16px */
|
}
|
|
.bg-white {
|
background-color: #ffffff;
|
}
|
|
.rounded-lg {
|
border-radius: 0.5rem;
|
/* 8px */
|
}
|
|
.shadow-md {
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
|
}
|
|
/* 标题 */
|
.text-lg {
|
font-size: 1.125rem;
|
/* 18px */
|
line-height: 1.75rem;
|
/* 28px */
|
}
|
|
.font-semibold {
|
font-weight: 600;
|
}
|
|
.mb-2 {
|
margin-bottom: 0.5rem;
|
/* 8px */
|
}
|
|
/* 显示区域 */
|
.relative {
|
position: relative;
|
}
|
|
.h-40 {
|
height: 10rem;
|
/* 160px */
|
}
|
|
.overflow-hidden {
|
overflow: hidden;
|
}
|
|
/* 单行条目 */
|
.flex {
|
display: flex;
|
}
|
|
.items-start {
|
align-items: flex-start;
|
}
|
|
.mb-2 {
|
margin-bottom: 0.5rem;
|
/* 8px */
|
}
|
|
/* 左侧图标 */
|
.w-8 {
|
width: 2rem;
|
/* 32px */
|
}
|
|
.h-8 {
|
height: 2rem;
|
/* 32px */
|
}
|
|
.w-24 {
|
width: 4rem;
|
/* 32px */
|
|
}
|
|
.h-16 {
|
height: 3rem;
|
/* 32px */
|
}
|
|
|
.flex-shrink-0 {
|
flex-shrink: 0;
|
}
|
|
.mr-2 {
|
margin-right: 0.5rem;
|
/* 8px */
|
}
|
|
.rounded-5 {
|
border-radius: 5px;
|
}
|
|
/* 图片 */
|
img {
|
display: block;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
/* 对应 mode="aspectFill" */
|
}
|
|
/* 右侧内容 */
|
.flex-1 {
|
flex: 1 1 0%;
|
}
|
|
/* 标题 */
|
.text-sm {
|
font-size: 0.875rem;
|
/* 14px */
|
line-height: 1.25rem;
|
/* 20px */
|
}
|
|
.font-medium {
|
font-weight: 500;
|
}
|
|
.text-gray-800 {
|
color: #1f2937;
|
/* 深灰色 */
|
}
|
|
.truncate {
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
/* 发布时间 */
|
.text-xs {
|
font-size: 0.75rem;
|
/* 12px */
|
line-height: 1rem;
|
/* 16px */
|
}
|
|
.text-gray-500 {
|
color: #6b7280;
|
/* 浅灰色 */
|
}
|
|
.mt-0-5 {
|
margin-top: 0.125rem;
|
/* 2px */
|
}
|
|
/* 弹窗 */
|
.auth-popup {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 30%;
|
background-color: #fff;
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
|
z-index: 100;
|
display: flex;
|
justify-content: center;
|
align-items: flex-start;
|
/* 弹窗内容靠上 */
|
}
|
|
.auth-content {
|
width: 90%;
|
}
|
|
/* 第一行标题靠左靠上 */
|
.auth-title {
|
margin-top: 10rpx;
|
font-size: 16px;
|
font-weight: bold;
|
text-align: left;
|
margin-bottom: 12px;
|
}
|
|
/* 第二行文字靠左，上下居中 */
|
.auth-info {
|
font-size: 14px;
|
color: #555;
|
text-align: left;
|
display: flex;
|
align-items: center;
|
/* 上下居中 */
|
height: 40px;
|
/* 可根据需要调整 */
|
margin-bottom: 16px;
|
}
|
|
.auth-buttons {
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.auth-btn {
|
width: 100px;
|
padding: 8px 0;
|
border-radius: 4px;
|
text-align: center;
|
font-weight: bold;
|
}
|
|
.auth-btn.cancel {
|
background-color: #eee;
|
color: #333;
|
}
|
|
.auth-btn.allow {
|
background-color: #007aff;
|
color: #fff;
|
}
|
</style>
|
