feat: 优化表现显示方式

src/views/iot/device/instance/component/edit.vue

@@ -22,7 +22,10 @@
             <el-button type="primary" size="small" @click="toAddTag">添加标签</el-button>
             <div class="tags">
               <div class="tag flex" v-for="tag, i in ruleForm.tags" :key="tag.key">
-                <el-tag>{{ tag.key }} : {{ tag.name }} : {{ tag.value }}</el-tag>
+                  <div class="capsule mr-3">
+                  <div class="label">{{ tag.name }}</div>
+                  <div class="value">{{ tag.value }}</div>
+                </div>
                 <el-button type="warning" size="small" @click="toUpdateTag(tag)">修改</el-button>
                 <el-button type="danger" size="small" @click="delTagRow(i)">删除</el-button>
               </div>
@@ -354,6 +357,34 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.capsule{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: 1px solid var(--el-color-primary);
+  border-radius: 20px;
+  font-size: 12px;
+  .label{
+      height: 24px;
+      display: flex;
+      align-items: center;
+      border-top-left-radius: 20px;
+      border-bottom-left-radius: 20px;
+      background-color: var(--el-color-primary);
+      padding: 0px 10px;
+      text-indent: 2px;
+      color: var(--el-color-white) !important;
+  }
+  .value{
+      height: 24px;
+      display: flex;
+      align-items: center;
+      border-top-right-radius: 20px;
+      border-bottom-right-radius: 20px;
+      text-indent: -2px;
+      padding: 0px 10px;
+  }
+}
 .tags-wrapper {
   .tag {
     margin: 8px 0;

src/views/iot/device/instance/detail.vue

@@ -97,7 +97,12 @@
             <el-descriptions-item label="详细地址">{{ detail.address }}</el-descriptions-item>
             <el-descriptions-item label="说明">{{ detail.desc }}</el-descriptions-item>
             <el-descriptions-item label="标签">
-              <el-tag v-for="(item, index) in detail.tags" :key="index" class="mr-2">{{ item.name }}</el-tag>
+            <div class="capsule-wrapper">
+              <div v-for="(item, index) in detail.tags" :key="index" class="capsule mr-3">
+                <div class="label">{{ item.name }}</div>
+                <div class="value">{{ item.value }}</div>
+              </div>
+            </div>
             </el-descriptions-item>
           </el-descriptions>
           <div class="flex" style="margin-top: 20px;">
@@ -1081,7 +1086,39 @@ export default defineComponent({
   },
 });
 </script>
-<style scoped>
+<style scoped lang="scss">
+.capsule-wrapper{
+  display: flex;
+  align-items: center;
+  .capsule{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border: 1px solid var(--el-color-primary);
+    border-radius: 20px;
+    font-size: 12px;
+    .label{
+        height: 24px;
+        display: flex;
+        align-items: center;
+        border-top-left-radius: 20px;
+        border-bottom-left-radius: 20px;
+        background-color: var(--el-color-primary);
+        padding: 0px 10px;
+        text-indent: 2px;
+        color: var(--el-color-white) !important;
+    }
+    .value{
+        height: 24px;
+        display: flex;
+        align-items: center;
+        border-top-right-radius: 20px;
+        border-bottom-right-radius: 20px;
+        text-indent: -2px;
+        padding: 0px 10px;
+    }
+  }
+}
 .oblist {
   display: flex;
   flex-direction: row;