<template>
|
<view class="page-wrapper">
|
<div class="bg-top"></div>
|
|
<div class="content-wrapper">
|
<view style="display: flex; justify-content: center; gap: 16px; margin-bottom: 16px;">
|
<view
|
style="flex: 1; text-align: center; padding: 12px 16px; border-radius: 8px; font-weight: bold; font-size: 16px; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"
|
:style="currentTab === 'in' ? 'background-color: #2563eb; color: #ffffff;' : 'background-color: #e5e7eb; color: #4b5563; opacity: 0.8;'"
|
@click="currentTab = 'in'">
|
园内交通
|
</view>
|
<view
|
style="flex: 1; text-align: center; padding: 12px 16px; border-radius: 8px; font-weight: bold; font-size: 16px; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"
|
:style="currentTab === 'out' ? 'background-color: #2563eb; color: #ffffff;' : 'background-color: #e5e7eb; color: #4b5563; opacity: 0.8;'"
|
@click="currentTab = 'out'">
|
园外交通
|
</view>
|
</view>
|
|
<!-- Content Area -->
|
<view style="padding: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
|
<block v-if="currentTab === 'in'">
|
<view style="display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: #1f2937;">
|
<view style="font-weight: bold; margin-bottom: 8px;">园内交通信息</view>
|
<view>1. 观光车：20元/人，可上下车三次;</view>
|
<view>2. 扫码电瓶车（3-4人）;30元半小时，半小时起租，超时按1元/分钟加收;</view>
|
</view>
|
</block>
|
<block v-else>
|
<view style="display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: #1f2937;">
|
<view style="font-weight: bold; margin-bottom: 8px;">园外交通信息</view>
|
<view>1. 市内公交到园区东门乘坐69路;</view>
|
<view>2. 市内公交到园区南门乘坐13/16/58/68路;</view>
|
<view>3. 市内公交到园区西门乘坐13/69/81路;</view>
|
</view>
|
</block>
|
</view>
|
</div>
|
<div class="bg-bottom"></div>
|
|
</view>
|
</template>
|
|
|
<script>
|
export default {
|
data() {
|
return {
|
currentTab: 'in'
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.p-4 {
|
padding: 1rem;
|
/* 16px */
|
}
|
|
.flex {
|
display: flex;
|
}
|
|
.flex-1 {
|
flex: 1 1 0%;
|
}
|
|
.text-center {
|
text-align: center;
|
}
|
|
.py-2 {
|
padding-top: 0.5rem;
|
/* 8px */
|
padding-bottom: 0.5rem;
|
}
|
|
.mb-4 {
|
margin-bottom: 1rem;
|
}
|
|
.border-b {
|
border-bottom-width: 1px;
|
border-style: solid;
|
}
|
|
.border-gray-200 {
|
border-color: #e5e7eb;
|
/* light gray */
|
}
|
|
.text-blue-500 {
|
color: #3b82f6;
|
/* Tailwind blue-500 */
|
}
|
|
.border-b-2 {
|
border-bottom-width: 2px;
|
}
|
|
.border-blue-500 {
|
border-color: #3b82f6;
|
}
|
|
.text-gray-500 {
|
color: #6b7280;
|
}
|
|
.space-y-6 {
|
margin-top: 1.5rem;
|
/* 24px */
|
}
|
|
.text-lg {
|
font-size: 1.125rem;
|
/* 18px */
|
line-height: 1.75rem;
|
}
|
|
.font-bold {
|
font-weight: 700;
|
}
|
|
.mb-2 {
|
margin-bottom: 0.5rem;
|
/* 8px */
|
}
|
|
.space-y-2 {
|
margin-top: 0.5rem;
|
}
|
|
.text-sm {
|
font-size: 0.875rem;
|
/* 14px */
|
line-height: 1.25rem;
|
}
|
|
.leading-relaxed {
|
line-height: 1.625;
|
/* 26px for 16px font */
|
}
|
|
.pl-4 {
|
padding-left: 1rem;
|
}
|
|
.text-gray-600 {
|
color: #4b5563;
|
}
|
|
.py-6 {
|
padding-top: 1.5rem;
|
padding-bottom: 1.5rem;
|
}
|
|
.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;
|
}
|
</style>
|
