zx_flk_app/pages/carList/carList.vue

<template>
	<view class="car-list">
		<view class="car-list-card">
            <view class="car-name">奥迪A6L</view>
            
		</view>
		<view class="options">
			<view class="btn btn-left">{{ $t('租赁设备') }}</view>
			<view class="btn btn-right">{{ $t('绑定设备') }}</view>
		</view>
	</view>
</template>

<script>
	var config = require('../../common/config.js');
	export default {
		data() {
			return {
				carList:[]
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
		},
		methods: {

		}
	};
</script>
<style lang="scss" scoped>
.car-list{
    padding: 24rpx;
}
.car-list-card{
	width:100%;
    height: 596rpx;
    background: linear-gradient( 135deg, #DEE0E8 0%, rgba(255,255,255,0.4) 50%, #F1F3F4 100%);
    border-radius: 40rpx;
    border: 6rpx solid #FFF;
    position: relative;
}
.car-list-card-i{
    background: linear-gradient( 135deg, #DEEAFF 0%, rgba(220,244,251,0.4) 50%, #DAFFF6 100%);
}
.car-name{
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 48rpx;
    color: #828DA2;
}
.car-name-i{
    color: #060809;
}
.options {
        padding: 0 28rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 44rpx;
  
        .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);
			margin-right: 22rpx;
        }
  
        .btn-right {
            color: #fff;
            background: #060809;
        }
    }
</style>