我的待办-能力资源上架，按钮样式调整为统一样式

back/src/views/modules/myAgent/demo/ResourcesAndServices.vue

@@ -7,55 +7,33 @@
           <div class="dataTitleSon">
             {{ itemson.name }}
           </div>
-          <div
+          <div class="dataContent" v-if="
-            class="dataContent"
-            v-if="
             itemson.name !== '算法优势' &&
             itemson.name !== '应用场景' &&
             itemson.name !== '功能介绍'
-            "
+          ">
-          >
+            <el-form-item v-for="itemsonson in itemson.children" :key="itemsonson.name" :label="
-            <el-form-item
-              v-for="itemsonson in itemson.children"
-              :key="itemsonson.name"
-              :label="
               itemsonson.type != ' multipleAdditions' ? itemsonson.name : ''
-              "
+            " v-show="
-              v-show="
   !(
     itemsonson.name === '平台地址' ||
     itemsonson.name === 'SDK安装包' ||
     itemsonson.name === '接口请求方式' ||
     itemsonson.name === '服务接口'
   )
-              "
+">
-            >
+              <div class="videoAndImgCss" v-if="
-              <div
-                class="videoAndImgCss"
-                v-if="
                 itemsonson.type === 'video' || itemsonson.type === 'image'
-                "
+              " @click="videoAndImg(itemsonson.note1)">
-                @click="videoAndImg(itemsonson.note1)"
-              >
                 浏览
               </div>
-               <div
+              <div class="videoAndImgCss" v-if="
-                class="videoAndImgCss"
-                v-if="
                 itemsonson.name === '上传附件'
-                "
+              " @click="videoAndImg(itemsonson.note1)">
-                @click="videoAndImg(itemsonson.note1)"
-              >
                 下载
               </div>
