css

liukangdong

2024-06-25 ebc96a1cf0424c04dceacbc42f9ad2a897223be9

 h5/pages/staff/vehicle/index.vue

@@ -1,92 +1,104 @@
<template>
   <view class="main_app">
      <image src="../../../static/staff/yongche_bg.png" class="banner" mode="widthFix"></image>
      <view class="emyty"></view>
      <view class="content">
         <view class="title">选择目的地类别</view>
         <view class="item" @click="$jump('/pages/staff/vehicle/shinei')">
            <image src="../../../static/bg_shineiyongche@2x.png" class="img" mode="widthFix"></image>
            <view class="h1">室内用车</view>
            <view class="h2">URBAN AREA</view>
         </view>
         <view class="item" @click="$jump('/pages/staff/vehicle/shiwai')">
            <image src="../../../static/bg_shiwaiyongche@2x.png" class="img" mode="widthFix"></image>
            <view class="h1">室外用车</view>
            <view class="h2">SUBURB AREA</view>
         </view>
      </view>
   </view>
  <view class="main_app">
    <image
      src="../../../static/staff/yongche_bg.png"
      class="banner"
      mode="widthFix"
    ></image>
    <view class="emyty"></view>
    <view class="content">
      <view class="title">选择目的地类别</view>
      <view class="item" @click="$jump('/pages/staff/vehicle/shinei')">
        <image
          src="../../../static/bg_shineiyongche@2x.png"
          class="img"
          mode="widthFix"
        ></image>
        <view class="h1">室内用车</view>
        <view class="h2">URBAN AREA</view>
      </view>
      <view class="item" @click="$jump('/pages/staff/vehicle/shiwai')">
        <image
          src="../../../static/bg_shiwaiyongche@2x.png"
          class="img"
          mode="widthFix"
        ></image>
        <view class="h1">室外用车</view>
        <view class="h2">SUBURB AREA</view>
      </view>
    </view>
  </view>
</template>

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

<style lang="scss">
.main_app{
   .emyty{
      width: 100%;
      height: 218rpx;
   }
   .content{
      width: 690rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(39,155,170,0.16);
      border-radius: 16rpx;
      padding: 60rpx 30rpx;
      .item{
         width: 630rpx;
         height: 200rpx;
         border-radius: 8rpx;
         margin-bottom: 30rpx;
         &:nth-last-child(1){
            margin-bottom: 0;
         }
         position: relative;
         padding: 40rpx;
         overflow: hidden;
         z-index: 1;
         .h1 {
            font-weight: 500;
            font-size: 32rpx;
            color: #222222;
            line-height: 48rpx;
            margin-bottom: 10rpx;
         }
         .h2 {
            font-size: 22rpx;
            color: #7b9da1;
            line-height: 34rpx;
         }
         .img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
         }
      }
      .title{
         margin-bottom: 40rpx;
         font-weight: 500;
         font-size: 34rpx;
         color: #222222;
         line-height: 48rpx;
      }
   }
   .banner{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1;
   }
.main_app {
  .emyty {
    width: 100%;
    height: 218rpx;
  }
  .content {
    width: 690rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(39, 155, 170, 0.16);
    border-radius: 16rpx;
    padding: 60rpx 30rpx;
    .item {
      width: 630rpx;
      height: 200rpx;
      border-radius: 8rpx;
      margin-bottom: 30rpx;
      &:nth-last-child(1) {
        margin-bottom: 0;
      }
      position: relative;
      padding: 40rpx;
      overflow: hidden;
      z-index: 1;
      .h1 {
        font-weight: 600;
        font-size: 32rpx;
        color: #222222;
        line-height: 48rpx;
        margin-bottom: 10rpx;
      }
      .h2 {
        font-size: 22rpx;
        color: #7b9da1;
        line-height: 34rpx;
      }
      .img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
    }
    .title {
      margin-bottom: 40rpx;
      font-weight: 600;
      font-size: 34rpx;
      color: #222222;
      line-height: 48rpx;
    }
  }
  .banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
  }
}
</style>