BiKing/pages/index/modules/shortcut.vue

<template>
	<view class="shortcut-box">
		<image class="shortcut-icon" src="../../../static/logo.png" mode=""></image>
		<view class="shortcut-content">
			<text class="shortcut-content-title">快捷买币</text>
			<text class="shortcut-content-hint">支持一键快速购买USDT</text>
		</view>
		<view class="shortcut-more">
			
		</view>
	</view>
</template>

<script>
	export default {
		name: "shortcutModules",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.shortcut-box {
		width: 100%;
		min-height: 120rpx;
		background-color: $modules-box-bg;
		padding: 18rpx $pages-padding ;
		display: flex;
		align-items: center;
		
		.shortcut-icon{
			width: 63rpx;
			height: 83rpx;
			flex-shrink: 0;
		}
		.shortcut-more{
			width: 81rpx;
			height: 81rpx;
			flex-shrink: 0;
			background: linear-gradient(90deg,#ffffff 23%, #d4f1e5);
			border-radius: 50%;
		}
		.shortcut-content{
			width: calc(100% - 63rpx - 81rpx);
			padding-left: 35rpx;
			display: flex;
			flex-direction: column;
			.shortcut-content-title{
		 
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700; 
				color: #1a1a1a;
				line-height: 38rpx;
				letter-spacing: 0.6rpx;
			}
			.shortcut-content-hint{
	 
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400; 
				color: #808080;
				line-height: 38rpx;
				letter-spacing: 0.48rpx;
			}
		}
	}
</style>