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

<template>
	<view :class="{ 'dev-repair--full': isFull === true || isFull === 'true'}" class="myContainer myContentBox dev-repair">
		<!-- 标题 -->
		<view class="dev-repair__header">
			<view class="dev-repair__header-title-text">
				<view>
					<text class="definT">{{ title }}</text>
					<view v-if="extra" >
						<dev-tag :text="extra" :tagType="tagType" size="small"/>
					</view>
				</view>
				<view style="clear: both;">
					<text v-if="titleNumber" >{{ titleNumber }}</text>
				</view>
			</view>
			<!-- <view v-if="note" class="dev-repair__header-extra-text"  @click="onClick">{{note}}</view> -->
			<image src='../../static/img/deleteIcon.png' style="width: 20px;height: 20px;margin-left:4px ;" @click.stop="remove()" v-if="approveState == 0"></image>
		</view>
		<!-- 内容 -->
		<view class="dev-repair__content">
			<view v-if="contentList">
				<view v-for="item in contentList" :key="item.index" :class="{ 'doubleList': item.isDouble === true || item.isDouble === 'true'}" class="dev-repair--myLists">
					<text class="dev-label">{{item.labelName}}：</text>
					<text class="dev-content">{{item.labelContent}}</text>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="dev-repair__content dev-repair__footer"  v-if="contentBottom">
			<view>
				<view v-for="item in contentBottom" :key="item.index" :class="{ 'doubleList': item.isDouble === true || item.isDouble === 'true'}" class="dev-repair--myLists">
					<text class="dev-label">{{item.labelName}}：</text>
					<text class="dev-content">{{item.labelContent}}</text>
				</view>
			</view>
		</view>
		<view v-if="note" class="dev-block__footer">
			<slot name="footer">
				<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: 'devRepair',
		components: {
			devTag
		},
		props: {
			approveState:{
				type:Number,
				default:undefined
			},
			title: {
				type: String,
				default: ''
			}, // 标题
			titleNumber:{
				type:String,
				default:''
			}, //设备编码
			extra: {
				type: String,
				default: ''
			}, // 扩展信息
			tagType:{
				type:String,
				default:''
			}, //按钮状态
			contentList:Array
			, //右上角的 编辑或者查看详情
			contentBottom:Array,
			note: {
				type: String,
				default: ''
			}, 
			isFull: {
				// 内容区域是否通栏
				type: Boolean,
				default: false
			},
		},
		methods: {
			onClick() {
				this.$emit('click')
			},
			remove(){
				this.$emit('remove')
			}
		}
	}
</script>

<style>
	@charset "UTF-8";
    .mini-btn {
		color: white;
		font-size: 13px;
		background-color: #2589ee;
	}
	.dev-block__footer {
		padding: 20upx;
		color: #999;
		font-size: 24upx;
	}
	.dev-repair__header {
		position: relative;
		display: flex;
		flex-direction: row;
		padding: 16upx;
		align-items: center
	}
	
	.definT{
		margin-right: 20upx;
		float: left;
	}
	.dev-repair__header-title {
		flex: 1;
		margin-right: 16upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center
	}

	.dev-repair__header-title-text {
		font-size: 32upx;
		flex: 2;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden
	}
	
	.dev-repair__header-extra-text{
		font-size: 28upx;
		color: #3382FF;
	}
	
	.dev-repair__content {
		padding: 16upx
	}
	.dev-repair__footer {
		border-top: 1px solid #EDEDED;
		padding: 20upx;
		color: #999;
		font-size: 24upx;
	}

	.dev-repair--full {
		margin: 0;
		border-left: none;
		border-right: none;
		border-radius: 0
	}
	
	/*中间内容的部分的样式*/
	.dev-repair--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>