yxk_h5_master/components/xinsoft-dev-block/xinsoft-dev-block.vue

<template>
	<view :class="{ 'dev-block--full': isFull === true || isFull === 'true' }"
		class="myContainer myContentBox dev-block">
		<!-- 标题 -->
		<view class="dev-block__header">
			<view class="dev-block__header-title-text">
				<view v-if="title">{{ title }}</view>
				<view v-if="titleHtml" v-html='titleHtml'></view>
				<view v-if="titleNumber">{{ titleNumber }}</view>
			</view>
			<view v-if="extra" class="__header-extra-text" style="line-height: 34px;position:absolute;top:0;right:0">
				<!-- <dev-tag :text="extra" :tagType="tagType" @click.stop="back(val)" /> -->
				<!-- <button type="default" @click.stop="remove(val)" v-if="approveState == 0"></button>	 -->
				<image src='../../static/img/deleteIcon.png' style="width: 20px;height: 20px;top: 4px;"
					@click.stop="remove(val)" v-if="approveState == 0"></image>
			</view>
		</view>
		<!-- 内容 -->
		<view class="dev-block__content">
			<view v-if="contentList">
				<view v-for="item in contentList" :key="item.index"
					:class="{ 'doubleList': item.isDouble === true || item.isDouble === 'true' }"
					class="dev-block--myLists">
					<text class="dev-label">{{ item.labelName }}：</text>
					<text class="dev-content">{{ item.labelContent }}</text>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view v-if="note || noteback" class="dev-block__footer">
			<slot name="footer">
				<button class="mini-btn" type="default" size="default" @click.stop="onClickback">{{ noteback }}</button>
				<button class="mini-btn" type="default" size="default" @click="onClick">{{ note }}</button>
				<button class="mini-btn" type="default" style="float:right" size="mini" @click="onClick1">{{ note1
				}}</button>
			</slot>
		</view>
	</view>
</template>

<script>
	import devTag from '../xinsoft-dev-tag/xinsoft-dev-tag.vue';
	export default {
		name: 'devBlock',
		components: {
			devTag
		},
		props: {
			approveState:{
				type:Number,
				default:undefined
			},
			title: {
				type: String,
				default: ''
			}, // 标题
			titleHtml:{},//html格式
			titleNumber:{
				type:String,
				default:''
			}, //设备编码
			extra: {
				type: String,
				default: ''
			}, // 扩展信息
			tagType:{
				type:String,
				default:'danger'
			}, //按钮状态
			contentList:Array
			, //设备内容
			note: {
				type: String,
				default: ''
			}, 
			noteback: {
				type: String,
				default: ''
			}, 
			note1: {
				type: String,
				default: ''
			},
			isFull: {
				// 内容区域是否通栏
				type: Boolean,
				default: false
			},
		},
		methods: {
			onClick() {
				this.$emit('click')
			},
			onClickback() {
				this.$emit('back')
			},
			onClick1() {
				this.$emit('click1')
			},
			remove(val){
				this.$emit('remove',val)
			}
		}
	}
</script>

<style>
@charset "UTF-8";

.mini-btn {
	color: white;
	font-size: 13px;
	background-color: #2589ee;
}

.dev-block__header {
	position: relative;
	display: flex;
	flex-direction: row;
	padding: 16upx;
	align-items: center
}

.dev-block__header-title {
	flex: 1;
	margin-right: 16upx;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center
}

.dev-block__header-title-text {
	font-size: 32upx;
	flex: 2;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.dev-block__content {
	padding: 16upx
}

.dev-block__footer {
	padding: 20upx;
	color: #999;
	font-size: 24upx;
}

.dev-block--full {
	margin: 0;
	border-left: none;
	border-right: none;
	border-radius: 0
}

/*中间内容的部分的样式*/
.dev-block--myLists {
	font-size: 32upx;
	width: 100%;
	display: inline-flex;
}

.doubleList {
	width: 50%;
}

.dev-label {
	font-size: 28upx;
	color: #999;
	min-width: 160upx;
}

.dev-content {
	font-size: 28upx;
	color: #333;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
</style>