BiKing/pages/index/modules/shortcut.vue

<template>
	<view class="shortcut-box" @click.stop="goShortcutBuy()">
		<image class="shortcut-icon" src="@/static/images/icon_04.png" mode="aspectFit"></image>
		<view class="shortcut-content">
			<text class="shortcut-content-title">快捷买币</text>
			<text class="shortcut-content-hint">支持一键快速购买USDT</text>
		</view>
		<view class="shortcut-more">
			<image class="shortcut-more-icon" src="@/static/images/icon_03.png" mode="aspectFit"></image>
			<!-- <view class="shortcut-more-icon iconfont">
				&#xe604;
			</view> -->
		</view>
	</view>
</template>

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

			};
		},
		methods: {
			goShortcutBuy() {
				uni.navigateTo({
					url: '/pages/content/shortcut-buy'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shortcut-box {
		width: 100%;
		background-color: $modules-box-bg;
		padding: 14rpx 60rpx 14rpx $pages-padding ;
		display: flex;
		align-items: stretch;

		.shortcut-icon {
			width: 66rpx;
			height: 83rpx;
			flex-shrink: 0;
		}

		.shortcut-more {
			width: 81rpx;
			height: 81rpx;
			flex-shrink: 0;

			.shortcut-more-icon {

				width: 81rpx;
				height: 81rpx;
			}

			// background: linear-gradient(90deg, #ffffff 23%, #d4f1e5);
			// border-radius: 50%;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// .shortcut-more-icon {
			// 	width: 40rpx;
			// 	height: 40rpx;
			// 	border-radius: 50%;
			// 	background-color: $Theme-Color;
			// 	font-size: 26rpx;
			// 	line-height: 40rpx;
			// 	color: #ffffff;
			// 	transform: rotate(180deg);
			// 	text-align: right;
			// }
		}

		.shortcut-content {
			width: calc(100% - 63rpx - 81rpx);
			padding:4rpx 0 4rpx 35rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.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>