UI样式修改

back/src/views/modules/activiti/demo/abilitydemandapply.vue

@@ -60,7 +60,25 @@
          </el-tooltip>   
       </el-form-item>
       <el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
-          <el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
+        <button
+                style="
+                  width: 100px;
+                  height: 30px;
+                  margin-right: 10px;
+                  background: rgb(237, 244, 252);
+                  color: rgb(0, 135, 255);
+                  font-size: 14px;
+                  border-radius: 6px;
+                  border: 1px solid rgb(187, 211, 239);
+                  padding: 0px;
+                  text-align: center;
+                  cursor: pointer;
+                "
+              @click="downloadFile(dataForm.enclosure, '申请附件')"
+              >
+              附件下载
+              </button>
+          <!-- <el-button     class="DownloadAttachment" @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button> -->
       </el-form-item>
     </el-form>
     <!--  流程综合组件   -->
@@ -334,6 +352,11 @@ export default {
 }
 </script>
 <style lang="scss">
+  .DownloadAttachment {
+              position: absolute;
+              right: 10px;
+              top: -150px;
+            }
 .agreeOr {
   & > div {
     // text-align: right;

front/src/views/capacityOnTheShelf/Algorithm.vue

@@ -7,18 +7,19 @@
 -->
 <template>
   <div class="box">
-    <div class="header">能力上架申请</div>
+    <!-- <div class="header">能力上架申请</div> -->
-    
     <div class="top">
       <div
         v-for="(nav, index) in navList"
         :key="nav"
-        :class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
+        :class="[index <= navList2.indexOf(showView) ? 'finish' : 'ff']"
       >
+        <div class="wai">
           <span class="bg-box">
             <span>{{ index + 1 }}</span>
           </span>
-        <span>{{ nav.name }}</span>
+          <span class="bg-name">{{ nav.name }}</span>
+        </div>
         <div class="line" v-if="index !== navList.length - 1"></div>
       </div>
     </div>
@@ -80,37 +81,10 @@
         :required="required"
         :notFilled="notFilled"
       ></put-on-the-shelf>
-      <!-- <algorithm-essential-information
+   
-        v-if="showView === '基本信息' && refData.name"
-        :refData="refData"
-        :dataFrom="dataFrom"
-        :videoList="videoList"
-      ></algorithm-essential-information>
-      <algorithm-advantage
-        v-else-if="showView === '算法优势'"
-        :refData="refData"
-        :dataFrom="dataFrom"
-      ></algorithm-advantage>
-      <algorithm-scenarios
-        v-else-if="showView === '应用场景'"
-        :refData="refData"
-        :dataFrom="dataFrom"
-      ></algorithm-scenarios> -->
-      <!-- <algorithm-scenarios
-        v-else-if="showView === '应用场景'"
-        :refData="refData"
-        :dataFrom="dataFrom"
-      ></algorithm-scenarios> -->
-      <!-- <algorithm-deployment-use
-        v-else-if="showView === '部署与使用'"
-        :refData="refData"
-        :dataFrom="dataFrom"
-        :fileList="fileList"
-        :imgList="imgList"
-      ></algorithm-deployment-use> -->
     </div>
     <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
-      <button @click="close()">取消</button>
+     
       <a-popconfirm
         v-if="
           showView == '算法优势' &&
@@ -124,7 +98,7 @@
         @confirm="changeSfys('上一步')"
         @cancel="cancel"
       >
-        <button>上一步</button>
+        <button  class="buzhou">上一步</button>
       </a-popconfirm>
       <button
         v-else-if="
@@ -133,6 +107,7 @@
             sfys[0].list.length
         "
         @click="changeSfys('上一步')"
+        class="buzhou"
       >
         上一步
       </button>
@@ -149,7 +124,7 @@
         @confirm="changeYycj('上一步')"
         @cancel="cancel"
       >
-        <button>上一步</button>
+        <button class="buzhou">上一步</button>
       </a-popconfirm>
       <button
         v-else-if="
@@ -158,10 +133,11 @@
             yycj[0].list.length
         "
         @click="changeYycj('上一步')"
+        class="buzhou"
       >
         上一步
       </button>
-      <button v-else-if="showView !== '基本信息'" @click="back()">
+      <button class="buzhou" v-else-if="showView !== '基本信息'" @click="back()">
         上一步
       </button>
       <a-popconfirm
@@ -178,9 +154,9 @@
         @confirm="changeBs('预览')"
         @cancel="cancel"
       >
-        <button>预览</button>
+        <button class="buzhou">预览</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与使用'" @click="preview()">
+      <button v-else-if="showView === '部署与使用'" @click="preview()" class="buzhou">
         预览
       </button>
       <a-popconfirm
@@ -196,7 +172,7 @@
         @confirm="changeSfys('下一步')"
         @cancel="cancel"
       >
-        <button>下一步</button>
+        <button class="buzhou">下一步</button>
       </a-popconfirm>
       <button
         v-else-if="
@@ -205,6 +181,7 @@
             sfys[0].list.length
         "
         @click="changeSfys('下一步')"
+        class="buzhou"
       >
         下一步
       </button>
@@ -221,7 +198,7 @@
         @confirm="changeYycj('下一步')"
         @cancel="cancel"
       >
-        <button>下一步</button>
+        <button class="buzhou">下一步</button>
       </a-popconfirm>
       <button
         v-else-if="
@@ -230,10 +207,11 @@
             yycj[0].list.length
         "
         @click="changeYycj('下一步')"
+        class="buzhou"
       >
         下一步
       </button>
-      <button v-else-if="showView !== '部署与使用'" @click="next()">
+      <button class="buzhou" v-else-if="showView !== '部署与使用'" @click="next()">
         下一步
       </button>
       <a-popconfirm
@@ -250,36 +228,37 @@
         @confirm="changeBs('提交')"
         @cancel="cancel"
       >
-        <button>提交</button>
+        <button class="buzhou">提交</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与使用'" @click="submit()">
+      <button class="buzhou" v-else-if="服务商联系电话 === '部署与使用'" @click="submit()">
         提交
       </button>
+       <button class="quxiao" @click="close()">取消</button>
     </div>
   </div>
 </template>
 <script setup>
-  // import AlgorithmEssentialInformation from '@/views/capacityOnTheShelf/components/AlgorithmEssentialInformation.vue'
+// import AlgorithmEssentialInformation from '@/views/capacityOnTheShelf/components/AlgorithmEssentialInformation.vue'
-  // import AlgorithmAdvantage from '@/views/capacityOnTheShelf/components/AlgorithmAdvantage.vue'
+// import AlgorithmAdvantage from '@/views/capacityOnTheShelf/components/AlgorithmAdvantage.vue'
-  // import AlgorithmScenarios from '@/views/capacityOnTheShelf/components/AlgorithmScenarios.vue'
+// import AlgorithmScenarios from '@/views/capacityOnTheShelf/components/AlgorithmScenarios.vue'
-  import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
+import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
-  // import AlgorithmDeploymentUse from '@/views/capacityOnTheShelf/components/AlgorithmDeploymentUse.vue'
+// import AlgorithmDeploymentUse from '@/views/capacityOnTheShelf/components/AlgorithmDeploymentUse.vue'
-  import { ref, onBeforeUnmount } from 'vue'
+import { ref, onBeforeUnmount } from 'vue'
-  import { useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
-  import { getCategoryTree } from '@/api/personalCenter'
+import { getCategoryTree } from '@/api/personalCenter'
-  import { shangjiainsert, shangjiaapply } from '@/api/personalCenter'
+import { shangjiainsert, shangjiaapply } from '@/api/personalCenter'
-  import {
+import {
   getUser,
   getUserInfo,
   selectOne,
   updateRes,
   relaunch,
-  } from '@/api/home'
+} from '@/api/home'
-  import { message } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
-  import mybus from '@/myplugins/mybus'
+import mybus from '@/myplugins/mybus'
-  const router = useRouter()
+const router = useRouter()
-  const showView = ref('基本信息')
+const showView = ref('基本信息')
-  const sfys = ref([
+const sfys = ref([
   {
     name: '算法优势',
     list: [
@@ -297,8 +276,8 @@
       },
     ],
   },
-  ])
+])
-  const yycj = ref([
+const yycj = ref([
   {
     name: '应用场景',
     list: [
@@ -322,8 +301,8 @@
       },
     ],
   },
-  ])
+])
-  const bs = ref([
+const bs = ref([
   {
     name: '计费标准信息',
     list: [
@@ -366,19 +345,19 @@
       },
     ],
   },
-  ])
+])
-  let shiyongshouce = ref({})
+let shiyongshouce = ref({})
-  const navList = ref([])
+const navList = ref([])
-  const navList2 = ref([])
+const navList2 = ref([])
-  const fileList = ref({})
+const fileList = ref({})
-  const packageList = ref({})
+const packageList = ref({})
-  const accessoryList = ref({})
+const accessoryList = ref({})
-  const imgList = ref({})
+const imgList = ref({})
-  const videoList = ref({})
+const videoList = ref({})
-  const data = ref({})
+const data = ref({})
-  const refData = ref({})
+const refData = ref({})
-  const submitFlag = ref(true)
+const submitFlag = ref(true)
-  const dataFrom = ref({
+const dataFrom = ref({
   infoList: [
     {
       attrType: '组件类型',
@@ -389,8 +368,8 @@
   delFlag: 0,
   type: '组件服务',
   deptId: '',
-  })
+})
-  const required = ref([
+const required = ref([
   '归属部门',
   '部门联系人',
   '部门联系人电话',
@@ -407,15 +386,15 @@
   '服务接口',
   '接口请求方式',
   '算法类别',
-  ])
+])
-  const notFilled = ref([])
+const notFilled = ref([])
-  getUser().then((res) => {
+getUser().then((res) => {
   dataFrom.value.deptId = res.data.data.deptId
-  })
+})
-  const close = () => {
+const close = () => {
   window.close()
-  }
+}
-  const back = () => {
+const back = () => {
   navList.value.forEach((val, index) => {
     if (val.key === showView.value && index > 0) {
       showView.value = navList2.value[index - 1]
@@ -425,8 +404,8 @@
       console.log('表单数据=============>', dataFrom.value)
     }
   })
-  }
+}
-  const next = () => {
+const next = () => {
   notFilled.value = []
   console.log(dataFrom.value, 'dataFrom.value.name')
   if (!dataFrom.value.name) {
@@ -448,18 +427,14 @@
     notFilled.value.push('部门联系人电话')
   }
   if (
-      !dataFrom.value.infoList.filter(
+    !dataFrom.value.infoList.filter((val) => val.attrType === '算法类别')[0] ||
-        (val) => val.attrType === '算法类别'
-      )[0] ||
     !dataFrom.value.infoList.filter((val) => val.attrType === '算法类别')[0]
       .attrValue
   ) {
     notFilled.value.push('算法类别')
   }
   if (
-      !dataFrom.value.infoList.filter(
+    !dataFrom.value.infoList.filter((val) => val.attrType === '应用领域')[0] ||
-        (val) => val.attrType === '应用领域'
-      )[0] ||
     !dataFrom.value.infoList.filter((val) => val.attrType === '应用领域')[0]
       .attrValue
   ) {
@@ -484,9 +459,9 @@
       console.log('表单数据=============>', dataFrom.value, refData.value)
     }
   }
-  }
+}
-  // 预览
+// 预览
-  const preview = () => {
+const preview = () => {
   notFilled.value = []
   console.log(dataFrom.value, 'dataFrom.value.name')
   if (
@@ -521,8 +496,8 @@
     })
     window.open(newpage.href, '_blank')
   }
-  }
+}
-  const submit = () => {
+const submit = () => {
   notFilled.value = []
   console.log(dataFrom.value, 'dataFrom.value.name')
   if (
@@ -612,8 +587,8 @@
       }
     }
   }
