Style(店铺):界面调整

pagesInn/components/jin-edit/jin-icons.vue

@@ -0,0 +1,71 @@
+<template>
+	<view class="content">
+		<view
+			class="icon"
+			:style="{color: color, fontSize: fontSize}"
+			v-html="type"
+			@click="toclick"
+		></view>
+		<view class="desc">{{ title }}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			type: {
+				type: String,
+				default: '&#xe644;'
+			},
+			color: {
+				type: String,
+				default: '#666666'
+			},
+			fontSize: {
+				type: String,
+				default: '32rpx'
+			},
+			title: {
+				type: String,
+				default: '说明'
+			}
+		},
+		methods: {
+			toclick() {
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.content{
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 80upx;
+		min-width: 60px;
+		padding-bottom: 15upx;
+	}
+	.content .desc {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		text-align: center;
+		font-size: 8px;
+		color: #666;
+		line-height: 8px;
+		transform: translateY(-8px);
+	}
+	@font-face {
+		font-family: 'jin';
+		/** 阿里巴巴矢量图标库的字体库地址，可以替换自己的字体库地址 **/
+		src: url('https://at.alicdn.com/t/font_1491431_6m7ltjo8wi.ttf') format('truetype');
+	}
+
+	.icon {
+		font-family: jin !important;
+	}
+
+</style>