成天去开发分支演示什么意思？写完就回滚？我还开发什么？

src/components/service-list/commodity-card copy.vue

+<template>
+  <div class="com_cell">
+    <div class="com_cell_up" @click="goUrl(cellData.app_id)">
+      <div class="com_cell_up_img_init">
+        <img :src="cellData.logo" class="com_cell_up_img" />
+      </div>
+      <div class="com_cell_up_right">
+        <div class="up_title">
+          <div class="up_tit_name_in">
+            <span class="up_tit_name" :title="cellData.app_name + ' ( V' + cellData.version + ' )'">
+              {{ cellData.app_name }} ( V{{ cellData.version }} )
+            </span>
+          </div>
+        </div>
+        <div class="up_rate">
+          <el-rate
+            v-model="cellData.score"
+            disabled
+            show-score
+            text-color="#ea7d19"
+            score-template="{value}"
+          ></el-rate>
+          <p class="get_num">
+            本月获取：
+            <span class="com_cell_right_time">
+              {{ cellData.deploy_times }}
+            </span>
+            <span class="ci"> 次</span>
+          </p>
+        </div>
+      </div>
+      <div class="get_detail">
+        <img src="@/assets/imgs/shop_ic_enter.png" />
+      </div>
+    </div>
+    <div class="com_cell_down">
+      <p class="com_detail">
+        {{ cellData.yyjj }}
+      </p>
+      <el-row :gutter="16">
+        <el-col :span="14" class="com_other">
+          <span class="name_title">应用类型：</span>
+          {{ cellData.type_name }}
+          &nbsp;&nbsp;{{ cellData.data_service_type2_name }} &nbsp;&nbsp;{{
+            cellData.data_service_type3_name
+          }}
+        </el-col>
+        <el-col :span="10" class="com_other">
+          <span class="name_title">业务领域：</span>
+          {{ cellData.ywly_name }}
+        </el-col>
+        <el-col :span="14" class="com_other">
+          <span class="name_title">上线时间：</span>
+          {{ helper.dateStringTransform(cellData.create_date) }}
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import helper from "@/services/helper.js";
+// if you meet date which like 2020-06-05T00:00:00+08:00, use helper.dateStringTransform()
+export default {
+  components: {},
+  props: {
+    url: { type: String, default: "" },
+    cellData: { type: Object, default: {} },
+  },
+  data: () => ({ helper: helper }),
+  computed: {},
+  watch: {},
+  methods: {
+    goUrl(parame) {
+      if (this.url != "") {
+        this.$router.push(this.url + "/" + parame);
+      }
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.com_cell {
+  width: 496px;
+  height: 208px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.04);
+  border-radius: 8px;
+  border: solid 1px #e3e4ef;
+  margin-bottom: 24px;
+}
+.com_cell_up {
+  height: 88px;
+  background-color: #f9fafc;
+  border-radius: 8px 8px 0px 0px;
+  padding: 16px;
+  display: flex;
+  position: relative;
+  cursor: pointer;
+}
+.com_cell_up_img_init {
+  width: 56px;
+  height: 56px;
+  margin-right: 16px;
+  flex: 0 0 auto;
+}
+.com_cell_up_img {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.com_cell_up_right {
+  flex: 1 1 auto;
+}
+.up_title {
+  font-size: 16px;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+}
+.up_tit_name_in {
+  max-width: calc(100% - 150px);
+  display: inline-block;
+}
+.up_tit_name {
+  width: 100%;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+.up_tit_name:hover {
+  text-decoration: underline;
+}
+.up_rate {
+  margin-top: 12px;
+  display: flex;
+}
+.get_num {
+  margin-left: 40px;
+  font-size: 14px;
+  color: #58617a;
+}
+.com_cell_right_time {
+  color: #ea7d19;
+}
+.ci {
+  color: #242c43;
+}
+.get_detail {
+  position: absolute;
+  top: 26px;
+  right: 16px;
+}
+.tags {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 2px 8px 3px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px;
+  border-radius: 4px;
+  position: relative;
+  top: 1px;
+}
+.map_service {
+  background-color: #626de9;
+  border: solid 1px #626de9;
+  color: #fff;
+}
+.shared {
+  background-color: #e7fdfc;
+  border: solid 1px #8bd6d0;
+  color: #25bdb1;
+}
+.restricted {
+  background-color: #fffee8;
+  border: solid 1px #e4c884;
+  color: #ef9433;
+}
+.sensitive {
+  background-color: #ffefef;
+  border: solid 1px #d7a4a9;
+  color: #e15260;
+}
+.com_cell_down {
+  padding: 12px 16px 0 16px;
+}
+.com_detail {
+  color: #8890a7;
+  font-size: 14px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  height: 42px;
+  margin-bottom: 8px;
+}
+.com_other {
+  color: #58617a;
+  margin-bottom: 6px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+.name_title {
+  color: #8890a7;
+}
+</style>
+<style>
+.com_cell .el-rate__item .el-rate__icon {
+  font-size: 20px;
+  margin-right: 0;
+}
+.com_cell .el-rate__text {
+  margin-left: 4px;
+  position: relative;
+  top: 1px;
+}
+</style>
\ No newline at end of file

src/components/service-list/commodity-card.vue

 <template>
-  <div class="com_cell">
-    <div class="com_cell_up" @click="goUrl(cellData.app_id)">
-      <div class="com_cell_up_img_init">
-        <img :src="cellData.logo" class="com_cell_up_img" />
+  <div class="com_card">
+    <div class="com_card_top">
+      <img :src="cellData.logo" class="com_card_img" />
+      <div class="com_card_name_v">
+        <div class="com_card_msg_name">{{ cellData.app_name }}</div>
+        <div class="com_card_msg_version">V{{ cellData.version }}</div>
       </div>
-      <div class="com_cell_up_right">
-        <div class="up_title">
-          <div class="up_tit_name_in">
-            <span class="up_tit_name" :title="cellData.app_name + ' ( V' + cellData.version + ' )'">
-              {{ cellData.app_name }} ( V{{ cellData.version }} )
-            </span>
     </div>
+    <div class="com_card_msg">
+      <div class="com_card_msg_tit">
+        <img :src="require('@/assets/imgs/icon_shijian.png')" />&nbsp;上线时间
       </div>
-        <div class="up_rate">
-          <el-rate
-            v-model="cellData.score"
-            disabled
-            show-score
-            text-color="#ea7d19"
-            score-template="{value}"
-          ></el-rate>
-          <p class="get_num">
-            本月获取：
-            <span class="com_cell_right_time">
-              {{ cellData.deploy_times }}
-            </span>
-            <span class="ci"> 次</span>
-          </p>
+      <div class="com_card_msg_num">{{ helper.dateStringTransform(cellData.create_date) }}</div>
     </div>
+    <div class="com_card_msg">
+      <div class="com_card_msg_tit">
+        <img :src="require('@/assets/imgs/icon_huoqu1.png')" />&nbsp;部署次数
       </div>
-      <div class="get_detail">
-        <img src="@/assets/imgs/shop_ic_enter.png" />
+      <div class="com_card_msg_num1">{{ cellData.deploy_times }}</div>
     </div>
-    </div>
-    <div class="com_cell_down">
-      <p class="com_detail">
-        {{ cellData.yyjj }}
-      </p>
-      <el-row :gutter="16">
-        <el-col :span="14" class="com_other">
-          <span class="name_title">应用类型：</span>
-          {{ cellData.type_name }}
-          &nbsp;&nbsp;{{ cellData.data_service_type2_name }} &nbsp;&nbsp;{{
-            cellData.data_service_type3_name
-          }}
-        </el-col>
-        <el-col :span="10" class="com_other">
-          <span class="name_title">业务领域：</span>
-          {{ cellData.ywly_name }}
-        </el-col>
-        <el-col :span="14" class="com_other">
-          <span class="name_title">上线时间：</span>
-          {{ helper.dateStringTransform(cellData.create_date) }}
-        </el-col>
-      </el-row>
+    <div class="com_card_btn">
+      <el-button size="medium" class="btn_1" @click="addShop(cellData.app_id)">加入购物车</el-button>
+      <el-button size="medium" class="btn_2" @click="goUrl(cellData.app_id)">查看详情</el-button>
     </div>
   </div>
 </template>
 
 <script>
 import helper from "@/services/helper.js";
-// if you meet date which like 2020-06-05T00:00:00+08:00, use helper.dateStringTransform()
 export default {
   components: {},
   props: {
     url: { type: String, default: "" },
     cellData: { type: Object, default: {} },
   },
-  data: () => ({ helper: helper }),
+  data: () => ({
+    helper: helper,
+  }),
   computed: {},
   watch: {},
   methods: {
@@ -76,148 +45,129 @@ export default {
         this.$router.push(this.url + "/" + parame);
       }
     },
+    addShop(id) {
+      let query = {
+        service_id: 0, // 0表示不是服务
+        app_id: parseFloat(id),
+        spec_id: 1,
+        duration: 1,
+        duration_method: 1,
+        is_subscribe: 0, // 是否订阅
+      };
+      this.$api.serviceShop
+        .addShoppingCart(query)
+        .then(({ data }) => {
+          if (data.success == 1) {
+            this.$message({
+              message: data.errMsg,
+              type: "success",
+            });
+            this.$store.commit("setMenuCartState");
+          } else {
+            this.$message({
+              message: data.errMsg,
+              type: "warning",
+            });
+          }
+        })
+        .catch((error) => {
+          this.$message({
+            message: `添加购物车失败`,
+            type: "warning",
+          });
+        });
+    },
   },
   mounted() {},
 };
 </script>
 
 <style scoped>
-.com_cell {
-  width: 496px;
-  height: 208px;
-  background-color: #ffffff;
-  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.04);
-  border-radius: 8px;
-  border: solid 1px #e3e4ef;
-  margin-bottom: 24px;
-}
-.com_cell_up {
-  height: 88px;
-  background-color: #f9fafc;
-  border-radius: 8px 8px 0px 0px;
-  padding: 16px;
+.com_card {
+  width: 290px;
+  height: 266px;
+  padding: 20px;
+  border-radius: 16px;
+  background-color: #fff;
+  border: solid 2px transparent;
+  -webkit-box-shadow: 0px 3px 10px 0px rgba(3, 10, 37, 0.15);
+  box-shadow: 0px 3px 10px 0px rgba(3, 10, 37, 0.15);
+}
+.com_card:hover {
+  border: solid 2px #b4c0f5;
+}
+.com_card_top {
   display: flex;
-  position: relative;
-  cursor: pointer;
+  justify-content: space-between;
+  margin-bottom: 28px;
 }
-.com_cell_up_img_init {
-  width: 56px;
-  height: 56px;
-  margin-right: 16px;
-  flex: 0 0 auto;
+.com_card_name_v {
+  width: calc(100% - 80px);
 }
-.com_cell_up_img {
-  width: 100%;
-  height: 100%;
-  border-radius: 4px;
-}
-.com_cell_up_right {
-  flex: 1 1 auto;
+.com_card_img {
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
+  border: 3px solid #f6f7fb;
 }
-.up_title {
-  font-size: 16px;
-  margin-top: 4px;
+.com_card_msg {
+  margin-top: 20px;
   display: flex;
-  align-items: center;
+  justify-content: space-between;
 }
-.up_tit_name_in {
-  max-width: calc(100% - 150px);
-  display: inline-block;
-}
-.up_tit_name {
-  width: 100%;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
+.com_card_msg_name {
+  font-size: 18px;
+  font-weight: 700;
+  margin-top: 4px;
+  margin-bottom: 12px;
   overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-.up_tit_name:hover {
-  text-decoration: underline;
-}
-.up_rate {
-  margin-top: 12px;
-  display: flex;
-}
-.get_num {
-  margin-left: 40px;
+.com_card_msg_version {
   font-size: 14px;
-  color: #58617a;
-}
-.com_cell_right_time {
-  color: #ea7d19;
-}
-.ci {
-  color: #242c43;
-}
-.get_detail {
-  position: absolute;
-  top: 26px;
-  right: 16px;
-}
-.tags {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 2px 8px 3px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 12px;
-  border-radius: 4px;
-  position: relative;
-  top: 1px;
-}
-.map_service {
-  background-color: #626de9;
-  border: solid 1px #626de9;
-  color: #fff;
-}
-.shared {
-  background-color: #e7fdfc;
-  border: solid 1px #8bd6d0;
-  color: #25bdb1;
-}
-.restricted {
-  background-color: #fffee8;
-  border: solid 1px #e4c884;
-  color: #ef9433;
-}
-.sensitive {
-  background-color: #ffefef;
-  border: solid 1px #d7a4a9;
-  color: #e15260;
-}
-.com_cell_down {
-  padding: 12px 16px 0 16px;
+  color: #8890a7;
 }
-.com_detail {
+.com_card_msg_tit {
   color: #8890a7;
-  font-size: 14px;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  height: 42px;
-  margin-bottom: 8px;
-}
-.com_other {
-  color: #58617a;
-  margin-bottom: 6px;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  overflow: hidden;
+  font-size: 16px;
 }
-.name_title {
+.com_card_msg_num {
   color: #8890a7;
+  font-size: 14px;
+  position: relative;
+  top: 2px;
 }
-</style>
-<style>
-.com_cell .el-rate__item .el-rate__icon {
-  font-size: 20px;
-  margin-right: 0;
+.com_card_msg_num1 {
+  color: #242c43;
+  font-size: 16px;
+  font-weight: bold;
 }
-.com_cell .el-rate__text {
-  margin-left: 4px;
-  position: relative;
-  top: 1px;
+.com_card_btn {
+  margin-top: 35px;
+  display: flex;
+  justify-content: space-between;
+}
+.btn_1 {
+  width: 110px;
+  padding: 10px;
+  background-color: #d0d5e7;
+  border: solid 2px #a5afd6;
+  color: #0f2683;
+}
+.btn_1:hover {
+  background-color: #d5daec;
+  border: solid 2px #a5afd6;
+  color: #0f2683;
+}
+.btn_2 {
+  width: 110px;
+  padding: 10px;
+  background-color: #0f2683;
+  color: #f8f9fd;
+}
+.btn_2:hover {
+  background-color: #1d3694;
+  color: #f8f9fd;
 }
 </style>

src/components/service-list/commodity-cell copy.vue

+<template>
+  <div class="com_cell">
+    <div class="com_cell_up" @click="goUrl(cellData.id)">
+      <div class="com_cell_up_img_init">
+        <img :src="cellData.cover" class="com_cell_up_img" />
+      </div>
+      <div class="com_cell_up_right">
+        <div class="up_title">
+          <div class="up_tit_name_in">
+            <span class="up_tit_name" :title="cellData.name">
+              {{ cellData.name }}
+            </span>
+          </div>
+          <span
+            v-if="cellData.data_service_type1 == 6"
+            class="tags map_service"
+          >
+            mapService
+          </span>
+          <span v-if="cellData.openness == 1" class="tags shared">共享</span>
+          <span v-else-if="cellData.openness == 2" class="tags restricted">
+            受限
+          </span>
+          <span v-else class="tags sensitive">敏感</span>
+        </div>
+        <div class="up_rate">
+          <el-rate
+            v-model="cellData.score"
+            disabled
+            show-score
+            text-color="#ea7d19"
+            score-template="{value}"
+          ></el-rate>
+          <p class="get_num">
+            本月获取：
+            <span class="com_cell_right_time">
+              {{ cellData.apply_num }}
+            </span>
+            <span class="ci"> 次</span>
+          </p>
+        </div>
+      </div>
+      <div class="get_detail">
+        <img src="@/assets/imgs/shop_ic_enter.png" />
+      </div>
+    </div>
+    <div class="com_cell_down">
+      <p class="com_detail">
+        {{ cellData.descript }}
+      </p>
+      <el-row :gutter="16">
+        <el-col :span="14" class="com_other">
+          <span class="name_title">服务类型：</span>
+          {{ cellData.data_service_type1_name }}
+          &nbsp;&nbsp;{{ cellData.data_service_type2_name }} &nbsp;&nbsp;{{
+            cellData.data_service_type3_name
+          }}
+        </el-col>
+        <el-col :span="10" class="com_other">
+          <span class="name_title">服务领域：</span>
+          {{ cellData.sectors_name }}
+        </el-col>
+        <el-col :span="14" class="com_other">
+          <span class="name_title">更新时间：</span>
+          {{ helper.dateStringTransform(cellData.update_date) }}
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import helper from "@/services/helper.js";
+// if you meet date which like 2020-06-05T00:00:00+08:00, use helper.dateStringTransform()
+export default {
+  components: {},
+  props: {
+    url: { type: String, default: "" },
+    cellData: { type: Object, default: {} },
+  },
+  data: () => ({ helper: helper }),
+  computed: {},
+  watch: {},
+  methods: {
+    goUrl(parame) {
+      if (this.url != "") {
+        this.$router.push(this.url + "/" + parame);
+      }
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.com_cell {
+  width: 496px;
+  height: 208px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.04);
+  border-radius: 12px 12px 8px 8px;
+  border: solid 1px #e3e4ef;
+  margin-bottom: 24px;
+}
+.com_cell_up {
+  height: 88px;
+  background-color: #f9fafc;
+  border-radius: 12px 12px 0px 0px;
+  padding: 16px;
+  display: flex;
+  position: relative;
+  cursor: pointer;
+}
+.com_cell_up_img_init {
+  width: 56px;
+  height: 56px;
+  margin-right: 16px;
+  flex: 0 0 auto;
+}
+.com_cell_up_img {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.com_cell_up_right {
+  flex: 1 1 auto;
+}
+.up_title {
+  font-size: 16px;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+}
+.up_tit_name_in {
+  max-width: calc(100% - 150px);
+  display: inline-block;
+}
+.up_tit_name {
+  width: 100%;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+.up_tit_name:hover {
+  text-decoration: underline;
+}
+.up_rate {
+  margin-top: 12px;
+  display: flex;
+}
+.get_num {
+  margin-left: 40px;
+  font-size: 14px;
+  color: #58617a;
+}
+.com_cell_right_time {
+  color: #ea7d19;
+}
+.ci {
+  color: #242c43;
+}
+.get_detail {
+  position: absolute;
+  top: 26px;
+  right: 16px;
+}
+.tags {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 2px 8px 3px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px;
+  border-radius: 4px;
+  position: relative;
+  top: 1px;
+}
+.map_service {
+  background-color: #626de9;
+  border: solid 1px #626de9;
+  color: #fff;
+}
+.shared {
+  background-color: #e7fdfc;
+  border: solid 1px #8bd6d0;
+  color: #25bdb1;
+}
+.restricted {
+  background-color: #fffee8;
+  border: solid 1px #e4c884;
+  color: #ef9433;
+}
+.sensitive {
+  background-color: #ffefef;
+  border: solid 1px #d7a4a9;
+  color: #e15260;
+}
+.com_cell_down {
+  padding: 12px 16px 0 16px;
+}
+.com_detail {
+  color: #8890a7;
+  font-size: 14px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  height: 42px;
+  margin-bottom: 8px;
+}
+.com_other {
+  color: #58617a;
+  margin-bottom: 6px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+.name_title {
+  color: #8890a7;
+}
+</style>
+<style>
+.com_cell .el-rate__item .el-rate__icon {
+  font-size: 20px;
+  margin-right: 0;
+}
+.com_cell .el-rate__text {
+  margin-left: 4px;
+  position: relative;
+  top: 1px;
+}
+</style>
\ No newline at end of file

src/components/service-list/commodity-cell.vue

 <template>
   <div class="com_cell">
-    <div class="com_cell_up" @click="goUrl(cellData.id)">
-      <div class="com_cell_up_img_init">
-        <img :src="cellData.cover" class="com_cell_up_img" />
+    <div class="com_cell_img_box">
+      <img :src="cellData.cover" class="com_cell_img" />
     </div>
-      <div class="com_cell_up_right">
-        <div class="up_title">
-          <div class="up_tit_name_in">
-            <span class="up_tit_name" :title="cellData.name">
+    <div class="com_cell_message">
+      <div class="com_cell_msg_title">
         {{ cellData.name }}
-            </span>
-          </div>
         <span
           v-if="cellData.data_service_type1 == 6"
           class="tags map_service"
-          >
-            mapService
-          </span>
+        >mapService</span>
         <span v-if="cellData.openness == 1" class="tags shared">共享</span>
-          <span v-else-if="cellData.openness == 2" class="tags restricted">
-            受限
-          </span>
+        <span v-else-if="cellData.openness ==  2" class="tags restricted">受限</span>
         <span v-else class="tags sensitive">敏感</span>
       </div>
-        <div class="up_rate">
+      <div class="message_block">
+        <div class="com_cell_item">
+          <div class="com_cell_data_detail">
+            <span class="detail_span">{{ cellData.descript }}</span>
+          </div>
+        </div>
+        <div class="com_cell_item">
+          <span class="com_cell_item_title">服务类型：</span>
+          <span
+            class="com_cell_data"
+          >{{ cellData.data_service_type1_name }}&nbsp;&nbsp;{{ cellData.data_service_type2_name }}&nbsp;&nbsp;{{ cellData.data_service_type3_name }}</span>
+          <span class="com_cell_item_title left_blank">数据领域：</span>
+          <span class="com_cell_data">{{ cellData.sectors_name }}</span>
+        </div>
+        <div class="com_cell_item">
+          <span class="com_cell_item_title">更新时间：</span>
+          <span class="com_cell_data">{{ helper.dateStringTransform(cellData.update_date) }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="com_cell_right">
       <el-rate
         v-model="cellData.score"
         disabled
         show-score
-            text-color="#ea7d19"
+        text-color="#58617a"
         score-template="{value}"
       ></el-rate>
-          <p class="get_num">
-            本月获取：
-            <span class="com_cell_right_time">
-              {{ cellData.apply_num }}
-            </span>
-            <span class="ci"> 次</span>
-          </p>
-        </div>
+      <div class="com_cell_right_text">
+        <span class="com_cell_right_time_tit">本月获取次数：</span>
+        <span class="com_cell_right_time">{{ cellData.apply_num }}次</span>
       </div>
-      <div class="get_detail">
-        <img src="@/assets/imgs/shop_ic_enter.png" />
-      </div>
-    </div>
-    <div class="com_cell_down">
-      <p class="com_detail">
-        {{ cellData.descript }}
-      </p>
-      <el-row :gutter="16">
-        <el-col :span="14" class="com_other">
-          <span class="name_title">服务类型：</span>
-          {{ cellData.data_service_type1_name }}
-          &nbsp;&nbsp;{{ cellData.data_service_type2_name }} &nbsp;&nbsp;{{
-            cellData.data_service_type3_name
-          }}
-        </el-col>
-        <el-col :span="10" class="com_other">
-          <span class="name_title">服务领域：</span>
-          {{ cellData.sectors_name }}
-        </el-col>
-        <el-col :span="14" class="com_other">
-          <span class="name_title">更新时间：</span>
-          {{ helper.dateStringTransform(cellData.update_date) }}
-        </el-col>
-      </el-row>
+      <el-button class="com_cell_right_btn" @click="goUrl(cellData.id)">查看详情</el-button>
     </div>
   </div>
 </template>
@@ -94,87 +76,94 @@ export default {
 
 <style scoped>
 .com_cell {
-  width: 496px;
-  height: 208px;
-  background-color: #ffffff;
-  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.04);
-  border-radius: 12px 12px 8px 8px;
-  border: solid 1px #e3e4ef;
-  margin-bottom: 24px;
-}
-.com_cell_up {
-  height: 88px;
-  background-color: #f9fafc;
-  border-radius: 12px 12px 0px 0px;
-  padding: 16px;
   display: flex;
-  position: relative;
-  cursor: pointer;
-}
-.com_cell_up_img_init {
-  width: 56px;
-  height: 56px;
-  margin-right: 16px;
-  flex: 0 0 auto;
+  justify-content: space-between;
+  padding: 20px 10px;
+  border-bottom: 2px #f4f7fc solid;
+}
+.com_cell_img_box {
+  width: 200px;
+  height: 200px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 4px #f4f7fc solid;
 }
-.com_cell_up_img {
+.com_cell_img {
   width: 100%;
   height: 100%;
-  border-radius: 4px;
 }
-.com_cell_up_right {
-  flex: 1 1 auto;
+.com_cell_message {
+  padding-left: 20px;
+  width: calc(100% - 500px);
 }
-.up_title {
-  font-size: 16px;
-  margin-top: 4px;
+.com_cell_msg_title {
+  color: #0d1847;
+  font-size: 18px;
+  line-height: 30px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+.com_cell_item {
+  font-size: 14px;
+  line-height: 28px;
+  margin-top: 1px;
+  color: #8890a7;
   display: flex;
-  align-items: center;
+  align-self: start;
+}
+.com_cell_item_title {
+  /* width: 80px; */
 }
-.up_tit_name_in {
-  max-width: calc(100% - 150px);
+.com_cell_data {
   display: inline-block;
+  color: #242c43;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.up_tit_name {
-  width: 100%;
+.com_cell_data_detail {
+  color: #242c43;
+  height: 78px;
+  font-size: 16px;
+}
+.detail_span {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
+  -webkit-line-clamp: 2;
   overflow: hidden;
 }
-.up_tit_name:hover {
-  text-decoration: underline;
+.com_cell_right {
+  width: 300px;
+  padding: 25px 0 0 50px;
 }
-.up_rate {
-  margin-top: 12px;
-  display: flex;
+.com_cell_right_text {
+  font-size: 16px;
+  margin-top: 25px;
 }
-.get_num {
-  margin-left: 40px;
-  font-size: 14px;
-  color: #58617a;
+.com_cell_right_time_tit {
+  color: #8890a7;
 }
 .com_cell_right_time {
-  color: #ea7d19;
-}
-.ci {
   color: #242c43;
 }
-.get_detail {
-  position: absolute;
-  top: 26px;
-  right: 16px;
+.com_cell_right_btn {
+  background-color: #0f2683;
+  color: #f8f9fd;
+  width: 220px;
+  height: 40px;
+  border-radius: 20px;
+  margin-top: 25px;
 }
 .tags {
   display: inline-block;
-  margin-left: 8px;
-  padding: 2px 8px 3px;
+  margin-left: 10px;
+  padding: 2px 10px 3px;
   font-size: 12px;
   font-weight: 500;
   line-height: 12px;
   border-radius: 4px;
   position: relative;
-  top: 1px;
+  top: -1px;
 }
 .map_service {
   background-color: #626de9;
@@ -196,39 +185,24 @@ export default {
   border: solid 1px #d7a4a9;
   color: #e15260;
 }
-.com_cell_down {
-  padding: 12px 16px 0 16px;
+.message_block {
+  width: 80%;
+  padding: 10px 20px;
+  background-color: #f8f9fd;
+  border-radius: 10px;
 }
-.com_detail {
-  color: #8890a7;
-  font-size: 14px;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  height: 42px;
-  margin-bottom: 8px;
-}
-.com_other {
-  color: #58617a;
-  margin-bottom: 6px;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  overflow: hidden;
-}
-.name_title {
-  color: #8890a7;
+.left_blank {
+  margin-left: 20px;
 }
 </style>
 <style>
-.com_cell .el-rate__item .el-rate__icon {
-  font-size: 20px;
-  margin-right: 0;
+.com_cell_right .el-rate__text {
+  display: inline-block;
+  margin-left: 10px;
+  font-size: 32px;
+  font-weight: 700;
 }
-.com_cell .el-rate__text {
-  margin-left: 4px;
-  position: relative;
-  top: 1px;
+.com_cell_right .el-rate__icon {
+  font-size: 28px;
 }
 </style>

src/components/service-list/commodity-list copy.vue

+<template>
+  <div>
+    <div v-if="urlFilter == 'app'" ref="commodityList" class="commodity_card">
+      <commodity-card
+        v-for="item in datas"
+        :key="item.id"
+        :cellData="item"
+        :url="url"
+      ></commodity-card>
+    </div>
+    <div v-else class="commodity_cell">
+      <commodity-cell
+        v-for="item in datas"
+        :cellData="item"
+        :url="url"
+        :key="item.id"
+      ></commodity-cell>
+    </div>
+    <!-- 分页 -->
+    <section class="com-pagination" v-if="paginationShow">
+      <div class="com_page_total">共 {{ total }} 个条目</div>
+      <div class="com_page_item">
+        <div class="com_page_num" v-if="pageSizeShow">
+          <div>每页条数：</div>
+          <div class="com_page_num_sel">
+            <el-select
+              v-model="pagination.rowsPerPage"
+              placeholder="请选择"
+              size="small"
+              @change="handleSizeChange"
+            >
+              <el-option
+                v-for="item in pageOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="com_page_control">
+          <el-button
+            icon="el-icon-arrow-left"
+            circle
+            size="mini"
+            @click="handleCurrentChange(-1)"
+            :disabled="pagination.page == 1"
+          ></el-button>
+          &nbsp;&nbsp;第{{ pagination.page }}页 / 共
+          {{ Math.ceil((total == 0 ? 1 : total) / pagination.rowsPerPage) }}页
+          <el-button
+            icon="el-icon-arrow-right"
+            circle
+            size="mini"
+            @click="handleCurrentChange(1)"
+            :disabled="
+              pagination.page >=
+              Math.ceil((total == 0 ? 1 : total) / pagination.rowsPerPage)
+            "
+          ></el-button>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import CommodityCell from "@/components/service-list/commodity-cell.vue";
+import CommodityCard from "@/components/service-list/commodity-card.vue";
+export default {
+  components: {
+    "commodity-cell": CommodityCell,
+    "commodity-card": CommodityCard,
+  },
+  props: {
+    datas: {
+      type: Array,
+      default: () => {
+        [];
+      },
+    },
+    total: {
+      type: Number,
+      default: 0,
+    },
+    url: { type: String, default: "" },
+    paginationShow: {
+      type: Boolean,
+      default: false,
+    },
+    pageSizeShow: {
+      type: Boolean,
+      default: false,
+    },
+    urlFilter: { type: String, default: "" },
+  },
+  data: () => ({
+    pagination: {
+      rowsPerPage: 10,
+      page: 1,
+    },
+    pageOptions: [
+      {
+        value: "10",
+        label: "10",
+      },
+      {
+        value: "20",
+        label: "20",
+      },
+      {
+        value: "50",
+        label: "50",
+      },
+    ],
+  }),
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      this.pagination.rowsPerPage = val;
+      this.refreshData();
+    },
+    handleCurrentChange(val) {
+      this.pagination.page += val;
+      this.refreshData();
+    },
+    refreshData() {
+      this.$emit("refresh", this.pagination);
+    },
+  },
+  mounted() {},
+  watch: {
+    datas: {
+      handler(val) {},
+    },
+    url: {
+      handler() {
+        this.pagination = {
+          rowsPerPage: 10,
+          page: 1,
+        };
+        this.refreshData();
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+.com-pagination {
+  margin-top: 20px;
+  font-size: 14px;
+  padding: 0 5%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.com_page_num {
+  width: 140px;
+  margin-right: 20px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.com_page_num_sel {
+  width: 50px;
+  font-size: 14px;
+  position: relative;
+  top: 1px;
+}
+.com_page_item {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.commodity_card {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.commodity_card_list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.commodity_card_item {
+  margin: 10px 0;
+}
+.commodity_card_item_in {
+  margin: 0 auto;
+}
+.commodity_cell {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+</style>
+<style>
+.com_page_control .el-button {
+  border: 0;
+}
+.com_page_num .el-input__inner {
+  border: 0;
+  padding: 0;
+}
+</style>
\ No newline at end of file

src/components/service-list/commodity-list.vue

 <template>
   <div>
-    <div v-if="urlFilter == 'app'" ref="commodityList" class="commodity_card">
-      <commodity-card
+    <div v-if="urlFilter=='app'" ref="commodityList" class="commodity_card">
+      <div ref="commodityCardIn" class="commodity_card_list">
+        <div
           v-for="item in datas"
-        :key="item.id"
           :cellData="item"
           :url="url"
-      ></commodity-card>
+          :key="item.id"
+          class="commodity_card_item"
+        >
+          <commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
+        </div>
+      </div>
     </div>
     <div v-else class="commodity_cell">
-      <commodity-cell
-        v-for="item in datas"
-        :cellData="item"
-        :url="url"
-        :key="item.id"
-      ></commodity-cell>
+      <commodity-cell v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-cell>
     </div>
     <!-- 分页 -->
     <section class="com-pagination" v-if="paginationShow">
@@ -46,8 +46,9 @@
             @click="handleCurrentChange(-1)"
             :disabled="pagination.page == 1"
           ></el-button>
-          &nbsp;&nbsp;第{{ pagination.page }}页 / 共
-          {{ Math.ceil((total == 0 ? 1 : total) / pagination.rowsPerPage) }}页
+          &nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
+          Math.ceil((total == 0 ? 1 : total) / pagination.rowsPerPage)
+          }}页
           <el-button
             icon="el-icon-arrow-right"
             circle
@@ -127,11 +128,30 @@ export default {
     refreshData() {
       this.$emit("refresh", this.pagination);
     },
+    pageResize() {
+      let listWidth = this.$refs.commodityCardIn.clientWidth;
+      let rowCardNum = Math.floor(listWidth / 310);
+      let cardArr = this.$refs.commodityCardIn.children;
+      // console.log(rowCardNum, listWidth / rowCardNum);
+      for (let i = 0; i < cardArr.length; i++) {
+        cardArr[i].style.width = listWidth / rowCardNum - 1 + "px";
+      }
+      // console.log(this.$refs.commodityCardIn);
+    },
   },
   mounted() {},
   watch: {
     datas: {
-      handler(val) {},
+      handler(val) {
+        if (this.urlFilter == "app") {
+          setTimeout(() => {
+            this.pageResize();
+            window.onresize = () => {
+              this.pageResize();
+            };
+          }, 0);
+        }
+      },
     },
     url: {
       handler() {
@@ -174,9 +194,6 @@ export default {
   align-items: center;
 }
 .commodity_card {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
 }
 .commodity_card_list {
   width: 100%;
@@ -189,11 +206,6 @@ export default {
 .commodity_card_item_in {
   margin: 0 auto;
 }
-.commodity_cell {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
 </style>
 <style>
 .com_page_control .el-button {

src/components/service-list/service_list copy.vue

+<template>
+  <!-- 
+    name: page type
+    url: detail page url
+    urlFilter: get filter data from this url
+    author: dixin
+    This component only for service shop list, so the explanation only look by me
+  -->
+  <div>
+    <div class="head_flex">
+      <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
+        <el-breadcrumb-item :to="{ path: '/shop' }">
+          {{ $t("lang.service_shop") }}
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
+      </el-breadcrumb>
+      <div class="input_right">
+        <el-input
+          v-model="search"
+          prefix-icon="el-icon-search"
+          placeholder="请输入关键字搜索服务"
+          @input="searchVal"
+        ></el-input>
+      </div>
+    </div>
+    <block-radius :borRadius="12" :paddingNum="0">
+      <!-- filter -->
+      <div v-if="urlFilter" class="classification">
+        <div
+          v-for="(item, index) in filterLists"
+          :key="'cd' + index"
+          class="classification_line"
+        >
+          <div
+            class="classification_line_if"
+            v-if="item.childDomains && item.childDomains.length != 0"
+          >
+            <div class="classification_line_title">{{ item.name }}<span class="maohao">：</span></div>
+            <!-- <div
+              :class="
+                index == filterLists.length - 1
+                  ? 'classification_line_items'
+                  : 'classification_line_items classification_line_items_border'
+              "
+            > -->
+            <div class="classification_line_items">
+              <div
+                :class="
+                  openList[index] == 'up'
+                    ? 'classification_line_hid'
+                    : 'classification_line_show'
+                "
+              >
+                <ul :id="item.id" class="classification_line_items_ul">
+                  <li class="classification_line_items_li" :key="'cda' + index">
+                    <div class="classification_span">
+                      <span
+                        @click="clickAll(index)"
+                        :class="
+                          activeOptions[index].length == 0
+                            ? 'classification_act'
+                            : ''
+                        "
+                        >全部</span
+                      >
+                    </div>
+                  </li>
+                  <li
+                    v-for="(items, indexs) in item.childDomains"
+                    :class="
+                      items.childDomains &&
+                      openChildren[index].state == true &&
+                      openChildren[index].index == items.id
+                        ? 'classification_line_items_li_act classification_line_items_li'
+                        : 'classification_line_items_li'
+                    "
+                    :key="'cds' + indexs"
+                  >
+                    <div class="classification_span">
+                      <span
+                        @click="clickItem(index, indexs, items)"
+                        :class="
+                          activeOptions[index].indexOf(items.id) != -1
+                            ? 'classification_act'
+                            : ''
+                        "
+                        >{{ items.name }}</span
+                      >
+                      <!-- if item have children, we will use an arrow to prompt -->
+                      <i
+                        v-if="
+                          items.childDomains &&
+                          openChildren[index].state == true &&
+                          openChildren[index].index == items.id
+                        "
+                        @click="clickItemChild(index, indexs, items)"
+                        class="el-icon-caret-top"
+                      ></i>
+                      <i
+                        v-else-if="
+                          items.childDomains &&
+                          openChildren[index].state == false &&
+                          openChildren[index].index == items.id
+                        "
+                        @click="clickItemChild(index, indexs, items)"
+                        class="el-icon-caret-bottom"
+                      ></i>
+                      <i
+                        v-else-if="items.childDomains"
+                        @click="clickItemChild(index, indexs, items)"
+                        class="el-icon-caret-bottom"
+                      ></i>
+                    </div>
+                  </li>
+                </ul>
+                <!-- if the word over the width, we will supply a button for show all word -->
+                <div
+                  v-if="item.showOpen"
+                  class="classification_line_items_open"
+                  @click="clickOpen(index)"
+                >
+                  <span v-if="openList[index] == 'down'">收起</span>
+                  <span v-if="openList[index] == 'up'">更多</span>
+                  <i
+                    v-if="openList[index] == 'down'"
+                    class="el-icon-caret-top"
+                  ></i>
+                  <i
+                    v-if="openList[index] == 'up'"
+                    class="el-icon-caret-bottom"
+                  ></i>
+                </div>
+              </div>
+              <!-- filter children -->
+              <div v-if="openChildren[index].state">
+                <ul class="classification_children_ul">
+                  <li
+                    class="classification_children_li"
+                    v-for="itemChildren in openChildren[index].act"
+                    :key="itemChildren.id"
+                  >
+                    <div
+                      class="classification_span"
+                      @click="
+                        clickChildren(
+                          itemChildren.id,
+                          index,
+                          openChildren[index].index
+                        )
+                      "
+                    >
+                      <span
+                        :class="
+                          activeChildOptions[index].indexOf(itemChildren.id) !=
+                          -1
+                            ? 'classification_act'
+                            : ''
+                        "
+                        >{{ itemChildren.name }}</span
+                      >
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </block-radius>
+    <!-- filter button -->
+    <div class="btn_group">
+      <div
+        v-for="(item, index) in buttonFilter"
+        :key="item.name"
+        size="small"
+        :class="
+          index == activeBtn
+            ? 'button_filter button_filter_act'
+            : 'button_filter'
+        "
+        @click="clickButtonFilter(index)"
+      >
+        {{ item.name }}
+      </div>
+      <!-- <div v-if="urlFilter == 'app'" class="btn_right_check">
+        <el-checkbox v-model="couldTwice" @change="changeTwice">
+          支持二次开发
+        </el-checkbox>
+      </div> -->
+    </div>
+    <!-- <div
+        class="gray_line"
+        v-if="
+          filterLists[0].childDomains.length != 0 ||
+          filterLists[1].childDomains.length != 0 ||
+          filterLists[2].childDomains.length != 0
+        "
+      ></div> -->
+    <!-- the list -->
+    <commodity-list
+      :datas="lists && lists.length != 0 ? lists : []"
+      :total="total"
+      :url="url"
+      :urlFilter="urlFilter"
+      :paginationShow="false"
+      :pageSizeShow="true"
+      @refresh="getNewList"
+    ></commodity-list>
+  </div>
+</template>
+
+<script>
+import CommodityList from "@/components/service-list/commodity-list.vue";
+import BlockRadius from "@/components/general/block-radius";
+export default {
+  components: {
+    "commodity-list": CommodityList,
+    BlockRadius,
+  },
+  props: {
+    urlFilter: {
+      type: String,
+      default: "",
+    },
+    url: { type: String, default: "" },
+    name: { type: String, default: "" },
+    filterNames: {
+      type: Array,
+      default: () => {
+        [];
+      },
+    },
+  },
+  data: () => ({
+    search: "",
+    openList: [0, 0, 0, 0],
+    openChildren: [
+      { index: null, state: false, act: null },
+      { index: null, state: false, act: null },
+      { index: null, state: false, act: null },
+      { index: null, state: false, act: null },
+    ],
+    activeOptions: [[], [], [], []],
+    activeChildOptions: [[], [], [], []],
+    buttonFilter: [
+      {
+        name: "综合排序",
+      },
+      {
+        name: "最新更新",
+      },
+      {
+        name: "最高人气",
+      },
+      {
+        name: "最好评价",
+      },
+    ],
+    activeBtn: 0,
+    lists: [],
+    total: 0,
+    filterLists: [
+      {
+        id: 110,
+        name: "",
+        prop: "",
+        childDomains: [],
+      },
+      {
+        id: 10,
+        name: "",
+        prop: "serviceTypeInfo",
+        childDomains: [],
+      },
+      {
+        id: 11,
+        name: "",
+        prop: "serviceDomain",
+        childDomains: [],
+      },
+      {
+        id: 100,
+        name: "",
+        prop: "organizations",
+        childDomains: [],
+      },
+    ],
+    page: 1,
+    limit: 20,
+    couldTwice: false,
+    refresh_app_1: false,
+    refresh_app_2: false,
+    refresh_app_3: false,
+    time_app: null,
+    times: null,
+    isKaiGuan: true,
+  }),
+  mounted() {
+    window.addEventListener("resize", this.judgeHeight);
+    window.addEventListener("scroll", this.menu, true);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.judgeHeight);
+    window.removeEventListener("scroll", this.menu, true);
+  },
+  watch: {
+    urlFilter: {
+      handler(val) {
+        if (val) {
+          this.openChildren = [
+            { index: null, state: false, act: null },
+            { index: null, state: false, act: null },
+            { index: null, state: false, act: null },
+            { index: null, state: false, act: null },
+          ];
+          this.activeOptions = [[], [], [], []];
+          this.activeChildOptions = [[], [], [], []];
+          if (val == "app") {
+            this.$set(this.filterLists, 0, {
+              id: 110,
+              name: "部署来源",
+              prop: "",
+              childDomains: [
+                {
+                  id: 2,
+                  name: "平台应用",
+                  prop: "",
+                  childDomains: null,
+                },
+                {
+                  id: 1,
+                  name: "开发者应用",
+                  prop: "",
+                  childDomains: null,
+                },
+              ],
+            });
+          } else {
+            this.$set(this.filterLists, 0, {
+              id: 110,
+              name: "",
+              prop: "",
+              childDomains: [],
+            });
+          }
+          this.getShopFilter();
+        }
+      },
+    },
+    filterNames: {
+      handler(val) {
+        for (let i = 0; i < val.length; i++) {
+          this.filterLists[i + 1].name = val[i];
+        }
+      },
+    },
+  },
+  methods: {
+    menu() {
+      if (this.isKaiGuan) {
+        let scroll =
+          this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
+        if (scroll > -10) {
+          if (
+            (this.total != 0 && this.page * this.limit < this.total) ||
+            this.total == 0
+          ) {
+            this.page++;
+            this.getShopList();
+          }
+        }
+      }
+    },
+    //滚动条在Y轴上的滚动距离
+    getScrollTop() {
+      var documentScrollTop = 0;
+      documentScrollTop = document.documentElement.scrollTop;
+      return documentScrollTop;
+    },
+    //文档的总高度
+    getScrollHeight() {
+      var documentScrollHeight = 0;
+      documentScrollHeight = document.documentElement.scrollHeight;
+      return documentScrollHeight;
+    },
+    //浏览器视口的高度
+    getWindowHeight() {
+      var windowHeight = 0;
+      windowHeight = document.documentElement.clientHeight;
+      return windowHeight;
+    },
+    getShopList() {
+      this.isKaiGuan = false;
+      if (this.urlFilter == "app") {
+        let query = {
+          online_state: this.activeOptions[0].join(","),
+          appTypes: this.activeOptions[1].join(","),
+          businessArea: this.activeOptions[2].join(","),
+          orgSource: this.activeOptions[3].join(","),
+          developable: Number(this.couldTwice),
+          order:
+            this.activeBtn == 0
+              ? "search_count"
+              : this.activeBtn == 1
+              ? "create_date"
+              : this.activeBtn == 2
+              ? "apply_times"
+              : "evaluation",
+          page: this.page,
+          limit: this.limit,
+          search: this.search,
+        };
+        this.$api.serviceShop.getAppList(query).then((response) => {
+          if (response.data.success == "1") {
+            this.lists =
+              this.page == 1
+                ? response.data.data
+                : this.lists.concat(response.data.data);
+            this.total = response.data.total;
+            this.isKaiGuan = true;
+          } else {
+            console.log(response.data.errMsg);
+          }
+        });
+      } else {
+        let query = {
+          serviceName: this.search,
+          serviceType1: this.urlFilter,
+          serviceType2s: this.activeOptions[1].join(","),
+          serviceType3s: this.activeChildOptions[1].join(","),
+          dataDomains: this.activeOptions[2].join(","),
+          organizeIds: this.activeOptions[3].join(","),
+          orderBy: this.activeBtn,
+          Page: this.page,
+          Size: this.limit,
+        };
+        this.$api.serviceShop.getServiceShopList(query).then((response) => {
+          if (response.data.success == "1") {
+            this.lists =
+              this.page == 1
+                ? response.data.data
+                : this.lists.concat(response.data.data);
+            this.total = response.data.total;
+            this.isKaiGuan = true;
+          } else {
+            console.log(response.data.errMsg);
+          }
+        });
+      }
+    },
+    getShopFilter() {
+      if (this.urlFilter == "app") {
+        this.getAppArea();
+        this.getAppType();
+        this.getAppOrg();
+        this.time_app = setInterval(() => {
+          if (this.refresh_app_1 && this.refresh_app_2 && this.refresh_app_3) {
+            this.judgeHeight();
+            clearInterval(this.time_app);
+          }
+        }, 50);
+      } else {
+        let query = {
+          type: this.urlFilter,
+        };
+        this.$api.serviceShop.getServiceShopFilter(query).then((response) => {
+          if (response.data.success == 1) {
+            let data = response.data.data;
+            this.filterLists[1].childDomains = data.serviceTypeInfo
+              ? data.serviceTypeInfo
+              : [];
+            this.filterLists[2].childDomains = data.serviceDomain
+              ? data.serviceDomain
+              : [];
+            this.filterLists[3].childDomains = data.organizations
+              ? data.organizations
+              : [];
+            if (this.urlFilter == "7") {
+              this.filterLists[1].childDomains = [];
+            }
+            setTimeout(() => {
+              this.judgeHeight();
+            }, 0);
+          } else {
+            console.log(response.data.errMsg);
+          }
+        });
+      }
+    },
+    judgeHeight() {
+      this.$nextTick(() => {
+        let list = this.filterLists;
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].childDomains.length != 0) {
+            let offHeight = Math.ceil(
+              document.getElementById(list[i].id).offsetHeight
+            );
+            if (offHeight > 60) {
+              list[i].showOpen = true;
+              this.openList[i] = "up";
+            } else {
+              list[i].showOpen = false;
+            }
+          }
+        }
+        this.filterLists = [...list];
+      });
+    },
+    clickOpen(index) {
+      let list = this.openList;
+      if (list[index] == "up") {
+        this.$set(this.openList, index, "down");
+      } else if (list[index] == "down") {
+        this.$set(this.openList, index, "up");
+      }
+      //   这里不能像上面那样整体更新，因为啥我也不知道，我太菜
+    },
+    clickItem(index, indexs, items) {
+      let i = this.activeOptions[index].indexOf(items.id);
+      if (i == -1) {
+        this.activeOptions[index].push(items.id);
+      } else {
+        this.activeOptions[index].splice(i, 1);
+        if (items.childDomains) {
+          items.childDomains.forEach((e) => {
+            let i = this.activeChildOptions[index].indexOf(e.id);
+            if (i != -1) {
+              this.activeChildOptions[index].splice(i, 1);
+            }
+          });
+        }
+      }
+      this.getFilterValue();
+    },
+    clickItemChild(index, indexs, items) {
+      if (items.childDomains) {
+        if (this.openChildren[index].index == items.id) {
+          this.$set(this.openChildren, index, {
+            index: indexs,
+            state: !this.openChildren[index].state,
+            act: items.childDomains,
+          });
+        } else {
+          this.$set(this.openChildren, index, {
+            index: items.id,
+            state: true,
+            act: items.childDomains,
+          });
+        }
+      } else {
+        this.$set(this.openChildren, index, {
+          index: null,
+          state: false,
+          act: null,
+        });
+      }
+    },
+    clickButtonFilter(index) {
+      this.activeBtn = index;
+      this.page = 1;
+      this.getShopList();
+    },
+    clickChildren(id, index, fatherId) {
+      let i = this.activeChildOptions[index].indexOf(id);
+      let j = this.activeOptions[index].indexOf(fatherId);
+      if (i == -1) {
+        this.activeChildOptions[index].push(id);
+        if (j == -1) {
+          this.activeOptions[index].push(fatherId);
+        }
+      } else {
+        this.activeChildOptions[index].splice(i, 1);
+      }
+      this.getFilterValue();
+    },
+    getFilterValue() {
+      this.page = 1;
+      this.getShopList();
+    },
+    // search debonce 500ms
+    searchVal() {
+      if (this.times !== null) clearTimeout(this.times);
+      this.times = setTimeout(() => {
+        this.page = 1;
+        this.getShopList();
+      }, 500);
+    },
+    getNewList(val) {
+      console.log(val);
+      this.page = 1;
+      this.limit = 20;
+      this.getShopList();
+    },
+    clickAll(item) {
+      this.$set(this.activeOptions, item, []);
+      this.$set(this.activeChildOptions, item, []);
+      this.page = 1;
+      this.getShopList();
+    },
+    changeTwice() {
+      this.getShopList();
+    },
+    getAppArea() {
+      this.$api.serviceShop.getAppArea().then((response) => {
+        if (response.data.success == 1) {
+          this.filterLists[2].childDomains = response.data.data;
+          this.refresh_app_2 = true;
+        } else {
+          console.log(response.data.errMsg);
+        }
+      });
+    },
+    getAppType() {
+      this.$api.serviceShop.getAppType().then((response) => {
+        if (response.data.success == 1) {
+          this.filterLists[1].childDomains = response.data.data;
+          this.refresh_app_1 = true;
+        } else {
+          console.log(response.data.errMsg);
+        }
+      });
+    },
+    getAppOrg() {
+      this.$api.serviceShop.getAppOrg().then((response) => {
+        if (response.data.success == 1) {
+          this.filterLists[3].childDomains = response.data.data;
+          this.refresh_app_3 = true;
+        } else {
+          console.log(response.data.errMsg);
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+.head_flex {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  height: 40px;
+  top: -14px;
+}
+.bread_left {
+  width: 300px;
+}
+.input_right {
+  width: 360px;
+  position: relative;
+  height: 36px;
+  top: 6px;
+}
+.gray_line {
+  width: 100%;
+  margin: 20px auto;
+  height: 1px;
+  background-color: #e9ecf3;
+}
+.classification {
+  padding: 12px 16px 12px 32px;
+}
+.classification_line {
+  width: 100%;
+}
+.classification_line_if {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+}
+.classification_line_title {
+  display: inline-block;
+  width: 90px;
+  padding: 12px 0;
+  text-align: left;
+  color: #8890a7;
+  font-size: 12px;
+}
+.classification_line_items {
+  width: calc(100% - 90px);
+}
+.classification_line_items_border {
+  border-bottom: 1px #e9ecf3 solid;
+}
+.classification_line_hid {
+  height: 40px;
+  width: 100%;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: flex-start;
+}
+.classification_line_show {
+  width: 100%;
+  display: inline-flex;
+  align-items: flex-start;
+}
+.classification_line_items_ul {
+  display: inline-block;
+  width: calc(100% - 30px);
+  font-size: 0;
+}
+.classification_line_items_li {
+  display: inline-block;
+  padding: 12px 18px;
+  font-size: 12px;
+}
+.classification_line_items_li_act {
+  background-color: #fbfbfb;
+  border-left: 1px #e9ecf3 solid;
+  border-right: 1px #e9ecf3 solid;
+}
+.classification_span {
+  color: #58617a;
+  display: inline-block;
+  cursor: pointer;
+}
+.classification_act {
+  color: #fff;
+  position: relative;
+  z-index: 1;
+}
+.classification_act::after {
+  content: "";
+  position: absolute;
+  width: calc(100% + 16px);
+  height: calc(100% + 8px);
+  background-color: #3f4f9c;
+  border-radius: 3px;
+  top: -4px;
+  left: -8px;
+  z-index: -1;
+}
+.classification_line_items_open {
+  display: inline-block;
+  width: 60px;
+  padding: 12px 0;
+  cursor: pointer;
+  font-size: 12px;
+  text-align: right;
+}
+.classification_children_ul {
+  display: inline-block;
+  width: 100%;
+  background-color: #fbfbfb;
+  border-top: 1px #e9ecf3 solid;
+}
+.classification_children_li {
+  display: inline-block;
+  padding: 12px 18px;
+  color: #58617a;
+}
+.button_filter {
+  color: #8890a7;
+  font-size: 12px;
+  display: inline-block;
+  margin-right: 31px;
+  position: relative;
+}
+.button_filter::after {
+  content: "";
+  width: 1px;
+  height: 16px;
+  background-color: #e3e5ef;
+  position: absolute;
+  right: -15px;
+}
+.button_filter:nth-child(4):after {
+  content: "";
+  width: 0;
+}
+.button_filter_act {
+  color: #515fe7;
+}
+.btn_group {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  position: relative;
+}
+.btn_right_check {
+  position: absolute;
+  right: 20px;
+  top: 10px;
+}
+</style>
+<style>
+.head_flex .input_right .el-input__inner {
+  border-radius: 6px;
+  border: solid 1px #e7eaf6;
+}
+.head_flex .input_right .el-input--prefix .el-input__inner {
+  padding-left: 40px;
+}
+.head_flex .input_right .el-input__prefix,
+.el-input__suffix {
+  left: 10px;
+}
+.head_flex .input_right .el-input--prefix .el-input__inner {
+  outline: none;
+}
+.head_flex .input_right .el-input__inner:focus-within {
+  border: 1px solid #626de9;
+}
+.head_flex .btn_right_check .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #626de9;
+}
+.head_flex
+  .btn_right_check
+  .el-checkbox__input.is-checked
+  + .el-checkbox__label {
+  color: #626de9;
+}
+.head_flex .btn_right_check .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #626de9;
+}
+</style>

src/components/service-list/service_list.vue

@@ -10,7 +10,9 @@
     <div class="head_flex">
       <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
         <el-breadcrumb-item :to="{ path: '/shop' }">
-          {{ $t("lang.service_shop") }}
+          {{
+          $t("lang.service_shop")
+          }}
         </el-breadcrumb-item>
         <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
       </el-breadcrumb>
@@ -23,27 +25,22 @@
         ></el-input>
       </div>
     </div>
-    <block-radius :borRadius="12" :paddingNum="0">
+    <block-radius>
       <!-- filter -->
       <div v-if="urlFilter" class="classification">
-        <div
-          v-for="(item, index) in filterLists"
-          :key="'cd' + index"
-          class="classification_line"
-        >
+        <div v-for="(item, index) in filterLists" :key="'cd' + index" class="classification_line">
           <div
             class="classification_line_if"
             v-if="item.childDomains && item.childDomains.length != 0"
           >
-            <div class="classification_line_title">{{ item.name }}<span class="maohao">：</span></div>
-            <!-- <div
+            <div class="classification_line_title">{{ item.name }}：</div>
+            <div
               :class="
                 index == filterLists.length - 1
                   ? 'classification_line_items'
                   : 'classification_line_items classification_line_items_border'
               "
-            > -->
-            <div class="classification_line_items">
+            >
               <div
                 :class="
                   openList[index] == 'up'
@@ -61,8 +58,7 @@
                             ? 'classification_act'
                             : ''
                         "
-                        >全部</span
-                      >
+                      >全部</span>
                     </div>
                   </li>
                   <li
@@ -84,8 +80,7 @@
                             ? 'classification_act'
                             : ''
                         "
-                        >{{ items.name }}</span
-                      >
+                      >{{ items.name }}</span>
                       <!-- if item have children, we will use an arrow to prompt -->
                       <i
                         v-if="
@@ -120,15 +115,9 @@
                   @click="clickOpen(index)"
                 >
                   <span v-if="openList[index] == 'down'">收起</span>
-                  <span v-if="openList[index] == 'up'">更多</span>
-                  <i
-                    v-if="openList[index] == 'down'"
-                    class="el-icon-caret-top"
-                  ></i>
-                  <i
-                    v-if="openList[index] == 'up'"
-                    class="el-icon-caret-bottom"
-                  ></i>
+                  <span v-if="openList[index] == 'up'">展开</span>
+                  <i v-if="openList[index] == 'down'" class="el-icon-caret-top"></i>
+                  <i v-if="openList[index] == 'up'" class="el-icon-caret-bottom"></i>
                 </div>
               </div>
               <!-- filter children -->
@@ -156,8 +145,7 @@
                             ? 'classification_act'
                             : ''
                         "
-                        >{{ itemChildren.name }}</span
-                      >
+                      >{{ itemChildren.name }}</span>
                     </div>
                   </li>
                 </ul>
@@ -166,46 +154,38 @@
           </div>
         </div>
       </div>
-    </block-radius>
+      <div
+        class="gray_line"
+        v-if="
+          filterLists[0].childDomains.length != 0 ||
+            filterLists[1].childDomains.length != 0 ||
+            filterLists[2].childDomains.length != 0
+        "
+      ></div>
       <!-- filter button -->
       <div class="btn_group">
-      <div
+        <el-button
           v-for="(item, index) in buttonFilter"
           :key="item.name"
           size="small"
-        :class="
-          index == activeBtn
-            ? 'button_filter button_filter_act'
-            : 'button_filter'
-        "
+          :class="index == activeBtn ? 'button_filter_act' : 'button_filter'"
           @click="clickButtonFilter(index)"
-      >
-        {{ item.name }}
+        >{{ item.name }}</el-button>
+        <div v-if="urlFilter == 'app'" class="btn_right_check">
+          <el-checkbox v-model="couldTwice" @change="changeTwice">支持二次开发</el-checkbox>
         </div>
-      <!-- <div v-if="urlFilter == 'app'" class="btn_right_check">
-        <el-checkbox v-model="couldTwice" @change="changeTwice">
-          支持二次开发
-        </el-checkbox>
-      </div> -->
       </div>
-    <!-- <div
-        class="gray_line"
-        v-if="
-          filterLists[0].childDomains.length != 0 ||
-          filterLists[1].childDomains.length != 0 ||
-          filterLists[2].childDomains.length != 0
-        "
-      ></div> -->
       <!-- the list -->
       <commodity-list
         :datas="lists && lists.length != 0 ? lists : []"
         :total="total"
         :url="url"
         :urlFilter="urlFilter"
-      :paginationShow="false"
+        :paginationShow="true"
         :pageSizeShow="true"
         @refresh="getNewList"
       ></commodity-list>
+    </block-radius>
   </div>
 </template>
 
@@ -286,22 +266,19 @@ export default {
       },
     ],
     page: 1,
-    limit: 20,
+    limit: 10,
     couldTwice: false,
     refresh_app_1: false,
     refresh_app_2: false,
     refresh_app_3: false,
     time_app: null,
     times: null,
-    isKaiGuan: true,
   }),
   mounted() {
     window.addEventListener("resize", this.judgeHeight);
-    window.addEventListener("scroll", this.menu, true);
   },
   destroyed() {
     window.removeEventListener("resize", this.judgeHeight);
-    window.removeEventListener("scroll", this.menu, true);
   },
   watch: {
     urlFilter: {
@@ -356,41 +333,7 @@ export default {
     },
   },
   methods: {
-    menu() {
-      if (this.isKaiGuan) {
-        let scroll =
-          this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
-        if (scroll > -10) {
-          if (
-            (this.total != 0 && this.page * this.limit < this.total) ||
-            this.total == 0
-          ) {
-            this.page++;
-            this.getShopList();
-          }
-        }
-      }
-    },
-    //滚动条在Y轴上的滚动距离
-    getScrollTop() {
-      var documentScrollTop = 0;
-      documentScrollTop = document.documentElement.scrollTop;
-      return documentScrollTop;
-    },
-    //文档的总高度
-    getScrollHeight() {
-      var documentScrollHeight = 0;
-      documentScrollHeight = document.documentElement.scrollHeight;
-      return documentScrollHeight;
-    },
-    //浏览器视口的高度
-    getWindowHeight() {
-      var windowHeight = 0;
-      windowHeight = document.documentElement.clientHeight;
-      return windowHeight;
-    },
     getShopList() {
-      this.isKaiGuan = false;
       if (this.urlFilter == "app") {
         let query = {
           online_state: this.activeOptions[0].join(","),
@@ -412,12 +355,8 @@ export default {
         };
         this.$api.serviceShop.getAppList(query).then((response) => {
           if (response.data.success == "1") {
-            this.lists =
-              this.page == 1
-                ? response.data.data
-                : this.lists.concat(response.data.data);
+            this.lists = response.data.data;
             this.total = response.data.total;
-            this.isKaiGuan = true;
           } else {
             console.log(response.data.errMsg);
           }
@@ -436,12 +375,8 @@ export default {
         };
         this.$api.serviceShop.getServiceShopList(query).then((response) => {
           if (response.data.success == "1") {
-            this.lists =
-              this.page == 1
-                ? response.data.data
-                : this.lists.concat(response.data.data);
+            this.lists = response.data.data;
             this.total = response.data.total;
-            this.isKaiGuan = true;
           } else {
             console.log(response.data.errMsg);
           }
@@ -557,7 +492,6 @@ export default {
     },
     clickButtonFilter(index) {
       this.activeBtn = index;
-      this.page = 1;
       this.getShopList();
     },
     clickChildren(id, index, fatherId) {
@@ -574,27 +508,23 @@ export default {
       this.getFilterValue();
     },
     getFilterValue() {
-      this.page = 1;
       this.getShopList();
     },
     // search debonce 500ms
     searchVal() {
       if (this.times !== null) clearTimeout(this.times);
       this.times = setTimeout(() => {
-        this.page = 1;
         this.getShopList();
       }, 500);
     },
     getNewList(val) {
-      console.log(val);
-      this.page = 1;
-      this.limit = 20;
+      this.page = val.page;
+      this.limit = val.rowsPerPage;
       this.getShopList();
     },
     clickAll(item) {
       this.$set(this.activeOptions, item, []);
       this.$set(this.activeChildOptions, item, []);
-      this.page = 1;
       this.getShopList();
     },
     changeTwice() {
@@ -637,18 +567,12 @@ export default {
 .head_flex {
   display: flex;
   justify-content: space-between;
-  position: relative;
-  height: 40px;
-  top: -14px;
 }
 .bread_left {
   width: 300px;
 }
 .input_right {
   width: 360px;
-  position: relative;
-  height: 36px;
-  top: 6px;
 }
 .gray_line {
   width: 100%;
@@ -656,9 +580,6 @@ export default {
   height: 1px;
   background-color: #e9ecf3;
 }
-.classification {
-  padding: 12px 16px 12px 32px;
-}
 .classification_line {
   width: 100%;
 }
@@ -669,20 +590,19 @@ export default {
 }
 .classification_line_title {
   display: inline-block;
-  width: 90px;
-  padding: 12px 0;
-  text-align: left;
+  width: 130px;
+  padding: 15px 0;
+  text-align: right;
   color: #8890a7;
-  font-size: 12px;
 }
 .classification_line_items {
-  width: calc(100% - 90px);
+  width: calc(100% - 130px);
 }
 .classification_line_items_border {
   border-bottom: 1px #e9ecf3 solid;
 }
 .classification_line_hid {
-  height: 40px;
+  height: 50px;
   width: 100%;
   overflow: hidden;
   display: inline-flex;
@@ -695,13 +615,13 @@ export default {
 }
 .classification_line_items_ul {
   display: inline-block;
-  width: calc(100% - 30px);
+  width: calc(100% - 50px);
   font-size: 0;
 }
 .classification_line_items_li {
   display: inline-block;
-  padding: 12px 18px;
-  font-size: 12px;
+  padding: 15px 20px;
+  font-size: 14px;
 }
 .classification_line_items_li_act {
   background-color: #fbfbfb;
@@ -714,28 +634,14 @@ export default {
   cursor: pointer;
 }
 .classification_act {
-  color: #fff;
-  position: relative;
-  z-index: 1;
-}
-.classification_act::after {
-  content: "";
-  position: absolute;
-  width: calc(100% + 16px);
-  height: calc(100% + 8px);
-  background-color: #3f4f9c;
-  border-radius: 3px;
-  top: -4px;
-  left: -8px;
-  z-index: -1;
+  font-weight: 700;
+  color: #515fe7;
 }
 .classification_line_items_open {
   display: inline-block;
   width: 60px;
-  padding: 12px 0;
+  padding: 15px 0;
   cursor: pointer;
-  font-size: 12px;
-  text-align: right;
 }
 .classification_children_ul {
   display: inline-block;
@@ -745,35 +651,35 @@ export default {
 }
 .classification_children_li {
   display: inline-block;
-  padding: 12px 18px;
+  padding: 15px 20px;
   color: #58617a;
 }
 .button_filter {
-  color: #8890a7;
+  background-color: #e6eefe;
+  color: #626de9;
+  border: 1px solid #e6eefe;
   font-size: 12px;
-  display: inline-block;
-  margin-right: 31px;
-  position: relative;
 }
-.button_filter::after {
-  content: "";
-  width: 1px;
-  height: 16px;
-  background-color: #e3e5ef;
-  position: absolute;
-  right: -15px;
+.button_filter:hover {
+  border: 1px solid rgb(198, 226, 255);
 }
-.button_filter:nth-child(4):after {
-  content: "";
-  width: 0;
+.button_filter:focus {
+  border: 1px solid rgb(58, 142, 230);
 }
 .button_filter_act {
-  color: #515fe7;
+  background-color: #515fe7;
+  border: 1px solid #515fe7;
+  color: #f8f9fd;
+  font-size: 12px;
+}
+.button_filter_act:hover {
+  border: 1px solid #414fd7;
+}
+.button_filter_act:focus {
+  border: 1px solid #313fc7;
 }
 .btn_group {
-  margin-top: 15px;
   margin-bottom: 15px;
-  margin-left: 15px;
   position: relative;
 }
 .btn_right_check {
@@ -784,8 +690,7 @@ export default {
 </style>
 <style>
 .head_flex .input_right .el-input__inner {
-  border-radius: 6px;
-  border: solid 1px #e7eaf6;
+  border-radius: 20px;
 }
 .head_flex .input_right .el-input--prefix .el-input__inner {
   padding-left: 40px;

src/components/service-list/service_shop_menu.vue

@@ -65,32 +65,32 @@ export default {
             }
             switch (uri) {
               case "data_service_list":
-                item.active = "shop_tool_ic_sjfw_sel";
-                item.default = "shop_tool_ic_sjfw";
+                item.active = "tool_ic_shujufw_sel";
+                item.default = "tool_ic_shujufw";
                 break;
               case "space_time_service_list":
-                item.active = "shop_tool_ic_skfw_sel";
-                item.default = "shop_tool_ic_skfw";
+                item.active = "tool_ic_shikongfw_sel";
+                item.default = "tool_ic_shikongfw";
                 break;
               case "video_service_list":
-                item.active = "shop_tool_ic_spfw_sel";
-                item.default = "shop_tool_ic_spfw";
+                item.active = "tool_ic_shipinfw_sel";
+                item.default = "tool_ic_shipinfw";
                 break;
               case "perception_service_list":
-                item.active = "shop_tool_ic_ganzhifw_sel";
-                item.default = "shop_tool_ic_ganzhifw";
+                item.active = "tool_ic_ganzhifw_sel";
+                item.default = "tool_ic_ganzhifw";
                 break;
               case "comprehensive_app_list":
-                item.active = "shop_tool_ic_zhyyfw_sel";
-                item.default = "shop_tool_ic_zhyyfw";
+                item.active = "tool_ic_zongheyyfw_sel";
+                item.default = "tool_ic_zongheyyfw";
                 break;
               case "cloud":
-                item.active = "shop_tool_ic_yzyfw_sel";
-                item.default = "shop_tool_ic_yzyfw";
+                item.active = "tool_ic_yunziyuanfw_sel";
+                item.default = "tool_ic_yunziyuanfw";
                 break;
               case "app_store_list":
-                item.active = "shop_ic_yysd_sel";
-                item.default = "shop_ic_yysd";
+                item.active = "tool_ic_yingyongsd_sel";
+                item.default = "tool_ic_yingyongsd";
                 break;
               default:
                 item.active = "1";
@@ -111,48 +111,37 @@ export default {
 .service_shop_menu {
   background-color: #0d1847;
   position: fixed;
-  top: 76px;
-  left: calc(50% - 600px);
-  width: 176px;
-  padding: 8px;
-	background-color: #ffffff;
-	box-shadow: 0px 3px 6px 0px 
-		rgba(15, 19, 65, 0.04);
-	border-radius: 8px;
+  top: 58px;
+  left: 0;
+  width: 180px;
+  height: 100%;
+  padding-top: 30px;
 }
 .service_shop_menu_list > li {
-  box-sizing: border-box;
-  height: 40px;
-  padding: 8px 0 0 22px;
-  margin-bottom: 16px;
+  padding: 16px 10px 8px 22px;
+  border-left: 5px solid #0d1847;
   font-size: 15px;
   line-height: 24px;
   cursor: pointer;
 }
-.service_shop_menu_list > li:nth-last-child(1) {
-  margin-bottom: 0;
-}
 .service_shop_menu_list > li:hover,
 .service_shop_menu_list > li.current {
-  background-color: rgba(242, 246, 253, 0.4);
-  color: #515fe7;
+  border-left: 5px solid #e56600;
+  background-color: #182665;
+  color: #e6ebfe;
 }
 .menu_img {
-  width: 24px;
+  width: 25px;
   margin-right: 6px;
 }
 .menu_item {
   position: relative;
-  font-weight: bold;
-  font-size: 15px;
-  color: #96a0c5;
+  color: #6573ae;
   top: -6px;
 }
 .menu_item_active {
   position: relative;
-  font-weight: bold;
-  font-size: 15px;
-  color: #515fe7;
+  color: #e6ebfe;
   top: -6px;
 }
 </style>

src/components/service-list/service_shop_menu_copy.vue

+<template>
+  <div class="service_shop_menu">
+    <ul class="service_shop_menu_list">
+      <li v-for="(item, index) in menuList" :key="index" @click="active(item.visit_url)">
+        <img
+          v-if="item.visit_url == actives"
+          :src="item.active != '' ? require('@/assets/imgs/' + item.active + '.png') : ''"
+          class="menu_img"
+        />
+        <img v-else :src="require('@/assets/imgs/' + item.default + '.png')" class="menu_img" />
+        <span
+          :class="item.visit_url == actives ? 'menu_item_active':'menu_item'"
+        >{{ item.menu_name }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  data() {
+    return {
+      actives: "",
+      menuList: [],
+    };
+  },
+  computed: {
+    getActive() {
+      return this.$store.state.serviceShopMenu;
+    },
+  },
+  watch: {
+    getActive(newVal) {
+      this.getActiveMenu(newVal);
+    },
+  },
+  mounted() {
+    this.getShopMenu();
+    this.$store.commit("serviceShopMenuAct", this.$route.path);
+    this.actives = this.$store.state.serviceShopMenu;
+  },
+  methods: {
+    active(val) {
+      this.$store.commit("serviceShopMenuAct", val);
+      this.$router.push(val);
+    },
+    getActiveMenu(val) {
+      this.actives = val;
+    },
+    getShopMenu() {
+      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
+        if (response.data.success == 1) {
+          let arr = response.data.data[0].Child;
+          let shopArr = [];
+          let asd = arr.find(item => {
+            return item.visit_url == "/services_shop"
+          })
+          shopArr = asd.Child;
+          if (shopArr && shopArr.length != 0) {
+            Array.from(shopArr).forEach((item) => {
+            let uri = item.visit_url.substring(6);
+            if (uri.indexOf("/") != -1) {
+              uri = uri.substring(0, uri.indexOf("/"));
+            }
+            switch (uri) {
+              case "data_service_list":
+                item.active = "shop_tool_ic_sjfw_sel";
+                item.default = "shop_tool_ic_sjfw";
+                break;
+              case "space_time_service_list":
+                item.active = "shop_tool_ic_skfw_sel";
+                item.default = "shop_tool_ic_skfw";
+                break;
+              case "video_service_list":
+                item.active = "shop_tool_ic_spfw_sel";
+                item.default = "shop_tool_ic_spfw";
+                break;
+              case "perception_service_list":
+                item.active = "shop_tool_ic_ganzhifw_sel";
+                item.default = "shop_tool_ic_ganzhifw";
+                break;
+              case "comprehensive_app_list":
+                item.active = "shop_tool_ic_zhyyfw_sel";
+                item.default = "shop_tool_ic_zhyyfw";
+                break;
+              case "cloud":
+                item.active = "shop_tool_ic_yzyfw_sel";
+                item.default = "shop_tool_ic_yzyfw";
+                break;
+              case "app_store_list":
+                item.active = "shop_ic_yysd_sel";
+                item.default = "shop_ic_yysd";
+                break;
+              default:
+                item.active = "1";
+                item.default = "1";
+                break;
+            }
+          });
+          }
+          this.menuList = shopArr;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.service_shop_menu {
+  background-color: #0d1847;
+  position: fixed;
+  top: 76px;
+  left: calc(50% - 600px);
+  width: 176px;
+  padding: 8px;
+	background-color: #ffffff;
+	box-shadow: 0px 3px 6px 0px 
+		rgba(15, 19, 65, 0.04);
+	border-radius: 8px;
+}
+.service_shop_menu_list > li {
+  box-sizing: border-box;
+  height: 40px;
+  padding: 8px 0 0 22px;
+  margin-bottom: 16px;
+  font-size: 15px;
+  line-height: 24px;
+  cursor: pointer;
+}
+.service_shop_menu_list > li:nth-last-child(1) {
+  margin-bottom: 0;
+}
+.service_shop_menu_list > li:hover,
+.service_shop_menu_list > li.current {
+  background-color: rgba(242, 246, 253, 0.4);
+  color: #515fe7;
+}
+.menu_img {
+  width: 24px;
+  margin-right: 6px;
+}
+.menu_item {
+  position: relative;
+  font-weight: bold;
+  font-size: 15px;
+  color: #96a0c5;
+  top: -6px;
+}
+.menu_item_active {
+  position: relative;
+  font-weight: bold;
+  font-size: 15px;
+  color: #515fe7;
+  top: -6px;
+}
+</style>

src/components/shop-cloud/shop-cloud copy.vue

+<template>
+  <div class="shop_cloud">
+    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
+      <el-breadcrumb-item :to="{ path: '/shop' }">服务超市</el-breadcrumb-item>
+      <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
+    </el-breadcrumb>
+    <block-radius :paddingNum="24">
+      <el-form
+        ref="form"
+        :inline="true"
+        :rules="ruleBasis"
+        :model="form"
+        class="form_block"
+      >
+        <el-row :gutter="24">
+          <el-col :span="24">
+            <el-form-item class="form_item">
+              <div class="form_item_title">申请组织：</div>
+              <el-input
+                v-model="form.department_name"
+                :disabled="true"
+                placeholder="请输入申请组织"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="form_item nobottom" prop="link_man">
+              <div class="form_item_title">部门联系人：</div>
+              <el-input
+                v-model="form.link_man"
+                placeholder="请输入联系人姓名"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="form_item nobottom" prop="phone">
+              <div class="form_item_title">联系电话：</div>
+              <el-input
+                v-model="form.phone"
+                placeholder="请输入联系人电话"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </block-radius>
+    <block-radius :paddingNum="24">
+      <el-tabs v-model="activeName" class="cloud_form" @tab-click="tabClick">
+        <el-tab-pane label="申请新的工作区域" name="0">
+          <el-form ref="formNew" :model="formNew" :rules="ruleNew">
+            <el-row :gutter="24">
+              <el-col :span="24">
+                <div class="form_title">基本信息</div>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item prop="namespace" class="form_item">
+                  <div class="form_item_title">工作区域名称：</div>
+                  <el-input
+                    v-model="formNew.namespace"
+                    placeholder="请输入工作区域英文名称"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item prop="workplace" class="form_item">
+                  <div class="form_item_title">中文名称：</div>
+                  <el-input
+                    v-model="formNew.workplace"
+                    placeholder="请输入工作区域中文名称"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item prop="workplacedesc" class="form_item nobottom">
+                  <div class="form_item_title">描述信息：</div>
+                  <el-input
+                    type="textarea"
+                    v-model="formNew.workplacedesc"
+                    placeholder="请输入工作区域描述信息"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <div class="form_title">工作区域申请规格</div>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item prop="cpu" class="form_item input_has_right">
+                  <div class="form_item_title">CPU：</div>
+                  <el-select
+                    v-model="formNew.cpu"
+                    @change="changeCPU"
+                    placeholder="请选择CPU使用量"
+                  >
+                    <el-option
+                      v-for="item in optionsCPU"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
+                  </el-select>
+                  <div class="input_right input_right_top">核</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item prop="memory" class="form_item input_has_right">
+                  <div class="form_item_title">内存：</div>
+                  <el-select
+                    v-model="formNew.memory"
+                    placeholder="请选择内存使用量"
+                    @change="setContainerGroup(0)"
+                  >
+                    <el-option
+                      v-for="item in optionsRAM"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
+                  </el-select>
+                  <div class="input_right input_right_top">GB</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item
+                  prop="containerGroup"
+                  class="form_item input_has_right"
+                >
+                  <div class="form_item_title">容器组：</div>
+                  <el-input-number
+                    v-model="formNew.containerGroup"
+                    controls-position="right"
+                    :min="0"
+                    :max="24"
+                    placeholder="取值范围[0，24]"
+                  ></el-input-number>
+                  <div class="input_right">个</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <div class="form_item_title">数据盘（可选）：</div>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item class="form_item input_has_right nobottom">
+                  <el-input-number
+                    v-model="formNew.dataDisk"
+                    controls-position="right"
+                    :min="0"
+                    :max="1000"
+                    placeholder="请选择增加数据盘的数量"
+                  ></el-input-number>
+                  <div class="input_right">块</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item class="form_item input_has_right nobottom">
+                  <el-input-number
+                    v-model="formNew.perDataDisk"
+                    controls-position="right"
+                    :min="0"
+                    :max="1000"
+                    placeholder="请选择每块数据盘的容量"
+                  ></el-input-number>
+                  <div class="input_right">GB</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <div class="form_title">单个容器组规格</div>
+              </el-col>
+              <el-col :span="24">
+                <div class="form_item_title">CPU：</div>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item
+                  prop="perCPUs"
+                  class="form_item input_has_left_right"
+                >
+                  <div class="input_left">最高</div>
+                  <el-input-number
+                    v-model="formNew.perCPUs"
+                    controls-position="right"
+                    :min="0"
+                    :max="10"
+                    placeholder="CPU最高使用量"
+                  ></el-input-number>
+                  <div class="input_right">核</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item
+                  prop="perCPU"
+                  class="form_item input_has_left_right"
+                >
+                  <div class="input_left">默认</div>
+                  <el-input-number
+                    v-model="formNew.perCPU"
+                    controls-position="right"
+                    :min="0"
+                    :max="10"
+                    placeholder="CPU默认使用量"
+                  ></el-input-number>
+                  <div class="input_right">核</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <div class="form_item_title">内存：</div>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item
+                  prop="perRAMs"
+                  class="form_item input_has_left_right nobottom"
+                >
+                  <div class="input_left">最高</div>
+                  <el-input-number
+                    v-model="formNew.perRAMs"
+                    controls-position="right"
+                    :min="0"
+                    :max="10"
+                    placeholder="内存最高使用量"
+                  ></el-input-number>
+                  <div class="input_right">GB</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item
+                  prop="perRAM"
+                  class="form_item input_has_left_right nobottom"
+                >
+                  <div class="input_left">默认</div>
+                  <el-input-number
+                    v-model="formNew.perRAM"
+                    controls-position="right"
+                    :min="0"
+                    :max="10"
+                    placeholder="内存默认使用量"
+                  ></el-input-number>
+                  <div class="input_right">GB</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <div class="form_title">其他信息</div>
+              </el-col>
+              <el-col :span="16">
+                <el-form-item
+                  prop="appDuration"
+                  class="form_item input_has_right"
+                >
+                  <div class="form_item_title">申请时长：</div>
+                  <el-input-number
+                    v-model="formNew.appDuration"
+                    controls-position="right"
+                    :min="1"
+                    :max="1000"
+                  ></el-input-number>
+                  <!-- <el-select
+                        v-model="formNew.durType"
+                        class="input_right_select"
+                        placeholder="请选择申请时长"
+                      >
+                        <el-option
+                          v-for="item in durationOptions"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        ></el-option>
+                      </el-select> -->
+                  <div class="input_right">月</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item class="form_item">
+                  <div class="form_item_title">申请文件：</div>
+                  <info-list
+                    :list_arr="docTemplate"
+                    class="doc_template"
+                  ></info-list>
+                  <upload-file
+                    :multiple="false"
+                    :unique="false"
+                    :max="1"
+                    type="zip"
+                    :readOnly="false"
+                    :drag="true"
+                    @getNewList="getNewList"
+                    class="up_f"
+                  ></upload-file>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="调整现有工作区域" name="1">
+          <el-row :gutter="24">
+            <el-col :span="16">
+              <div class="select_title">选择要进行调整的工作区域：</div>
+              <div class="form_item">
+                <el-select
+                  v-model="workSpace"
+                  @change="getForm"
+                  placeholder="请选择"
+                >
+                  <el-option
+                    v-for="(item, index) in workSpaceOptions"
+                    :key="index"
+                    :label="item.namespace"
+                    :value="index"
+                  ></el-option>
+                </el-select>
+              </div>
+            </el-col>
+          </el-row>
+          <div v-show="formShow">
+            <el-form ref="formOld" :model="formOld" :rules="ruleOld">
+              <el-row :gutter="24">
+                <el-col :span="24">
+                  <div class="form_title">工作区域规格调整</div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="now_spec">当前规格：</div>
+                  <div class="now_spec_cards">
+                    <div
+                      class="now_spec_card"
+                      v-for="(item, index) in specArr"
+                      :key="index + 'spec'"
+                    >
+                      <img
+                        class="now_spec_card_img"
+                        :src="require('@/assets/imgs/' + item.src + '.png')"
+                      />
+                      <span class="now_spec_card_title">
+                        {{ item.title }}
+                      </span>
+                      <span class="now_spec_card_val">
+                        {{
+                          item.val +
+                          " " +
+                          (item.title == "CPU"
+                            ? "核"
+                            : item.title == "内存"
+                            ? "GB"
+                            : "个")
+                        }}
+                      </span>
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item prop="cpu" class="form_item input_has_right">
+                    <div class="form_item_title">申请CPU调整为：</div>
+                    <el-select
+                      v-model="formOld.cpu"
+                      placeholder="请选择CPU使用量"
+                    >
+                      <el-option
+                        v-for="item in optionsCPU"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      ></el-option>
+                    </el-select>
+                    <div class="input_right input_right_top">核</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item prop="memory" class="form_item input_has_right">
+                    <div class="form_item_title">申请内存调整为：</div>
+                    <el-select
+                      v-model="formOld.memory"
+                      placeholder="请选择内存使用量"
+                      @change="setContainerGroup(1)"
+                    >
+                      <el-option
+                        v-for="item in optionsRAM"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      ></el-option>
+                    </el-select>
+                    <div class="input_right input_right_top">GB</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item
+                    prop="containerGroup"
+                    class="form_item input_has_right"
+                  >
+                    <div class="form_item_title">申请容器组调整为：</div>
+                    <el-input-number
+                      v-model="formOld.containerGroup"
+                      controls-position="right"
+                      :min="0"
+                      :max="24"
+                      placeholder="取值范围[0，24]"
+                    ></el-input-number>
+                    <div class="input_right">个</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24" v-if="dataDiskList.length != 0">
+                  <el-form-item class="form_item input_has_right">
+                    <div class="form_item_title_1">调整数据盘：</div>
+                    <table-um
+                      ref="apply_service_state_table"
+                      :headers="dataDiskHeaders"
+                      :stripe="true"
+                      :datas="dataDiskList"
+                      @primary-del="delItem"
+                      :maxheight="260"
+                      size="small"
+                      class="disk__table"
+                    ></table-um>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item class="form_item nobottom">
+                    <div class="form_item_title">增加数据盘：</div>
+                    <!-- <el-select v-model="formOld.store_type" placeholder="请选择数据盘类型">
+                          <el-option
+                            v-for="item in options_store_type"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                          ></el-option>
+                        </el-select>-->
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item class="form_item input_has_right nobottom">
+                    <el-input-number
+                      v-model="formOld.dataDisk"
+                      controls-position="right"
+                      :min="0"
+                      :max="1000"
+                      placeholder="请选择增加数据盘的数量"
+                    ></el-input-number>
+                    <div class="input_right">块</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item class="form_item input_has_right nobottom">
+                    <el-input-number
+                      v-model="formOld.perDataDisk"
+                      controls-position="right"
+                      :min="0"
+                      :max="1000"
+                      placeholder="请选择每块数据盘的容量"
+                    ></el-input-number>
+                    <div class="input_right">GB</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <div class="form_title">单个容器组规格设定</div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="now_spec">当前规格：</div>
+                  <div class="now_spec_cards">
+                    <div
+                      class="now_rqz_card"
+                      v-for="(item, index) in rqzArr"
+                      :key="index + 'rqz'"
+                    >
+                      <img
+                        class="now_rqz_card_img"
+                        :src="require('@/assets/imgs/' + item.src + '.png')"
+                      />
+                      <span class="now_rqz_card_title">
+                        {{ item.title }}
+                      </span>
+                      <div class="now_rqz_card_val_div">
+                        <span class="now_rqz_card_val">
+                          最高&nbsp;{{ item.max }}&nbsp;{{
+                            item.title == "CPU" ? "核" : "GB"
+                          }}
+                          &nbsp;&nbsp;&nbsp;&nbsp;
+                        </span>
+                        <span class="now_rqz_card_val">
+                          默认&nbsp;{{ item.default }}&nbsp;{{
+                            item.title == "CPU" ? "核" : "GB"
+                          }}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="form_item_title">CPU：</div>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item
+                    prop="perCPUs"
+                    class="form_item input_has_left_right"
+                  >
+                    <div class="input_left">最高</div>
+                    <el-input-number
+                      v-model="formOld.perCPUs"
+                      controls-position="right"
+                      :min="0"
+                      :max="10"
+                      placeholder="请设置CPU最高使用量"
+                    ></el-input-number>
+                    <div class="input_right">核</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item
+                    prop="perCPU"
+                    class="form_item input_has_left_right"
+                  >
+                    <div class="input_left">默认</div>
+                    <el-input-number
+                      v-model="formOld.perCPU"
+                      controls-position="right"
+                      :min="0"
+                      :max="10"
+                      placeholder="请设置CPU默认使用量"
+                    ></el-input-number>
+                    <div class="input_right">核</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <div class="form_item_title">内存：</div>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item
+                    prop="perRAMs"
+                    class="form_item input_has_left_right nobottom"
+                  >
+                    <div class="input_left">最高</div>
+                    <el-input-number
+                      v-model="formOld.perRAMs"
+                      controls-position="right"
+                      :min="0"
+                      :max="10"
+                      placeholder="请设置内存最高使用量"
+                    ></el-input-number>
+                    <div class="input_right">GB</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item
+                    prop="perRAM"
+                    class="form_item input_has_left_right nobottom"
+                  >
+                    <div class="input_left">默认</div>
+                    <el-input-number
+                      v-model="formOld.perRAM"
+                      controls-position="right"
+                      :min="0"
+                      :max="10"
+                      placeholder="请设置内存默认使用量"
+                    ></el-input-number>
+                    <div class="input_right">GB</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <div class="form_title">其他信息</div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="now_spec">当前规格：</div>
+                  <div class="now_spec_card_time">
+                    <div>
+                      <img
+                        class="now_spec_card_time_img"
+                        :src="require('@/assets/imgs/ic_shijian.png')"
+                      />
+                      <span class="now_spec_card_time_title"
+                        >当前工作区域到期时间</span
+                      >
+                      <span class="now_spec_card_time_val">
+                        {{
+                          helper.dateStringTransform(paramsOld.cloud_end_time)
+                        }}
+                      </span>
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="16">
+                  <el-form-item class="form_item input_has_right">
+                    <div class="form_item_title">申请续期：</div>
+                    <el-input-number
+                      v-model="formOld.appDuration"
+                      controls-position="right"
+                      :min="1"
+                      :max="1000"
+                    ></el-input-number>
+                    <div class="input_right">月</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="22">
+                  <el-form-item class="form_item">
+                    <div class="form_item_title">申请文件：</div>
+                    <info-list
+                      :list_arr="docTemplate"
+                      class="doc_template"
+                    ></info-list>
+                    <upload-file
+                      :multiple="false"
+                      :unique="false"
+                      :max="1"
+                      type="zip"
+                      :readOnly="false"
+                      :drag="true"
+                      @getNewList="getNewListOld"
+                      class="up_f"
+                    ></upload-file>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </block-radius>
+    <block-radius v-if="!(activeName == 1 && !formShow)">
+      <div class="btn_footer fyzj_item">
+        <div class="fyzj">
+          <p class="fyzj_p">
+            <span v-if="getSumCoin > user_info.account_balance" class="yebz">
+              余额不足，请联系超级管理员进行充值
+            </span>
+            费用总计：<span class="fyzj_span">
+              {{ getSumCoin }}
+            </span>
+            <span class="fyzj_qian">金币</span>
+          </p>
+          <p class="ckfymx">
+            <span @click="dialogFymx = true" class="ckfymx_a">
+              查看费用明细
+            </span>
+            <span class="ckfymx_qian"
+              >账户余额：{{ user_info.account_balance }} 金币</span
+            >
+          </p>
+        </div>
+        <el-button
+          :class="
+            getSumCoin <= user_info.account_balance ? 'submit' : 'nosubmit'
+          "
+          :disabled="getSumCoin > user_info.account_balance"
+          @click="submitApp"
+        >
+          提交申请
+        </el-button>
+      </div>
+    </block-radius>
+    <el-dialog
+      title="申请信息确认"
+      :visible.sync="dialogVisible"
+      width="580px"
+      class="cloud_dia"
+    >
+      <el-row>
+        <el-col :span="24">
+          <span class="dia_item_title">申请组织：</span>
+          <span class="dia_item_val">{{ diaForm.department_name }}</span>
+        </el-col>
+        <el-col :span="10" v-if="diaForm.link_man">
+          <span class="dia_item_title">组织联系人：</span>
+          <span class="dia_item_val">{{ diaForm.link_man }}</span>
+        </el-col>
+        <el-col :span="10" v-if="diaForm.phone">
+          <span class="dia_item_title">联系电话：</span>
+          <span class="dia_item_val">{{ diaForm.phone }}</span>
+        </el-col>
+        <el-col :span="10">
+          <span class="dia_item_title">申请类型：</span>
+          <span class="dia_item_val">
+            {{ activeName == 0 ? "新资源申请" : "已有资源升级" }}
+          </span>
+        </el-col>
+        <el-col :span="10" v-if="activeName == '1'">
+          <span class="dia_item_title">工作区域名称：</span>
+          <span class="dia_item_val">{{ diaForm.namespace }}</span>
+        </el-col>
+        <el-col :span="14" v-if="activeName == '0' && diaForm.apply_file_name">
+          <span class="dia_item_title">上传申请文件：</span>
+          <span class="dia_item_val">{{ diaForm.apply_file_name }}</span>
+        </el-col>
+        <el-col
+          :span="24"
+          v-else-if="activeName == '1' && diaForm.apply_file_name"
+        >
+          <span class="dia_item_title">上传申请文件：</span>
+          <span class="dia_item_val">{{ diaForm.apply_file_name }}</span>
+        </el-col>
+        <el-col :span="24">
+          <div class="dia_block" v-if="activeName == 0">
+            <span class="dia_item_all_title">基本信息：</span>
+            <div class="dia_block_item">
+              <div class="dia_block_item_in">
+                <span class="dia_block_item_title">工作区域名称：</span>
+                <span class="dia_block_item_val">{{ diaForm.namespace }}</span>
+              </div>
+              <div class="dia_block_item_in">
+                <span class="dia_block_item_title">中文名称：</span>
+                <span class="dia_block_item_val">{{ diaForm.workplace }}</span>
+              </div>
+              <div class="dia_block_item_in">
+                <span class="dia_block_item_title">描述信息：</span>
+                <span class="dia_block_item_val">
+                  {{ diaForm.workplacedesc }}
+                </span>
+              </div>
+            </div>
+            <span class="dia_item_all_title">工作区域申请规格：</span>
+            <div class="dia_block_item">
+              <div class="dia_block_item_in">
+                <span class="dia_block_item_title">CPU：</span>
+                <span class="dia_block_item_val">{{ diaForm.cpu }}</span>
+              </div>
+              <div class="dia_block_item_in">
+                <span class="dia_block_item_title">内存：</span>
+                <span class="dia_block_item_val">{{ diaForm.memory }}</span>
+              </div>
+              <div class="dia_block_item_in">
+                <span class="dia_block_item_title">容器组：</span>
+                <span class="dia_block_item_val"
+                  >{{ diaForm.containerGroup }}个</span
+                >
+              </div>
+              <div
+                class="dia_block_item_in"
+                v-if="
+                  diaForm.dataDisk &&
+                  diaForm.perDataDisk &&
+                  Number(diaForm.dataDisk) != 0 &&
+                  Number(diaForm.perDataDisk) != 0
+                "
+              >
+                <span class="dia_block_item_title">数据盘：</span>
+                <span class="dia_block_item_val">
+                  {{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB
+                </span>
+              </div>
+              <!-- <div class="dia_block_item_in" v-if="diaForm.dataDisk != 0">
+                <span class="dia_block_item_title">数据盘类型：</span>
+                <span class="dia_block_item_val">{{ diaForm.store_type }}</span>
+              </div>-->
+            </div>
+            <span class="dia_item_all_title">单个容器组规格：</span>
+            <div class="dia_block_item">
+              <div class="dia_block_item_in">
+                <span class="dia_block_item_title">CPU：</span>
+                <p class="dia_block_item_val">
+                  <span class="val_has_2"
+                    >最高&nbsp;{{ diaForm.perCPUs }}核</span
+                  >
+                  <span class="val_has_2"
+                    >默认&nbsp;{{ diaForm.perCPU }}核</span
+                  >
+                </p>
+              </div>
+              <div class="dia_block_item_in">
+                <span class="dia_block_item_title">内存：</span>
+                <p class="dia_block_item_val">
+                  <span class="val_has_2"
+                    >最高&nbsp;{{ diaForm.perRAMs }}GB</span
+                  >
+                  <span class="val_has_2"
+                    >默认&nbsp;{{ diaForm.perRAM }}GB</span
+                  >
+                </p>
+              </div>
+            </div>
+            <span class="dia_item_all_title">申请时长：</span>
+            <div class="dia_block_item">
+              <div class="dia_block_item_in">
+                <span class="dia_block_item_title">申请时长</span>
+                <span class="dia_block_item_val">
+                  {{ diaForm.appDuration
+                  }}{{ diaForm.durType == 1 ? "个月" : "年" }}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div v-else>
+            <span class="dia_item_title margin_top_10">原规格：</span>
+            <div class="dia_block">
+              <span class="dia_item_all_title">工作区域：</span>
+              <div class="dia_block_item">
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">CPU：</span>
+                  <span class="dia_block_item_val">{{ paramsOld.cpu }}核</span>
+                </div>
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">内存：</span>
+                  <span class="dia_block_item_val"
+                    >{{ paramsOld.memory }}GB</span
+                  >
+                </div>
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">容器组：</span>
+                  <span class="dia_block_item_val"
+                    >{{ paramsOld.containers }}个</span
+                  >
+                </div>
+              </div>
+              <span class="dia_item_all_title">单个容器组规格：</span>
+              <div class="dia_block_item">
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">CPU：</span>
+                  <p class="dia_block_item_val">
+                    <span class="val_has_2"
+                      >最高&nbsp;{{ paramsOld.one_cpu_max }}核</span
+                    >
+                    <span class="val_has_2"
+                      >默认&nbsp;{{ paramsOld.one_cpu_min }}核</span
+                    >
+                  </p>
+                </div>
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">内存：</span>
+                  <p class="dia_block_item_val">
+                    <span class="val_has_2"
+                      >最高&nbsp;{{ paramsOld.one_memory_max }}GB</span
+                    >
+                    <span class="val_has_2"
+                      >默认&nbsp;{{ paramsOld.one_memory_min }}GB</span
+                    >
+                  </p>
+                </div>
+              </div>
+              <span class="dia_item_all_title">申请时长：</span>
+              <div class="dia_block_item">
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">到期时间：</span>
+                  <span class="dia_block_item_val">
+                    {{ helper.dateStringTransform(paramsOld.cloud_end_time) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <span class="dia_item_title margin_top_10">调整至：</span>
+            <div class="dia_block">
+              <span class="dia_item_all_title">工作区域：</span>
+              <div class="dia_block_item">
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">CPU：</span>
+                  <span class="dia_block_item_val">{{ diaForm.cpu }}核</span>
+                </div>
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">内存：</span>
+                  <span class="dia_block_item_val">{{ diaForm.memory }}GB</span>
+                </div>
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">容器组：</span>
+                  <span class="dia_block_item_val"
+                    >{{ diaForm.containerGroup }}个</span
+                  >
+                </div>
+                <div
+                  class="dia_block_item_in"
+                  v-if="
+                    diaForm.dataDisk &&
+                    diaForm.perDataDisk &&
+                    Number(diaForm.dataDisk) != 0 &&
+                    Number(diaForm.perDataDisk) != 0
+                  "
+                >
+                  <span class="dia_block_item_title">新增数据盘：</span>
+                  <span class="dia_block_item_val">
+                    {{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB
+                  </span>
+                </div>
+                <div
+                  class="dia_block_item_in"
+                  v-if="delDataDiskList.length != 0"
+                >
+                  <span class="dia_block_item_title">删除数据盘：</span>
+                  <span class="dia_block_item_val">
+                    {{
+                      delDataDiskList
+                        .map((item) => {
+                          return item.name;
+                        })
+                        .join("、")
+                    }}
+                  </span>
+                </div>
+              </div>
+              <span class="dia_item_all_title">单个容器组规格：</span>
+              <div class="dia_block_item">
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">CPU：</span>
+                  <p class="dia_block_item_val">
+                    <span class="val_has_2">
+                      最高&nbsp;{{ diaForm.perCPUs }}核
+                    </span>
+                    <span class="val_has_2">
+                      默认&nbsp;{{ diaForm.perCPU }}核
+                    </span>
+                  </p>
+                </div>
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">内存：</span>
+                  <p class="dia_block_item_val">
+                    <span class="val_has_2">
+                      最高&nbsp;{{ diaForm.perRAMs }}GB
+                    </span>
+                    <span class="val_has_2">
+                      默认&nbsp;{{ diaForm.perRAM }}GB
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <span class="dia_item_all_title">申请续期：</span>
+              <div class="dia_block_item">
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">是否续期：</span>
+                  <span class="dia_block_item_val">
+                    {{
+                      diaForm.appDuration && diaForm.appDuration != 0
+                        ? "是"
+                        : "否"
+                    }}
+                  </span>
+                </div>
+                <div
+                  class="dia_block_item_in"
+                  v-if="diaForm.appDuration && diaForm.appDuration != 0"
+                >
+                  <span class="dia_block_item_title">续期时长：</span>
+                  <span class="dia_block_item_val">
+                    {{ diaForm.appDuration }}
+                    {{ diaForm.durType == 1 ? "个月" : "年" }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <div class="fyzj_dia">
+        <div class="fyzj_dia_init">
+          <p v-if="activeName == '1'" class="fyzj_2">
+            升级费用：<span class="fyzj_2_num">{{ amounts_payable }} 金币</span>
+          </p>
+          <!-- <p v-if="activeName == '1'" class="fyzj_2">
+            原规格抵扣费用：<span class="fyzj_2_num">2000 金币</span>
+          </p> -->
+          <div class="fyzj_1">
+            费用总计：
+            <p>
+              <span class="fyzj_1_num"> {{ getSumCoin }} </span
+              ><span class="fyzj_1_jb">金币</span>
+            </p>
+          </div>
+          <p class="fyzj_2">
+            账户余额：<span class="fyzj_2_num"
+              >{{ user_info.account_balance }} 金币</span
+            >
+          </p>
+        </div>
+        <div class="clear_xxx"></div>
+      </div>
+      <div class="btn_footer">
+        <el-button class="cancel" @click="cancel">取消</el-button>
+        <el-button class="submit1" @click="determineSubmit">确定提交</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      title="费用明细"
+      :visible.sync="dialogFymx"
+      width="580px"
+      class="cloud_dia"
+    >
+      <div class="fymx_ts">
+        <i class="el-icon-warning-outline"></i>
+        <p>
+          计费说明：云资源服务依据用户选取的CPU、内存、数据盘个数及大小进行分级计费，具体计费规
+          则请线下联系技术支持人员咨询。
+        </p>
+      </div>
+      <div v-if="activeName == '1'" class="sjfy_title">升级费用</div>
+      <table-um
+        ref="apply_service_state_table"
+        :headers="jifeiHeader"
+        :stripe="true"
+        :datas="jifeiList1"
+        :maxheight="260"
+      ></table-um>
+      <!-- <div v-if="activeName == '1'" class="sjfy_title">
+        原规格抵扣费用
+        <el-tooltip
+          class="tool_item"
+          effect="dark"
+          content="未用完的按剩余时间及原购买规格价格核算后优先抵扣本订单金额，超出部分退还至用户账户"
+          placement="top"
+          offset="5"
+        >
+          <img class="tool_img" src="@/assets/imgs/tool_ic_tips.png" />
+        </el-tooltip>
+      </div>
+      <table-um
+        v-if="activeName == '1'"
+        ref="apply_service_state_table"
+        :headers="jifeiHeader2"
+        :stripe="true"
+        :datas="jifeiList2"
+        :maxheight="260"
+      ></table-um> -->
+    </el-dialog>
+    <ApassDialog
+      ref="dialog"
+      msg="确认删除该数据盘吗？"
+      :submit="dialogSubmit"
+    ></ApassDialog>
+  </div>
+</template>
+
+<script>
+import BlockRadius from "@/components/general/block-radius";
+import UploadFile from "@/components/general/upload_file";
+import TableUm from "@/components/table/table-um";
+import InfoList from "@/components/infoList";
+import ApassDialog from "@/components/apass-dialog";
+import helper from "@/services/helper.js";
+
+export default {
+  components: {
+    BlockRadius,
+    UploadFile,
+    TableUm,
+    InfoList,
+    ApassDialog,
+  },
+  props: {
+    name: { type: String, default: "" },
+  },
+  computed: {
+    getSumCoin() {
+      let sumCM = 0;
+      let sumDisk = 0;
+      let a_deductions = 0;
+      if (this.activeName == "0") {
+        a_deductions = this.deductions;
+        if (this.cpu_memory && this.cpu_memory.length != 0) {
+          if (this.formNew.cpu == "8") {
+            if (this.formNew.memory == "16") {
+              let priceObj = this.cpu_memory.find((item) => {
+                return item.cpu == 8 && item.memory == 16;
+              });
+              this.eci_single_money = Number(priceObj.price);
+              sumCM += Number(priceObj.price);
+            } else if (this.formNew.memory == "32") {
+              let priceObj = this.cpu_memory.find((item) => {
+                return item.cpu == 8 && item.memory == 32;
+              });
+              this.eci_single_money = Number(priceObj.price);
+              sumCM += Number(priceObj.price);
+            }
+          } else if (this.formNew.cpu == "16") {
+            if (this.formNew.memory == "32") {
+              let priceObj = this.cpu_memory.find((item) => {
+                return item.cpu == 16 && item.memory == 32;
+              });
+              this.eci_single_money = Number(priceObj.price);
+              sumCM += Number(priceObj.price);
+            } else if (this.formNew.memory == "64") {
+              let priceObj = this.cpu_memory.find((item) => {
+                return item.cpu == 16 && item.memory == 64;
+              });
+              this.eci_single_money = Number(priceObj.price);
+              sumCM += Number(priceObj.price);
+            }
+          }
+        }
+        sumCM = sumCM * Number(this.formNew.appDuration);
+        if (
+          this.formNew.dataDisk >= 1 &&
+          this.formNew.perDataDisk >= 1 &&
+          this.formNew.appDuration >= 1
+        ) {
+          if (this.hard_disk && this.hard_disk.length != 0) {
+            this.disk_single_money = Number(this.hard_disk[0].price);
+            sumDisk +=
+              Number(this.formNew.dataDisk) *
+              Number(this.formNew.perDataDisk) *
+              Number(this.formNew.appDuration) *
+              Number(this.hard_disk[0].price);
+          }
+          this.jifeiList1[2] = {
+            name: "数据盘",
+            num: `${this.formNew.dataDisk}个数据盘，每个数据盘${this.formNew.perDataDisk}GB`,
+            time: `${this.formNew.appDuration}个月`,
+            sum: `${sumDisk}金币`,
+          };
+        } else {
+          this.jifeiList1.splice(2);
+        }
+        this.jifeiList1[0].num = `${
+          this.formNew.cpu >= 1 ? this.formNew.cpu : 0
+        }核+${this.formNew.memory >= 1 ? this.formNew.memory : 0}G`;
+        this.jifeiList1[0].time = `${
+          this.formNew.appDuration >= 1 ? this.formNew.appDuration : 0
+        }个月`;
+        this.jifeiList1[0].sum = `${sumCM}金币`;
+        this.jifeiList1[1].num = `${
+          this.formNew.containerGroup >= 1 ? this.formNew.containerGroup : 0
+        }个`;
+        this.jifeiList1[1].time = `${
+          this.formNew.appDuration >= 1 ? this.formNew.appDuration : 0
+        }个月`;
+      } else if (this.activeName == "1") {
+        a_deductions = this.deductions;
+        if (this.cpu_memory && this.cpu_memory.length != 0) {
+          if (this.formOld.cpu == "8") {
+            if (this.formOld.memory == "16") {
+              let priceObj = this.cpu_memory.find((item) => {
+                return item.cpu == 8 && item.memory == 16;
+              });
+              this.eci_single_money = Number(priceObj.price);
+              sumCM += Number(priceObj.price);
+            } else if (this.formOld.memory == "32") {
+              let priceObj = this.cpu_memory.find((item) => {
+                return item.cpu == 8 && item.memory == 32;
+              });
+              this.eci_single_money = Number(priceObj.price);
+              sumCM += Number(priceObj.price);
+            }
+          } else if (this.formOld.cpu == "16") {
+            if (this.formOld.memory == "32") {
+              let priceObj = this.cpu_memory.find((item) => {
+                return item.cpu == 16 && item.memory == 32;
+              });
+              this.eci_single_money = Number(priceObj.price);
+              sumCM += Number(priceObj.price);
+            } else if (this.formOld.memory == "64") {
+              let priceObj = this.cpu_memory.find((item) => {
+                return item.cpu == 16 && item.memory == 64;
+              });
+              this.eci_single_money = Number(priceObj.price);
+              sumCM += Number(priceObj.price);
+            }
+          }
+        }
+        sumCM = sumCM * Number(this.formOld.appDuration);
+        if (
+          this.formOld.dataDisk >= 1 &&
+          this.formOld.perDataDisk >= 1 &&
+          this.formOld.appDuration >= 1
+        ) {
+          if (this.hard_disk && this.hard_disk.length != 0) {
+            this.disk_single_money = Number(this.hard_disk[0].price);
+            sumDisk +=
+              Number(this.formOld.dataDisk) *
+              Number(this.formOld.perDataDisk) *
+              Number(this.formOld.appDuration) *
+              Number(this.hard_disk[0].price);
+          }
+          this.jifeiList1[2] = {
+            name: "数据盘",
+            num: `${this.formOld.dataDisk}个数据盘，每个数据盘${this.formOld.perDataDisk}GB`,
+            time: `${this.formOld.appDuration}个月`,
+            sum: `${sumDisk}金币`,
+          };
+        } else {
+          this.jifeiList1.splice(2);
+        }
+        this.jifeiList1[0].num = `${
+          this.formOld.cpu >= 1 ? this.formOld.cpu : 0
+        }核+${this.formOld.memory >= 1 ? this.formOld.memory : 0}G`;
+        this.jifeiList1[0].time = `${
+          this.formOld.appDuration >= 1 ? this.formOld.appDuration : 0
+        }个月`;
+        this.jifeiList1[0].sum = `${sumCM}金币`;
+        this.jifeiList1[1].num = `${
+          this.formOld.containerGroup >= 1 ? this.formOld.containerGroup : 0
+        }个`;
+        this.jifeiList1[1].time = `${
+          this.formOld.appDuration >= 1 ? this.formOld.appDuration : 0
+        }个月`;
+      }
+      // console.log(sumCM, sumDisk)
+      this.amounts_payable = Number(
+        (Number(sumCM) + Number(sumDisk)).toFixed(2)
+      );
+      // this.total_money = sumCM + sumDisk - a_deductions;
+      return this.amounts_payable;
+    },
+  },
+  data() {
+    var checkName = (rule, value, callback) => {
+      let self = this;
+      let reg = new RegExp(/^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/);
+      if (value.length > 63) {
+        callback(new Error("命名空间最长不超过63位"));
+      } else if (!reg.test(value)) {
+        callback(new Error("小写字母或数字开头,可以由小写字母、数字、- 组成"));
+      } else {
+        self.$api.serviceShop
+          .checkNameSpaceCouldUse({ id: value })
+          .then(({ data }) => {
+            if (data.success === 1) {
+              if (data.data === 1) {
+                callback();
+              } else if (data.data === -1) {
+                callback(new Error("命名空间名称已存在"));
+              }
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+            callback(new Error("命名空间名称验证失败"));
+          });
+      }
+    };
+    return {
+      total_money: 0,
+      disk_single_money: 0,
+      eci_single_money: 0,
+      amounts_payable: 0,
+      deductions: 0,
+      helper,
+      form: {
+        department_name: "",
+        phone: "",
+        link_man: "",
+      },
+      ruleBasis: {
+        link_man: [
+          { required: true, message: "请输入部门联系人", trigger: "blur" },
+          { max: 6, message: "长度应小于6个字符", trigger: "blur" },
+        ],
+        phone: [
+          { required: true, message: "请输入手机号码", trigger: "blur" },
+          {
+            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+            message: "请输入正确的手机号码",
+          },
+        ],
+      },
+      activeName: "0",
+      formNew: {
+        namespace: "",
+        workplace: "",
+        workplacedesc: "",
+        cpu: "",
+        memory: "",
+        containerGroup: undefined,
+        dataDisk: undefined,
+        perDataDisk: undefined,
+        perCPUs: undefined,
+        perCPU: undefined,
+        perRAMs: undefined,
+        perRAM: undefined,
+        appDuration: 1,
+        durType: 1,
+        apply_file: "",
+        apply_file_name: "",
+        store_type: "nfs-client",
+      },
+      ruleNew: {
+        namespace: [
+          { required: true, message: "请输入工作区域名称", trigger: "blur" },
+          { max: 16, message: "长度应小于16个字符", trigger: "blur" },
+          { validator: checkName, trigger: "blur" },
+        ],
+        workplace: [
+          { required: true, message: "请输入中文名称", trigger: "blur" },
+          { max: 16, message: "长度应小于16个字符", trigger: "blur" },
+        ],
+        workplacedesc: [
+          { required: true, message: "请输入描述信息", trigger: "blur" },
+          { max: 100, message: "长度应小于100个字符", trigger: "blur" },
+        ],
+        cpu: [
+          { required: true, message: "请选择CPU使用量", trigger: "change" },
+        ],
+        memory: [
+          { required: true, message: "请选择内存使用量", trigger: "change" },
+        ],
+        containerGroup: [
+          { required: true, message: "请输入容器组规格", trigger: "blur" },
+        ],
+        perCPUs: [
+          { required: true, message: "请输入CPU最大使用量", trigger: "blur" },
+        ],
+        perCPU: [
+          { required: true, message: "请输入CPU默认使用量", trigger: "blur" },
+        ],
+        perRAMs: [
+          { required: true, message: "请输入内存最大使用量", trigger: "blur" },
+        ],
+        perRAM: [
+          { required: true, message: "请输入内存默认使用量", trigger: "blur" },
+        ],
+        appDuration: [
+          { required: true, message: "请输入申请时长", trigger: "blur" },
+        ],
+      },
+      durationOptions: [
+        { value: 1, label: "月" },
+        { value: 2, label: "年" },
+      ],
+      workSpace: "",
+      workSpaceId: "",
+      workSpaceOptions: [],
+      optionsCPU: [
+        { value: "8", label: "8" },
+        { value: "16", label: "16" },
+      ],
+      optionsRAM: [],
+      options_store_type: [
+        { value: "nfs-client", label: "nfs-client" },
+        { value: "rook-ceph-block", label: "rook-ceph-block" },
+      ],
+      formShow: false,
+      specArr: [
+        { title: "CPU", val: "0", src: "ic_CPU" },
+        { title: "内存", val: "0", src: "ic_neicun" },
+        { title: "容器", val: "0", src: "ic_rongqi" },
+      ],
+      rqzArr: [
+        { title: "CPU", max: "4", default: "2", src: "ic_CPU" },
+        { title: "内存", max: "4", default: "2", src: "ic_neicun" },
+      ],
+      docTemplate: [
+        {
+          title: "",
+          info: "工作区域申请文件标准模板.xlsx",
+          url: "static/工作区域申请文件模板.xlsx",
+          type: "down",
+        },
+      ],
+      formOld: {
+        cpu: "",
+        memory: "",
+        containerGroup: undefined,
+        dataDisk: undefined,
+        perDataDisk: undefined,
+        perCPUs: undefined,
+        perCPU: undefined,
+        perRAMs: undefined,
+        perRAM: undefined,
+        appDuration: 1,
+        durType: 1,
+        apply_file: "",
+        apply_file_name: "",
+        store_type: "nfs-client",
+      },
+      paramsOld: {},
+      ruleOld: {
+        namespace: [
+          { required: true, message: "请输入工作区域名称", trigger: "blur" },
+        ],
+        workplace: [
+          { required: true, message: "请输入中文名称", trigger: "blur" },
+        ],
+        workplacedesc: [
+          { required: true, message: "请输入描述信息", trigger: "blur" },
+        ],
+        cpu: [
+          { required: true, message: "请选择CPU使用量", trigger: "change" },
+        ],
+        memory: [
+          { required: true, message: "请选择内存使用量", trigger: "change" },
+        ],
+        containerGroup: [
+          { required: true, message: "请输入容器组规格", trigger: "blur" },
+        ],
+        perCPUs: [
+          { required: true, message: "请输入CPU最大使用量", trigger: "blur" },
+        ],
+        perCPU: [
+          { required: true, message: "请输入CPU默认使用量", trigger: "blur" },
+        ],
+        perRAMs: [
+          { required: true, message: "请输入内存最大使用量", trigger: "blur" },
+        ],
+        perRAM: [
+          { required: true, message: "请输入内存默认使用量", trigger: "blur" },
+        ],
+      },
+      dialogVisible: false,
+      diaForm: {},
+      dataDiskHeaders: [
+        {
+          label: "磁盘名称",
+          prop: "name",
+          align: "center",
+        },
+        {
+          label: "数据盘容量",
+          prop: "disk_cap",
+          align: "center",
+        },
+        {
+          label: "部署的应用",
+          prop: "app_name",
+          align: "center",
+        },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          btnList: [
+            {
+              type: "primary-del",
+              label: "删除",
+            },
+          ],
+        },
+      ],
+      dataDiskList: [],
+      delDataDiskList: [],
+      del_item: {},
+      dialogFymx: false,
+      jifeiHeader: [
+        {
+          label: "名称",
+          prop: "name",
+          align: "center",
+        },
+        {
+          label: "数量规格",
+          prop: "num",
+          align: "center",
+        },
+        {
+          label: "购买时长",
+          prop: "time",
+          align: "center",
+        },
+        {
+          label: "小计",
+          prop: "sum",
+          align: "center",
+        },
+      ],
+      jifeiHeader2: [
+        {
+          label: "名称",
+          prop: "name",
+          align: "center",
+        },
+        {
+          label: "数量规格",
+          prop: "num",
+          align: "center",
+        },
+        {
+          label: "购买时长",
+          prop: "time",
+          align: "center",
+        },
+        {
+          label: "小计",
+          prop: "sum",
+          align: "center",
+          type: "html",
+          getHtml: (str) => {
+            return `<span style="color: #e15260">-${str.sum}</span>`;
+          },
+        },
+      ],
+      jifeiList1: [
+        { name: "CPU+内存", num: "0核+0G", time: "0个月", sum: "0金币" },
+        { name: "容器组", num: "0个", time: "0个月", sum: "-" },
+        // { name: "数据盘", num: "0个数据盘，每个数据盘0GB", time: "0个月", sum: "2000金币" },
+      ],
+      jifeiList2: [
+        { name: "CPU+内存", num: "0核+0G", time: "0个月", sum: "0金币" },
+        { name: "容器组", num: "0个", time: "0个月", sum: "-" },
+        {
+          name: "数据盘",
+          num: "0个数据盘，每个数据盘0GB",
+          time: "0个月",
+          sum: "金币",
+        },
+      ],
+      cpu_memory: [],
+      hard_disk: [],
+      user_info: {},
+    };
+  },
+  mounted() {
+    this.getUser();
+    this.getNameSpaceList();
+    this.getSpecifications();
+    this.getUserCoins();
+  },
+  methods: {
+    getUserCoins() {
+      this.$api.user.getUserCoins().then((response) => {
+        if (response.data.success == 1) {
+          this.user_info = response.data.data;
+        }
+      });
+    },
+    getQueryId() {
+      if (this.$route.query.namespace && this.$route.query.namespace != "") {
+        this.activeName = "1";
+        let index = this.workSpaceOptions.findIndex((item) => {
+          return item.namespace == this.$route.query.namespace;
+        });
+        if (index != -1) {
+          let paramsOld = this.workSpaceOptions[index];
+          this.workSpace = index;
+          this.workSpaceId = paramsOld.Id;
+          this.paramsOld = paramsOld;
+          this.formOld.namespace = paramsOld.namespace;
+          this.formOld.workplace = paramsOld.workplace;
+          this.formOld.workplacedesc = paramsOld.workplacedesc;
+          this.formOld.cpu = paramsOld.cpu;
+          this.formOld.memory = paramsOld.memory;
+          this.formOld.containerGroup = paramsOld.containers;
+          this.specArr[0].val = paramsOld.cpu;
+          this.specArr[1].val = paramsOld.memory;
+          this.specArr[2].val = paramsOld.containers;
+          this.formOld.dataDisk = "";
+          this.formOld.perDataDisk = "";
+          this.formOld.perCPUs = paramsOld.one_cpu_max;
+          this.formOld.perCPU = paramsOld.one_cpu_min;
+          this.formOld.perRAMs = paramsOld.one_memory_max;
+          this.formOld.perRAM = paramsOld.one_memory_min;
+          this.rqzArr[0].max = paramsOld.one_cpu_max;
+          this.rqzArr[0].default = paramsOld.one_cpu_min;
+          this.rqzArr[1].max = paramsOld.one_memory_max;
+          this.rqzArr[1].default = paramsOld.one_memory_min;
+          this.formOld.store_type = paramsOld.store_type;
+          this.dataDiskList = paramsOld.disk_list || [];
+          this.dataDiskList.forEach((item, index) => {
+            item.name = `磁盘${index + 1}`;
+          });
+          this.form.link_man = paramsOld.apply_connect_username;
+          this.form.phone = paramsOld.apply_connect_mobile;
+          this.formShow = true;
+        }
+      }
+    },
+    tabClick() {},
+    getNewList(val) {
+      this.formNew.apply_file_name = val[0].name;
+      this.formNew.apply_file = val[0].url;
+    },
+    getNewListOld(val) {
+      this.formOld.apply_file_name = val[0].name;
+      this.formOld.apply_file = val[0].url;
+    },
+    handleChange() {},
+    getSpecifications() {
+      this.$api.serviceShop.getSpecifications().then((response) => {
+        if (response.data.success == 1) {
+          this.cpu_memory = response.data.data.cpu_memory;
+          this.hard_disk = response.data.data.hard_disk;
+        } else {
+          this.$message({
+            message: "获取资源规格失败，请刷新网页",
+            type: "error",
+          });
+        }
+      });
+    },
+    getForm(val) {
+      if (val !== "") {
+        let paramsOld = this.workSpaceOptions[val];
+        this.workSpaceId = paramsOld.Id;
+        this.paramsOld = paramsOld;
+        this.formOld.namespace = paramsOld.namespace;
+        this.formOld.workplace = paramsOld.workplace;
+        this.formOld.workplacedesc = paramsOld.workplacedesc;
+        this.formOld.cpu = paramsOld.cpu;
+        this.formOld.memory = paramsOld.memory;
+        this.formOld.containerGroup = paramsOld.containers;
+        this.specArr[0].val = paramsOld.cpu;
+        this.specArr[1].val = paramsOld.memory;
+        this.specArr[2].val = paramsOld.containers;
+        this.formOld.dataDisk = "";
+        this.formOld.perDataDisk = "";
+        this.formOld.perCPUs = paramsOld.one_cpu_max;
+        this.formOld.perCPU = paramsOld.one_cpu_min;
+        this.formOld.perRAMs = paramsOld.one_memory_max;
+        this.formOld.perRAM = paramsOld.one_memory_min;
+        this.rqzArr[0].max = paramsOld.one_cpu_max;
+        this.rqzArr[0].default = paramsOld.one_cpu_min;
+        this.rqzArr[1].max = paramsOld.one_memory_max;
+        this.rqzArr[1].default = paramsOld.one_memory_min;
+        this.formOld.store_type = paramsOld.store_type;
+        this.dataDiskList = paramsOld.disk_list || [];
+        this.dataDiskList.forEach((item, index) => {
+          item.name = `磁盘${index + 1}`;
+        });
+        this.form.link_man = paramsOld.apply_connect_username;
+        this.form.phone = paramsOld.apply_connect_mobile;
+        this.formShow = true;
+        this.jifeiList2 = [
+          {
+            name: "CPU+内存",
+            num: `${this.formOld.cpu}核+${this.formOld.memory}G"`,
+            time: "0个月",
+            sum: "0金币",
+          },
+          {
+            name: "容器组",
+            num: `${this.formOld.containerGroup}个`,
+            time: "0个月",
+            sum: "",
+          },
+          {
+            name: "数据盘",
+            num: `${this.dataDiskList.length}个数据盘，共计${this.dataDiskList.length}GB"`,
+            time: "0个月",
+            sum: "2000金币",
+          },
+        ];
+      } else {
+        this.formShow = false;
+      }
+    },
+    submitApp() {
+      let formParams = {};
+      if (this.activeName == 0) {
+        this.$refs["formNew"].validate((valid) => {
+          if (valid) {
+            formParams = this.formNew;
+            this.dialogVisible = true;
+            this.diaForm = Object.assign(formParams, this.form);
+          } else {
+            console.log("error submit!!");
+            return false;
+          }
+        });
+      } else if (this.activeName == 1) {
+        this.$refs["formOld"].validate((valid) => {
+          if (valid) {
+            formParams = this.formOld;
+            this.dialogVisible = true;
+            this.diaForm = Object.assign(formParams, this.form);
+          } else {
+            console.log("error submit!!");
+            return false;
+          }
+        });
+      }
+    },
+    checkNamespace(namespace, cb) {
+      this.$api.serviceShop
+        .checkNameSpaceCouldUse({ id: namespace })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            if (data.data === 1) {
+              typeof cb === "function" && cb();
+            } else if (data.data === -1) {
+              this.$message({
+                message: `命名空间名称已存在`,
+                type: "error",
+              });
+            }
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message({
+            message: `命名空间名称验证失败`,
+            type: "error",
+          });
+        });
+    },
+    determineSubmit() {
+      if (this.activeName == 0) {
+        this.checkNamespace(this.formNew.namespace, () => {
+          let query = {
+            resource_info: {
+              namespace: this.formNew.namespace,
+              workplace: this.formNew.workplace,
+              workplacedesc: this.formNew.workplacedesc,
+            },
+            resource_apply: {
+              apply_file: this.formNew.apply_file,
+              cpu: Number(this.formNew.cpu),
+              duration: this.formNew.appDuration,
+              duration_unit: Number(this.formNew.durType),
+              apply_connect_username: this.form.link_man,
+              apply_connect_mobile: this.form.phone,
+              memory: Number(this.formNew.memory),
+              containers: this.formNew.containerGroup,
+              one_cpu_min: this.formNew.perCPU ? this.formNew.perCPU : 0,
+              one_cpu_max: this.formNew.perCPUs ? this.formNew.perCPUs : 0,
+              one_memory_min: this.formNew.perRAM ? this.formNew.perRAM : 0,
+              one_memory_max: this.formNew.perRAMs ? this.formNew.perRAMs : 0,
+            },
+            disks: [
+              {
+                disk_num: this.formNew.dataDisk ? this.formNew.dataDisk : 0,
+                disk_cap: this.formNew.perDataDisk
+                  ? this.formNew.perDataDisk
+                  : 0,
+                store_type: "nfs-client",
+              },
+            ],
+            payment: {
+              // total_money: this.total_money,
+              disk_single_money: String(this.disk_single_money),
+              eci_single_money: String(this.eci_single_money),
+              total_money: String(this.amounts_payable),
+            },
+          };
+          this.$api.serviceShop.applicationCloud(query).then((response) => {
+            if (response.data.success == 1) {
+              this.$message({
+                message: "申请成功",
+                type: "success",
+              });
+              this.$router.push("/user/order_list");
+            } else {
+              this.$message({
+                message: `申请失败，${response.data.errMsg}`,
+                type: "error",
+              });
+            }
+          });
+        });
+      } else {
+        let query = {
+          resource_id: this.workSpaceId,
+          resource_apply: {
+            apply_file: this.formOld.apply_file,
+            cpu: Number(this.formOld.cpu),
+            duration: this.formOld.appDuration,
+            duration_unit: Number(this.formOld.durType),
+            apply_connect_username: this.form.link_man,
+            apply_connect_mobile: this.form.phone,
+            memory: Number(this.formOld.memory),
+            containers: this.formOld.containerGroup,
+            one_cpu_min: this.formOld.perCPU ? this.formOld.perCPU : 0,
+            one_cpu_max: this.formOld.perCPUs ? this.formOld.perCPUs : 0,
+            one_memory_min: this.formOld.perRAM ? this.formOld.perRAM : 0,
+            one_memory_max: this.formOld.perRAMs ? this.formOld.perRAMs : 0,
+          },
+          disks: [
+            {
+              disk_num: this.formOld.dataDisk ? this.formOld.dataDisk : 0,
+              disk_cap: this.formOld.perDataDisk ? this.formOld.perDataDisk : 0,
+              store_type: "nfs-client",
+            },
+          ],
+          remove_disks: this.delDataDiskList.map((item) => item.id),
+          payment: {
+            // total_money: this.total_money,
+            disk_single_money: String(this.disk_single_money),
+            eci_single_money: String(this.eci_single_money),
+            total_money: String(this.amounts_payable),
+          },
+        };
+        this.$api.serviceShop.updateCloud(query).then((response) => {
+          if (response.data.success == 1) {
+            this.$message({
+              message: "申请调整成功",
+              type: "success",
+            });
+            this.$router.push("/user/order_list");
+          } else {
+            this.$message({
+              message: `申请调整失败，${response.data.errMsg}`,
+              type: "error",
+            });
+          }
+        });
+      }
+      console.log(this.form);
+      this.dialogVisible = false;
+    },
+    cancel() {
+      this.dialogVisible = false;
+    },
+    getUser() {
+      this.$api.user.getNowUser().then((response) => {
+        this.form.department_name = response.data.data.department_name;
+      });
+    },
+    getNameSpaceList() {
+      this.$api.serviceShop.getCloudList().then((response) => {
+        if (response.data.success == 1) {
+          this.workSpaceOptions = response.data.data;
+          this.getQueryId();
+        }
+      });
+    },
+    delItem(val) {
+      this.$refs.dialog.show();
+      this.del_item = val;
+    },
+    dialogSubmit() {
+      let delIndex = this.dataDiskList.findIndex(
+        (v) => v.id === this.del_item.id
+      );
+      this.dataDiskList.splice(delIndex, 1);
+      this.delDataDiskList.push(this.del_item);
+    },
+    setContainerGroup(type) {
+      if (type == 0) {
+        if (this.formNew.containerGroup && this.formNew.containerGroup != 0) {
+        } else {
+          this.formNew.containerGroup = this.formNew.memory * 3;
+        }
+      } else if (type == 1) {
+        if (this.formOld.containerGroup && this.formOld.containerGroup != 0) {
+        } else {
+          this.formOld.containerGroup = this.formOld.memory * 3;
+        }
+      }
+    },
+    changeCPU(val) {
+      this.formOld.memory = "";
+      this.formNew.memory = "";
+      if (val == "8") {
+        this.optionsRAM = [
+          { value: "16", label: "16" },
+          { value: "32", label: "32" },
+        ];
+      } else if (val == "16") {
+        this.optionsRAM = [
+          { value: "32", label: "32" },
+          { value: "64", label: "64" },
+        ];
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.cloud_form {
+}
+.form_title {
+  font-size: 16px;
+  line-height: 16px;
+  font-weight: bold;
+  margin: 32px 0 24px;
+  padding: 0 0 0 15px;
+  position: relative;
+  color: #58617a;
+}
+.form_title::before {
+  position: absolute;
+  content: "";
+  width: 4px;
+  height: 18px;
+  background-color: #515fe7;
+  border-radius: 2px;
+  left: 0;
+  top: -1px;
+}
+.form_item {
+  width: calc(100%);
+}
+.form_item_title {
+  margin: 0 0 12px;
+  line-height: 14px;
+  font-size: 14px;
+  color: #58617a;
+}
+.form_item_title_1 {
+  margin: 0;
+  line-height: 14px;
+  font-size: 14px;
+  color: #58617a;
+}
+.input_has_right {
+  position: relative;
+}
+.input_right {
+  display: inline-block;
+  width: 60px;
+  height: 40px;
+  padding: 0 0 0 15px;
+  background-color: #edeef4;
+  border: 1px #e3e5ef solid;
+  color: #8890a7;
+  border-radius: 0 6px 6px 0;
+  position: absolute;
+  right: 0;
+}
+.input_has_left_right {
+  position: relative;
+}
+.input_left {
+  display: inline-block;
+  width: 60px;
+  height: 40px;
+  padding: 0 0 0 15px;
+  background-color: #edeef4;
+  border: 1px #e3e5ef solid;
+  color: #8890a7;
+  border-radius: 6px 0 0 6px;
+  position: absolute;
+  left: 0;
+}
+.input_has_right_select {
+  position: relative;
+}
+.input_right_select {
+  position: absolute;
+  right: 0;
+}
+.select_title {
+  padding: 32px 0 12px;
+  font-size: 16px;
+  line-height: 16px;
+  font-weight: bold;
+  color: #58617a;
+}
+.now_spec {
+  padding: 0 0 12px;
+}
+.now_spec_cards {
+  margin-bottom: 24px;
+}
+.now_spec_card {
+  display: inline-block;
+  width: 194px;
+  height: 40px;
+  background-color: #f7f8f9;
+  border-radius: 6px;
+  line-height: 40px;
+  padding: 0 20px;
+  position: relative;
+  margin-right: 24px;
+}
+.now_spec_card_title {
+  color: #6573ae;
+  margin-left: 10px;
+}
+.now_spec_card_val {
+  color: #0d1847;
+  position: absolute;
+  right: 20px;
+  top: 0;
+}
+.now_spec_card_img {
+  position: relative;
+  top: 1px;
+}
+.now_rqz_card {
+  display: inline-block;
+  width: 304px;
+  height: 40px;
+  background-color: #f7f8f9;
+  border-radius: 6px;
+  line-height: 40px;
+  padding: 0 20px;
+  position: relative;
+  margin-right: 20px;
+}
+.now_rqz_card_title {
+  color: #6573ae;
+  margin-left: 10px;
+}
+.now_rqz_card_val_div {
+  color: #0d1847;
+  position: absolute;
+  line-height: 40px;
+  right: 20px;
+  top: 0;
+}
+.now_rqz_card_val {
+}
+.now_rqz_card_img {
+  position: relative;
+  top: 1px;
+}
+.now_spec_card_time {
+  width: 381px;
+  height: 40px;
+  background-color: #f7f8f9;
+  border-radius: 6px;
+  line-height: 40px;
+  padding: 0 20px;
+  position: relative;
+  margin-bottom: 24px;
+}
+.now_spec_card_time_img {
+  position: relative;
+  top: 1px;
+}
+.now_spec_card_time_title {
+  color: #6573ae;
+  margin-left: 10px;
+}
+.now_spec_card_time_val {
+  color: #0d1847;
+  position: absolute;
+  right: 20px;
+  top: 0;
+}
+.btn_footer {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 20px;
+}
+.btn_footer .submit {
+  width: 220px;
+  background-color: #e56600;
+  color: #f8f9fd;
+}
+.btn_footer .nosubmit {
+  width: 220px;
+  background-color: #a9aec0;
+  color: #ffffff;
+}
+.btn_footer .submit1 {
+  width: 100px;
+  background-color: #0f2683;
+  color: #f8f9fd;
+}
+.cancel {
+  width: 100px;
+  background-color: #c3caf8;
+  color: #0f2683;
+}
+.dia_item_title {
+  display: block;
+  color: #8890a7;
+  line-height: 24px;
+  padding: 0 20px;
+}
+.margin_top_10 {
+  margin-top: 10px;
+}
+.dia_item_val {
+  display: block;
+  color: #242c43;
+  line-height: 24px;
+  margin-bottom: 10px;
+  width: 90%;
+  padding: 0 20px;
+}
+.dia_block {
+  background-color: #f8f9fd;
+  border-radius: 8px;
+  margin: 10px 0;
+  padding: 20px;
+  font-size: 14px;
+  line-height: 22px;
+}
+.dia_item_all_title {
+  color: #242c43;
+}
+.dia_block_item {
+  padding: 10px 0 0 20px;
+}
+.dia_block_item_in {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+}
+.dia_block_item_title {
+  color: #8890a7;
+  width: 120px;
+  text-align: right;
+}
+.dia_block_item_val {
+  color: #242c43;
+  width: calc(100% - 130px);
+}
+.val_has_2 {
+  margin-right: 20px;
+}
+.doc_template {
+  margin: 0 0 12px;
+}
+.up_f {
+  width: calc(50% - 10px);
+}
+.fyzj_item {
+  position: relative;
+}
+.fyzj {
+  color: #242c43;
+  font-size: 18px;
+  margin-right: 10px;
+  text-align: right;
+  position: absolute;
+  top: -10px;
+  right: 230px;
+}
+.fyzj_p {
+  margin-bottom: 6px;
+}
+.fyzj_span {
+  color: #e56600;
+  font-size: 24px;
+  font-weight: bold;
+}
+.fyzj_qian {
+  color: #e56600;
+  font-size: 14px;
+}
+.ckfymx {
+  color: #a9aec0;
+  font-size: 14px;
+}
+.ckfymx_a {
+  color: #515fe7;
+  cursor: pointer;
+}
+.ckfymx_qian {
+  display: inline-block;
+  margin-left: 20px;
+  position: relative;
+}
+.ckfymx_qian::after {
+  content: "";
+  position: absolute;
+  width: 1px;
+  height: 16px;
+  background: #bcc1d0;
+  left: -10px;
+  top: 2px;
+}
+.yebz {
+  color: #e15260;
+  font-size: 18px;
+  margin-right: 20px;
+}
+.fymx_ts {
+  background-color: #f4f7fc;
+  border-radius: 8px;
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.fymx_ts i {
+  position: relative;
+  top: 4px;
+  color: #8890a7;
+}
+.fymx_ts p {
+  width: calc(100% - 22px);
+  color: #58617a;
+}
+.sjfy_title {
+  margin: 10px 20px;
+  position: relative;
+  color: #242c43;
+  font-size: 16px;
+}
+.sjfy_title::after {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: #515fe7;
+  border-radius: 50%;
+  left: -15px;
+  top: 8px;
+}
+.tool_img {
+  width: 16px;
+  height: 16px;
+  position: relative;
+  top: 2px;
+  left: 2px;
+}
+.fyzj_dia {
+  height: 100%;
+}
+.fyzj_dia_init {
+  float: right;
+  text-align: right;
+  padding: 10px;
+}
+.fyzj_1 {
+  color: #242c43;
+  font-size: 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.fyzj_1_num {
+  color: #e56600;
+  font-size: 24px;
+  font-weight: bold;
+}
+.fyzj_1_jb {
+  color: #e56600;
+  font-size: 14px;
+}
+.fyzj_2 {
+  min-width: 140px;
+  color: #8890a7;
+  font-size: 14px;
+  margin: 10px 0;
+  display: flex;
+  justify-content: space-between;
+}
+.fyzj_2_num {
+  color: #58617a;
+}
+.clear_xxx {
+  clear: both;
+}
+.disk__table {
+  margin-bottom: 0;
+}
+</style>
+<style>
+.form_block .el-input .el-input__inner {
+  background-color: #f7f8f9;
+  color: #242c43;
+}
+.cloud_form .el-input {
+  width: 100%;
+}
+.cloud_form .input_has_right .el-input {
+  width: calc(100% - 60px);
+}
+.cloud_form .input_has_left_right .el-input {
+  width: calc(100% - 120px);
+  margin-left: 60px;
+}
+.cloud_form .input_has_left_right .el-input__inner {
+  border-radius: 0;
+  color: #242c43;
+}
+.cloud_form .input_right_top {
+  top: 26px;
+}
+.cloud_form .el-select {
+  width: 100%;
+}
+.cloud_form .el-input .el-input__inner {
+  background-color: #f7f8f9;
+  color: #242c43;
+}
+.cloud_form .el-input-number {
+  width: calc(100% - 60px);
+}
+.cloud_form .el-input-number .el-input {
+  width: 100%;
+}
+.cloud_form .input_has_left_right .el-input-number .el-input {
+  width: calc(100% - 60px);
+  margin-left: 60px;
+}
+.cloud_form .el-input-number .el-input__inner {
+  text-align: left;
+  color: #242c43;
+}
+.cloud_form .el-textarea {
+  width: 100%;
+}
+.cloud_form .el-textarea .el-textarea__inner {
+  background-color: #f7f8f9;
+  border-radius: 6px;
+  color: #242c43;
+}
+.form_item .el-form-item__content {
+  width: 100%;
+}
+.form_item.el-form-item {
+  margin-bottom: 24px;
+}
+.form_item.el-form-item.nobottom {
+  margin-bottom: 0;
+}
+.input_has_right .el-input__inner {
+  border-radius: 6px 0 0 6px;
+  color: #242c43;
+}
+.cloud_form .input_has_right_select .el-input-number {
+  width: calc(100% - 100px);
+}
+.input_has_right_select .el-select {
+  width: 100px;
+}
+.input_has_right_select .el-select .el-input.is-focus .el-input__inner {
+  border-color: #0f2683;
+}
+.input_has_right_select .el-select .el-input__inner:focus {
+  border-color: #0f2683;
+}
+.input_has_right_select .el-input__inner {
+  border-radius: 6px 0 0 6px;
+  color: #242c43;
+}
+.input_has_right_select .input_right_select.el-select .el-input {
+  width: 100px;
+  background-color: #0f2683;
+  color: #ffffff;
+  border-radius: 0 6px 6px 0;
+}
+.input_has_right_select
+  .input_right_select.el-select
+  .el-input
+  .el-input__inner {
+  border-radius: 0 6px 6px 0;
+  color: #ffffff;
+}
+.input_right_select .el-input .el-input__inner {
+  background-color: #0f2683;
+  color: #242c43;
+}
+.cloud_form .el-input-number .el-input-number__increase,
+.cloud_form .el-input-number .el-input-number__decrease {
+  border-bottom: 0;
+  border-left: 0;
+  width: 29px;
+}
+.cloud_dia .el-dialog__header {
+  border-bottom: 1px solid #edf0ff;
+}
+.cloud_dia .el-dialog__title {
+  font-weight: 700;
+}
+.cloud_dia .el-dialog__body {
+  text-align: left;
+  font-size: 14px;
+}
+.cloud_form .el-input__prefix,
+.el-input__suffix {
+  text-align: right;
+  right: 2px;
+}
+.cloud_form .el-input-number.is-controls-right .el-input__inner {
+  padding-left: 15px;
+  padding-right: 32px;
+}
+.up_f .el-upload {
+  width: 100%;
+}
+.up_f .el-upload-dragger {
+  width: 100%;
+}
+.shop_cloud .el-tabs__header {
+  margin: 0;
+}
+</style>

src/components/shop-cloud/shop-cloud.vue

 <template>
-  <div class="shop_cloud">
+  <div>
     <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
       <el-breadcrumb-item :to="{ path: '/shop' }">服务超市</el-breadcrumb-item>
       <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
     </el-breadcrumb>
-    <block-radius :paddingNum="24">
+    <block-radius>
       <el-form
         ref="form"
         :inline="true"
@@ -12,8 +12,8 @@
         :model="form"
         class="form_block"
       >
-        <el-row :gutter="24">
-          <el-col :span="24">
+        <el-row>
+          <el-col :span="12">
             <el-form-item class="form_item">
               <div class="form_item_title">申请组织：</div>
               <el-input
@@ -24,7 +24,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item class="form_item nobottom" prop="link_man">
+            <el-form-item class="form_item" prop="link_man">
               <div class="form_item_title">部门联系人：</div>
               <el-input
                 v-model="form.link_man"
@@ -33,7 +33,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item class="form_item nobottom" prop="phone">
+            <el-form-item class="form_item" prop="phone">
               <div class="form_item_title">联系电话：</div>
               <el-input
                 v-model="form.phone"
@@ -44,11 +44,13 @@
         </el-row>
       </el-form>
     </block-radius>
-    <block-radius :paddingNum="24">
+    <block-radius>
       <el-tabs v-model="activeName" class="cloud_form" @tab-click="tabClick">
         <el-tab-pane label="申请新的工作区域" name="0">
+          <el-row>
+            <el-col :span="24">
               <el-form ref="formNew" :model="formNew" :rules="ruleNew">
-            <el-row :gutter="24">
+                <el-row>
                   <el-col :span="24">
                     <div class="form_title">基本信息</div>
                   </el-col>
@@ -70,8 +72,8 @@
                       ></el-input>
                     </el-form-item>
                   </el-col>
-              <el-col :span="24">
-                <el-form-item prop="workplacedesc" class="form_item nobottom">
+                  <el-col :span="12">
+                    <el-form-item prop="workplacedesc" class="form_item">
                       <div class="form_item_title">描述信息：</div>
                       <el-input
                         type="textarea"
@@ -83,7 +85,7 @@
                   <el-col :span="24">
                     <div class="form_title">工作区域申请规格</div>
                   </el-col>
-              <el-col :span="8">
+                  <el-col :span="6">
                     <el-form-item prop="cpu" class="form_item input_has_right">
                       <div class="form_item_title">CPU：</div>
                       <el-select
@@ -101,8 +103,11 @@
                       <div class="input_right input_right_top">核</div>
                     </el-form-item>
                   </el-col>
-              <el-col :span="8">
-                <el-form-item prop="memory" class="form_item input_has_right">
+                  <el-col :span="6">
+                    <el-form-item
+                      prop="memory"
+                      class="form_item input_has_right"
+                    >
                       <div class="form_item_title">内存：</div>
                       <el-select
                         v-model="formNew.memory"
@@ -119,7 +124,7 @@
                       <div class="input_right input_right_top">GB</div>
                     </el-form-item>
                   </el-col>
-              <el-col :span="8">
+                  <el-col :span="6">
                     <el-form-item
                       prop="containerGroup"
                       class="form_item input_has_right"
@@ -138,8 +143,8 @@
                   <el-col :span="24">
                     <div class="form_item_title">数据盘（可选）：</div>
                   </el-col>
-              <el-col :span="8">
-                <el-form-item class="form_item input_has_right nobottom">
+                  <el-col :span="6">
+                    <el-form-item class="form_item input_has_right">
                       <el-input-number
                         v-model="formNew.dataDisk"
                         controls-position="right"
@@ -150,8 +155,8 @@
                       <div class="input_right">块</div>
                     </el-form-item>
                   </el-col>
-              <el-col :span="8">
-                <el-form-item class="form_item input_has_right nobottom">
+                  <el-col :span="6">
+                    <el-form-item class="form_item input_has_right">
                       <el-input-number
                         v-model="formNew.perDataDisk"
                         controls-position="right"
@@ -165,10 +170,13 @@
                   <el-col :span="24">
                     <div class="form_title">单个容器组规格</div>
                   </el-col>
-              <el-col :span="24">
+                  <el-col :span="12">
                     <div class="form_item_title">CPU：</div>
                   </el-col>
-              <el-col :span="8">
+                  <el-col :span="12">
+                    <div class="form_item_title">内存：</div>
+                  </el-col>
+                  <el-col :span="6">
                     <el-form-item
                       prop="perCPUs"
                       class="form_item input_has_left_right"
@@ -179,12 +187,12 @@
                         controls-position="right"
                         :min="0"
                         :max="10"
-                    placeholder="CPU最高使用量"
+                        placeholder="请选择CPU最高使用量"
                       ></el-input-number>
                       <div class="input_right">核</div>
                     </el-form-item>
                   </el-col>
-              <el-col :span="8">
+                  <el-col :span="6">
                     <el-form-item
                       prop="perCPU"
                       class="form_item input_has_left_right"
@@ -195,18 +203,15 @@
                         controls-position="right"
                         :min="0"
                         :max="10"
-                    placeholder="CPU默认使用量"
+                        placeholder="请选择CPU默认使用量"
                       ></el-input-number>
                       <div class="input_right">核</div>
                     </el-form-item>
                   </el-col>
-              <el-col :span="24">
-                <div class="form_item_title">内存：</div>
-              </el-col>
-              <el-col :span="8">
+                  <el-col :span="6">
                     <el-form-item
                       prop="perRAMs"
-                  class="form_item input_has_left_right nobottom"
+                      class="form_item input_has_left_right"
                     >
                       <div class="input_left">最高</div>
                       <el-input-number
@@ -214,15 +219,15 @@
                         controls-position="right"
                         :min="0"
                         :max="10"
-                    placeholder="内存最高使用量"
+                        placeholder="请选择内存最高使用量"
                       ></el-input-number>
                       <div class="input_right">GB</div>
                     </el-form-item>
                   </el-col>
-              <el-col :span="8">
+                  <el-col :span="6">
                     <el-form-item
                       prop="perRAM"
-                  class="form_item input_has_left_right nobottom"
+                      class="form_item input_has_left_right"
                     >
                       <div class="input_left">默认</div>
                       <el-input-number
@@ -230,7 +235,7 @@
                         controls-position="right"
                         :min="0"
                         :max="10"
-                    placeholder="内存默认使用量"
+                        placeholder="请选择内存默认使用量"
                       ></el-input-number>
                       <div class="input_right">GB</div>
                     </el-form-item>
@@ -238,7 +243,7 @@
                   <el-col :span="24">
                     <div class="form_title">其他信息</div>
                   </el-col>
-              <el-col :span="16">
+                  <el-col :span="12">
                     <el-form-item
                       prop="appDuration"
                       class="form_item input_has_right"
@@ -286,10 +291,12 @@
                   </el-col>
                 </el-row>
               </el-form>
+            </el-col>
+          </el-row>
         </el-tab-pane>
         <el-tab-pane label="调整现有工作区域" name="1">
-          <el-row :gutter="24">
-            <el-col :span="16">
+          <el-row>
+            <el-col :span="12">
               <div class="select_title">选择要进行调整的工作区域：</div>
               <div class="form_item">
                 <el-select
@@ -308,8 +315,10 @@
             </el-col>
           </el-row>
           <div v-show="formShow">
+            <el-row>
+              <el-col :span="24">
                 <el-form ref="formOld" :model="formOld" :rules="ruleOld">
-              <el-row :gutter="24">
+                  <el-row>
                     <el-col :span="24">
                       <div class="form_title">工作区域规格调整</div>
                     </el-col>
@@ -342,8 +351,11 @@
                         </div>
                       </div>
                     </el-col>
-                <el-col :span="8">
-                  <el-form-item prop="cpu" class="form_item input_has_right">
+                    <el-col :span="6">
+                      <el-form-item
+                        prop="cpu"
+                        class="form_item input_has_right"
+                      >
                         <div class="form_item_title">申请CPU调整为：</div>
                         <el-select
                           v-model="formOld.cpu"
@@ -359,8 +371,11 @@
                         <div class="input_right input_right_top">核</div>
                       </el-form-item>
                     </el-col>
-                <el-col :span="8">
-                  <el-form-item prop="memory" class="form_item input_has_right">
+                    <el-col :span="6">
+                      <el-form-item
+                        prop="memory"
+                        class="form_item input_has_right"
+                      >
                         <div class="form_item_title">申请内存调整为：</div>
                         <el-select
                           v-model="formOld.memory"
@@ -377,7 +392,7 @@
                         <div class="input_right input_right_top">GB</div>
                       </el-form-item>
                     </el-col>
-                <el-col :span="8">
+                    <el-col :span="6">
                       <el-form-item
                         prop="containerGroup"
                         class="form_item input_has_right"
@@ -393,9 +408,9 @@
                         <div class="input_right">个</div>
                       </el-form-item>
                     </el-col>
-                <el-col :span="24" v-if="dataDiskList.length != 0">
+                    <el-col :span="12" v-if="dataDiskList.length != 0">
                       <el-form-item class="form_item input_has_right">
-                    <div class="form_item_title_1">调整数据盘：</div>
+                        <div class="form_item_title">调整数据盘：</div>
                         <table-um
                           ref="apply_service_state_table"
                           :headers="dataDiskHeaders"
@@ -403,13 +418,11 @@
                           :datas="dataDiskList"
                           @primary-del="delItem"
                           :maxheight="260"
-                      size="small"
-                      class="disk__table"
                         ></table-um>
                       </el-form-item>
                     </el-col>
                     <el-col :span="24">
-                  <el-form-item class="form_item nobottom">
+                      <el-form-item class="form_item">
                         <div class="form_item_title">增加数据盘：</div>
                         <!-- <el-select v-model="formOld.store_type" placeholder="请选择数据盘类型">
                           <el-option
@@ -421,8 +434,8 @@
                         </el-select>-->
                       </el-form-item>
                     </el-col>
-                <el-col :span="8">
-                  <el-form-item class="form_item input_has_right nobottom">
+                    <el-col :span="6">
+                      <el-form-item class="form_item input_has_right">
                         <el-input-number
                           v-model="formOld.dataDisk"
                           controls-position="right"
@@ -433,8 +446,8 @@
                         <div class="input_right">块</div>
                       </el-form-item>
                     </el-col>
-                <el-col :span="8">
-                  <el-form-item class="form_item input_has_right nobottom">
+                    <el-col :span="6">
+                      <el-form-item class="form_item input_has_right">
                         <el-input-number
                           v-model="formOld.perDataDisk"
                           controls-position="right"
@@ -468,8 +481,8 @@
                               最高&nbsp;{{ item.max }}&nbsp;{{
                                 item.title == "CPU" ? "核" : "GB"
                               }}
-                          &nbsp;&nbsp;&nbsp;&nbsp;
                             </span>
+                            <br />
                             <span class="now_rqz_card_val">
                               默认&nbsp;{{ item.default }}&nbsp;{{
                                 item.title == "CPU" ? "核" : "GB"
@@ -479,10 +492,13 @@
                         </div>
                       </div>
                     </el-col>
-                <el-col :span="24">
+                    <el-col :span="12">
                       <div class="form_item_title">CPU：</div>
                     </el-col>
-                <el-col :span="8">
+                    <el-col :span="12">
+                      <div class="form_item_title">内存：</div>
+                    </el-col>
+                    <el-col :span="6">
                       <el-form-item
                         prop="perCPUs"
                         class="form_item input_has_left_right"
@@ -498,7 +514,7 @@
                         <div class="input_right">核</div>
                       </el-form-item>
                     </el-col>
-                <el-col :span="8">
+                    <el-col :span="6">
                       <el-form-item
                         prop="perCPU"
                         class="form_item input_has_left_right"
@@ -514,13 +530,10 @@
                         <div class="input_right">核</div>
                       </el-form-item>
                     </el-col>
-                <el-col :span="24">
-                  <div class="form_item_title">内存：</div>
-                </el-col>
-                <el-col :span="8">
+                    <el-col :span="6">
                       <el-form-item
                         prop="perRAMs"
-                    class="form_item input_has_left_right nobottom"
+                        class="form_item input_has_left_right"
                       >
                         <div class="input_left">最高</div>
                         <el-input-number
@@ -533,10 +546,10 @@
                         <div class="input_right">GB</div>
                       </el-form-item>
                     </el-col>
-                <el-col :span="8">
+                    <el-col :span="6">
                       <el-form-item
                         prop="perRAM"
-                    class="form_item input_has_left_right nobottom"
+                        class="form_item input_has_left_right"
                       >
                         <div class="input_left">默认</div>
                         <el-input-number
@@ -551,7 +564,6 @@
                     </el-col>
                     <el-col :span="24">
                       <div class="form_title">其他信息</div>
-                </el-col>
                       <el-col :span="24">
                         <div class="now_spec">当前规格：</div>
                         <div class="now_spec_card_time">
@@ -565,14 +577,17 @@
                             >
                             <span class="now_spec_card_time_val">
                               {{
-                          helper.dateStringTransform(paramsOld.cloud_end_time)
+                                helper.dateStringTransform(
+                                  paramsOld.cloud_end_time
+                                )
                               }}
                             </span>
                           </div>
                         </div>
                       </el-col>
-                <el-col :span="16">
-                  <el-form-item class="form_item input_has_right">
+                    </el-col>
+                    <el-col :span="12">
+                      <el-form-item class="form_item input_has_right_select">
                         <div class="form_item_title">申请续期：</div>
                         <el-input-number
                           v-model="formOld.appDuration"
@@ -580,7 +595,18 @@
                           :min="1"
                           :max="1000"
                         ></el-input-number>
-                    <div class="input_right">月</div>
+                        <el-select
+                          v-model="formOld.durType"
+                          class="input_right_select"
+                          placeholder="请选择续期时长"
+                        >
+                          <el-option
+                            v-for="item in durationOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                          ></el-option>
+                        </el-select>
                       </el-form-item>
                     </el-col>
                     <el-col :span="22">
@@ -598,12 +624,13 @@
                           :readOnly="false"
                           :drag="true"
                           @getNewList="getNewListOld"
-                      class="up_f"
                         ></upload-file>
                       </el-form-item>
                     </el-col>
                   </el-row>
                 </el-form>
+              </el-col>
+            </el-row>
           </div>
         </el-tab-pane>
       </el-tabs>
@@ -891,9 +918,7 @@
                 <div class="dia_block_item_in">
                   <span class="dia_block_item_title">内存：</span>
                   <p class="dia_block_item_val">
-                    <span class="val_has_2">
-                      最高&nbsp;{{ diaForm.perRAMs }}GB
-                    </span>
+                    <span class="val_has_2">om=[] </span>
                     <span class="val_has_2">
                       默认&nbsp;{{ diaForm.perRAM }}GB
                     </span>
@@ -1297,7 +1322,11 @@ export default {
         { value: "8", label: "8" },
         { value: "16", label: "16" },
       ],
-      optionsRAM: [],
+      optionsRAM: [
+        { value: "8", label: "8" },
+        { value: "16", label: "16" },
+        { value: "32", label: "32" },
+      ],
       options_store_type: [
         { value: "nfs-client", label: "nfs-client" },
         { value: "rook-ceph-block", label: "rook-ceph-block" },
@@ -1822,9 +1851,8 @@ export default {
 }
 .form_title {
   font-size: 16px;
-  line-height: 16px;
   font-weight: bold;
-  margin: 32px 0 24px;
+  margin: 10px 0;
   padding: 0 0 0 15px;
   position: relative;
   color: #58617a;
@@ -1837,22 +1865,14 @@ export default {
   background-color: #515fe7;
   border-radius: 2px;
   left: 0;
-  top: -1px;
+  top: 2px;
 }
 .form_item {
-  width: calc(100%);
+  width: calc(100% - 20px);
 }
 .form_item_title {
-  margin: 0 0 12px;
-  line-height: 14px;
-  font-size: 14px;
-  color: #58617a;
-}
-.form_item_title_1 {
-  margin: 0;
-  line-height: 14px;
-  font-size: 14px;
-  color: #58617a;
+  padding: 0 15px;
+  line-height: 40px;
 }
 .input_has_right {
   position: relative;
@@ -1865,7 +1885,7 @@ export default {
   background-color: #edeef4;
   border: 1px #e3e5ef solid;
   color: #8890a7;
-  border-radius: 0 6px 6px 0;
+  border-radius: 0 8px 8px 0;
   position: absolute;
   right: 0;
 }
@@ -1880,7 +1900,7 @@ export default {
   background-color: #edeef4;
   border: 1px #e3e5ef solid;
   color: #8890a7;
-  border-radius: 6px 0 0 6px;
+  border-radius: 8px 0 0 8px;
   position: absolute;
   left: 0;
 }
@@ -1892,28 +1912,26 @@ export default {
   right: 0;
 }
 .select_title {
-  padding: 32px 0 12px;
+  padding: 20px 15px;
   font-size: 16px;
-  line-height: 16px;
   font-weight: bold;
-  color: #58617a;
+  color: #242c43;
 }
 .now_spec {
-  padding: 0 0 12px;
+  padding: 10px 15px;
 }
 .now_spec_cards {
-  margin-bottom: 24px;
 }
 .now_spec_card {
   display: inline-block;
-  width: 194px;
-  height: 40px;
+  width: 165px;
+  height: 50px;
   background-color: #f7f8f9;
-  border-radius: 6px;
-  line-height: 40px;
+  border-radius: 8px;
+  line-height: 50px;
   padding: 0 20px;
   position: relative;
-  margin-right: 24px;
+  margin-right: 20px;
 }
 .now_spec_card_title {
   color: #6573ae;
@@ -1927,15 +1945,15 @@ export default {
 }
 .now_spec_card_img {
   position: relative;
-  top: 1px;
+  top: 2px;
 }
 .now_rqz_card {
   display: inline-block;
-  width: 304px;
-  height: 40px;
+  width: 193px;
+  height: 78px;
   background-color: #f7f8f9;
-  border-radius: 6px;
-  line-height: 40px;
+  border-radius: 8px;
+  line-height: 78px;
   padding: 0 20px;
   position: relative;
   margin-right: 20px;
@@ -1947,29 +1965,28 @@ export default {
 .now_rqz_card_val_div {
   color: #0d1847;
   position: absolute;
-  line-height: 40px;
+  line-height: 30px;
   right: 20px;
-  top: 0;
+  top: 9px;
 }
 .now_rqz_card_val {
 }
 .now_rqz_card_img {
   position: relative;
-  top: 1px;
+  top: 2px;
 }
 .now_spec_card_time {
   width: 381px;
-  height: 40px;
+  height: 50px;
   background-color: #f7f8f9;
-  border-radius: 6px;
-  line-height: 40px;
+  border-radius: 8px;
+  line-height: 50px;
   padding: 0 20px;
   position: relative;
-  margin-bottom: 24px;
 }
 .now_spec_card_time_img {
   position: relative;
-  top: 1px;
+  top: 2px;
 }
 .now_spec_card_time_title {
   color: #6573ae;
@@ -2055,7 +2072,7 @@ export default {
   margin-right: 20px;
 }
 .doc_template {
-  margin: 0 0 12px;
+  margin: 0 0 10px 20px;
 }
 .up_f {
   width: calc(50% - 10px);
@@ -2189,9 +2206,6 @@ export default {
 .clear_xxx {
   clear: both;
 }
-.disk__table {
-  margin-bottom: 0;
-}
 </style>
 <style>
 .form_block .el-input .el-input__inner {
@@ -2213,7 +2227,7 @@ export default {
   color: #242c43;
 }
 .cloud_form .input_right_top {
-  top: 26px;
+  top: 40px;
 }
 .cloud_form .el-select {
   width: 100%;
@@ -2241,20 +2255,17 @@ export default {
 }
 .cloud_form .el-textarea .el-textarea__inner {
   background-color: #f7f8f9;
-  border-radius: 6px;
+  border-radius: 8px;
   color: #242c43;
 }
 .form_item .el-form-item__content {
   width: 100%;
 }
 .form_item.el-form-item {
-  margin-bottom: 24px;
-}
-.form_item.el-form-item.nobottom {
-  margin-bottom: 0;
+  margin-bottom: 12px;
 }
 .input_has_right .el-input__inner {
-  border-radius: 6px 0 0 6px;
+  border-radius: 8px 0 0 8px;
   color: #242c43;
 }
 .cloud_form .input_has_right_select .el-input-number {
@@ -2270,20 +2281,20 @@ export default {
   border-color: #0f2683;
 }
 .input_has_right_select .el-input__inner {
-  border-radius: 6px 0 0 6px;
+  border-radius: 8px 0 0 8px;
   color: #242c43;
 }
 .input_has_right_select .input_right_select.el-select .el-input {
   width: 100px;
   background-color: #0f2683;
   color: #ffffff;
-  border-radius: 0 6px 6px 0;
+  border-radius: 0 8px 8px 0;
 }
 .input_has_right_select
   .input_right_select.el-select
   .el-input
   .el-input__inner {
-  border-radius: 0 6px 6px 0;
+  border-radius: 0 8px 8px 0;
   color: #ffffff;
 }
 .input_right_select .el-input .el-input__inner {
@@ -2294,7 +2305,7 @@ export default {
 .cloud_form .el-input-number .el-input-number__decrease {
   border-bottom: 0;
   border-left: 0;
-  width: 29px;
+  width: 40px;
 }
 .cloud_dia .el-dialog__header {
   border-bottom: 1px solid #edf0ff;
@@ -2309,11 +2320,10 @@ export default {
 .cloud_form .el-input__prefix,
 .el-input__suffix {
   text-align: right;
-  right: 2px;
 }
 .cloud_form .el-input-number.is-controls-right .el-input__inner {
   padding-left: 15px;
-  padding-right: 32px;
+  padding-right: 40px;
 }
 .up_f .el-upload {
   width: 100%;
@@ -2321,7 +2331,4 @@ export default {
 .up_f .el-upload-dragger {
   width: 100%;
 }
-.shop_cloud .el-tabs__header {
-  margin: 0;
-}
 </style>

src/pages/service_shop/shop_cloud copy.vue

+<template>
+  <div class="shop_list_cont">
+    <el-container>
+      <el-aside width="176px">
+        <service-shop-menu></service-shop-menu>
+      </el-aside>
+      <el-main class="main_init">
+        <shop-cloud name="云资源服务"></shop-cloud>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import ServiceShopMenu from "@/components/service-list/service_shop_menu";
+import ShopCloud from "@/components/shop-cloud/shop-cloud";
+export default {
+  components: {
+    ServiceShopMenu,
+    ShopCloud
+  },
+  data: () => ({}),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+.shop_list_cont {
+  width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
+.main_init {
+  padding: 2px 0 16px 16px;
+}
+</style>
\ No newline at end of file

src/pages/service_shop/shop_cloud.vue

 <template>
-  <div class="shop_list_cont">
+  <div>
     <el-container>
-      <el-aside width="176px">
+      <el-aside width="180px">
         <service-shop-menu></service-shop-menu>
       </el-aside>
-      <el-main class="main_init">
+      <el-main>
         <shop-cloud name="云资源服务"></shop-cloud>
       </el-main>
     </el-container>
@@ -25,12 +25,4 @@ export default {
 };
 </script>
 <style scoped>
-.shop_list_cont {
-  width: 1200px;
-  margin: 0 auto;
-  position: relative;
-}
-.main_init {
-  padding: 2px 0 16px 16px;
-}
 </style>

src/pages/service_shop/shop_list copy.vue

+<template>
+  <div class="shop_list_cont">
+    <el-container>
+      <el-aside width="176px">
+        <service-shop-menu></service-shop-menu>
+      </el-aside>
+      <el-main class="main_init">
+        <service-list
+          :filterNames="filterNames"
+          :name="name"
+          :url="url"
+          :urlFilter="urlFilter"
+        ></service-list>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import ServiceShopMenu from "@/components/service-list/service_shop_menu";
+import ServiceList from "@/components/service-list/service_list";
+import BlockRadius from "@/components/general/block-radius";
+export default {
+  components: {
+    ServiceShopMenu,
+    ServiceList,
+    BlockRadius,
+  },
+  data: () => ({
+    urlFilter: "",
+    url: "",
+    name: "",
+    filterNames: [],
+  }),
+  mounted() {
+    this.getVal(this.$route.path);
+  },
+  methods: {
+    getVal(val) {
+      let uri = val.substring(6);
+      uri = uri.substring(0, uri.indexOf("/"));
+      switch (uri) {
+        case "data_service_list":
+          this.name = "数据服务";
+          this.urlFilter = "5";
+          this.url = "/shop/sjfwDetail";
+          this.filterNames = ["数据服务类型", "服务领域", "数据来源机构"];
+          break;
+        case "space_time_service_list":
+          this.name = "时空服务";
+          this.urlFilter = "6";
+          this.url = "/shop/skfwDetail";
+          this.filterNames = ["时空服务类型", "服务领域", "服务来源组织"];
+          break;
+        case "video_service_list":
+          this.name = "视频服务";
+          this.urlFilter = "7";
+          this.url = "/shop/spfwDetail";
+          this.filterNames = ["", "服务领域", "服务来源组织"];
+          break;
+        case "perception_service_list":
+          this.name = "感知服务";
+          this.urlFilter = "10";
+          this.url = "/shop/gzfwDetail";
+          this.filterNames = ["", "服务领域", "服务来源组织"];
+          break;
+        case "comprehensive_app_list":
+          this.name = "融合服务";
+          this.urlFilter = "21";
+          this.url = "/shop/zhfwDetail";
+          this.filterNames = ["服务类型", "服务领域", "服务来源组织"];
+          break;
+        case "app_store_list":
+          this.name = "应用商店";
+          this.urlFilter = "app";
+          this.url = "/shop/yysdDetail";
+          this.filterNames = ["应用类型", "应用领域", "应用来源机构"];
+          break;
+        default:
+          this.name = "";
+          this.urlFilter = "";
+          this.url = "";
+          this.filterNames = [];
+          break;
+      }
+    },
+  },
+  watch: {
+    "$route.path": {
+      handler(val) {
+        this.getVal(val);
+      },
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.default {
+  height: calc(100vh - 180px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  .default_img {
+    width: 1282px;
+    height: 629px;
+    .default_title {
+      color: #264dd9;
+      font-size: 44px;
+      font-weight: bold;
+      margin-bottom: 30px;
+    }
+    .default_msg {
+      color: #58617a;
+      font-size: 24px;
+      line-height: 44px;
+    }
+  }
+}
+</style>
+<style scoped>
+.default_img {
+  background: url("~@/assets/imgs/img_default_quesheng.png") no-repeat center
+    center;
+}
+.shop_list_cont {
+  width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
+.main_init {
+  padding: 16px 0 16px 16px;
+}
+</style>
\ No newline at end of file

src/pages/service_shop/shop_list.vue

 <template>
-  <div class="shop_list_cont">
+  <!-- <div class="shop_list_cont"> -->
+  <div>
     <el-container>
-      <el-aside width="176px">
+      <el-aside width="180px">
         <service-shop-menu></service-shop-menu>
       </el-aside>
-      <el-main class="main_init">
+      <el-main>
         <service-list
           :filterNames="filterNames"
           :name="name"
@@ -128,7 +129,4 @@ export default {
   margin: 0 auto;
   position: relative;
 }
-.main_init {
-  padding: 16px 0 16px 16px;
-}
 </style>