-  }
+}
-  const init = () => {
+const init = () => {
   getCategoryTree().then((res) => {
     // console.clear()
     res.data.data = res.data.data
@@ -729,16 +704,14 @@
       }
     })
     data.value = res.data.data.children
-      refData.value = data.value.filter(
+    refData.value = data.value.filter((item) => item.name === showView.value)[0]
-        (item) => item.name === showView.value
-      )[0]
     console.log('所有编目结构==============>', data.value)
   })
-  }
+}
-  const resourceId = router.currentRoute.value.query.id
+const resourceId = router.currentRoute.value.query.id
-  const taskId = router.currentRoute.value.query.taskId
+const taskId = router.currentRoute.value.query.taskId
-  const echoData = ref({})
+const echoData = ref({})
-  if (resourceId) {
+if (resourceId) {
   // 回显数据
   selectOne(resourceId).then((res) => {
     echoData.value = res.data.data
@@ -746,25 +719,25 @@
     init()
     // console.log('驳回修改===================>', echoData.value)
   })
-  } else {
+} else {
   init()
-  }
+}
-  // 特殊字段处理
+// 特殊字段处理
-  const refPutOnTheShelf = ref(null)
+const refPutOnTheShelf = ref(null)
-  const changeSfys = (type) => {
+const changeSfys = (type) => {
   console.log(refPutOnTheShelf, sfys.value)
   refPutOnTheShelf.value.add('算法优势', true, type)
-  }
+}
-  const changeYycj = (type) => {
+const changeYycj = (type) => {
   console.log(refPutOnTheShelf)
   refPutOnTheShelf.value.add('应用场景', true, type)
-  }
+}
-  const changeBs = (type) => {
+const changeBs = (type) => {
   console.log(refPutOnTheShelf)
   refPutOnTheShelf.value.add('计费标准信息', true)
   refPutOnTheShelf.value.add('常见问题', true, type)
-  }
+}
-  mybus.on('chageDataFrom', (obj) => {
+mybus.on('chageDataFrom', (obj) => {
   if (obj.attrType == '技术文档' && obj.attrValue != null) {
     shiyongshouce.value = obj
   }
@@ -783,24 +756,24 @@
     })
   }
   console.log('数据变更=================》', obj, dataFrom.value.infoList)
-  })
+})
-  mybus.on('chageFileList', (obj) => {
+mybus.on('chageFileList', (obj) => {
   fileList.value = obj
-  })
+})
-  mybus.on('chagePackageList', (obj) => {
+mybus.on('chagePackageList', (obj) => {
   packageList.value = obj
-  })
+})
-  mybus.on('chageAccessory', (obj) => {
+mybus.on('chageAccessory', (obj) => {
   accessoryList.value = obj
-  })
+})
-  mybus.on('chageImgList', (obj) => {
+mybus.on('chageImgList', (obj) => {
   imgList.value = obj
-  })
+})
-  mybus.on('chageVideoList', (obj) => {
+mybus.on('chageVideoList', (obj) => {
   videoList.value = obj
-  })
+})
-  //datafrom外面数据
+//datafrom外面数据
-  mybus.on('chageDataFromDwon', (obj) => {
+mybus.on('chageDataFromDwon', (obj) => {
   switch (obj.attrType) {
     case '算法名称':
       dataFrom.value.name = obj.attrValue
@@ -834,8 +807,8 @@
       break
   }
   // console.log('dataFrom.value', dataFrom.value)
-  })
+})
-  onBeforeUnmount(() => {
+onBeforeUnmount(() => {
   mybus.off('chageDataFrom')
   mybus.off('chageFileList')
   mybus.off('chageImgList')
@@ -843,13 +816,13 @@
   mybus.off('chageVideoList')
   mybus.off('chagePackageList')
   mybus.off('chageAccessory')
-  })
+})
 </script>
 <style lang="less" scoped>
