zx_flk_app/pages/index/homeNotRent.vue

<template>
    <view class="home-not-rent-page">
      <view class="top-area">
        <image :src="IMGS.baseTitle" class="base-title" />
      </view>
      <image :src="IMGS.carImg" class="car-img" />
      <view :style="{ backgroundImage: `url(${IMGS.boxOmg})` }" class="desc-wrap">
        <swiper
          :interval="3000"
          :circular="true"
          indicator-color="#CED1D8"
          indicator-active-color="#ffffff"
          autoplay
          indicator-dots
          class="swiper-box"
        >
          <swiper-item v-for="(item, index) in descArr" :key="index">
            <view class="swiper-item">
                {{ item.speed }}
                <view class="more-btn">了解更多</view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="options">
        <view class="btn btn-left">{{ $t('租赁设备') }}</view>
        <view class="btn btn-right">{{ $t('绑定设备') }}</view>
      </view>
    </view>
  </template>
  
  <script>
  import { QINIU_URL } from '@/common/constant'
  
  const IMGS = {
    baseTitle: `${QINIU_URL}Fix835oiq463VWd1QdxwhIWNDLp6`,
    carImg: `${QINIU_URL}FksY_ZCse57K6QrcBy52vep2WPHd`,
    boxOmg: `${QINIU_URL}Fi9K2vXFEO5AGoUenf8nRDtyvMiW`
  }
  export default {
    data() {
      return {
        IMGS,
        descArr: [
          { speed: 100 },
          { speed: 200 },
          { speed: 300 }
        ]
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .home-not-rent-page {
    width: 750rpx;
    min-height: 100vh;
    background: linear-gradient(180deg, #EFF7FC 0%, #BAC0CC 100%);
  
    .top-area {
        width: 100%;
        height: 440rpx;
        display: flex;
        justify-content: center;
        background: linear-gradient(180deg, #4A5567 0%, rgba(74, 85, 103, 0) 100%);
  
        .base-title {
            width: 362rpx;
            height: 182rpx;
            margin: 66rpx auto 0;
        }
    }
  
    .car-img {
        width: 100%;
        height: 420rpx;
        margin-top: -180rpx;
  
    }
  
    .desc-wrap {
        width: 550rpx;
        height: 538rpx;
        background-size: 100%;
        margin: 0 auto;
        padding-bottom: 140rpx;
        .swiper-box {
            width: 100%;
            height: 100%;
        }
        .swiper-item {
            padding: 80rpx 100rpx;
            font-weight: bold;
            font-size: 64rpx;
            color: #FFFFFF;
            height: 100%;
            .more-btn {
                width: 268rpx;
                height: 76rpx;
                margin: 48rpx auto 0;
                background: linear-gradient( 180deg, #6E798C 0%, #7F8C9B 100%);
                border-radius: 40rpx;
                font-size: 28rpx;
                color: #FFFFFF;
                display: flex;
                align-items: center;
                justify-content: center;
                &::after {
                    content: "";
                    width: 28rpx;
                    height: 28rpx;
                    background: url('https://qiniu.bms16.com/Fi2Lg800Mc1MhCnvHT1DkvOEdJB1');
                    background-size: 100%;
                }
            }
        }
    }
  
    .options {
        padding: 0 28rpx;
        display: flex;
        justify-content: space-between;
        margin-top: -100rpx;
  
        .btn {
            width: 336rpx;
            height: 98rpx;
            border-radius: 50rpx;
            border: 4rpx solid #060809;
            font-size: 36rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
  
        .btn-left {
            color: #060809;
            background: rgba(255, 255, 255, 0.6);
        }
  
        .btn-right {
            color: #fff;
            background: #060809;
        }
    }
  }
  </style>