apply-assistant-v3/root/other/debug.vue

<template>
	<view style="background-color: #ededed;" class=" g_kuaishou">
		<!-- 	<image :src="cdnBaseImg + 'upgrade.svg'" mode="widthFix" style="width: calc(100vw - 60px);"></image>
    <view class="g_c_9">页面建设中...</view> -->
		<view style="padding: 20px;">
			<button class="bocai-btn-primary bocai-btn-block" hover-stop-propagation hover-class="thover">主要操作1</button>
			<view class="g_h_10"></view>
			<button class="bocai-btn-default bocai-btn-block" hover-stop-propagation hover-class="thover">主要操作2</button>
			<view class="g_h_10"></view>
			<button class="bocai-btn-danger bocai-btn-block" hover-stop-propagation hover-class="thover">主要操作3</button>
				<view class="g_h_10"></view>
			<button class="bocai-btn-primary" hover-stop-propagation hover-class="thover">主要操作4</button>
			<view class="g_h_10"></view>
			<button class="bocai-btn-default" hover-stop-propagation hover-class="thover">次要操作5</button>
			<view class="g_h_10"></view>
			<button class="bocai-btn-default bocai-btn-middle" hover-stop-propagation hover-class="thover">次要操作6</button>
			<view class="g_h_10"></view>
			<view class="g_flex_c">
				<view class="g_flex_1 g_mr_8">
					<button class="bocai-btn-default" hover-stop-propagation hover-class="thover">次要操作7</button>
				</view>
				<view class="g_flex_1 g_ml_8">
					<button class="bocai-btn-primary g_mr_8" hover-stop-propagation hover-class="thover">主要操作7</button>
				</view>
			
			</view>
			<view class="g_h_10"></view>
			<button class="bocai-btn-primary g_w_250" hover-stop-propagation hover-class="thover">主要操作8</button>
			<view class="g_h_10"></view>
			<button class="bocai-btn-default g_w_250" hover-stop-propagation hover-class="thover">次要操作9</button>
			<view class="g_h_10"></view>
			<button class="bocai-btn-default g_w_250 disabled" hover-stop-propagation hover-class="thover">主要操作10</button>
			<view class="g_h_10"></view>
			
			<button class="bocai-btn-danger  g_w_250" hover-stop-propagation hover-class="thover">删除粉丝11</button>
			<view class="g_text_c">
				
			<view class="g_h_10"></view>
			<button class="bocai-btn-default bocai-btn-mini" hover-stop-propagation hover-class="thover">次要操作12</button>
			<text style="margin-right: 10px;"></text>
			<button class="bocai-btn-default bocai-btn-mini bocai-btn-grey" hover-stop-propagation
				hover-class="thover">次要操作13</button>
				<text style="margin-right: 10px;"></text>
			<button class="bocai-btn-default bocai-btn-mini" hover-stop-propagation hover-class="thover"><i
					class="iconfont icon-tianjia g_fsi_12 g_mr_4 dib"></i>次要操作14</button>
					<text style="margin-right: 10px;"></text>
			<button class="bocai-btn-default bocai-btn-mini bocai-btn-grey" hover-stop-propagation
				hover-class="thover"><i class="iconfont icon-a-bianzu11beifen2 g_fsi_12 g_mr_4 dib"></i>次要操作15</button>
				<text style="margin-right: 10px;"></text>
			<button class="bocai-btn-danger bocai-btn-mini" hover-stop-propagation hover-class="thover">删除粉丝16</button>
			<text style="margin-right: 10px;"></text>
			<button class="bocai-btn-default bocai-btn-mini bocai-btn-bg-grey" hover-stop-propagation
				hover-class="thover">次要操作17</button>
			<view class="g_h_10"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cdnBaseImg: this.G.store().cdnBaseImg
			}
		}
	}
</script>

<style lang="scss">
	.bocai-btn-primary,
	.bocai-btn-default,
	.bocai-btn-danger{
		width: 100%;
		height: 42px;
		font-size: 18px;
		// font-weight: bold;
		color: #ffffff;
		line-height: 42px;
		box-sizing: border-box;

		border-radius: 24px;
		&.bocai-btn-block{
			height: 56px;
			line-height: 56px;
			border-radius: 8px;
		}
		&.bocai-btn-middle{
			height: 40px;
			width:120px;
			font-size: 16px;
			line-height: 40px;
			background: transparent;
			&.thover {
				background: #eee;
			}
		}

		&.bocai-btn-mini {
			width: auto;
			display: inline-block;
			height: 28px;
			padding: 0 8px;
			font-size: 14px;
			line-height: 28px;

			&.bocai-btn-bg-grey {
				background: #ededed;
				border: 1rpx solid #ededed;
				color: #666;

				&.thover {
					background: #eee;
				}
			}

			&.bocai-btn-grey {
				border: 1rpx solid #eee;
				color: #666;
			}
		}

		&.disabled {
			pointer-events: none;
			background: #ccc;
			color: #fff;
			border: 1rpx solid #ccc;
		}

		&.g_w_250 {
			width: 250px;
		}
	}

	.bocai-btn-primary {
		background: #00B666;
	}
	.bocai-btn-danger{
		border: 1rpx solid #fff;
		background-color: #fff;
		color:#FA5151;
		&.thover{
			background-color:#ededed;
			border: 1rpx solid #ededed;
		}
	}

	.bocai-btn-default {
		border: 1rpx solid #00B666;
		background-color: #fff;
		color: #00B666;

		&.thover {
			opacity: 1;
			background: #ededed;
		}
	}
</style>