-  .box {
+.box {
   position: relative;
   top: 0.64rem;
-    margin: 0.15rem 4rem;
+  // margin: 0.15rem 3rem;
   padding: 0.1rem;
   background: #fff;
   .header {
@@ -860,57 +833,87 @@
     padding: 0 1rem;
   }
   .top {
-      margin: 0.1rem 0.2rem 0;
+    font-size: 16px;
-      padding: 0.15rem 0.3rem;
+    margin: 0.32px 0.4px 0;
-      background: #edf4fc;
+    padding: 24px 24pxs;
-      display: flex;
-      justify-content: space-between;
-      div {
-        font-size: 0.18rem;
-        color: #999;
     display: flex;
     justify-content: center;
+    .ff {
+      color: #b3b3b3;
+      display: inline-flex;
+      justify-content: center;
       align-items: center;
+      .wai {
+        margin-top: 14px;
         .bg-box {
           display: flex;
           justify-content: center;
           align-items: center;
-          width: 0.45rem;
+          width: 32px;
-          height: 0.45rem;
+          height: 32px;
           border-radius: 50%;
-          border: 0.01rem solid rgb(214, 214, 214);
+          // border: 0.01rem solid rgb(214, 214, 214);
-          margin-right: 0.1rem;
+          margin: 0px 16px;
           transition: all 0.3s ease;
           span {
             display: flex;
             justify-content: center;
             align-items: center;
-            width: 0.3rem;
+            width: 32px;
-            height: 0.3rem;
+            height: 32px;
             border-radius: 50%;
-            border: 0.01rem solid #999;
+            border: 1px solid #d9d9d9;
+          }
+        }
+        .bg-name {
+          color: #b3b3b3;
         }
       }
       .line {
-          margin-left: 0.1rem;
+        // margin-left: 16px;
-          width: 1.3rem;
+        width: 326px;
-          height: 0.01rem;
+        height: 2px;
-          background: #999;
+        background: #d9d9d9;
       }
     }
     .finish {
-        color: #0087ff;
+      color: #fff;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .wai {
+        margin-top: 14px;
         .bg-box {
-          background: #9ccefa;
+          display: flex;
-          color: #fff;
+          justify-content: center;
-          border: 0.01rem solid #9ccefa;
+          align-items: center;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          // border: 0.01rem solid rgb(214, 214, 214);
+          margin: 0px 16px;
+          transition: all 0.3s ease;
           span {
-            background: #0087ff;
+            background: #0058e1;
-            border: 0.01rem solid #0087ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            border: 1px solid solid #0058e1;
+          }
+        }
+        .bg-name {
+          color: #212121;
+          font-weight: bold;
         }
       }
       .line {
-          background: #0087ff;
+        // margin-left: 16px;
+        width: 326px;
+        height: 2px;
+        background: #0058e1;
       }
     }
     .btn {
@@ -942,34 +945,55 @@
       }
     }
     .first {
-        justify-content: space-around;
+      justify-content: center;
     }
   }
   .btn {
     display: flex;
-      justify-content: space-between;
+    justify-content: center;
     padding: 0.1rem 3.5rem 0;
-      button {
+   //  button {
+      // cursor: pointer;
+      // font-size: 14px;
+      // text-align: center;
+      // color: #fff;
+      // border: none;
+      // border-radius: 0.06rem;
+      // background: #0087ff;
+      // margin-right:12px;
+    //  margin-right:12px;
+    .quxiao{
+      margin-right:12px;
       cursor: pointer;
-        font-size: 0.14rem;
+      width: 90px;
-        width: 0.8rem;
+      height: 32px;
-        height: 0.35rem;
+      background: #ffffff;
-        text-align: center;
+      color:#0058e1;
-        color: #fff;
+      border-radius: 2px;
-        border: none;
+      border: 1px #0058e1 solid;
-        border-radius: 0.06rem;
-        background: #0087ff;
     }
-      button:nth-of-type(1) {
+    // .quxiao:hover{
-        color: #0087ff;
+    //   background: #0058e1;
-        background: #e1edfa;
+    //   color:#ffffff;   
-      }
+    // }
-      button:nth-of-type(2) {
+    .buzhou{
-        background: #01c5dc;
+      margin-right:12px;
+      cursor: pointer;
+      background: #0058e1;
+      color:#ffffff;
+      width: 90px;
+      height: 32px;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
   }
+  // .buzhou:hover{  
+  //     background: #ffffff;
+  //     color:#0058e1;  
+  // }
+    
   }
   .first {
-      justify-content: space-around;
+    justify-content: center;
-    }
   }
+}
 </style>

front/src/views/capacityOnTheShelf/Application.vue

@@ -7,17 +7,19 @@
 -->
 <template>
   <div class="box">
-    <div class="header">能力上架申请</div>
+    <!-- <div class="header">能力上架申请</div> -->
     <div class="top">
       <div
         v-for="(nav, index) in navList"
         :key="nav"
-        :class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
+        :class="[index <= navList2.indexOf(showView) ? 'finish' : 'ff']"
       >
+        <div class="wai">
           <span class="bg-box">
             <span>{{ index + 1 }}</span>
           </span>
-        <span>{{ nav.name }}</span>
+          <span class="bg-name">{{ nav.name }}</span>
+        </div>
         <div class="line" v-if="index !== navList.length - 1"></div>
       </div>
     </div>
@@ -101,7 +103,7 @@
       ></application-deployment-use> -->
     </div>
     <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
-      <button @click="close()">取消</button>
+     
 
       <a-popconfirm
         v-if="
@@ -116,13 +118,14 @@
         @confirm="changeGnjs('上一步')"
         @cancel="cancel"
       >
-        <button>上一步</button>
+        <button class="buzhou">上一步</button>
       </a-popconfirm>
-      <button v-else-if="showView == '功能介绍'" @click="changeGnjs('上一步')">
+      <button class="buzhou" v-else-if="showView == '功能介绍'" @click="changeGnjs('上一步')">
         上一步
       </button>
       <!-- 分割线 -->
       <button
+      class="buzhou"
         v-show="showView !== '基本信息' && showView === '部署与应用'"
         @click="back()"
       >
@@ -141,12 +144,12 @@
         @confirm="changeBs('预览')"
         @cancel="cancel"
       >
-        <button>预览</button>
+        <button class="buzhou">预览</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与应用'" @click="preview()">
+      <button class="buzhou" v-else-if="showView === '部署与应用'" @click="preview()">
         预览
       </button>
-      <button v-show="showView === '基本信息'" @click="next()">下一步</button>
+      <button class="buzhou" v-show="showView === '基本信息'" @click="next()">下一步</button>
       <a-popconfirm
         v-if="
           showView == '功能介绍' &&
@@ -160,9 +163,9 @@
         @confirm="changeGnjs('下一步')"
         @cancel="cancel"
       >
-        <button>下一步</button>
+        <button class="buzhou">下一步</button>
       </a-popconfirm>
-      <button v-else-if="showView == '功能介绍'" @click="changeGnjs('下一步')">
+      <button  class="buzhou" v-else-if="showView == '功能介绍'" @click="changeGnjs('下一步')">
         下一步
       </button>
       <a-popconfirm
@@ -178,11 +181,12 @@
         @confirm="changeBs('提交')"
         @cancel="cancel"
       >
-        <button>提交</button>
+        <button class="buzhou">提交</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与应用'" @click="submit()">
+      <button class="buzhou" v-else-if="showView === '部署与应用'" @click="submit()">
         提交
       </button>
+      <button class="quxiao" @click="close()">取消</button>
     </div>
   </div>
 </template>
@@ -716,84 +720,119 @@
 <style lang="less" scoped>
   .box {
   position: relative;
-    top: 64px;
+  top: 0.64rem;
-    margin: 15px 400px;
+  // margin: 0.15rem 3rem;
-    padding: 10px;
+  padding: 0.1rem;
   background: #fff;
   .header {
-      font-size: 28px;
+    font-size: 0.28rem;
     font-weight: 600;
   }
   .vue-box {
-      padding: 0 100px;
+    padding: 0 1rem;
   }
   .top {
-      margin: 10px 20px 0;
+    font-size: 16px;
-      padding: 15px 30px;
+    margin: 0.32px 0.4px 0;
-      background: #edf4fc;
+    padding: 24px 24pxs;
-      display: flex;
-      justify-content: space-between;
-      div {
-        font-size: 18px;
-        color: #999;
     display: flex;
     justify-content: center;
+    .ff {
+      color: #b3b3b3;
+      display: inline-flex;
+      justify-content: center;
       align-items: center;
+      .wai {
+        margin-top: 14px;
         .bg-box {
           display: flex;
           justify-content: center;
           align-items: center;
-          width: 45px;
+          width: 32px;
-          height: 45px;
+          height: 32px;
           border-radius: 50%;
-          border: 1px solid rgb(214, 214, 214);
+          // border: 0.01rem solid rgb(214, 214, 214);
-          margin-right: 10px;
+          margin: 0px 16px;
           transition: all 0.3s ease;
           span {
             display: flex;
             justify-content: center;
             align-items: center;
-            width: 30px;
+            width: 32px;
-            height: 30px;
+            height: 32px;
             border-radius: 50%;
-            border: 1px solid #999;
+            border: 1px solid #d9d9d9;
+          }
+        }
+        .bg-name {
+          color: #b3b3b3;
         }
       }
       .line {
-          margin-left: 10px;
+        // margin-left: 16px;
-          width: 280px;
+        width: 326px;
-          height: 1px;
+        height: 2px;
-          background: #999;
+        background: #d9d9d9;
       }
     }
     .finish {
-        color: #0087ff;
-        .bg-box {
-          background: #9ccefa;
       color: #fff;
-          border: 1px solid #9ccefa;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .wai {
+        margin-top: 14px;
+        .bg-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          // border: 0.01rem solid rgb(214, 214, 214);
+          margin: 0px 16px;
+          transition: all 0.3s ease;
           span {
-            background: #0087ff;
+            background: #0058e1;
-            border: 1px solid #0087ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            border: 1px solid solid #0058e1;
+          }
+        }
+        .bg-name {
+          color: #212121;
+          font-weight: bold;
         }
       }
       .line {
-          background: #0087ff;
+        // margin-left: 16px;
-        }
+        width: 326px;
+        height: 2px;
+        background: #0058e1;
       }
     }
     .btn {
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
-      padding: 10px 350px 0;
+      padding: 0.1rem 3.5rem 0;
       button {
         cursor: pointer;
-        width: 80px;
+        font-size: 0.14rem;
-        height: 35px;
+        width: 0.8rem;
+        height: 0.35rem;
         text-align: center;
         color: #fff;
-        border: none;
+        border: 0.01rem solid #9ccefa;
-        border-radius: 6px;
+        span {
+          background: #0087ff;
+          border: 0.01rem solid #0087ff;
+        }
+      }
+      .line {
         background: #0087ff;
       }
       button:nth-of-type(1) {
@@ -805,7 +844,55 @@
       }
     }
     .first {
-      justify-content: space-around;
+      justify-content: center;
     }
   }
+  .btn {
+    display: flex;
+    justify-content: center;
+    padding: 0.1rem 3.5rem 0;
+   //  button {
+      // cursor: pointer;
+      // font-size: 14px;
+      // text-align: center;
+      // color: #fff;
+      // border: none;
+      // border-radius: 0.06rem;
+      // background: #0087ff;
+      // margin-right:12px;
+    //  margin-right:12px;
+    .quxiao{
+      margin-right:12px;
+      cursor: pointer;
+      width: 90px;
+      height: 32px;
+      background: #ffffff;
+      color:#0058e1;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+    }
+    // .quxiao:hover{
+    //   background: #0058e1;
+    //   color:#ffffff;   
+    // }
+    .buzhou{
+      margin-right:12px;
+      cursor: pointer;
+      background: #0058e1;
+      color:#ffffff;
+      width: 90px;
+      height: 32px;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+  }
+  // .buzhou:hover{  
+  //     background: #ffffff;
+  //     color:#0058e1;  
+  // }
+    
+  }
+  .first {
+    justify-content: center;
+  }
+}
 </style>

front/src/views/capacityOnTheShelf/BusinessComponent.vue

@@ -7,17 +7,19 @@
 -->
 <template>
   <div class="box">
-    <div class="header">能力上架申请</div>
+    <!-- <div class="header">能力上架申请</div> -->
     <div class="top">
       <div
         v-for="(nav, index) in navList"
         :key="nav"
-        :class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
+        :class="[index <= navList2.indexOf(showView) ? 'finish' : 'ff']"
       >
+        <div class="wai">
           <span class="bg-box">
             <span>{{ index + 1 }}</span>
           </span>
-        <span>{{ nav.name }}</span>
+          <span class="bg-name">{{ nav.name }}</span>
+        </div>
         <div class="line" v-if="index !== navList.length - 1"></div>
       </div>
     </div>
@@ -80,7 +82,7 @@
       ></put-on-the-shelf>
     </div>
     <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
-      <button @click="close()">取消</button>
+    
       <a-popconfirm
         v-if="
           showView == '功能介绍' &&
@@ -94,9 +96,10 @@
         @confirm="changeGnjs('上一步')"
         @cancel="cancel"
       >
-        <button>上一步</button>
+        <button  class="buzhou" >上一步</button>
       </a-popconfirm>
       <button
+      class="buzhou" 
         v-else-if="
           showView == '功能介绍' &&
           gnjs[0].list.filter((val) => val.note1 !== '').length ==
@@ -119,9 +122,10 @@
         @confirm="changeYycj('上一步')"
         @cancel="cancel"
       >
-        <button>上一步</button>
+        <button  class="buzhou" >上一步</button>
       </a-popconfirm>
       <button
+      class="buzhou" 
         v-else-if="
           showView == '应用场景' &&
           yycj[0].list.filter((val) => val.note1 !== '').length ==
@@ -131,7 +135,7 @@
       >
         上一步
       </button>
-      <button v-else-if="showView !== '基本信息'" @click="back()">
+      <button  class="buzhou"  v-else-if="showView !== '基本信息'" @click="back()">
         上一步
       </button>
       <a-popconfirm
@@ -146,9 +150,9 @@
         @confirm="changeBs('预览')"
         @cancel="cancel"
       >
-        <button>预览</button>
+        <button  class="buzhou" >预览</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与使用'" @click="preview()">
+      <button  class="buzhou" v-else-if="showView === '部署与使用'" @click="preview()">
         预览
       </button>
       <a-popconfirm
@@ -164,9 +168,10 @@
         @confirm="changeGnjs('下一步')"
         @cancel="cancel"
       >
-        <button>下一步</button>
+        <button  class="buzhou"  >下一步</button>
       </a-popconfirm>
       <button
+      class="buzhou" 
         v-else-if="
           showView == '功能介绍' &&
           gnjs[0].list.filter((val) => val.note1 !== '').length ==
@@ -189,9 +194,10 @@
         @confirm="changeYycj('下一步')"
         @cancel="cancel"
       >
-        <button>下一步</button>
+        <button  class="buzhou" >下一步</button>
       </a-popconfirm>
       <button
+      class="buzhou" 
         v-else-if="
           showView == '应用场景' &&
           yycj[0].list.filter((val) => val.note1 !== '').length ==
@@ -201,7 +207,7 @@
       >
         下一步
       </button>
-      <button v-else-if="showView !== '部署与使用'" @click="next()">
+      <button  class="buzhou"  v-else-if="showView !== '部署与使用'" @click="next()">
         下一步
       </button>
       <a-popconfirm
@@ -216,11 +222,12 @@
         @confirm="changeBs('提交')"
         @cancel="cancel"
       >
-        <button>提交</button>
+        <button  class="buzhou" >提交</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与使用'" @click="submit()">
+      <button class="buzhou" v-else-if="showView === '部署与使用'" @click="submit()">
         提交
       </button>
+      <button class="quxiao" @click="close()">取消</button>
     </div>
   </div>
 </template>
@@ -802,86 +809,121 @@
   })
 </script>
 <style lang="less" scoped>
