TourismAppqianduan/pages/home/index.vue

<template>
  <view class="home-container">
    <!-- 顶部搜索栏 -->
    <view class="home-header">
      <input class="search-input" placeholder="平江阳光国际大酒店(平江天岳汽..." />
      <button class="search-btn">搜索</button>
    </view>
    <!-- 横幅广告 -->
    <view class="banner">
      <image class="banner-img" src="/static/banner.png" mode="widthFix"></image>
    </view>
    <!-- 分类宫格 -->
    <view class="category-grid">
      <view class="category-row">
        <view class="category-item hotel">
          <text class="cat-title">酒店</text>
          <text class="cat-desc">特价酒店</text>
        </view>
        <view class="category-item hostel">
          <text class="cat-title">民宿·客栈</text>
        </view>
        <view class="category-item overseas">
          <text class="cat-title">海外酒店</text>
        </view>
        <view class="category-item special">
          <text class="cat-title">特价酒店</text>
        </view>
      </view>
      <view class="category-row">
        <view class="category-item flight">
          <text class="cat-title">机票</text>
          <text class="cat-desc">低价机票</text>
        </view>
        <view class="category-item train">
          <text class="cat-title">火车·高铁</text>
          <view class="cat-badge">减1元</view>
        </view>
        <view class="category-item bus">
          <text class="cat-title">汽车·船票</text>
        </view>
        <view class="category-item car">
          <text class="cat-title">专车·租车</text>
        </view>
      </view>
      <view class="category-row">
        <view class="category-item travel">
          <text class="cat-title">旅游</text>
          <text class="cat-desc">出境/国内游</text>
        </view>
        <view class="category-item scenic">
          <text class="cat-title">景点·门票</text>
        </view>
        <view class="category-item group">
          <text class="cat-title">跟团游</text>
        </view>
        <view class="category-item loan">
          <text class="cat-title">借钱/分期</text>
        </view>
      </view>
    </view>
    <!-- 横向活动栏 -->
    <scroll-view class="activity-bar" scroll-x>
      <view class="activity-item">天天神券<br/><text>签到领券</text></view>
      <view class="activity-item">低价酒店<br/><text>岳阳7折</text></view>
      <view class="activity-item">1折机票<br/><text>200元起</text></view>
      <view class="activity-item">酒店囤货<br/><text>3折抄底</text></view>
      <view class="activity-item">暑期出境<br/><text>可省1500</text></view>
    </scroll-view>
    <!-- 视频推荐和地图 -->
    <view class="main-content">
      <view class="video-section">
        <image class="video-img" src="/static/video.png" mode="aspectFill"></image>
        <view class="video-title">望仙谷</view>
      </view>
      <view class="map-section">
        <image class="map-img" src="/static/map.png" mode="aspectFill"></image>
        <view class="map-title">全国自驾地图</view>
      </view>
    </view>
    <!-- 悬浮按钮 -->
    <view class="float-btn">+</view>
    <!-- 底部tabBar -->
    <view class="tab-bar">
      <view class="tab-item active">
        <image class="tab-icon" src="/static/tab-home.png" />
        <text>首页</text>
      </view>
      <view class="tab-item">
        <image class="tab-icon" src="/static/tab-trip.png" />
        <text>行程</text>
      </view>
      <view class="tab-item">
        <image class="tab-icon" src="/static/tab-service.png" />
        <text>客服</text>
      </view>
      <view class="tab-item">
        <image class="tab-icon" src="/static/tab-world.png" />
        <text>看世界</text>
      </view>
      <view class="tab-item">
        <image class="tab-icon" src="/static/tab-mine.png" />
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style scoped>
.home-container {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}
.home-header {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx 0 24rpx;
}
.search-input {
  flex: 1;
  height: 64rpx;
  border-radius: 32rpx;
  border: none;
  background: #fff;
  padding: 0 24rpx;
  font-size: 28rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.search-btn {
  margin-left: 16rpx;
  background: #7ac81e;
  color: #fff;
  border: none;
  border-radius: 32rpx;
  height: 64rpx;
  padding: 0 32rpx;
  font-size: 28rpx;
}
.banner {
  margin: 24rpx 24rpx 0 24rpx;
}
.banner-img {
  width: 100%;
  border-radius: 16rpx;
}
.category-grid {
  margin: 32rpx 24rpx 0 24rpx;
}
.category-row {
  display: flex;
  margin-bottom: 16rpx;
}
.category-item {
  flex: 1;
  background: #fff;
  border-radius: 16rpx;
  margin-right: 16rpx;
  padding: 24rpx 0 16rpx 0;
  text-align: center;
  position: relative;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.category-item:last-child {
  margin-right: 0;
}
.cat-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.cat-desc {
  display: block;
  font-size: 20rpx;
  color: #7ac81e;
  margin-top: 8rpx;
}
.cat-badge {
  position: absolute;
  top: 8rpx;
  right: 16rpx;
  background: #ffe600;
  color: #333;
  font-size: 18rpx;
  border-radius: 8rpx;
  padding: 2rpx 8rpx;
}
.activity-bar {
  display: flex;
  flex-direction: row;
  margin: 24rpx 0 0 0;
  padding-left: 24rpx;
  background: #fff;
  height: 80rpx;
  align-items: center;
  overflow-x: scroll;
}
.activity-item {
  min-width: 140rpx;
  margin-right: 32rpx;
  font-size: 24rpx;
  color: #ff6600;
  text-align: center;
}
.activity-item text {
  color: #888;
  font-size: 20rpx;
}
.main-content {
  display: flex;
  margin: 32rpx 24rpx 0 24rpx;
}
.video-section, .map-section {
  flex: 1;
  margin-right: 16rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.map-section {
  margin-right: 0;
}
.video-img, .map-img {
  width: 100%;
  height: 160rpx;
  object-fit: cover;
}
.video-title, .map-title {
  position: absolute;
  left: 16rpx;
  bottom: 16rpx;
  color: #fff;
  font-size: 28rpx;
  text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
}
.float-btn {
  position: fixed;
  right: 40rpx;
  bottom: 180rpx;
  width: 80rpx;
  height: 80rpx;
  background: #00e4ff;
  color: #fff;
  font-size: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(0,228,255,0.15);
  z-index: 10;
}
.tab-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100rpx;
  background: #fff;
  display: flex;
  border-top: 1rpx solid #eee;
  z-index: 20;
}
.tab-item {
  flex: 1;
  text-align: center;
  color: #888;
  font-size: 22rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tab-item.active {
  color: #00c3ff;
}
.tab-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 4rpx;
}
</style>