scanCode/pages/scan/Sms.vue

<template>
	<view class="content">
		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
		<tn-list-view :card="true" unlined="all" class="listView">
		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
		   <tn-list-cell class="listItem">
			   <tn-grid align="center" :col="col">
				    <block v-for="(item, index) in fastToolList" :key="index">
						<tn-grid-item class="toolItem">
							<view :class="item.icon"></view>
							<view class="cutline"></view>
						    <view class="toolText">{{ item.text }}</view>
						</tn-grid-item>
					</block>
			   </tn-grid>
		   </tn-list-cell>
		   <view class="cutline"></view>
		   <tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
		   <tn-list-cell class="listItemBottom">
			   <image src="/static/logo.png" class="buttomImg"/>
		   </tn-list-cell>
		</tn-list-view>
		<text class="bottomText">Feedback or Suggestion</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				col: 4,
				fastToolList:[
					{
						"index": 0,
						"text":"Send SMS",
						"icon": "tn-icon-email"
					},
					{
						"index": 1,
						"text":"Send MMS",
						"icon": "tn-icon-my-circle-fill"
					},
					{
						"index": 2,
						"text":"Copy",
						"icon": "tn-icon-copy-fill"
					},
					{
						"index": 3,
						"text":"Share",
						"icon": "tn-icon-share-triangle"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #000000;
		height:100%;
		
		.listView{
			z-index: 0;
			position: relative;
			width: 330px;
			height:500px;
			margin-top: 50px;
			background-color: #141b29;
			
			.listItem-1{
				margin-top: 60px;
				background-color: #141b29;
				color: #fff;
				//border: 2px solid yellow;
				height: 80px;
				text-align: center;
			}
			
			.listItem{
				//border: 2px solid yellow;
				height: 80px;
				//margin-top: 30px;	
				//padding-top: 30px;	
				background-color: #141b29;
				color: #fff;
				
				.toolItem{
					//border: 2px solid red;
					background-color: #141b29;
					font-size: 30px;
					height: 60px;
					text-align: center;
					
					
					
					.toolText{
						font-size: 12px;
						color: #fff;
					}
				}
				
			}
			
			.listItem-ad{
				background-color: #141b29;
				text-align: center;
				color: #fff;
				//border: 2px solid red;
				height: 80px;
			}
			
			.listItemBottom{
				height: 200px;
				margin-top: 10px;
				background-color: #141b29;
				color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.buttomImg{
					width: 150px;
					height: 150px;
				}
			}
		}
		.icon{
			z-index: 1;
			position: absolute;
			margin-top: -480px;
			
		}
		
		.bottomText{
			color: #fff;
			text-align: center;
			font-size: 12px;
			margin-top: 20px;
			margin-bottom: 20px;
		}
		.cutline{
			border: 1px solid #8f8f94;
		}
	}
</style>