-              <div
+              <div v-else-if="itemsonson.type === ' multipleAdditions'" class="multipleAdditionsClass">
-                v-else-if="itemsonson.type === ' multipleAdditions'"
+                <div v-for="multipleAdditionsItem in itemsonson.note1" :key="multipleAdditionsItem">
-                class="multipleAdditionsClass"
-              >
-                <div
-                  v-for="multipleAdditionsItem in itemsonson.note1"
-                  :key="multipleAdditionsItem"
-                >
                   <el-tooltip placement="top">
                     <div slot="content">
                       {{
@@ -95,54 +73,31 @@
                   <!-- <div>{{ multipleAdditionsItem }}</div> -->
                 </div>
               </div>
-              <el-tooltip v-else placement="top" :disabled="itemsonson.note1 !== null?false:true" :content="itemsonson.note1">
+              <el-tooltip v-else placement="top" :disabled="itemsonson.note1 !== null ? false : true"
+                :content="itemsonson.note1">
                 <!-- <div slot="content" v-show="itemsonson.note1">{{ itemsonson.note1 }}</div> -->
-                <el-input
+                <el-input v-model="itemsonson.note1" disabled="disabled"></el-input>
-                  v-model="itemsonson.note1"
-                  disabled="disabled"
-                ></el-input>
               </el-tooltip>
             </el-form-item>
-            <el-form-item
+            <el-form-item v-for="itemsonson in itemson.children" :key="itemsonson.name" :label="
-              v-for="itemsonson in itemson.children"
-              :key="itemsonson.name"
-              :label="
               itemsonson.type != ' multipleAdditions' ? itemsonson.name : ''
-              "
+            " v-show="
-              v-show="
   (itemsonson.name === '平台地址' && showDocking) ||
   (itemsonson.name === 'SDK安装包' && showSDK) ||
   (itemsonson.name === '接口请求方式' && showInterface) ||
   (itemsonson.name === '服务接口' && showInterface)
-              "
+">
-            >
+              <el-tooltip placement="top" :disabled="itemsonson.note1 !== null ? false : true" :content="itemsonson.note1">
-            <el-tooltip placement="top" :disabled="itemsonson.note1 !== null?false:true" :content="itemsonson.note1">
+                <el-input v-model="itemsonson.note1" disabled="disabled"></el-input>
-              <el-input
-                v-model="itemsonson.note1"
-                disabled="disabled"
-              ></el-input>
               </el-tooltip>
 
             </el-form-item>
           </div>
-          <div
+          <div v-else-if="itemson.name === '算法优势'" style="margin-bottom: 20px">
-            v-else-if="itemson.name === '算法优势'"
+            <div v-for="itemDataForm in dataForm.infoList" :key="itemDataForm.attrType">
-            style="margin-bottom: 20px"
+              <div v-if="itemDataForm.attrType === '算法优势'" class="textAndImg">
-          >
+                <div v-for="itemDataFormValue in itemDataForm.attrValue" :key="itemDataFormValue.name + 'value'"
-            <div
+                  class="textAndImgSon" style="border: 1px solid #3c9bcd;margin">
-              v-for="itemDataForm in dataForm.infoList"
-              :key="itemDataForm.attrType"
-            >
-              <div
-                v-if="itemDataForm.attrType === '算法优势'"
-                class="textAndImg"
-              >
-                <div
-                  v-for="itemDataFormValue in itemDataForm.attrValue"
-                  :key="itemDataFormValue.name + 'value'"
-                  class="textAndImgSon"
-                  style="border: 1px solid #3c9bcd;margin"
-                >
                   <div>{{ itemDataFormValue.name }}</div>
                   <el-tooltip placement="top">
                     <div slot="content">{{ itemDataFormValue.desc }}</div>
@@ -152,24 +107,11 @@
               </div>
             </div>
           </div>
-          <div
+          <div v-else-if="itemson.name === '应用场景'" style="margin-bottom: 20px">
-            v-else-if="itemson.name === '应用场景'"
+            <div v-for="itemDataForm in dataForm.infoList" :key="itemDataForm.attrType">
-            style="margin-bottom: 20px"
+              <div v-if="itemDataForm.attrType === '应用场景'" class="textAndImg">
-          >
+                <div v-for="itemDataFormValue in itemDataForm.attrValue" :key="itemDataFormValue.name + 'value'"
-            <div
+                  class="textAndImgSon" style="border: 1px solid #3c9bcd;margin">
-              v-for="itemDataForm in dataForm.infoList"
-              :key="itemDataForm.attrType"
-            >
-              <div
-                v-if="itemDataForm.attrType === '应用场景'"
-                class="textAndImg"
-              >
-                <div
-                  v-for="itemDataFormValue in itemDataForm.attrValue"
-                  :key="itemDataFormValue.name + 'value'"
-                  class="textAndImgSon"
-                  style="border: 1px solid #3c9bcd;margin"
-                >
                   <div>{{ itemDataFormValue.name }}</div>
                   <el-tooltip placement="top">
                     <div slot="content">{{ itemDataFormValue.desc }}</div>
@@ -180,24 +122,11 @@
               </div>
             </div>
           </div>
-          <div
+          <div v-else-if="itemson.name === '功能介绍'" style="margin-bottom: 20px">
-            v-else-if="itemson.name === '功能介绍'"
+            <div v-for="itemDataForm in dataForm.infoList" :key="itemDataForm.attrType">
-            style="margin-bottom: 20px"
+              <div v-if="itemDataForm.attrType === '功能介绍'" class="textAndImg">
-          >
+                <div v-for="itemDataFormValue in itemDataForm.attrValue" :key="itemDataFormValue.name + 'value'"
-            <div
+                  class="textAndImgSon" style="border: 1px solid #3c9bcd;margin">
-              v-for="itemDataForm in dataForm.infoList"
-              :key="itemDataForm.attrType"
-            >
-              <div
-                v-if="itemDataForm.attrType === '功能介绍'"
-                class="textAndImg"
-              >
-                <div
-                  v-for="itemDataFormValue in itemDataForm.attrValue"
-                  :key="itemDataFormValue.name + 'value'"
-                  class="textAndImgSon"
-                  style="border: 1px solid #3c9bcd;margin"
-                >
                   <div>{{ itemDataFormValue.name }}</div>
                   <el-tooltip placement="top">
                     <div slot="content">{{ itemDataFormValue.desc }}</div>
@@ -227,7 +156,7 @@ export default {
       type: Array
     }
   },
-  data () {
+  data() {
     return {
       dataList: [],
       dataView: [],
@@ -242,12 +171,12 @@ export default {
     }
   },
   watch: {
-    dataList (item) {
+    dataList(item) {
       if (item) {
         this.dataList = item
       }
     },
-    insertList (val) {
+    insertList(val) {
       if (val) {
         if (this.dataForm.type === '应用资源') {
           this.dataView = val.filter(
@@ -437,7 +366,7 @@ export default {
   },
   computed: {},
   methods: {
-    videoAndImg (link) {
+    videoAndImg(link) {
       if (link) {
         window.open(link)
       } else {
@@ -447,7 +376,7 @@ export default {
         })
       }
     },
-    deptName () {
+    deptName() {
       console.log(this.dataForm.deptId)
       this.$http
         .get(`/sys/dept/${this.dataForm.deptId}`)
@@ -456,7 +385,7 @@ export default {
           this.unit = res.data.name
         })
     },
-    queryPartAppByKeyIdFunction (index, indexSon, indexSonSon) {
+    queryPartAppByKeyIdFunction(index, indexSon, indexSonSon) {
       if (this.dataForm.type === '组件服务') {
         this.$http
           .get(
@@ -495,8 +424,8 @@ export default {
       }
     }
   },
-  created () {},
+  created() { },
-  mounted () {
+  mounted() {
     this.deptName()
   }
 }
@@ -514,6 +443,7 @@ export default {
     font-size: 22px;
     margin-bottom: 25px;
   }
+
   .dataTitleSon {
     padding-left: 30px;
     color: #333333;
@@ -522,9 +452,11 @@ export default {
     background: url("~@/assets/img/sj-jx.png") no-repeat;
     background-position-x: 15px;
   }
+
   .multipleAdditionsClass {
     display: flex;
-    & > div {
+
+    &>div {
       margin-right: 30px;
       border: 1px solid #3c9bcd;
       width: 212px;
@@ -534,7 +466,8 @@ export default {
       align-items: center;
       padding: 10px;
       overflow: hidden;
-      & > div:first-child {
+
+      &>div:first-child {
         margin-bottom: 10px;
         font-weight: bold;
         line-height: 14px;
@@ -544,7 +477,8 @@ export default {
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
       }
-      & > div:nth-child(2) {
+
+      &>div:nth-child(2) {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -552,7 +486,8 @@ export default {
         -webkit-line-clamp: 6;
         line-height: initial;
       }
-      & > div:nth-child(3) {
+
+      &>div:nth-child(3) {
         width: 90%;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -563,6 +498,7 @@ export default {
       }
     }
   }
+
   .videoAndImgCss {
     cursor: pointer;
     font-size: 12px;
@@ -571,10 +507,13 @@ export default {
     padding: 5px;
     margin-top: 10px;
     background: rgba(60, 155, 205, 0.1);
+    display: inline-block;
   }
+
   .textAndImg {
     display: flex;
     padding-left: 30px;
+
     .textAndImgSon {
       width: 212px;
       height: 182px;
@@ -584,7 +523,8 @@ export default {
       align-items: center;
       padding: 10px;
       position: relative;
-      & > div {
+
+      &>div {
         -webkit-line-clamp: 5;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -592,11 +532,13 @@ export default {
         -webkit-box-orient: vertical;
         word-break: break-all;
       }
-      & > div:first-child {
+
+      &>div:first-child {
         margin-bottom: 10px;
         font-weight: bold;
       }
-      & > div:nth-child(3) {
+
+      &>div:nth-child(3) {
         margin-top: 10px;
         position: absolute;
         bottom: 8px;
@@ -610,13 +552,27 @@ export default {
       }
     }
   }
+
   .dataContent {
-    display: grid;
+    display: flex;
-    grid-template-columns: repeat(3, 33%);
+    align-items: center;
-    padding-left: 30px;
+    flex-wrap: wrap;
+
   }
+
+  ::v-deep .el-form-item {
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  ::v-deep .el-form-item__label {
+    width: 112px;
+  }
+
   ::v-deep .el-form-item__content {
     display: inline-block;
+
     input {
       width: 400px;
     }