opensource/iot-dc3
3
0
Fork 0
mirror of https://gitee.com/pnoker/iot-dc3.git synced 2026-11-02 03:01:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: add scoped attribute to all Vue component styles and refactor shared SCSS

Browse Source
This commit is contained in:
pnoker
2025-04-18 14:39:14 +08:00
parent 3654c1b67a
commit 7bb59bc1bd
45 changed files with 315 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1 -1
View File
@@ -20,7 +20,7 @@
</div>
</template>
<style lang="scss">
<style lang="scss" scoped>
#app {
width: 100%;
height: 100%;
src/components/card/base/BaseCard.vue
+7 -7
View File
@@ -16,7 +16,7 @@
<template>
<div class="base-card">
<el-card shadow="hover">
<el-card class="base-card__body" shadow="hover">
<div class="base-card__container">
<slot />
</div>
@@ -26,7 +26,7 @@
<script lang="ts" setup></script>
<style lang="scss">
<style lang="scss" scoped>
.base-card {
border-radius: 4px;
box-sizing: border-box;
@@ -40,17 +40,17 @@
}
}
.el-card {
:deep(.el-card) {
width: 100%;
box-sizing: border-box;
}
.el-tabs__nav {
margin: 0 5px 0 5px;
:deep(.el-tabs__nav) {
margin: 0 5px;
}
.base-card__container {
.el-tabs__header {
:deep(.el-tabs__header) {
margin-bottom: 0;
.el-tabs__nav-wrap:after {
@@ -58,7 +58,7 @@
}
}
.el-tab-pane {
:deep(.el-tab-pane) {
background: #f6f7f9;
}
}
src/components/card/blank/BlankCard.vue
+7 -7
View File
@@ -26,7 +26,7 @@
<script lang="ts" setup></script>
<style lang="scss">
<style lang="scss" scoped>
.blank-card {
border-radius: 4px;
box-sizing: border-box;
@@ -40,21 +40,21 @@
}
}
.el-card {
:deep(.el-card) {
width: 100%;
box-sizing: border-box;
}
.el-card.blank-card__body {
:deep(.el-card.blank-card__body) {
border: 0;
}
.el-card__body {
padding: 10px 5px 0 5px;
:deep(.el-card__body) {
padding: 10px 5px 0;
}
.el-tabs__nav {
margin: 0 5px 0 5px;
:deep(.el-tabs__nav) {
margin: 0 5px;
}
}
</style>
src/components/card/detail/DetailCard.vue
+7 -7
View File
@@ -16,7 +16,7 @@
<template>
<div class="detail-card">
<el-card shadow="hover">
<el-card class="detail-card__body" shadow="hover">
<div class="detail-card__container">
<slot />
</div>
@@ -26,7 +26,7 @@
<script lang="ts" setup></script>
<style lang="scss">
<style lang="scss" scoped>
.detail-card {
border-radius: 4px;
box-sizing: border-box;
@@ -40,17 +40,17 @@
}
}
.el-card {
:deep(.el-card) {
width: 100%;
box-sizing: border-box;
}
.el-card__body {
padding: 10px 5px 0 5px;
:deep(.el-card__body) {
padding: 10px 5px 0;
}
.el-tabs__nav {
margin: 0 5px 0 5px;
:deep(.el-tabs__nav) {
margin: 0 5px;
}
}
</style>
src/components/card/skeleton/SkeletonCard.vue
+67 -70
View File
@@ -20,7 +20,7 @@
<el-row>
<el-col v-for="data in 12" :key="data" :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
<div class="skeleton-card">
<el-card shadow="hover">
<el-card class="skeleton-card__body" shadow="hover">
<div class="skeleton-card__container">
<div class="skeleton-card__header">
<el-skeleton-item ariant="image" class="skeleton-card-icon" />
@@ -77,14 +77,11 @@
})
</script>
<style lang="scss">
<style lang="scss" scoped>
.skeleton-card {
border-radius: 4px;
box-sizing: border-box;
margin-left: 3px;
margin-right: 3px;
margin-bottom: 6px;
margin: 0 3px 6px;
}
.skeleton-card__container {
@@ -92,79 +89,79 @@
display: flex;
flex-direction: column;
justify-content: space-between;
}
.skeleton-card__header {
.skeleton-card__header {
width: 100%;
height: 55px;
display: flex;
border-bottom: 1px solid #dcdfe6;
}
.skeleton-card-icon {
width: 55px;
height: 48px;
margin-right: 12px;
border-radius: 4px;
overflow: hidden;
img {
width: 100%;
height: 55px;
display: flex;
border-bottom: 1px solid #dcdfe6;
.skeleton-card-icon {
width: 55px;
height: 48px;
margin-right: 12px;
border-radius: 4px;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.skeleton-card-name {
height: 28px;
margin-top: 10px;
line-height: 48px;
}
height: 100%;
}
}
.skeleton-card__body {
display: flex;
flex-direction: column;
.skeleton-card-name {
height: 28px;
margin-top: 10px;
line-height: 48px;
}
.skeleton-card-content {
display: flex;
justify-content: space-around;
.skeleton-card__body {
display: flex;
flex-direction: column;
}
ul {
width: 100%;
padding-inline-start: 25px;
list-style: none;
.skeleton-card-content {
display: flex;
justify-content: space-around;
li {
font-size: 13px;
margin-top: 8px;
}
}
ul {
width: 100%;
padding-inline-start: 25px;
list-style: none;
.skeleton-card-text {
margin-top: 2px;
}
.skeleton-card-description {
margin-top: 10px;
}
}
}
.skeleton-card__footer {
height: 35px;
margin-top: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
border-top: 1px solid #dcdfe6;
.skeleton-card-operation {
display: flex;
.skeleton-card-button {
width: 28px;
height: 20px;
margin-right: 10px;
}
li {
font-size: 13px;
margin-top: 8px;
}
}
}
.skeleton-card-text {
margin-top: 2px;
}
.skeleton-card-description {
margin-top: 10px;
}
.skeleton-card__footer {
height: 35px;
margin-top: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
border-top: 1px solid #dcdfe6;
}
.skeleton-card-operation {
display: flex;
}
.skeleton-card-button {
width: 28px;
height: 20px;
margin-right: 10px;
}
</style>
src/components/card/styles/edit-card.scss
+34 -35
View File
@@ -16,53 +16,52 @@
.edit-card {
margin-top: 1px;
}
.edit-card-header {
margin-bottom: 4px;
.edit-card-header {
margin-bottom: 4px;
.el-card {
border: 0;
}
:deep(.el-card) {
border: 0;
}
}
.edit-card-body {
.edit-form-item {
display: flex;
margin-top: 10px;
margin-bottom: 10px;
.edit-card-body {
.edit-form-item {
display: flex;
margin: 10px 0;
justify-content: center;
:deep(.el-row) {
justify-content: center;
.el-row {
justify-content: center;
}
.el-alert {
margin-bottom: 10px;
}
.el-textarea__inner {
height: 80px;
}
}
.edit-form-button {
display: flex;
margin-top: 10px;
:deep(.el-alert) {
margin-bottom: 10px;
}
.el-form-item__content {
justify-content: center;
}
:deep(.el-textarea__inner) {
height: 80px;
}
}
.el-form-item__label {
display: block;
width: 100px;
height: 32px;
text-align: justify;
}
.edit-form-button {
display: flex;
margin-top: 10px;
.el-form-item__label::after {
:deep(.el-form-item__content) {
justify-content: center;
}
}
}
:deep(.el-form-item__label) {
display: block;
width: 100px;
height: 32px;
text-align: justify;
&::after {
display: inline-block;
width: 100%;
content: '';
src/components/card/styles/things-card.scss
+133 -140
View File
@@ -14,10 +14,15 @@
* limitations under the License.
*/
@mixin text-ellipsis {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.things-card {
margin-left: 3px;
margin-right: 3px;
margin-bottom: 6px;
margin: 0 3px 6px;
border-radius: 4px;
box-sizing: border-box;
@@ -26,185 +31,173 @@
display: flex;
flex-direction: column;
justify-content: space-between;
}
.things-card__header {
width: 100%;
height: 55px;
display: flex;
.things-card__header {
width: 100%;
height: 55px;
display: flex;
.things-card-header-icon {
width: 48px;
height: 48px;
margin-right: 12px;
border-radius: 4px;
overflow: hidden;
.things-card-header-icon {
width: 48px;
height: 48px;
margin-right: 12px;
border-radius: 4px;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.things-card-header-name {
height: 48px;
line-height: 48px;
font-size: 14px;
font-weight: bold;
color: rgba(0, 0, 0, 0.85);
cursor: pointer;
&:hover {
color: #1890ff;
}
}
.things-card-header-status {
height: 48px;
line-height: 48px;
text-align: right;
flex: 1;
img {
width: 100%;
height: 100%;
}
}
.things-card__body {
.things-card-header-name {
height: 48px;
line-height: 48px;
font-size: 14px;
font-weight: bold;
color: rgba(0, 0, 0, 0.85);
cursor: pointer;
&:hover {
color: #1890ff;
}
}
.things-card-header-status {
height: 48px;
line-height: 48px;
text-align: right;
flex: 1;
}
}
.things-card__body {
display: flex;
flex-direction: column;
ul {
padding-inline-start: 5px;
list-style: none;
li {
font-size: 13px;
margin-top: 8px;
}
}
.things-card-body-content {
display: flex;
justify-content: space-around;
p.nowrap-description {
text-align: center;
}
}
.things-card-body-content-time {
display: flex;
justify-content: center;
margin-top: 5px;
}
.things-card-body-content-column {
display: flex;
flex-direction: column;
}
ul {
padding-inline-start: 5px;
list-style: none;
.things-card-body-content-value {
display: flex;
flex-direction: column;
list-style: none;
text-align: center;
margin-top: 20px;
li {
font-size: 13px;
margin-top: 8px;
}
.value {
font-weight: bold;
font-size: xx-large;
animation: hue 1s ease-in;
cursor: pointer;
}
.things-card-body-content {
display: flex;
justify-content: space-around;
p.nowrap-description {
text-align: center;
}
.value-edit {
cursor: pointer;
color: #409eff;
}
.things-card-body-content-time {
display: flex;
justify-content: center;
margin-top: 5px;
.value-detail {
margin: 8px 0 -4px;
cursor: pointer;
color: #409eff;
font-size: 18px;
}
.things-card-body-content-column {
display: flex;
flex-direction: column;
.value-point {
height: 17px;
}
.things-card-body-content-value {
display: flex;
flex-direction: column;
list-style: none;
text-align: center;
margin-top: 20px;
.value {
font-weight: bold;
font-size: xx-large;
animation: hue 1s ease-in;
cursor: pointer;
}
.value-edit {
cursor: pointer;
@keyframes hue {
0% {
color: #409eff;
}
.value-detail {
margin-top: 8px;
margin-bottom: -4px;
cursor: pointer;
50% {
color: #f3f4fe;
}
100% {
color: #409eff;
font-size: 18px;
}
.value-point {
height: 17px;
}
@keyframes hue {
0% {
color: #409eff;
}
50% {
color: #f3f4fe;
}
100% {
color: #409eff;
}
}
}
.things-body-content-item-column-2 {
width: 200px;
}
}
.things-card__footer {
.things-body-content-item-column-2 {
width: 200px;
}
}
.things-card__footer {
height: 35px;
margin-top: 2px;
display: flex;
justify-content: flex-end;
border-top: 1px solid #dcdfe6;
.things-card-footer-title {
text-align: center;
font-size: 14px;
font-weight: bold;
width: 100%;
margin-top: 5px;
}
.things-card-footer-copy-id {
height: 35px;
line-height: 35px;
text-align: center;
}
.things-card-footer-operation {
height: 35px;
margin-top: 2px;
display: flex;
justify-content: flex-end;
border-top: 1px solid #dcdfe6;
.things-card-footer-title {
text-align: center;
font-size: 14px;
font-weight: bold;
width: 100%;
margin-top: 5px;
}
.things-card-footer-copy-id {
height: 35px;
line-height: 35px;
text-align: center;
}
.things-card-footer-operation {
height: 35px;
display: flex;
.operation-tooltip {
margin-right: 10px;
}
.operation-tooltip {
margin-right: 10px;
}
}
}
.nowrap-name {
display: block;
@include text-ellipsis;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nowrap-item {
display: block;
@include text-ellipsis;
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nowrap-description {
display: block;
@include text-ellipsis;
width: 350px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.el-card {
src/components/card/styles/tool-card.scss
+4 -7
View File
@@ -15,8 +15,7 @@
*/
.tool-card {
margin-top: 1px;
margin-bottom: 4px;
margin: 1px 0 4px;
.tool-card__body {
display: flex;
@@ -28,7 +27,7 @@
}
.tool-card-body-button {
.el-form-item__content {
:deep(.el-form-item__content) {
display: flex;
justify-content: center;
}
@@ -50,9 +49,7 @@
.tool-select {
.tool-select-input {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 5px;
margin: 0 10px 5px;
}
.tool-select-pagination {
@@ -61,7 +58,7 @@
}
}
.el-card {
:deep(.el-card) {
border: 0;
}
}
src/components/card/title/TitleCard.vue
+19 -19
View File
@@ -16,7 +16,7 @@
<template>
<div class="title-card">
<el-card shadow="hover">
<el-card class="title-card__body" shadow="hover">
<div class="title-card__container">
<slot name="header">
<span class="title-card__header">{{ props.title }}</span>
@@ -36,11 +36,28 @@
})
</script>
<style lang="scss">
<style lang="scss" scoped>
.title-card {
border-radius: 4px;
box-sizing: border-box;
:deep(.el-card) {
width: 100%;
box-sizing: border-box;
}
:deep(.el-card__header) {
padding: 10px;
}
:deep(.el-card__body) {
padding: 10px 5px 0;
}
:deep(.el-tabs__nav) {
margin: 0 5px;
}
.title-card__container {
.title-card__header {
font-size: 14px;
@@ -51,23 +68,6 @@
padding-top: 0;
padding-left: 0;
}
.el-card {
width: 100%;
box-sizing: border-box;
}
.el-card__header {
padding: 10px;
}
.el-card__body {
padding: 10px 5px 0px 5px;
}
.el-tabs__nav {
margin: 0 5px 0 5px;
}
}
}
</style>
src/components/layout/Layout.vue
+1 -1
View File
@@ -110,6 +110,6 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/layout/style.scss';
</style>
src/components/particles/particles.vue
+1 -1
View File
@@ -410,7 +410,7 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
canvas {
display: block;
}
src/views/application/Application.vue
+1 -1
View File
@@ -20,7 +20,7 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
.things-application-iframe {
width: 100%;
height: 100%;
src/views/application/card/ApplicationCard.vue
+1 -1
View File
@@ -66,7 +66,7 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/things-card.scss';
.things-card-application {
src/views/dashboard/Dashboard.vue
+1 -1
View File
@@ -20,7 +20,7 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
.things-dashboard-iframe {
width: 100%;
height: 100%;
src/views/dashboard/card/DashboardCard.vue
+1 -1
View File
@@ -66,7 +66,7 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/things-card.scss';
.things-card-dashboard {
src/views/device/Device.vue
+1 -1
View File
@@ -76,4 +76,4 @@
<script lang="ts" src="./index.ts" />
<style lang="scss"></style>
<style lang="scss" scoped></style>
src/views/device/add/DeviceAddForm.vue
+1 -1
View File
@@ -94,7 +94,7 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/dialog/styles/things-dialog';
@use '@/components/card/styles/tool-card';
</style>
src/views/device/card/DeviceCard.vue
+1 -1
View File
@@ -102,6 +102,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/things-card.scss';
</style>
src/views/device/detail/DeviceDetail.vue
+1 -1
View File
@@ -194,6 +194,6 @@
})
</script>
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/things-card.scss';
</style>
src/views/device/edit/DeviceEdit.vue
+1 -1
View File
@@ -216,7 +216,7 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/edit-card';
@use '@/components/card/styles/tool-card';
</style>
src/views/device/import/DeviceImportForm.vue
+1 -1
View File
@@ -100,7 +100,7 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/dialog/styles/things-dialog';
@use '@/components/card/styles/tool-card';
</style>
src/views/device/tool/DeviceTool.vue
+1 -1
View File
@@ -92,6 +92,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/tool-card';
</style>
src/views/driver/Driver.vue
+1 -1
View File
@@ -37,4 +37,4 @@
<script lang="ts" src="./index.ts" />
<style lang="scss"></style>
<style lang="scss" scoped></style>
src/views/driver/card/DriverCard.vue
+1 -1
View File
@@ -87,7 +87,7 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/things-card.scss';
@use '@/views/driver/card/style.scss';
</style>
src/views/driver/detail/DriverDetail.vue
+1 -1
View File
@@ -89,7 +89,7 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
.detail-content {
margin-left: 0 !important;
margin-right: 0 !important;
src/views/driver/tool/DriverTool.vue
+1 -1
View File
@@ -72,6 +72,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/tool-card.scss';
</style>
src/views/home/Home.vue
+1 -1
View File
@@ -24,6 +24,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/views/home/style.scss';
</style>
src/views/login/Login.vue
+1 -1
View File
@@ -109,6 +109,6 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
@use '@/views/login/style.scss';
</style>
src/views/point/add/PointAddForm.vue
+1 -1
View File
@@ -76,6 +76,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/dialog/styles/things-dialog';
</style>
src/views/point/card/PointCard.vue
+1 -1
View File
@@ -130,6 +130,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/things-card.scss';
</style>
src/views/point/detail/PointDetail.vue
+1 -1
View File
@@ -65,6 +65,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/things-card.scss';
</style>
src/views/point/edit/PointEdit.vue
+1 -1
View File
@@ -112,6 +112,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/edit-card.scss';
</style>
src/views/point/info/PointInfoCard.vue
+1 -1
View File
@@ -49,6 +49,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/things-card.scss';
</style>
src/views/point/tool/PointTool.vue
+1 -1
View File
@@ -94,6 +94,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/tool-card.scss';
</style>
src/views/point/value/PointValue.vue
+1 -1
View File
@@ -209,4 +209,4 @@
})
</script>
<style lang="scss"></style>
<style lang="scss" scoped></style>
src/views/point/value/card/PointValueCard.vue
+1 -1
View File
@@ -218,6 +218,6 @@
})
</script>
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/things-card';
</style>
src/views/point/value/detail/PointValueDetail.vue
+1 -1
View File
@@ -36,6 +36,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/dialog/styles/things-dialog';
</style>
src/views/point/value/edit/PointValueEditForm.vue
+1 -1
View File
@@ -45,6 +45,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/dialog/styles/things-dialog';
</style>
src/views/point/value/tool/PointValueTool.vue
+1 -1
View File
@@ -249,6 +249,6 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/tool-card.scss';
</style>
src/views/profile/Profile.vue
+1 -1
View File
@@ -48,4 +48,4 @@
<script lang="ts" src="./index.ts" />
<style lang="scss"></style>
<style lang="scss" scoped></style>
src/views/profile/add/ProfileAddForm.vue
+1 -1
View File
@@ -45,6 +45,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/dialog/styles/things-dialog.scss';
</style>
src/views/profile/card/ProfileCard.vue
+1 -1
View File
@@ -90,6 +90,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/things-card.scss';
</style>
src/views/profile/detail/ProfileDetail.vue
+1 -1
View File
@@ -70,6 +70,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/things-card.scss';
</style>
src/views/profile/edit/ProfileEdit.vue
+1 -1
View File
@@ -74,6 +74,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/edit-card.scss';
</style>
src/views/profile/tool/ProfileTool.vue
+1 -1
View File
@@ -64,6 +64,6 @@
<script lang="ts" src="./index.ts" />
<style lang="scss">
<style lang="scss" scoped>
@use '@/components/card/styles/tool-card.scss';
</style>