应用详情信息ui改版

src/components/service-info/app-info.vue

 <template>
-  <div class="application_info apaas_button" v-if="data">
+  <div class="service_info apaas_button" v-if="data">
+    <div class="service_title">
+      <span class="service_name" v-text="data.app_name"></span>
+      <span class="service_access_info">
+        <img :src="require('@/assets/imgs/icon_liulan.png')" />
+        <span v-text="'浏览次数：' + data.view_count"></span>
+      </span>
+      <span class="service_access_info">
+        <img :src="require('@/assets/imgs/icon_huoqu.png')" />
+        <span v-text="'部署次数：' + data.deploy_times"></span>
+      </span>
+    </div>
     <div class="main_container">
-      <div class="main_container-left" v-if="data.logo">
-        <el-avatar shape="square" :size="144" fit="cover" :src="data.logo" />
+      <div class="main_container-left">
+        <img :src="data.logo" width="100%" />
       </div>
       <div class="main_container-right">
-        <div class="application_title">
-          <span class="application_name" v-text="data.app_name"></span>
+        <ul class="service_base_info">
+          <li>
+            <span>应用开发者：</span>
+            <span v-text="data.username"> </span>
+          </li>
+          <li>
+            <span>应用类型：</span>
+            <span v-html="data.type_name"></span>
+          </li>
+          <li>
+            <span>业务领域：</span>
+            <span v-text="data.ywly_name"></span>
+          </li>
+          <li>
+            <span>上线时间：</span>
+            <span v-text="data.create_date"></span>
+          </li>
+        </ul>
+        <div class="commodity_information">
+          <span>规&emsp;&emsp;格：</span>
+          <div class="btn_container">
+            <el-button
+              v-for="(item, index) in specifications"
+              :key="'specifications_' + index"
+              :type="item.value === specificationID ? 'primary' : 'default'"
+              @click="changeSpecification(item)"
+            >
+              {{ item.name }}
+            </el-button>
+          </div>
         </div>
-        <div class="application_base_container">
-          <ul class="application_base_info">
-            <li>
-              <span>应用开发者：</span>
-              <span v-text="data.username"> </span>
-            </li>
-            <li>
-              <span>应用类型：</span>
-              <span v-html="data.type_name"></span>
-            </li>
-          </ul>
-          <ul class="application_base_info">
-            <li>
-              <span>部署次数：</span>
-              <span v-text="data.deploy_times"></span>
-            </li>
-            <li>
-              <span>业务领域：</span>
-              <span v-text="data.ywly_name"></span>
-            </li>
-          </ul>
-          <ul class="application_base_info">
-            <li>
-              <span>上线时间：</span>
-              <span v-text="data.create_date"></span>
-            </li>
-          </ul>
+        <div class="commodity_action">
+          <el-button type="warning" plain @click="addToCart">
+            加入购物车
+          </el-button>
+          <el-button type="warning" @click="applyImmediately">
+            立即申请
+          </el-button>
         </div>
       </div>
     </div>
-    <div class="commodity_information">
-      <span>规&emsp;&emsp;格：</span>
-      <div class="btn_container">
-        <el-button
-          v-for="(item, index) in specifications"
-          :key="'specifications_' + index"
-          :type="item.value === specificationID ? 'primary' : 'default'"
-          @click="changeSpecification(item)"
-        >
-          {{ item.name }}
-        </el-button>
-      </div>
-    </div>
-    <div class="commodity_action">
-      <el-button type="warning" plain @click="addToCart">
-        加入购物车
-      </el-button>
-      <el-button type="warning" @click="applyImmediately">
-        立即申请
-      </el-button>
-    </div>
   </div>
 </template>
 
@@ -136,10 +134,11 @@ export default {
   },
 };
 </script>
+</script>
 
 <style scoped>
