CBB3/App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>


<style>
	@import url("/components/gaoyia-parse/parse.css");
	@import url("/components/css/animate.css");

	page {
		background: #F8F6F6;
		-webkit-text-size-adjust: none
	}

	.clearfix {
		zoom: 1
	}

	.clearfix:after {
		clear: both;
		display: block;
		visibility: hidden;
		overflow: hidden;
		height: 0;
		content: '\20'
	}

	button.nt {
		background: transparent;
		font-size: 12px;
		padding: 0;
		border-radius: 0;
		color: #303033;
		margin: 0px;
		line-height: 1;
		overflow: visible
	}

	button.nt::after {
		border: 0;
	}

	.fx-r {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.fx-h {
		display: flex;
		flex-direction: column;
	}

	.fx-ac {
		justify-content: center;
	}

	.fx-as {
		justify-content: flex-start;
	}

	.fx-ae {
		justify-content: flex-end;
	}

	.fx-bc {
		align-items: center;
	}

	.fx-be {
		align-items: flex-end;
	}

	.fx-bs {
		align-items: flex-start;
	}

	.fx-g1 {
		flex-grow: 1;
	}

	.fx-g2 {
		flex-grow: 2;
	}

	.fx-g3 {
		flex-grow: 3;
	}

	.fx-g4 {
		flex-grow: 4;
	}

	.fx-s {
		flex-shrink: 0;
	}

	.pr {
		position: relative;
	}

	.pa {
		position: absolute;
	}

	.fl {
		float: left
	}

	.fr {
		float: right
	}

	.font-14 {
		font-size: 14px !important;
	}

	.font-12 {
		font-size: 12px !important;
	}

	.border-none {
		border: none !important;
	}

	.text-r {
		text-align: right
	}

	.text-l {
		text-align: left
	}

	.dn {
		display: none !important;
	}

	.db {
		display: block !important;
	}

	.mk {
		background: #000;
		opacity: 0.5;
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		z-index: 100
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(359deg)
		}
	}

	.ihover:active {
		opacity: .5
	}

	.ripple,
	button.ripple {
		position: relative;
		overflow: hidden
	}

	.ripple:after,
	button.ripple:after {
		content: "";
		background: rgba(255, 255, 255, 0.3);
		display: block;
		position: absolute;
		border-radius: 50%;
		padding-top: 240%;
		padding-left: 240%;
		margin-top: -120%;
		margin-left: -120%;
		opacity: 0;
		transition: all 1s
	}

	.ripple:active:after,
	button.ripple:active:after {
		padding-top: 0;
		padding-left: 0;
		margin-top: 0;
		margin-left: 0;
		opacity: 1;
		transition: 0s
	}

	.pbl-box {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		-moz-column-gap: 5px;
		-webkit-column-gap: 5px;
	}

	.pbl-item {
		-webkit-column-break-inside: avoid;
		-moz-page-break-inside: avoid;
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
	}

	.app-more {
		text-align: center;
		height: 30px;
	}

	.app-more image {
		width: 20px;
		height: 20px;
		animation: rotate 1.5s linear infinite;
		margin-right: 4px;
	}

	.app-more text {
		margin-left: 3px;
		position: relative;
		top: -4px;
		font-size: 12px;
	}

	.app-more-button {
		position: relative;
		height: 30px;
	}

	.app-more-button text {
		padding: 0px 20px;
		background: #f2f2f2;
	}

	.app-more-button .hr {
		background: #e5e5e5;
		width: 90%;
		height: 1px;
		margin-left: 5%;
		position: absolute;
		top: 16px;
	}

	.app-more-button .a-m-c {
		position: absolute;
		z-index: 9;
		width: 100%;
		height: 30px;
	}

	.placeholder-style {
		color: #d5d5d9;
		font-size: 15px;
	}

	.placeholder-style2 {
		color: #666666;
		font-size: 14px;
	}

	.placeholder-999 {
		color: #999999;
		font-size: 12px;
	}

	/*****超出一行省略*****/
	.shenlueStyle {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis
	}

	.shenlueStyle2 {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.shenlueStyle3 {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.bgChangColor {
		background: linear-gradient(to right, #ff6879, #e81a62)
	}

	.scrollHide::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.font-size18 {
		font-size: 18px !important;
	}

	img[lazy=loading] {
		opacity: 0;
	}

	img[lazy=loaded] {
		transition: opacity 1s ease;
	}

	.loading {
		text-align: center;
		height: 30px;
		color: #4A2723;
		line-height: 30px;
		width: 100%;
	}

	.loading image {
		width: 20px;
		height: 20px;
		animation: rotate 1.5s linear infinite;
		margin-right: 4px;
	}

	.loading text {
		margin-left: 3px;
		position: relative;
		font-size: 12px;
	}

	.loading.complete {
		font-size: 14px;
		color: #ccc;
		padding: 10px 0;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(359deg)
		}
	}

	@keyframes posterScale {
		0% {
			transform: scale(0.9);
		}

		100% {
			transform: scale(1.2);
		}
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}



	.load-app {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.load-app image {
		width: 60px;
		height: 60px;
	}

	.load-app .tipbb {
		font-size: 14px;
		color: #ccc;
		background: #ccc -webkit-linear-gradient(left, #ccc, #7d7b7b 50%, #474646 90%, #ccc) no-repeat 0 0;
		background-size: 20% 100%;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: center;
		font-weight: bold;
		text-decoration: underline;

	}

	.load-app .tipbb {
		-webkit-animation: slideShine 2s linear infinite;
		animation: slideShine 2s linear infinite;
		margin-top: 10px;
	}

	@-webkit-keyframes slideShine {
		0% {
			background-position: 0 0;
		}

		100% {
			background-position: 100% 100%;
		}
	}

	@keyframes slideShine {
		0% {
			background-position: 0 0;
		}

		100% {
			background-position: 100% 100%;
		}
	}
</style>