mirror of
https://gitee.com/pnoker/iot-dc3.git
synced 2026-09-24 15:13:04 +08:00
fix(card): standardize card css class names across all entity card components
This commit is contained in:
pnoker
@@ -42,7 +42,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.thing-content {
|
||||
.thing-card-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -106,7 +106,7 @@
|
||||
border-bottom: 1px solid #fbc4c4;
|
||||
}
|
||||
|
||||
.thing-body {
|
||||
.thing-card__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
padding-inline-start: 5px;
|
||||
}
|
||||
|
||||
.thing-body-content {
|
||||
.thing-card-body-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -196,14 +196,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.thing__footer {
|
||||
.thing-card__footer {
|
||||
height: 20px;
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #dcdfe6;
|
||||
|
||||
.thing__footer-title {
|
||||
.thing-card-footer-title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div class="thing-card thing-card-application">
|
||||
<el-card shadow="hover">
|
||||
<div class="thing-content">
|
||||
<div class="thing-body">
|
||||
<div class="thing-body-content">
|
||||
<div class="thing-body-content-application-icon" @click="show()">
|
||||
<div class="thing-card-content">
|
||||
<div class="thing-card__body">
|
||||
<div class="thing-card-body-content">
|
||||
<div class="thing-card-body-content-application-icon" @click="show()">
|
||||
<el-avatar shape="square" :size="120" fit="fill" :src="icon"></el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thing__footer">
|
||||
<div class="thing__footer-title">
|
||||
<span class="thing-body-content-application-name">{{name}}</span>
|
||||
<div class="thing-card__footer">
|
||||
<div class="thing-card-footer-title">
|
||||
<span class="thing-card-body-content-application-name">{{name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,7 +65,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.thing-body-content-application-icon {
|
||||
.thing-card-body-content-application-icon {
|
||||
width: 120px;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.thing-body-content-application-name {
|
||||
.thing-card-body-content-application-name {
|
||||
display: block;
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="thing-card thing-card-dashboard">
|
||||
<el-card shadow="hover">
|
||||
<div class="thing-content">
|
||||
<div class="thing-body">
|
||||
<div class="thing-body-content">
|
||||
<div class="thing-card-content">
|
||||
<div class="thing-card__body">
|
||||
<div class="thing-card-body-content">
|
||||
<div class="thing-body-content-dashboard-snapshot" @click="show()">
|
||||
<img :src="snapshot">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thing__footer">
|
||||
<div class="thing__footer-title">
|
||||
<div class="thing-card__footer">
|
||||
<div class="thing-card-footer-title">
|
||||
<span class="thing-body-content-dashboard-name">{{name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="thing-card">
|
||||
<el-card shadow="hover">
|
||||
<div class="thing-content">
|
||||
<div class="thing-card-content">
|
||||
<div class="thing-header" v-bind:class="{'header-enable':data.enable,'header-disable':!data.enable}">
|
||||
<div class="thing-icon">
|
||||
<img :src="icon" :alt="data.name">
|
||||
@@ -15,15 +15,15 @@
|
||||
<el-tag v-else type="info" effect="plain">离线</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thing-body">
|
||||
<div class="thing-body-content">
|
||||
<div class="thing-card__body">
|
||||
<div class="thing-card-body-content">
|
||||
<ul class="thing-body-content-item">
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-s-promotion"/> 所属驱动: </span>{{driver(data.driverId)}}</li>
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-tickets"/> 包含模板: </span>{{data.profileIds?profile(data.profileIds):''}}</li>
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-coin"/> 存储类型: </span>{{data.multi?'结构数据':'单点数据'}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div title="设备描述信息" class="thing-body-content">
|
||||
<div title="设备描述信息" class="thing-card-body-content">
|
||||
<p class="thing-content-nowrap-description">{{data.description?data.description:'无描述信息'}}</p>
|
||||
</div>
|
||||
<div class="thing-body-content-time">
|
||||
@@ -35,7 +35,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!embedded" class="thing__footer">
|
||||
<div v-if="!embedded" class="thing-card__footer">
|
||||
<div class="thing-copy-id">
|
||||
<el-tooltip class="item" effect="dark" placement="top" v-if="data.id" content="点击复制ID">
|
||||
<el-button class="button" type="text" icon="el-icon-document-copy" v-on:click="copyId(data.id)">{{data.id}}</el-button>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="thing-card">
|
||||
<el-card shadow="hover">
|
||||
<div class="thing-content">
|
||||
<div class="thing-card-content">
|
||||
<div class="thing-header" v-bind:class="{'header-enable':data.enable,'header-disable':!data.enable}">
|
||||
<div class="thing-icon"><img :src="icon" :alt="data.name"></div>
|
||||
<div class="thing-name thing-content-nowrap-title" @click="copyId(data.id)">{{data.name}}</div>
|
||||
@@ -14,15 +14,15 @@
|
||||
<el-tag v-else type="info" effect="plain">离线</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thing-body">
|
||||
<div class="thing-body-content">
|
||||
<div class="thing-card__body">
|
||||
<div class="thing-card-body-content">
|
||||
<ul class="thing-body-content-item">
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-connection"/> 端口: </span>{{data.port}}</li>
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-monitor"/> 主机: </span>{{data.host}}</li>
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-s-promotion"/> 驱动服务: </span>{{data.serviceName}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div title="驱动描述信息" class="thing-body-content">
|
||||
<div title="驱动描述信息" class="thing-card-body-content">
|
||||
<p class="thing-content-nowrap-description">{{data.description?data.description:'无描述信息'}}</p>
|
||||
</div>
|
||||
<div class="thing-body-content-time">
|
||||
@@ -34,7 +34,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thing__footer">
|
||||
<div class="thing-card__footer">
|
||||
<div class="thing-copy-id">
|
||||
<el-tooltip class="item" effect="dark" placement="top" v-if="data.id" content="点击复制ID">
|
||||
<el-button class="button" type="text" icon="el-icon-document-copy" v-on:click="copyId(data.id)">{{data.id}}</el-button>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="thing-card">
|
||||
<el-card shadow="hover">
|
||||
<div class="thing-content">
|
||||
<div class="thing-card-content">
|
||||
<div class="thing-header" v-bind:class="{'header-enable':data.enable,'header-disable':!data.enable}">
|
||||
<div class="thing-icon"><img :src="icon" :alt="data.name"></div>
|
||||
<div class="thing-name thing-content-nowrap-title" @click="copyId(data.id)">{{data.name}}</div>
|
||||
@@ -14,15 +14,15 @@
|
||||
<el-tag v-else type="info" effect="plain">离线</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thing-body">
|
||||
<div class="thing-body-content">
|
||||
<div class="thing-card__body">
|
||||
<div class="thing-card-body-content">
|
||||
<ul class="thing-body-content-item">
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-connection"/> 端口: </span>{{data.port}}</li>
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-monitor"/> 主机: </span>{{data.host}}</li>
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-s-promotion"/> 网关服务: </span>{{data.serviceName}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div title="网关描述信息" class="thing-body-content">
|
||||
<div title="网关描述信息" class="thing-card-body-content">
|
||||
<p class="thing-content-nowrap-description">{{data.description?data.description:'无描述信息'}}</p>
|
||||
</div>
|
||||
<div class="thing-body-content-time">
|
||||
@@ -34,7 +34,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thing__footer">
|
||||
<div class="thing-card__footer">
|
||||
<div class="thing-copy-id">
|
||||
<el-tooltip class="item" effect="dark" placement="top" v-if="data.id" content="点击复制ID">
|
||||
<el-button class="button" type="text" icon="el-icon-document-copy" v-on:click="copyId(data.id)">{{data.id}}</el-button>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="thing-card">
|
||||
<el-card shadow="hover">
|
||||
<div class="thing-content">
|
||||
<div class="thing-card-content">
|
||||
<div class="thing-header" v-bind:class="{'header-enable':data.enable,'header-disable':!data.enable}">
|
||||
<div class="thing-icon"><img :src="icon" :alt="data.name"></div>
|
||||
<div class="thing-name thing-content-nowrap-title" @click="copyId(data.id)">{{data.name}}</div>
|
||||
<div title="状态" class="thing-status"></div>
|
||||
</div>
|
||||
<div class="thing-body">
|
||||
<div class="thing-body-content">
|
||||
<div class="thing-card__body">
|
||||
<div class="thing-card-body-content">
|
||||
<ul class="thing-body-content-item-point thing-body-content-item">
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-location-outline"/> 所属模板: </span>{{profile(data.profileId)}}</li>
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-location-outline"/> 累计标识: </span>{{data.accrue?'累计':'不累计'}}</li>
|
||||
@@ -24,7 +24,7 @@
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-location-outline"/> 最大值: </span>{{data.maximum}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div title="位号描述信息" class="thing-body-content">
|
||||
<div title="位号描述信息" class="thing-card-body-content">
|
||||
<p class="thing-content-nowrap-description">{{data.description?data.description:'无描述信息'}}</p>
|
||||
</div>
|
||||
<div class="thing-body-content-time">
|
||||
@@ -36,7 +36,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!embedded" class="thing__footer">
|
||||
<div v-if="!embedded" class="thing-card__footer">
|
||||
<div class="thing-copy-id">
|
||||
<el-tooltip class="item" effect="dark" placement="top" v-if="data.id" content="点击复制ID">
|
||||
<el-button class="button" type="text" icon="el-icon-document-copy" v-on:click="copyId(data.id)">{{data.id}}</el-button>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="thing-card cursor-pointer" @click="select(data)">
|
||||
<el-card :shadow="data.shadow">
|
||||
<div class="thing-content">
|
||||
<div class="thing-card-content">
|
||||
<div class="thing-header" v-bind:class="{'header-enable':isConfig,'header-disable':!isConfig}">
|
||||
<div class="thing-icon"><img :src="isSelect" :alt="data.name"></div>
|
||||
<div class="thing-name thing-content-nowrap-title" @click="copyId(data.id)">{{data.name}}</div>
|
||||
</div>
|
||||
<div class="thing-body">
|
||||
<div class="thing-body-content">
|
||||
<div class="thing-card__body">
|
||||
<div class="thing-card-body-content">
|
||||
<ul class="thing-body-content-item">
|
||||
<li class="thing-content-nowrap-item" :key="attribute.id" v-if="attribute" v-for="attribute in attributes">
|
||||
<span><i class="el-icon-goblet"/> {{attribute.displayName}}: </span>{{data[attribute.name].value}}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="thing-card">
|
||||
<el-card shadow="hover">
|
||||
<div class="thing-content">
|
||||
<div class="thing-card-content">
|
||||
<div class="thing-header" v-bind:class="{'header-enable':data.interval<200,'header-disable':data.interval>=200}">
|
||||
<div class="thing-icon"><img :src="icon" :alt="data.name"></div>
|
||||
<div class="thing-name thing-content-nowrap-title" @click="copyId(data.id)">{{point(data.pointId)}}</div>
|
||||
@@ -12,8 +12,8 @@
|
||||
<el-tag v-else-if="data.rw===2" type="success" effect="plain">读写</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thing-body">
|
||||
<div class="thing-body-content">
|
||||
<div class="thing-card__body">
|
||||
<div class="thing-card-body-content">
|
||||
<ul class="thing-body-content-value">
|
||||
<li title="处理值，点击复制" class="thing-content-nowrap-item value" @click="copyValue(data)">{{data.value}}</li>
|
||||
<li v-if="embedded" title="详细内容" class="value-detail thing-content-nowrap-item">
|
||||
@@ -45,7 +45,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!embedded" class="thing__footer">
|
||||
<div v-if="!embedded" class="thing-card__footer">
|
||||
<div class="thing-copy-id">
|
||||
<el-tooltip class="item" effect="dark" placement="top" v-if="data.id" content="点击复制ID">
|
||||
<el-button class="button" type="text" icon="el-icon-document-copy" v-on:click="copyId(data.id)">{{data.id}}</el-button>
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div class="thing-card">
|
||||
<el-card shadow="hover">
|
||||
<div class="thing-content">
|
||||
<div class="thing-card-content">
|
||||
<div class="thing-header" v-bind:class="{'header-enable':data.enable,'header-disable':!data.enable}">
|
||||
<div class="thing-icon"><img :src="icon" :alt="data.name"></div>
|
||||
<div class="thing-name thing-content-nowrap-title" @click="copyId(data.id)">{{data.name}}</div>
|
||||
<div title="状态" class="thing-status"></div>
|
||||
</div>
|
||||
<div class="thing-body">
|
||||
<div class="thing-body-content">
|
||||
<div class="thing-card__body">
|
||||
<div class="thing-card-body-content">
|
||||
<ul class="thing-body-content-item">
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-ice-cream-square"/> 位号个数: </span>{{data.pointIds.length||0}}</li>
|
||||
<li class="thing-content-nowrap-item"><span><i class="el-icon-collection-tag"/> 位号: </span>{{point(data.pointIds)}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div title="模板描述信息" class="thing-body-content">
|
||||
<div title="模板描述信息" class="thing-card-body-content">
|
||||
<p class="thing-content-nowrap-description">{{data.description?data.description:'无描述信息'}}</p>
|
||||
</div>
|
||||
<div class="thing-body-content-time">
|
||||
@@ -26,7 +26,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!embedded" class="thing__footer">
|
||||
<div v-if="!embedded" class="thing-card__footer">
|
||||
<div class="thing-copy-id">
|
||||
<el-tooltip class="item" effect="dark" placement="top" v-if="data.id" content="点击复制ID">
|
||||
<el-button class="button" type="text" icon="el-icon-document-copy" v-on:click="copyId(data.id)">{{data.id}}</el-button>
|
||||
|
||||
Reference in New Issue
Block a user