-.application_info {
-  padding: 20px;
+.service_info {
+  padding: 35px 20px 40px;
   background-color: #fff;
   margin-bottom: 20px;
 }
@@ -150,32 +149,57 @@ export default {
   margin-top: 25px;
 }
 .main_container-left {
+  width: 270px;
   padding: 3px;
   background-color: #f9fafc;
-  margin-right: 10px;
+  margin-right: 30px;
+  font-size: 0;
+  position: relative;
+}
+.main_container-left img {
+  width: 100%;
+}
+.main_container-left > .map_view {
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
 }
 .main_container-right {
   flex-grow: 1;
 }
-.application_title > .application_name {
+.service_title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.service_title > .service_name {
   font-size: 22px;
   font-weight: bold;
   color: #0d1847;
   line-height: 36px;
+  flex-grow: 1;
 }
-.application_base_container {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-end;
+.service_title > .service_access_info {
+  flex-shrink: 0;
+  font-size: 14px;
+  color: #58617a;
+  margin-left: 20px;
+}
+.service_title > .service_access_info > * {
+  display: inline-block;
+  vertical-align: middle;
+}
+.service_title > .service_access_info > img {
+  width: 19px;
+  margin-right: 5px;
+}
+.service_base_info {
+  padding: 25px 20px;
   background-color: #f9fafc;
-  padding: 18px;
-  margin-top: 15px;
   border-radius: 8px;
 }
-.application_base_info:not(:last-child) {
-  margin-right: 50px;
-}
-.application_base_info > li {
+.service_base_info > li,
+.commodity_information {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
@@ -183,41 +207,45 @@ export default {
   color: #242c43;
   line-height: 20px;
 }
-.application_base_info > li > span:first-child {
-  width: 6em;
+.service_base_info > li:not(:first-child) {
+  margin-top: 18px;
+}
+.service_base_info > li > span:first-child,
+.commodity_information > span:first-child {
   flex-shrink: 0;
   white-space: nowrap;
   color: #8890a7;
-  text-align: right;
-}
-.application_base_info > li:not(:first-child) {
-  margin-top: 20px;
 }
-.application_base_info > li > span:nth-child(2) {
+.service_base_info > li > span:nth-child(2) {
   color: #242c43;
 }
 .commodity_information {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
   margin-top: 30px;
 }
+.commodity_information > span:nth-child(2) {
+  color: #58617a;
+}
 .commodity_information > span:first-child {
-  flex-shrink: 0;
-  width: 6em;
-  font-size: 14px;
-  color: #8890a7;
   line-height: 40px;
 }
+.commodity_information > .commodity_text {
+  flex-grow: 1;
+  padding: 13px 18px;
+  background-color: #f9fafc;
+  border-radius: 5px;
+}
 .commodity_information > .btn_container {
   margin-bottom: -15px;
 }
 .commodity_information > .btn_container > .el-button {
-  margin: 0 30px 15px 0;
   border-width: 2px;
 }
+.commodity_information > .btn_container > .el-button,
+.commodity_information > .btn_container > .el-input-number {
+  margin: 0 20px 15px 0;
+}
 .commodity_action {
-  margin-top: 50px;
+  margin-top: 60px;
   text-align: right;
 }
 .commodity_action > .el-button {
@@ -228,12 +256,12 @@ export default {
 </style>
 
 <style>
-.application_info.apaas_button .el-button--primary {
+.service_info.apaas_button .el-button--primary {
   color: #fff;
   background-color: #515fe7;
   border-color: #515fe7;
 }
-.application_info .el-input-number .el-input-number__decrease {
+.service_info .el-input-number .el-input-number__decrease {
   top: 2px;
   left: 2px;
   width: 38px;
@@ -241,7 +269,7 @@ export default {
   border-radius: 8px 0 0 8px;
   border-right-width: 2px;
 }
-.application_info .el-input-number .el-input-number__increase {
+.service_info .el-input-number .el-input-number__increase {
   top: 2px;
   right: 2px;
   width: 38px;
@@ -249,7 +277,7 @@ export default {
   border-radius: 0 8px 8px 0;
   border-left-width: 2px;
 }
-.application_info .el-input-number .el-input__inner {
+.service_info .el-input-number .el-input__inner {
   border-width: 2px;
 }
 </style>

src/pages/service_shop/yysdDetail.vue

@@ -51,6 +51,7 @@ export default {
         .get("/apaas/hubApi/market/baseInfo", {
           params: {
             id: this.id,
+            is_shop: 1,
           },
         })
         .then(({ data }) => {