-  .box {
+.box {
   position: relative;
-    top: 64px;
+  top: 0.64rem;
-    margin: 15px 400px;
+  // margin: 0.15rem 3rem;
-    padding: 10px;
+  padding: 0.1rem;
   background: #fff;
   .header {
-      font-size: 28px;
+    font-size: 0.28rem;
     font-weight: 600;
   }
   .vue-box {
-      padding: 0 100px;
+    padding: 0 1rem;
   }
   .top {
-      margin: 10px 20px 0;
+    font-size: 16px;
-      padding: 15px 30px;
+    margin: 0.32px 0.4px 0;
-      background: #edf4fc;
+    padding: 24px 24pxs;
-      display: flex;
-      justify-content: space-between;
-      div {
-        font-size: 18px;
-        color: #999;
     display: flex;
     justify-content: center;
+    .ff {
+      color: #b3b3b3;
+      display: inline-flex;
+      justify-content: center;
       align-items: center;
+      .wai {
+        margin-top: 14px;
         .bg-box {
           display: flex;
           justify-content: center;
           align-items: center;
-          width: 45px;
+          width: 32px;
-          height: 45px;
+          height: 32px;
           border-radius: 50%;
-          border: 1px solid rgb(214, 214, 214);
+          // border: 0.01rem solid rgb(214, 214, 214);
-          margin-right: 10px;
+          margin: 0px 16px;
           transition: all 0.3s ease;
           span {
             display: flex;
             justify-content: center;
             align-items: center;
-            width: 30px;
+            width: 32px;
-            height: 30px;
+            height: 32px;
             border-radius: 50%;
-            border: 1px solid #999;
+            border: 1px solid #d9d9d9;
+          }
+        }
+        .bg-name {
+          color: #b3b3b3;
         }
       }
       .line {
-          margin-left: 10px;
+        // margin-left: 16px;
-          width: 130px;
+        width: 326px;
-          height: 1px;
+        height: 2px;
-          background: #999;
+        background: #d9d9d9;
       }
     }
     .finish {
-        color: #0087ff;
-        .bg-box {
-          background: #9ccefa;
       color: #fff;
-          border: 1px solid #9ccefa;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .wai {
+        margin-top: 14px;
+        .bg-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          // border: 0.01rem solid rgb(214, 214, 214);
+          margin: 0px 16px;
+          transition: all 0.3s ease;
           span {
-            background: #0087ff;
+            background: #0058e1;
-            border: 1px solid #0087ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            border: 1px solid solid #0058e1;
+          }
+        }
+        .bg-name {
+          color: #212121;
+          font-weight: bold;
         }
       }
       .line {
-          background: #0087ff;
+        // margin-left: 16px;
-        }
+        width: 326px;
+        height: 2px;
+        background: #0058e1;
       }
     }
     .btn {
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
-      padding: 10px 350px 0;
+      padding: 0.1rem 3.5rem 0;
       button {
         cursor: pointer;
-        width: 80px;
+        font-size: 0.14rem;
-        height: 35px;
+        width: 0.8rem;
+        height: 0.35rem;
         text-align: center;
         color: #fff;
-        border: none;
+        border: 0.01rem solid #9ccefa;
-        border-radius: 6px;
+        span {
+          background: #0087ff;
+          border: 0.01rem solid #0087ff;
+        }
+      }
+      .line {
         background: #0087ff;
       }
       button:nth-of-type(1) {
@@ -893,7 +935,55 @@
       }
     }
     .first {
-      justify-content: space-around;
+      justify-content: center;
     }
   }
+  .btn {
+    display: flex;
+    justify-content: center;
+    padding: 0.1rem 3.5rem 0;
+   //  button {
+      // cursor: pointer;
+      // font-size: 14px;
+      // text-align: center;
+      // color: #fff;
+      // border: none;
+      // border-radius: 0.06rem;
+      // background: #0087ff;
+      // margin-right:12px;
+    //  margin-right:12px;
+    .quxiao{
+      margin-right:12px;
+      cursor: pointer;
+      width: 90px;
+      height: 32px;
+      background: #ffffff;
+      color:#0058e1;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+    }
+    // .quxiao:hover{
+    //   background: #0058e1;
+    //   color:#ffffff;   
+    // }
+    .buzhou{
+      margin-right:12px;
+      cursor: pointer;
+      background: #0058e1;
+      color:#ffffff;
+      width: 90px;
+      height: 32px;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+  }
+  // .buzhou:hover{  
+  //     background: #ffffff;
+  //     color:#0058e1;  
+  // }
+    
+  }
+  .first {
+    justify-content: center;
+  }
+}
 </style>

front/src/views/capacityOnTheShelf/DevelopmentComponents.vue

@@ -7,17 +7,19 @@
 -->
 <template>
   <div class="box">
-    <div class="header">能力上架申请</div>
+    <!-- <div class="header">能力上架申请</div> -->
     <div class="top">
       <div
         v-for="(nav, index) in navList"
         :key="nav"
-        :class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
+        :class="[index <= navList2.indexOf(showView) ? 'finish' : 'ff']"
       >
+        <div class="wai">
           <span class="bg-box">
             <span>{{ index + 1 }}</span>
           </span>
-        <span>{{ nav.name }}</span>
+          <span class="bg-name">{{ nav.name }}</span>
+        </div>
         <div class="line" v-if="index !== navList.length - 1"></div>
       </div>
     </div>
@@ -79,7 +81,7 @@
       ></put-on-the-shelf>
     </div>
     <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
-      <button @click="close()">取消</button>
+    
       <a-popconfirm
         v-if="
           showView == '功能介绍' &&
@@ -93,9 +95,10 @@
         @confirm="changeGnjs('上一步')"
         @cancel="cancel"
       >
-        <button>上一步</button>
+        <button  class="buzhou">上一步</button>
       </a-popconfirm>
       <button
+      class="buzhou"
         v-else-if="
           showView == '功能介绍' &&
           gnjs[0].list.filter((val) => val.note1 !== '').length ==
@@ -118,9 +121,10 @@
         @confirm="changeYycj('上一步')"
         @cancel="cancel"
       >
-        <button>上一步</button>
+        <button  class="buzhou">上一步</button>
       </a-popconfirm>
       <button
+      class="buzhou"
         v-else-if="
           showView == '应用场景' &&
           yycj[0].list.filter((val) => val.note1 !== '').length ==
@@ -130,7 +134,7 @@
       >
         上一步
       </button>
-      <button v-else-if="showView !== '基本信息'" @click="back()">
+      <button  class="buzhou" v-else-if="showView !== '基本信息'" @click="back()">
         上一步
       </button>
       <a-popconfirm
@@ -145,9 +149,9 @@
         @confirm="changeBs('预览')"
         @cancel="cancel"
       >
-        <button>预览</button>
+        <button  class="buzhou">预览</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与使用'" @click="preview()">
+      <button  class="buzhou" v-else-if="showView === '部署与使用'" @click="preview()">
         预览
       </button>
       <a-popconfirm
@@ -163,9 +167,10 @@
         @confirm="changeGnjs('下一步')"
         @cancel="cancel"
       >
-        <button>下一步</button>
+        <button  class="buzhou">下一步</button>
       </a-popconfirm>
       <button
+      class="buzhou"
         v-else-if="
           showView == '功能介绍' &&
           gnjs[0].list.filter((val) => val.note1 !== '').length ==
@@ -188,9 +193,10 @@
         @confirm="changeYycj('下一步')"
         @cancel="cancel"
       >
-        <button>下一步</button>
+        <button  class="buzhou">下一步</button>
       </a-popconfirm>
       <button
+      class="buzhou"
         v-else-if="
           showView == '应用场景' &&
           yycj[0].list.filter((val) => val.note1 !== '').length ==
@@ -200,7 +206,7 @@
       >
         下一步
       </button>
-      <button v-else-if="showView !== '部署与使用'" @click="next()">
+      <button  class="buzhou" v-else-if="showView !== '部署与使用'" @click="next()">
         下一步
       </button>
       <a-popconfirm
@@ -215,11 +221,12 @@
         @confirm="changeBs('提交')"
         @cancel="cancel"
       >
-        <button>提交</button>
+        <button  class="buzhou">提交</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与使用'" @click="submit()">
+      <button  class="buzhou" v-else-if="showView === '部署与使用'" @click="submit()">
         提交
       </button>
+      <button class="quxiao" @click="close()">取消</button>
     </div>
   </div>
 </template>
@@ -801,84 +808,119 @@
 <style lang="less" scoped>
   .box {
   position: relative;
-    top: 64px;
+  top: 0.64rem;
-    margin: 15px 400px;
+  // margin: 0.15rem 3rem;
-    padding: 10px;
+  padding: 0.1rem;
   background: #fff;
   .header {
-      font-size: 28px;
+    font-size: 0.28rem;
     font-weight: 600;
   }
   .vue-box {
-      padding: 0 100px;
+    padding: 0 1rem;
   }
   .top {
-      margin: 10px 20px 0;
+    font-size: 16px;
-      padding: 15px 30px;
+    margin: 0.32px 0.4px 0;
-      background: #edf4fc;
+    padding: 24px 24pxs;
-      display: flex;
-      justify-content: space-between;
-      div {
-        font-size: 18px;
-        color: #999;
     display: flex;
     justify-content: center;
+    .ff {
+      color: #b3b3b3;
+      display: inline-flex;
+      justify-content: center;
       align-items: center;
+      .wai {
+        margin-top: 14px;
         .bg-box {
           display: flex;
           justify-content: center;
           align-items: center;
-          width: 45px;
+          width: 32px;
-          height: 45px;
+          height: 32px;
           border-radius: 50%;
-          border: 1px solid rgb(214, 214, 214);
+          // border: 0.01rem solid rgb(214, 214, 214);
-          margin-right: 10px;
+          margin: 0px 16px;
           transition: all 0.3s ease;
           span {
             display: flex;
             justify-content: center;
             align-items: center;
-            width: 30px;
+            width: 32px;
-            height: 30px;
+            height: 32px;
             border-radius: 50%;
-            border: 1px solid #999;
+            border: 1px solid #d9d9d9;
+          }
+        }
+        .bg-name {
+          color: #b3b3b3;
         }
       }
       .line {
-          margin-left: 10px;
+        // margin-left: 16px;
-          width: 130px;
+        width: 326px;
-          height: 1px;
+        height: 2px;
-          background: #999;
+        background: #d9d9d9;
       }
     }
     .finish {
-        color: #0087ff;
-        .bg-box {
-          background: #9ccefa;
       color: #fff;
-          border: 1px solid #9ccefa;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .wai {
+        margin-top: 14px;
+        .bg-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          // border: 0.01rem solid rgb(214, 214, 214);
+          margin: 0px 16px;
+          transition: all 0.3s ease;
           span {
-            background: #0087ff;
+            background: #0058e1;
-            border: 1px solid #0087ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            border: 1px solid solid #0058e1;
+          }
+        }
+        .bg-name {
+          color: #212121;
+          font-weight: bold;
         }
       }
       .line {
-          background: #0087ff;
+        // margin-left: 16px;
-        }
+        width: 326px;
+        height: 2px;
+        background: #0058e1;
       }
     }
     .btn {
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
-      padding: 10px 350px 0;
+      padding: 0.1rem 3.5rem 0;
       button {
         cursor: pointer;
-        width: 80px;
+        font-size: 0.14rem;
-        height: 35px;
+        width: 0.8rem;
+        height: 0.35rem;
         text-align: center;
         color: #fff;
-        border: none;
+        border: 0.01rem solid #9ccefa;
-        border-radius: 6px;
+        span {
+          background: #0087ff;
+          border: 0.01rem solid #0087ff;
+        }
+      }
+      .line {
         background: #0087ff;
       }
       button:nth-of-type(1) {
@@ -890,7 +932,55 @@
       }
     }
     .first {
-      justify-content: space-around;
+      justify-content: center;
     }
   }
+  .btn {
+    display: flex;
+    justify-content: center;
+    padding: 0.1rem 3.5rem 0;
+   //  button {
+      // cursor: pointer;
+      // font-size: 14px;
+      // text-align: center;
+      // color: #fff;
+      // border: none;
+      // border-radius: 0.06rem;
+      // background: #0087ff;
+      // margin-right:12px;
+    //  margin-right:12px;
+    .quxiao{
+      margin-right:12px;
+      cursor: pointer;
+      width: 90px;
+      height: 32px;
+      background: #ffffff;
+      color:#0058e1;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+    }
+    // .quxiao:hover{
+    //   background: #0058e1;
+    //   color:#ffffff;   
+    // }
+    .buzhou{
+      margin-right:12px;
+      cursor: pointer;
+      background: #0058e1;
+      color:#ffffff;
+      width: 90px;
+      height: 32px;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+  }
+  // .buzhou:hover{  
+  //     background: #ffffff;
+  //     color:#0058e1;  
+  // }
+    
+  }
+  .first {
+    justify-content: center;
+  }
+}
 </style>

front/src/views/capacityOnTheShelf/LayerServices.vue

@@ -7,17 +7,19 @@
 -->
 <template>
   <div class="box">
-    <div class="header">能力上架申请</div>
+    <!-- <div class="header">能力上架申请</div> -->
     <div class="top">
       <div
         v-for="(nav, index) in navList"
         :key="nav"
-        :class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
+        :class="[index <= navList2.indexOf(showView) ? 'finish' : 'ff']"
       >
+        <div class="wai">
           <span class="bg-box">
             <span>{{ index + 1 }}</span>
           </span>
-        <span>{{ nav.name }}</span>
+          <span class="bg-name">{{ nav.name }}</span>
+        </div>
         <div class="line" v-if="index !== navList.length - 1"></div>
       </div>
     </div>
@@ -76,7 +78,7 @@
       ></put-on-the-shelf>
     </div>
     <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
-      <button @click="close()">取消</button>
+    
       <a-popconfirm
         v-if="
           showView == '应用场景' &&
@@ -90,9 +92,10 @@
         @confirm="changeYycj('上一步')"
         @cancel="cancel"
       >
-        <button>上一步</button>
+        <button class="buzhou">上一步</button>
       </a-popconfirm>
       <button
+      class="buzhou"
         v-else-if="
           showView == '应用场景' &&
           yycj[0].list.filter((val) => val.note1 !== '').length ==
@@ -102,7 +105,7 @@
       >
         上一步
       </button>
-      <button v-else-if="showView !== '基本信息'" @click="back()">
+      <button class="buzhou" v-else-if="showView !== '基本信息'" @click="back()">
         上一步
       </button>
       <a-popconfirm
@@ -118,9 +121,9 @@
         @confirm="changeBs('预览')"
         @cancel="cancel"
       >
-        <button>预览</button>
+        <button class="buzhou">预览</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与使用'" @click="preview()">
+      <button class="buzhou" v-else-if="showView === '部署与使用'" @click="preview()">
         预览
       </button>
       <a-popconfirm
@@ -136,9 +139,10 @@
         @confirm="changeYycj('下一步')"
         @cancel="cancel"
       >
-        <button>下一步</button>
+        <button class="buzhou">下一步</button>
       </a-popconfirm>
       <button
+      class="buzhou"
         v-else-if="
           showView == '应用场景' &&
           yycj[0].list.filter((val) => val.note1 !== '').length ==
@@ -148,7 +152,7 @@
       >
         下一步
       </button>
-      <button v-else-if="showView !== '部署与使用'" @click="next()">
+      <button class="buzhou" v-else-if="showView !== '部署与使用'" @click="next()">
         下一步
       </button>
       <a-popconfirm
@@ -164,11 +168,12 @@
         @confirm="changeBs('提交')"
         @cancel="cancel"
       >
-        <button>提交</button>
+        <button class="buzhou">提交</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与使用'" @click="submit()">
+      <button class="buzhou" v-else-if="showView === '部署与使用'" @click="submit()">
         提交
       </button>
+      <button class="quxiao" @click="close()">取消</button>
     </div>
   </div>
 </template>
@@ -671,84 +676,119 @@
 <style lang="less" scoped>
   .box {
   position: relative;
-    top: 64px;
+  top: 0.64rem;
-    margin: 15px 400px;
+  // margin: 0.15rem 3rem;
-    padding: 10px;
+  padding: 0.1rem;
   background: #fff;
   .header {
-      font-size: 28px;
+    font-size: 0.28rem;
     font-weight: 600;
   }
   .vue-box {
-      padding: 0 100px;
+    padding: 0 1rem;
   }
   .top {
-      margin: 10px 20px 0;
+    font-size: 16px;
-      padding: 15px 30px;
+    margin: 0.32px 0.4px 0;
-      background: #edf4fc;
+    padding: 24px 24pxs;
-      display: flex;
-      justify-content: space-between;
-      div {
-        font-size: 18px;
-        color: #999;
     display: flex;
     justify-content: center;
+    .ff {
+      color: #b3b3b3;
+      display: inline-flex;
+      justify-content: center;
       align-items: center;
+      .wai {
+        margin-top: 14px;
         .bg-box {
           display: flex;
           justify-content: center;
           align-items: center;
-          width: 45px;
+          width: 32px;
-          height: 45px;
+          height: 32px;
           border-radius: 50%;
-          border: 1px solid rgb(214, 214, 214);
+          // border: 0.01rem solid rgb(214, 214, 214);
-          margin-right: 10px;
+          margin: 0px 16px;
           transition: all 0.3s ease;
           span {
             display: flex;
             justify-content: center;
             align-items: center;
-            width: 30px;
+            width: 32px;
-            height: 30px;
+            height: 32px;
             border-radius: 50%;
-            border: 1px solid #999;
+            border: 1px solid #d9d9d9;
+          }
+        }
+        .bg-name {
+          color: #b3b3b3;
         }
       }
       .line {
-          margin-left: 10px;
+        // margin-left: 16px;
-          width: 130px;
+        width: 326px;
-          height: 1px;
+        height: 2px;
-          background: #999;
+        background: #d9d9d9;
       }
     }
     .finish {
-        color: #0087ff;
-        .bg-box {
-          background: #9ccefa;
       color: #fff;
-          border: 1px solid #9ccefa;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .wai {
+        margin-top: 14px;
+        .bg-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          // border: 0.01rem solid rgb(214, 214, 214);
+          margin: 0px 16px;
+          transition: all 0.3s ease;
           span {
-            background: #0087ff;
+            background: #0058e1;
-            border: 1px solid #0087ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            border: 1px solid solid #0058e1;
+          }
+        }
+        .bg-name {
+          color: #212121;
+          font-weight: bold;
         }
       }
       .line {
-          background: #0087ff;
+        // margin-left: 16px;
-        }
+        width: 326px;
+        height: 2px;
+        background: #0058e1;
       }
     }
     .btn {
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
-      padding: 10px 350px 0;
+      padding: 0.1rem 3.5rem 0;
       button {
         cursor: pointer;
-        width: 80px;
+        font-size: 0.14rem;
-        height: 35px;
+        width: 0.8rem;
+        height: 0.35rem;
         text-align: center;
         color: #fff;
-        border: none;
+        border: 0.01rem solid #9ccefa;
-        border-radius: 6px;
+        span {
+          background: #0087ff;
+          border: 0.01rem solid #0087ff;
+        }
+      }
+      .line {
         background: #0087ff;
       }
       button:nth-of-type(1) {
@@ -760,7 +800,55 @@
       }
     }
     .first {
-      justify-content: space-around;
+      justify-content: center;
     }
   }
+  .btn {
+    display: flex;
+    justify-content: center;
+    padding: 0.1rem 3.5rem 0;
+   //  button {
+      // cursor: pointer;
+      // font-size: 14px;
+      // text-align: center;
+      // color: #fff;
+      // border: none;
+      // border-radius: 0.06rem;
+      // background: #0087ff;
+      // margin-right:12px;
+    //  margin-right:12px;
+    .quxiao{
+      margin-right:12px;
+      cursor: pointer;
+      width: 90px;
+      height: 32px;
+      background: #ffffff;
+      color:#0058e1;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+    }
+    // .quxiao:hover{
+    //   background: #0058e1;
+    //   color:#ffffff;   
+    // }
+    .buzhou{
+      margin-right:12px;
+      cursor: pointer;
+      background: #0058e1;
+      color:#ffffff;
+      width: 90px;
+      height: 32px;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+  }
+  // .buzhou:hover{  
+  //     background: #ffffff;
+  //     color:#0058e1;  
+  // }
+    
+  }
+  .first {
+    justify-content: center;
+  }
+}
 </style>

front/src/views/demandCenter/demandDetails.vue

@@ -147,7 +147,7 @@
               <button
                 style="
                   width: 100px;
-                  height: 30px;
+                  height: 35px;
                   margin-right: 10px;
                   background: rgb(237, 244, 252);
                   color: rgb(0, 135, 255);